@charset "UTF-8";
/*---------------------------------------------------
ミックスイン
---------------------------------------------------*/
/*====================================================
Foundation
・全てのベースとなるスタイル
・基本的にコードの追加はしない
====================================================*/
body {
  margin: 0;
  color: #333;
}

h1 {
  line-height: 0 !important;
}

/* GoogleFont 丸ゴシック */
h2, h3, h4, h5, h6, .text-rounded {
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

h2 {
  margin-bottom: 1.3rem;
}
@media screen and (min-width: 768px) {
  h2 {
    text-align: center;
  }
}

h3 {
  margin-bottom: 1rem;
}

h4 {
  margin-bottom: 0.8rem;
}

main {
  /* スクロール時の紙芝居アニメーションのための記述 */
  position: relative;
  z-index: 1;
}

footer {
  /* スクロール時の紙芝居アニメーションのための記述 */
  position: relative;
  z-index: 2;
}

section {
  position: relative;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: center;
  background-size: cover;
}

.takayama {
  overflow-x: inherit;
}

/*====================================================
Layout
・パーツの配置や、ラッパーとしての幅や高さなどを決定するクラス
====================================================*/
section > .container {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/*====================================================
Object
・ページをまたいで使われる各種パーツを定義するクラス
・そのパーツ内で常に同様の振る舞いをするものに関してのみスタイルを定義
====================================================*/
/*====================================================
Utility
・調整用のクラス
・margin、padding、font-size、colorなどを付与するのに使用
・他種類のパーツ間の空き調整や、パーツとして認められないような、自由な振る舞いをする要素に対してこちらのクラスを使用
====================================================*/
/* スクロール時の紙芝居アニメーションのための記述 */
@media screen and (min-width: 768px) {
  .scroll-fixed {
    -webkit-position: sticky;
    position: sticky;
    top: 0;
  }
}

/* フレックス解除 */
.flex-none {
  flex: inherit !important;
}

/* サンプル画像のオーバーレイテキスト(SAMPLE)*/
.overlay-sample {
  position: relative;
}
.overlay-sample::after {
  display: inline-block;
  position: absolute;
  top: calc(50% - 2rem);
  left: calc(50% - 4rem);
  z-index: 1;
  content: 'SAMPLE';
  color: #ccc;
  font-size: 2rem;
  font-weight: bold;
  -webkit-mix-blend-mode: multiply;
  mix-blend-mode: multiply;
  transform: rotate(45deg);
}

/* ステップの矢印用のスタイル */
.step li {
  position: relative;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .step li {
    margin-bottom: inherit !important;
  }
}
.step li::after {
  font-family: 'icomoon';
  content: '\e90a';
  display: inline-block;
  position: absolute;
  bottom: -3rem;
  left: calc(50% - 1rem);
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .step li::after {
    content: "" !important;
    top: calc(50% - 1.5rem);
    right: -0.5rem;
    bottom: inherit !important;
    left: inherit !important;
  }
}

#start, #flow, #choice {
  background-image: url("../img/bg_bubble.png");
}
@media screen and (min-width: 768px) {
  #start, #flow, #choice {
    background-image: url("../img/bg_bubble_pc.png") !important;
  }
}

/* 背景色画像をオーバーレイするための記述 */
#flow, #choice {
  z-index: 0;
}
#flow::before, #choice::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -1;
}

/*---------------------------------------------------
ヒーロー
---------------------------------------------------*/
@media screen and (min-width: 992px) {
  .bg-hero {
    background-image: url("../img/bg_hero.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  #btn-scroll-down {
    bottom: 0;
    left: calc(50vw - 2.5rem);
  }
}
/*---------------------------------------------------
LINE査定とは
---------------------------------------------------*/
#about {
  background-image: url("../img/bg_sky.png");
}
@media screen and (min-width: 768px) {
  #about {
    background-image: url("../img/bg_sky_pc.png") !important;
  }
}

/*---------------------------------------------------
査定はかんたん3ステップ
---------------------------------------------------*/
#flow::before {
  -webkit-filter: hue-rotate(120deg);
  filter: hue-rotate(120deg);
}

/*---------------------------------------------------
選べる買取り方法
---------------------------------------------------*/
#choice::before {
  -webkit-filter: hue-rotate(240deg);
  filter: hue-rotate(240deg);
}
#choice .step li:last-child::after {
  /* 最後の要素のみステップの矢印は非表示 */
  display: none;
}