@charset "utf-8";
@media screen and (max-width:767px){
    body.sub {
        background: url(../img/common/bg/sub_bg_sp.jpg) repeat-x 0 0 / 100%;
    }
}

/* site common */
.f-en{
    font-family: var(--f-en);
}

/*pagination*/
.paginationWrap{
    position: absolute;
    margin: auto;
    inset: 0;
    pointer-events: none;
}
.pagination{
    position: sticky;
    pointer-events: all;
    left: 0;
    top: 0;
    bottom: 0;
    /* width: 335px; */
    width: 72px;
    height: 100vh;
    z-index: 100;
    background: linear-gradient(rgba(57, 150, 115, 1) 0%, rgba(21, 116, 147, 1) 100%);
    border-radius: 0 24px 24px 0;
    overflow: hidden;
    transition: width .3s ease;
}
@media screen and (min-width:768px){
    @media screen and (hover: hover) and (pointer: fine) {
        .pagination:hover {
            width: 335px;
        }
    }
}

@media screen and (max-width:767px){
    .paginationWrap{
        display: flex;
        align-items: flex-end;
    }   
    .pagination {
        width: 100%;
        height: calc(96 / var(--vw-min) * 100vw);
        border-radius: calc(24 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw) 0 0;
        bottom: 0;
        top: unset;
    }
}
.pageNavLists {
    margin-top: 160px;
}
.pageNavLists > li {
    opacity: .6;
    position: relative;
    transition: opacity .3s ease;
}
.pageNavLists > li.is-active {
    opacity: 1;
}
.pageNavLists > li > a {
    display: flex;
    align-items: center;
    color: #f6f2b5;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    padding-left: 72px;
    width: 100%;
    height: 44px;
    position: relative;
}
.pageNavLists > li > a:before {
    content: "";
    background: url(../img/common/icon/icon_nav_hone2.png) no-repeat center / contain;
    width: 22px;
    height: 23px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    z-index: 1;
    opacity: 1;
    transition: opacity .3s ease;
}
.pageNavLists > li > a:after {
    content: "";
    background: url(../img/common/icon/icon_nav_hone1.png) no-repeat center / contain;
    width: 48px;
    height: 21px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    opacity: 0;
    transition: opacity .3s ease;
}
@media screen and (max-width:767px){
    .pageNav {
        width: calc(100% - calc(140 / var(--vw-min) * 100vw));
        height: 100%;
        overflow: hidden;
        padding-left: calc(36 / var(--vw-min) * 100vw);
    }
    .pageNavLists {
        height: 100%;
        display: flex;
        gap: 0 calc(34 / var(--vw-min) * 100vw);
        margin-top: 0;
    }
    .pageNavLists > li {
        height: 100%;
    }
    .pageNavLists > li > a {
        height: 100%;
        font-size: calc(24 / var(--vw-min) * 100vw);
        padding-left: calc(42 / var(--vw-min) * 100vw);
    }
    .pageNavLists > li > a:before {
        width: calc(35 / var(--vw-min) * 100vw);
        height: calc(33 / var(--vw-min) * 100vw);
        left: 0;
    }
    .pageNavLists > li > a:after {
        content: "";
        background: url(../img/common/icon/icon_nav_hone1.png) no-repeat center / contain;
        width: 48px;
        height: 21px;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10px;
        opacity: 0;
        transition: opacity .3s ease;
    }
}
.pageNavLists > li.is-active > a:before {
    opacity: 0;
}
.pageNavLists > li.is-active > a:after {
    opacity: 1;
}
@media screen and (hover: hover) and (pointer: fine) {
    .pageNavLists > li:hover {
        opacity: 1;
    }
}
/* pagetop */
.pagetop {
    width: 58px;
    height: 56px;
    position: absolute;
    bottom: 24px;
    left: 7px;
}
.pagetop > a {
    display: block;
    background: url(../img/common/icon/pagetop.png) no-repeat center / contain;
    width: 100%;
    height: 100%;
}
@media screen and (max-width:767px){
    .pagetop {
        width: calc(87 / var(--vw-min) * 100vw);
        height: calc(83 / var(--vw-min) * 100vw);
        margin: auto;
        position: absolute;
        top: 0;
        right: calc(30 / var(--vw-min) * 100vw);
        bottom: 0;
        left: auto;
    }
}

