/* ========================================
       リセット・基本設定
       ======================================== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* ========================================
       ヘッダー全体
       - PC最大幅: 1920px
       - 画面中央に配置
       ======================================== */

    .lp-header {
      position: relative;
      width: 100%;
      margin: 124px auto 0;
      /* ヘッダーの高さ（画像サイズに合わせて調整してください） */
      height: 1100px;
      overflow: hidden;
      background-color: #fabe00;
      @media screen and (max-width: 1900px) {
        height: calc((1100 / 1900) * 100vw );
        margin: calc((124 / 1900) * 100vw ) auto 0;
      }
    }

    /* 画像を配置するための基準コンテナ */
    .lp-header__inner {
      position: relative;
      width: 100%;
      max-width: 1920px;
      height: 100%;
      margin: 0 auto;
    }

    /* ========================================
       画像共通スタイル
       ======================================== */
    .lp-header__img {
      position: absolute;
      display: block;
      /* 画像の縦横比を維持 */
      object-fit: contain;
    }

    /* ----------------------------------------
       重なり順（z-index）※数値が大きいほど手前に表示
       優先順位（上から）:
         1. 中央上
         2. 中央下
         3. 右上
         4. 左上（PC）/ 左下（SP）
       ---------------------------------------- */

    /* 1. 中央・上の画像（最前面） */
    .lp-header__img--center-top {
      z-index: 4;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
			width:calc(2742px / 2);
			height:calc(1455px / 2);
      @media screen and (max-width: 1900px) {
        width:calc(((2742 / 2) /1900) * 100vw );
        height:calc(((1455 / 2) /1900) * 100vw );
        top: calc((100 / 1900) * 100vw );
      }
    }

    /* 2. 中央・下の画像 */
    .lp-header__img--center-bottom {
      z-index: 3;
      top: 860px;
      left: 50%;
      transform: translateX(-50%);
			width:1056px;
			height:195px;
      @media screen and (max-width: 1900px) {
        width:calc((1056 /1900) * 100vw );
        height:calc((195 /1900) * 100vw );
        top: calc((860 / 1900) * 100vw );
      }
    }

    /* 3. 右上の画像 */
    .lp-header__img--right-top {
      z-index: 2;
      top: 240px;
      right: 9%;
      max-width: 401px;
    }

    /* 4. 左上の画像（PC表示） */
    .lp-header__img--left-top {
      z-index: 1;
      top: 220px;
      left: 13%;
      width: 25%;
      max-width: 377px;
    }

    /* 4. 左下の画像（PCでは非表示・SPで表示） */
    .lp-header__img--left-bottom {
      display: none;
      z-index: 1;
    }

    /* ========================================
       SP（スマートフォン）表示
       768px以下で切り替え（max-width使用）
       ======================================== */
    @media screen and (max-width: 768px) {

      /* SP用にヘッダー高さを調整 */
      .lp-header {
        height: calc((1300 / 750) * 100vw);
        margin: 80px auto 0;
      }

      /* 中央・上の画像 */
      .lp-header__img--center-top {
        top: calc((120 / 750) * 100vw);
				width:calc(((1236 / 2) / 750) * 100vw);
				height:calc(((1442 / 2) / 750) * 100vw);
        max-width: none;
      }

      /* 中央・下の画像 */
      .lp-header__img--center-bottom {
        top: calc((890 / 750) * 100vw);
				width:calc((635 / 750) * 100vw);
				height:calc((360 / 750) * 100vw);
        max-width: none;
      }

      /* 右上の画像 */
      .lp-header__img--right-top {
        top: calc((120 / 750) * 100vw);
        right: 0;
        width: calc((360 / 750) * 100vw);
        max-width: none;
      }

      /* PC用の左上画像はSPでは非表示 */
      .lp-header__img--left-top {
        display: none;
      }

      /* SP用の左下画像を表示 */
      .lp-header__img--left-bottom {
        display: block;
        bottom:  calc((260 / 750) * 100vw);
        left: 0;
        width:  calc((315 / 750) * 100vw);
        max-width: none;
      }
    }

