@charset "utf-8";

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


  ◇◆◇ レイアウト ◇◆◇
  
  1.  header
  2.  nav
  3.  contents
  4.  footer
  
  
========================================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  1. header
  
----------------------------------------------------------------------------------------------------*/
header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-m);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    transition: 
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}
header.is-scroll {
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
header .hd-logo {
    align-self: center;
    position: relative;
    z-index: 12;
}
@media (max-width: 1280px) {
    header {
        padding: var(--space-2s);
    }
}
@media (max-width: 500px) {
    header {
        display: grid;
        grid-template-columns: auto 80px;
        gap: var(--space-s);
    }
}


/*----------------------------------------------------------------------------------------------------

  2. nav
  
----------------------------------------------------------------------------------------------------*/
@keyframes gnav-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes gnav-close { from { opacity: 1; } to { opacity: 0; } }
:root { --gnav-close-duration: 400; }
.gnav {
    --link-color: var(--txt-color);
    --link-color-hover: var(--color-primary);
    --link-deco: none;
    --link-deco-hover: none;
    line-height: var(--line-height-s);
}
@media (max-width: 1280px) {
    .gnav {
        position: fixed;
        top: -100dvh;
        left: 0;
        width: 100%;
        height: 100dvh;
        background: #fff;
        z-index: 11;
        /* 非表示状態 */
        opacity: 0;
        transform: translateY(-20px);
        pointer-events: none;
        transition:
            opacity 0.3s ease,
            transform 0.4s ease;
    }
}

/* gnav open
----------------------------------------*/
@media (max-width: 1280px) {
    body:has(.gnav.is-open) {
        overflow: hidden;
    }
    .gnav.is-open {
        top: 0;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/*--------------------------------------------------------------------------------
  .gnav_content
--------------------------------------------------------------------------------*/
@media (min-width: 1281px) {
    .gnav_content {
        /* width: calc(var(--container-width, var(--base-width)) * 1px); */
        max-width: 100%;
        margin: 0 auto;
    }
}
@media (max-width: 1280px) {
    .gnav_content {
        margin-top: 100px;
        padding: 0 var(--space-2s);
        box-sizing: border-box;
    }
}

/*--------------------------------------------------------------------------------
  .gnav-list
--------------------------------------------------------------------------------*/
.gnav-list_item {
    font-size: var(--fs-m);
    font-weight: 700;
}
@media (min-width: 1281px) {
    .gnav-list {
        width: 100%;
        display: flex;
        align-items: center;
        gap: var(--space-2s);
    }
    .gnav-list > li {
        flex-grow: 2;
        flex-shrink: 2;
    }
    .gnav-list_item {
        display: flex;
        justify-content: center;
        padding: 1.25rem 0.75rem;
        cursor: pointer;
    }
}
@media (max-width: 1280px) {
    .gnav-list > li {
        border-bottom: 1px solid var(--border-color);
    }
    .gnav-list > li:last-child {
        border-bottom: none;
        text-align: center;
        padding-top: 1.25rem;
    }
    .gnav-list_item {
        display: flex;
        padding: 1.25rem 0;
    }
    .gnav-list_item.c-btn {
        width: 100%;
        padding: 0.75em 0;
    }
}


/*--------------------------------------------------------------------------------
  .gnav-btn
--------------------------------------------------------------------------------*/
:root {
    --gnav-width: 4.5rem;
    --gnav-btn-bg: var(--color-primary);
    --gnav-btn-bg-hover: var(--color-primary-light);
    --gnav-btn-pd: 0.9rem 0 0.5rem 0;    
    --gnav-btn-icon-width: 1.5rem;
    --gnav-btn-line-bg: #fff;
    --gnav-btn-line-bg-hover: #fff;
    --gnav-btn-line-height: 2px;    
    --gnav-btn-close-bg: var(--color-primary);
    --gnav-btn-close-bg-hover: var(--color-primary-light);
    --gnav-btn-close-line-bg: #fff;
    --gnav-btn-close-line-bg-hover: #fff;
}
@media (max-width: 1280px) { :root { --gnav-btn-icon-height: min(calc(16 / 400 * 100vw), 16px); } }
.gnav-btn {
    width: var(--gnav-width);
    padding: var(--gnav-btn-pd);
    background-color: var(--gnav-btn-bg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: var(--hover-trans);
    transform: translate3d(0,0,0);
    position: relative;
    z-index: 12;
}
.gnav-btn.is-close { background-color: var(--gnav-btn-close-bg); }
.gnav-btn:after {
    content: "メニュー";
    white-space: nowrap;
    font-size: var(--fs-3s);
    color: #fff;
    padding-top: 0.8rem;
    line-height: 1.2;
}
.gnav-btn.is-close:after { content: "閉じる"; }
.gnav-btn_icon {
    position: relative;
    width: var(--gnav-btn-icon-width);
    height: var(--gnav-btn-icon-height);
    transition: all 0.3s ease-out;
}
.gnav-btn_line {
    position: absolute;
    right: 0;
    left: 0;
    height: var(--gnav-btn-line-height);
    background-color: var(--gnav-btn-line-bg);
}
.gnav-btn.is-active .gnav-btn_line,
.gnav-btn.is-close .gnav-btn_line { transition: all 0.3s ease-out; }
.gnav-btn.is-close .gnav-btn_line { background-color: var(--gnav-btn-close-line-bg); }
.gnav-btn_line:nth-of-type(1) { width: 100%; top: 0; }
.gnav-btn_line:nth-of-type(2) { width: 100%; top: calc(50% - (var(--gnav-btn-line-height) / 2)); }
.gnav-btn_line:nth-of-type(3) { width: 100%; bottom: 0; }
.gnav-btn.is-active .gnav-btn_line:nth-of-type(1) { animation: gnav-btn_line1 0.4s forwards; }
.gnav-btn.is-active .gnav-btn_line:nth-of-type(3) { animation: gnav-btn_line3 0.4s forwards; }
.gnav-btn.is-close .gnav-btn_line:nth-of-type(1) { animation: gnav-btn-close_line1 0.4s forwards; }
.gnav-btn.is-close .gnav-btn_line:nth-of-type(2) { opacity: 0; }
.gnav-btn.is-close .gnav-btn_line:nth-of-type(3) { animation: gnav-btn-close_line3 0.4s forwards; }
@media (hover: hover) {
    .gnav-btn:not(.is-close):hover { background-color: var(--gnav-btn-bg-hover); }
    .gnav-btn:not(.is-close):hover .gnav-btn_line { background-color: var(--gnav-btn-line-bg-hover); }
    .gnav-btn.is-close:hover { background-color: var(--gnav-btn-close-bg-hover); }
    .gnav-btn.is-close:hover .gnav-btn_line { background-color: var(--gnav-btn-close-line-bg-hover); }
}
@keyframes gnav-btn_line1 {
    0% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(45deg); }
    50% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(0); }
    100% { transform: translateY(0) rotate(0); }
}
@keyframes gnav-btn_line3 {
    0% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(-45deg); }
    50% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(0); }
    100% { transform: translateY(0) rotate(0); }
}
@keyframes gnav-btn-close_line1 {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(0); }
    100% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(45deg); }
}
@keyframes gnav-btn-close_line3 {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(0); }
    100% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(-45deg); }
}
@media (min-width: 1281px) { .gnav-btn { display: none; } }


