/* ---------------- 20TH SNAP (みんなの晴れの日スナップ) ---------------- */


.snap-box {
  margin-top: var(--g-60-40);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 21px;
}



.p-top .followme .followme__desc {
  font-size: var(--fz-18-16);
  text-align: center;
  margin-top: var(--g-20-16);
}


.snap-item {
  box-sizing: border-box;
  border: 1px solid #D7000F;
  margin: 0;
  width: calc(100% / 3 - 14px);
}


.snap-item p {
  padding: 20px;
}

.qa-box {
  margin-top: var(--g-60-40);
}

@media (max-width: 744px) {
  .snap-box {
    gap: 10px;
  }

  .snap-item {
    width: calc(100% / 2 - 5px);
  }

  .snap-item p {
    padding: 10px;
  }
}


/* ---------------- FLOW (振袖選びから成人式当日までの流れ) ---------------- */

.flow_design05 {
  margin-top: var(--g-60-40);
}


/* ステップの文字 */
span.step-icon {
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  line-height: 1;
}

span.step-icon>span {
  font-size: var(--fz-40-20);
  display: contents;
}

/* flowの全体 */
.flow_design05 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow-box {
  border-top: solid 1px #D7000F;
  border-bottom: solid 1px #D7000F;
}

.flow-box>li {
  list-style-type: none;
  position: relative;
  padding-left: 130px;
}

.flow-box>li .step-icon {
  font-size: var(--fz-14-13);
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 100vh;
  background: #D7000F;
  color: #fff;
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-box>li:not(:last-child)::before {
  content: '';
  background: #D7000F;
  width: 1px;
  height: 100%;
  position: absolute;
  top: calc(50% - -30px);
  left: 50px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.flow-box>li dl dt {
  font-weight: 600;
  color: #D7000F;
  font-size: var(--fz-18-16);
}

.flow-box>li dl dd {
  margin-left: 0;
}

ul.flow-box li:last-child dl {
  padding: 30px 0;
}

ul.flow-box li:not(:last-child) dl {
  border-bottom: solid 1px #D7000F;
  padding: 30px 0;
}


@media (max-width: 744px) {

  /* ---------------- FLOW (振袖選びから成人式当日までの流れ) ---------------- */


  /* ステップの文字 */
  .flow-box>li .step-icon {
    width: 56px;
    height: 56px;
  }


  /* flowの全体 */
  .flow-box>li {
    padding-left: 80px;
  }

  .flow-box>li:not(:last-child)::before {
    left: 28px;
  }

}

/* ---------------- Q & A (よくある質問) ---------------- */

dl.qa-box {
  border-top: 1px solid #D7000F;
  border-bottom: 1px solid #D7000F;
}

.qa-box .qa-cont {
  padding: 20px 0;
  border-bottom: 1px solid #D7000F;
}

.qa-box .qa-cont dt,
.qa-box .qa-cont dd {
  display: flex;
  align-items: center;
}

.qa-cont dt {
  padding-bottom: 5px;
}

.qa-box .qa-cont dt p {
  margin: 0;
  padding-left: 15px;
  font-weight: bold;
  width: 100%;
  color: #D7000F;
  font-size: var(--fz-18-16);
}

.qa-box .qa-cont dd p {
  margin: 0;
  padding-left: 15px;
  width: 100%;
}

.qa-box .qa-cont:last-of-type {
  border-bottom: none;
}

.qa-box .qa-cont dt::before {
  content: "Q.";
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: #D7000F;
  font-family: "Cormorant Infant", serif;
  line-height: 1.5;
  font-size: var(--fz-40-20);
}

.qa-box .qa-cont dd::before {
  content: "A.";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #B7A070;
  font-family: "Cormorant Infant", serif;
  line-height: 1.5;
  font-size: var(--fz-40-20);
}


@media (max-width: 744px) {


  .qa-box .qa-cont dt,
  .qa-box .qa-cont dd {
    display: flex;
    align-items: flex-start;
  }


}

/* ---------------- FOLLOW ME! (公式SNS) ---------------- */


.followme-btn {
  font-size: var(--fz-14-13);
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  line-height: 1;
  flex-direction: column;
  width: 14vw;
  height: 14vw;
  max-width: 300px;
  max-height: 300px;
}

ul.followme-box li {
  list-style-type: none;
  position: relative;
  text-align: center;
}

ul.followme-box {
  display: flex;
  justify-content: space-around;
}

.followme-box li a {
  border-radius: 100vh;
  background: #D7000F;
  width: 14vw;
  height: 14vw;
  max-width: 300px;
  max-height: 300px;
}

.followme-wrap {
  margin-top: var(--g-60-40);
}

span.followme-btn i {
  font-size: var(--fz-40-20);
}

li.fm-embed-ins {
  width: 100%;
}




/* SNS 埋め込み */

ul.followme-embed {
  margin-top: var(--g-60-40);
}

ul.followme-embed {
  display: flex;
  gap: 40px;
}

ul.followme-embed li {
  width: calc(100% / 3 - 10px);
}

.tiktok-embed {
  margin: 0 auto !important;
}

li.fm-embed-tik iframe,
li.fm-embed-you iframe {
  height: 558px !important;
  border-radius: 10px;
  width: 100%;
}


@media (max-width: 744px) {
  ul.followme-embed {
    gap: 10px;
    flex-direction: column;
  }

  .followme-box li a {
    width: 24vw;
    height: 24vw;
  }

  .followme-btn {
    width: 24vw;
    height: 24vw;
  }

  ul.followme-embed li {
    width: 100%;
  }


  li.fm-embed-ins,
  .fm-embed-you {
    padding-top: 0;
  }
}


/*　送信完了後の THANKSページ */
.reservation-thanks__desc {
  text-align: center;
}

.p-thanks {
  margin-top: var(--g-140-100);
}

p.rt_tit {
  margin: var(--g-40-20) 0;
  font-size: var(--fz-20-16);
}

a.basic_btn {
  width: 400px;
  height: 64px;
  font-size: var(--fz-16-14);
  color: #fff;
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: none;
  background: #D7000F;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.basic_btn-box {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 24px 0;
}

@media (max-width: 744px) {

  .rt_cont {
    text-align: left;
  }

  a.basic_btn {
    width: 100%;
    max-width: 100%;
  }

  a.basic_btn:hover {
    opacity: 0.7;
  }
}