/*===================
    ROOT
====================*/
@font-face {
    font-family: Notosans;
    src: url(../fonts/NotoSans.ttf);
}

:root {
--black: #000000;
--white: #ffffff;
--green: #58929B;
--red: #F08281;
--grey: #808080;
--grey2: #F5F5F5;
--light-green: #D3E8EC;
--fontreg: "Notosans";
}
/*===================
    BASE STYLE
====================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html{
    scroll-padding-top: 70px;
}

html,
body {
width: 100%;
height: 100%;
font-size: 62.5%;
}
body {
-moz-osx-font-smoothing: grayscale;
font-family: 'Noto Sans JP', sans-serif;

-webkit-font-smoothing: antialiased;
font-size: 1.4rem;
line-height: 1.5;

}
.pc-only{
display: block;
}
.sp-only-768,
.sp-only{
    display: none;
}
.container{
    max-width: 1000px;
}
.bg-grad{
    background: rgb(88,146,155);
    background: linear-gradient(-245deg, rgba(88,146,155,1) 0%, rgba(130,200,200,1) 100%);
}
.c-form__bggrad{
    background: rgb(88,146,155);
    background: linear-gradient(-245deg, rgba(88,146,155,1) 0%, rgba(130,200,200,1) 100%);
    color: var(--white);
    height: 50px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5;
    width: 100%;
    max-width: 260px;
    margin: 10px;
    border: none;
    cursor: pointer;
    transition: .2s ease-in-out;
    text-decoration: none;
}
.c-form__bggrad:hover,
.c-form__bggrad:focus{
    box-shadow: 0 0.5em 0.5em -0.4em var(--green);
    transform: translateY(-0.25em);
    color: var(--white);
    text-decoration: none;
}
.c-form__btns{
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-form__back{
    background-color: var(--white);
    border: 2px solid var(--green);
    color: var(--green);
    height: 50px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    max-width: 260px;
    margin: 10px;
    cursor: pointer;
    transition: .2s ease-in-out;
    text-decoration: none;
}
.c-form__back:hover,
.c-form__back:focus{
    box-shadow: 0 0.5em 0.5em -0.4em var(--green);
    transform: translateY(-0.25em);
    color: var(--green);
    text-decoration: none;
}
/*#pointer-dot {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border: 2.5px solid var(--black)!important;
    position: fixed;
    border-radius: 4px;
    z-index: 999901;
    pointer-events: none;
    transition: border-color 0.5s;
}

#pointer-ring {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    padding: 35px;
    border: 3px solid var(--green)!important;
    box-shadow:3px 3px 6px var(--light-green) ;
    position: fixed;
    border-radius: 100px;
    z-index: 999902;
    pointer-events: none;
}

html {
    cursor: none !important;
}

a {
    cursor: none !important;
}*/


