@charset "UTF-8";


/* -- font
-------------------------------------------------------------------------------- */
@font-face {
    font-family: 'AttenNew';
    src: url('./font/AttenNewMedium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AttenNew';
    src: url('./font/AttenNewBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'EBGaramond';
    src: url('./font/EBGaramond-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* -- Base and Reset
-------------------------------------------------------------------------------- */
html {
    font-size: 62.5%;
	width: 100%;
}
body {
	font: 1rem/1.5 'AttenNew', 'Noto Sans JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	text-align: left;
    font-feature-settings: 'palt';
    color: #1a1a1a;
	width: 100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
caption,th,td {
	font-weight: normal;
	text-align: left;
}
input,textarea,select {
	font-family: 'AttenNew', 'Noto Sans JP', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	vertical-align: middle;
}
textarea {
	resize: vertical;
}
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
ul,ol { list-style: none; }
fieldset,img { border: 0; vertical-align: top; }
iframe {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
input{
    color:#333;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
label{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a{
    text-decoration:none;
    color:inherit;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus{
    outline:none;
}
select::-ms-expand {
    display: none;
}
img{
    pointer-events: none;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-touch-callout;
}
@media (max-width: 1200px){
    html {
        font-size: 56.25%;
    }
}
@media (max-width: 1024px){
    html {
        font-size: 0.976563vw
    }
}
@media (max-width: 767px){
    html {
        font-size: 56.25%;
    }
}
@media (max-width: 390px){
    html {
        font-size: 2.307693vw;
    }
}
.garamond{
	font-family: 'EBGaramond', serif;
}
:root {
    --header-height: 10rem;
    --header-hide-height: 0;
}


/* -- swiper
-------------------------------------------------------------------------------- */
.swiper{
}
.swiper .swiper-inner{
    overflow: hidden;
}
.swiper .swiper-button{
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.swiper .swiper-wrapper{
    width: 100%;
    display: flex;
}
.swiper .swiper-wrapper .swiper-slide{
    flex-shrink: 0;
}


/* -- header
-------------------------------------------------------------------------------- */
header{
    width: 100%;
    height: 10rem;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    transform: translateY(-100%);
    transition: transform 0.5s ease;
}
.loaded header{
    transform: translateY(0);
}
header.hide{
    transform: translateY(-100%);
}
header .header-inner{
    height: 100%;
    padding: 0 3%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header .logo{
    display: flex;
    align-items: center;
}
header .logo .img{
    height: 2.2rem;
}
header .logo .img img{
    height: 100%;
}
header .logo .txt{
    font-size: 1.6rem;
    letter-spacing: 0.25em;
    padding-left: 2.2rem;
    transform: translateY(1px);
    white-space: nowrap;
}
header .nav-btn{
    width: 6rem;
    height: 6rem;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
header .nav-btn .bar{
    display: block;
    width: 4rem;
    height: 2px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    left: 1rem;
}
header .nav-btn .bar.bar-1{
    transform: translateY(-0.4rem);
}
header .nav-btn .bar.bar-2{
    transform: translateY(0.4rem);
}
header .nav-btn .bar span{
    display: block;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    position: absolute;
    top: 0;
    left: 0;
}
@media (min-width: 1025px){
    header .nav-btn:hover .bar span{
        animation: nav-bar 0.3s cubic-bezier(0.5, 1, 0.89, 1);
    }
    header .nav-btn:hover .bar.bar-2 span{
        animation-delay: 0.15s;
    }
}
@keyframes nav-bar {
	0% {
        left: auto;
        right: 0;
        width: 100%;
    }
	50% {
        left: auto;
        right: 0;
        width: 0%;
    }
	51% {
        left: 0;
        right: auto;
        width: 0%;
    }
	100% {
        left: 0;
        right: auto;
        width: 100%;
    }
}
@media (max-width: 767px){
    header {
        height: 8rem;
    }
    header .header-inner {
        padding: 0 5%;
    }
    header .logo .img{
        height: 2rem;
    }
    header .logo .txt{
        font-size: 1.4rem;
        padding-left: 2rem;
    }
    header .nav-btn{
        width: 5.2rem;
        height: 5.2rem;
    }
    header .nav-btn .bar{
        width: 3.2rem;
    }
}


/* -- g-nav
-------------------------------------------------------------------------------- */
.g-nav{
    width: 100%;
    height: 100%;
    background: rgba(243,242,239,0.6);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
    visibility: hide;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-open .g-nav{
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
}
.g-nav .close-btn{
    width: 6rem;
    height: 6rem;
    position: absolute;
    top: 2rem;
    right: 3%;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    z-index: 1;
}
.g-nav .close-btn .bar{
    display: block;
    width: 4rem;
    height: 2px;
    background: #1a1a1a;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    left: 1rem;
    transition: 0.3s ease;
}
.g-nav .close-btn .bar.bar-1{
    transform: translateY(-0.4rem);
}
.g-nav .close-btn .bar.bar-2{
    transform: translateY(0.4rem);
}
.nav-open .g-nav .close-btn .bar.bar-1{
    transform: translateY(0rem) rotate(25deg);
}
.nav-open .g-nav .close-btn .bar.bar-2{
    transform: translateY(0rem) rotate(-25deg);
}
.g-nav .g-nav-inner{
    width: 85%;
    height: 100%;
    margin-left: auto;
    background: #fff;
    box-sizing: border-box;
    padding: 12rem 8rem 8rem;
    overflow: auto;
}
.g-nav .g-nav-box-head{
    margin-bottom: 6rem;
    position: relative;
}
.g-nav .g-nav-box-head ul{
    display: flex;
}
.g-nav .g-nav-box-head ul li{
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.g-nav .g-nav-box-head ul li + li{
    margin-left: 4rem;
}
.g-nav .g-nav-box-head ul li a{
    transition: color 0.3s ease;
}
@media (min-width: 1025px){
    .g-nav .g-nav-box-head ul li a:hover{
        color: #c99a06;
    }
}
.g-nav .g-nav-box-head ul li a.active{
    color: #c99a06;
}
.g-nav .g-nav-box-body{
    display: flex;
    flex-wrap: wrap;
    margin: -8rem -4rem 0;
}
.g-nav .g-nav-box{
    width: calc(100% / 2);
    padding: 8rem 4rem 0;
    box-sizing: border-box;
}
.g-nav .g-nav-box .g-nav-box-inner{
    padding-top: 3.2rem;
    border-top: solid 1px #e0e0e0;
}
.g-nav .g-nav-box .ttl{
    font-size: 2rem;
    letter-spacing: 0.2em;
    line-height: 8rem;
    white-space: nowrap;
    position: relative;
    padding-left: calc(8rem + 2.4rem);
}
.g-nav .g-nav-box .ttl::before{
    content: "";
    display: block;
    width: 8rem;
    height: 8rem;
    border: solid 1px #e0e0e0;
    box-sizing: border-box;
    background: url(../img/ico_cintents_1.svg) no-repeat center;
    background-size: cover;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.g-nav .g-nav-box:nth-child(2) .ttl::before{
    background-image: url(../img/ico_cintents_2.svg);
}
.g-nav .g-nav-box:nth-child(3) .ttl::before{
    background-image: url(../img/ico_cintents_3.svg);
}
.g-nav .g-nav-box:nth-child(4) .ttl::before{
    background-image: url(../img/ico_cintents_4.svg);
}
.g-nav .g-nav-box:nth-child(5) .ttl::before{
    background-image: url(../img/ico_cintents_5.svg);
}
.g-nav .g-nav-box:nth-child(6) .ttl::before{
    background-image: url(../img/ico_cintents_6.svg);
}
.g-nav .g-nav-box ul{
    padding-left: calc(8rem + 2.4rem);
}
.g-nav .g-nav-box ul li{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
}
.g-nav .g-nav-box ul li + li{
    margin-top: 1.6rem;
}
.g-nav .g-nav-box ul li a{
    display: block;
    position: relative;
    padding-right: 4.8rem;
    transition: color 0.3s ease;
}
.g-nav .g-nav-box ul li a.active{
    color: #c99a06;
}
.g-nav .g-nav-box ul li a:not(:hover) .link-arrow-item::before {
    width: 0.6rem;
    height: 0.6rem;
}
.g-nav .g-nav-box ul li a .link-arrow-item::after {
    width: 1.2rem;
    height: 0.9rem;
}
.g-nav .g-nav-box ul li a .link-arrow-item{
    width: 3rem;
    height: 3rem;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
@media (min-width: 1025px){
    .g-nav .g-nav-box ul li a:hover,
    .g-nav .g-nav-box-foot ul li a:hover{
        color: #c99a06;
    }
    .g-nav .g-nav-box-foot ul li a:hover::before{
        width: 100%;
        left: 0;
        right: auto;
    }
}
.g-nav .g-nav-box-foot{
    margin-top: 12rem;
    border-top: solid 1px #e0e0e0;
    padding-top: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.g-nav .g-nav-box-foot ul{
    display: flex;
}
.g-nav .g-nav-box-foot ul li{
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}
.g-nav .g-nav-box-foot ul li + li{
    margin-left: 3.2rem;
}
.g-nav .g-nav-box-foot ul li a{
    position: relative;
    transition: color 0.3s ease;
}
.g-nav .g-nav-box-foot ul li a::before{
    content: "";
    display: block;
    width: 0%;
    border-top: solid 1px;
    position: absolute;
    right: 0;
    bottom: -3px;
    transition: width 0.3s ease;
}
.g-nav .g-nav-box-foot .copyright{
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: #7c7c7c;
}
@media (max-width: 1024px){
    .g-nav .g-nav-inner{
        width: 100%;
    }
}
@media (max-width: 767px){
    .g-nav .close-btn {
        width: 5.2rem;
        top: 1rem;
        right: 5%;
    }
    .g-nav .close-btn .bar{
        width: 3.2rem;
    }
    .g-nav .g-nav-inner {
        width: 100%;
        padding: 8rem 5% 4rem;
    }
    .g-nav .g-nav-box-head {
        margin-bottom: 4rem;
    }
    .g-nav .g-nav-box-head ul li + li {
        margin-left: 3.2rem;
    }
    .g-nav .g-nav-box-body{
        margin: -4.8rem 0 0;
    }
    .g-nav .g-nav-box{
        width: 100%;
        padding: 4.8rem 0 0;
    }
    .g-nav .g-nav-box .ttl {
        line-height: 7rem;
        padding-left: calc(7rem + 2.4rem);
    }
    .g-nav .g-nav-box .ttl::before {
        width: 7rem;
        height: 7rem;
    }
    .g-nav .g-nav-box ul {
        padding-left: calc(7rem + 2.4rem);
    }
    .g-nav .g-nav-box-foot {
        margin-top: 6rem;
        display: block;
    }
    .g-nav .g-nav-box-foot ul{
        display: block;
    }
    .g-nav .g-nav-box-foot ul li + li {
        margin-left: 0;
        margin-top: 1.2rem;
    }
    .g-nav .g-nav-box-foot .copyright{
        margin-top: 6rem;
    }
}


/* -- nav
-------------------------------------------------------------------------------- */
.nav-wrap{
    display: flex;
    align-items: center;
}
nav{
    border-right: solid 1px rgba(0,0,0,0.15);
    padding-right: 3.2rem;
    margin-right: 3.2rem;
}
@media (max-width: 1024px){
    nav{
        display: none;
    }
}
nav ul{
    display: flex;
}
nav li +li{
    margin-left: 3.2rem;
}
nav li a{
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    position: relative;
    transition: color 0.3s ease;
}
nav li a::after{
    content: "";
    display: block;
    width: 0%;
    border-top: solid 1px;
    position: absolute;
    bottom: -4px;
    right: 0.2em;
    transition: width 0.3s ease;
}
@media (min-width: 1025px){
    nav li a:hover{
        color: #c99a06;
    }
    nav li a:hover::after{
        width: calc(100% - 0.2em);
        left: 0;
        right: auto;
    }
}
nav li a.active{
    color: #c99a06;
}
nav li a.active::after{
    width: calc(100% - 0.2em);
    left: 0;
    right: auto;
}


/* -- target
-------------------------------------------------------------------------------- */
a[target="_blank"]::after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    background: url(../img/ico_ex_link.svg) no-repeat center;
    background-size: cover;
    margin-left: 0.3333333em;
    transform: translateY(-0.15em);
    transition: background 0.3s ease;
}
footer .nav a[target="_blank"]::after{
    background-image: url(../img/ico_ex_link_wh.svg);
}
@media (min-width: 1025px){
    a[target="_blank"]:hover::after{
        background-image: url(../img/ico_ex_link_col.svg)!important;
    }
}
a[target="_blank"].link-arrow::after{
    display: none;
}
.pickup-container li a[target="_blank"] .ttl::after{
    background-image: url(../img/ico_ex_link_wh.svg);
    transform: translateY(-0.1em);
}
.link-arrow[target="_blank"] .link-arrow-item::after{
    width: 1.2rem;
    height: 1.2rem;
    background-image: url(../img/ico_ex_link_wh.svg);
    transform: translate(-50%, -50%);
    animation: none;
}
.link-arrow.ex-doc[target="_blank"] .link-arrow-item::after{
    width: 1.6rem;
    height: 1.6rem;
    background-image: url(../img/ico_ex_doc.svg)!important;
}
@media (min-width: 1025px){
    .link-arrow[target="_blank"]:hover .link-arrow-item::after{
        animation: none;
    }
}
.main-container .container-box .nav li a[target="_blank"] .link-arrow-item::after,
.g-nav .g-nav-box ul li a[target="_blank"] .link-arrow-item::after,
.details-container .body .side-area .nav li a[target="_blank"] .link-arrow-item::after{
    width: 1rem;
    height: 1rem;
}
@media (max-width: 1024px){
    .link-arrow.ex-doc[target="_blank"] .link-arrow-item::after{
        background-image: url(../img/ico_ex_doc_bl.svg)!important;
    }
}


/* -- main
-------------------------------------------------------------------------------- */
main{
    display: block;
    position: relative;
}
main .main-inner{
    opacity: 0;
    transition: opacity 0.6s ease;
}
.loaded main .main-inner{
    opacity: 1;
}


/* -- mv
-------------------------------------------------------------------------------- */
.mv{
    width: 100%;
    height: 100svh;
    min-height: 700px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    background: #fff;
    will-change: opacity;
}
@media (max-width: 430px){
    .mv{
        max-height: none;
    }
}
.mv .bg{
    width: calc(81vw - 8.25vh - 12.375vh - 12.375vh - 12.375vh);
    height: calc(100% - 8rem - 8.25vh);
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
}
.mv .bg.mv-bg-2{
    height: calc(100% - 19.4rem - 8.25vh);
    top: 0;
    bottom: auto;
    right: 15%;
    left: auto;
    transform: translateX(100%);
}
@media (max-height: 700px){
    .mv .bg{
        width: calc(81vw - 5.775rem - 8.6625rem - 8.6625rem - 8.6625rem);
        height: calc(100% - 8rem - 5.775rem);
    }
    .mv .bg.mv-bg-2{
        height: calc(100% - 19.4rem - 5.775rem);
    }
}
@media (max-width: 1200px) and (max-height: 700px){
    .mv .bg{
        width: calc(81vw - 6.222222rem - 9.333333rem - 9.333333rem - 9.333333rem);
    }
}
.mv .bg .bg-1{
    width: 11.4rem;
    height: 100%;
    overflow: hidden;
}
.mv .bg .bg-1 .inner{
    width: 100%;
    height: 100%;
    display: flex;
}
.mv .bg .bg-1 .inner.sp{
    display: none;
}
.mv .bg .bg-1 span{
    display: block;
    width: 0.6rem;
    height: 100%;
    background: #c99a06;
}
.mv .bg .bg-1 span + span{
    margin-left: 0.6rem;
}
.mv .bg .bg-2{
    width: calc(100% - 11.4rem - 1.6rem - 8rem - 1.6rem - 1.6rem - 25%);
    height: 100%;
    overflow: hidden;
    margin-left: 1.6rem;
    position: relative;
}
.mv .bg .bg-2 .inner-wrap{
    width: 144rem;
    height: 144rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
}
.mv .bg .bg-2 .inner-wrap.inner-wrap-2{
    transform: translate(-50%,-50%) rotate(-135deg);
}
.mv .bg .bg-2 .inner{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.mv .bg .bg-2 .inner.inner-2{
    top: 0;
    left: 0;
}
.mv .bg .bg-2 span{
    display: block;
    width: 100%;
    border-top: solid 1px #918770;
}
.mv .bg .bg-2 span + span{
    margin-top: calc(1.2rem - 1px);
}
.mv .bg .bg-3{
    font-size: 8rem;
    width: 8rem;
    height: 100%;
    overflow: hidden;
    margin-left: 1.6rem;
    position: relative;
}
.mv .bg .bg-3 .inner{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.mv .bg .bg-3 span{
    width: 0.2em;
    height: 0.2em;
    background: #043f50;
}
.mv .bg .bg-3 span:nth-child(even){
    background: transparent;
}
.mv .bg .bg-4{
    width: 25%;
    height: 100%;
    overflow: hidden;
    margin-left: 1.6rem;
    position: relative;
}
.mv .bg .bg-4 .inner{
    width: 111.2rem;
    height: 111.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
}
.mv .bg .bg-4 span{
    display: block;
    width: 100%;
    height: 0.8rem;
    background: #bbb086;
}
.mv .bg .bg-4 span + span{
    margin-top: 0.8rem;
}
.mv .mv-ttl{
    font-size: 8.25vh;
    writing-mode: vertical-rl;
    padding-top: 6rem;
    position: absolute;
    top: 50%;
    right: 20%;
    transform: translateY(-50%);
}
@media (max-height: 700px){
    .mv .mv-ttl{
        font-size: 5.775rem;
    }
}
@media (max-width: 1200px) and (max-height: 700px){
    .mv .mv-ttl{
        font-size: 6.416666rem;
    }
}
.mv .mv-ttl .en{
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mv .mv-ttl .en span{
    position: relative;
    opacity: 0;
    transform: translateX(-6rem) scaleX(0);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mv .mv-ttl .en span:nth-child(2){
    transform: translateX(-6.5rem) scaleX(0);
    transition-delay: 0.1s;
}
.mv .mv-ttl .en span:nth-child(3){
    transform: translateX(-7.5rem) scaleX(0);
    transition-delay: 0.2s;
}
.mv .mv-ttl .en span:nth-child(4){
    transform: translateX(-9rem) scaleX(0);
    transition-delay: 0.3s;
}
.loaded .mv .mv-ttl .en span{
    opacity: 1;
    transform: translateX(0) scaleX(1);
}
.mv .mv-ttl .en span::before{
    content: "";
    display: block;
    width: 55%;
    height: 99%;
    background: #918770;
    position: absolute;
    bottom: 1%;
    left: 25%;
    transition: height 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.mv .mv-ttl .en span:nth-child(2)::before{
    transition-delay: 0.4s;
}
.mv .mv-ttl .en span:nth-child(3)::before{
    transition-delay: 0.5s;
}
.mv .mv-ttl .en span:nth-child(4)::before{
    transition-delay: 0.6s;
}
.loaded .mv .mv-ttl .en span::before{
    height: 0%;
}
.mv .mv-ttl .catch{
    position: absolute;
    top: calc(2.4rem + 4rem + 2em);
    right: 2.26em;
    transform: translateX(50%);
}
.mv .mv-ttl .catch > span{
    display: block;
    font-size: 1.6rem;
    letter-spacing: 0.3em;
    line-height: 1.75;
    overflow: hidden;
}
.mv .mv-ttl .catch > span + span{
    margin-top: 3.2em;
}
.mv .mv-ttl .catch > span > span{
    display: block;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
}
.loaded .mv .mv-ttl .catch > span > span{
    opacity: 1;
    transform: translateX(0);
}
.mv .main-ttl-item{
    position: absolute;
    right: 5%;
    bottom: 6rem;
}
.mv .main-ttl{
    font-size: 2.8rem;
    letter-spacing: 0.3em;
    line-height: 1.5;
    font-weight: normal;
    text-align: right;
    margin-right: -0.3em;
}
.mv .main-ttl > span{
    display: block;
    overflow: hidden;
}
.mv .main-ttl > span + span{
    margin-top: 0.25em;
}
.mv .main-ttl > span > span{
    display: block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
}
.loaded .mv .main-ttl > span > span{
    opacity: 1;
    transform: translateY(0);
}
.mv .main-ttl-item p{
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    text-align: right;
    margin-top: 2rem;
    overflow: hidden;
}
.mv .main-ttl-item p span{
    display: block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
}
.loaded .mv .main-ttl-item p span{
    opacity: 1;
    transform: translateY(0%);
}
@media (max-width: 1024px){
    .mv{
        min-height: 104rem;
    }
    .mv .bg {
        width: 54%;
        height: 100%;
    }
    .mv .bg .bg-1 .inner.sp{
        display: flex;
    }
    .mv .bg .bg-1 .inner.pc{
        display: none;
    }
    .mv .bg .bg-1 {
        width: 5.6rem;
    }
    .mv .bg .bg-1 span {
        width: 0.8rem;
    }
    .mv .bg .bg-1 span + span {
        margin-left: 0.8rem;
    }
    .mv .bg .bg-2 {
        width: calc(100% - 5.6rem - 1.2rem - 4.8rem - 1.2rem - 25% - 1.2rem);
        margin-left: 1.2rem;
    }
    .mv .bg .bg-2 .inner-wrap{
        width: 168rem;
        height: 168rem;
    }
    .mv .bg .bg-2 span + span {
        margin-top: calc(1.4rem - 1px);
    }
    .mv .bg .bg-3 {
        font-size: 4.8rem;
        width: 4.8rem;
        margin-left: 1.2rem;
    }
    .mv .bg .bg-3 span {
        width: 0.333333em;
        height: 0.333333em;
    }
    .mv .bg .bg-4 {
        margin-left: 1.2rem;
    }
    .mv .bg.mv-bg-2{
        display: none;
    }
    .mv .mv-ttl{
        font-size: 8rem;
        right: 5%;
        transform: none;
        top: 0;
        padding-top: 18rem;
    }
    .mv .mv-ttl .catch {
        top: calc(18rem + 2em);
        right: 2.26em;
    }
    .mv .mv-ttl .catch > span {
        font-size: 1.8rem;
    }
}
@media (max-width: 767px){
    .mv{
        min-height: 65rem;
    }
    .mv .bg {
        width: calc(95% - 23rem);
    }
    .mv .bg .bg-1 {
        width: 3.2rem;
    }
    .mv .bg .bg-1 span {
        width: 0.5rem;
    }
    .mv .bg .bg-1 span + span {
        margin-left: 0.5rem;
    }
    .mv .bg .bg-2 {
        width: calc(100% - 3.5rem - 0.8rem - 2.8rem - 0.8rem - 23% - 0.8rem);
        margin-left: 0.8rem;
    }
    .mv .bg .bg-2 .inner-wrap{
        width: 120rem;
        height: 120rem;
    }
    .mv .bg .bg-2 span + span {
        margin-top: calc(1rem - 1px);
    }
    .mv .bg .bg-3 {
        font-size: 2.8rem;
        width: 2.8rem;
        margin-left: 0.8rem;
    }
    .mv .bg .bg-3 span {
        width: 0.333333em;
        height: 0.333333em;
    }
    .mv .bg .bg-4 {
        width: 23%;
        margin-left: 0.8rem;
    }
    .mv .bg .bg-4 .inner{
        width: 83.4rem;
        height: 83.4rem;
    }
    .mv .bg .bg-4 span{
        display: block;
        width: 100%;
        height: 0.6rem;
        background: #bbb086;
    }
    .mv .bg .bg-4 span + span{
        margin-top: 0.6rem;
    }
    .mv .mv-ttl{
        font-size: 4.8rem;
        padding-top: 12rem;
        right: calc(5% - 1.6rem);
    }
    .mv .mv-ttl .catch {
        top: calc(12rem + 2em);
        right: 2.26em;
    }
    .mv .mv-ttl .catch > span {
        font-size: 1.5rem;
    }
    .mv .main-ttl-item {
        bottom: 3.2rem;
    }
    .mv .main-ttl {
        font-size: 2.4rem;
    }
    .mv .main-ttl-item p {
        font-size: 1.6rem;
        margin-top: 1.2rem;
    }
}


/* -- section
-------------------------------------------------------------------------------- */
section .section-ttl .en{
    display: block;
    font-size: 6rem;
    letter-spacing: 0.1em;
    line-height: 1.25;
    text-indent: -0.05em;
}
section .section-ttl .jp{
    display: block;
    font-size: 1.6rem;
    letter-spacing: 0.2em;
    font-weight: normal;
}
section .link-btn{
    font-size: 2rem;
    letter-spacing: 0.05em;
}
section .link-btn a{
    display: block;
    padding: 1.2rem 0;
    position: relative;
    transition: color 0.3s ease;
}
section .link-btn a::before,
section .link-btn a::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #545756;
    position: absolute;
    right: 0;
    bottom: -2px;
}
section .link-btn a::after{
    width: 0%;
    background: #c99a06;
    transition: width 0.3s ease;
}
@media (min-width: 1025px){
    section .link-btn a:hover{
        color: #c99a06;
    }
    section .link-btn a:hover::after{
        width: 100%;
        right: auto;
        left: 0;
    }
}
@media (max-width: 767px){
    section .section-ttl .en{
        font-size: 4rem;
    }
}


/* -- link-arrow
-------------------------------------------------------------------------------- */
.link-arrow{
    position: relative;
}
.link-arrow .link-arrow-item{
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    position: absolute;
}
.link-arrow .link-arrow-item::before{
    content: "";
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 100%;
    background: #bbb086;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 0.3s cubic-bezier(0.11, 0, 0.5, 0);
}
.link-arrow .link-arrow-item::after{
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.2rem;
    background: url(../img/ico_arrow.svg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.5, 1, 0.89, 1);
    animation: arrow-out 0.3s cubic-bezier(0.5, 1, 0.89, 1) forwards;
}
@media (min-width: 1025px){
    .link-arrow:hover .link-arrow-item::before{
        width: 100%!important;
        height: 100%!important;
        background: #c99a06;
        transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
    }
    .link-arrow:hover .link-arrow-item::after{
        opacity: 1;
        transition-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
        animation: arrow-in 0.3s cubic-bezier(0.11, 0, 0.5, 0) forwards;
    }
}
.link-arrow.active .link-arrow-item::before{
    width: 100%!important;
    height: 100%!important;
    background: #c99a06;
    transition: 0s;
}
.link-arrow.active .link-arrow-item::after{
    opacity: 1;
    animation: arrow-in 0s forwards;
}
@keyframes arrow-in {
	0% {
        transform: translate(-100%, -50%);
    }
	100% {
        transform: translate(-50%, -50%);
    }
}
@keyframes arrow-out {
	0% {
        transform: translate(-50%, -50%);
    }
	100% {
        transform: translate(-25%, -50%);
    }
}
.link-btn .link-arrow .link-arrow-item{
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.main-container .container-box .nav li a .link-arrow-item,
.article .links a .link-arrow-item{
    width: 3rem;
    height: 3rem;
}
.main-container .container-box .nav li a .link-arrow-item{
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.main-container .container-box .nav li a:not(:hover) .link-arrow-item::before,
.article .links a .link-arrow-item::before{
    width: 0.6rem;
    height: 0.6rem;
}
.main-container .container-box .nav li a .link-arrow-item::after,
.article .links a .link-arrow-item::after{
    width: 1.2rem;
    height: 0.9rem;
}
footer .banner li a .link-arrow-item{
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
@media (max-width: 1024px){
    .link-arrow .link-arrow-item{
        width: 3rem;
        height: 3rem;
    }
    .link-arrow .link-arrow-item::before{
        width: 100%!important;
        height: 100%!important;
    }
    .link-arrow:not(.not-bg-col):not(.active) .link-arrow-item::before{
        background: transparent;
        box-sizing: border-box;
        border: solid 1px rgba(0,0,0,0.1);
    }
    .link-arrow .link-arrow-item::after{
        width: 1.2rem;
        height: 0.9rem;
        opacity: 1;
        animation: none;
        transform: translate(-50%, -50%);
    }
    .link-arrow[target="_blank"] .link-arrow-item::after {
        width: 1rem;
        height: 1rem;
    }
    .link-arrow:not(.not-bg-col):not(.active) .link-arrow-item::after{
        background-image: url(../img/ico_arrow_bg.svg);
    }
    .link-arrow:not(.not-bg-col):not(.active)[target="_blank"] .link-arrow-item::after {
        background-image: url(../img/ico_ex_link.svg);
    }
    .link-arrow.ex-doc[target="_blank"] .link-arrow-item::after {
        width: 1.4rem;
        height: 1.4rem;
    }
    footer .link-arrow .link-arrow-item::before{
        border: solid 1px rgba(255,255,255,0.1);
        background: transparent;
    }
    footer .link-arrow[target="_blank"] .link-arrow-item::after{
        background-image: url(../img/ico_ex_link_wh.svg);
    }
}


/* -- breadcrumbs
-------------------------------------------------------------------------------- */
.breadcrumbs .breadcrumbs-inner{
    display: flex;
    justify-content: flex-end;
}
.breadcrumbs ul{
    display: flex;
}
.breadcrumbs li{
    font-size: 1.4rem;
    letter-spacing: 0.075em;
    position: relative;
}
.breadcrumbs li + li{
    margin-left: 5.2rem;
}
.breadcrumbs li + li::before{
    content: "";
    display: block;
    width: 3.2rem;
    border-top: solid 1px #e0e0e0;
    position: absolute;
    top: 50%;
    left: -4.2rem;
    margin-top: -1px;
}
.breadcrumbs li a{
    display: block;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease;
}
.breadcrumbs li:first-child{
    padding-left: 1.8rem;
}
.breadcrumbs li:first-child a::before{
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background: url(../img/ico_home.svg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: -1.8rem;
    transform: translateY(-50%);
    margin-top: -0.5px;
}
.breadcrumbs li a::after{
    content: "";
    display: block;
    width: 0;
    border-top: solid 1px;
    margin-top: 3px;
    position: absolute;
    right: 0.1em;
    bottom: 0;
    transition: width 0.3s ease;
}
@media (min-width: 1025px){
    .breadcrumbs li a:hover{
        color: #c99a06;
    }
    .breadcrumbs li a:hover::after{
        width: calc(100% - 0.1em);
        left: 0;
        right: auto;
    }
}
.breadcrumbs li p{
    color: #969696;
}
.breadcrumbs li p,
.breadcrumbs li:not(:first-child) a{
    max-width: 12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.breadcrumbs{
    width: 100%;
}
.breadcrumbs.scroll{
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.breadcrumbs.scroll::-webkit-scrollbar {
    display: none;
}
.breadcrumbs.scroll .breadcrumbs-inner{
    justify-content: flex-start;
}
@media (max-width: 1024px){
    .breadcrumbs li p,
    .breadcrumbs li:not(:first-child) a {
        max-width: 10em;
    }
}
@media (max-width: 767px){
    .breadcrumbs li{
        font-size: 1.2rem;
    }
    .breadcrumbs li:first-child {
        padding-left: 1.6rem;
    }
    .breadcrumbs li + li {
        margin-left: 4rem;
    }
    .breadcrumbs li + li::before {
        width: 2.4rem;
        left: -3.2rem;
    }
    .breadcrumbs li p,
    .breadcrumbs li:not(:first-child) a {
        max-width: 8em;
    }
    .breadcrumbs li:first-child a::before{
        width: 1rem;
        height: 1rem;
        left: -1.6rem;
    }
}


/* -- pickup-container
-------------------------------------------------------------------------------- */
.pickup-container{
    background: #918770;
    position: sticky;
    bottom: 0;
    left: 0;
}
@media (max-height: 500px){
    .pickup-container{
        position: relative;
    }
}
.pickup-container .pickup-container-inner{
    display: flex;
}
.pickup-container .ttl-area{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 25%;
    position: relative;
}
.pickup-container .section-ttl{
    text-align: center;
}
.pickup-container .section-ttl .en{
    font-size: 4rem;
}
.pickup-container .section-ttl.scroll-fade .en::before{
    background: #bbb086;
}
.pickup-container .section-ttl .jp {
    margin-top: 0.2rem;
}
.pickup-container .swiper-button-wrap{
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 2;
    display: flex;
}
.pickup-container .section-ttl + .swiper-button-wrap{
    opacity: 0;
    transition: opacity 0.5s ease;
}
.pickup-container .section-ttl.show + .swiper-button-wrap{
    opacity: 1;
}
.pickup-container .no-swiper .swiper-button-wrap{
    display: none;
}
.pickup-container .swiper-button{
    display: block;
    width: 4rem;
    height: 4rem;
    border: solid 1px rgba(255,255,255,0.3);
    box-sizing: border-box;
    border-radius: 100%;
    background: url(../img/ico_arrow.svg) no-repeat center;
    background-size: 1.6rem;
    transition: border 0.3s ease, opacity 0.3s ease, background 0.15s ease;
}
@media (min-width: 1025px){
    .pickup-container .swiper-button:not(.swiper-button-disabled):hover{
        background-color: rgba(0,0,0,0.05);
    }
}
.pickup-container .swiper-button.swiper-button-prev{
    transform: scale(-1,1);
}
.pickup-container .swiper-button.swiper-button-next{
    margin-left: 0.8rem;
}
.pickup-container .swiper-button.swiper-button-disabled{
    border-color: rgba(255,255,255,0.4);
    opacity: 0.3;
    cursor: default;
}
.pickup-container .swiper-inner{
    flex: 1;
    padding: 0.4rem 0.4rem 0.4rem 0;
}
@media (max-width: 1024px){
    .pickup-container .pickup-container-inner{
        display: block;
    }
    .pickup-container .ttl-area{
        width: 100%;
        padding: 8rem 0 4.4rem;
    }
    .pickup-container .swiper-inner{
        padding: 0.4rem;
    }
}
.pickup-container .no-swiper .swiper-inner{
    padding-right: 0;
}
.pickup-container ul{
    flex: 1;
    display: flex;
}
.pickup-container li{
    width: 40%;
}
.pickup-container .swiper-inner li{
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 1s ease;
}
.pickup-container .swiper-inner li:nth-child(2){
    transition-delay: 0.1s;
}
.pickup-container .swiper-inner li:nth-child(3){
    transition-delay: 0.2s;
}
.pickup-container .swiper-inner.show li{
    opacity: 1;
    transform: scale(1);
}
.pickup-container .no-swiper li{
    flex: 1;
}
.pickup-container li a{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 42rem;
    border-radius: 0.8rem;
    position: relative;
    overflow: hidden;
}
.pickup-container li a .img{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.pickup-container li a .img::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(26, 26, 26,0.5);
    z-index: 1;
}
.pickup-container li a .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: 1s ease;
}
.pickup-container .swiper-inner li a .img img{
    filter: blur(10px);
    transform: scale(1.1);
    transition: filter 1s ease, transform 1s ease;
}
.pickup-container .swiper-inner.show li a .img img{
    filter: blur(0);
    transform: scale(1);
}
@media (min-width: 1025px){
    .pickup-container .swiper-inner.show li:hover a .img img{
        filter: blur(4px);
        transform: scale(1.1);
    }
}
.pickup-container li a .ttl{
    display: block;
    padding: 0 4rem;
    font-size: 2rem;
    letter-spacing: 0.1em;
    color: #fff;
    position: relative;
    z-index: 2;
}
.pickup-container li a .txt{
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    padding: 0 calc(4rem + 4rem) 4rem 4rem;
    color: #fff;
    position: relative;
    z-index: 2;
}
.pickup-container li a .txt::before{
    content: "";
    display: block;
    width: 0.8rem;
    border-top: solid 1px #fff;
    margin-top: 1.6rem;
    margin-bottom: 2rem;
    margin-left: 0.1rem;
}
.pickup-container .link-arrow-item{
    right: 2rem;
    bottom: 2rem;
    z-index: 2;
}
@media (max-width: 1024px){
    .pickup-container .swiper-button-wrap {
        right: 5%;
        display: none;
    }
}
@media (max-width: 767px){
    .pickup-container .ttl-area {
        padding-bottom: 4.8rem;
    }
    .pickup-container .swiper-inner {
        padding: 0.8rem;
    }
    .pickup-container li a {
        height: 35rem;
    }
    .pickup-container li a .ttl{
        padding: 0 3.2rem;
    }
    .pickup-container li a .txt {
        padding: 0 calc(3.2rem + 3rem) 3.2rem 3.2rem;
    }
}


/* -- news-container
-------------------------------------------------------------------------------- */
.news-container{
    padding: 16rem 0 16rem;
    overflow: hidden;
}
.news-container .news-container-inner{
    padding: 0 8%;
    padding-left: calc(8% + 12%);
    position: relative;
}
.news-container .news-container-inner .bg{
    display: block;
    width: 20%;
    height: calc(100% + 12rem);
    position: absolute;
    top: -16rem;
    left: -10%;
    border-radius: 0 0 0.8rem 0;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 1s ease;
}
.news-container .news-container-inner .bg.show{
    opacity: 1;
    transform: scale(1);
}
.news-container .news-container-inner .bg::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/img_news.jpg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.111111);
    filter: blur(10px);
    transition: transform 1s ease, filter 1s ease;
}
.news-container .news-container-inner .bg.show::before{
    transform: scale(1);
    filter: blur(0);
}
.news-container .news-container-inner + .news-container-inner{
    margin-top: 16rem;
    padding-left: 8%;
    padding-right: calc(8% + 12%);
}
.news-container .news-container-inner + .news-container-inner .bg{
    top: auto;
    bottom: -16rem;
    left: auto;
    right: -10%;
    border-radius: 0.8rem 0 0 0;
}
.news-container .news-container-box{
    max-width: 140rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}
.news-container .ttl-area{
    width: 35%;
    box-sizing: border-box;
    padding-right: 8vw;
}
.news-container .section-ttl .en{
    font-size: 5rem;
}
.section-ttl.scroll-fade .en{
    display: inline-block;
    opacity: 0;
    transform: translateY(6rem) scaleY(0);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-ttl.scroll-fade.show .en{
    opacity: 1;
    transform: translateY(0) scaleY(1);
}
.section-ttl.scroll-fade .en::before {
    content: "";
    display: block;
    width: 98%;
    height: 65%;
    background: #918770;
    position: absolute;
    top: 15%;
    right: 2%;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.section-ttl.scroll-fade.show .en::before {
    width: 0%;
}
.section-ttl.scroll-fade .jp {
    overflow: hidden;
}
.section-ttl.scroll-fade .jp span {
    display: block;
    transform: translateY(1.5em);
    opacity: 0;
    transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
}
.section-ttl.scroll-fade.show .jp span {
    transform: translateY(0);
    opacity: 1;
}
.news-container .ttl-area .link-btn{
    margin-top: 8rem;
}
.news-container .list-area{
    flex: 1;
}
.news-container .list-area > ul li + li{
    margin-top: 3.2rem;
}
.news-container .list-area > ul li a{
    display: block;
    padding: 0 0 3.2rem;
    border-bottom: solid 1px #e0e0e0;
}
.news-container .list-area > ul li.note,
.article .note{
    font-size: 1.6rem;
    letter-spacing: 0.1em;
}
.news-container .list-area li a .date{
    font-family: 'EBGaramond', serif;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    color: #918770;
}
.news-container .list-area li a .txt{
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    margin-top: 1.6rem;
    padding-right: 4.8rem;
    transition: color 0.3s ease;
}
.news-container .list-area .link-btn{
    display: none;
}
@media (min-width: 1025px){
    .news-container .list-area li a:hover .txt{
        color: #c99a06;
    }
}
.news-container .link-arrow .link-arrow-item {
    right: 0;
    bottom: 0.8rem;
}
@media (max-width: 767px){
    .news-container{
        padding-top: 8rem;
        padding-bottom: 0;
    }
    .news-container .news-container-box {
        display: block;
    }
    .news-container .section-ttl .en {
        font-size: 4rem;
    }
    .news-container .ttl-area{
        width: 100%;
        padding-right: 0;
    }
    .news-container .ttl-area .link-btn{
        display: none;
    }
    .news-container .news-container-inner {
        padding: 0 8%;
        padding-left: 8%;
    }
    .news-container .news-container-inner + .news-container-inner {
        padding-left: 8%;
        padding-right: 8%;
        margin-top: 10rem;
    }
    .news-container .news-container-inner .bg {
        display: none;
    }
    .news-container .news-container-inner + .news-container-inner .bg {
        display: block;
        width: calc(100% + 8vw);
        padding-top: 109.525%;
        position: relative;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        margin-top: 10rem;
        border-radius: 0.8rem 0 0 0;
    }
    .news-container .list-area{
        margin-top: 4.8rem;
    }
    .news-container .list-area li a .txt {
        padding-right: 3.8rem;
    }
    .news-container .list-area .link-btn{
        display: block;
        width: 26rem;
        margin-top: 4rem;
        margin-left: auto;
    }
}


/* -- news-list-container
-------------------------------------------------------------------------------- */
.news-container.news-list-container{
    padding: 0;
    overflow: visible;
}
.news-container.news-list-container .news-list-container-box{
    display: flex;
    align-items: flex-start;
    background: #f3f2ef;
}
.news-container.news-list-container .ttl-area{
    width: 30%;
    height: calc(100vh - var(--header-height));
    padding: 8rem 5%;
    position: sticky;
    top: var(--header-height);
    transition: top 0.5s ease, height 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
header.hide + .g-nav + main .news-container.news-list-container .ttl-area {
    top: var(--header-hide-height);
    height: 100vh;
}
.news-container.news-list-container .ttl-area .link-btn{
    margin-top: 0;
    max-width: 28rem;
}
.news-container.news-list-container .list-area{
    padding: 14rem 8% 16rem;
    background: #fff;
    min-height: 100vh;
    box-sizing: border-box;
}
.news-container.news-list-container .list-area .breadcrumbs{
    margin-bottom: 12rem;
}
.pager{
    margin-top: 8rem;
    display: flex;
    justify-content: center;
}
.pager .pager-btn{
    width: 4rem;
    height: 4rem;
    background: url(../img/ico_arrow_bg.svg) no-repeat center;
    background-size: 1.6rem;
    border-radius: 100%;
    transition: background 0.3s ease;
}
.pager .pager-btn.hide{
    opacity: 0;
    visibility: hidden;
}
.pager .pager-btn.prev{
    transform: scale(-1,1);
}
@media (min-width: 1025px){
    .pager .pager-btn:hover{
        background-color: #f3f2ef;
    }
}
.pager ul{
    display: flex;
    justify-content: center;
    padding: 0 0.8rem;
}
.pager ul li{
    font-size: 1.6rem;
    width: 4rem;
    height: 4rem;
}
.pager ul li + li{
    margin-left: 0.8rem;
}
.pager ul li p{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #043f50;
    color: #fff;
    font-weight: bold;
    border-radius: 100%;
}
.pager ul li a,
.pager ul li span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transition: background 0.3s ease;
}
.pager ul li span{
    transform: translateY(-0.25em);
}
@media (min-width: 1025px){
    .pager ul li a:hover{
        background: #f3f2ef;
    }
}
@media (max-width: 767px){
    .pager {
        margin-top: 6rem;
        margin-left: -3vw;
        margin-right: -3vw;
    }
    .pager ul{
        padding: 0 0.6rem;
    }
    .pager ul li + li{
        margin-left: 0.6rem;
    }
}


/* -- news-details-container
-------------------------------------------------------------------------------- */
.news-details-container{
    padding-top: 16rem;
    padding-bottom: 0;
}
.news-container.news-details-container .ttl-area{
    width: 100%;
    padding-left: 8%;
    padding-right: 8%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.news-container.news-details-container .section-ttl .en {
    font-size: 3.2rem;
}
.news-details-container .article-area{
    margin-top: 4rem;
    padding: 12rem 8% 16rem;
    background: #f3f2ef;
}
.news-details-container .article-area .article-area-inner{
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}
.news-details-container .article-ttl{
    padding-bottom: 8rem;
    position: relative;
}
.news-details-container .article-ttl::before,
.news-details-container .article-ttl::after{
    content: "";
    display: block;
    width: 4rem;
    height: 0.4rem;
    background: #545756;
    position: absolute;
    bottom: 0;
    left: 0;
}
.news-details-container .article-ttl::after{
    width: 2rem;
    background: #bbb086;
}
.news-details-container .article-ttl .date{
    font-family: 'EBGaramond', serif;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    color: #918770;
    margin-bottom: 2rem;
}
.news-details-container .article-ttl .txt{
    font-size: 3.2rem;
    font-weight: normal;
    letter-spacing: 0.15em;
}
.news-details-container .article{
    margin-top: 6rem;
}
.news-details-container .article .main-ttl:first-child{
    padding-top: 0;
}
.news-details-container .article .main-ttl:first-child::before,
.news-details-container .article .main-ttl:first-child::after{
    display: none;
}
.news-details-container .link-btn-wrap,
.details-container .link-btn-wrap{
    display: flex;
    justify-content: center;
    margin-top: 12rem;
}
.news-details-container .link-btn,
.details-container .link-btn{
    width: 28rem;
}
@media (max-width: 767px){
    .news-details-container {
        padding-top: 12rem;
    }
    .news-container.news-details-container .ttl-area{
        display: block;
        padding-left: 5%;
        padding-right: 5%;
    }
    .news-container.news-details-container .section-ttl {
        display: none;
    }
    .news-container.news-details-container .section-ttl .en {
        font-size: 2.4rem;
    }
    .news-details-container .article-area {
        margin-top: 2rem;
        padding: 4.8rem 5% 10rem;
    }
    .news-details-container .article {
        margin-top: 4rem;
    }
    .news-details-container .article-ttl {
        padding-bottom: 4.8rem;
    }
    .news-details-container .article-ttl .date {
        font-size: 1.6rem;
        margin-bottom: 1.6rem;
    }
    .news-details-container .article-ttl .txt{
        font-size: 2.8rem;
    }
    .news-details-container .link-btn-wrap,
    .details-container .link-btn-wrap    {
        margin-top: 6rem;
    }
}


/* -- main-container
-------------------------------------------------------------------------------- */
.main-container{
    background: #f3f2ef;
    padding: 12rem 0 16rem;
}
.main-container .section-ttl{
    text-align: center;
}
.main-container .search-nav-wrap{
    padding: 2.8rem 0;
    height: calc(4.4rem + 4rem);
}
.main-container .search-nav-inner{
}
.main-container .search-nav-inner .search-nav-box{
    width: 100%;
    background: rgba(243, 242, 239, 0.9);
    backdrop-filter: blur(10px);
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease, top 0.5s ease;
}
.main-container .search-nav-inner.fix .search-nav-box{
    position: fixed;
    top: 10rem;
    left: 0;
    z-index: 1;
}
.main-container .search-nav-inner.fix.min .search-nav-box{
    top: 0;
}
.main-container .search-nav-inner.fix.hide .search-nav-box{
    transform: translateY(-100%);
}
.main-container .search-nav-wrap .ttl{
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    font-weight: bold;
    margin-right: 1.6rem;
    color: #666;
}
.main-container .search-nav{
    display: flex;
}
.main-container .search-nav li{
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    border: solid 1px rgba(0,0,0,0.1);
    padding: 1.2rem 2.4rem;
    border-radius: 3.2rem;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    transition: 0.2s ease;
}
@media (min-width: 1025px){
    .main-container .search-nav li:hover{
        border-color: #043f50;
        color: #043f50;
    }
}
.main-container .search-nav li.active{
    font-weight: bold;
    color: #fff;
    background: #043f50;
    border-color: #043f50;
    cursor: default;
}
.main-container .search-nav li + li{
    margin-left: 0.8rem;
}
.main-container .main-container-inner{
    padding: 0 0.4rem;
}
.main-container .container-box-wrap{
    display: flex;
    flex-wrap: wrap;
    margin: -0.4rem -0.2rem 0;
}
.main-container .container-box-wrap:not(.active){
    display: none;
}
.main-container .container-box{
    width: calc(100% / 3);
    margin-top: 0.4rem;
    padding: 0 0.2rem;
    box-sizing: border-box;
    transform: translateY(2rem);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.main-container .container-box-wrap.show .container-box{
    transform: translateY(0);
    opacity: 1;
}
.main-container .container-box-wrap.hide .container-box{
    transform: translateY(-2rem);
    opacity: 0;
}
.main-container .container-box:nth-child(2){
    transition-delay: 0.05s;
}
.main-container .container-box:nth-child(3){
    transition-delay: 0.1s;
}
.main-container .container-box:nth-child(4){
    transition-delay: 0.15s;
}
.main-container .container-box:nth-child(5){
    transition-delay: 0.2s;
}
.main-container .container-box:nth-child(6){
    transition-delay: 0.25s;
}
.main-container .container-box-inner-wrap{
    height: 100%;
    background: #fff;
    border-radius: 0.8rem;
    overflow: hidden;
    position: relative;
    transform: translateY(2rem);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.main-container .main-container-inner.show .container-box-inner-wrap{
    transform: translateY(0);
    opacity: 1;
}
.main-container .container-box:nth-child(2) .container-box-inner-wrap{
    transition-delay: 0.1s;
}
.main-container .container-box:nth-child(3) .container-box-inner-wrap{
    transition-delay: 0.2s;
}
.main-container .container-box:nth-child(4) .container-box-inner-wrap{
    transition-delay: 0.3s;
}
.main-container .container-box:nth-child(5) .container-box-inner-wrap{
    transition-delay: 0.4s;
}
.main-container .container-box:nth-child(6) .container-box-inner-wrap{
    transition-delay: 0.5s;
}
.main-container .container-box .img{
    display: block;
    width: 100%;
    height: 15vw;
    overflow: hidden;
}
.main-container .container-box .img span{
    display: block;
    height: 100%;
}
.main-container .main-container-inner.scroll-fade .container-box .img span{
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 1s ease;
}
.main-container .main-container-inner.scroll-fade.show .container-box .img span{
    transform: scale(1);
    opacity: 1;
}
.main-container .container-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-container .main-container-inner.scroll-fade .container-box img{
    transform: scale(1.111111);
    filter: blur(10px);
    transition: transform 1s ease, filter 1s ease;
}
.main-container .main-container-inner.scroll-fade.show .container-box img{
    transform: scale(1);
    filter: blur(0);
}
.main-container .container-box:nth-child(2) .container-box img,
.main-container .container-box:nth-child(2) .container-box img span{
    transition-delay: 0.1s;
}
.main-container .container-box:nth-child(3) .container-box img,
.main-container .container-box:nth-child(3) .container-box img span{
    transition-delay: 0.2s;
}
.main-container .container-box:nth-child(4) .container-box img,
.main-container .container-box:nth-child(4) .container-box img span{
    transition-delay: 0.3s;
}
.main-container .container-box:nth-child(5) .container-box img,
.main-container .container-box:nth-child(5) .container-box img span{
    transition-delay: 0.4s;
}
.main-container .container-box:nth-child(6) .container-box img,
.main-container .container-box:nth-child(6) .container-box img span{
    transition-delay: 0.5s;
}
.main-container .container-box-inner{
    padding: 3.2rem 4rem 4.8rem;
}
.main-container .container-box .ttl{
    display: block;
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 0.2em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-container .container-box .ttl .ico{
    width: 8rem;
    height: 8rem;
    border: solid 1px #e0e0e0;
    background: url(../img/ico_cintents_1.svg) no-repeat center;
    background-size: cover;
    border-radius: 100%;
}
.main-container .container-box.cat-2 .ttl .ico{
    background-image: url(../img/ico_cintents_2.svg);
}
.main-container .container-box.cat-3 .ttl .ico{
    background-image: url(../img/ico_cintents_3.svg);
}
.main-container .container-box.cat-4 .ttl .ico{
    background-image: url(../img/ico_cintents_4.svg);
}
.main-container .container-box.cat-5 .ttl .ico{
    background-image: url(../img/ico_cintents_5.svg);
}
.main-container .container-box.cat-6 .ttl .ico{
    background-image: url(../img/ico_cintents_6.svg);
}
.main-container .container-box .nav{
    display: block;
    margin-top: 2rem;
    border-top: solid 1px #e0e0e0;
    padding-top: 2.4rem;
}
.main-container .container-box .nav li{
}
.main-container .container-box .nav li + li{
    margin-top: 1.6rem;
}
.main-container .container-box .nav li a{
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    padding-right: 4.8rem;
    position: relative;
    transition: color 0.3s ease;
}
@media (min-width: 1025px){
    .main-container .container-box .nav li a:hover{
        color: #c99a06;
    }
}
@media (max-width: 1024px){
    .main-container .container-box{
        width: 50%;
    }
    .main-container .container-box .img{
        height: 20rem;
    }
}
@media (max-width: 767px){
    .main-container{
        padding: 8rem 0 10rem;
    }
    .main-container .search-nav-wrap .ttl {
        display: none;
    }
    .main-container .main-container-inner {
        padding: 0 0.8rem;
    }
    .main-container .container-box-wrap {
        margin: -0.8rem -0.4rem 0;
    }
    .main-container .container-box-wrap {
        display: block;
    }
    .main-container .container-box{
        width: 100%;
        margin-top: 0.8rem;
        padding: 0 0.4rem;
    }
    .main-container .container-box-inner{
        padding: 2.4rem 3.2rem 4rem;
    }
    .main-container .container-box .ttl .ico{
        width: 7rem;
        height: 7rem;
    }
    .news-container.news-list-container .news-list-container-box{
        display: block;
    }
    .news-container.news-list-container .ttl-area {
        width: 100%;
        height: auto;
        padding: calc(8rem + 6rem) 8% 4rem;
        position: relative;
        top: 0;
        display: block;
    }
    header.hide + .g-nav + main .news-container.news-list-container .ttl-area{
        top: 0;
        height: auto;
    }
    .news-container.news-list-container .list-area{
        margin-top: 0;
        min-height: auto;
        padding: 2.4rem 8% 8rem;
    }
    .news-container.news-list-container .list-area .breadcrumbs {
        margin-bottom: 4rem;
    }
}


/* -- details-container
-------------------------------------------------------------------------------- */
.details-container{
}
.details-container .details-container-inner{
}
.details-container .head{
    height: 40rem;
    background: #545756;
    padding: 10rem 8% 0;
    position: relative;
    overflow: hidden;
}
.details-container .head::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/img_contents_1.jpg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    filter: blur(5px);
    transform: scale(1.1);
}
.curriculum .details-container .head::before{
    background-image: url(../img/img_contents_2.jpg);
}
.exam .details-container .head::before{
    background-image: url(../img/img_contents_3.jpg);
}
.career .details-container .head::before{
    background-image: url(../img/img_contents_4.jpg);
}
.international .details-container .head::before{
    background-image: url(../img/img_contents_5.jpg);
}
.others .details-container .head::before{
    background-image: url(../img/img_contents_6.jpg);
}
.details-container .head .ttl-area{
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 10rem;
    position: relative;
}
.details-container .head .ttl-area .section-ttl span{
    font-size: 3.2rem;
    letter-spacing: 0.2em;
    font-weight: normal;
    color: #fff;
}
.details-container .head .breadcrumbs{
    position: absolute;
    right: 0;
    bottom: 10rem;
    margin-bottom: 4rem;
}
.details-container .breadcrumbs ul{
}
.details-container .breadcrumbs li{
    color: #fff;
}
@media (min-width: 1025px){
    .details-container .breadcrumbs li a:hover {
        color: #fff;
    }
}
.details-container .breadcrumbs li:first-child a::before{
    background-image: url(../img/ico_home_wh.svg);
    opacity: 0.6;
}
.details-container .breadcrumbs li + li::before{
    border-top-color: rgba(255,255,255,0.3);
}
.details-container .breadcrumbs li p{
    color: rgba(255,255,255,0.7);
}
.details-container .body{
    display: flex;
    flex-direction: row-reverse;
    margin-top: -10rem;
    position: relative;
}
.details-container .body .side-area{
    width: 25%;
    min-width: 32rem;
    margin-top: 10rem;
    background: #f3f2ef;
}
.details-container .body .side-area .side-area-inner{
    padding: 6rem calc(3% * 4) 8rem;
    position: sticky;
    top: var(--header-height);
    transition: top 0.5s ease;
}
header.hide + .g-nav + main .details-container .body .side-area .side-area-inner{
    top: var(--header-hide-height);
}
.details-container .body .side-area .side-ttl{
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    line-height: 1.25;
}
.details-container .body .side-area .side-ttl::after{
    content: "";
    display: block;
    width: 0.8rem;
    border-top: solid 1px;
    margin: 2.4rem 0.1rem 3.2rem;
}
.details-container .body .side-area .nav li + li{
    margin-top: 1.6rem;
}
.details-container .body .side-area .nav li a{
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    padding-right: 4.2rem;
    transition: color 0.3s ease;
}
@media (min-width: 1025px){
    .details-container .body .side-area .nav li a:hover{
        color: #c99a06
    }
}
.details-container .body .side-area .nav li a.active{
    color: #c99a06
}
.details-container .body .side-area .nav li a .link-arrow-item{
    width: 3rem;
    height: 3rem;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.details-container .body .side-area .nav li a:not(:hover) .link-arrow-item::before{
    width: 0.6rem;
    height: 0.6rem;
}
.details-container .body .side-area .nav li a .link-arrow-item::after{
    width: 1.2rem;
    height: 0.9rem;
}
.nav-min{
    margin-top: 1.2rem;
    margin-bottom: 2rem;
    padding-left: 0.2rem!important;
}
.g-nav .g-nav-box ul li:last-child .nav-min{
    margin-bottom: 0;
}
.nav-min li{
    padding-left: 2rem;
    position: relative;
}
.nav-min li::before{
    content: "";
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    background: url(../img/ico_nav.svg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.nav-min li + li{
    margin-top: 0.8rem!important;
}
.nav-min li a{
    font-size: 1.2rem!important;
    display: inline;
    padding-right: 0!important;
}
.details-container .body .main-area{
    width: 75%;
    flex: 1;
    background: #fff;
    overflow: hidden;
}
.details-container .body .main-area .main-area-inner{
    padding: 12rem 8vw 16rem;
}
.details-container .article .img.wide span {
    border-radius: 0;
}
.others .details-container .body .main-area .main-area-inner{
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px){
    .nav-min li + li{
        margin-top: 1.2rem!important;
    }
    .nav-min li a{
        font-size: 1.4rem!important;
    }
    .details-container .details-container-inner{
        background: #f3f2ef;
    }
    .details-container .head {
        height: 32rem;
        padding: 8rem 8% 0;
    }
    .details-container .head .ttl-area .section-ttl span {
        font-size: 2.8rem;
    }
    .details-container .head .breadcrumbs{
        margin-bottom: 2rem;
    }
    .details-container .body{
        display: block;
    }
    .details-container .body .main-area{
        width: 97%;
        margin-left: auto;
    }
    .details-container .body .main-area .main-area-inner {
        padding: 6rem 8vw 8rem;
    }
    .details-container .body .side-area{
        width: 100%;
        margin-top: 0;
    }
    .details-container .body .side-area .side-area-inner{
        position: static;
        padding: 6rem 8%;
    }
    .details-container .article .img.wide span {
        width: calc(100% + 16vw);
        padding-top: calc((100% + 16vw) * 0.525);
        margin-left: -8vw;
    }
}


/* -- article
-------------------------------------------------------------------------------- */
.article .main-ttl{
    font-size: 3.2rem;
    font-weight: normal;
    letter-spacing: 0.15em;
    margin-bottom: 6rem;
    position: relative;
    padding-top: 4rem;
    margin-top: 12rem;
}
.article .main-ttl:first-child{
    margin-top: 0;
}
.article .main-ttl::before,
.article .main-ttl::after{
    content: "";
    display: block;
    width: 4rem;
    height: 0.4rem;
    background: #545756;
    position: absolute;
    top: 0;
    left: 0;
}
.article .main-ttl::after{
    width: 2rem;
    background: #bbb086;
    left: 0;
}
.article .ttl{
    font-size: 2.4rem;
    letter-spacing: 0.15em;
    font-weight: normal;
    margin-top: 10rem;
    margin-bottom: 4.8rem;
    border-top: solid 0.4rem #bbb086;
    padding-top: 2.4rem;
}
.article .sub-ttl{
    font-size: 2rem;
    letter-spacing: 0.15em;
    font-weight: normal;
    margin-top: 6rem;
    margin-bottom: 2.4rem;
    padding-left: 3.2rem;
    position: relative;
}
.article .sub-ttl::before{
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    box-sizing: border-box;
    border: solid 0.6rem #c99a06;
    position: absolute;
    top: 0.2em;
    left: 0;
}
.article .min-ttl{
    font-size: 1.6rem;
    color: #545756;
    line-height: 1.5;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 6rem;
    margin-bottom: 2.4rem;
}
.article .lead{
    margin-top: 6rem;
}
.article .lead p{
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    line-height: 2;
}
.article .lead.min{
    margin-top: 3.2rem;
}
.article .lead.min p{
    font-size: 1.2rem;
    line-height: 1.75;
    color: #7c7c7c;
}
.article .lead p + p{
    margin-top: 2em;
}
.article .img,
.article .movie{
    width: 100%;
    margin: 8rem auto;
}
.article .img.min {
    width: 50%;
}
.article .img span {
    display: block;
    border-radius: 0.8rem;
    overflow: hidden;
    position: relative;
}
.article .img img {
    width: 100%;
}
.article .img .caption {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: #7c7c7c;
    margin-top: 2rem;
}
.article .img.wide span {
    width: calc(100% + 16vw);
    padding-top: calc((100% + 16vw) * 0.525);
    margin-left: -8vw;
    position: relative;
}
.article .img.wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.article .img-flex{
    width: calc(100% + 2.4rem);
    margin: 8rem -1.2rem;
    display: flex;
    justify-content: space-between;
}
.article .img-flex .img{
    width: 50%;
    margin: 0;
    padding: 0 1.2rem;
    box-sizing: border-box;
}
.article .movie{
    max-width: 80rem;
}
.article .movie .movie-inner{
    padding-top: 56.25%;
    border-radius: 0.8rem;
    overflow: hidden;
    position: relative;
}
.article .movie iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.article .links{
    display: flex;
    flex-wrap: wrap;
    margin: calc(6rem - 2rem) -1rem 0;
}
.article .links p{
    width: 50%;
    padding: 2rem 1rem 0;
    box-sizing: border-box;
}
.article .links a{
    display: block;
    border-radius: 0.8rem;
    border: solid 2px rgba(0,0,0,0.08);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 2.4rem 5.4rem 2.4rem 2.8rem;
    transition: color 0.3s ease, border 0.3s ease;
}
.article .links a + a{
    margin-top: 1.6rem;
}
.article .links a .link-arrow-item{
    bottom: 1.2rem;
    right: 1.2rem;
}
.article .links a .img{
    display: block;
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
    background: #f3f2ef;
    overflow: hidden;
    margin: 0;
    position: relative;
}
.article .links a .img::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/ico_blank.svg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 1s ease;
}
.article .links a .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
    position: relative;
    z-index: 1;
}
@media (min-width: 1025px){
    .article .links a:hover{
        color: #c99a06;
        border-color: #c99a06;
    }
    .article .links a:hover .img img{
        transform: scale(1.15);
    }
    .article .links a:hover .img::before{
        transform: translate(-50%, -50%) scale(1.15);
    }
}
.article .links a .txt{
    flex: 1;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    padding-left: 2.8rem;
}
.article .link-list{
    margin-top: 6rem;
}
.article .link-list ul{
    margin-top: -2.4rem;
}
.article .link-list li{
    border-bottom: solid 1px rgba(0,0,0,0.15);
}
.article .link-list li a{
    display: block;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    padding: 2.4rem 6rem 2.4rem 0;
    transition: color 0.3s ease;
}
@media (min-width: 1025px){
    .article .link-list li a:hover{
        color: #c99a06;
    }
}
.article .link-list li a .link-arrow-item{
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}
.article .data-list{
    margin-top: 6rem;
}
.article .data-list dl{
    display: flex;
    align-items: center;
    padding: 3.2rem 0;
    border-bottom: solid 1px rgba(0,0,0,0.15);
}
.article .data-list dl:first-child{
    border-top: solid 1px rgba(0,0,0,0.15);
}
.article .data-list dt,
.article .data-list dd{
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 1.75;
}
.article .data-list dt{
    width: 25%;
    padding-right: 4rem;
}
.article .data-list dd{
    flex: 1;
}
.article .data-list dd p + p{
    margin-top: 1em;
}
.article .list{
    margin-top: 4rem;
}
.article .list ul li{
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 1.75;
    padding-left: 1.5em;
    position: relative;
}
.article .list ul li::before{
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 100%;
    background: #bbb086;
    position: absolute;
    top: 0.65em;
    left: 0.2em;
}
.article .list ul li + li{
    margin-top: 1.6rem;
}
.article .table{
    margin-top: 6rem;
}
.article .table.scroll{
    position: relative;
}
.article .table.scroll::before,
.article .table.scroll::after{
    content: "";
    display: block;
    width: 1rem;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: 0.15s ease;
}
.article .table.scroll::before{
    background: linear-gradient(-90deg, transparent, rgba(0,0,0,0.1));
}
.article .table.scroll::after{
    left: auto;
    right: 0;
    opacity: 1;
    visibility: visible;
}
.article .table.scroll.left-shadow::before{
    opacity: 1;
    visibility: visible;
}
.article .table.scroll.right-shadow::after{
    opacity: 0;
    visibility: hidden;
}
.article .table .table-inner-wrap{
    overflow: hidden;
}
.article .table.scroll .table-inner-wrap{
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.article .table.scroll .table-inner-wrap::-webkit-scrollbar{
    display: none;
}
.article .table .scroll-btn{
    display: block;
    width: 4rem;
    height: 4rem;
    background: #bbb086;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    z-index: 1;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    transition: background 0.3s ease, opacity 0.3s ease;
}
.article .table:not(.scroll) .scroll-btn{
    display: none;
}
.article .table .scroll-btn.left{
    left: -4rem;
    transform: translate(-2rem, -50%) scale(-1,1);
    opacity: 0;
    cursor: default;
}
.article .table.left-shadow .scroll-btn.left{
    opacity: 1;
    cursor: pointer;
}
.article .table .scroll-btn.right{
    right: -4rem;
    transform: translate(2rem, -50%);
}
.article .table.right-shadow .scroll-btn.right{
    opacity: 0;
    cursor: default;
}
@media (min-width: 1025px){
    .article .table .scroll-btn:hover{
        background: #c99a06;
    }
}
.article .table .scroll-btn::before{
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.2rem;
    background: url(../img/ico_arrow.svg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.article .table .table-inner{
    width: 300%;
    height: auto;
}
.article .table.size-comp .table-inner{
    width: 100%;
}
.article .table table{
    border-collapse: collapse;
    mix-blend-mode: multiply;
}
.article .table.size-comp table{
    width: 100%;
}
.article .table th,
.article .table td{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    padding: 1.2rem 1.6rem;
    border: solid 1px #e0e0e0;
}
.article .table th{
    text-align: center;
    background: rgba(187, 176, 134, 0.15);
}
.article .table td{
    padding: 1.6rem 1.6rem;
}
.article .table.min th,
.article .table.min td{
    font-size: 1.2rem;
    padding: 1.2rem 1.2rem;
}
.article .table th,
.article .table td{
    max-width: 12em;
}
.article .table .ta-c{
    text-align: center;
}
.article .faq{
    margin-top: 6rem;
}
.article .faq dl{
    border-bottom: solid 1px rgba(0,0,0,0.1);
}
.article .faq dl dt{
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    padding: 3.2rem 0;
    padding-right: 6rem;
    padding-left: 4.8rem;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    transition: color 0.3s ease;
}
.article .faq dl:first-child dt{
    border-top: solid 1px rgba(0,0,0,0.1);
}
@media (min-width: 1025px){
    .article .faq dl dt:hover{
        color: #c99a06;
    }
}
.article .faq dl dt::before{
    content: "Q";
    width: 4.8rem;
    padding-left: 1.2rem;
    box-sizing: border-box;
    font-size: 2rem;
    font-weight: bold;
    color: #c99a06;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-top: -1px;
}
.article .faq dl dt span{
    display: block;
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.article .faq dl dt span::before,
.article .faq dl dt span::after{
    content: "";
    display: block;
    width: 1.6rem;
    border-top: solid 2px #545756;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: border 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.article .faq dl dt span::after{
    transform: translate(-50%,-50%) rotate(90deg);
}
@media (min-width: 1025px){
    .article .faq dl dt:hover span::before,
    .article .faq dl dt:hover span::after{
        border-top-color: #c99a06;
        transform: translate(-50%,-50%) rotate(90deg);
    }
    .article .faq dl dt:hover span::after{
        transform: translate(-50%,-50%) rotate(180deg);
    }
}
.article .faq dl.active dt span::before,
.article .faq dl.active dt span::after{
    transform: translate(-50%,-50%) rotate(180deg);
}
.article .faq dl.active dt span::after{
    transform: translate(-50%,-50%) rotate(180deg);
    opacity: 0;
}
.article .faq dl dd{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 2;
    padding-bottom: 3.2rem;
    padding-left: 4.8rem;
    display: none;
}
.article .faq dl dd span{
    opacity: 0;
    transition: 0.3s ease;
}
.article .faq dl dd.active span{
    opacity: 1;
}
.article .html{
    margin-top: 6rem;
}
.article .lead a,
.article .list a,
.article .table a,
.article .faq a,
.article .data-list a{
    color: #918770;
    transition: color 0.3s ease;
}
.article .lead a::after,
.article .list a::after,
.article .table a::after,
.article .faq a::after,
.article .data-list a::after{
    background-image: url(../img/ico_ex_link_col_2.svg);
}
@media (min-width: 1025px){
    .article .lead a:hover,
    .article .list a:hover,
    .article .table a:hover,
    .article .faq a:hover,
    .article .data-list a:hover{
        color: #c99a06;
    }
}
@media (max-width: 1024px){
    .article .links {
        display: block;
        margin: calc(4rem - 1.6rem) 0 0;
    }
    .article .links p {
        width: 100%;
        padding: 1.6rem 0 0;
    }
}
@media (max-width: 767px){
    .article .main-ttl {
        font-size: 2.6rem;
        margin-bottom: 4.8rem;
        margin-top: 8rem;
        padding-top: 3.2rem;
    }
    .article .ttl {
        font-size: 2.2rem;
        margin-top: 6rem;
        margin-bottom: 3.2rem;
        padding-top: 1.6rem;
    }
    .article .sub-ttl {
        font-size: 1.8rem;
        padding-left: 2.8rem;
        margin-top: 4.8rem;
        margin-bottom: 1.6rem;
    }
    .article .sub-ttl::before{
        width: 1.8rem;
        height: 1.8rem;
        border-width: 0.5rem;
    }
    .article .min-ttl{
        margin-top: 4.8rem;
        margin-bottom: 1.6rem;
    }
    .article .lead {
        margin-top: 4.8rem;
    }
    .article .lead.min {
        margin-top: 2.4rem;
    }
    .article .img,
    .article .movie {
        margin-top: 4.8rem;
        margin-bottom: 4.8rem;
    }
    .article .img.min {
        width: 75%;
    }
    .article .img.wide span {
        width: calc(100% + 10vw);
        padding-top: calc((100% + 10vw) * 0.525);
        margin-left: -5vw;
        border-radius: 0;
    }
    .article .img-flex {
        width: calc(100% + 1.6rem);
        margin-top: 6rem;
        margin-bottom: 6rem;
        margin-left: -0.8rem;
        margin-right: -0.8rem;
    }
    .article .img-flex .img{
        padding: 0 0.8rem;
    }
    .article .img .caption {
        margin-top: 1.6rem;
    }
    .article .list {
        margin-top: 3.2rem;
    }
    .article .data-list {
        margin-top: 4.8rem;
    }
    .article .data-list dl {
        padding: 2.4rem 0;
    }
    .article .data-list dt,
    .article .data-list dd{
        font-size: 1.4rem;
    }
    .article .data-list dt {
        padding-right: 3.2rem;
    }
    .article .links a {
        padding: 2rem 5rem 2rem 2rem;
    }
    .article .links a .txt {
        padding-left: 2.4rem;
    }
    .article .link-list {
        margin-top: 4.8rem;
    }
    .article .link-list li a {
        padding: 2rem 5rem 2rem 0;
    }
    .article .table {
        margin-top: 4.8rem;
    }
    .article .table .scroll-btn{
        display: none;
        
    }
    .article .table th,
    .article .table td {
        font-size: 1.4rem;
        max-width: 16em;
    }
    .article .faq{
        margin-top: 4.8rem;
    }
    .article .faq dl dt {
        font-size: 1.5rem;
        padding-top: 2.4rem;
        padding-bottom: 2.4rem;
    }
    .article .faq dl dd {
        padding-bottom: 2.4rem;
    }
    .article .html{
        margin-top: 4.8rem;
    }
}


/* -- article-margin
-------------------------------------------------------------------------------- */
.article .article-ttl-item:first-child {
    margin-top: 0;
}
.article .main-ttl + .ttl,
.article .main-ttl + .min-ttl,
.article .main-ttl + .sub-ttl{
    margin-top: 0;
}
.article .article-ttl-item + .min-ttl{
    margin-top: 0;
}
.article .article-ttl-item + .lead{
    margin-top: 0;
}
.article .lead:first-child{
    margin-top: 0;
}
.article .img:first-child,
.article .movie:first-child {
    margin-top: 0!important;
}
.article .img:last-child,
.article .movie:last-child {
    margin-bottom: 0!important;
}
.article .links:first-child{
    margin-top: -2rem;
}
.article .article-ttl-item + .links{
    margin-top: -2rem;
}
.article .link-list:first-child{
    margin-top: 0;
}
.article .article-ttl-item + .link-list{
    margin-top: 4rem;
}
.article .data-list:first-child{
    margin-top: 0;
}
.article .article-ttl-item + .data-list{
    margin-top: 0;
}
.article .list:first-child{
    margin-top: 0;
}
.article .article-ttl-item+ .list{
    margin-top: 0;
}
.article .table:first-child{
    margin-top: 0;
}
.article .article-ttl-item + .table{
    margin-top: 0;
}
.article .faq:first-child{
    margin-top: 0;
}
.article .article-ttl-item + .faq{
    margin-top: 0;
}
.article .html:first-child{
    margin-top: 0;
}
.article .article-ttl-item + .html{
    margin-top: 0;
}
@media (max-width: 767px){
    .article .links:first-child{
        margin-top: -1.6rem;
    }
    .article .article-ttl-item + .link-list{
        margin-top: 3.2rem;
    }
}


/* -- legend
-------------------------------------------------------------------------------- */
.article .legend{
    display: flex;
    flex-wrap: wrap;
    margin: calc(-0.8rem + 2.4rem) -2.4rem 0;
}
.article .legend dl{
    width: calc(100% / 3);
    box-sizing: border-box;
    padding: 0.8rem 2.4rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.article .legend dl dt{
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    line-height: 1.25;
    display: flex;
    align-items: center;
}
.article .legend dl dt .mark{
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 2px;
    background: #4f7090;
    margin-right: 0.8rem;
    transform: translateY(-1px);
}
.article .legend dl:nth-child(2) dt .mark{
    background: #508db0;
}
.article .legend dl:nth-child(3) dt .mark{
    background: #62a0a5;
}
.article .legend dl:nth-child(4) dt .mark{
    background: #73a376;
}
.article .legend dl:nth-child(5) dt .mark{
    background: #a9bd6c;
}
.article .legend dl:nth-child(6) dt .mark{
    background: #bbb086;
}
.article .legend dl:nth-child(7) dt .mark{
    background: #dda160;
}
.article .legend dl:nth-child(8) dt .mark{
    background: #ce8a6e;
}
.article .legend dl:nth-child(9) dt .mark{
    background: #c48590;
}
.article .legend dl:nth-child(10) dt .mark{
    background: #a0799b;
}
.article .legend dl:nth-child(11) dt .mark{
    background: #727093;
}
.article .legend dl:nth-child(12) dt .mark{
    background: #717889;
}
.article .legend dl dt .txt{
    flex: 1;
}
.article .legend dl dd{
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    line-height: 1;
    padding-left: 1.6rem;
}
@media (max-width: 1024px){
    .article .legend dl{
        width: calc(100% / 2);
    }
}
@media (max-width: 767px){
    .article .legend{
        margin-top: calc(-0.8rem + 1.6rem);
    }
    .article .legend dl{
        width: calc(100% / 1);
    }
}


/* -- access-container
-------------------------------------------------------------------------------- */
.access-container{
    padding: 16rem 0;
}
.access-container .access-container-box{
}
.access-container .ttl-area{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 8%;
}
.access-container .section-ttl .en {
    font-size: 5rem;
}
.access-container .content-area .iframe{
    width: 100%;
    padding-top: 48rem;
    margin-top: 4rem;
    margin-bottom: 8rem;
    position: relative;
}
.access-container .content-area .iframe iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.access-container .content-area .article{
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 8%;
}
@media (max-width: 1024px){
    .access-container .content-area .iframe{
        padding-top: 48rem;
    }
}
@media (max-width: 767px){
    .access-container {
        padding-top: calc(8rem + 6rem);
        padding-bottom: 8rem;
    }
    .access-container .section-ttl .en {
        font-size: 4rem;
    }
    .access-container .content-area .iframe{
        padding-top: 36rem;
        margin-top: 2.4rem;
        margin-bottom: 4.8rem;
    }
}


/* -- footer
-------------------------------------------------------------------------------- */
footer{
    display: flex;
    flex-direction: row-reverse;
}
footer .content-area{
    color: #fff;
}
footer .content-area.area-1{
    flex: 1;
    background: #545756;
}
footer .content-area.area-2{
    width: 30%;
    background: #918770;
    position: relative;
}
footer .content-area.area-2::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/img_footer.jpg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.07;
}
footer .content-area .content-area-inner{
    padding: 8rem 5vw 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}
footer .ttl{
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 0.2em;
    line-height: 1.75;
    margin-bottom: 2rem;
}
footer .banner li + li{
    border-top: solid 1px rgba(255,255,255,0.15);
}
footer .banner li a{
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    padding: 2.4rem 6rem 2.4rem 0;
    transition: color 0.3s ease;
}
@media (min-width: 1025px){
    footer .banner li a:hover{
        color: #c99a06;
    }
}
footer .nav{
    display: flex;
    margin-top: 8rem;
}
footer .nav li + li{
    margin-left: 3.2rem;
}
footer .nav li a{
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    position: relative;
    transition: color 0.3s ease;
}
footer .contact{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 1.75;
}
footer .contact .name{
    font-size: 2rem;
    letter-spacing: 0.2em;
    font-weight: normal;
    line-height: 1.75;
    position: relative;
}
footer .contact .name::after{
    content: "";
    display: block;
    width: 0.8rem;
    border-top: solid 1px #fff;
    margin: 3.2rem 0.1rem 2rem;
}
footer .contact .address span{
    display: inline-block;
}
footer .contact p a{
    position: relative;
}
footer .contact p a::before,
footer .nav li a::before{
    content: "";
    display: block;
    width: 0;
    border-top: solid 1px;
    position: absolute;
    right: 0;
    bottom: -3px;
    transition: width 0.3s ease;
}
@media (min-width: 1025px){
    footer .nav li a:hover{
        color: #c99a06;
    }
    footer .contact p a:hover::before,
    footer .nav li a:hover::before{
        width: 100%;
        right: auto;
        left: 0;
    }
}
footer .copyright{
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}
@media (max-width: 1024px){
    footer .content-area.area-2{
        width: 35%;
    }
}
@media (max-width: 767px){
    footer {
        display: block;
    }
    footer .content-area .content-area-inner {
        padding: 6rem 8% 4rem;
    }
    footer .nav {
        display: block;
        margin-top: 6rem;
    }
    footer .nav li + li{
        margin-top: 1.2rem;
        margin-left: 0;
    }
    footer .banner li a{
        padding: 2rem 5rem 2rem 0;
    }
    footer .content-area.area-2 {
        width: 100%;
    }
    footer .content-area.area-2 .content-area-item + .content-area-item {
        margin-top: 6rem;
    }
}