@charset "UTF-8";

html,body,p,img,h1,h2,h3 {
    margin: 0;
    padding: 0;
}

body {
    font-family: "LINE Seed JP", sans-serif;
}

p {
    font-size: 18px;
}

@media only screen and (max-width: 768px) {
    p {
    font-size: 15px;
}

}

h2 {
    text-align: center;
}



/* 
=========================================
共通パーツ
=========================================
 */
#lp_2026nav .a-Inner {
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
}

@media only screen and (max-width: 768px) {
    #lp_2026nav .a-Inner {
    width: 100%;
    margin: 0 auto;
}

    #lp_2026nav section {
    width: 100%;
    margin: 0 auto;
}
}

#lp_2026nav .a-Ff-sans {
    font-family: "Noto Sans JP", Meiryo, sans-serif;
}

#lp_2026nav .a-Ff-serif {
    font-family: "Hiragino Mincho ProN" ,serif;
}

#lp_2026nav .a-tx-center {
    text-align: center;
}

#lp_2026nav .a-Fw500 {
    font-weight: 500;
}

#lp_2026nav .a-Fw600 {
    font-weight: 600;
}

#lp_2026nav .a-Fw700 {
    font-weight: 700;
} 

#lp_2026nav .a-Fw800 {
    font-weight: 800;
} 

#lp_2026nav .lp_2026nav--navy {
    color: #0f3778;
}

#lp_2026nav .lp_2026nav--red {
    color: #e63746;
}

#lp_2026nav .marker--yellow {
    background: linear-gradient(transparent 50%, #f2e633 50%);
}

#lp_2026nav .note__txt {
    font-size: clamp(9px, 2vw, 15px);
}

#lp_2026nav .a-Fs9 {
    font-size: clamp(9px, 1.111111111vw, 16px);
}

#lp_2026nav .a-Fs10 {
    font-size: clamp(10px, 1.111111111vw, 16px);
}

#lp_2026nav .a-Fs11 {
    font-size: clamp(11px, 1.319444444vw, 19px);
}

#lp_2026nav .a-Fs12 {
    font-size: clamp(12px, 1.666666666vw, 24px);
}

#lp_2026nav .a-Fs13 {
    font-size: clamp(13px, 2.125vw, 25px);
}

#lp_2026nav .a-Fs14 {
    font-size: clamp(14px, 1.805555555vw, 22px);
}

#lp_2026nav .a-Fs15 {
    font-size: clamp(15px, 2.125vw, 29px);
}

#lp_2026nav .a-Fs16 {
    font-size: clamp(16px, 2.2222222222vw, 32px);
}

#lp_2026nav .a-Fs18 {
    font-size: clamp(18px, 2.430555555vw, 35px);
}

#lp_2026nav .a-Fs20 {
    font-size: clamp(20px, 3.125vw, 45px);
}

#lp_2026nav .a-Fs22 {
    font-size: clamp(22px, 3.333333333vw, 48px);
}

#lp_2026nav .a-Fs23 {
    font-size: clamp(23px, 4.097222222vw, 59px);
}

#lp_2026nav .a-Fs24 {
    font-size: clamp(24px, 4.166666666vw, 60px);
}

#lp_2026nav .a-Fs25 {
    font-size: clamp(25px, 5.1vw, 55px);
}

#lp_2026nav .a-Fs26 {
    font-size: clamp(26px, 3.472222222vw, 50px);
}

#lp_2026nav .a-Fs30 {
    font-size: clamp(30px, 4.166666666vw, 60px);
}


#lp_2026nav .a-Fs22 {
    font-size: clamp(22px, 3.333333333vw, 50px);
}


#lp_2026nav .a-pc-None {
    display: none;
}

#lp_2026nav .a-sp-None {
    display: block;
}

#lp_2026nav .a-spS-Block {
    display: none;
}

@media only screen and (max-width: 768px) {
    #lp_2026nav .a-pc-None {
        display: block;
    }

    #lp_2026nav .a-sp-None {
        display: none;
    }
}

@media only screen and (max-width: 425px) {
    #lp_2026nav .a-spS-Block {
        display: block;
    }
}

.reservation__btn__box {
    width: fit-content;
    margin: 2em auto;
}

