@charset "utf-8";

/* CSS Document */

:root {
    /* font-family */
    --font-family-primary: "Noto Sans JP", sans-serif;
    --font-family-en: "Montserrat", sans-serif;

    /* font-size */
    --font-base: 1.4rem;
    --font-sm: 1.2rem;
    --font-md: 1.8rem;
    --font-lg: 2.2rem;
    --font-xl: 2.8rem;

    /* color */
    --color-primary: #F6881C;
    --color-secondary: #FEC603;
    --color-bg: #FFF9E6;
    --color-accent: #176EC3;
    --color-text-base: #333333;
    --color-text-sub: #656970;

    /* box-shadow */
    --box-shadow-default: 0 0.2rem 0.8rem #E5E0CE60;
    --box-shadow-strong: 0 0.2rem 0.8rem #584d0040;

    /* radius */
    --radius-sm: .8rem;
    --radius-md: 1.6rem;
    --radius-lg: 3rem;
    --radius-full: 9999px;

    /* border */
    --border-default: 1px solid #E2E3E4;

    /* transition */
    --trans-bounce: 0.5s cubic-bezier(0.3, 2, 0.6, 1);
}

/* =======================================================

Base Styles

======================================================= */
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.75;
    color: var(--color-text-base);
    background-color: #fff;
    overflow-x: hidden;
}

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

.l-wrapper {
    overflow-x: hidden !important;
}

.text-base {
    font-size: var(--font-base);
}

/* スクリーンリーダー専用 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* =======================================================

Utility Classes

======================================================= */
/* ==============================================
layout
============================================== */
/* ---------------------
section wrap
--------------------- */
.section {
    padding: 8rem 0;
}

.inner {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}


/* ==============================================
button / link
============================================== */
/* リンク先が無い場合hover無し */
[tabindex="-1"] {
    pointer-events: none;
}

/* ---------------------
Button
--------------------- */
.btn {
    position: relative;
    display: flex;
    width: fit-content;
    padding-right: 7.3rem;
    transition: var(--trans-bounce);
}

.btn__title {
    padding: 1.2rem 0 1.2rem 2rem;
    font-size: 1.6rem;
    font-weight: 600;
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    background-color: var(--color-accent);
    color: #fff !important;
}

.btn-arrow {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: auto;
    height: 100%;
}

.btn:hover {
    transform: scale(0.96);
}

/* Yellow */
.btn--survey {
    background-color: var(--color-secondary);
    color: var(--color-text-base) !important;
}

/* LINE */
.btn--line {
    background-color: #06C755;
}


/* ---------------------
tel link
--------------------- */
.tel-link {
    text-decoration: underline !important;
    cursor: pointer !important;
    color: var(--color-text-base) !important;
    background-color: transparent !important;
}

/* footer */
#footer .tel-link {
    color: #fff !important;
}

/* ---------------------
Button under line
--------------------- */
.btn--under-line {
    text-decoration: underline !important;
    color: var(--color-text-sub) !important;
}

.btn--under-line:hover {
    opacity: 0.7;
}



/* ==============================================
heading
============================================== */
/* ---------------------
heading top page
--------------------- */
.top-heading {
    display: flex;
    flex-direction: column;
    font-size: var(--font-xl);
    font-weight: 700;
}

.top-heading--en {
    position: relative;
    display: block;
    padding-left: 2.4rem;
    font-family: var(--font-family-en);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-primary);
}

.top-heading--en::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 2rem;
    height: 2rem;
    background: url(../images/hd_deco.png) no-repeat center/cover;
}

.top-heading--center,
.top-heading--en::before {
    text-align: center;
    align-items: center;
}

/* white */
.top-heading--white,
.top-heading--white .top-heading--en {
    color: #fff !important;
}

.top-heading--white .top-heading--en::before {
    background: url(../images/hd_deco_white.png) no-repeat center/cover;
}


/* ---------------------
heading L
--------------------- */
.heading-lg {
    font-size: var(--font-lg);
    font-weight: 700;
}

/* ---------------------
heading M
--------------------- */
.heading-md {
    position: relative;
    padding-left: 2.4rem;
    font-size: var(--font-lg);
    font-weight: 700;
}

.heading-md::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0.8rem;
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary);
}


/* =======================================================

header / footer

======================================================= */
/* ==============================================
header
============================================== */
#header {
    position: relative;
    display: block;
    width: 100%;
    z-index: 999;
}

