@charset "UTF-8";



/* ------------------------------------------------------------

 独自リセット・共通スタイル

------------------------------------------------------------ */



html {

  scroll-behavior: smooth;

}

/*for SP*/

@media screen and (max-width:750px) {

  .font-size-S {

      font-size: 14px;

  }

  .font-size-M {

      font-size: 16px;

  }

  .font-size-M2 {

      font-size: 20px;

  }

  .font-size-L {

      font-size: 28px;

  }

}



/*for PC*/

@media screen and (min-width:750px) {

  .font-size-S {

      font-size: 18px;

  }

  .font-size-M {

      font-size: 20px;

  }

  .font-size-M2 {

      font-size: 28px

  }

  .font-size-L {

      font-size: 48px;

  }

}



body {

  /* 游ゴシック体 */

  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;

  background: #e6e6e6;

  color: #5a544d;

}



a {

  text-decoration: none;

  transition-duration: 0.2s;

}

@media (min-width: 960px) {

  a:hover {

    transition-duration: 0.2s;

  }

}



@media (min-width: 960px) {

  a[href^="tel:"] {

    pointer-events: none;

  }

}

p {

  line-height: 1.6em;

}



ul, ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



section img {

  display: inline-block;

  vertical-align: bottom;

  width: 100%;

  max-width: 750px;

  height: auto;

}



*:focus {

  outline: none;

}



/*PCでは無効（改行しない）*/

.br-sp{

  display: none;

}



/*スマートフォンでは有効（改行する）*/

@media screen and (max-width:768px) {

  .br-sp{

      display: block;

  }

}

/* ------------------------------------------------------------

  body-wrapper

------------------------------------------------------------ */

.body-wrapper {

  position: relative;

  overflow-x: hidden;

  background: #fff;

  max-width: 750px;

  margin: auto;

}



/* ------------------------------------------------------------

  header

------------------------------------------------------------ */

header {

  position: relative;

  top: 0;

  left: 50%;

  max-width: 750px;

  width: 100%;

  transform: translateX(-50%);

  background: #fff;

  border-bottom: 1px solid #b5b5b5;

  z-index: 100;

}



header .inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2%;

  padding: 2%;

}



header h1 {

  width: 40%;

}

header h1 a {

  display: flex;

  align-items: center;

}

header nav {

  width: 60%;

}



header ul {

  text-align: right;

}



header ul li img {

  width: 80%;

}



@media screen and ( min-width:750px) {

  header h1 {

  padding-bottom: 3%;

}

}



/* ------------------------------------------------------------

  main

------------------------------------------------------------ */

.cta {

  background-color: #feefe7;

}

.cta_box {

  text-align: center;

  padding: 8% 0;

}

.reflection {

  position: relative;

  width: 95%;

  margin: auto;

  overflow: hidden;

  animation: anime1 0.8s ease 0s infinite alternate;

  transform-origin:center;

}

@keyframes anime1 {

  from {

    transform: scale(0.95,0.95);

  }

  to {

    transform: scale(1,1);

  }

}

.tell_cta {

  margin-top: 3%;

  position: relative;

}

.tell_cta img {

  width: 95%;

}

.cta_btn_tell {

  position: absolute;

  top: 42%;

  left: 50%;

  transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  color: #fff;

  font-weight: bold;

  font-size: 1.4rem;

}

@media screen and ( min-width:750px) {

  .cta_btn_tell {

    font-size: 2.8rem;

  }

}



.section01 {

  margin-top: -8%;

}

.section01 p {

  text-align: center;

  padding: 3% 2%;

}



.section02 {

  background-color: #e5f1fb;

  padding: 5% 0;

  margin-top: -2px;

}

.box {

  background-color: white;

  width: 90%;

  margin: 5% auto;

  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);

  border-radius: 10px;

  padding: 10px;

} 

.section02 p {

  text-align: center;

  margin-top: 10px;

}



.section04 {

  text-align: center;

}

.slider-container {

  max-width: 600px;

  margin: 0 auto;

}

.balloon1 {

  position: relative;

  display: inline-block;

  margin: 3% 0;

  padding: 0.5% 5%;

  min-width: 120px;

  max-width: 100%;

  background: #f897a1;

  font-weight: bold;

}

.balloon1:before {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  margin-left: -5px;

  border: 5px solid transparent;

  border-top: 5px solid #f897a1;

}

