@charset "utf-8";
/* ========================
  voice
======================== */

#contentWrap {
  margin: 80px 0;
}

/* common
--------------- */
figure {
  position: relative;
  height: fit-content;
}

.caption01 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(25, 77, 111, 0.5);
  padding: 15px 28px;
  color:#FFF;
  font-size: clamp(11px, 1.25vw, 12px);
  line-height: 2.0;
  letter-spacing: 0.1em;
  z-index: 5;
}
.caption02 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(1, 111, 83, 0.5);
  padding: 15px 28px;
  color:#FFF;
  font-size: clamp(11px, 1.25vw, 12px);
  line-height: 2.0;
  letter-spacing: 0.1em;
  z-index: 5;
}
.caption03 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(80, 161, 151, 0.5);
  padding: 15px 28px;
  color:#FFF;
  font-size: clamp(11px, 1.25vw, 12px);
  line-height: 2.0;
  letter-spacing: 0.1em;
  z-index: 5;
}


.column_1 {

}
.column_2 {
  display: flex;
  justify-content: space-between;
}
.column_2 > figure {
  max-width: 600px;
  width:48.5%;
}
.column_2 .txt {
  width:48.5%;
}
.column_2 .madori {
  width:48.5%;
  padding-right:5%;
}
.column_2.mrgT30 {
  margin-top: 30px;
}

.column_3 {
  display: flex;
  justify-content: space-between;
}
.column_3 li {
  width: calc((100% - 6%) / 3);
}


.title_Box {
  padding: 70px 0;
  color: #686d71;
  text-align: center;
}

.title_Box h2 {
  font-size: 26px;
  letter-spacing: 0.2em;
  padding: 0 0 20px;
}

.title_Box p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.12em;
}

.title_Box p.copy {
  font-size: 22px;
  line-height: 1.8;
  letter-spacing: 0.12em;
  padding: 0 0 0px;
}

.title_Box p.copy02 {
  font-size: 22px;
  line-height: 1.8;
  letter-spacing: 0.12em;
  padding: 0 0 20px;
}

sup {
  font-size: 10px;
  vertical-align: super;
}





/* contents
--------------- */
.main {}

.main .title_Box p.copy {
  padding: 0 0 40px;
}