.reservation__btn {
    display: inline-flex;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
    max-width: 500px;
    width: 100%;
    height: 100px;
    padding: 0 20px;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    background: #fff046;
    border: 2px solid #000;
    box-shadow: 0 5px 0 0 #888888;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* ホバー時のスタイル */
  .reservation__btn:hover {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 #888888;
  }

  /* テキスト部分 */
  .reservation__btn-text {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: #2d2d2d;
    line-height: 1.2;
    margin-left: 10px;
    text-align: left;
  }

  .reservation__btn-icon-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background-color: #ffffff;
    border-radius: 50%;
  }

.reservation__btn-icon-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 27px;
    width: 17px;
    height: 3px;
    background-color: #2d2d2d;
    transform: translateY(-50%);
  }

  /* 矢印の「先端（＞の部分）」 */
.reservation__btn-icon-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    width: 10px;
    height: 10px;
    border-top: 3px solid #2d2d2d;
    border-right: 3px solid #2d2d2d;
    transform: translateY(-50%) rotate(45deg);
    }

@media only screen and (max-width: 768px) {
    .reservation__btn {
        max-width: 340px;
        height: 85px;
        padding: 0 20px;
    }

.reservation__btn-text {
        font-size: 17px;
    }

.reservation__btn-icon-circle {
        width: 50px;
        height: 50px;
    }

    .reservation__btn-icon-circle::before {
        left: 17px;
    }

    .reservation__btn-icon-circle::after {
        right: 16px;
    }
}

/*テキスト下線*/
/* .txt__underscore {
    position: relative;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
}
.txt__underscore::after {
    position: absolute;
    bottom: 0;
    right: 0%;
    left: 0;
    margin: 0 auto;
    width: 80px;
    height: 2px;
    content: '';
    border-radius: 3px;
    background: #413d3c;

} */

/* 
=========================================
top
=========================================
 */
 
 .top__logo {
     margin: 1em 0;
     text-align: center;
 }

.top__fv {
    position: relative;
}

.top__fv .a-Inner {
    position: relative;
}

.top__img {
    width: 100%;
}

.top__img img {
    display: block;
    width: 100%;
    height: auto;
}

.top__catch-copy {
    position: absolute;
    top: 1.5em;
    left: 2.5em;
}

.top__catch-copy_02 {
    position: absolute;
    width: 68%;
    bottom: 0;
    left: 2em;
}

.top__catch-copy__box h1 {
    background: url(../img/lp_2026oct-fv_02.png)no-repeat center right / contain;
    padding: 0 1em;
    margin-top: -1em;
}

.top__catch-copy__box h1 img {
    width: 80%;
}

@media only screen and (max-width: 768px) {
     .top__logo {
    margin: 1em auto;
    width: 50%;
 }

      .top__catch-copy {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
 }

 .top__catch-copy__box {
    background: url(../img/lp_2026oct-fv_02_sp.png)no-repeat center right / contain;
}

.top__catch-copy__box h1,
.top__catch-copy__box p {
    width: 93%;
}

.top__catch-copy_02 {
    left: 1em;
}

}

/* 
=========================================
intro
=========================================
 */
.intro__wavy__line__top,
.intro__wavy__line__center {
    position: relative;
}

.intro__wavy__line__top img,
.intro__wavy__line__center img {
    display: block;
    width: 100%;
    height: auto;  
}

.intro__ttl {
    padding: 0 .8em;
}

.intro__txt {
    font-size: clamp(14px, 1.805555555vw, 22px);
    text-align: center;
    font-weight: 500;
    padding: 1em;
}

.intro__anxiety__icon__box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 1em;
    padding: 1em;
}

.intro__catch-copy {
    position: relative;
}

.intro__catch-copy img {
    display: block;
    width: 100%;
    height: auto;  
}

