@charset "utf-8";
:root{
    --primary-color: #bc910c;
}
html{
    scroll-behavior: smooth;
}
/* Zoom */
@media screen and (min-width: 1100px){
    html.zoom-110{zoom: 0.95;}
    html.zoom-125{zoom: 0.9;}
    html.zoom-150{zoom: 0.85;}
    html.zoom-175{zoom: 0.8;}
    html.zoom-200{zoom: 0.75;}
}

/* Common */
.container{max-width: 1000px; width: calc(100% - 40px); margin: 0 auto;}
.container-1180{max-width: 1180px; width: calc(100% - 40px); margin: 0 auto;}

.clr-red {color: #e60012;}
.clr-green {color: #8dc123;}

.disable{pointer-events: none;}
.dis-ib{display: inline-block;}

.txt-link{text-decoration: underline; text-underline-offset: 0.1em; color: var(--primary-color); font-weight: 500;}
.txt-link:hover{text-decoration: none;}

.ex-link {text-decoration: underline;text-underline-offset: 0.25em; color: #ea616f;}
.ex-link::after {content: ""; width: 0.9em; height: 0.9em; background: url("../img/common/ic-open_red.png") no-repeat top left/100% 100%; display: inline-block; margin: 0 0 0 0.5em; position: relative; top: 1px;}
.ex-link:hover {text-decoration: none;}

i.ic-arrow{width: 1em; height: 1em; border-radius: 50%; background: #bc910c; display: flex; justify-content: center; align-items: center; letter-spacing: 0;}
i.ic-arrow::after{content: ""; border: solid white; border-width: 0 1.5px 1.5px 0; display: inline-block; padding: 2px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); line-height: 1; position: relative; top: 0.02em; left: -0.05em;}
i.ic-arrow[data-color="white"]{background: #fff;}
i.ic-arrow[data-color="white"]::after{border: solid #bc910c; border-width: 0 1.5px 1.5px 0;}

.caption{font-size: 1.1rem; line-height: 1.27;}
ul.caption li{margin-left: 1em; text-indent: -1em;}
.target-text{
    word-break: keep-all; 
    overflow-wrap: break-word;
    line-break: strict;
}
@supports (text-wrap: phrase) {
    .target-text {
        text-wrap: phrase;
    }
}
figure.photo{
    position: relative;
}
.photo figcaption{
    position: absolute;
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 0 0 0.5rem black, 0 0 0.5rem black, 0 0 0.5rem black, 0 0 0.5rem black;
    z-index: 1;
    bottom: 0.5rem;
    right: 1rem;
}
@media screen and (max-width: 768px){
    .caption{font-size: 1rem;}
}

.anchor{position: relative;}
.anchor > div{position: absolute; left: 0;}

@media screen and (min-width: 769px){
    .anchor > div{top: -140px;}
}

@media screen and (max-width: 768px){
    .anchor > div{top: -80px;}
}
a.soon{
    pointer-events: none;
    color: #ddd;
}
/* Header */
.header{position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: #231815;}

@media screen and (min-width: 769px){
    body{padding-top: 70px;}

    .header{height: 70px;}
    .header-wrap{width: calc(100% - 40px); max-width: 1600px; margin: 0 auto; position: relative; z-index: 105;}
}

@media screen and (max-width: 768px){
    body{padding-top: 64px;}
	
    .header-wrap{display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 20px;}
    
}

/* Logo */
.header-logo{
    position: fixed; top: 10px;z-index: 101;
    width: 100%;
}
.header-logo-wrap{
    width: calc(100% - 40px); max-width: 1600px; margin: 0 auto; position: relative;
}
h1.logo{ position: absolute; left: 0;}
.logo-txt{font-size: min(1.4vw, 1.4rem); color: #fff; font-weight: normal; letter-spacing: 0.01em; padding-bottom: 0.5em; letter-spacing: 0.12em; white-space: nowrap}
h1.logo a{display: flex; align-items: flex-end; gap: 0.625em; line-height: 1;}
@media screen and (min-width: 769px){
    h1.logo img{
        max-width: 171px;
    }
    h1.logo a{max-width: 440px; width: 100%;}
}

@media screen and (max-width: 768px){
    .header-logo{
        top: 0;
        left: 20px;
        width: unset;
    }
    .header-logo-wrap{
        height: 64px;
    }
    h1.logo{
        top: 50%;
        transform: translateY(-50%);
    }
    h1.logo img{
        width: 25vw;
        max-width: 130px;
    }
    .logo-txt{
        font-size: min(2.6vw, 1rem);
        padding-bottom: 0.3em;
    }
    h1.logo{margin: 0; padding-top: 0;}
    h1.logo a{width: 100%; line-height: 1; gap: 0.5em;}
}
/* Header btn */
.header-btn {
    display: flex;
    gap: 10px;
    padding-right: 55px;
}
.header-btn a{
    width: min(10vw, 117px);
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(1.3vw, 1.15rem);
    color: #004a8e;
    letter-spacing: 0.2em;
    border: 1px solid #004a8e;
    background: #fff;
}
.header-btn a.header-btn--bg{
    color: #fff;
    background: #9C8D60;
    background: linear-gradient(90deg, rgba(156, 141, 96, 1) 0%, rgba(176, 164, 128, 1) 100%, rgba(156, 141, 96, 1) 100%);
}
.header-btn a:hover{
    background: #9C8D60;
    color: #fff;
}
@media screen and (min-width: 769px) {
    .header-btn {
        position: absolute;
        top: 18.5px;
        right: 0;
    }
}
@media screen and (max-width: 768px){
    .header-btn{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;
        width: 100%;
        padding-right: 0;
        gap: 1px;
        background: #ebebeb;
    }
    .header-btn li{
        width: 33.333%;
    }
    .header-btn li:nth-child(4){
        order: 2;
    }
    .header-btn li:nth-child(2){
        order: 3;
    }
    .header-btn a{
        flex-direction: column;
        gap: 4px;
        width: 100%;
        height: 55px;
        border: 0;
        font-size: min(3.4vw, 1.2rem);
        line-height: 1;
        padding: 7px min(2vw, 10px);
        color: #fff;
    }
    .header-btn li:nth-child(2) a{
        background: #194B78;
        background: linear-gradient(90deg, rgba(25, 75, 120, 1) 0%, rgba(65 113 158) 50%, rgba(25, 75, 120, 1) 100%);
    }
    .header-btn li:nth-child(1) a{
        background: #434343;
        background: linear-gradient(90deg, rgba(67, 67, 67, 1) 0%, rgb(114 114 114) 50%, rgba(67, 67, 67, 1) 100%);
    }
    .header-btn li:nth-child(4) a{
        background: #9E8332 !important;
        background: linear-gradient(90deg, rgba(158, 131, 50, 1) 0%, rgba(186, 166, 107, 1) 50%, rgba(158, 131, 50, 1) 100%) !important;
    }
}
/* Btn Menu */
.btn-menu{width: 34px; height: 33px; position: absolute; cursor: pointer; top: 18.5px; right: 0; z-index: 105;}
.btn-menu span{display: block; position: absolute; width: 100%; left: 0; height: 2px; background: #fff; transition: all .3s;}
.btn-menu span:nth-of-type(1){top: 5px;}
.btn-menu span:nth-of-type(2){top: 16px;}
.btn-menu span:nth-of-type(3){top: 27px;}
.header.is-open .btn-menu span:nth-of-type(1){top: 15px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.header.is-open .btn-menu span:nth-of-type(2){opacity: 0;}
.header.is-open .btn-menu span:nth-of-type(3){top: 15px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
@media screen and (max-width: 768px){
    .btn-menu{
        top: 15.5px;
        right: 20px;
        width: min(10vw, 35px);
    }
}
/* Menu PC */
.header-inner{
    width: 100%;
    max-width: 800px;
    height: 100%;
    min-height: 100vh;
    padding: 50px 20px;
    background: #fff;
    position: fixed;
    top: 70px;
    right: 0;
    z-index: 100;
    transition: all 0.5s;
    overflow-y: auto;
    color: #3d3a39;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    opacity: 0;
    visibility: hidden;
}
.header.is-open .header-inner{
    opacity: 1;
    visibility: visible;
}
.header-inner .m-btn{
    margin-top: 30px;
}
.menu{
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin: 0 auto;
}
.menu > li{
    margin: 0 0 10px 0;
    text-align: center;
}
.menu a{
    cursor: pointer;
    width: 100%;
    display: block;
    letter-spacing: 0.05em;
    position: relative;
}
.menu a::after{
    content: "";
    position: absolute; 
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    border-top: 1px solid #004a8e;
    transition: all .3s;
}
.menu a.is-active::after,
.menu a:hover::after{
    width: 100%;
}
.menu a.is-active,
.menu a:hover{
    color: #004a8e;
}
@media screen and (min-width: 769px){

}

/* Menu SP */
@media screen and (max-width: 768px){
    .header-inner{
        padding: 30px 15px;
        top: 64px;
        width: 100%;
    }
}

/* Main */
/* .main{padding: 0 0 70px;}

@media screen and (max-width: 768px){
    .main{padding: 0 0 70px;}
} */


/* Swiper */
@media screen and (max-width: 768px) {
    .swipe{text-align: center; font-size: 1.4rem; margin:0 0 2rem; display: flex; justify-content: center; align-items: center; gap: 1rem;}
    .swipe::after{content: ""; width: 40px; height: 15px; background: url("../img/common/ic-swipe.png") no-repeat top left/100% 100%; display: block;}
}

/* M Title */
.m-tit{
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 35px;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
    .m-tit{
        font-size: 2rem;
        margin-bottom: 20px;
    }
}

.m-tit-line{
    font-size: min(5vw, 4.4rem);
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    text-align: center;
}
/* Button */
.m-btn a{
    width: 100%;
    max-width: 380px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.5;
    color: #fff;
    border: 1px solid #004a8e;
    background: #9C8D60;
    background: linear-gradient(90deg, rgba(156, 141, 96, 1) 0%, rgba(176, 164, 128, 1) 100%, rgba(156, 141, 96, 1) 100%);
    margin: 0 auto;
    font-size: 2rem;
    letter-spacing: 0.2em;
    cursor: pointer;
}
.m-btn a:hover {
    background: #9C8D60;
}
@media screen and (max-width: 768px) {
    .m-btn a{
        font-size: 1.6rem;
    }
}
/* Hero */
.hero{
    width: 100%;
    height: 135px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../img/common/hero.webp") no-repeat center center/cover;
    color: #fff;
    margin: 0 0 60px;
}
.hero.is-view .hero-tit {
    opacity: 1;
    transform: scale(1);
}
.hero-tit {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.3em;
    transform-origin: center;
    text-align: center;
    opacity: 0;
    transform: scale(1.5);
    will-change: opacity, transform;
    transition: opacity 1s, transform .6s;
}
@media screen and (max-width: 768px) {
    .hero {
        height: 110px;
        margin: 0 0 30px;
    }
    .hero-tit {
        font-size: min(3rem, 7.5vw);
        letter-spacing: 0.1em;
    }
}
/* Footer */
footer{
    padding: clamp(60px, 13vw, 130px) 0 clamp(80px, 10vw, 100px);
}
/* Footer Contact */
.footer-contact{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 675px;
    margin: 0 auto;
    width: calc(100% - 40px);
    padding-bottom: min(6vw, 60px);
    flex-wrap: wrap;
    column-gap: min(5vw, 50px);
    row-gap: 20px;
}

.footer-tel{
    margin: -.8em 0;
}
.footer-tel a{
    display: flex;
    align-items: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 6.8rem;
    line-height: 1;
}
.footer-tel figure{
    display: block;
    margin-bottom: 20px;
}
.footer-time{
    font-size: 1.1rem;
}
.footer-logo p{
    font-size: 0.9375em;
}
@media screen and (max-width: 768px){
    .footer-tel a{
        font-size: min(12vw, 4.5rem);
        justify-content: center;
    }
    footer{
        text-align: center;
    }
    .footer-tel figure{
        margin-bottom: 0;
        width: 1.3em;
    }
    .footer-tel{
        margin: 0 0 10px 0;
    }
    .footer-contact{
        gap: 40px 0;
        padding-bottom: 50px;
        flex-direction: column;
    }
    .footer-info_tit{
        font-size: min(3.5vw, 1.4rem);
    }
    .footer-logo{
        width: fit-content;
        margin: 0 auto;
        text-align: left;
    }
}

.copyright{font-size: min(2.5vw,1rem); line-height: 1.4; font-weight: 400; letter-spacing: 0.05em; text-align: center;}

/* Page Top */
#pagetop{width: 50px; height: 50px;background: #9C8D60; background: linear-gradient(90deg, rgba(156, 141, 96, 1) 0%, rgba(176, 164, 128, 1) 100%, rgba(156, 141, 96, 1) 100%); position: fixed; bottom: 50px; right: 20px; z-index: 50; cursor: pointer; transition: .3s; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(30px);}
#pagetop::after{content: ""; border: solid white; border-width: 0 1px 1px 0; display: inline-block; padding: 8px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); position: absolute; top: 21px; left: 17px;}
#pagetop.is-show{opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0);}
#pagetop:hover{transform: translateY(-1rem);}

@media screen and (max-width: 768px){
    #pagetop{right: 10px; bottom: calc(14vw + 50px); width: 40px; height: 40px;}
    #pagetop::after{top: 16px; left: 14px; border: solid white; border-width: 0 2px 2px 0; padding: 5px;}
}

/* Animate */
@media screen{    
    .fade-in{opacity: 0; transform: translateY(-10px);}
    .fade-in.is-view{opacity: 1;transform: translateY(0px);transition-duration: 1.2s;}    
}