body {
	font-family: system-ui, -apple-system, sans-serif;
	line-height: 1.7;
}

html {
	box-sizing: border-box;
	-ms-overflow-style: scrollbar;
background-color: #E5E7E8;
font-size: 2.5614vw;
font-family: "Noto Sans CJK JP", sans-serif;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

.pc{
  display:block;
  
  }
    
  .sp{
  display:none;
  }

.sec{
padding-top: 50px;
padding-bottom: 50px;
}
.sec2{
background-color: #F2F2F2;
padding-top: 100px;
padding-bottom: 100px;
  }
  .sec3{
background-color: #E6FFFE;
padding-top: 50px;
padding-bottom: 50px;
}

.fv {
display: flex;
width: 100%;
margin-bottom: 20px;
}

.fvTextBlock{
width: 40%;
padding: 13% 0px 8% 40px;
}

.fvTextBlock h1{
font-size: 4.266666667rem;
font-weight: bold;
line-height: 5.33333rem;
}

.fvTextBlock h1 span{
font-size: 4.97777778rem;
color: #F6BB57;
}

.fvTextBlock h2{
margin-top: 2.66666667rem;
font-weight: bold;
font-size: 1.7778rem;
line-height: 3.022222rem;
}

.fvTextBlock h2 span{
color: #F6BB57;
font-size: 2.1333rem;
}

.fvTextBlock .lineBtn{
display: block;
width:24rem;
height: 6.222222rem;
line-height: 6.222222rem;
border: 3px solid #293233 ;
text-align: center;
color: #293233;
text-decoration: none;
font-size: 1.6rem;
margin-top: 7.555555rem;
font-weight: bold;
}

.fvImgBlock{
background-color: #E6FFFE;
width: 60%;
display: flex;
align-items: flex-end;
}

.fvImgBlock .mainFVImg{
width: 110%;
margin-left: -15%;
object-fit: contain;
}

.cashback{
width: 90%;
max-width: 600px;
margin: 0 auto;
background-color: #FFF!important;
}

.cashback .question-toggle{
justify-content: center;
position: relative;
}

.cashback .question-toggle::after {
  content: '▶︎';
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease;
color: #333;
}

/* ▼ 開いた状態 */
.cashback .question-toggle.open::after {
  transform: translateY(-50%) rotate(270deg);
}


.basicRow{
display: flex;
width: 100%;
flex-wrap: wrap;
}

.basicImg{
width:40%;
margin-right: auto;
margin-left: auto;

}

.basicText{
  width:47%;
  margin-right: auto;
  margin-left: auto;

}

.planSec .basicImg{
  width:55%;
}

.planSec .basicText{
  width:40%;
}

.basicText h2{
font-size: 3.2rem;
font-weight: bold;
color: #293233;
margin: 0;
line-height: 110%;
}

.basicText h2 span{
letter-spacing: -0.1em;
color: #011B68;
font-size: 1.6rem;
}

.basicText p{
font-weight: bold;
font-size: 1.7778rem;
color: #293233;
margin-top: 3.3777777rem;
margin-bottom: 2rem;
}

.basicText .lineBtn{
  display: block;
  width:24rem;
  height: 6.222222rem;
  line-height: 6.222222rem;
  border: 3px solid #293233 ;
  text-align: center;
  color: #293233;
  text-decoration: none;
  font-size: 1.6rem;
  margin-top: 20px;
  margin-left: 10%;
  font-weight: bold;
  }

.centerHead{
width: 100%;
text-align: center;
margin: 50px auto;
}

.centerHead h2{
font-size: 3.2rem;
font-weight: bold;
color:#293233;
}

.centerHead h2 span{
font-size: 1.6rem;
letter-spacing: -0.1em;
font-weight: bold;
color: #011B68;
}

.centerHead p{
font-size:  1.7778rem;
font-weight: bold;
color: #293233;
line-height: 170%;
}

.FeatContainer{
display: flex;
width: 100%;
max-width: 1200%;
margin: 30px auto;
flex-wrap: wrap;
}


.FeatImgBlock{
  width:40%;
  margin-right: auto;
  margin-left: auto;
  
  }
  
  .FeatTextBlock{
    width:50%;
    margin-right: auto;
    margin-left: auto;
  
  }
  
  .FeatTextBlock h2{
  font-size: 3.2rem;
  font-weight: bold;
  color: #293233;
  margin: 0;
  line-height: 110%;
  }
  
  .FeatTextBlock h2 span{
  letter-spacing: -0.1em;
  color: #011B68;
  font-size: 1.6rem;
  }
  
  .FeatTextBlock p{
  font-weight: bold;
  font-size: 1.7778rem;
  color: #293233;
  margin-top: 3.3777777rem;
  margin-bottom: 2rem;
  }

.FeatFigure{
width:90%;
height: auto;
margin: 50px auto 200px;
}


.fixedCta{
background-color: #FFF;
display: flex;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
width: 100%;
left: 0;
justify-content:center;
padding: 20px;
}

.fixedCta .ctaBlock{
width: 25%;
margin: 0 20px;
}


#my-map{
width: 500px;
}
  
  #my-map canvas{
  width: 100%;
  border-width: 0!important;
  }