.intro__catch-copy__txt {
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.intro__wavy__line__end {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.intro__wavy__line__end img {
    display: block;
    width: 100%;
    height: auto;  
}

@media only screen and (max-width: 768px) {
    
.intro__txt {
    text-align: left;
}

}

/* 
=========================================
fair
=========================================
 */
.fair {
    background-color: #fff046;
    text-align: center;
    padding: 5em 1em;
}

.fair__contents {
    padding: 1em 0;
}

.fair .reservation__btn {
    background: #e63746;
    border: 2px solid #000;
}


.fair .reservation__btn-icon-circle::before {
    background-color: #e63746;
  }

  /* 矢印の「先端（＞の部分）」 */
.fair .reservation__btn-icon-circle::after {
    border-top: 3px solid #e63746;
    border-right: 3px solid #e63746;
    }

.fair .reservation__btn-text {
    color: #fff;
    text-align: left;
}

@media only screen and (max-width: 768px) {
    
.fair__contents {
    width: 95%;
}
}

/* 
=========================================
about
=========================================
 */
.about {
    background: linear-gradient(to bottom, #c8e0f5 0%, #ffffff 55%);
    text-align: center;
}

.about__top__back {
    position: relative;
    width: 100%;
}

.about__top__back img {
    display: block;
    width: 100%;
    height: auto;
}

.about__graph {
    padding: 2em;
}

.about__ttl {
    position: relative;
    margin-top: -2em;
    z-index: 1;
}

.about__txt {
    padding: 1em;
    font-weight: 500;
}

.about__check__ttl {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 3em;
    padding: 1em;
}

.about__check__txt {
    font-size: clamp(17px, 2.4414vw, 30px);
    font-weight: 900;
    padding: .5em 0;
    margin: .5em 0;
    border-top: 2px solid #2d2d2d;
    border-bottom: 2px solid #2d2d2d;
}

.about__check__box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    justify-content: center;
    align-items: center;
    padding: 2em 2em 5em;
}

@media only screen and (max-width: 768px) {
    .about__txt {
    text-align: left;
}

.about__ttl {
    margin-top: -1em;
    padding: 0 1em;
}

.about__check__ttl {
    gap: 1em;
}

.about__check__box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    justify-content: center;
    align-items: center;
    padding: 2em;
}


}


/* 
=========================================
voice
=========================================
 */

.voice {
    padding: 5em 1em;
    background: #f5f0e1;
    text-align: center;
}

.voice__list {
    padding: 2em 0;
}

.voice__contents {
    padding: 2em 0;
}

.voice__txt {
    font-size: clamp(17px, 2.2222222222vw, 28px);
    font-weight: 800;
    padding-top: 1em;
}

.voice__pic__txt {
    font-size: clamp(17px, 2.2222222222vw, 30px);
    font-weight: 800;
    background: #fff;
    width: 80%;
    padding: 1em;
    margin: 1em auto;
    border-radius: 20px;
}

@media only screen and (max-width: 768px) {
    .voice__txt,
    .voice__pic__txt,
    .voice .note__txt  {
        text-align: left;
}

.voice__contents {
    padding: 0;
}

.voice__pic__txt {
    width: 100%;
}

}
/* 
=========================================
gokudan
=========================================
 */
.gokudan {
    background-color: #fff47d;
    padding-top: 3em;
}

.gokudan__ttl {
    padding: 1em;
}
 
.gokudan__ttl__pick {
    padding: 0 1em;
}

.gokudan__contents {
    background: #fffbd9;
    width: 100%;
}

.gokudan__txt {
    font-size: clamp(15px, 2.125vw, 23px);
    font-weight: 500;
    padding: 1em 4em;
}

/* ===== 仕切り(既存のCSS) ===== */
.gokudan__contents__accordion{
    width: 100%;
    background: #fffbd9;
    interpolate-size: allow-keywords;
}
.gokudan__contents__accordion::details-content {
  height: 0;
  overflow: hidden;
  transition: 0.6s allow-discrete;
}
.gokudan__contents__accordion[open]::details-content {
  height: auto;
}

/* 線は clip-path の外側に出ないので、親要素に drop-shadow を付けて作る */
.index__top {
    filter: drop-shadow(0 2px 0 #333);
}

.index__over {
    height: 100px;
    background: #0a2a6c; /* 上側の黄色 */
    /* 左は高さ50px、斜めに下がって、右は高さ100px */
    clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    320px 100%,
    285px 50%,
    0 50%
    );
}

.index__over.back--yellow {
  background: #fff27a; /* 上側の黄色 */
}

.index__body {
    font-size: clamp(15px, 2.125vw, 23px);
    font-weight: 600;
    margin-top: -50px;   /* 左側の段差の分だけ内容を上に寄せる */
    padding: 10px 40px 7px 40px;
}

/* ===== アコーディオン用の追加分 ===== */
.gokudan__contents__accordion__summary {
    list-style: none;
    cursor: pointer;
    display: block;
}
.gokudan__contents__accordion__summary::-webkit-details-marker {
    display: none;
}

.gokudan__contents__accordion__inner {
    width: 100%;
    padding: 0 4em;
    text-align: center;
}

/* ===== 閉じるボタン ===== */

.accordion-btn {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 8px;
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border: none;
    background: #0a2a6c;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.1em;
    cursor: pointer;
}

.accordion-btn-icon {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  background: #fff;
}

.accordion-btn-icon::before,
.accordion-btn-icon::after {
  content: "";
  position: absolute;
  background: #0a2a6c;
}

/* 横線(＋と－で共通) */
.accordion-btn-icon::before {
  top: 50%;
  left: 50%;
  width: 18px;
  height: 3px;
  transform: translate(-50%, -50%);
}

/* 縦線(＋のときだけ表示) */
.accordion-btn-icon::after {
  top: 50%;
  left: 50%;
  width: 3px;
  height: 18px;
  transform: translate(-50%, -50%);
}

/* 縦線にアニメーションを付ける */
.accordion-btn-icon::after {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 開いているときは縦線を横線に重ねて消し、「－」にする */
.accordion-btn[aria-expanded="true"] .accordion-btn-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}




.accordion__inner__sub__ttl {
    font-size: clamp(25px, 3.4179vw, 35px);
    font-weight: 800;
    text-align: center;
    padding: .5em 0 0;
}

.accordion__inner__detail {
    background-color: #fff;
    padding: 2em;
}

.accordion__inner__detail__txt {
    font-size: clamp(15px, 1.953125vw, 20px);
    font-weight: 600;
    text-align: center;
    padding: 1em 5em;
}

.about__safe-life__contents__txt {
    font-size: clamp(16px, 2.05078125vw, 21px);
    font-weight: 600;
}

.about__safe-life__contents__ttl,
.storage__ttl {
    font-size: clamp(30px, 3.90625vw, 45px);
    font-weight: 800;
    padding: 0 1em;

}


.accordion__inner__ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    width: 100%;
    padding-top: 1em;
}

