/* ----- minimal reset ----- */
    *, *::before, *::after {
      box-sizing: border-box;
    }
    html, body {
      height: 100%;
    }
    html {
      font-size: clamp(16px, 0.2vw + 15px, 18px);
      scroll-behavior: smooth;
    }
    :target {
      scroll-margin-top: 80px;
    }
    body {
      margin: 0;
      font-family:
        "Noto Sans JP",
        systrem-ui,
        -apple-systrem,
        "Hiragino Sans",
        "Yu Gothic",
        Meiryo,
        sans-serif;
      line-height: 1.7;
      color: #111;
      background: #fff;
    }
    img {
      max-width: 100%;
      height: auto; 
      display: block;
    }
    a {
      color: inherit;
      text-underline-offset: .2rem;
      transition: opacity .2s ease;
    }
    a:hover{
      opacity: .7;
    }
    :focus-visible {
      outline: 2px solid #1a73e8;
      outline-offset: 2px;
    }
    :root {
      --color-main: #013478;
    }
    #backToTop {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 50px;
      height: 50px;
      border: none;
      border-radius: 50%;
      background: #000;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      z-index: 99999;
      line-height: 0.7;

      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);

      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select: none;

      /* ★ポイント：visibilityは隠れる時だけ遅らせる */
      transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0s linear 0.3s;
    }
    #backToTop span{
      font-size: 0.6rem;
    }

    #backToTop.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);

      /* 表示時はvisibilityを即時に */
      transition-delay: 0s, 0s, 0s;
    }

    /* ----- header ----- */
    .container {
      width: min(900px, 92vw);
      margin-inline: auto;
    }
    header {
      box-shadow: 0 0 5px rgba(0,0,0,.3);
      z-index: 100;
      position: relative;
    }
    .header-inner {
      display: flex;
      align-items: center; 
      padding: 0;
      height: 100px;
      width: 100%;
    }
    .header-inner a{
      text-decoration: none;
    }
    .brand {
      font-weight: 700;
      letter-spacing: .02rem;
      margin-left: 2%;
      width: 200px;
    }
    .brand img{
      width: 100%;
    }
    nav {
      margin-right: 3rem;
    }
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 8px;
    }
    nav li {
      border-right: solid 2px var(--color-main);
    }
    nav li:nth-child(1){
      border-left: solid 2px var(--color-main);
      padding-left: 8px;
    }
    nav a {
      text-decoration: none;
      padding: 6px 8px;
      margin-right: 8px;
      border-radius: 8px;
      color: var(--color-main);
      font-weight: bold;
    }
    .link-container{
      display: flex;
      align-items: center;
      margin-left: auto;
      height: 100%;
      gap: 5px;
    }
    .header-banner-link{
      color: #fff;
      font-weight: bold;
      height: 100%;
      font-size:1.2rem;      
    }
    .header-banner-link img{
      width: 1.5rem;
      margin-right: 0.5rem;
    }
    .header-banner-link a{
      height: 100%;
      display: flex;
      align-items: center;
      padding:0 1rem;
    }
    .header-banner-link.header-contact a{
      background: var(--color-main);
    }
    .header-banner-link.header-faq a{
      background: #DE3D3D;
    }

    .hamburger {
      display: none;
    }
    .nav-banner-link{
      display: none;
    }
    .nav-close{
      display: none;
    }


     @media (max-width: 1279px) {
      .brand{
        width: 150px;
      }
      .link-container{
        font-size: 0.8em;
      }
      nav {
        margin-right: 1.25rem;
      }
      nav ul{
        flex-wrap: wrap;
      }
      .header-banner-link a{
        flex-direction: column-reverse;
        justify-content: center;
        line-height: 2;
      }
     }

      @media (max-width: 1024px) {
        .link-container{
          display: flex;
          align-items: center;
          gap: 1rem;
        }        
        nav li{
          border-right: none;
          border-left: none;
          padding: 0;
          margin-bottom: 1rem;          
          font-size: 1.2rem;
          border-bottom: solid 2px var(--color-main);
          position: relative;
        }
        nav a{
          display: flex;
          width: 100%;
        }
        nav li::after{
          content: "";
          display: block;
          background-image: url(../img/menu-arrow.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          width:0.9rem;
          height: 1rem;
          right: 8px;
          top: 0.7rem;
          position: absolute;
        }
        nav li:nth-child(1){
          border-right: none;
          border-left: none;
          padding: 0;
        }
        .header-banner-link{
          height: auto;          
        }
        .header-banner-link a{
          flex-direction: row;
          font-size: 0.8rem;
          padding:0.5rem 1rem;
          white-space: nowrap;
        }
        .nav-banner-link{
          border: none;
          display: flex;
          padding: 0;
          margin-bottom: 1rem;
        }
        .nav-banner-link::after{
          content: none;
        }
        .nav-banner-link a{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 1rem 0;
          color: #fff;
        }
        .nav-faq{
          background: #DE3D3D;
          margin-top: 1rem;
        }
        .nav-contact{
          background: var(--color-main);
        }
        .nav-banner-link a img{
          width: 1.5rem;
          margin-right: 0.5rem;
        }        
        .hamburger{
          display: inline-flex;
          flex-direction: column;
          margin-right: 5%;
          width: 44px;
          height: 44px;
          align-items: center;
          justify-content: center;
          border: 0;
          background: transparent;
          cursor: pointer;
          padding: 0;
          order:4
        }
        .hamburger__bar{
          display:block;
          width: 28px;
          height: 3px;
          background: var(--color-main);
          margin:3px 0;
        }
        .hamburger__text{
          font-size: 0.7rem;
          font-weight: 600;          
          color: var(--color-main);
        }

        #global-nav{
          position: fixed;
          top: 0;
          right: 0;
          margin-right: 0;
          height: 100dvh;
          width: min(86vw, 360px);
          background: #fff;

          transform: translateX(100%);
          transition: transform .4s ease;

          padding: 90px 16px 16px;
          overflow: auto;
          z-index: 1001;          
        }        
        #global-nav ul{
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .menu-overlay{
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,.45);
          z-index: 1000;
        }        
        body.nav-open #global-nav{
          transform: translateX(0);
        }
        body.nav-open{
          overflow: hidden;
        }
        .nav-close{
          position: absolute;
          top: 5px;
          right: 5px;

          width: 60px;
          height: 60px;

          border: 0;
          background: transparent;

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          cursor: pointer;
        }
        .nav-close__icon{
          position: relative;
          width: 33px;
          height: 33px;
        }
        .nav-close__line{
          position: absolute;
          left: 0;
          top: 50%;

          width: 100%;
          height: 3px;

          background: var(--color-main);
        }
        .nav-close__line:nth-child(1){
          transform: rotate(45deg);
        }
        .nav-close__line:nth-child(2){
          transform: rotate(-45deg);
        }
        .nav-close__text{
          font-size: 0.7rem;    
          font-weight: 600;      
          margin-top: 4px;
          color: var(--color-main);
        }


        }
        @media (max-width: 767px) {
          .header-inner{
            height: 80px;
          }
          .brand{
            width: 140px;
          }
          .header-banner-link.header-faq{
          display: none;
          }
        }


    /* ----- main ----- */
    .no-small{
      font-size:0.7em;
    }

    /* ----- hero ----- */
    .hero {      
      /* background-image: url(../img/hero-bg.jpg); */      
      background-size: cover;
      background-position: right center;      
      position: relative;
      max-width: 1440px;
      margin: 0 auto 3rem;
      overflow: hidden;
    }
    .container.hero-container{
      width:100%;
      height: 500px;
      color: var(--color-main);            
      font-weight: 700;
    }
    .hero-container {
      position: relative;
    }
    .hero-slider {
      position: relative;
      overflow: hidden;    
      height: 100%;  
    }
    .hero-track {
      display: flex;
      transition: transform 400ms ease;
      will-change: transform;
      height: 100%;
    }
    .hero-slide {
      flex: 0 0 100%;
    }
    .hero-slide img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      z-index: 10;
    }
    /* ナビ */
    .hero-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      border: 1px solid rgba(255,255,255,.6);
      background: rgba(0,0,0,.35);
      color: #fff;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      cursor: pointer;      
      background-repeat: no-repeat;
      background-size: 50%;
    }
    .hero-prev {
      left: 12px;
      background-image: url(../img/arrow-prev.svg);
      background-position: 60%;
    }
    .hero-next {
      right: 12px;
      background-image: url(../img/arrow-next.svg);
      background-position: 40%;
    }

    .hero-nav:focus-visible {
      outline: 2px solid #0066ff;
      outline-offset: 2px;
    }
    /* ドット */
    .hero-dots {
      position: absolute;
      left: 50%;
      bottom: 12px;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 2;
      display: none;
    }
    .hero-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.8);
      background: rgba(255,255,255,.25);
      cursor: pointer;
    }
    .hero-dot[aria-current="true"] {
      background: rgba(255,255,255,.95);
    }
    .hero-slide.img-slide{
      display: flex;      
      justify-content: center;
      position: relative;
    }
    .hero-slide.img-slide img{
      height: auto;
    }
    .hero-slide.img-slide.img-slide-1::before{
      content: "";
      position: absolute;
      inset: 0;
      background: url(../img/slide02.png) center/cover no-repeat;
      filter: blur(20px);
      transform: scale(1.1); /* ぼかし端の隙間防止 */
      z-index: 0;
    }
    .hero-1-wrapper{
      width: 100%;
      height: 100%;
      background-image: url(../img/hero-bg_2.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 2;
    }
    .hero-1-container{
      display: flex;
      margin: 0 auto;
      width: min(900px, 92vw);
      height: 90%;
      justify-content: center;
      gap: 4rem;
    }
    .hero-1-container .hero-1-text-container{
      text-align: center;    
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .hero-title{
      font-weight: 700;
      color: var(--color-main);
      display: flex;
      flex-direction: column;
      line-height: 1;
      margin-bottom: 0;
    }
    .hero-title .hero-title-sub{
      text-align: center;
      background: var(--color-main);
      color: #fff;
      border-radius: 100vw;
      padding: 0.3em 0.5em;
      width: 100%;
      font-size: clamp(20px, 2.8vw, 32px);
      margin-bottom: 0.75em;      
    }
    .hero-title  .hero-title-jp{
      font-size: clamp(24px, 3.5vw, 40px);
      margin-bottom: 0.25em;
    }
    .hero-title  .hero-title-main{
      font-size: clamp(70px, 10vw, 110px);
    }
    .hero-1-container .hero-1-img-container{      
      max-width: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-1-container .common-name{
      font-size: clamp(26px, 3.5vw, 40px);
      display: flex;
      align-items: center;
      margin: 0 auto;
      margin-top: 0.25em;
    }
    .hero-1-container .common-name img{
      display: inline;
      width: 4em;
      height: 1em;
    }
    .hero-1-container .common-name .common-name-sub{          
      display: flex;
      align-items: center;
      font-size: 0.6em;
    }
    .hero-1-container .common-name .common-name-sub img{
      width:8em;
    }
    .hero-1-container .hero-ex-text{
      font-size: clamp(20px, 2.4vw, 28px);
      line-height: 1.25;
      margin-top: 0.5em;
      position: relative;
    }
    .hero-1-container .hero-ex-text::before{
      content: "";
      position: relative;      
      display: block;
      width: 100%;
      height: 1em;
      background-image: url(../img/arrow-line.svg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
    .hero-1-container .hero-ex-text .ex-red{
      color:#FF3838;
    }
    .hero-1-container .hero-ex-text .ex-num{
      font-size: 1.75em;
    }
     @media (max-width: 1024px) {
      .hero-1-container{
        gap: 2rem;
      }
      .hero-1-img-container img{
        height: 85%;
      }
     }
     @media (max-width: 767px) {
      .hero-1-img-container img{
        height: 70%;
      }
     }
      @media (max-width: 648px) {
        .hero-1-wrapper{
          background-image: url(../img/hero-bg_2_sp.jpg);
        }
        .container.hero-container{
          height: auto;          
        }
        .hero-1-container{
          flex-direction: column;
          align-items: center;
          margin-top: 1rem;
          margin-bottom: 2rem;
        }
        .hero-1-container .hero-1-img-container{
          width: 100%;
        }
        .hero-1-img-container img{
          height: 100%;
          width: 70%;
        }
        .hero-title .hero-title-sub{
          margin-bottom: 0.5em;
        }
        .hero-title-jp{
          margin-bottom: 0;
        }
        .hero-1-container .common-name{
          margin-top: 0;
        }
        .hero-1-container .hero-ex-text{
          margin-top: 0;
        }
      }

    /* ----- contents ----- */

    section h2{
      text-align: center;
      color: var(--color-main);
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.5;
      font-size: 2rem;
      margin :0 auto;
      margin-top: 1.5rem;
      margin-bottom: 3rem;
      width: 95%;      
    }
    section h2 span{
      display: inline-block;
      position: relative;
    }
    section h2 span.heading__en{
      font-size: 1.5rem;
      margin-bottom: 1em;
    }
    section h2 span.heading__en::after{
      content: "";
      position: absolute;
      left: -10%;
      bottom: -0.5em;
      width: 120%;
      height: 3px;
      border-radius: 100vw;
      background: var(--color-main);
    }

    /* ----- reason ----- */

    .reason-container{
      margin-bottom: 8rem;
    }
    .reason-container h3{
      background: var(--color-main);
      color: #fff;
      padding: 0.5em;
      padding-left: 2em;
      position: relative;
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
     .reason-container h3::before{
      content: "";
      display: inline-block;
      width: 4px;
      height: calc(100% - 1.25em);
      background: #fff;
      border-radius: 100vw;
      position: absolute;
      left: 1em;
      top: calc(1.25em / 2);
     }
     .reason-container h4{
      color: var(--color-main);
      font-size: 1.25rem;
      margin-bottom: 0;
     }
     .reason-contents{
      padding: 0 2rem;
     }
     .imgae-row{
      display: flex;      
      gap: 1rem;
      width: 100%;
     }
     .imgae-row img{
      min-width: 0;
      width: 50%;
      display: block;
     }
     .reason-container p{          
      margin-bottom: 3rem;
     }
     .sp{
      display: none !important;
     }

     @media (max-width: 767px) {
      section h2{
        font-size: 1.75rem;
      }
      .imgae-row img{
        width: 100%;
      }
      .reason-container{
        margin-bottom: 6rem;
      }
      .reason-container h3{
        margin-bottom: 1rem;
        padding-left: 1.5em;    
        font-size: 1.25rem;    
      }
      .reason-container h3::before{
        left: 0.75em;
        width: 3px;
      }
      .reason-container h4{
        margin-top: 0.5rem;
      }
      .reason-contents{
        padding: 0;
      }
      .imgae-row{
        flex-direction: column;
      }
      .pc{
        display: none !important;
      }
      .sp{
        display: initial !important;
      }
     }

     /* ----- points ----- */
     .blue-bg{
      background: #EDF2F5;
      padding: 2rem 0 5rem;
     }
     .no-border-container{
      background: #fff;
      border-radius: 20px;
      padding:3rem;
      margin-bottom: 4rem;
     }
     .points-container h3{      
      font-size: 1.5rem;
      margin-top: 0;
      display: flex;
      align-items: center;
      gap: 0.5em;
      border-bottom: solid 3px var(--color-main);
     }
     .points-container h3 .point-num{
      color: var(--color-main);
      position: relative;
      font-size: 1.5em;
     }
     .points-container h3 .point-num::before{
      content: "";
      background-image: url(../img/point.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      display: block;
      height: 1.5em;
      width: 1.5em;
      position: absolute;
      bottom: 0.75em;
      left: -0.25em;
     }
     .bolt-heading{
      font-size: 1.25rem;
      display: flex;
      align-items: flex-start;
      gap: 0.5em;
     }
     .bolt.orange{
      background-image: url(../img/bolt-orange.svg);
     }
     .bolt.yellow{
      background-image: url(../img/bolt-yellow.svg);
     }
     .bolt{      
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
     }
     .point-contents{
      margin-bottom: 3rem;
     }
     .point-contents p{
      margin-bottom: 2rem;
     }
     .img-fluid{
      max-width: 500px;
      margin: 0 auto;
      width: 100%;
     }

     @media (max-width: 767px) {
      .points-wrapper{
        padding:1rem 0 3rem;
      }
      .no-border-container{
        padding: 1rem;
        margin-bottom: 3rem;
      }
     }

     /* ----- lifestyle ----- */
      .lifestyle-container{        
        border-radius: 20px;
        padding:3rem;
        margin-top: 2rem;
        margin-bottom: 4rem;
        border: solid 1px #000;
      }
      .lifestyle-inner{
        width:92.5%;
        margin-left: auto;
        position: relative;
      }
      .lifestyle-inner::before{
        content: "";
        position: absolute;
        display: block;
        width: 7.5px;
        background: var(--color-main);
        height: 105%;
        left: -3rem;
        top: -2.5%;
        border-radius: 100vw;
      }
      .lifestyle-inner h3{
        color: var(--color-main);
        font-size: 2rem;
        margin-top: 0;
        margin-bottom: 1rem;
        position: relative;
      }
      .lifestyle-inner h3::before{
        content: "";
        width: 0.75em;
        height: 0.75em;
        border-radius: 100vw;
        background: var(--color-main);
        position: absolute;
        left: calc(-3rem - (0.75em / 2) + 3.25px);
        top: 0.5em;
      }
      .lifestyle-contents{
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        margin-bottom: 2rem;
      }
      .lifestyle-contents .lifestyle-text{
        flex: 3;
      } 
      .lifestyle-contents .lifestyle-img{
        flex: 2;
      } 
      .lifestyle-contents .lifestyle-text h4{
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.25rem;
      }
      @media (max-width: 767px) {
        .lifestyle-container{
          padding: 1rem;
        }
        .lifestyle-inner{
          width: 82.5%;
        }
        .lifestyle-contents{
          flex-direction: column;
          gap: 0;
          margin-bottom: 3rem;
        }
        .lifestyle-inner::before{
          height: 100%;
          top: 0;          
        }
      }
      .lifestyle-container .bolt-heading{
        margin-top: 3rem;
      }
      .lifestyle-container .bolt-heading:first-child{
        margin-top: 0;
      }
      .note-marker{
        position: relative;
      }
      .note-marker::after{
        content: "※";
        position: absolute;
        top: 0;
        right: -1em;
        font-size: 0.5em;
        font-weight: 300;
      }
      .note{
        font-size: 0.75rem;
        font-weight: 300;
        text-align: right;        
      }

      .eibs-outage__tabs{
        max-width: 600px;
        margin: 3rem auto 0;
        gap: 10%;
      }

      .eibs-outage__tablist {
        display:flex;
        gap:3%;
      }
      .eibs-outage__tab {
        width: 48.5%;
        padding:.7em 1.1em;
        background:transparent;
        border:2px solid;
        border-bottom:none; 
        cursor:pointer;
        border-radius: 10px 10px 0 0;
        font-weight: 700;
        transition: all .2s ease;
      }
      .eibs-outage__tab.normal{
        border-color: var(--color-main);
        color: var(--color-main);
      }
      .eibs-outage__tab.teiden{
        border-color: #FF3838;
        color: #FF3838;
      }
      .eibs-outage__tab[aria-selected="true"] {
        color: #fff;
      }
      .eibs-outage__tab.normal[aria-selected="true"]{
         background: var(--color-main);
      }
      .eibs-outage__tab.teiden[aria-selected="true"]{
         background: #FF3838;
      }
      .eibs-outage__panels figure{
        margin: 0;
      }
      .eibs-outage__panel p{
        text-align: center;
        font-weight: 700;
        font-size: 1.5rem;
      }
      .eibs-outage__panel.normal p{
        color: var(--color-main);
      }
      .eibs-outage__panel.teiden p{
        color: #FF3838;
      }
      .eibs-outage__image {
        max-width:100%;
        height:auto;
        display:block;
      }
      .mode-tabs{
        display: flex;
        gap:3%;
        justify-content: center;
        margin-bottom: 3rem;        
      }
      .mode-tab{
        border: solid 2px var(--color-main);
        background: #fff;
        border-radius: 100vw;
        padding: 0.75em;
        font-weight: 700;
        color: var(--color-main);
        width: 25%;
        transition: all .2s ease;
        cursor: pointer;
      }
      .mode-tab[aria-selected="true"] {
        background: var(--color-main);
        color: #fff;
      }
      .mode-panel h3{
        font-size: 1.5rem;
      }
      .mode-panel h4{
        color: var(--color-main);
        margin-bottom: 0;
      }
      .mode-panel img{
        width: 100%;
        max-width: 700px;
        margin: 3rem auto 0;
      }
      .mode-panel li::marker{
        font-size: 0.7em;
      }
      @media (max-width: 1080px) {
        .mode-tabs{
          flex-wrap: wrap;
        }
        .mode-tab{
          width: 48.5%;
          margin-bottom: 3%;
        }
      }
      @media (max-width: 767px) {
        .mode-tabs{
          margin-bottom: 1rem;
        }
        .mode-tab{
          margin-bottom: 1rem;
        }
      }

      /* ----- spec ----- */
      .spec-wrapper{
        padding-top: 5rem;
      }
      .spec-wrapper .no-border-container{
        margin-bottom: 0;
        padding-top: 1rem;
      }
      .spec-wrapper h2{
        margin-top: 0;
      }
      .spec-wrapper img{
        width: 30%;
        max-width: 400px;
        min-width: 150px;
        margin: 0 auto 3rem;
      }
      .yellow-button{
        color: #013478;
        background: #F2D922;
        border-radius: 100vw;
        padding: 0.5em;
        max-width: 400px;
        width: 100%;
        display: block;
        margin: 0 auto;
        text-align: center;
        text-decoration: none;
        font-weight: 600;
      }
      @media (max-width: 767px) {
        .spec-wrapper .no-border-container{
          padding: 3rem;
          padding-top: 1rem;
        }
      }

      /* ----- others ----- */
      .others-container{
        display: flex;
        flex-wrap: wrap;
        gap: 5%;
        margin-bottom: 3rem;
      }
      .others-container a{
        width: 47.5%;
        border: solid 1px #707070;
        padding: 1.25em;
        box-shadow: 0 2px 5px rgba(0,0,0,.3);
        color: var(--color-main);
        font-weight: 700;
        font-size: 1.25rem;
        text-align: center;
        text-decoration: none;
        border-radius: 10px;
        margin-bottom: 5%;
      }
      @media (max-width: 767px) {
        .others-container{
          flex-direction: column;
        }
        .others-container a{
          width: 100%;
          padding: 1em;
          margin-bottom: 10%;
        }
      }

      /* ----- contact ----- */
      .contact-wrapper{
        background: var(--color-main);
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      .contact-wrapper h2{
        color: #fff;
      }
      section.contact-wrapper h2 span.heading__en::after{
        background: #fff;
      }
      .contact-container h3{
        color: var(--color-main);
        font-weight: 700;
        font-size: 2rem;
        text-align: center;
        margin-top: 0;
      }

      /* ----- form ----- */
      /* =========================
          Contact Section
        ========================= */

        .contact {
          padding-top: 48px;
          padding-right: 16px;
          padding-bottom: 48px;
          padding-left: 16px;
        }

        .contact__inner {
          max-width: 860px;
          margin-top: 0;
          margin-right: auto;
          margin-bottom: 0;
          margin-left: auto;
        }

        .contact__title {
          margin-top: 0;
          margin-right: 0;
          margin-bottom: 24px;
          margin-left: 0;

          font-size: 28px;
          line-height: 1.3;
        }


        /* =========================
          Form Layout
        ========================= */

        .form {
          display: grid;
          gap: 18px;
        }

        .form__group {
          border: none;
          padding: 0;
          margin-bottom: 3rem;
        }

        .form__legend {
          font-weight: 700;
          font-size: 1.25rem;
          margin-bottom: 1em;
        }

        .form__label {
          display: inline-block;

          margin-top: 0;
          margin-right: 0;
          margin-bottom: 8px;
          margin-left: 0;

          font-weight: 600;
        }

        .req {
          color: red;
        }


        /* =========================
          Field
        ========================= */

        .field {
          display: grid;
          gap: 6px;          
        }
        .contact-details .field{
          margin-bottom: 2rem;
        }


        /* =========================
          Inputs
        ========================= */

        input,
        select,
        textarea,
        button {
          font: inherit;
        }

        input,
        select,
        textarea {
          width: 100%;

          border-width: 1px;
          border-style: solid;
          border-color: #ccc;
          border-radius: 10px;

          padding-top: 10px;
          padding-right: 12px;
          padding-bottom: 10px;
          padding-left: 12px;

          background-color: #ffffff;
        }

        textarea {
          resize: vertical;
        }


        /* =========================
          Grid
        ========================= */

        .grid {
          display: grid;
          gap: 14px;

          grid-template-columns: 1fr;
        }

        @media (min-width: 720px) {
          .grid {
            grid-template-columns: 1fr 1fr;
          }
        }


        /* =========================
          Choices (checkbox / radio)
        ========================= */

        .choices {
          display: grid;
          gap: 1rem;
          margin-top: 10px;
        }
        .choice {
          position: relative;
        }
        .choice span{
          display: flex;
          gap: 10px;
          align-items: flex-start;
          position: relative;
          display: block;
          cursor: pointer;
          border: solid 1px #707070;
          border-radius: 5px;
          padding: 0.5em 1.25em;
          transition: all .2s ease;
        }
        .choice input {
          position: absolute;
          opacity: 0;
          pointer-events: none;
        }
        .choice input:checked + span {
          border-color: var(--color-main);
          background-color: var(--color-main);
          color: #ffffff;
        }
        .choice input:focus + span{
          outline-width: 1px;
          outline-style: solid;
          outline-color: #0066ff;
          outline-offset: 2px;
        }


        /* =========================
          Sub Field
        ========================= */

        .form__sub {
          margin-top: 8px;

          display: grid;
          gap: 6px;
        }

        .form__hint {
          margin-top: 0;
          margin-right: 0;
          margin-bottom: 0;
          margin-left: 0;

          font-size: 0.9em;
          color: #555555;
        }


        /* =========================
          Actions
        ========================= */

        .form__actions {
          display: grid;
          gap: 10px;
        }

        .submit-btn {
          border-width: 0;
          border-style: solid;
          border-color: transparent;
          border-radius: 5px;
          padding-top: 12px;
          padding-right: 18px;
          padding-bottom: 12px;
          padding-left: 18px;
          cursor: pointer;
          font-weight: 700;
          width: 15em;
          margin: 0 auto 2rem;
          background: var(--color-main);
          color: #fff;
        }

        .form__note {
          margin-top: 0;
          margin-right: 0;
          margin-bottom: 0;
          margin-left: 0;

          font-size: 0.9em;
          color: #555555;
        }

        .form-errors{
          border:1px solid #e4b4b4;
          background:#fff3f3;
          padding:12px 14px;
          border-radius:8px;
          margin:12px 0;
          font-size: 0.75rem;
        }
        .form-errors ul{ margin:0; padding-left:18px; }
        .form-errors li{ margin:4px 0; }

        .field-error{
          margin-top:6px;
          font-size:12px;
          color:#b00020;
        }
        .is-invalid{
          outline: 2px solid rgba(176,0,32,.35);
          outline-offset: 2px;
        }

        .cc-modal{
          position:fixed;
          inset:0;
          opacity:0;
          visibility:hidden;
          pointer-events:none;

          transition:
            opacity .25s ease,
            visibility 0s linear .25s;
          z-index:999999;
        }
        .cc-modal.is-open{
          opacity:1;
          visibility:visible;
          pointer-events:auto;

          transition:
            opacity .25s ease;
        }
        .cc-backdrop{
          position:absolute;
          inset:0;
          background:rgba(0,0,0,.5);
        }
        .cc-dialog{
          position:relative;
          width: 90%;
          max-width: 720px;
          margin: 6vh auto;
          background:#fff;
          border-radius: 12px;
          padding: 18px 18px 14px;
          max-height: 88vh;
          overflow:auto;

          transform: translateY(20px);
          transition: transform .25s ease, opacity .25s ease;
          opacity:0;
        }
        .cc-modal.is-open .cc-dialog{
          transform: translateY(0);
          opacity:1;
        }
        .cc-dialog h2{
          color: var(--color-main);
        }
        .cc-body{
          margin-top: 10px;
        }
        .cc-dl{
          margin:0;
        }
        .cc-dl dt{
          font-weight:700;
          margin-top: 12px;
        }
        .cc-dl dd{
          margin: 6px 0 18px;
          border: solid 1px #ccc;
          border-radius: 10px;
          padding: 0.5em;
        }
        .cc-dl dd[data-k="concerns"] {
          white-space: pre-line;
        }
        .cc-pre{
          white-space: pre-wrap;
          word-break: break-word;
        }
        .cc-actions{
          display:flex;
          gap:10px;
          justify-content:flex-end;
          margin-top: 16px;
          padding-top: 14px;
          border-top: 1px solid #eee;
          position: sticky;
          bottom: 0;
          background: #fff;
        }
        .cc-btn{
          border:0;
          border-radius: 8px;
          padding: 10px 14px;
          cursor:pointer;
        }
        .cc-primary{
          background:var(--color-main);
          color:#fff;
        }
        .cc-secondary{
          background:#666;
          color:#fff;
        }

        @media (max-width: 767px) {
          .form__group{
            margin-bottom: 1rem;
          }
        }

      /* ----- phone ----- */
      .phone-contents{
        display: flex;
        align-items: center;
        gap: 2rem;
        margin-bottom: 2rem;
      }
      .phone-contents h4{
        flex: 3;        
        font-weight: 700;
        font-size: 1.25rem;
        align-items: center;
        position: relative;
      }
      .phone-contents .phone-num-container{
        flex: 5;
        position: relative;
      }
      .phone-contents .phone-num-container::before{
        content: "";
        width: 5px;
        background: var(--color-main);
        border-radius: 100vw;
        height: 100%;
        position: absolute;
        left: calc(-1rem - 2.5px);
      }
      .phone-num-container .phone-num{
        color: var(--color-main);
        font-size: 3.25rem;
        font-weight: 700;
        line-height: 1.5;
        display: block;
        white-space: nowrap;
      }
      .phone-num-container{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .phone-num-container .phone-num img{
        display: inline-block;
        width: 0.8em;
        margin-right: 0.25em;
        position: relative;
        top: 0.1em;
      }
      .phone-num-container .phone-sub{
        font-size: 1.25rem;
        text-align: center;
      }
      @media (max-width: 1024px) {
        .phone-contents h4{
          flex: 2;
        }
        .phone-contents .phone-num-container::before{
          left: 0;
        }
      }
      @media (max-width: 840px) {
        .phone-num-container .phone-num{
          font-size: 3rem;
        }
        .phone-num-container .phone-sub{
          font-size: 1.1rem;
        }
        .phone-contents .phone-num-container::before{
          left: -1rem;
        }
      }
      @media (max-width: 767px) {
        .contact-container h3{
          line-height: 1.3;
        }
        .phone-contents{
          flex-direction: column;
          gap: 0;
        }
        .phone-contents .phone-num-container::before{
          content: none;
        }
        .phone-contents h4{
          text-align: center;
          margin-bottom: 0;
        }
      }
      @media (max-width: 450px) {
        .phone-contents h4{
          margin-top: 0;
        }
        .phone-num-container .phone-num{
          font-size: 2.3rem;
          margin-top: 0.5em;               
        }
        .phone-num-container .phone-sub{
          font-size: 1rem;
        }
      }

      /* ----- footer ----- */
      .footer-container{
        display: flex;
        padding: 2rem 1rem;
        gap: 2rem;
        align-items: center;
      }
      .footer-container img{        
        width: 100%;
        max-width: 300px;
        min-width: 200px;
      }
      @media (max-width: 767px) {
        .footer-container{
          flex-direction: column;
          text-align: center;
          gap: 1rem;
        }
      }