* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

.container {
    width: 100%;
    margin: 0 auto;
}

.hero {
    text-align: center;
}

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

.hero_image{
   width: 100%;
}

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

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;
   
}

section.problem{
  padding: 0px;
} 


.problem{
    margin: 0 auto;
    text-align: center;
    display: flex;
}


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

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

}

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

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

ul li {
    margin: 10px 0;
}

.problem img{
  width: 100%;
  padding-bottom: 50px;
}

.btn_section{
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
    justify-content: center; /* 中央に配置 */
    align-items: center;     /* 垂直方向の中央揃え（必要なら） */
}

.btn_section img{
    width: 85%;
  
}



.profile{
  padding: 50px 30px;
  background-color:#fff8dc;
  font-size: 20px;
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
}

.profile span{
  background: linear-gradient(transparent 60%, #EB6100 100%);
  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{
  text-align: right;
}

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



.affinity {
  width: 90%;
  padding: 0.5em 1em;
    margin: 4em auto;
    font-weight: bold;
    color: #000;/*文字色*/
    background: #FFF;
    border-radius: 10px;/*角の丸み*/
}


.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;
}

.affinity img{
  width: 70%;
}

.kaimin_image{
  text-align: center;
}






section.solution{
  padding-bottom: 0;

}

.solution{
  text-align: center;
  margin: 80px 0;
}

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

.solution h3{
  color: #000;
}

.solution p{
  margin: 50px 0;
  font-size: clamp(18px, 2.5vw, 24px) ;
}



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


.benefits{
  background-color: #E0E7ED;
  padding: 50px 30px;
}

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

.benefits_left,
.contents_right{
  flex-basis: calc(40% - 1%);
}

.benefits_right,
.contents_left{
  flex-basis: calc(60% - 1%);
}

.benefits_left img,
.contents_right img{
  max-width: 100%;
  padding-bottom: 20px;
}


.benefits_list{
  font-size: clamp(18px, 3vw, 24px) ;
  margin: 50px 0 0 0;
  display: inline-block; /* 中央に配置される幅可変のブロック */
  text-align: left;      /* テキストだけ左寄せ */
 
}

.contents{
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: center;     /* 垂直方向にも中央寄せしたい場合 */
  padding: 50px 30px;
}

.st_Giga{
  background-color: #e4f1f8;
  padding: 50px 30px
}


.st_Giga img{
  width: 100%;
}

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


.offer{
  text-align: center;
   background-color: #fff;
  margin: 50px 30px;
  border-radius: 10px;
}

.offer h2{
  color: #EB6100; 
}

.kaimin_sound_passport img{
  width: 70%;
}

.kaimin_sound_passport{
   padding:30px 0 30px 10px;
}


section.offer{
  padding: 30px;
}


.special_offer .container{
 text-align: center;
}

.special_offer h2{
  text-align: center;
  margin-bottom: 30px;
  font-size: clamp(25px, 7vw, 50px) ;
}
 

.special_offer img{
  width: 60%;
  padding-bottom: 30px;
}

.sound_introduce{
  font-weight: bold;
  padding-bottom: 30px;
}


.cta-section{
  padding: 50px 30px;
}


.cta-section h2{
  text-align: center;
  margin-bottom: 0;
}

.rec_text{
  text-align: center;
}

.line_section{
  background-color:#eadb9d;
}

.line_section a{
  color:#EB6100 ;
}

.line_section a:hover{
  color:#fff;
}

.line_section .container{
  text-align: center;
}


.line_area{
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 0 10px;
    gap: 1%;
}

.line_block{
  width: 32%;
  padding:10px;
  text-align: center;
  border: 3px solid #08324B;
  border-radius: 8px;
  box-shadow: 1px 1px 4px #ffdc89;
  display: flex;
  flex-direction: column;
}

.lineBtn{
  padding: 20px 0;
}

.qrImg img{
  width: 40%;
  margin: 0 auto;
}

.line_block:nth-of-type(3) .howToReadImg {
  margin-top: auto; /* これで画像が下に寄る */
}

.howToReadTitle{
  font-size: clamp(18px, 3vw, 24px) ;
}

.howToReadText{
  width: 85%;
  margin: 0 auto;
}

.howToReadImg{
  padding-top: 20px;
  margin-top: auto;
}

.mailform{
  text-align: center;
}
.required{
  text-align: center;
  padding: 10px 0;
}

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

.privacyArea{
  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) {

  section{
    padding:20px;
  }

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

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

  .recommend_img {
    width: 100%;
}

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

.profile{
  width: 100%;
}

.profile .container{
  display: block;
}

.profile_right img{
  padding-top: 30px;
  width: 60%;
}

.profile_right{
text-align: center;
}

.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;
}


}