.gokudan__contents__ttl {
    padding: 2em 0;
}

.resistant__contents {
    padding-bottom: 2em;
}

.resistant__inner__sub__ttl {
    padding-top: 3em;
    font-weight: 600;
}

.resistant__inner__ttl {
    font-weight: 800;
}

.resistant__txt {
    font-size: clamp(15px, 3vw, 24px);
    background-color: #0f3778;
    color: #fff046;
    font-weight: 700;
    padding: .5em 1em;
    margin: 1em auto;
    width: fit-content;
}

.resistant__contents__box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.resistant__contents__ttl {
    background-color: #d5d5d5;
    padding: .2em 1em;
    margin-bottom: .5em;
    border-radius: 25px;
    font-weight: 700;
}

.resistant__contents__txt {
    font-size: clamp(13px, 1.7578125vw, 18px);
    text-align: left;
    padding-bottom: 2em;
}

.resistant .note__txt {
    text-align: left;
}

.resistant__safe-life__ttl {
    padding: 3em 0 1em;
}

.resistant__safe-life__comparison {
    display: flex;
    gap: 1em;
    justify-content: center;
    margin-bottom: 5em;
}

.comparison__normal {
    background-color: #646464;
    border-radius: 10px;
    text-align: center;
    flex: 1;
}

.comparison__normal__name{
    font-size: clamp(15px, 2.125vw, 34px);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 13%;
}

.comparison__normal__contents p img {
    width: 60%;
    margin: 1em auto;
}

.comparison__alnethome__contents p img {
    width: 78%;
    margin: 0 auto;
}


.comparison__alnethome__lpg {
    padding: .1em;
}

.comparison__alnethome__neme__box {
    height: 13%;
}

.comparison__alnethome__name {
    font-size: clamp(15px, 2.125vw, 34px);
    color: #fef200;
    padding-bottom: .1em;
}

.comparison__normal__contents {
    background-color: #fff;
    border: 5px solid #646464;
    border-radius: 10px;
    padding: 1em .5em;
    height: 90%;
}

.comparison__alnethome {
    background-color: #0f3778;
    border-radius: 10px;
    text-align: center;
    flex: 1;
}