.balloon1 p {

  margin: 0;

  padding: 0;

  color: #fff;

}

.value-display {

  border: #333 solid 1px;

  width: 80%;

  margin: auto;

}

.slider {

  width: 90%;

  margin-top: 8%;

}

.slide {

  display: block;

  width: 40%;

  margin-right:auto

}

.triangle3{

  width: 0;

  height: 0;

  border-left: 30px solid transparent;

  border-right: 30px solid transparent;

  border-top: 20px solid #f897a1;

  margin: auto;

}

.exchange {

  display: flex;

  width: 100%;

  justify-content: center;

  gap: 2%;

  border: #5a544d solid 1px;

  padding: 5px;

  border-radius: 10px;

  margin: 2% 0;

}

.rate-display,.exchange-amount-display {

  width: 100%;

  font-weight: bold;

}

.rate {

  background-color: #f897a1;

  color: #fff;

  padding: 1% 8%;

  border-radius: 30px;

}

#exchangeAmount {

  color: #0181c7;

}

.notes {

  text-align: left;

  font-size: 0.7rem;

}



@media screen and ( min-width:750px) {

  .slider-container {

    top: 12%;

  }

  .exchange {

    padding: 2%;

    margin: 5% 0;

  }

  .notes {

    font-size: 1rem;

  }

}





.section05 {

  background-color: #fcf0e6;

  padding: 5% 0;

}

.recommend {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  margin-top: 20px;

  position: relative;

}

.recommend p {

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  font-weight: bold;

  position: relative;

}

.recommend p::before {

  position: absolute;

  left: 5%;

  top: 30px;

  transform: translateY(-50%);

  font-size: 40px;

  color: white;

  font-family: "Shippori Mincho", serif;

}

.recommend p:nth-child(1) {

  background-color: #f1d5d1;

}

.recommend p:nth-child(1)::before {

  content: "01";

}

.recommend p:nth-child(4) {

  background-color: #f2bfbb;

}

.recommend p:nth-child(4)::before {

  content: "02";

}

.recommend p:nth-child(5) {

  background-color: #f3beac;

}

.recommend p:nth-child(5)::before {

  content: "03";

}

.recommend::before{/* beforeでもafterでも*/

  content: "";

  position: absolute;

  height: 40px;

  width: 100%;

  clip-path: polygon(0 0,50% 100%,100% 0);/* ココ */

  background-color: #f1d5d1;/* デモは青色の部分 */

  left: 0;

  bottom: -40px; /* bottomにピッタリくっつけたいので三角の高さ分下にずらす */

}



.section05 .inner {

  text-align: center;

  margin-top: 60px;

  background-image: url(../img/hiyoko.webp);

  background-repeat: no-repeat;

  background-size: 100px;

  background-position: 100% 0% ;

}



.section05 ul {

  text-align: left;

  width: 70%;

  margin: 15px auto;

}

.section05 ul li::before {

  content: "";

  display: inline-block;

  vertical-align: middle;

  margin-right: 5px;

  width: 30px;

  height: 30px;

  background-image: url(../img/check.webp);

  background-size: contain; /* 画像を要素に合わせて調整 */

  background-repeat: no-repeat;

}

.section05 .inner .font-size-L {

  color: #ff6997;

  font-weight: bold;

}

.section05 .box {

  box-shadow: none;

}

.section05 .box p span {

  color: #ff6997;

  font-weight: bold;

}



.safety {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  background-color: #f3beac;

  text-align: center;

  padding: 10px;

  color: white;

  font-weight: bold;

}

.safety::before,.safety::after {

  content: '';

  width: 0;

  height: 0;

  border-left: 8px solid transparent;

  border-right: 8px solid transparent;

  border-top: 8px solid #fcf0e6;

}



