/*ーーーーーーーーーー全体設定ーーーーーーーーーー*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #fff;
    color: #333;
    width: 100%;
}

img {
  display: block;
}

p{
  font-size: clamp(16px, 3vw, 20px);
  line-height: 2;
  padding-top: 20px;
}

ul li{
   font-size: clamp(16px, 3vw, 20px);
    margin: 10px 0;
}

ul {
    list-style-type: none;
    padding: 0 0 30px 0;
}


.photo{
  width: 100%;
  text-align: center;
}

.w100{
  width: 100%;
  padding-top: 50px;
}

.w60{
  width: 60%;
}

.w80{
  width: 80%;
  margin: 0 auto;
}

section {
    padding: 50px 0;
}

h2 {
    font-size: clamp(25px, 5vw, 40px);
    margin-bottom: 20px;
}

h3 {
    font-size: clamp(18px, 3vw, 30px);
    margin:30px 0 20px;
    color:#08324B;
    padding-top: 10px;
}

.cs{
  width: 80%;
  margin: 0 auto;
  padding-bottom: 50px;
}

.csp h2{
  padding-bottom: 50px;
}

.csp p
{
font-size: clamp(16px, 3vw, 18px);
}

.flx{
  display: flex;
  gap: 50px;
}

.flx img{
  width: 100%;
}

.flx_img{
  width: 40%;
}

.top{
  padding-top: 50px;
}



/*ーーーーーーーーーーヘッダー（ヒーローエリア）ーーーーーーーーーー*/

.hero {
    text-align: center;
}

.hero h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.hero_image{
   width: 100%;
}

.hero p {
    font-size: 26px;
    font-weight: bold;
    margin: 50px;
    background-color: #becf55;
    padding: 30px;
}






/*ーーーーーーーーーー問題定義ーーーーーーーーーー*/

section.problem{
  padding: 0px;
} 


.problem{
    margin: 0 auto;
    text-align: center;
    display: flex;
    background-color: #fbfbfb;
}


.problem p{
    font-weight: bold;
     font-size: clamp(16px, 3vw, 26px);
}

.problems_list{
    font-weight: bold;
    display: inline-block;       /* 中央寄せに効かせる */
    text-align: left;            /* 内部のテキストを左寄せ */
    padding:70px 0 100px;          /* 少し余白 */
    margin: 0 auto ;

}

.problems_list li {
    font-size: clamp(16px, 5vw, 36px);
    text-align: left;
    list-style: none; /* 必要に応じて箇条書き記号を消します */
    margin: 20 0 10 10;   /* 左余白が不要なら調整 */
    padding:15px 0 0 0
}


.problem img{
  width: 100%;
}






/*ーーーーーーーーーー共感・寄り添いーーーーーーーーーー*/

.affinity img{
width: 100%;
}
.affinity{
  padding: 0;
}




.affinity-image img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.affinity h2{
  font-size: clamp(24px, 4vw, 40px);
  margin-top: 20px;
  text-align: center;
}

.affinity h2 span{
 border-bottom: 8px double #f42314;
 padding-bottom: 2px;
}

.affinity p{
  text-align: center;
  padding-bottom: 30px;
}







/*ーーーーーーーーーー解決1ーーーーーーーーーー*/


.solution_1 img{
width: 100%;
}






/*ーーーーーーーーーーbrand anthemーーーーーーーーーー*/

.csp span,
.brand_anthem span{
  font-weight: bold;
}

.brand_anthem h2 span{
font-size: 14px;
}

.brand_anthem img{
  width: 100%;
  margin: 0 auto;
}

.sound_peacemaker img{
  width: 100%;
  margin: 0 auto;
}





/*ーーーーーーーーーー自然音・環境音についてーーーーーーーーーー*/


.about_nature_sound .container {
  justify-content: flex-end;
  padding-bottom: 100px;
}







/*ーーーーーーーーーー解決2ーーーーーーーーーー*/


section.about_range{
  padding-bottom: 0;
  width: 80%;
  margin: 0 auto;

}

.about_range{
  margin: 80px 0;
}

.about_range h2{
   font-size: clamp(20px, 5vw, 40px);
    margin: 0 auto;
    color: #000;
    padding: 10px;
    border-bottom: 3px double #000;
}



.about_range img{
  width: 100%;
  margin: 50px auto;
}

.about_range span{
  font-weight: bold;
}


.manual_img{
  width: 100%;
  display: block;
  margin-bottom: 0; /* 必要であれば追加 */
}





/*ーーーーーーーーーーベネフィットーーーーーーーーーー*/

section.benefits{
  padding: 0;
  background-color: #fff;
}



.benefits img{
width: 100%;
margin: 0 auto;
}