.header-logo {
    position: fixed;
    top: 2rem;
    left: 2rem;
    display: block;
    width: 14rem;
}

#header__nav {
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    visibility: hidden;
    transition: 0.3s;
    opacity: 0;
}

#header__nav.panelactive {
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    width: 60%;
    min-width: 36rem;
    height: 100vh;
    visibility: visible;
    background-color: var(--color-bg);
    transition: 0.3s;
    opacity: 1;
}

#header__nav-container {
    display: none;
    position: fixed;
    z-index: 99;
    width: 60%;
    min-width: 36rem;
    height: 100vh;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

#header__nav-container::-webkit-scrollbar {
    display: none;
}

#header__nav.panelactive #header__nav-container {
    display: block;
    padding: 12rem 0;
}

div.header__nav-content {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    width: 85%;
    margin: 0 auto;
}

#header__nav.panelactive div.header__nav-content {
    animation-name: gnaviAnime;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes gnaviAnime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.header__nav-list {
    display: flex;
    flex-direction: column;
}

.header__nav-list li a{
    position: relative;
    display: block;
    padding: 1.6rem 1.6rem 1.6rem 4rem;
    border-bottom: 0.1rem solid var(--color-primary);
    font-size: var(--font-md);
    font-weight: 600;
}

.header__nav-list li a::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 1.6rem;
    margin: auto;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
}

.header__nav-cv a{
    position: relative;
    display: block;
    margin-top: 3.2rem;
    padding: 0.8rem 2.4rem;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    border: none !important;
    color: #fff;
    font-weight: 600;
    transition: var(--trans-bounce);
}
.header__nav-cv a::before {
    display: none;
}



/* --------------
hamburger
-------------- */
.header__hamburger {
    position: fixed;
    top: 0.8rem;
    right: 0.8rem;
    width: 7rem;
    height: 7rem;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    transition: var(--trans-bounce);
    z-index: 999;
}

.header__hamburger:hover {
    transform: scale(1.05);
}

.header__hamburger.active {
    transform: scale(0.8);
}

.header__hamburger.active:hover {
    transform: scale(0.85);
}

.header__hamburger::before,
.header__hamburger::after {
    position: absolute;
    font-size: var(--font-sm);
    top: 4rem;
    right: 0;
    left: 0;
    margin: auto;
    width: 3.6rem;
    height: 1.2rem;
    line-height: 0.6rem;
    color: #fff;
    transition: 0.3s;
}

.header__hamburger::before {
    content: 'menu';
    opacity: 1;
}

.header__hamburger::after {
    content: 'close';
    opacity: 0;
}

.header__hamburger.active::before {
    opacity: 0;
}

.header__hamburger.active::after {
    opacity: 1;
}

.header__hamburger span {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 2.8rem;
    height: 0.2rem;
    border-radius: var(--radius-full);
    background-color: #fff;
    transition: 0.3s;
}

.header__hamburger span:nth-of-type(1) {
    top: 1.8rem;
}

.header__hamburger span:nth-of-type(2) {
    top: 2.8rem;
}

.header__hamburger.active span:nth-of-type(1) {
    transform: translateY(0.5rem) rotate(-24deg);
}

.header__hamburger.active span:nth-of-type(2) {
    transform: translateY(-0.5rem) rotate(24deg);
}


/* ==============================================
footer
============================================== */
#footer {
    position: relative;
    margin-top: -3rem;
    padding: 4.8rem 0 2.4rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-top: var(--border-default);
    background-color: var(--color-accent);
    text-align: center;
    color: #fff;
    z-index: 10;
}

.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.facility-address>*+* {
    margin-top: 2rem;
}

.copyright {
    font-size: 1rem;
}

.backtotop {
    display: none;
}


/* =======================================================

Top Page

======================================================= */
/* ==============================================
mv
============================================== */
#mv {
    position: relative;
    padding: 9rem 3.2rem 0;
    background: url(../images/mv_gd.png) no-repeat center/cover;
    z-index: 1;
}

.mv__inner {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    border-radius: var(--radius-md);
    background: url(../images/mv_media_ipad.png) no-repeat center/cover;
    /* background: url(../images/mv_bg.png) no-repeat center/cover; */
    overflow: hidden;
}

.mv-copy h1 img {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 56vw;
    z-index: 10;
}

.mv_copy-bg {
    position: absolute;
    bottom: -0.1rem;
    left: -0.1rem;
    display: block;
    width: 64vw;
    z-index: 5;
}