.section06 {

  padding: 5% 0;

  background: repeating-linear-gradient(

    45deg, /* 斜めの角度 */

    #f1d5d1,

    #f1d5d1 0.5px, /* fcf0e6の色を4px表示 */

    #fcf0e6 2px,

    #fcf0e6 5px /* f1d5d1の色を4px表示（合計8pxで繰り返し） */)

}

.section06 .box .inner {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 25px;

}

.section06 .box .inner img {

  width: 30%;

}

.reason {

  color: #0181c7;

  font-family: "Shippori Mincho", serif;

  font-size: 14px;

  font-weight: bold;

}

.section06 h3 span {

  color: #f897a1;

}

.section06 .box .font-size-S {

  margin-top: 15px;

}





.section07 {

  background-color: #e5f1fb;

  padding: 5% 0;

}

.stepbar {

  margin: 0 auto;

  width: 80%;

}



.stepbar .stepbarwrap {

  margin: 2em 0;

  position: relative;

}



.stepbar .stepbarwrap .steptitle {

  display: inline-flex;

  align-items: flex-start;

}



.stepbar .stepbarwrap .steptitle .stepcircle {

  display: inline-block;

  width: 3em;

  height: 3em;

  color: #f897a1;

  text-align: center;

  font-weight: bold;

  z-index: 1;

}



.stepbar .stepbarwrap .steptitle .stepcircle span {

  display: inline-block;

  line-height: 1.2em;

  font-size: 0.8em;

  font-weight: bold;

  position: relative;

  top: 0.9em;

}



.stepbar .stepbarwrap .steptitle .title {

  margin: 0 1em;

  font-weight: bold;

  color: #0181c7;

}



.stepbar .stepbarwrap .steptxt {

  margin-left: 4em;

  background-color: white;

  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);

  border-radius: 10px;

  padding: 10px;

}



.stepbar .stepbarwrap .steptxt .txt a {

  color: #0071bc;

  text-decoration: underline;

}



.stepbar .stepbarwrap .stepline {

  width: 1.5px;

  height: calc(100%);

  background-color: #808080;

  position: absolute;

  top: 2em;

  left: 1.5em;

}



.stepbarwrap:last-of-type .stepline:last-of-type {

  display: none;

}



@media screen and (max-width: 960px) {

  .stepbar {

    width: 90%;

  }

}





.section08 {

  padding: 8% 0;

  background-image: url(../img/section08_back.webp);

}

.section08 h2 {

  color: #f7931e;

  text-align: center;

  margin-bottom: 4%;

}

.review {

  width: 95%;

  margin: auto;

}

.review img {

  margin: auto;

  width: 95%;

  object-fit: cover;

}

.slick-slide {

  height: auto !important;

}



.section09 {

  background-color: #fbede9;

  padding: 5% 0;

}

.section09 h2 {

  margin-bottom: 3%;

}

.accordion {

  width: 95%;

  margin: 20px auto;

}



.accordion-item {

  margin-bottom: 20px;

  border-radius: 10px;

  background-color: white;

}



.accordion-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  cursor: pointer;

  text-align: left;

}



.accordion-header p {

  padding: 0 10px 0 5px;

}



.question-mark {

  padding: 8px 18px;

  font-size: 28px;

  color: white;

  border-radius: 10px 0 0 10px;

  background-color: #f897a1;

}



.toggle-icon {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 25px;

  height: 25px;

  margin-right: 10px;

  border-radius: 50%;

  color: white;

  background-color: #5a544d;

  flex-shrink: 0;

}



.accordion-content {

  position: relative;

  padding: 10px;

  display: none;

  text-align: left;

}



.accordion-content.open {

  display: block;

}



.accordion-header.open .question-mark {

  border-radius: 10px 0 0 0;

}



.section10 {

  text-align: center;

  background-color: #e5f1fb;

  padding-bottom: 5%;

}

.section10 .box {

  position: relative;

  padding-top: 20px;

}

.section10 .box::before {

  content: "";

  display: block;

  width: min(24.5333333333vw, 60px);

  height: min(30.8vw, 115px);

  background: url(../img/section10_man.webp) no-repeat center center;

  background-size: contain;

  position: absolute;

  left: 0;

  bottom: 0;

  z-index: 0;

}

.section10 .box::after {

  content: "";

  display: block;

  width: min(24.5333333333vw, 60px);

  height: min(30.8vw, 115px);

  background: url(../img/section10_woman.webp) no-repeat center center;

  background-size: contain;

  position: absolute;

  right: 0;

  bottom: 0;

  z-index: 0;

}

.section10 a img {

  position: relative;

  width: 75%;

  margin-top: 10px;

  z-index: 1;

}