.para{
    line-height: 1.5;
}
.font-green{
    color: var(--green);
}
.c-breadcrumb ul{
    font-size: 14px;
    color: var(--green);
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 100px;
}
.c-breadcrumb ul a{
    color: var(--green);
}
.c-breadcrumb li{
   
    list-style: none;
}
/*===================
    MAIN STYLE
====================*/
.nav-logo{
    width: 100%;
    max-width: 150px;
    padding: 10px;
}
.nav-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0px auto;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: var(--white);
    z-index: 9999;
}
.nav-top-ul{
    display: flex;
    align-items: center;
    color: var(--green);
    list-style: none;
    margin-bottom: 0px;
}
.logo-box h1{
margin-bottom: 0px;
}
.menu-area{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 5;
}
.menu-area .nav-top-link{
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 144px;
    text-decoration: none;
    font-weight: bold;
    transition: .2s ease;
}
.menu-area .nav-top-link:hover,
.menu-area .nav-top-link:focus{
    opacity: 70%;
}
.menu-area .menu-red .nav-top-link{
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--red);
    height: 100%;
    width: 144px;
    text-decoration: none;
}
.navbar{
    margin-top: 70px;
}
.nav-green{
    background-color: var(--green);
    color: var(--white);
    font-weight: bold;
    font-size: 14px;
}
.navbar-dark .navbar-nav .nav-link{
    color: var(--white);
    font-weight: bold;
    font-size: 14px;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus{
    color: var(--white);
    opacity: 70%;
}
.nav-item{
    margin: 0px 25px;
}
.sec-1{
    padding: 40px 0px;
}
.height-full{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-area_1{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0px;
    width: 100%;
}
.red-btn-cta{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 210px;
    border-radius: 50px;
    background-color: var(--red);
    color: var(--white);
    font-size: 14px;
    text-decoration: none;
    transition: .2s ease;
    margin: 10px;
    height: 65px;
    text-align: center;
    font-weight: 600;
}
.red-btn-cta:hover,
.red-btn-cta:focus{
    box-shadow: 0 0.5em 0.5em -0.4em var(--red);
    transform: translateY(-0.25em);
    text-decoration: none;
    color: var(--white);
}
.red-btn-cta2{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 210px;
    border-radius: 50px;
    background-color: var(--white);
    border: 2px solid var(--red);
    color: var(--red);
    font-size: 14px;
    text-decoration: none;
    transition: .2s ease;
    margin: 10px;
    height: 65px;
    text-align: center;
    font-weight: 600;
}
.red-btn-cta2:hover,
.red-btn-cta2:focus{
    box-shadow: 0 0.5em 0.5em -0.4em var(--red);
    transform: translateY(-0.25em);
    text-decoration: none;
    color: var(--red);
}
.recent-top_inner{
    width: 100%;
    margin: 20px auto;
    max-width: 820px;
    font-size: 12px;
}
.sec-2{
    padding: 50px;
}
.sec-2 .para{
    font-weight: 600;
}
.icon-grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 } 
 .icon{
    width: 100%;
    max-width: 120px;
    margin: 5px;
 }
.content1{
    margin: 0px auto;
    max-width: 900px;
} 
.c-box h3{
    font-size: 35px;
    letter-spacing: 0.5rem;
    font-weight: 600;
    line-height: 4.6rem;
}
.content2{
    padding: 50px;
    background-color: var(--white);
    border-radius: 30px;
    margin: 50px 0px 0px;
}
.content2_inner{
    width: 100%;
    max-width: 800px;
    margin: 0px auto;
}
.check,
.check-img{
    width: 20px;
}
.f-600{
    font-weight: 600;
}
.content3{
    padding: 50px;
    background-image: url(../img/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.content3 h4{
    font-size: 22px;
    font-weight: 600;
    color: var(--white);
    line-height: 3rem;
    letter-spacing: 1;
}

.sec3{
    padding: 50px 0px;
    background-color: var(--grey2);
    z-index: 3;
}
.r-title,
.sec-header{
    position: relative;
}

.etitle{
    position: absolute;
    bottom: -5px;
    z-index: 0;
}
.etitle2{
    position: absolute;
    bottom: 0px;
    z-index: 0;
}
.et1{
    margin-left: 75px;
}
.et2{
    margin-left: 150px;
}
.et3{
    margin-left: 80px;
}
.et4{
    margin-left: 80px;
}
.et6{
    margin-left: 120px;
}
.et7{
    margin-left: 90px;
}
.et8{
    margin-left: 100px;
}
.r-title h5{
    position: relative;
    z-index: 3;
}
.sec-header h5{
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: bold;
}
.sec-header h2{
    font-size: 35px;
    letter-spacing: 4px;
    line-height: 4rem;
    font-weight: bold;
    z-index: 3;
    position: relative;
}
.box-inner{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.transit-box{
    position: absolute;
    left: 0px;
    height: 75%;
    width: 70%;
}

.transit-box2{
    position: absolute;
    right: 0px;
    height: 75%;
    width: 50%;
}
.transit-box3{
    position: absolute;
    right: 0px;

    height: 65%;
    width: 40%;
}
.sec3 img{
    z-index: 5;
}

.sec3 .etitle {
    position: absolute;
    bottom: -5px;
    z-index: 0;
}
.i-wrap,
.i-icon{
    width: 40px;
}
.num{
    width: 90px;
}
.num2{
    width: 210px;
}
.para-mini{
    font-weight: bold;
    font-size: 14px;
    margin-top: -15px;
    letter-spacing: 1;
}
.para-big{
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 5;
}
.up-content{
    margin-bottom: 35px;
}
.para{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5;
    line-height: 1.5;
}
.para-f-600{
    font-weight: 600;
}
.c-3_box{
    width: 100%;
    max-width: 445px;
    padding: 20px;
}

.c-3_box2{
    margin-right: 0px;
    margin-left: auto;
}
.note{
    font-size: 14px;
    color: var(--grey);
}
.x-clip{
    overflow-x: clip;
}
.sec-4{
    padding: 50px 0px;
}
.video-box{
    margin: 40px auto;
    max-width: 720px;
}
.font-white{
    color: white;
}
.repeat-box{
    padding: 50px;
}
.repeat-box h3{
    font-size: 35px;
    letter-spacing: 0.7rem;
    font-weight: 600;
    line-height: 4.6rem;
}
.white-btn-cta{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 210px;
    border-radius: 50px;
    background-color: var(--white);
    color: var(--green);
    font-size: 14px;
    text-decoration: none;
    transition: .2s ease;
    margin: 10px;
    height: 65px;
    text-align: center;
    font-weight: 600;
}
.white-btn-cta:hover,
.white-btn-cta:focus{
    box-shadow: 0 0.5em 0.5em -0.4em var(--white);
    transform: translateY(-0.25em);
    text-decoration: none;
    color: var(--green);
}
.white-btn-cta2{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 210px;
    border-radius: 50px;
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    font-size: 14px;
    text-decoration: none;
    transition: .2s ease;
    margin: 10px;
    height: 65px;
    text-align: center;
    font-weight: 600;
}
.white-btn-cta2:hover,
.white-btn-cta2:focus{
    box-shadow: 0 0.5em 0.5em -0.4em var(--white);
    transform: translateY(-0.25em);
    text-decoration: none;
    color: var(--white);
}

.white-btn-cta3{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
    background-color: var(--white);
    color: var(--green);
    font-size: 14px;
    text-decoration: none;
    transition: .2s ease;
    margin: 0px;
    height: 65px;
    text-align: center;
    font-weight: 600;
}
.white-btn-cta3:hover,
.white-btn-cta3:focus{
    box-shadow: 0 0.5em 0.5em -0.4em var(--white);
    transform: translateY(-0.25em);
    text-decoration: none;
    color: var(--green);
}
.white-btn-cta4{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    font-size: 14px;
    text-decoration: none;
    transition: .2s ease;
    margin: 0px;
    height: 65px;
    text-align: center;
    font-weight: 600;
}
.white-btn-cta4:hover,
.white-btn-cta4:focus{
    box-shadow: 0 0.5em 0.5em -0.4em var(--white);
    transform: translateY(-0.25em);
    text-decoration: none;
    color: var(--white);
}
.bubble{
    color: var(--white);
    font-weight: 600;
    margin-bottom: 40px;
    position:relative;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    min-height: 100px;
}
.bubble:after {
    content: '';
   position: absolute;
   left: auto;
   right: auto;
   bottom: -19px;
   width: 0;
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-top: 20px solid var(--green);
   clear: both;
opacity: 80%;
}
.g-box{
    background-color: var(--grey2);
    border-radius: 20px;
    padding:25px ;
}
.salon,
.job{
    font-size: 12px;
}
.sec-5{
    padding: 50px 0px;
}
.l-prof{
    border-radius: 10px;
    width: 100%;
    max-width: 80px;
    margin-right: 10px;
}
.prof{
    display: flex;
    align-items: center;
}
.green-btn-cta2{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 260px;
    border-radius: 50px;
    background-color: transparent;
    border: 2px solid var(--green);
    color: var(--green);
    font-size: 14px;
    text-decoration: none;
    transition: .2s ease;
    margin: 10px;
    height: 50px;
    text-align: center;
    font-weight: 600;
}
.green-btn-cta2:hover,
.green-btn-cta2:focus{
    box-shadow: 0 0.5em 0.5em -0.4em var(--green);
    transform: translateY(-0.25em);
    text-decoration: none;
    color: var(--green);
}
.btn-full{
    width: 100%;
    display: flex;
    margin: 10px;
}
.a-link{
    color: var(--green);
    text-decoration: underline;
}
.a-link:hover{
    color: var(--green);
}
.p-title{
    font-size: 18px;
    font-weight: bold;
}
.sec-6{
    padding: 50px 0px;
    background-color: var(--grey2);
}
.step-box{
    position: relative;
}
.triangle{
    position: absolute;
    width: 15px;
    right: 0px;
    top: 40%;
}
.step{
    font-weight: 600;
    font-size: 18px;
}
.s-num{
    font-size: 30px;
    margin-left: 5px;
}
.sec-6 .p-title{
    font-size: 20px;
}
.t-box{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 220px;
}
.price-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:50px 0px 30px 0px;
    color: var(--grey);
}
.price-box .price{
    width: 100%;
    max-width: 336px;
    margin-bottom: 30px;
}
.sec-7{
    padding: 50px 0px;
    background-color: var(--grey2);
}
.price-box .para{
    font-size: 12px;
    margin-bottom: 0px;
}
.sec-7_content{
    width: 100%;
    max-width: 800px;
    margin: 0px auto;
    border-top: 3px solid var(--green);
    border-bottom: 3px solid var(--green);
    padding: 30px 0px;
}
.l-box,
.p-icon{
    width: 30px;
}
.border-btm-green{
    border-bottom: 2px dotted var(--green);
    width: 100%;
    height: 1px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.linkat-wrap{
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}
.linkat-wrap .para{
    font-size: 16px;
}
.linkat-wrap .note{
    font-size: 12px;
}
.linkat{
    width: 100%;
    max-width: 120px;
}
.note-ul{
    list-style: none;
}
.note-ul li::before{
    content: "※";
    display: inline-block;
    width: 1em;
}
.panel-title > a:before {
    float: right !important;
    font-family: FontAwesome;
    content:"\f068";
    padding-right: 5px;
}
.panel-title > a.collapsed:before {
    float: right !important;
    content:"\f067";
}
.panel-title > a:hover, 
.panel-title > a:active, 
.panel-title > a:focus  {
    text-decoration:none;
}
.sec-8{
    padding: 50px 0px;
}
/* Accordion styles */
.tabs {
   
    overflow: hidden;
   font-size: 14px;
  }
  .accordionItem{
    background-color: var(--grey2);
  }
  .accordionTitle {
    width: 100%;
    overflow: hidden;
    align-items: center;
    padding: 1em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }
  
  
  .accordionTitle::after {
    content: "";
    background-image: url(../img/plus.svg);
    background-size: 1em 1em;
    min-width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.35s;
  }
  .tab-content {
    max-height: 0;
    padding: 0 1em;
    color: #2c3e50;
    background: white;
    transition: all 0.35s;
  }
  .tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: #2c3e50;
    cursor: pointer;
  }
  .tab-close:hover {
    background: #E2E2E2;
  }
  
  .tab-label .is-open + .tab-label {
    background: #E2E2E2;
  }
  .tab-label .is-open + .tab-label::after {
    transform: rotate(45deg);
  }
  .tab-label .is-open ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
  }

  .accordionTitle {
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .accordionContent{
    padding: 1em;
    padding-top: 0px;
  }
  .accordionTitle + .accordionContent {
    display: none;
  }
  
  .accordionTitle.is-open + .accordionContent {
    display: block;
  }

  .is-open::after{
   /* transform: rotate(45deg);*/
    background-image: url(../img/minus.svg);
  }
 .q-box{
    display: flex;
    align-items: start;
}
.q-box .q-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
}
.q-box .q-area img{
    width: 15px;
    margin-top: 4px;
}
.q-text p{
    font-size: 16px;
    font-weight: bold;
}
.q-ans p{
    font-size: 14px;
    font-weight: normal;
}
.recent-news-wrap{
    background-color: var(--white);
    padding: 25px 35px;
}
.sec-9{
    padding: 50px 0px;
    background-color: var(--grey2);
}
.recent-news-wrap{
    border-radius: 15px;
    box-shadow: 3px 3px 5px var(--light-green);
}
.btn-r{
    width: 160px;
}
.btn-r .c-form__bggrad{
    height: 35px;
}
.r-title h5{
    font-size: 25px;
    font-weight: bold;
}
.r-news{
    display: flex;
    align-items: center;
    justify-content: start;
}
.date{
    color: var(--grey);
    margin-right: 30px;
    font-size: 14px;
    font-weight: 600;
}
.a-category{
    border: 1px solid var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    color: var(--green);
    font-size: 10px;
    font-weight: 600;
    height: 25px;
    border-radius: 50px;
    margin-right: 30px;
}
.ar-title{
    font-size: 14px;
    font-weight: bold;
}
.sec-10{
    padding: 50px 0px;
}
.font-white{
    color: var(--white);
}
.mb-50{
    margin-bottom: 50px;
}
.border-right-white{
    border-right: 4px dotted var(--white);
}
.sec-10 .btn-area_1{
margin: 0px;
}



.footer{
    color:var(--green);
    background-color: var(--white);
    font-weight: bold;
    font-size: 14px;
  }
 .footer-logo{
    width: 100%;
    max-width: 240px;
 }
  .list-style{
    list-style-type:none!important;
    cursor:pointer;
    font-size:14px;
    opacity:.8;
  }
  .copy-right{
    font-size:.75rem;
    opacity:.8;
  }
  
.b-green{
    border-bottom: 1px solid var(--green);
    padding-bottom: 10px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 130px;
}
.b-green h5{
    margin-bottom: 0px;
}
.menu-list2{
    width: 100%;
    margin: 20px auto;
}
.menu-list2 .list-style2{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.menu-list2 .list-style2 .link-inside{
    padding: 0px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    font-weight: bold;
}
.border-right-green{
    border-right: 1px solid var(--green);
}
.copyright{
    font-size: 12px;
    margin-bottom: 10px;
}







/*===================
    CONTACT PAGE
====================*/
.l-container{
    width: 100%;
    max-width: 700px;
    margin: 0px auto;
}
.c-form{
    margin-top: 70px;
}
.c-checkp{
    font-weight: 600;
    margin-bottom: 20px;
}
.c-form label{
    font-size: 18px;
    font-weight: 600;
}
.c-form c-lgroup{
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-form .c-require{
    font-size: 12px;
    display:inline-flex;
    width: 45px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--red);
    padding: 0px 2px 2px 2px;
    border-radius: 3px ;
    margin-left: 10px;
    color: var(--red);
}
.c-igroup{
    margin-bottom: 30px;
}
.c-form select,
.c-form input{
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--black);
    width: 100%;
    margin-top: 5px;
    padding: 5px 10px;
}
.c-form select{
    padding-right: 20px;
    -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background: url("../img/arrow-down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url("../img/arrow-down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}
.c-form textarea{
    min-height: 140px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--black);
    padding: 5px 10px;
    white-space: pre-wrap;
}
.c-form .checkdif{
    height: auto;
}
.c-igroup{
    position: relative;
}
.c-form .error{
    bottom: 0px;
    left: 0px;
    color: var(--red);
    font-size: 12px;
}
.f-grey{
    font-size: 14px;
    color: var(--grey);
}
.c-confirm .c-igroup{
    margin-bottom: 30px;
}
.c-confirm__value{
    background-color: var(--grey2);
    padding: 5px 20px;
    min-height: 40px;
    width: 100%;
    margin-top: 5px;
    display: flex;
    align-items: center;
}
#content{
    white-space: pre-wrap;
}

.c-thanks__msg{
    margin: 60px 0px;
    background-color: var(--grey2);
    padding: 50px 20px;
    border-radius:40px ;
}
.c-thanks__msg a{
    color: var(--green);
    text-decoration: underline;
    cursor: pointer;
}
.c-title{
    font-size: 35px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 50px;
    color: var(--green);
}
.empty-input {
    border-color: var(--red) !important;
  }
  .f-500{
    font-weight: 500;
  }

 .check-f input[type=checkbox]{
    width: 16px;
    accent-color: var(--green);
    margin-right: 5px;
    margin-top: -5px;
 }
 input[type=radio]{
    accent-color: var(--green);
    margin-right: 5px;
    margin-top: -5px;
 }
.c-form input[type=radio]{
width: auto;
 }
 .cf-link{
    color: var(--green);
    text-decoration: underline;
 }
 .cf-link:hover{
    color: var(--green);
    text-decoration: underline;
 }
 .privacy-check{
    vertical-align: middle;
 }
.agency-input{
    width: 100%;
    max-width: 50%;
    margin-right: 30px;
} 
.s-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}
.radio-wrap label{
    margin-bottom: 0px;
}
.radio-wrap input[type=radio]{
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.f-link a{
    color: var(--green);
}
.f-link a:hover{
    color: var(--green);
}
.sec-cs .c-wrap{
    height: 80vh;
    margin: 20px;
}
.sec-cs .csimg{
    width: 100%;
    max-width: 220px;
}
.check, .check-img{
    min-width: 20px !important;
    margin-top: -1px;
}
.mtsp10{
    margin-bottom: 0px;
}
.sec1{
    padding-bottom: 35px;
}
.btn-250
{
    max-width: 250px;
}
/*=========Maximum 1000px ===========*/
@media screen and (max-width:1000px) {
.nav-item{
    margin-bottom: 15px;
}
.icon{
    max-width: 115px;
}
}
/*=========Maximum 768px ===========*/
@media screen and (max-width:768px) {
    .c-form{
        padding: 20px;
    }
    .c-form__btns{
       flex-direction: column;
    }
    .icon-grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .icon{
        max-width: 150px;
    }
    .text1{
        max-width: 400px;
    }
    .text2{
        padding: 30px;
        max-width: 210px;
    }
    .c-3_box{
        margin-right: auto;
        margin-left: auto;
    }
    .para-big{
        font-size: 30px;
    }
    .bubble{
        margin-top: 40px;
    }
    .triangle{
        position: absolute;
        width: 15px;
        display: block;
        right: 49%;
        left: 49%;
        top: unset;
        bottom: -20px;
        transform: rotate(90deg);
    }
    .step-box{
        margin-bottom: 50px;
        padding-bottom: 35px;
    }
    .s-250{
        width: 100%;
        max-width: 250px;
        margin-left: auto;
        margin-right: auto;
    }
    .r-news{
        flex-direction: column;
        align-items: start;
    }
    .footer .logo-box{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }
    .b-green{
        max-width: 100%;
    }
    .c-box h3{
        font-size: 25px;
        line-height: 3rem;
        margin-bottom: 0px;
    }
    .content2{
        padding: 40px 20px 20px 20px;
    }
    .check, .check-img{
        min-width: 20px !important;
        margin-top: -1px;
    }
    .content3{
        padding: 50px 10px;
    }
    .sec-header h2{
        font-size: 25px;
    }
    .sec-header h5{
        font-size: 18px;
    }
    .repeat-box{
        padding: 30px 0px;
    }
    .repeat-box .btn-area_1{
        margin: 20px 0px;
    }
    .border-right-white{
        border-right: none;
    }
    .white-btn-cta3{
margin-bottom: 25px;
    }
    .menu-list2 .list-style2 .link-inside{
        margin-bottom: 10px;
    }
    .repeat-box h3{
        font-size: 25px;
        line-height: 3.5rem;
    }
    .c-h3-wrap,
    .repeat-box .repeat-t-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .c-h3-wrap{
        margin-bottom: 40px;
    }
    .sec-2{
        padding: 50px 0px;
    }
    .q-box .q-area{
        min-width: 50px;
    }
    
    .sec-2 .text-box .para-wrap{
        margin: 0px auto 20px auto;
    }
    .mb-sp-50{
        margin-bottom: 80px;
    }
    .sec-cs .c-wrap{
        height: auto;
        margin: 50px 20px;
    }
}
/*=========Maximum 576px ===========*/
@media screen and (max-width:576px) {
    .pc-only{
        display: none;
    }
    .sp-only{
        display: block;
    }
    .c-title{
        font-size: 23px;
        letter-spacing: 2px;
    }
    .nav-logo{
        max-width: 120px;
    }
    .menu-area .nav-top-link{
        color: var(--green);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width:80px;
        text-decoration: none;
        font-weight: bold;
        font-size: 12px;
        transition: .2s ease;
        margin-left: 15px;
    }
    .menu-area .menu-red .nav-top-link{
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--red);
        height: 100%;
        width:86px;
        text-decoration: none;
    }
    .menu-area{
        line-height: 4.1;
    }
    .s-box{
        flex-direction: column;
        align-items: start;
    }
    /*.icon-grid{
        grid-template-columns: 1fr 1fr;
    }*/
    .icon{
        width: 120px;
    }
    .menu-list2 .list-style2{
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }
    .border-right-green{
        border-right: none;
    }
    .r-title h5{
        font-size: 18px;
    }
    .recent-news-wrap{
        padding: 20px;
    }
    .agency-input{
        max-width: unset;
        width: 100%;
    }
    .menu-area .nav-top-link{
        font-size: 12px;
    }
    .et1{
        margin-left: 5px;
    }
    .et2{
        margin-left: 5px;
    }
    .et3{
        margin-left: 5px;
    }
    .et4{
        margin-left: 5px;
    }
    .et6{
        margin-left: 5px;
    }
    .et7{
        margin-left: 35px;
    }
    .et8{
        margin-left: 5px;
    }
    .etitle2{
        bottom: -5px;
    }
    .etitle{
        bottom: -15px;
    }
    .navbar{
        margin-top: 49px;
    }
    .accordionTitle::after{
        margin-left: 20px;
        margin-right: 20px;
    }
    .accordionContent{
        padding-right: 20px;
        padding-left: 0px;
    }
    .accordionTitle{
        padding-right: 0px;
        padding-left: 0px;
    }
    .sec3 .height-full{
        align-items: left;
    }
    .transit-box{
        width: 50%;
    }
    .white-btn-cta2{
        margin-right:0px ;
    }
    .sec-1{
        padding-bottom: 10px;
        padding-top: 20px;
    }
    .mtsp10{
        margin-top: 10px;
    }
    .price-box .price{
        max-width: 286px;
    }
}  
/*=========Maximum 460px ===========*/
@media screen and (max-width:460px) {
    .icon-grid{
        grid-template-columns: 1fr 1fr;
    }
    .icon{
        width: 140px;
    }
    .c-breadcrumb ul{
        font-size: 12px;
        flex-wrap: wrap;
    }
    .et8{
        max-width: 130px;
    }
}
/*=========Maximum 420px ===========*/
@media screen and (max-width:420px) {
    .menu-area .nav-top-link{
        width:70px;
        
    }
    .menu-area .menu-red .nav-top-link{
        width:80px;
    }
    .icon{
        width: 130px;
    }
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
  }

  

  .modal {
    display: none;
    position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgba(0, 0, 0, 0.4);
 }
 
 .modal-content {
     background-color: #fff;
     padding: 30px 35px;
     width: 80%;
     max-width: 480px;
     position: relative;
     margin: 300px auto;
     filter: drop-shadow(0px 2px 6px #777);
     border-radius: 2px;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 .modal-content p {
     margin: 0;
 }
 .modal--btn__block {
     display: flex;
     justify-content: end;
     gap: 15px;
 }
 .modal--btn__block button {
     padding: 4px 25px;
     border: solid 1px #ddd;
     border-radius: 3px;
     font-size: 1rem;
 }
 .modal--btn__block button:hover {
     opacity: 0.6;
 }
 button#ok {
     background: #f0db40;
 }