/*----------------------------------------------------------------------------------------------------

  3.  contents
  
----------------------------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
  page-title
-----------------------------------------------------------------------------------*/
.page-title {
    height: 460px;
    padding-top: 150px;
    background-image: url("../image/subpage/pagetitle-bg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
}
.page-title .page-title-wrap {
    display: flex;
    justify-content: center;
    gap: var(--space-2s);
}
.page-title h1 {
    align-content: center;
    font-size: var(--fs-5l);
    font-family: var(--ff-maru);
    text-align: center;
    line-height: var(--line-height-2s);
}
.page-title-img {
    width: 270px;
    height: 166px;
    aspect-ratio: 270 / 160;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 1280px) {
    .page-title { padding-top: 108px; }
}
@media (max-width: 768px) {
    .page-title { height: 290px; }
    .page-title .page-title-second-img { display: none; }
    .page-title .page-title-wrap {
        width: 100%;
        display: grid;
        grid-template-columns: 160px auto;
        gap: var(--space-3s);
    }
    .page-title h1 {
        font-size: var(--fs-3l);
    }
    .page-title-img {
        width: 100%;
        height: auto;
    }
}


/*-----------------------------------------------------------------------------------
  パンくず
-----------------------------------------------------------------------------------*/
.breadcrumbs .base-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.breadcrumbs li {
    display:inline-block;
}
.breadcrumbs li:before {
    content: "";
    display: inline-block;
    margin-right: 0.5rem;
    width: var(--arrow3-size, var(--default-arrow3-size));
    height: var(--arrow3-size, var(--default-arrow3-size));
    line-height: 1;
    background: currentColor;
    color: var(--color-primary);
    mask-image: var(--icon-arrow-chevron);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    transition: var(--hover-trans);
}
.breadcrumbs li:first-child:before { display:none; }


/*----------------------------------------------------------------------------------------------------

  4. footer
  
----------------------------------------------------------------------------------------------------*/
/* cta */
#cta {
    margin-top: var(--space-3l);
    background-color: #fff;
    border-radius: var(--space-2l);
    padding: var(--space-4l) var(--space-l);
    position: relative;
    width: 100%;
    min-height: 464px;
    align-content: center;
}
#cta .cta-bg-img01 {
    position: absolute;
    left: var(--space-4l);
    bottom: 0;
    width: 18%;
    max-width: 346px;
}
#cta .cta-bg-img02 {
    position: absolute;
    right: var(--space-4l);
    bottom: 0;
    width: 20%;
    max-width: 390px;
}
#cta .cta-contents {
    width: 100%;
    max-width: 860px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-l);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