@media screen and (min-width:750px) {

  .section10 .box::before {

  width: min(24.5333333333vw, 160px);

  height: min(30.8vw, 215px);

}

.section10 .box::after {

  width: min(24.5333333333vw,160px);

  height: min(30.8vw, 215px);

}

.section10 a img {

  width: 60%;

}

}

/* ------------------------------------------------------------

  form

------------------------------------------------------------ */

.section_Form {

  background-color: #e4f4fe;

  scroll-margin-top: 50px;

  padding-bottom: 5%;

}



.section_Form p{

  text-align: center;

  margin-top: 3%;

  line-height: 1.8rem;

}



.section_Form p span {

  font-size: 1.2rem;

  font-weight: bold;

  color: #fa4141;

}



.notices_box {

  background-color: #fff;

  width: 95%;

  margin: auto;

  border-radius: 5px;

  padding: 2%;

  font-size: .9rem;

  margin-top: 2%;

}



.notices_box span {

  text-decoration: underline #333333;

}



.form {

  width: 97%;

  max-width: 700px;

  margin: auto;

  margin-top: 5%;

  background-color: #fff;

  box-shadow: 0 0 5px gray;

  padding: 2% 2% 8%;

}



.require {

  border: solid 1px #fa4141;

  color: #fa4141;

  padding: 0.2% 1%;

  border-radius: 10%;

  font-size: 0.9rem;

  margin-right: 3%;

}

.any {

  border: solid 1px #666666;

  color: #666666;

  padding: 0.2% 1%;

  border-radius: 10%;

  font-size: 0.9rem;

  margin-right: 3%;

}



.form_item {

  border-bottom: solid 1px #cccccc;

  padding-bottom: 2%;

  margin: 5% 0;

}



.form_head {

  font-weight: bold;

  margin-bottom: 5%;

  color: #333333;

}



.radio_box {

  display: flex;

  flex-wrap: wrap;

  gap: 10%;

}



.form_item label {

  font-size: 1.2rem;

  padding-left: 5%;

  padding-bottom: 3%;

  color: #333333;

}



.zip_input_text {

  width: 20%;

  max-width: 400px;

  border: 1px solid #ddd;

  border-radius: 6px;

  height: 40px;

  flex: inherit;

  font-size: 16px;

  padding-left: 1em;

}



.input_text {

  width: 100%;

  max-width: 400px;

  border: 1px solid #ddd;

  border-radius: 6px;

  height: 40px;

  flex: inherit;

  width: 100%;

  font-size: 16px;

  padding-left: 1em;

}



.annotation {

  color: #777777;

  font-size: 0.9rem;

}



.add_head {

  color: #333333;

  font-size: 0.95rem;

  font-weight: bold;

  margin-top: 5%;

}



.money {

  display: flex;

  align-items: center;

  gap: 2%;

}



.money .input_text {

  width: 60%;

}



.yen {

  font-size: 1.2rem;

}



.form_item select {

  width: 60%;

  border: 1px solid #ddd;

  border-radius: 6px;

  height: 40px;

  background: #fff;

  font-size: 16px;

  padding-left: 1em;

}



.form_item textarea {

  width: 100%;

  border: 1px solid #ddd;

  border-radius: 6px;

  height: 100px;

  background: #fff;

  font-size: 16px;

  padding-left: 1em;

}



.button {

  position: relative;

  display: flex;

  justify-content: space-around;

  align-items: center;

  margin: 0 auto;

  width: 85%;

  padding: 5% 25px;

  color: #FFF;

  transition: 0.3s ease-in-out;

  font-weight: 600;

  background-image: linear-gradient(90deg, rgba(247, 180, 30, 1), rgba(247, 147, 30, 1));

  border: #fff solid 2px;

  border-radius: 3px;

  border-radius: 50px;

  box-shadow: 0 0 5px gray;

}

.button:after {

  content: '';

  width: 10px;

  height: 10px;

  border-top: 3px solid #FFF;

  border-right: 3px solid #FFF;

  transform: rotate(45deg) translateY(-50%);

  position: absolute;

  top: 46%;

  right: 20px;

  border-radius: 1px;

  transition: 0.3s ease-in-out;

}

.button:hover {

  transform: translateY(-2px);

  box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);

  cursor: pointer;

}



.form_attention {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  gap: 2%;

  width: 97%;

  margin: auto;

  margin-top: 8%;

}



.form_attention img {

  width: 35%;

}