.mv-illust {
    position: absolute;
    bottom: -8rem;
    right: 0;
    left: 0;
    margin: auto;
    display: block;
    width: 72vw;
}


/* ==============================================
news
============================================== */
#news {
    padding: 8rem 0 12rem;
}

.news__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.news__container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.news-list {
    width: 100%;
}

.news-list__items {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3.2rem;
    width: 100%;
    padding: 2rem 1.6rem;
    border-bottom: var(--border-default);
    transition: 0.3s;
}

.news-list__items::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
    transform: scale(0);
    transition: 0.3s;
}

.news-list__items:hover {
    padding-left: 2rem;
    color: var(--color-accent);
}

.news-list__items:hover::before {
    transform: scale(1);
}

.news__date {
    font-size: var(--font-sm);
    color: var(--color-text-sub);
}

.news__category {
    display: inline-block;
    min-width: 10rem;
    padding: 0.4rem 1.6rem;
    border: 0.1rem solid var(--color-primary);
    border-radius: var(--radius-full);
    text-align: center;
    font-size: var(--font-sm);
    color: var(--color-primary);
    transition: 0.3s;
}

.news__title {
    font-size: var(--font-base);
}

.news__container .btn {
    margin-top: 3.2rem;
    margin-left: auto;
    margin-right: 0;
}


/* ==============================================
whatis
============================================== */
#whatis {
    position: relative;
    background-color: var(--color-bg);
    padding: 0;
    z-index: 5;
}

#whatis::before,
#whatis::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 8rem;
    background: inherit;
    border-radius: 50% / 100%;
}

#whatis::before {
    top: -8rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#whatis::after {
    bottom: -8rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.whatis__inner {
    position: relative;
    z-index: 5;
}

.whatis__inner>*+* {
    margin-top: 4.8rem;
}

.whatis__hd {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.whatis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 3.2vw 2vw;
}

.whatis-grid__items {
    padding: 2rem;
    border-radius: var(--radius-md);
    background-color: #fff;
    box-shadow: 0.6rem 0.6rem 0 #E2E3E4;
}

.whatis-grid__items img {
    margin-bottom: 1.6rem;
    border-radius: var(--radius-sm);
}


/* ==============================================
video
============================================== */
#video {
    position: relative;
    background: url(../images/video_bg.jpg) no-repeat center/cover;
    padding: 16rem 0 10rem;
    z-index: 1;
}

.video-grid {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.video-grid__items {
    position: relative;
}

.video-grid__items h3 {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background-color: var(--color-accent);
    font-size: var(--font-base);
    font-weight: 600;
    color: #fff;
}

.video-grid__items iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 0.4rem;
    border-top-left-radius: 0;
}

.coming-soon{
    border-radius: 0.4rem;
    border-top-left-radius: 0;
}


/* ==============================================
survey
============================================== */
#survey {
    position: relative;
    background-color: var(--color-bg);
    margin-top: -3rem;
    padding-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 5;
}

.survey__container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: end;
    padding: 3.2rem 3.2rem 4rem;
    border-radius: var(--radius-md);
    background-color: var(--color-accent);
}

.survey__ol {
    width: 100%;
    color: #fff;
}

.survey__ol>*+* {
    margin-top: 3.2rem;
}

.list--survey {
    padding: 2.4rem;
    background-color: #ffffff20;
    border: 0.1rem solid #fff;
    ;
    border-radius: var(--radius-sm);
}

.list--survey>*+* {
    margin-top: 1.6rem;
}

.list--survey li {
    position: relative;
    padding-left: 2.4rem;
    font-size: var(--font-base);
}

.list--survey li::before {
    position: absolute;
    top: 1.2rem;
    left: 0;
    content: '';
    width: 1.2rem;
    height: 0.4rem;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary);
}

.survey-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin-top: 3.2rem;
}

.survey-links__items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    width: 100%;
    padding: 2.4rem;
    border-radius: var(--radius-md);
    background-color: #fff;
    box-shadow: 0.6rem 0.6rem 0 #E2E3E4;
}

.survey-links__items h3 {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--color-accent);
}

.survey_il {
    position: absolute;
    top: -4rem;
    right: 0;
    width: clamp(16rem, 10vw, 20rem);
}


/* ==============================================
situation
============================================== */
#situation {
    position: relative;
    background-color: var(--color-bg);
    padding-bottom: 0;
}