#cta .cta-item {
    background-color: var(--color-primary-lightest);
    border-radius: var(--space-2s);
    padding: var(--space-m);
    text-align: center;
    height: 100%;
}
#cta .cta-item .cta-icon {
    align-content: center;
    height: 46px;
}
#cta .cta-item .cta-icon img {
    width: auto;
    height: auto;
}
#cta .cta-item strong {
    display: block;
    font-size: var(--fs-l);
    line-height: var(--line-height-2s);
    margin-top: 1rem;
}
#cta .cta-item .cta-tel-number {
    display: block;
    width: 100%;
    max-width: 267px;
    height: auto;
    margin: 0.5rem auto;
}
#cta .cta-item p {
    color: #7d7d7d;
    font-size: var(--fs-2s);
}
#cta .cta-item .c-btn {
    margin-top: 0.5rem;
}
@media screen and (max-width:1440px) {
    #cta {
        padding-top: var(--space-l);
        align-content: start;
    }
}
@media screen and (max-width:768px) {
    #cta {
        padding-bottom: 160px;
        align-content: start;
    }
    #cta .cta-bg-img01 {
        width: 20%;
    }
    #cta .cta-bg-img02 {
        width: 25%;
    }
    #cta .cta-contents {
        grid-template-columns: 1fr;
        gap: var(--space-s);
    }
}
@media screen and (max-width:500px) {
    #cta .cta-bg-img01 {
        display: none;
    }
    #cta .cta-bg-img02 {
        right: var(--space-2l);
        width: 45%;
    }
}

/* footer */
footer {
    padding: var(--space-4l) 0;
}
footer .ft-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    margin-bottom: var(--space-l);
}
footer .ft-container .ft-logo {
    max-width: 478px;
}
footer .ft-container .ft-licence {
    margin-top: 1em;
}
footer .ft-container .ft-address {
    margin-top: var(--space-s);
    line-height: var(--line-height-s);
}
footer .ft-container .c-btn {
    margin-top: 1em;
}
footer .ft-container .ft-gmap {
    min-height: 300px;
}
footer .ft-container .ft-gmap iframe {
    width: 100%;
    height: 100%;
    border: none;
}
footer .copyright {
    text-align: center;
    border-top: 1px solid var(--txt-color);
    font-size: var(--fs-2s);
    padding-top: 1em;
}
@media screen and (max-width:768px) {
    footer {
        padding-bottom: var(--space-l);
    }
    footer .ft-container {
        grid-template-columns: 1fr;
    }
}