.attention_box {

  background-color: #fff;

  border: solid 1px #666666;

  padding: 2% 1%;

  font-size: 0.9rem;

  color: #333333;

  margin-bottom: 2%;

}



.attention_box ul li {

  margin-bottom: 2%;

}





@media screen and ( min-width:750px) {

 .section_Form {

  scroll-margin-top: 80px;

}



 .form {

  padding: 10px 50px 30px;

}

}



/* ------------------------------------------------------------

  footer

------------------------------------------------------------ */

.footer {

  text-align: center;

  padding: 1rem 0 0.5rem;

  font-size: 0.9rem;

  background: #42b9d5;

}



.footer p {

  margin-top: 5%;

  font-size: 0.9rem;

  color: #fff;

}

.footer a {

  color: #fff;

}



/* ------------------------------------------------------------

  floating

------------------------------------------------------------ */



.floating-banner {

  display: none;/*最初は隠す*/

  position: fixed; /* バナーを追従させる */

  z-index: 99999; /* 他の要素の下に隠れないように */

  bottom: 0; /* バナーの上下の位置 */

  right: 0; /* バナーの左右の位置 */

  width: 100vw; /* バナーの横幅 */

  background-color: rgba(0, 0, 0, 0.5);

  padding: 1%;

  text-align: center;

}

.floating-banner img {

  max-width: 90%; /* 画像の最大幅 */

  margin: auto;

}



/*フッターまでスクロールしたら消す*/

.is-hidden {

  visibility: hidden;

  opacity: 0;

}



@media screen and ( min-width:750px) {

.floating-banner {

  display: none;/*最初は隠す*/

  position: fixed; /* バナーを追従させる */

  z-index: 99999; /* 他の要素の下に隠れないように */

  bottom: 0; /* バナーの上下の位置 */

  left: 50%;

    transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

  width: 750px; /* バナーの横幅 */

  }



.floating-banner img {

  max-width: 60%; /* 画像の最大幅 */

  margin: auto;

  }

}



/* ------------------------------------------------------------

  check

------------------------------------------------------------ */

.Check {

  padding-top: 10%;

}



.whiteback_check {

  text-align: center;

}



.whiteback_check h2 {

  font-size: 2.0rem;

  color: #333333;

}



.whiteback_check p {

  background-color: #ededed;

  width: 85%;

  margin: auto;

  font-size: 0.8rem;

  padding: 2% 0;

  margin-top: 3%;

}



.Check .form {

  box-shadow: none;

}



.Check .form table {

  margin: auto;

  margin-bottom: 10%;

}



.cf_head {

  font-weight: bold;

  border-bottom: solid 1px #f7931e;

}



.cf {

  padding: 2% 0 4% 2%;

}



.common_btn_s {

  position: relative;

  display: flex;

  justify-content: space-around;

  align-items: center;

  margin: 5% auto;

  width: 25%;

  padding: 1% 0;

  font-weight: bold;

  color: #666666;

  cursor: pointer;

}



@media screen and ( min-width:750px) {

 .whiteback_check p {

  width: 70%;

}

.Check .form {

  padding: 10px 20px 30px;

}

.Check .form table {

  width: 650px;

}

}



/* ------------------------------------------------------------

  thanks

------------------------------------------------------------ */

.Thanks {

  padding-top: 10%;

  text-align: center;

  padding-bottom: 10%;

}



.whiteback_thanks {

  text-align: center;

  padding: 0 3%;

}



.whiteback_thanks h2 {

  font-size: 2.0rem;

  color: #333333;

}



.Thanks p {

  padding: 2% 0;

  margin-top: 3%;

  text-align: left;

}



.thanks_flow {

  width: 95%;

  margin: auto;

  text-align: center;

  margin-top: 10%;

  border-top: solid 10px #f7931e;

  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);

  padding: 5% 2%;

  padding-bottom: 10%;

}



.thanks_flow h3 {

  font-size: 1.6rem;

  color: #333333;

}



.thanks_flow a {

  background-color: #ff4707;

  color: #fff;

  padding: 5%;

  box-shadow: 0 0 8px #999;

}



.return-btn {

  margin: auto;

  margin-top: 10%;

  border: solid 1px #333333;

  width: 40%;

  border-radius: 50px;

  padding: 2% 0;

  font-weight: bold;

  font-size: 1.2rem;

}