.region-select{
  margin: 10px auto;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  background-color: transparent;
  appearance: none; /* Chrome, Edge 対応 */
  -webkit-appearance: none; /* Safari対応 */
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  margin:20px 20% 20px 30%;
  width: 50%;
}
  .faq-section {
    max-width: 700px;
    margin: 0 auto;
    font-family: sans-serif;
  }
  
  .faq-toggle,
  .question-toggle, .answer {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 14px;
    background-color: transparent;
    border: none;
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .question-toggle, .answer {
  border: none;
  }
  .faq-questions,
  .answer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
  }
  
  .faq-questions.open,
  .answer.open {
    max-height: 8000px; 
    opacity: 1;
    margin-bottom: 10px;
  }
  
  .answer {
    background-color: #fafafa;
    border-left: 4px solid #011B68;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 16px;
  }

  .faq-icon{
font-size: 18px;
color: #293233;
position: relative;
width: 50px;
height: 50px;
z-index: 10;
text-align: center;
line-height: 50px;
margin-right: 20px;
font-weight: bold;
box-sizing: border-box;
font-family: 
"Avenir",
"Helvetica Neue",
"Segoe UI",
"Noto Sans",
"Arial",
sans-serif;
flex-shrink: 0;
}

  .faq-icon:before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 50px;
  height: 50px;
  background-color: #E6FFFE;
  border-radius: 50%;
  z-index: -10;
  }

.contactContent{
display: flex;
width: 100%;
flex-wrap: wrap;
}
  
.contactImg{
width: 40%;
margin: 20px auto;
}

.contactBtn{
width: 100%;
text-align: center;
margin-bottom: 100px;
}

.contactBtn a{
  display: block;
margin: 40px auto;
  width:26.6666667rem;
  height: 8.88888889rem;
  line-height: 8.88888889rem;
  text-decoration: none;
  color: white;
  background-color: #011B68;
  border-radius: 60px;
  text-decoration: none;
  text-align: center;
  font-size: 2.4889rem;
  font-weight: bold;
}

/*plan*/
.planRow{
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;
}

.planMap{
width: 55%;
}

.region-buttons {
width: 40%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin:20px auto;
height: 200px;
}

.region-button {
    width: 30%;
    height: 50px;
  padding: 10px 16px;
  background-color: transparent;
  border: 3px solid #eee;
  color: #7EBEF8;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
}

.region-button.active {
  background-color: #7EBEF8;
  color: white;
}

.region-table {
  display: none;
  width: 80%;
  margin: 20px auto;
}

.tableBlock{
width: 100%;
}

.region-table h2{
text-align: center;
font-weight: bold;
font-size: 2.1333rem;
}

.region-table h3{
  text-align: center;
  font-weight: bold;
  font-size: 1.7778rem;
  }

.region-table.active {
  display: block;
}

.region-table table {
  width: 100%;
  background-color: #eee;
  color: #293233;
  line-height: 1.5;
  margin: 15px auto 100px;
  font-size: 1.6rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  table-layout: fixed;
  word-wrap: break-word;
  border-color: #FFF;
}

.summerCaution{
margin-top: -90px;
}

th, td {
  padding: 12px;
  text-align: center;
}


table thead th {
  background-color: #293233;
  color: #fff;
  text-align: center;
}

table thead th + th, table tbody td {
  border-left: 4px solid #fff;
}

table thead th, table tbody th, table tbody td {
  padding: .75em .5em;
  border-bottom: 4px solid #fff;
}