/*-----------------------------------------------
 * Footer
-------------------------------------------------*/
.subFooter {
    margin-top: auto;
    width: 100%;
    min-height: calc(645/ var(--vw-min) * 100vw);
    padding: min(calc(143/ var(--vw-min) * 100vw), 143px) 0;
    position: relative;
    background-image: url(../img/common/footer/bg_mark.png),url(../img/common/footer/sub_ft_bg.jpg);
    background-repeat: no-repeat,no-repeat;
    background-position: center center, center center;
    background-size: min(calc(522/ var(--vw-min) * 100vw), 522px) auto,cover;
}
.subFooter:before {
	content: "";
	border: 2px solid #a89266;
	width: calc(100% - min(calc(40/ var(--vw-min) * 100vw), 40px));
	height: calc(100% - min(calc(40/ var(--vw-min) * 100vw), 40px));    
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}
.subFooter:after {
	content: "";
	border: 1px solid #a89266;
	width: calc(100% - min(calc(60/ var(--vw-min) * 100vw), 60px));
	height: calc(100% - min(calc(60/ var(--vw-min) * 100vw), 60px));
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}
.subFooter__frame {
	background-image: url(../img/common/menu/menu_frame1.png),url(../img/common/menu/menu_frame2.png),url(../img/common/menu/menu_frame3.png),url(../img/common/menu/menu_frame4.png);
	background-size: min(calc(40/ var(--vw-min) * 100vw), 40px) min(calc(40/ var(--vw-min) * 100vw), 40px);
	background-position: top left,top right,bottom right,bottom left;
	background-repeat: no-repeat;
	width: calc(100% - min(calc(40/ var(--vw-min) * 100vw), 40px));
	height: calc(100% - min(calc(40/ var(--vw-min) * 100vw), 40px));
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}
@media screen and (max-width:767px){
    .subFooter {
        min-height: unset;
        padding: calc(110 / var(--vw-min) * 100vw) 0;
        background-image: url(../img/common/footer/bg_mark.png),url(../img/common/footer/sub_ft_bg_sp.jpg);
        background-repeat: no-repeat,no-repeat;
        background-position: center center, center center;
        background-size: calc(547/ var(--vw-min) * 100vw) auto,cover;
    }
    .subFooter:before {
        content: "";
        border: 2px solid #a89266;
        width: calc(100% - calc(56/ var(--vw-min) * 100vw));
        height: calc(100% - calc(56/ var(--vw-min) * 100vw));
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
    }
    .subFooter:after {
        content: "";
        border: 1px solid #a89266;
        width: calc(100% - calc(74/ var(--vw-min) * 100vw));
        height: calc(100% - calc(74/ var(--vw-min) * 100vw));
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
    }
    .subFooter__frame {
        background-size: calc(64/ var(--vw-min) * 100vw) calc(64/ var(--vw-min) * 100vw);
        width: calc(100% - calc(54/ var(--vw-min) * 100vw));
        height: calc(100% - calc(54/ var(--vw-min) * 100vw));
    }
}




.subFooter__inner {
    width:  min(calc(1220/ var(--vw-min) * 100vw), 1220px);
    margin: 0 auto;
}
.subFooter__cont{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}

.subFooter__navBlock{
    width:  min(calc(700/ var(--vw-min) * 100vw), 700px);
}

@media screen and (max-width:767px){
    .subFooter__inner {
        width:  100%;
    }
    .subFooter__cont{
        flex-direction: column;
        align-items: center;
    }

    .subFooter__navBlock{
        width: 100%;
    }
}