@media screen and (min-width: 768px) {
  .pc-none{
    display: none!important;
  }
}
@media screen and (max-width: 768px) {
  .sp-none{
    display: none!important;
  }
}

.message{
  background-image: url(img/message_bk.png);
  background-color: #fff;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  @media screen and (max-width: 768px) {
    background-image: url(img/message_bk_sp.png);
  }
  & .text{
    height: calc(730px / 2);
    padding: 200px 0 0;
    text-align: center;
    font-size: 30px;
    line-height: 1.8;
    @media screen and (max-width: 1900px) {
      height: calc((365 / 1900) * 100vw );
      padding: calc((200 / 1900) * 100vw ) 0 0;
      font-size: calc((30 / 1900) * 100vw );
    }
    @media screen and (max-width: 768px) {
      height: calc((560 / 750) * 100vw);
      padding: calc((200 / 750) * 100vw) 0 0;
      font-size: calc((36 / 750) * 100vw);
    }
  }
  & .photo{
    width: 100%;
    background-color: #fff;
    & .photo_inner{
      width: 1160px;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      @media screen and (max-width: 768px) {
        width: 100%;
        display: block;
      }
      & .left{
        padding: 20px 0 0 0;
        text-align: left;
        & img{
          @media screen and (max-width: 768px) {
            width: calc((500 / 750) * 100vw);
          }
        }
      }
      & .right{
        text-align: right;
        @media screen and (max-width: 768px) {
          position: relative;
        }
        & img{
          @media screen and (max-width: 768px) {
            margin-top: -3vw;
            position: relative;
            width: calc((500 / 750) * 100vw);
          }
        }
      }
    }
  }
  & .link_area{
    width: 100%;
    padding: 70px 0 80px;
    background-color: #fff;
    text-align: center;
    @media screen and (max-width: 768px) {
      padding: calc((70 / 750) * 100vw) 0 calc((80 / 750) * 100vw);
    }
    & img{
      @media screen and (max-width: 768px) {
        width: calc((530 / 750) * 100vw);
      }
    }
  }
}

	.procedure{
    background-color: #fabe00;
		& .title{
      margin: 0 0 50px;
			background-image: url(img/procedure_title_bk.png);
			background-size: 1px 100%;
			text-align: center;
			& img{
				width:calc(480px / 2);
				/* height:calc(435px / 2); */
        @media screen and (max-width: 768px) {
          width: calc((290 / 750) * 100vw);
          height: auto;
        }
			}
		}
		& .yane{
			background-image: url(img/procedure_yane_bk.png);
			background-size: 1px 100%;
			text-align: center;
			& img{
				width:calc(2016px / 2);
				height:calc(254px / 2);
        @media screen and (max-width: 768px) {
          width: calc((690 / 750) * 100vw);
          height: auto;
        }
			}
		}
    & .deco{
      padding: 100px 0 160px;
      text-align: center;
      @media screen and (max-width: 768px) {
        padding: calc((60 / 750) * 100vw) 0 calc((60 / 750) * 100vw);
      }
      & img{
        width: calc(1770px /2);
        @media screen and (max-width: 768px) {
          width: calc((630 / 750) * 100vw);
        }
      }
    }
	}


/* ==========================================
   SP時のスタイル（デフォルト：縦一列）
   ========================================== */