.light_enegryth{
  background-color: #7EBEF8;

}

.light_enegrytd {
  font-weight: bold;
  color: #F6BB57;
  background-color: #E6FFFE;
}

.light_enegrytd2 {
  font-weight: bold;
  color: #f65757;
  background-color: #E6FFFE;

}


.category-header {
  background-color: #e0eaff;
  font-weight: bold;
  text-align: left;
}

.note {
  font-size: 13px;
  color: #666;
  margin-top: 10px;
}

.rate-compare-table {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.provider-table {
border-collapse: collapse;
width: 100%;
max-width: 500px;
}

.provider-table caption {
font-weight: bold;
margin-bottom: 8px;
}

.provider-table th,
.provider-table td {
padding: 8px;
text-align: center;
}

.planCaution{
width: 60%;
border: 3px solid #38B6FF;
padding: 20px;
font-size: 1.2444rem;
line-height: 180%;
margin: 30px auto 100px;

}

  @media screen and (max-width: 860px) {
    .pc{
    display:none;
    }
      
    .sp{
    display:block;
    }
    html {
    font-size: 2.5614vw;
    }
      
    html, body {
    overflow-x:hidden;
    width:100%;
padding: 0;
margin: 0;
    }

    .fv {
      margin-bottom: 30px;
      background-color: #E6FFFE;
      flex-wrap: wrap;
      }
      
      .fvTextBlock{
      width: 90%;
      padding: 20% 0 8% 0;
      margin-left: auto;
      margin-right: auto;
      }
      
      .fvTextBlock h1{
      font-size: 2.4619rem;
      font-weight: bold;
      line-height: 120%;
      }
      
      .fvTextBlock h1 span{
      font-size: 2.8139rem;
      color: #F6BB57;
      }
      
      .fvTextBlock h2{
      margin-top: 20px;
      font-weight: bold;
      font-size: 1.5819rem;
      line-height: 160%;
      }
      
      .fvTextBlock h2 span{
      color: #F6BB57;
      font-size:1.7579rem;
      }
      
      .fvTextBlock .lineBtn{
      display: none;
      }
      
      .fvImgBlock{
      background-color: #E6FFFE;
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      align-items: center;
      }
      
      .fvImgBlock .mainFVImg{
      width: 100%;
      margin-left: 0;
      object-fit: contain;
      }

.basicText {
width: 90%;
order: 1;
      }

.basicImg{
width: 60%;
order: 2;
}

.basicText h2 {
  font-size: 2.1099rem;
}

.basicText h2 span{
  font-size: 1.0539rem;
}

.basicText p {
font-size: 1.2299rem;
margin-top: 20px;
}

.centerHead h2 {
  font-size: 2.1099rem;
}

.centerHead h2 span{
  font-size: 1.0539rem;
}

.centerHead p {
font-size: 1.2299rem;
margin-top: 20px;
}

.FeatTextBlock {
  width: 90%;
}

.FeatTextBlock h2 {
  font-size: 2.1099rem;
}

.FeatTextBlock h2 span{
  font-size: 1.0539rem;
}

.FeatTextBlock p {
font-size: 1.2299rem;
margin-top: 20px;
}

.FeatImgBlock {
  width: 60%;
}

.FeatFigure {
margin: 30px auto 50px;
}

.planSec .basicText {
  width: 90%;
}

.planSec .basicImg {
  width: 90%;
  margin-top: 50px;
}

.basicText .lineBtn {
  display: block;
  width: 150px;
  height: 40px;
  line-height: 34px;
  font-size: 10px;
  box-sizing: border-box;

}
.region-select{
  margin: 20px 25%;
}

.contactBtn a {
  display: block;
  margin: 40px auto;
  width: 300px;
  height: 60px;
  line-height: 60px;
  font-size: 1.4059rem;
}

.fixedCta {
padding: 10px;
}

.fixedCta .ctaBlock {
  width: 45%;
}

.planMap{
  width: 90%;
  margin: 40px auto;
  }
  
  .region-buttons {
  width: 80%;
  height: 200px;
  }

.region-table {
width: 95%;

  }

.tableBlock table{
font-size: 1.0539rem;
}

.planCaution {
  width: 80%;
font-size: 0.9659rem;
}

.faq-section {
  max-width: 90%;
}


}

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

    #my-map {
      width: 400px;
    }

  }