/* logo */
.subFooter .footer__logo {
    width: min(calc(344/ var(--vw-min) * 100vw), 344px);
    margin-bottom: unset;
}
.footer__logo img {
    width: 100%;
}

.footer__navLists{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media screen and (max-width:767px){
    .subFooter .footer__logo {
        width: calc(495/ var(--vw-min) * 100vw);
        margin-bottom: calc(70/ var(--vw-min) * 100vw);
    }
    .footer__navLists{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

}


/* nav */
.footer__navLists > li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width:  min(calc(220/ var(--vw-min) * 100vw), 220px);
    
}
.footer__navLists > li:not(:first-child) {
    margin-top: 18px;
}
.footer__navLists > li > a {
    color: #fff;
    display: block;
    font-size: min(calc(24/ var(--vw-min) * 100vw), 24px);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-decoration: none;
}
@media screen and (max-width:767px){
    .footer__navLists{
        flex-direction: column;
        align-items: center;
    }
    /* nav */
    .footer__navLists > li {
        align-items: center;
        justify-content: center;
        width:  100%;  
    }
    .footer__navLists > li:not(:first-child) {
        margin-top: calc(50/ var(--vw-min) * 100vw);
    }
    .footer__navLists > li > a {
        font-size:calc(40/ var(--vw-min) * 100vw);
    }
}

/* share */
.subFooter .footer__navShare {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-top: unset;
}
.footer__navShare > dt {
    color: #fff;
    font-size: min(calc(16/ var(--vw-min) * 100vw), 16px);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}

@media screen and (max-width:767px){
    .subFooter .footer__navShare {
        flex-direction: column;
    }
    .footer__navShare > dt {
        color: #fff;
        font-size: calc(24/ var(--vw-min) * 100vw);
    }
}

/* footer__shareLists */
.subFooter .footer__shareLists {
	display: flex;
    gap: 24px;
    margin-top: unset;
    margin-left: min(calc(33/ var(--vw-min) * 100vw), 33px);
}
.footer__shareLists__item {
	width: min(calc(19/ var(--vw-min) * 100vw), 19px);
	height: min(calc(19/ var(--vw-min) * 100vw), 19px);
}
@media screen and (max-width:767px){
    .subFooter .footer__shareLists {
        gap: calc(30/ var(--vw-min) * 100vw);
        margin-top: calc(26/ var(--vw-min) * 100vw);
        margin-left: 0;
    }
    .footer__shareLists__item {
        width: calc(44/ var(--vw-min) * 100vw);
        height: calc(44/ var(--vw-min) * 100vw);
    }
}

/* link */
.footer__shareLists__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}
.footer__shareLists__link:before {
	content: "";
	background-color: #a89266;
	display: block;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
    width: 100%;
    height: 100%;
}


/* 各SNSパーツ */
.footer__shareLists__item.is-x .footer__shareLists__link:before {
	-webkit-mask-image: url(../img/common/sns/icon_x.svg);
	mask-image: url(../img/common/sns/icon_x.svg);
}
.footer__shareLists__item.is-facebook .footer__shareLists__link:before {
	-webkit-mask-image: url(../img/common/sns/icon_fb.svg);
	mask-image: url(../img/common/sns/icon_fb.svg);
}
.footer__shareLists__item.is-line .footer__shareLists__link:before {
	-webkit-mask-image: url(../img/common/sns/icon_line.svg);
	mask-image: url(../img/common/sns/icon_line.svg);
}

/* bnrLists */
.footer__bnrLists {
    width: 326px;
    margin-top: 40px;
}
.footer__bnrLists img {
    width: 100%;
}

@media screen and (max-width:767px){
    .footer__bnrLists {
        width: calc(469/ var(--vw-min) * 100vw);
        margin: calc(70/ var(--vw-min) * 100vw) auto 0;
    }
}