.grid-container {
  display: grid;
  grid-template-columns: 1fr; /* 縦1列に配置 */
  gap: 30px;                  /* ボックス同士の隙間 */
  max-width: 1040px;
  margin: 0 auto;
  @media screen and (max-width: 768px) {
    width: calc((470 / 750) * 100vw);
    gap: calc((30 / 750) * 100vw);
  }
  /* ボックス個別のデザイン */
  & .grid-item {
    background-color: #000;
    border-radius: 16px;
    color: #fff;
    font-size: 23px;
    padding: 22px 22px 30px;
    @media screen and (max-width: 768px) {
      width: 100%;
      padding: 0;
      font-size: calc((24 / 750) * 100vw);
      padding: calc((18 / 750) * 100vw) calc((18 / 750) * 100vw) calc((36 / 750) * 100vw);
    }
    & h3 {
      margin-bottom: 20px;
      padding: 12px 0;
      border-bottom: 2px solid #caa357;
      text-align: center;
      @media screen and (max-width: 768px) {
        margin-bottom: calc((20 / 750) * 100vw);
        padding: calc((12 / 750) * 100vw) 0;
      }
    }

  }
  & .step1{
    .text{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px;
      @media screen and (max-width: 768px) {
        margin-bottom: calc((22 / 750) * 100vw);
      }
      .sns{
        display: flex;
        & img{
          width:calc(127px / 2);
          height:calc(127px / 2);
          margin-left: 10px;
          border:1px solid #fff;
          border-radius: 15px;
          @media screen and (max-width: 768px) {
            width:calc((60 / 750) * 100vw);
            height:calc((60 / 750) * 100vw);
            margin-left: calc((10 / 750) * 100vw);
            border-radius: calc((15 / 750) * 100vw);
          }
        }
      }
    }
    & .dot_leader_box{
      margin-bottom: 17px;
      letter-spacing: .1em;
      @media screen and (max-width: 768px) {
        margin-bottom: calc((17 / 750) * 100vw);
      }
    }
    & .dot_leader_box_insta{
      & .text-right{
        padding-right: 10px;
        @media screen and (max-width: 768px) {
          padding-right:  calc((10 / 750) * 100vw);
        }
      }
    }
    & img{
			width:calc(264px / 2);
			height:calc(76px / 2);
      @media screen and (max-width: 768px) {
        width:calc((125 / 750) * 100vw);
        height: auto;
      }
    }
  }
  & .step2{
    background-image: url(img/step2_bk.png);
		background-position: bottom right;
    background-size: calc(733px / 2) calc(476px / 2);
    background-repeat: no-repeat;
    @media screen and (max-width: 768px) {
      height: calc((340 / 750) * 100vw);
      background-size: calc((300 / 750) * 100vw) auto;
    }
    & img{
			width:calc(301px / 2);
			height:calc(76px / 2);
      @media screen and (max-width: 768px) {
        width:calc((140 / 750) * 100vw);
        height: auto;
      }
    }
  }
  & .step3_1{
    & img{
			width:calc(384px / 2);
			height:calc(75px / 2);
      @media screen and (max-width: 768px) {
        width:calc((180 / 750) * 100vw);
        height: auto;
      }
    }
    & .botder_title{
      width: 100%;
      padding: 7px;
      line-height: 1;
      border: 1px solid #fff;
      margin-bottom: 17px;
      letter-spacing: .1em;
      @media screen and (max-width: 768px) {
        padding: calc((7 / 750) * 100vw);
        margin-bottom: calc((17 / 750) * 100vw);
      }
    }
    & .text{
      margin-bottom: 14px;
      line-height: 1.3;
      @media screen and (max-width: 768px) {
        margin-bottom: calc((14 / 750) * 100vw);
      }
    }
    & .steplist{
      color:#caa357;
      line-height: 1.3;
    }
  }
  & .step3_2{
    & img{
			width:calc(384px / 2);
			height:calc(75px / 2);
      @media screen and (max-width: 768px) {
        width:calc((180 / 750) * 100vw);
        height: auto;
      }
    }
    & .botder_title{
      width: 100%;
      padding: 7px;
      line-height: 1;
      border: 1px solid #fff;
      margin-bottom: 17px;
      letter-spacing: .1em;
    }
    & .text{
      margin-bottom: 14px;
      line-height: 1.3;
    }
    & .steplist{
      margin-bottom: 14px;
      color:#caa357;
      line-height: 1.3;
    }
  }
}