.voice_Wrap {

}
.voice_Wrap.voice01 { background: #efeee8;}
.voice_Wrap.voice02 { background: #dce6de;}
.voice_Wrap.voice03 { background: #dce6e6;}
.voice_Wrap + .voice_Wrap {
  margin-top: 60px;
}

.btn_Block {
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.btn_Block > figure {
  width:50%;
}
.btn_Block > .profile_Wrap {
  width:50%;
  padding: 5% 5% 2%;
}



.profile {
  text-align: center;
}
.profile .icn {
  max-width: 80px;
  width:94%;
  margin: 0 auto 20px;
}
.profile h3 {
  font-size: clamp(16px, 1.54vw, 20px);
  letter-spacing: 0.06em;
  padding-bottom: 5px;
  border-bottom: 1px solid #231815;
  margin-bottom: 20px;
}
.profile ul.owner {
  display: inline-block;
  padding: 10px 0 30px;
}
.profile ul.owner li {
  text-align: left;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.profile ul.owner li:first-child {
  text-align: center;
}
.profile p{
  font-size: clamp(12px, 1.25vw, 14px);
  line-height: 1.8;
  letter-spacing: 0.03em;
}
.btn_readmore.color01 {
  width: 150px;
  margin: 0 auto;
  padding: 0.8em;
  background-color: #dfded5;
}
.btn_readmore.color02 {
  width: 150px;
  margin: 0 auto;
  padding: 0.8em;
  background-color: #cdd7cf;
}
.btn_readmore.color03 {
  width: 150px;
  margin: 0 auto;
  padding: 0.8em;
  background-color: #ced7d7;
}

.profile .btn_readmore a {
  display: inline-block;
  font-size: clamp(12px, 1.25vw, 14px);
  letter-spacing: 0.03em;
  position: relative;
  padding-right: 1.5em; /* アイコンのスペース */
}

.profile .btn_readmore a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 13px;  /* 適宜調整 */
  height: 13px;
  background: url('../img/icn_triangle_down.svg') center center no-repeat;
  background-size: contain;
  transition: background-image 0.3s ease;
}

/* 開いたときにアイコンを上向き画像に変更 */
.voice_Wrap.open .btn_readmore a::after {
  background-image: url('../img/icn_triangle_up.svg');
}

.profile .btn_readmore a:hover {
  opacity: .5;
  transition:.3s;
}




.panel {
  display: none; /* ---------------------------------------------------------------------- */
  padding: 80px 50px 50px;
}


.title {
  padding: 0 0 60px;
}
.title .icn {
  max-width: 80px;
  width:94%;
  margin: 0 auto 30px;
}
.title h4 {
  text-align: center;
  font-size: clamp(16px, 1.54vw, 20px);
  margin-bottom: 60px;
}


.reason {
  padding: 0 0 60px;
  text-align: center;
}
.reason h4 {
  display: inline-block;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.8;
  letter-spacing: 0.06em;
  padding: 0 10px 5px;
  border-bottom: 2px solid #FFF;
  margin-bottom: 30px;
}
.reason p {
  text-align: left;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 2.0;
  letter-spacing: 0.06em;
  margin-bottom: 30px;
}
.reason ul.img {
  display: flex;
  justify-content:space-between;
}
.reason ul.img li {
  width: calc((100% - 3%) / 3);
}

.box {
  padding: 0 0 50px;
}
.box .sttl {
  font-size: clamp(16px, 1.54vw, 20px);
  line-height: 2.0;
  letter-spacing: 0.06em;
  padding: 0 0 30px;
}
.box p {
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 2.0;
  letter-spacing: 0.06em;
}

.box.white {
  border:3px solid #FFF;
  padding: 20px 20px;
  margin-bottom: 60px;
}
.box.white.point_Box {
  margin-bottom: 10px;
  padding: 20px 40px;
}

.box.white.point_Box {
}
.box.white.point_Box .point {
  margin: 0 auto;
  text-align: center;
  padding: 50px 0 30px;
}
.box.white.point_Box .point img {
  width: 300px;
}
.box.white.point_Box .sttl {
  text-align: center;
}
/* .box.white.point_Box p.copy {
  padding: 0 0 30px;
} */
.box.white.point_Box ul {
  padding: 0 0 10px;
}
.box.white.point_Box ul li:last-child {
  margin-bottom: 0px;
}
.box.white.point_Box ul li figure {
  margin-bottom: 20px;
}
.box.white.point_Box ul li h5 {
  font-size: clamp(16px, 1.54vw, 18px);
  line-height: 1.8;
  letter-spacing: 0.06em;
  padding: 0 0 10px;
}
.box.white.point_Box ul li p {
}

.fig60_txt40 {
  display: flex;
  justify-content: space-between;
}
.fig60_txt40 figure {
  max-width: 700px;
  width:55%;
  margin-right: 3%;
}
.fig60_txt40 .txt {
  width:40%;
}


.madori .plan {;
  padding-bottom: 5px;
  padding-left: 0.5em;
  border-bottom:1px solid #727171;
  margin-bottom: 30px;
}
.madori .plan img {
  width: 50px;
}
.madori figure {
  max-width: 450px;
  margin: 0 auto;
}

.txt p + figure {
  margin-top: 30px;
}

p.notes_txt {
  font-size: clamp(12px, 1.54vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.06em;
}
p.notes_txt.mrgT30 {
  font-size: clamp(12px, 1.54vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin-top: 30px;
}


.txt40_fig60 {
  display: flex;
  justify-content: space-between;
}
.txt40_fig60 .txt {
  width:35%;
  margin-right: 3%;
}
.txt40_fig60 figure {
  max-width: 700px;
  width:65%;
}





/*--------------------------------------------------------
  tab/sp
--------------------------------------------------------*/
@media only screen and (max-width: 1024px) {


}

/*--------------------------------------------------------
  sp
--------------------------------------------------------*/
@media only screen and (max-width: 767px) {

  #contentWrap {
    margin: 40px 0;
  }


  /* common
  --------------- */
  .caption01,
  .caption02,
  .caption03 {
    padding: 10px 15px;
    line-height: 1.6;
  }

  .column_2 {
    flex-direction: column;
  }
  .column_2 > figure {
    max-width: 100%;
    width:100%;
    order:2;
  }
  .column_2 .txt {
    width:100%;
    padding: 0 0 20px;
    order:1;
  }
  .column_2 .madori {
    width:100%;
  }

  .column_2 figure + figure {
    margin-top: 10px;
  }
  .column_2.mrgT30 {
    margin-top: 20px;
  }

  .column_3 {
    flex-direction: column;
  }
  .column_3 li {
    width: 100%;
  }



  .title_Box {
    padding: 40px 0;
    width: 94%;
    margin: 0 auto;
  }

  .title_Box h2 {
    /* font-size: 20px; */
    font-size: 16px;
    padding: 0 0 20px;
  }

  .title_Box p {
    font-size: 13px;
    /* text-align: left; */
    /* text-align: justify; */
    text-align: center;
  }

  .title_Box p.copy {
    /* font-size: 18px; */
    font-size: 15px;
    text-align: center;
  }

  .title_Box p.copy02 {
    font-size: 18px;
    padding: 0 0 20px;
    text-align: center;
  }

  .inner .title_Box {
    width: 100%;
  }



  /* contents
  --------------- */
  .main .title_Box p.copy {
    padding: 0 0 20px;
  }


  .voice_Wrap + .voice_Wrap {
    margin-top: 30px;
  }

  .btn_Block {
    flex-direction: column;
  }
  .btn_Block > figure {
    width:100%;
  }
  .btn_Block > .profile_Wrap {
    width:100%;
    padding: 10% 5% 4%;
  }

  .profile h3 {
    margin-bottom: 10px;
  }
  .profile ul.owner {
    padding: 10px 0 10px;
  }

  .btn_readmore.color01,.btn_readmore.color02,.btn_readmore.color03 {
      width: 130px;
      padding: 0.6em;
}


  .panel {
    padding: 40px 20px 20px;
  }

  .title {
    padding: 0 0 30px;
  }
  .title .icn {
    margin: 0 auto 20px;
  }
  .title h4 {
    margin-bottom: 30px;
  }


  .reason {
    padding: 0 0 30px;
  }
  .reason h4 {
    margin-bottom: 10px;
  }
  .reason p {
    margin-bottom: 20px;
  }
  .reason .scroll-hint {
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
  }
  .reason ul.img {
    display: flex;
    justify-content:space-between;
    width:1000px;
  }
  .reason ul.img li {
    width: calc((100% - 3%) / 3);
  }


  .box {
    padding: 0 0 30px;
  }
  .box .sttl {
    line-height: 1.8;
    padding: 0 0 10px;
  }
  .box p {
    line-height: 1.8;
  }


  .box.white {
    padding: 10px 20px;
    margin-bottom: 30px;
  }
  .box.white.point_Box {
    margin-bottom: 10px;
    padding: 10px 20px;
  }
  .box.white:last-child {
    margin-bottom: 0px;
  }

  .box.white.point_Box {
  }
  .box.white.point_Box .point {
    padding: 20px 0 20px;
  }
  .box.white.point_Box .point img {
    width: 80%;
  }
  .box.white.point_Box .sttl {
  }
  /* .box.white.point_Box p.copy {
    padding: 0 0 30px;
  } */
  .box.white.point_Box ul {
    padding: 0 0 10px;
  }
  .box.white.point_Box ul li {
    margin-bottom: 30px;
  }
  .box.white.point_Box ul li figure {
    margin-bottom: 10px;
  }
  .box.white.point_Box ul li h5 {
    font-size: clamp(16px, 1.54vw, 18px);
    line-height: 1.8;
    letter-spacing: 0.06em;
    padding: 0 0 10px;
  }


  .fig60_txt40 {
    flex-direction: column;
  }
  .fig60_txt40 figure {
    max-width: 100%;
    width:100%;
    margin-right: 0%;
    order:2;
  }
  .fig60_txt40 .txt {
    width:100%;
    padding: 0 0 20px;
    order:1;
  }

  p.notes_txt.mrgT30 {
    margin-top: 20px;
  }


  .txt40_fig60 {
    flex-direction: column;
  }
  .txt40_fig60 .txt {
    width:100%;
    margin-right: 0%;
    margin-bottom: 10px;
  }
  .txt40_fig60 figure {
    max-width: 100%;
    width:100%;
  }



}