/* copy */
.subFooter .footer__copy {
    color: #fff;
    font-size: min(calc(12/ var(--vw-min) * 100vw), 12px);
    letter-spacing: 0;
    text-align: left;
    margin-top: min(calc(20/ var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width:767px){
    .subFooter .footer__copy {
        font-size: calc(17/ var(--vw-min) * 100vw);
        text-align: center;
        margin-top: calc(36/ var(--vw-min) * 100vw);
    }
}
/*---------------------
SUBPAGE COMMON
--------------------- */
/* subpage bg */
.sub .bg{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: url(../img/top/bg/bg_green1.jpg) repeat-x left center / cover;
    z-index: -1;
}
@media screen and (max-width:767px){
    .sub .bg{
        display: none;
    }
}

/* subpage frame */
.frameWrap{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    pointer-events: none;
}
.frame._sub{
     position: sticky;
     width: 100%;
     height: 100vh;
     pointer-events: none;
     z-index: 10;
     inset: 0;
     overflow: hidden;
}
.frame__deco{
    display: block;
     width: 100%;
     height: 100%;
     position: relative;
}
.frame__deco::before{
     content: "";
     display: block;
     background: url(../img/deco/deco_reaf_btm.png) no-repeat left bottom / contain;
     width: min(calc(472/ var(--vw-min) * 100vw), 472px);
     height: min(calc(407/ var(--vw-min) * 100vw), 407px);
     position: absolute;
     left: max(calc(-20/ var(--vw-min) * 100vw), -20px);
     bottom: 0;
}
.frame__deco::after{
     content: "";
     display: block;
     background: url(../img/deco/deco_reaf_top.png) no-repeat right top / contain;
     width: min(calc(472/ var(--vw-min) * 100vw), 472px);
     height: min(calc(407/ var(--vw-min) * 100vw), 407px);
     position: absolute;
     right: max(calc(-20/ var(--vw-min) * 100vw), -20px);
     top: 0;
}

@media screen and (max-width:767px){
   .frame__deco::before{
        width: calc(340 / var(--vw-min) * 100vw);
        background: url(../img/deco/deco_reaf_btm_sub_sp.png) no-repeat left bottom / contain;
        height: calc(307 / var(--vw-min) * 100vw);
        left: 0;
        bottom: 0;
    }
    .frame__deco::after{
        width: calc(348 / var(--vw-min) * 100vw);
        background: url(../img/deco/deco_reaf_top_sub_sp.png) no-repeat left bottom / contain;
        height: calc(316 / var(--vw-min) * 100vw);
        right: 0;
        top: 0;
    }
}


/* subpage deco */
.sub__decoWrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    pointer-events: none;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.sub__decoIn{
    position: relative;
    width: min(calc(1220/ var(--vw-min) * 100vw), 1220px);
    height: 100%;
}

.sub__decoWrap .decoItem {
    background: url() no-repeat center / contain;
    position: absolute;
}
.sub__decoWrap .decoItem.sub__deco1 {
    background-image: url(../img/deco/deco_hane1.png);
    width: min(calc(219/ var(--vw-min) * 100vw), 219px);
    height:min(calc(205/ var(--vw-min) * 100vw), 205px);
    top:max(calc(-60/ var(--vw-min) * 100vw), -60px);
    left: max(calc(-110/ var(--vw-min) * 100vw), -110px);
}
.sub__decoWrap .decoItem.sub__deco2 {
    background-image: url(../img/deco/deco_hane2.png);
    width: min(calc(217/ var(--vw-min) * 100vw), 217px);
    height:min(calc(131/ var(--vw-min) * 100vw),131px);
    top:min(calc(621/ var(--vw-min) * 100vw), 621px);
    right: max(calc(-180/ var(--vw-min) * 100vw), -180px);
}
.sub__decoWrap .decoItem.sub__deco3 {
    background-image: url(../img/deco/deco_hane3.png);
    width: min(calc(161/ var(--vw-min) * 100vw), 161px);
    height:min(calc(105/ var(--vw-min) * 100vw),105px);
    bottom:min(calc(110/ var(--vw-min) * 100vw), 110px);
    right: min(calc(30/ var(--vw-min) * 100vw), 30px);
}
@media screen and (max-width:767px){
    .sub__decoWrap .decoItem.sub__deco1 {
        background-image: url(../img/deco/deco_hane1.png);
        width: calc(219/ var(--vw-min) * 100vw);
        height:calc(219/ var(--vw-min) * 100vw);
        top: calc(-60/ var(--vw-min) * 100vw);
        left: calc(20/ var(--vw-min) * 100vw);
    }
    .sub__decoWrap .decoItem.sub__deco2 {
        display: none;
    }
    .sub__decoWrap .decoItem.sub__deco3 {
        background-image: url(../img/deco/deco_hane3.png);
        width:calc(161/ var(--vw-min) * 100vw);
        height: calc(104/ var(--vw-min) * 100vw);
        bottom: calc(30/ var(--vw-min) * 100vw);
        right: calc(60/ var(--vw-min) * 100vw);
    }
}

/* subpage ttl*/
.subPage__ttlBlock{
    padding-bottom: min(calc(40/ var(--vw-min) * 100vw), 40px);
    position: relative;
    margin-bottom: min(calc(64/ var(--vw-min) * 100vw), 64px);

}
.subPage__ttlWrap{
    display: block;
    border-radius:min(calc(100/ var(--vw-min) * 100vw), 100px);
    border: min(calc(3/ var(--vw-min) * 100vw), 3px) solid #a89266;
    padding: min(calc(1/ var(--vw-min) * 100vw), 1px);
}
.subPage__ttl{
    padding:0 min(calc(80/ var(--vw-min) * 100vw), 80px);
    color: #FFF;
    border-radius:min(calc(100/ var(--vw-min) * 100vw), 100px);
    background: linear-gradient(90deg,rgba(21, 116, 147, 1) 0%, rgba(57, 150, 115, 1) 100%);
    height:min(calc(72/ var(--vw-min) * 100vw), 72px);
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width:767px){
    .subPage__ttlBlock{
        padding-bottom: calc(60/ var(--vw-min) * 100vw);
        margin-bottom: calc(70/ var(--vw-min) * 100vw);
    }
    .subPage__ttlWrap{
        border-radius:unset;
        border: calc(3/ var(--vw-min) * 100vw) solid #a89266;
        border-right: unset;
        border-left: unset;
        padding: calc(4/ var(--vw-min) * 100vw) 0;
    }
    .subPage__ttl{
        padding:0 calc(80/ var(--vw-min) * 100vw);
        border-radius:unset;
        height:calc(103/ var(--vw-min) * 100vw);
    }
}

.subPage__ttl__en{
    font-size: min(calc(72/ var(--vw-min) * 100vw), 72px);
    font-weight: 800;
    line-height: .64em;
    padding-top:min(calc(8/ var(--vw-min) * 100vw), 8px);
    padding-left:min(calc(35/ var(--vw-min) * 100vw), 35px);
    position: relative;
}
.subPage__ttl__en::before{
    content: "";
    width: min(calc(22/ var(--vw-min) * 100vw), 22px);
    height: min(calc(22/ var(--vw-min) * 100vw), 22px);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-mask: url(../img/deco/deco_kira.svg) no-repeat center center / contain;
    mask: url(../img/deco/deco_kira.svg) no-repeat center center / contain;
    background-color: #FFF;
}
@media screen and (max-width:767px){
    .subPage__ttl__en{
        font-size: calc(103/ var(--vw-min) * 100vw);
        padding-top:calc(10/ var(--vw-min) * 100vw);
        padding-left:calc(43/ var(--vw-min) * 100vw);
        position: relative;
    }
    .subPage__ttl__en::before{
        width: calc(32/ var(--vw-min) * 100vw);
        height: calc(32/ var(--vw-min) * 100vw);
    }
}