/* ==========================================
   PC時のスタイル（画面幅768px以上：2×2の並び）
   ========================================== */
@media (min-width: 768px) {
  .grid-container {
    /* 横に2つ均等に並べる（1fr を 2回リピート） */
    grid-template-columns: repeat(2, 1fr); 
  }
}

.dot_leader_box {
  display: flex;       /* 子要素を横並びにする */
  align-items: center; /* 文字の下辺に合わせる（中央なら center） */
  width: 100%;         /* 幅いっぱいに広げる（お好みで調整） */
  padding: 7px;
  line-height: 1;
  border:1px solid #fff;
}

.line {
  flex-grow: 1;        /* 親要素の余った余白をこの要素ですべて埋める */
  border-bottom: 1px dashed #fff; /* 下辺に破線をつける（dotted にすると点線になります） */
  margin: 0 10px;      /* 文字と線の間に少し隙間を作る */
  position: relative;
}


  .guidelines{
    background-color: #fff;
    border-bottom: 70px solid #caa357;
    @media screen and (max-width: 768px) {
      padding: calc((50 / 750) * 100vw) calc((50 / 750) * 100vw) 0;
      border-bottom: calc((30 / 750) * 100vw) solid #caa357;
    }
    & h3{
      margin: 0 0 80px;
      padding: 0 0 0 .2em;
      color: #caa357;
      font-size: 50px;
      font-size: 40px;
      letter-spacing: .2em;
      text-align: center;
      @media screen and (max-width: 768px) {
        font-size: calc((40 / 750) * 100vw);
        margin: 0 0 calc((40 / 750) * 100vw);
      }
    }
    & .column{
      margin: 0 0 80px;
      @media screen and (max-width: 768px) {
        margin: 0 0 calc((40 / 750) * 100vw);
      }
      & h4{
        margin: 0 auto 32px;
        line-height: 1;
        text-align: center;
        @media screen and (max-width: 768px) {
          margin: 0 auto calc((20 / 750) * 100vw);
        }
        & .title{
          padding: 0 0 15px .2em;
          color: #caa357;
          font-size: 38px;
          font-size: 28px;
          letter-spacing: .2em;
          @media screen and (max-width: 768px) {
            padding: 0 0 calc((5 / 750) * 100vw) .2em;
            font-size: calc((28 / 750) * 100vw);
          }
        }
        & .deco{
          width: 220px;
          display: inline-block;
          border-bottom:12px solid #caa357;
          @media screen and (max-width: 768px) {
            width: calc((160 / 750) * 100vw);
            border-bottom:calc((8 / 750) * 100vw) solid #caa357;
          }
        }
      }
      & p{
        font-size: 38px;
        font-size: 28px;
        line-height: 1.8;
        text-align: center;
        @media screen and (max-width: 768px) {
          font-size: calc((28 / 750) * 100vw);
        }
      }
      & p.sp_textleft{
        @media screen and (max-width: 768px) {
          text-align: left;
        }
      }
      .iteminfo{
        margin: 0 0 80px;
        font-size: 38px;
        font-size: 28px;
        line-height: 1.8;
        @media screen and (max-width: 768px) {
          font-size: calc((28 / 750) * 100vw);
          margin: 0 0 calc((60 / 750) * 100vw);
        }
        & .title{
          color: #caa357;
          text-align: center;
        }
        & .item_list{
          width: 450px;
          margin: 0 auto;
          text-align: left;
          @media screen and (max-width: 768px) {
            width: calc((340 / 750) * 100vw);
          }
        }
      }
    }
    & .column-last{
      margin: 0;
      padding-bottom: 150px;
      @media screen and (max-width: 768px) {
        padding-bottom: calc((80 / 750) * 100vw);
      }
    }
  }