@charset "UTF-8";

html { font-size: 62.5%; overflow-x: hidden;}
body { padding: 0; margin: 0; box-sizing: border-box; overflow-x: hidden; font-size: 1.6rem; font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
.wrapper,footer { max-width: 650px; margin: 0 auto;}
img {margin: 0; padding: 0; width: 100%; display: block; vertical-align: baseline;}
.relative { position: relative;}
.absolute { position: absolute; top: 0; left: 0;}
.slick-slider {padding: 0;}
a {display: block; text-decoration: none;}
li { list-style-type: none;}
.cta .slick-prev,.cta .slick-next {display: none;}
.pcBg { position: fixed; background: url(../img/bg.webp); background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; z-index: -1; background-position: center bottom;}
.bgwrapper { box-shadow: 0px 0px 27px 0px rgba(185, 185, 185, 0.7); margin: 0 auto; width: 650px;}
@media (max-width: 649px) {
  .bgwrapper { width: 100%;}
}
/* fadeUp */
.fadeUp{ animation-name:fadeUpAnime; animation-duration:0.7s; animation-fill-mode:forwards; opacity:0;}
.fadeUpTrigger{ opacity: 0;}
@keyframes fadeUpAnime{
  from { opacity: 0; transform: translateY(40px);}
    to { opacity: 1; transform: translateY(0);}
}



/* -----------------------------------------------------
	floatingBarBlock
----------------------------------------------------- */
.floatingBarBlock {  opacity: 0; position: fixed; bottom: 0; left: 0; right: 0; margin: auto; z-index: 700; width: 610px; max-width: 645px; transition: opacity 0.6s;}
.floatingBarBlock a { position: absolute; z-index: 100; bottom: 0; left: 0; width: 100%; height: 100%; transition: .6s;}
.floatingBarBlock a:hover { opacity: .7;}
@media (max-width: 649px) {
  .floatingBarBlock { width: 96%;}
}




/* -----------------------------------------------------
 FV
----------------------------------------------------- */
header#fv { max-width: 650px; aspect-ratio: 750/1676; margin: 0 auto; position: relative;  overflow-y: hidden;}
header#fv .copy {z-index: 100; position: absolute;}
header#fv .map.absolute { width: 650px;  aspect-ratio: 750/332; bottom: 2%; top: auto; right: 0; left: auto; z-index: 1;}
header#fv .absolute .item01 { width: 45.5%; right: 0; top: 8%; position: absolute;  transition: 1s;
  box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
header#fv .absolute .item02 { width: 32%; right: 30%; left: auto; top: 0; position: absolute;  transition: 1s;}
header#fv .filter.active {filter: blur(0px); border-radius: 0%;}
header#fv .slider { margin-inline: auto; overflow: hidden; /* 画像がはみ出ないようにする */ width: 650px; aspect-ratio: 750/1320;}
header#fv .slick-img img { width:870px; aspect-ratio:1000/1320; margin-left: -10%;}
header#fv .slick-img img.item01, header#fv .slick-img img.item05{ max-width:880px; aspect-ratio:1000/1320; margin-left: -17%;}

/* ズームアップアニメーション */
@keyframes zoomUp {
  0% { transform: scale(1);}
  100% { transform: scale(1.15);}
}
.add-animation {animation: zoomUp 10s linear forwards;}

/* 左から右にスライド */
@keyframes slideRight {
  0% {transform: translateX(0);}
  100% {transform: translateX(80px);}
}
header#fv .slide-right { animation: slideRight 14s linear forwards;}
header#fv  .slide-left {animation: slideLeft 10s linear forwards;}
header#fv .slick-list { max-width: 650px; aspect-ratio: 750 / 1320; width: 100%;}



@media (max-width: 649px) {
header#fv .map.absolute { width: 100%;}
header#fv  .slider { margin-inline: auto; overflow: hidden; /* 画像がはみ出ないようにする */ width: 100%!important; aspect-ratio: 750/1320;}
header#fv  .slick-img img { width:130%; aspect-ratio:1000/1320; margin-left: -30%;}
header#fv  .slick-img img.item01 {width:140%; margin-left: -20%;}
header#fv  .slick-img img.item02 {width:136%; margin-left: -17%;}
header#fv  .slick-img img.item05 {width:140%; margin-left: -20%;}
header#fv  .copy {z-index: 100; position: absolute; width: 100%;}
}


/* -----------------------------------------------------
 SNS
----------------------------------------------------- */
#sns {position: relative;}
#sns .filter {filter: blur(50px);  transition: 1s; border-radius: 50%;}
#sns .filter.active {filter: blur(0px); border-radius: 0%;}
#sns .item01 { width: 31%; left: 14.666%; z-index: 1; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#sns .item02 { width: 49.6%; left: 38.2%; top: 5%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#sns .item03 { width: 28.4%; left: 0; top: 80%; top: 14.4%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#sns .item04 { width: 65%; left: 19%; top: 19.6%; z-index: 1;}
#sns .item05 { width: 20%; left: 63.6%; top: 28.55%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#sns .item06 { width: 33.2%; left: 6.53%; top: 32.5%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#sns .item07 { width: 45.5%; left: 49%; top: 43%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#sns .item08 { width: 60.18%; left: 32.8%; top: 35.8%;}

#sns .reportArea { width: 650px; margin: 0 auto; position: absolute; bottom: 70px;}
#sns .reportArea .reportslider { display: flex; justify-content: center; padding: 0; list-style: none;}
#sns .reportArea .reportslider li { width: 513px; margin: 0 16px;}
#sns .reportArea .reportslider li img { display: block; width: 100%; height: auto ;box-shadow: 6.428px 7.66px 16.38px 4.62px rgba(215, 216, 213, 0.17)}
#sns .slick-prev:before, .slick-next:before { display: none;}
#sns .reportArea .reportslider .slick-prev { left: 2.5%; background: url(../img/arrow_left.svg) no-repeat; background-size: 100% auto; cursor: pointer; width: 10.92%; height: 57px; z-index: 1;}
#sns .reportArea .reportslider .slick-next { right: 2.5%; background: url(../img/arrow_right.svg) no-repeat; background-size: 100% auto; cursor: pointer; width: 10.92%; height: 57px; z-index: 1;}

@media (max-width: 649px) {
  #sns .reportArea { width: 100vw; bottom: 1.4%;}
  #sns .reportArea .reportslider li { width: 78.822vw; margin: 0 8px;}
}




/* -----------------------------------------------------
 CTA
----------------------------------------------------- */
.cta div { position: relative;}
.cta .item01 { width: 64.4%; top: -49%; left: 2%;}
.cta .caseslideCont { position: relative;}
.cta .caseArea { width: 650px; margin: 0 auto; position: absolute; top: 0;}
.cta .caseArea .caseslider { display: flex; justify-content: center; padding: 0; list-style: none; margin: 0;}
.cta .caseArea .caseslider li { width: 312px; margin: 0 13px;}
.cta .slick-prev:before, .slick-next:before { display: none;}
.cta .slick-dots li {display: none;}

/* シュミレーション */
.cta .hide {display: none; position: relative;}
.cta .simulationArea { width: 520px; margin: 0 auto; border: 1px solid #375545; border-radius: 5px; font-size: 2.8rem; color: #375545; margin-bottom: 50px;}
.cta .simulationArea .simulationBtnArea { cursor: pointer; position: relative; width: 100%; padding: 30px 45px;box-sizing: border-box;}
.cta .simulationArea img.arrow { position: absolute; width: 2.5%; top:47%; right: 40px; transition: 1s;}
.cta .simulationArea img.arrow.up { transform: rotate(180deg); transform-origin:50% 50%}
.cta .simulationArea #simulationForm .before { width: 85%; padding: 30px 0 60px; font-size: clamp(1.4rem, 3.77vw, 2.6rem); color: #375545; transition: opacity 0.5s ease-in-out; margin: 0 auto; border-top: 1px solid #ccc;}
.cta .simulationArea #simulationForm .after {  width: 85%; padding: 30px 0 40px; color: #375545; transition: opacity 0.5s ease-in-out; margin: 0 auto; border-top: 1px solid #ccc;}
.cta .simulationArea #simulationForm .after .illust { width: 80%; margin: 0 auto;}
.cta .simulationArea #simulationForm label, .cta #simulationForm select { width: 100%; display: block;}
.cta .simulationArea #simulationForm label, .cta #simulationForm select { border: none;}
.cta .simulationArea #simulationForm label { line-height: 1; margin-bottom: 4.5%;}
.cta .simulationArea #simulationForm select { aspect-ratio: 500/90; margin-bottom: 8.8%; padding: 0 7%;font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
.cta .simulationArea #simulationForm input { width: 44%; aspect-ratio: 250/90;  margin-bottom: 8.8%; border: none; font-size: clamp(1.4rem, 3.77vw, 2.6rem); padding: 0 7%;}
.cta .simulationArea #simulationForm .selectwrapper { position: relative;}
.cta .simulationArea #simulationForm .selectwrapper select {  font-size: clamp(1.4rem, 3.77vw, 2.6rem); -webkit-appearance: none; appearance: none;}
.cta .simulationArea #simulationForm .selectwrapper::after { content: ""; position: absolute; width: 12px; height: 12px; border-right: 2px solid #333; border-bottom: 2px solid #375545; transform: rotate(45deg) translateY(-100%); top: 50%; right: 9%;}
.cta .simulationArea #simulationForm button { width: 100%; aspect-ratio: 500/90; border: none; border-radius: 0; font-size: clamp(1.4rem, 3.77vw, 2.6rem); color: #fff; background-color: #e9b947;}

/* シュミレーション画面切り替え */
.cta .simulationArea #simulationForm .hidden,.cta .simulationArea #simulationForm .illust {display: none; pointer-events: none; /* クリックなどのイベントを無効化 */}
.cta .simulationArea #simulationForm .visible,.cta .simulationArea #simulationForm .illust { display: block; /* animationプロパティ設定 */ animation-name: fadeIn; animation-fill-mode:forwards; animation-duration:1.2s;}
  /*フェードインアニメ*/
@keyframes fadeIn{
  0% { opacity: 0;}
  100% { opacity: 1;}
}

/* シュミレーション文字色 */
.cta .simulationArea #simulationForm .default-color { color: #375545;}
.cta .simulationArea #simulationForm .selected-color { color: #375545;}
.cta .simulationArea #simulationForm select option { color: #375545;}
.cta .simulationArea #simulationForm select.default-color option[value=""] { color: #ccc; }
.cta .simulationArea #simulationForm select:invalid {  color: #ccc;
}

/* シュミレーション結果 */
.cta .simulationArea #simulationForm .after { text-align: center; letter-spacing: 0.05em;}
.cta .simulationArea #simulationForm .after p:nth-of-type(1) { margin: 0; font-size: clamp(1.4rem, 4.3vw, 2.8rem); margin-bottom: 2%;}
.cta .simulationArea #simulationForm .after p:nth-of-type(2) { position: relative; font-size: clamp(1.4rem, 4.3vw, 2.8rem); font-family: YuMincho, "Hiragino Mincho ProN",	serif; line-height: 1; margin: 0; display: inline-block; padding: 0 2%; margin-bottom: 15px; color: #b1bcb1;}
.cta .simulationArea #simulationForm .after p:nth-of-type(2)::before { position: absolute; content: ""; display: block; transform: rotate(0deg); background-color: #375545; width: 100%; height: 1px; top: 50%; left: 0;}
.cta .simulationArea #simulationForm .after p:nth-of-type(2) span.number { position: relative; font-size: clamp(2.4rem, 8vw, 5.2rem); font-family: YuMincho, "Hiragino Mincho ProN",	serif;}
.cta .simulationArea #simulationForm .after p:nth-of-type(3) { width: 3%; margin: 0 auto; line-height: 0;}
.cta .simulationArea #simulationForm .after p:nth-of-type(4) { font-size: clamp(2.4rem, 8vw, 5.2rem); font-family: YuMincho, "Hiragino Mincho ProN",	serif; line-height: 1; margin-top: 10px; margin-bottom: 20px;}
.cta .simulationArea #simulationForm .after p:nth-of-type(4) span.number { font-size: 8rem; font-family: YuMincho, "Hiragino Mincho ProN",	serif; color: #e9b947;}
.cta .simulationArea #simulationForm .after p.notice { font-size: clamp(1rem, 2.46vw, 1.6rem); letter-spacing: 0.01em; margin: 0;}

/* CTAボタン */
.cta .ctaBtn { width: 90.7%; transition: .6s; margin: 0 auto 80px;}
.cta .ctaBtn:hover { opacity: .6;}

.cta .btnCont {
  margin: 0 auto;
}
.cta .btnCont img {
  animation: anime1 0.75s ease 0s infinite alternate;
  transform-origin:center;
  /* box-shadow: 5px 8.66px 20px 0px rgba(87, 57, 57, 0.25);  */
}
@keyframes anime1 {
  from {
    transform: scale(0.95,0.95);
  }
  to {
    transform: scale(1.05,1.05);
  }
}


#errorTxtBox { font-size: 1.3rem; padding: 0; color: red; margin-bottom: 20px;}


@media (max-width: 649px) {
.cta .caseArea { width: 100vw; bottom: 1.4%;}
.cta .caseArea .caseslider li { width: 48vw; margin: 0 4vw;}
/* .cta .simulationArea #simulationForm .before,.cta .simulationArea #simulationForm .after { top: 5%;} */
.cta .ctaBtn {margin-bottom: 20%;}
.cta .simulationArea { width: 80%; margin: 0 auto 8%; border: 1px solid #375545; border-radius: 5px; font-size: 2.8rem; color: #375545;}
.cta .simulationArea .simulationBtnArea { cursor: pointer; position: relative; width: 100%; padding: 6% 7% ;box-sizing: border-box; font-size: clamp(1.2rem, 3.55vw, 2.6rem);}
.cta .simulationArea img.arrow { position: absolute; width: 2.5%; top:47%; right: 8%; transition: 1s;}
.cta .simulationArea img.arrow.up { transform: rotate(180deg); transform-origin:50% 50%}
.cta .simulationArea #simulationForm .before { width: 85%; padding: 4% 0 10%; font-size: clamp(1.4rem, 3.77vw, 2.6rem); color: #375545; transition: opacity 0.5s ease-in-out; margin: 0 auto; border-top: 1px solid #ccc;}
.cta .simulationArea #simulationForm .after { width: 85%; padding: 4% 0 10%; color: #375545; transition: opacity 0.5s ease-in-out; margin: 0 auto; border-top: 1px solid #ccc;}
.cta .simulationArea #simulationForm label {margin-bottom: 3%;}
.cta .simulationArea #simulationForm .after p:nth-of-type(1) {margin-top: 5%;}
.cta .simulationArea #simulationForm .after p:nth-of-type(2) {margin-bottom: 2%;}
.cta .simulationArea #simulationForm .after p:nth-of-type(4) { font-size: 3rem; font-family: YuMincho, "Hiragino Mincho ProN",	serif; line-height: 1; margin-top: 2x; margin-bottom: 20px;}
.cta .simulationArea #simulationForm .after p:nth-of-type(4) span.number { font-size: 5rem; font-family: YuMincho, "Hiragino Mincho ProN",	serif; color: #e9b947;}
}




/* -----------------------------------------------------
 ask
----------------------------------------------------- */
#ask .relative {cursor: pointer;}
#ask img { display: block;}
#ask .absolute { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.2s ease;}
#ask .absolute.show { opacity: 1;}




/* -----------------------------------------------------
〆
----------------------------------------------------- */
#end .filter {filter: blur(50px);  transition: 1s; border-radius: 50%;}
#end .filter.active {filter: blur(0px); border-radius: 0%;}
#end .item01 { width: 46.13%; left: 9.33%; top: 9%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#end .item02 { width: 20.4%; left: 73.6%; top: 21%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#end .item03 { width: 17.33%; left: 0; top: 40%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#end .item04 { width: 65.86%; left: 34.13%; top: 45%; z-index: 1;}
#end .item05 { width: 19.33%; left: 21.33%; top: 59.8%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#end .item06 { width: 65.86%; left: 17.46%; top: 73.7%; box-shadow: 16.712px 19.917px 37.62px 0.38px rgba(176, 186, 163, 0.4);}
#end .item07 { width: 65.2%; left: 29.5%; top: 88%;}




/* -----------------------------------------------------
 faq
----------------------------------------------------- */
#faq {background-color: #fff;}
#faq .accordion { padding-bottom: 15%;}
#faq .accordion { margin: 0 auto; color: #2f3f39;}
#faq .accordion dl { width:88%; margin: 0 auto; margin-bottom:5%; padding: 5% 7.33%; box-sizing: border-box;}
dl { background-color: #f7f7f5;}
#faq .accordion dt {  font-size: clamp(1.5rem, 4vw, 2.6rem); cursor: pointer; position: relative; background: url("../img/faq_Q.webp") no-repeat left 8px; background-size: 4.5%; }
#faq .accordion dt p { line-height: 1.66; font-weight: normal; padding-left: 6.4%;}
#faq .accordion dd { width: 100%; padding: 0; margin: 0; border-top: 1px solid #cccccc;}
#faq .accordion dd p { font-size: clamp(1.4rem, 3.38vw, 2.2rem);}
#faq .accordion dt .faqbtn { display: block; width: 22px; height: 22px; position: absolute; top: 10px; right: 5px;}
#faq .accordion dt .faqbtn span.open { content: ""; display: block; width: 22px; height: 2px; background-color: #375545; position: absolute; top: 10px; left: 0;}
#faq .accordion dt .faqbtn span.close { content: ""; display: block; width: 2px; height: 22px; background-color: #375545; position: absolute; top: 0; left: 10px;}
#faq .accordion .faqbtn span.close { opacity: 1; transition: opacity 0.5s ease-in-out;}
#faq .accordion .faqbtn span.close.hidden { opacity: 0;}

@media (max-width: 649px) {
  #faq .accordion dl { padding: 5% 5%;}
  #faq .accordion dt { background: url("../img/faq_Q.webp") no-repeat left 4px; background-size: 4.5%; }
  #faq .accordion dt .faqbtn { width: 16px; height: 17px; position: absolute; top: 3px; right: 0px;}
  #faq .accordion dt .faqbtn span.open { content: ""; display: block; width: 17px; height: 1px; top: 8px; left: 0;}
  #faq .accordion dt .faqbtn span.close { content: ""; display: block; width: 1px; height: 17px; top: 0; left: 8px;}
}


/* -----------------------------------------------------
 usp4 ドレス
----------------------------------------------------- */
.usp4 .dressSlideArea { width: 650px; margin: 0 auto; position: absolute; bottom: 70px top0;}
.usp4 .dressSlideArea .dressslider { display: flex; justify-content: center; padding: 0; list-style: none; margin: 0;}
.usp4 .dressSlideArea .dressslider .slick-track { padding-bottom: 4%;}
.usp4 .dressSlideArea .dressslider li { width: 513px; transition: transform 0.3s ease;}
.usp4 .dressslider li.slick-center { transform: scale(1);}
.usp4 .dressslider li:not(.slick-center) { transform: scale(0.82);}
.usp4 .dressslider li img { box-shadow: 7.071px 8.426px 18.72px 5.28px rgba(215, 216, 213, 0.17);}
.usp4 .dressSlideArea .dressslider li img { display: block; width: 100%; height: auto ;box-shadow: 6.428px 7.66px 16.38px 4.62px rgba(215, 216, 213, 0.17)}
.slick-prev:before, .slick-next:before { display: none;}
.usp4 .dressSlideArea .dressslider .slick-prev { left: 2.5%; background: url(../img/arrow_left.svg) no-repeat; background-size: 100% auto; cursor: pointer; width: 10.92%; height: 57px; z-index: 1;}
.usp4 .dressSlideArea .dressslider .slick-next { right: 2.5%; background: url(../img/arrow_right.svg) no-repeat; background-size: 100% auto; cursor: pointer; width: 10.92%; height: 57px; z-index: 1;}
/* ドットのスタイルをリセット */
.usp4 .dressslider .slick-dots { position: absolute; bottom: -4%; /* ドットの位置調整 */ width: 80%; text-align: center; padding: 0; list-style: none; display: flex; justify-content: start; transform: scale(1);}
.usp4 .dressslider .slick-dots li { display: inline-block; width: 50px !important; transform: scale(1); margin: 0 3px;}
.usp4 .dressslider .slick-dots li button { background: transparent; /* 背景を透明に設定 */ border: none; /* ボーダーを削除 */ width: 50px !important; /* ドットの幅を設定 */ height: 2px; /* ドットの高さを設定 */ padding: 0; /* パディングを削除 */ cursor: pointer; /* カーソルをポインタに設定 */ transform: scale(1);}
/* ドットのスタイル */
.usp4 .dressslider .slick-dots li button::before { content: ''; /* 内容を空に設定 */ display: block; width: 50px; /* ドットの幅を設定 */ height: 2px; /* ドットの高さを設定 */ background-color: #a8afac; /* 通常のドットの色 */ transition: background-color 0.3s ease; /* 色変更の遷移を設定 */}
/* アクティブなドットのスタイル */
.usp4 .dressslider .slick-dots li.slick-active button::before {background-color: #375545;}

@media (max-width: 649px) {
  .usp4 .dressSlideArea { width: 100vw; top: 0;}
  .usp4 .dressSlideArea .dressslider li { width: 78.822vw; margin: 0 8px;}
}

@media (max-width: 649px) {
  .usp4 .dressslider .slick-dots { bottom: -5%;}
  .usp4 .dressslider .slick-dots li { width: 6vw !important; margin: 0 3px;}
  .usp4 .dressslider .slick-dots li button { width: 6vw !important; /* ドットの幅を設定 */ height: 1px; /* ドットの高さを設定 */}
  /* ドットのスタイル */
  .usp4 .dressslider .slick-dots li button::before { width: 6vw; /* ドットの幅を設定 */ height: 1px; /* ドットの高さを設定 */}
}



/* -----------------------------------------------------
 fair
----------------------------------------------------- */
.fair span.border { display: block; width: 0; height: 1px; background-color: #375545; top: 88%; left: 50%; transform: translateX(-50%);}
.fair span.border.active { width: 60%;}




/* -----------------------------------------------------
footer
----------------------------------------------------- */
footer ul { display: flex; justify-content: center; width: 100%; padding: 0; margin: 0;}
footer ul li:first-child { border-right: 1px solid #375545;}
footer ul li a { color: #375545; font-size: clamp(1.24rem, 2.92vw, 1.9rem); transition: .6s;}
footer ul li a:hover { opacity: .5;}
footer ul li a:first-child { margin-right: 26px;}
footer ul li a:last-child { margin-left: 26px;}



.error-message { font-size: 1.5rem; padding: 0;margin-bottom: 0; color: crimson; display: block; width: fit-content; padding-left: 3%; white-space: nowrap;}
@media (max-width: 649px) {
  .error-message { font-size: 1.1rem; padding: 0;margin-bottom: 0; color: crimson; display: block; width: fit-content; padding-left: 3%; white-space: nowrap;}
 
}

.txtBox { width: 73.4%; left: 50%; transform: translateX(-50%); color: #767676; letter-spacing: 0.06em; margin: 4% 0 0 0; line-height: 1.8;}
.txtBox p.txt,.txtBox a { margin: 0 0 4.5% 0; color: #767676; font-size: 2.4rem;}
.txtBox p.ttl { color: #999999; font-size: 2.1rem; margin:0 0 1.5% 0;}
@media (max-width: 649px) {
  .txtBox { width: 80%; left: 50%; transform: translateX(-50%); color: #767676; letter-spacing: 0.06em; margin: 4% 0 0 0; line-height: 1.7;}
  .txtBox p.txt,.txtBox a { margin: 0 0 4% 0; color: #767676; font-size: clamp(1.4rem, 3.7vw, 2.4rem);}
  .txtBox p.ttl { color: #999999; font-size: 2.1rem; margin:0 0 1% 0; font-size: clamp(1.2rem, 3.2vw, 2.1rem);}
}