.comparison__alnethome__contents {
    background-color: #fff;
    border: 5px solid #0f3778;
    border-radius: 10px;
    padding: 1em .5em;
    height: 90%;
}

.comparison__normal__contents__speak {
    color: #646464;
    font-size: clamp(15px, 2.246vw, 23px);
}

.comparison__alnethome__contents--orange {
    color: #0f3778;
}

.comparison__normal__contents__txt {
    background-color: #f2f2f2;
    color: #646464;
    font-weight: 600;
    border-radius: 10px;
    padding: .5em;
}

.comparison__alnethome__contents__txt {
    font-size: clamp(14px, 1.7578125vw, 18px);
    background-color: #0f3778;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    padding: .5em;
}

.endure__img {
    padding: 1em 0;
}

.endure__txt__box div {
    padding: 1em 0;
}

.accordion__inner__detail__img {
    padding-top: 1em;
}

.mahonbin p img {
    padding: 1em 1.5em;
}

.storage p img,
.solar p img {
    padding: 2em 0;
}
@media only screen and (max-width: 768px) {
.gokudan__txt {
    padding: 1em;
}

.accordion__inner__detail__txt {
    padding: 1em;
}


    .index__over {
    height: 90px;
    background: #0a2a6c; /* 上側の黄色 */
    /* 左は高さ50px、斜めに下がって、右は高さ100px */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 190px 100%, 160px 50%, 0 50%);
}

    .index__body {
        padding: 15px 40px 14px 40px;
}

    .gokudan__contents__accordion__inner {
    padding: 0;
}

.resistant__contents__box {
    grid-template-columns: repeat(1, 1fr);
}

.accordion__inner__ttl__number {
    width: 10%;
}

.accordion__inner__ttl__txt {
    width: 50%;
}


.accordion__inner__txt {
    text-align: left;
}

.accordion__inner__detail {
    padding: 1em;
}

.resistant__safe-life__comparison {
    margin-bottom: 3em;
}

.endure__txt__box {
    text-align: left;
}

.storage__txt {
    text-align: left;
}
}


/* 
=========================================
plan
=========================================
 */
.plan {
    background-color: #f5f0e1;
    text-align: center;
    padding: 5em 0;
}

.plan p img {
    padding: 2em;
}

.eye-catch__box {
    padding: 5em 1em;
    text-align: center;
}

.plan .note__txt {
    text-align: left;
    padding: 0 3em;
}

@media only screen and (max-width: 768px) {
    .plan p img {
    padding: .5em 2em;
}

}
/* 
=========================================
autumn__fair
=========================================
 */
.autumn__fair {
    background-color: #83cdfe;
    text-align: center;
    padding-bottom: 4em;
}

.autumn__fair__back {
    position: relative;
}

.autumn__fair__back img {
    display: block;
    width: 100%;
    height: auto;
}

.autumn__fair__ttl {
    position: absolute;
    width: 100%;
    top: 3em;
    left: 50%;
    transform: translateX(-50%);
}

.autumn__fair__txt {
    padding: 1em;
}

@media only screen and (max-width: 768px) {
    .autumn__fair__ttl {
    width: 90%;
}

}
/* 
=========================================
campaign
=========================================
 */
.campaign {
    text-align: center;
    max-width: 1024px;
    margin: 0 auto;
    padding: 3em 0;
    background: linear-gradient(to top, #d3e2f0 0%, #ffffff 20%);
}

.campaign__contents {
    border-bottom: 1px dashed #646464;
    padding-bottom: 2em;
    margin: 2em 1em;
}

.campaign__contents__info {
    padding: 1em;
}

/*
=========================================
what-alnethome
=========================================
 */
.what-alnethome {
    padding: 8em 0;
    background-color: #f5f0e1;
}

.what-alnethome__ttl {
    color: #a57d50;
    font-size: clamp(30px, 4.166666666vw, 60px);
    font-weight: 500;
}

.what-alnethome__box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: start;
    column-gap: 2em;
    padding: 0 4.5em;
}

.what-alnethome__point {
    text-align: center;
    margin: 2em 0;
}

@media only screen and (max-width: 768px) {
    .what-alnethome {
    padding: 3em 0;
}

.what-alnethome__box {
    display: block;
    padding: 0 2em;
}
}