@charset "UTF-8";
.mail-btn{display: none;}
.gradient-button{display:  none;}
.logo {color: #000;font-size: 24px;}

header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
transition: 0.3s ease;
}
header.fixed {position: fixed;background-color: #fff;box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}
.page-posts header.fixed {box-shadow: inherit;}

header .header-inner{
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
width: 95%;
margin: 30px auto 0 auto;
}
header.fixed .header-inner {
max-width: inherit;
margin: 0 auto ;
width: 100%;
padding-left: 2%;
}
.header-inner .logo{margin-left: inherit;}

header .right-link {
margin-top: 0;
padding-left: 50px;
border-radius: 50px;
background-color: #fff;
width: 810px;
height: 89px;
border-radius: 50px;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
margin-left: auto;
margin-right: 0;
transition: all 0.3s ease;
display: flex;
align-items: center;
list-style: none;
margin: 0 auto;
justify-content: space-between;
}
.fixed .right-link {background-color: transparent;box-shadow: none;}
.right-link a{text-decoration: none;}
.right-link li {padding-right: 50px;}
.right-link li:last-child {padding-right: 0px;}

header .contact-btn{
background-color: #FFBF34;
padding: 35px;
display: inline-block;
width: 250px;
text-align: center;
margin: 0 auto;
color: #fff;
}
nav .right-link .contact-btn{
background-color: #FFBF34;
padding: 35px;
display: inline-block;
width: 250px;
text-align: center;
margin: 0 auto;
border-radius: 50px;
color: #fff;
margin-right: -1px;
}
header.fixed nav .right-link .contact-btn {border-radius: 0px;}

.hamburger-menu, .drawer-menu {display: none;}
.drawer-overlay{display: none!important;}
.drawer-hamburger {
padding: 30px 1.5rem 38px !important;
position: absolute !important;
right: 0 !important;
top: 0 !important;
border-radius: 0 0 0 10px;
background: linear-gradient(45deg, #59BB96, #3E87A2) !important;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{background-color: #fff!important;}
.drawer-open .drawer-hamburger-icon,.drawer-open header.fixed .drawer-hamburger-icon {background-color: transparent!important;}
.drawer--right .drawer-nav {right: -100% !important;width: 100% !important;padding-top: 120px;}
.drawer--right.drawer-open .drawer-nav{right: 0 !important;z-index: 200 ;}
.drawer-menu li {width: 100%;position: relative;}
.drawer-menu li ul.sub_menu li:before{content: none;}
.drawer-menu li a {display: block;text-align: center;text-decoration: none;}
.drawer-menu li a p {font-size: 16px;font-weight: 700;color:#1D1D1D;}
.dropdown:hover > a .dot {display: inline-block;}

.sub_menu {
display: none;
position: absolute;
top: 100%;
background: white;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
z-index: 10;
left: 65%;
transform: translateX(-50%);
width: 260px;
}
.dropdown:hover .sub_menu {display: block;}
.sub_menu li {list-style: none;}
.sub_menu li a {
display: block;
padding: 0.75rem 1rem;
text-decoration: none;
text-align: center;
color: #000;
}
.sub_menu li {padding: 0;}
.sub_menu li a:hover {background-color: #e0e0e0;}

.right-link .dropdown {padding-bottom: 35px;padding-top: 35px;position: relative;}
.right-link .sub-menu-pc li {padding: 0;width: 100%;}
.right-link .sub-menu-pc a {
display: block;
padding: 10px 15px;
text-align: center;
color: #fff;
text-decoration: none;
transition: background-color 0.2s;
}
.right-link .sub-menu-pc a:hover {background-color: #CFAE67;}
.right-link .sub-menu-pc {
display: none;
position: absolute;
top: 100%;
left: 30%;
transform: translateX(-50%);
background-color: #FFBF34;
list-style: none;
z-index: 10;
min-width: 180px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 10px 0;
margin: 0;
}
.right-link .dropdown:hover > .sub-menu-pc {display: block;}

.sp-btns{display:none;}

.fv-content {height: 100vh;}
.wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date {display: block;font-size: 16px;}

:root {
--gradient-start-light: #90dffe;
--gradient-end-light: #3cd3ad;
--gradient-start-dark: #ffc48d;
--gradient-end-dark: #f07470;
--button-height: 55px;
--button-radius: 999px;
--button-color: #3d3d3d;
--button-bg: #fff;
--border-thickness: 3px;
}

.gradient-button {
position: relative;
width: 310px;
height: var(--button-height);
padding: 0;
border-radius: var(--button-radius);
border: none;
outline: none;
background: transparent;
cursor: pointer;
transition: box-shadow 0.3s ease;
}
.button-text{margin: auto 0 auto auto;}

.border-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
z-index: 1;
background: linear-gradient(135deg,#D1FDFF,#E0F2DB 40%,#F3E3AC  60%,#FDDB92);
overflow: hidden;
}

.button-content {
display: inline-flex;
align-items: center;
justify-content: center;
max-height: 49px;
padding: 0 30px;
height: 100%;
position: absolute;
top: var(--border-thickness);
left: var(--border-thickness);
right: var(--border-thickness);
bottom: var(--border-thickness);
border-radius: calc(var(--button-radius) - var(--border-thickness));
font-size: 18px;
font-weight: 600;
color: var(--button-color);
background-color: var(--button-bg);
z-index: 2;
}

.arrow-icon {
width: 18px;
margin-right: 0;
margin-left: auto;
height: 18px;
color: var(--button-color);
transition: transform 0.3s ease;
}
.gradient-button:hover .arrow-icon {transform: translateX(3px);}

.border-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(45deg,transparent 40%,rgba(255, 255, 255, 0.6) 50%,transparent 60%);
background-size: 200% 200%;
opacity: 0;
transition: opacity 0.3s ease;
}
.gradient-button:hover .border-container::after {opacity: 1;animation: border-shine 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;}

@keyframes border-shine {
    0% {background-position: -100% 0;}
    100% {background-position: 100% 0;}
}

.footer-front {
background-image: url(../images/footer-bg.webp);
background-repeat: no-repeat;
height: auto;
display: flex;
justify-content: center;
background-size: cover;
background-position: center;
width: 95%;
margin: 0 auto;
border-radius: 190px;
padding: 60px 0;
align-items: center;
text-align: center;
}
.footer-front__wrap {display: grid;justify-items: center;gap: 20px 0;}
.footer-front .common-title {margin: 0;}
.footer-front .common-title span{margin-top: 15px;line-height: 1em;}
.footer-front p {letter-spacing: initial;}

.footer-right-link-wrap{display: flex;justify-content: space-between;margin: 50px 50px 30px 50px;}
.footer-right-link__margin{margin-top: 40px;}
footer .footer-right-link{
min-width: 530px;
width: 90%;
justify-content: space-between;
line-height: 2.8em;
display: flex;
align-items: normal;
justify-content: space-between;
list-style: none;
}
.footer-right-link__light a{font-weight: 400;}
.sdgs {margin-top: 90px;}
.footer-category-links a{font-weight: 400;}
.footer-category-links a::before{content: " - ";}
.copyright{width: fit-content;margin: 10px 0px 0px auto;}

@media screen and (max-width: 1480px) {
    header .header-inner{max-width: 1130px;margin: 20px auto 0 auto;}
}

@media screen and (max-width: 1100px) {
    .active{position: fixed;}
    .sp-btns{display: flex;}

    .mail-btn {
    content: "";
    background-image: url(../images/mail.svg);
    display: block;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 200;
    background-color: #fff;
    border: 3px solid #FFBF34;
    width: 70px;
    height: 70px;
    border-radius: 50px;
    margin-right: 20px;
    }

    header{background-color: #fff;}
    header .right-link {display: none;}
    header .header-inner {max-width: 1130px;}
    header.fixed .header-inner {width: 95%;padding: 0;}
    header.fixed .header-inner .logo ,.fixed .header-inner .logo{margin-left: 0px;}

    .sub_menu {
    transform: inherit;
    display: block;
    width: 100%;
    position: inherit;
    box-shadow: inherit;
    }
    .sub_menu.js-sub-menu {
    display: none;
    width: 100%;
    position: static;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
    }

    .hamburger-menu {
    display: block;
    cursor: pointer;
    z-index: 200;
    background-color: #FFBF34;
    padding: 20px;
    width: 70px;
    height: 70px;
    border-radius: 90px;
    position: relative;
    }
    .hamburger-menu span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #fff;
    margin: 6px 0;
    transition: transform 0.3s ease-in-out;
    }
    .hamburger-menu.active span:nth-child(1) {transform: translateY(9px) rotate(45deg);}
    .hamburger-menu.active span:nth-child(2) {opacity: 0;}
    .hamburger-menu.active span:nth-child(3) {transform: translateY(-9px) rotate(-45deg);}

    .drawer-menu {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    transition: left 0.3s ease-in-out;
    z-index:150;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: visible;
    justify-content: center;
    }
    .drawer-menu.open {
    left: 0;
    overflow-y: visible;
    justify-content: flex-start;
    padding-top: 100px;
    }
    .open .drawer-menu {
    justify-content: center;
    height: 100vh;
    left: 0;
    overflow-y: scroll;
    width: 100%;
    overflow: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
    }
    .open {overflow: scroll ;}
    .drawer_nav_header {position: relative;}
    .drawer-menu ul.sub_menu li a {font-size: 14px;padding: 10px 0;}
    .drawer-menu li a {padding: 15px 0;width: 100%;display: inline-block;}

    .drawer_nav_link,.drawer_nav_sub-link {
    display: block;
    text-decoration: none;
    padding: 1rem;
    position: relative;
    }

    .drawer_nav_list,.drawer_nav_panel {list-style: none;padding: 0;}
    .drawer_nav_panel {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-left: 1rem;
    background-color: #fff;
    }
    .drawer_nav_panel li {padding: 0.5rem 0;}
    .drawer_nav_panel li a {
    display: block;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    }

    .active .drawer-nav__margin {margin-top: 0px !important;}

    .drawer-dropdown {margin-top: 50px;}
    .drawer-menu li,.drawer-menu li:first-child,.drawer-menu li.dropdown {
    margin: 0 auto;
    padding: inherit;
    max-width: inherit;
    text-align: center;
    }
    .drawer-menu li.dropdown::before,.dropdown:hover::before {display: none;}
    header .drawer-menu .menu-item .dropdown-list {max-width: inherit;}
    .dropdown li a:hover {background-color: inherit;}
    .dropdown p {margin-left: 0px;}
    .drawer-menu ul {
    list-style: none;
    padding: 0;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    }

    .accordion-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 210;
    }
    .accordion-toggle::before,.accordion-toggle::after {
    content: "";
    position: absolute;
    background-color: #FFBF34;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .accordion-toggle::before {width: 100%;height: 2px;transform-origin: center;}
    .accordion-toggle::after {width: 2px;height: 100%;transform-origin: center;}
    .accordion-toggle.active::after {transform: scaleY(0) rotate(90deg);opacity: 0;}
    .accordion-toggle.active::before {transform: rotate(0deg) scaleX(1);}
    .drawer-nav_link {
    display: block;
    text-decoration: none;
    padding: 1rem;
    position: relative;
    }

    footer .footer-right-link-wrap {align-items: center;}
    .footer-right-link-wrap ul {text-align: center;}
    footer .footer-right-link {
    max-width: 800px;
    width: 100%;
    flex-wrap: wrap;
    max-width: 300px;
    line-height: 2em;
    margin: 20px auto;
    justify-content: space-between;
    }
    .copyright {width: fit-content;margin: 20px auto;}
    .sdgs {margin-top: 20px;}
}

@media screen and (max-width:920px) {
    header.fixed .header-inner .logo {margin-left: inherit;}
    footer .footer-right-link-wrap {flex-direction: column;}
}

@media screen and (max-width: 768px) {
    .footer-front {
    background-image: url(../images/footer-bg-sp.webp);
    border-radius: 50px;
    padding: 55px 20px;
    width: 90%;
    }
    .footer-front .common-title {font-size: 26px;}
    footer .footer-right-link {display: none;}
    .footer-right-link-wrap ul {margin: 30px auto 0 auto;}
    .logo img{max-width: 210px;}
    header .header-inner{margin: 0 auto;}
    .hamburger-menu {padding: 15px;width: 60px;height: 60px;}
    .mail-btn {width: 60px;height: 60px;}
    .footer-right-link-wrap{margin: inherit;}
    .nav-links {margin: 10px auto 80px auto;}
    .page-posts header ul {margin: 10px;}
    .mail-btn {margin-right: 10px;}
}