.situation__inner>*+* {
    margin-top: 3.2rem;
}


.situation-grid {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.situation-grid__items {
    position: relative;
    padding: 8rem 2.4rem 2.4rem;
    border-radius: var(--radius-md);
    background-color: #fff;
    box-shadow: 0.6rem 0.6rem 0 #E2E3E4;
}

.situation-grid__items h3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    width: fit-content;
    padding: 0.8rem 2rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background-color: var(--color-accent);
    font-size: var(--font-md);
    font-weight: 600;
    color: #fff;
}

.situation-grid__items img {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 2rem;
}

.situation-link {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.4rem;
    color: var(--color-text-sub);
}


/* ==============================================
consul
============================================== */
#consul {
    position: relative;
    background-color: var(--color-bg);
    z-index: 5;
}

.consul__inner>*+* {
    margin-top: 4.8rem;
}

.consul__hd {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    text-align: center;
}

.consul-grid {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 2.4rem 0;
    border-top: 0.3rem solid var(--color-secondary);
}

.consul-grid__stack {
    position: relative;
    padding: 3.2rem;
    border-radius: var(--radius-md);
    background-color: #fff;
    box-shadow: 0.6rem 0.6rem 0 #E2E3E4;
}

.consul-grid__stack>*+*,
.consul-grid__block>*+* {
    margin-top: 2.4rem;
}

/* 電話・受付時間 */
.consul-info {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    font-family: var(--font-family-en);
    font-size: var(--font-md);
    font-weight: 700;
}

.consul-info__item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
}

.consul-info__hd {
    display: inline-block;
    min-width: 10rem;
    padding: 0.4rem 1.6rem;
    border-radius: var(--radius-full);
    background-color: var(--color-text-sub);
    font-size: var(--font-sm);
    text-align: center;
    color: #fff;
}

.tel-block {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.4rem;
    font-family: var(--font-family-en);
    font-size: var(--font-xl);
    font-weight: 700;
}

.consul-info__note {
    display: block;
    width: 100%;
    font-size: var(--font-base);
}

.link-grid {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    gap: 1.2rem;
}


/* =======================================================

Sub Page

======================================================= */
/* ==============================================
sub-header
============================================== */
#sub-header{
    padding: 12rem 0 5.6rem;
    background-color: var(--color-bg);
}

/* ==============================================
news
============================================== */
#news--subpage {
    padding-top: 5.6rem;
}

#news--subpage .news__inner {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}


/* --------------
pagination
-------------- */
div.archive-pagination {
    width: 100%;
    margin: 3.2rem auto 0;
    text-align: center;
}

div.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.5rem;
}

div.archive-pagination a {
    display: inline-block;
    border-radius: var(--radius-full);
    padding: 0.4rem 1.2rem;
    transition: var(--ts-default);
    border: var(--border-default);
}

div.archive-pagination a:hover {
    background: var(--color-accent);
    color: #fff;
}

h2.screen-reader-text {
    display: none;
}


/* ==============================================
news single
============================================== */
.news__content-hd{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
    padding: 1.6rem 0;
    border-bottom: var(--border-default);
}

.news__content-hd .news__title{
    font-size: var(--font-md);
    font-weight: 600;
}

.news__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
}

/* お知らせ本文 */
.news__content-inner{
    width: 100%;
    padding-bottom: 3.2rem;
    border-bottom: var(--border-default);
    font-size: var(--font-base);
}

.news__content-inner a {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
    font-weight: 700;
}

.news__content-inner a :hover {
    opacity: 0.5;
}

.news__content-inner img {
    height: auto;
}

/* cms用 */
div.gallery img {
    border: none !important;
    width: 100% !important;
    height: auto;
}

div.wp-caption {
    width: 100% !important;
    margin: 0 auto;
    text-align: center;
}

div.wp-caption img {
    width: 100% !important;
    height: auto;
}

dd.gallery-caption {
    display: block !important;
    width: 100%;
}

img.alignright {
    display: block;
    margin: 0 0 0 auto !important;
}

img.alignleft {
    display: block;
    margin: 0 auto 0 0 !important;
}

img.aligncenter {
    display: block;
    margin: 0 auto !important;
}

div.alignright {
    display: block;
    margin: 0 0 0 auto !important;
}

div.alignleft {
    display: block;
    margin: 0 auto 0 0 !important;
}

div.aligncenter {
    display: block;
    margin: 0 auto !important;
}