.benefits_3{
  width: 70%;
  margin: 50px auto 100px;
   transform: rotate(-3deg);
}

.benefits h3{
  color: #000;
}

.benefits p{
  padding-bottom: 30px;
}

.benefits_txt{
  text-align: center;
}





/*ーーーーーーーーーー証拠2ーーーーーーーーーー*/

.txt_right{
  text-align: right;
}

.evidence{
background-color: #fff;
}

.evidence img{
margin: 0 auto;
padding-top: 20px;
}

.evidence p{
  margin-top: 30px;
}

.evidence h2{
padding-top: 150px;
}

.evidence h3{
  padding-top: 70px;
}

.name{
  font-weight: bold;
}


/*ーーーーーーーーーーサウンドパスポートについてーーーーーーーーーー*/

.sound_passport img{
width: 100%;
padding-bottom: 30px;
}


.sound_passport h2{
  padding-top: 50px;
}








/*ーーーーーーーーーーofferーーーーーーーーーー*/


.offer{
  background-color: #fff;
}

.offer img{
  width: 100%;
}

.offer p{
  padding-top: 30px;
}

.offer_text span{
font-weight: bold;
color: #ff6300;
}




/*ーーーーーーーーーープロフィールーーーーーーーーーー*/


.profile{
  background-color:#ffdfaf;
  font-size: 20px;
  margin: 50px auto 20px;
  border-radius: 10px;
  padding: 20px;
}

.profile span{
  padding: 30px 0.1em 10px;
}

.profile .container{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2%;
}


.profile_left{
  flex-basis: calc(50% - 1%);
}

.profile_left h2{
  padding: 0 0 20px 0;
}
 

.profile_right{
  flex-basis: calc(50% - 1%);
}

.profile_right img{
  max-width: 100%;
  padding-bottom: 20px;
}

.profile h3{
  margin: 0px
}

.profile_list{
   color: #EB6100;
   font-weight: bold;
   font-size: clamp(20px, 2.5vw, 30px);
   padding: 30px 0;
}



/*ーーーーーーーーーーFAQーーーーーーーーーー*/

.faq{
  width: 100%;
  background-color: #ebefce
}





/*ーーーーーーーーーー登録ボタンーーーーーーーーーー*/

.btn_member img{
  max-width: 100%;
}

.photo.btn_member{
    display: flex;
  justify-content: center;
}

.btn h3{
  text-align: center;
}



/*ーーーーーーーーーーフッター ーーーーーーーーーー*/



footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}





/*ーーーーーーーーーーモバイル対応ーーーーーーーーーー*/

@media (max-width: 768px) {


  body img{
    width: 100%;
  }

  .hero p {
    font-size: 18px;
  }

  .affinity-image,
  .affinity-text {
    max-width: 100%;
    padding: 0;
  }

  .affinity-text {
    padding-top: 20px;
  }

  .recommend_img {
    width: 100%;
}

.benefits .container{
  text-align: left;
}

.flx_img{
  width: 100%;
}

.csp h2 {
    padding: 30px 0 0;
}

.evidence img {
  width: 100%;
}

.evidence h2 {
    padding-top: 50px;
}

.w60{
  width: 100%;
}

.profile{
  width: 80%;
}

.flx{
  display: block;
}

.profile .container,
.about_sound .container.flx{
  display: flex;
flex-direction: column-reverse;
}

.profile_right img{
  width: 100%;
}

.profile_right{
text-align: center;
}

.profile h3{
  text-align: center;
  margin:0 0 20px ;
}

.profile_left h2 {
    padding: 0;
    margin-bottom:10px
}

.kaimin_image img{
  width: 85%;
}

.affinity p,
.solution h3,
.solution p,
.offer h2,
.offer p,
.sound_introduce,
.special_offer p,
.howToReadText,
.privacyArea p
 {
  text-align: left;
}

.privacyArea p br
.affinity p br,
.affinity h2 br,
.special_offer p br,
.privacyArea p br,
.cta-section h2 br{
display: none;
}

.cta-section h2 {
    text-align: left;
  }




.contents_left{
  padding: 30px 0 50px;
}

.kaimin_sound_passport img,
.special_offer img {
  width: 90%;
}

.btn_section img {
  width: 100%;
}

.line_section h2{
padding-top: 20px;
}


.line_area, .benefits .container,
 .contents .container{
  display: block;
}

.line_block{
  width: 100%;
  margin-top: 10px;
}

.howToReadTitle{
  margin: 0px 0 20px;
}

.msh-table.f14 table{
  width: 100%;
}

iframe{
  width: 90% !important;
  height: 400px !important;
  padding-bottom: 50px;
}


}