@charset "utf-8";

/* #sakuraCanvas */
#sakuraCanvas{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* クリックを邪魔しない */
    z-index: 0;
}

/* topAnm_wrap */
.topWrap{
    background-image: url(../images/top/bg01.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
.topAnm_wrap{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translate(-50%,0%);
    max-width:1100px;
    width:60%;
    z-index:3;
}
.topAnm{
    opacity:0;
    transform:translatey(20px);
    animation:mainScaleDown 4s ease-in-out forwards;
    filter:
        drop-shadow(0 0 10px rgba(51, 38, 39, 0.75))
        drop-shadow(0 0 20px rgba(51, 38, 39, 0.5));
}
@keyframes mainScaleDown{
    0%{
        opacity:0;
        transform:translatey(20px);
    }
    100%{
        opacity:1;
        transform:translatey(0px);
    }
}
.top_eyeCatch{
    aspect-ratio: 1920/1080;
    width: 100%;
}
.top_eyeCatch_box{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.top_eyeCatch_slider{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
    z-index: 0;
}
.top_eyeCatch_slider.active{
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    transition: opacity 2s ease;
}
.top_eyeCatch_slider.slide01{
    background-image: url(../images/top0911/bg01.jpg);
    background-size: cover;
    background-position: center center;              
}
.top_eyeCatch_slider.slide01>.bgBox{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/top0911/moveBg.png);
    background-size: cover;
    background-position: left top; 
}
.top_eyeCatch_slider.slide01.active>.bgBox{
    background-position: left bottom; 
    animation: moveUp 7s ease-in-out forwards;
}
@keyframes moveUp{
    0%{
        background-position: left top; 
    }
    100%{
        background-position: left bottom; 
    }
} 
@keyframes topE_fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
} 
.top_eyeCatch_slider.slide02>.bgBox{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/top0911/bg02.jpg);
    background-size: cover;
    background-position: center center;                
}
.top_eyeCatch_slider.slide02.active>.bgBox{
    scale: 1.1;
    animation: scaleUp 7s ease-in-out forwards;
}
@keyframes scaleUp{
    0%{
        scale:1.1;
    }
    100%{
        scale:1.2;
    }
}
.top_eyeCatch_slider.slide02>.filterBox{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;                
}
.top_eyeCatch_slider.slide02.active>.filterBox{
    opacity: 1;
    backdrop-filter: blur(300px);
    -webkit-backdrop-filter: blur(300px); /* ← Safari 用 */
    animation: blurOut 6s ease-in-out forwards;
}
@keyframes blurOut{
    0%{
        opacity: 1;
        backdrop-filter: blur(300px);
        -webkit-backdrop-filter: blur(300px); /* ← Safari 用 */
    }
    100%{
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px); /* ← Safari 用 */
    }
}
.top_eyeCatch_slider.slide02>p{
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 2.25em;
    line-height: 2;
    letter-spacing: 0.25em;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);                
}
.top_eyeCatch_slider.slide02.active>p{
    opacity: 1;
    animation: topE_txt_fadeOut 2s ease-in-out forwards 4s;
}
@keyframes topE_txt_fadeOut{
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}             
.top_eyeCatch_slider.slide03>.bgBox{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/top0911/bg03.jpg);
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.top_eyeCatch_slider.slide03.active>.bgBox{
    background-position: left center;
    animation: bgMove01 7s linear forwards;
}
.top_eyeCatch_slider.slide03>p{
    font-size: 2.25em;
    line-height: 2;
    letter-spacing: 0.25em;
    color: #fff;
    position: absolute;
    top: 1em;
    right: 1em;
}
.top_eyeCatch_slider.slide03.active>p{
    opacity: 1;
    animation: topE_txt_fadeOut 2s ease-in-out forwards 4s;
}
@keyframes bgMove01{
    0% {
        background-position: left center;
    }
    100% {
        background-position: right center;
    }
} 
.top_eyeCatch_slider.slide04>.bgBox{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/top0911/bg04.jpg);
    background-size: auto 100%;
    background-repeat: no-repeat;                
}
.top_eyeCatch_slider.slide04.active>.bgBox{
    background-position: left center;
    animation: bgMove01 7s linear forwards;
}
.top_eyeCatch_slider.slide04>p{
    font-size: 2.25em;
    line-height: 2;
    letter-spacing: 0.25em;
    color: #fff;
    position: absolute;
    bottom: 1em;
    left: 1em;
}
.top_eyeCatch_slider.slide04.active>p{
    opacity: 1;
    animation: topE_txt_fadeOut 2s ease-in-out forwards 4s;
}
.top_eyeCatch_slider.slide05>.bgBox{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/top0911/bg05.jpg);
    background-size: cover;
    background-position: center center;                
}
.top_eyeCatch_slider.slide05.active>.bgBox{
    scale: 1.1;
    animation: scaleDown 3s ease-in-out forwards;
}            
@keyframes scaleDown{
    0%{
        scale:1.1;
    }
    100%{
        scale:1;
    }
}
.top_eyeCatch_slider.slide05>.topTxt01{
    position: absolute;
    top: 50px;
    left: 50px;
    max-width: 130px;
    width: 10%;                
}
.top_eyeCatch_slider.slide05.active>.topTxt01{
    opacity: 0;
    animation: topE_fadeIn 2s ease-in-out 3s forwards;
}
.top_eyeCatch_slider.slide05>.topTxt02{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;                
}
.top_eyeCatch_slider.slide05.active>.topTxt02{
    opacity: 0;
    transform: translateY(10px);
    animation: topE_fadeBottom 2s ease-in-out 3s forwards;
}
@keyframes topE_fadeBottom{
    0%{
        opacity: 0;
        transform: translateY(10px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
.under430{
    display:none;
}
@media (max-width:1500px){
    .top_eyeCatch_slider.slide02.active>p,
    .top_eyeCatch_slider.slide03.active>p,
    .top_eyeCatch_slider.slide04.active>p{
        font-size: 2em;
    }
}
@media (max-width:1200px){
    .top_eyeCatch_slider.slide02.active>p,
    .top_eyeCatch_slider.slide03.active>p,
    .top_eyeCatch_slider.slide04.active>p{
        font-size: 1.75em;
    }
}
@media (max-width:1024px){
    .top_eyeCatch_slider.slide03.active>p{
        top: auto;
        bottom:1em;
    }
    .top_eyeCatch_slider.slide05>.topTxt01{
        top: 80px;               
    }
}  
@media (max-width:768px){
    .topAnm_wrap{
        width:90%;                    
    }
    .top_eyeCatch{
        aspect-ratio: 1/1;
    }
    .top_eyeCatch_slider.slide01{
        background-image: url(../images/top0911/bg01_sp.jpg);            
    }
    .top_eyeCatch_slider.slide01>.bgBox{
        background-image: url(../images/top0911/moveBg_sp.png);
    }
    .top_eyeCatch_slider.slide02.active>.bgBox{
        background-image: url(../images/top0911/bg02_sp.jpg);
    }
    .top_eyeCatch_slider.slide05.active>.topTxt01{
        width: 13%;
    }
    .top_eyeCatch_slider.slide03.active>.bgBox{
        background-image: url(../images/top0911/bg03_sp.jpg);
    }
    .top_eyeCatch_slider.slide04.active>.bgBox{
        background-image: url(../images/top0911/bg04_sp.jpg);
    }
    .top_eyeCatch_slider.slide05.active>.bgBox{
        background-image: url(../images/top0911/bg05_sp.jpg);
    }
}
@media (max-width:500px){
    .top_eyeCatch_slider.slide02.active>p,
    .top_eyeCatch_slider.slide03.active>p,
    .top_eyeCatch_slider.slide04.active>p{
        font-size: 1.5em;
    }
}
@media (max-width:430px){
    .top_eyeCatch_slider.slide05>.topTxt01{
        top: 50px;
        left: 30px;               
    }
    .under430{
        display:block;
    }
}

/* appearPoint */
.appearPoint{
    background: linear-gradient(320deg, #b39855 0%, #fff9e6 20%,  #fff 50%, #fff9e6 80%, #b39855 100%);
    z-index: 2;
    padding: 30px 0;
}
.fadeSlide{
    opacity: 0;
    transform: translateX(0px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.fadeSlide.show{
    opacity: 1;
    transform: translateX(0px);
}
.appearPoint_inner{
    width: 1100px;
    margin: 0 auto;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out,transform 1s ease-out;
}
.appearPoint_inner.show{
    opacity: 1;
    transform: translateY(0);
}
.appearDeco{
    width: 100%;
    height: 10px;
    position: relative;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.appearDeco.show{
    opacity: 1;
}
.appearDeco span{
    content: '';
    position: absolute;
    width:0%;
    height: 1px;
    background-color: rgba(51, 38, 39, 1);
    left: 50%;
    transform: translate(-50%,0);
    transition:width 0.5s ease-out,left 0.5s ease-out;
}
.appearDeco span:first-of-type{
    top: 0;
}
.appearDeco span:nth-of-type(2){
    top: 5px;
}
.appearDeco span:last-of-type{
    top: 10px;
}
.appearDeco.show span{
    width: 100%;
    left: 0;
    transform: translate(0,0);
}
.appearNotice{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out,transform 1s ease-out;
}
.appearNotice.show{
    opacity: 1;
    transform: translateY(0px);
}
.appearNotice p{
    width: 1100px;
    margin: 0 auto;
    font-size: 0.75em;
    text-align: center;
    color: #727171;
}
.under1200,
.under500{
    display: none;
}
@media (max-width:1500px){
    .appearPoint_inner{
        width: 73.33%;
    }
    .appearNotice p{
        width: 90%;
    }
}
@media (max-width:1200px){
    .appearPoint_inner{
        width: 80%;
    }
    .under1200{
        display: block;
    }
}
@media (max-width:1000px){
    .appearPoint_inner{
        width: 90%;
    }
}
@media (max-width:768px){
    .appearPoint_inner{
        width: 500px;
    }
}
@media (max-width:600px){
    .appearPoint_inner{
        width: 83.33%;
    }
}
@media (max-width:500px){
    .appearPoint_inner{
        width: 90%;
    }
    .under500{
        display:block;
    }
}

/* appearPoint02 */
.appearPoint02{
    background: linear-gradient(320deg,rgba(51, 38, 39, 1) 0%, rgba(76, 57, 59, 1) 50%, rgba(51, 38, 39, 1) 100%);                
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    padding: 10px 0;
}
.appearPoint_inner02{
    width: 1320px;
    margin: 0 auto;
}
.appearPoint_inner02>ul{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}
.appearPoint_inner02>ul>li{
    font-size:1.25em;
    letter-spacing: 0.05em;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.appearPoint_inner02>ul>li>span{
    font-size: 1.5em;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(320deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
    background-clip:text;
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
}
.appearPoint_inner02>ul>li>span.small {
    font-size:0.75em;
}
.appearPoint_inner02>ul>li:first-of-type,
.appearPoint_inner02>ul>li:nth-of-type(2),
.appearPoint_inner02>ul>li:nth-of-type(3),
.appearPoint_inner02>ul>li:nth-of-type(4) {
    border-right: 1px solid;
    border-image:linear-gradient(320deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
    border-image-slice:1;
}
.under1000{
    display:none;
}
@media (max-width:1584px){
    .appearPoint_inner02{
        width: 90%;
    }
}
@media (max-width:1400px){
    .appearPoint_inner02>ul>li {
        padding: 20px;
    }
    .appearPoint_inner02>ul>li:nth-of-type(3){
        border-image:linear-gradient(320deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
        border-image-slice:1;
    }
}
@media (max-width:1200px){
    .appearPoint_inner02 {
        width: 90%;
    }
    .appearPoint_inner02>ul>li{
        font-size:1.15em;
        padding: 10px;
    }
}
@media (max-width:1000px){    
    .appearPoint_inner02>ul{
        flex-direction: column;
    }
    .appearPoint_inner02>ul>li{
        font-size: 1.25em;
        text-align: center;
        padding: 10px;       
    }
    .appearPoint_inner02>ul>li:nth-of-type(3){
        border-right:none;
        border-bottom: 1px solid;
    }
    .appearPoint_inner02>ul>li:first-of-type,
    .appearPoint_inner02>ul>li:nth-of-type(2),
    .appearPoint_inner02>ul>li:nth-of-type(4) {
        border-right: none;
        border-bottom: 1px solid;
        border-image:linear-gradient(320deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
        border-image-slice:1;
    }
    .appearPoint_inner02>ul>li>img{
        max-width:360px;
        width:80%;
        margin:0 auto;
    }
    .over1000{
        display:none;
    }
    .under1000{
        display:block;
    }
}
@media (max-width:768px){
    .appearPoint_inner02{
        width: 90%;
    }
}
@media (max-width:350px){
    .appearPoint_inner02{
        width: 95%;
    }
}

/* appearPoint03 */
.appearPoint03{
    background: linear-gradient(320deg,rgba(51, 38, 39, 1) 0%, rgba(76, 57, 59, 1) 50%, rgba(51, 38, 39, 1) 100%);            
    position: relative;
    padding:10px 0;
}
.appearPoint03:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-image: url(../images/colorSelect/eyeBg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    mix-blend-mode: multiply;
}
.appearPoint_inner03>ul{
    max-width:800px;
    width:60%;
    margin:0 auto;
    position:relative;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    margin-bottom:10px;
}
.appearPoint_inner03>ul>li{
    padding: 20px;
    box-sizing: border-box;
}
.appearPoint_inner03>ul>li:first-of-type{
    border-right: 1px solid #fff;
}
.appearPoint03 p.noticeTxt{
    position:relative;
    font-size:0.75em;
    color:#fff;
    text-align:center;
    margin-bottom:20px;
}
@media (max-width:1200px){
    .appearPoint_inner03>ul>li{
        padding: 10px;
    }
} 
@media (max-width:1000px){
    .appearPoint_inner03>ul{
        max-width:1000px;
        width:90%;
        flex-direction:column;
    }
    .appearPoint_inner03>ul>li{
        width:100%;
        text-align:center;
    }
    .appearPoint_inner03>ul>li>img{
        max-width:480px;
        width:90%;
        margin:0 auto;
    }
    .appearPoint_inner03>ul>li:first-of-type{
        border-right: none;
        border-bottom: 1px solid #fff;
    }
    .appearPoint03 p.noticeTxt{
        margin-bottom:10px;
    }
}
@media (max-width:500px){
    .appearPoint03 p.noticeTxt{
        width:90%;
        margin:0 auto;
        text-align:left;
        margin-bottom:10px;
    }
} 

/* mainTxt */
.mainTxt{
    padding: 80px 0;
}
.mainTxt_inner{
    width: 1100px;
    margin: 0 auto;
    margin-bottom:30px;
    text-align: center;
    position:relative;                
}
.mainTxt_inner p.em{
    width: 90px;
    margin: 0 auto;
    margin-bottom: 50px;                
}
.mainTxt_inner p.em.scroll_fadeIn{
    opacity: 0;
    transition: opacity 5s ease-out;
}
.mainTxt_inner p.em.scroll_fadeIn.show{
    opacity: 1;
}
.scroll_fadeIn{
    opacity: 0;
    transition: opacity 2s ease-out;
}
.scroll_fadeIn.show{
    opacity: 1;
}
.mainTxt_inner h3{
    margin-bottom: 50px;
}
.mainTxt>.mainTxt_inner>p:nth-of-type(1){
    margin-bottom:10px;               
}
.mainTxt>.requestBtn{
    margin-bottom:30px;
    position:relative;
}
.requestBtn p{
    width: 430px;
    margin: 0 auto;
    margin-top: 20px;
}
.requestBtn p a{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b46c62;
    font-size: 1.5em;
    color: #fff;
    transition: 0.5s all;
}
.requestBtn p a:hover,
.requestBtn p a:active{
    transition: 0.5s all;
    background-color: #873a30;
}
.achievementsWrap{
    max-width: 1100px;
    width:80%;
    margin: 0 auto;
    text-align: center;
    position:relative;
}
.achievementsWrap ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.achievementsWrap ul li{
    width: 31%;
}
.achievementsWrap ul li:first-child{
    margin-right: 3%;
}
@media (max-width:1500px){
    .mainTxt_inner{
        width: 73.33%;
    }
    .mainTxt_inner p.em{
        width: 8.18%;
    }
    .requestBtn p{
        width: 28.66%;
    }
}
@media (max-width:1200px){
    .mainTxt_inner{
        width: 80%;
    }
    .mainTxt_inner p.em{
        width: 9.37%;
    }
    .requestBtn p{
        width: 35.83%;
    }
}
@media (max-width:1000px){
    .mainTxt_inner{
        width: 90%;
    }
    .mainTxt_inner p.em{
        width: 10%;
    }
    .requestBtn p{
        width: 43%;
    }
}
@media (max-width:768px){
    .mainTxt_inner{
        width: 500px;
    }
    .mainTxt_inner p.em{
        width: 100%;
    }
    .mainTxt_inner h3{
        margin-bottom: 30px;
    }
    .requestBtn p{
        width: 400px;
    }
    .achievementsWrap{
        width: 90%;
    }
    .achievementsWrap ul li{
        width: 48%;
    }
    .achievementsWrap ul li:first-child{
        margin-right: 4%;
    }
}
@media (max-width:600px){
    .mainTxt_inner{
        width: 83.33%;
    }
    .requestBtn p{
        width: 66.66%;
    }
}
@media (max-width:500px){
    .mainTxt{
        padding: 50px 0;
    }
    .mainTxt_inner{
        width: 90%;
    }
    .requestBtn p{
        width: 70%;
    }
}

/* topContent_banner */
.topContent_banner{
    background-color: #564133;
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}
.topContent_banner:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-image: url(../images/colorSelect/eyeBg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    mix-blend-mode: multiply;
}
.topContent_bannerInner{
    max-width: 1000px;
    width: 80%;
    margin: 0 auto;
    position: relative;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.topBanner_content{
    width:48%;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;            
    margin-bottom: 20px;
}
.topBanner_content:nth-of-type(5),
.topBanner_content:nth-of-type(6){         
    margin-bottom: 0px;
}
.topBanner_content:nth-of-type(1){
    background-image:url(../images/top0919/banner06@2x.jpg);
}
.topBanner_content:nth-of-type(2){
    background-image:url(../images/top0919/banner01@2x.jpg);
}
.topBanner_content:nth-of-type(3){
    background-image:url(../images/top0919/banner02@2x.jpg);
}
.topBanner_content:nth-of-type(4){
    background-image:url(../images/top0919/banner03@2x.jpg);
}
.topBanner_content:nth-of-type(5){
    background-image:url(../images/top0919/banner04@2x.jpg);
}
.topBanner_content:nth-of-type(6){
    background-image:url(../images/top0919/banner05@2x.jpg);
}
.topBanner_content>a{  
    background-color:rgba(0,0,0,0.5);              
    display: block;
    position: relative;
    transition: 0.5s all;
}
.topBanner_content>a:hover,
.topBanner_content>a:active{
    opacity: 0.5;
    transition: 0.5s all;
}
.topBanner_contentRow{
    display: flex;
    align-items: center;
    text-align:left;
    aspect-ratio: 960 / 420;
}            
.topBanner_contentRow>.titleBox{
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
}
.topBanner_contentRow>.titleBox>h3{
    font-family: "EB Garamond", serif;
    font-size: 2em;
    font-weight: 400;
    color:#fff;
    margin-bottom: 10px;                
}
.topBanner_contentRow>.titleBox>p{
    font-size: 1em;
    color: #fff;
}
.topBanner_contentRow>.imgBox{
    width: 60%;
    position: relative;
}
.imgNotice{
    font-size: 0.75em;
    color:#fff;
    position: absolute;
    bottom: 0.5em;
    right:0.5em;
}
.csTxt{
    font-family: "EB Garamond", serif;
    position:absolute;
    bottom:0em;
    right:0.5em;
    font-size:3em;
    color:#fff;
}
.arrow{
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    right: 0;
    transform: translate(0%,-50%);
    background: #b39855;
}
.arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, #fff9e6 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pannellum_Outerwrap{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
}
.pannellum-wrap {
    position: relative;
    width: 100%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.pannellum-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.close-btn{
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor:pointer;
    background-color: transparent;
    border: none;
    transition: 0.5s all;
}
.close-btn:hover,
.close-btn:active{
    opacity: 0.5;
    transition: 0.5s all;
}
.openPanoramaBtn{
    cursor: pointer;
    display: block;
    width:100%;
    margin: 0 auto;
    font-family: "Marcellus", serif;
    font-size: 1.75em;
    letter-spacing: 0.1em;
    color: #fff;
    border: none;
    background-color:rgba(0,0,0,0.5);
}
.openPanoramaBtn:hover,
.openPanoramaBtn:active{
    opacity: 0.5;
    transition: 0.5s all;
}
@media (max-width:1024px){
    .topContent_bannerInner{
        width: 90%;
    }
    .topBanner_contentRow>.titleBox{
        padding: 20px;
    }
}
@media (max-width:768px){
    .topBanner_content{
        width:100%;
    }
    .topBanner_content:nth-of-type(5){         
        margin-bottom: 20px;
    }
    .topBanner_contentRow{
        aspect-ratio: 960 / 280;
    }
    .close-btn{
        font-size: 25px;
    }
}
@media (max-width:500px){
    .topContent_banner{
        padding: 50px 0;
    }
}

/* contentsRow */
.contentsRow{
    display: flex;
    flex-wrap: wrap;
    background-image: url(../images/top/bg02.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.contentsTxt,
.contentsVideo{
    width: 50%;
    height: auto;
}
.contentsVideo video{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
    top: 0;
    left: 0;
}
.contentsTxt a{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #727171;
    transition: 0.5s all;
    padding: 50px 0;
}
.contentsTxt a:hover,
.contentsTxt a:active{
    opacity: 0.5;
    transition: 0.5s all;
}
.contentsRow:nth-of-type(odd)>.contentsTxt>a{
    justify-content: flex-start;
}
.contentsRow:nth-of-type(even)>.contentsTxt>a{
    justify-content: flex-end;
}
.contentsTxt a .ttlBox{
    width: 100px;
    margin: 0 10%;                
}
.contentsTxt a .txtBox h4{
    font-size: 2em;
    font-weight: 400;
    margin-bottom: 20px;
}
.contentsTxt a .txtBox p{
    font-size: 1em;
    line-height: 2;
}
@media (max-width:1800px){
    .contentsTxt a .ttlBox{
        margin: 0 8%;                
    }
}
@media (max-width:1600px){
    .contentsTxt a .ttlBox{
        margin: 0 5%;                
    }
}
@media (max-width:1500px){
    .contentsTxt a .ttlBox{
        width: 13.33%;               
    }
    .contentsTxt a .txtBox h4{
        font-size: 1.75em;
    }
}
@media (max-width:1400px){
    .contentsTxt a .txtBox h4{
        font-size: 1.5em;
    }
    .contentsTxt a .txtBox p{
        font-size: 0.9em;
    }
}
@media (max-width:1200px){
    .contentsRow{
        height: auto;
    }
    .contentsTxt,
    .contentsVideo{
        width: 100%;
    }
    .contentsVideo{
        aspect-ratio: 1200/500;
    }
    .contentsTxt a{
        flex-direction: column;
        padding: 80px 0;
    }
    .contentsTxt a .ttlBox{
        width: 66.66%;
        margin: 0 auto;
        margin-bottom: 30px;             
    }
    .contentsRow:nth-of-type(even)>.contentsTxt>a>.txtBox{
        order: 1;
    }
    .contentsRow:nth-of-type(even)>.contentsVideo{
        order: 1;
    }
    .contentsTxt a .txtBox h4{
        font-size: 1.75em;
    }
    .contentsTxt a .txtBox p{
        font-size: 1em;
    }
}
@media (max-width:1000px){
    .contentsTxt a .ttlBox{
        width: 70%;           
    }
}
@media (max-width:768px){
    .contentsVideo{
        aspect-ratio: 768/400;
    }
    .contentsTxt a .ttlBox{
        width: 80%;           
    }
}
@media (max-width:600px){
    .contentsTxt a .ttlBox{
        width: 90%;           
    }
}
@media (max-width:500px){
    .contentsTxt a{
        padding: 50px 0;
    }
}
@media (max-width:450px){
    .contentsTxt a .ttlBox{
        width: 100%;           
    }
}

/* lifeStyle */
.lifeStyle{
    padding:80px 0 0 0;
    position: relative;
}
.pageTtl{
    text-align: center;
    margin-bottom:50px;
}
.pageTtl>h2{
    font-family: "EB Garamond", serif;
    font-size: 1.25em;
    line-height: 1.8;
    letter-spacing: 0.25em;
    font-weight: 300;
    color: #a3a4a4;                    
    margin-bottom: 20px;               
}
.pageTtl>p{
    font-size: 1.75em;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: 0.25em;
}
.topLS_btn{
    max-width: 1100px;
    width: 90%;
    margin: 0 auto;
}
.topLS_btn>ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.topLS_btn>ul>li{
    width: 23%;
    margin-right: 2%;
}
.topLS_btn>ul>li:last-child{
    margin-right: 0%;
}
.topLS_btn>ul>li>a{
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: 0.5s all;
    overflow: hidden;
}
.topLS_btn>ul>li>a:hover,
.topLS_btn>ul>li>a:active{
    border-radius: 50%;
    transition: 0.5s all;
}
.topLS_btn>ul>li>a:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.topLS_btn>ul>li:nth-child(1)>a:before{
    background-color: rgb(124, 160, 126);
    opacity: 0.75;
    transition: 0.5s all;
}
.topLS_btn>ul>li:nth-child(2)>a:before{
    background-color: rgb(177, 146, 177);
    opacity: 0.75;
    transition: 0.5s all;
}
.topLS_btn>ul>li:nth-child(3)>a:before{
    background-color: rgba(225, 193, 113);
    opacity: 0.75;
    transition: 0.5s all;
}
.topLS_btn>ul>li:nth-child(4)>a:before{
    background-color: rgba(60, 146, 185);
    opacity: 0.75;
    transition: 0.5s all;
}
.topLS_btn>ul>li:nth-child(1)>a:hover:before,
.topLS_btn>ul>li:nth-child(1)>a:active:before,
.topLS_btn>ul>li:nth-child(2)>a:hover:before,
.topLS_btn>ul>li:nth-child(2)>a:active:before,
.topLS_btn>ul>li:nth-child(3)>a:hover:before,
.topLS_btn>ul>li:nth-child(3)>a:active:before,
.topLS_btn>ul>li:nth-child(4)>a:hover:before,
.topLS_btn>ul>li:nth-child(4)>a:active:before{
    opacity: 0.5;
    transition: 0.5s all;
}
.topLS_btn>ul>li>a>h3,
.topLS_btn>ul>li>a>h3>span{
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    color: #fff;
    text-align: center;
    position: relative;
}
.topLS_btn>ul>li>a>h3{
    font-size: 2em;
}
.topLS_btn>ul>li>a>h3>span{
    font-size: 0.5em;
    letter-spacing: 0.25em;
}
.topLS_btn>ul>li:nth-child(1)>a{
    background-image: url(../images/lifeStyle/img01_sp@2x.jpg);
}
.topLS_btn>ul>li:nth-child(2)>a{
    background-image: url(../images/lifeStyle/img02_sp@2x.jpg);
}
.topLS_btn>ul>li:nth-child(3)>a{
    background-image: url(../images/lifeStyle/img03_sp@2x.jpg);
}
.topLS_btn>ul>li:nth-child(4)>a{
    background-image: url(../images/lifeStyle/img04_sp@2x.jpg);
}
@media (max-width:1200px){
    .pageTtl>h2{
        font-size: 1.15em;              
    }
    .pageTtl>p{
        font-size: 1.65em;
    }
}
@media (max-width:768px){
    .pageTtl>h2{
        font-size: 1.05em;              
    }
    .pageTtl>p{
        font-size: 1.55em;
    }
    .topLS_btn{
        max-width: 400px;
        width: 90%;
        margin: 0 auto;
    }
    .topLS_btn>ul>li{
        width: 48%;
        margin-right: 2%;
        margin-bottom: 10px;
    }
    .topLS_btn>ul>li:nth-child(2){
        margin-right: 0%;
    }
}
@media (max-width:500px){
    .lifeStyle{
        padding:50px 0 0 0;
    }
    .pageTtl{
        margin-bottom:30px;
    }
}

/* information */
.information,
.notice,
.pageTop_btn,
.footerWrap{
    position:relative;
}
.information{
    padding:80px 0 0 0;
    margin-bottom: 80px;
}
.footerWrap{
    padding-bottom:10px;
    background-color:#fff;
}
.smallWrap {
    margin-bottom: 0px;
}
.informationRow{
    max-width:1100px;
    width:80%;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.infomationBox,
.flyerBox{
    width:48%;
    margin-left:auto;
    margin-right:auto;
}
.infomationBox h3,
.flyerBox h3{
    font-family: "EB Garamond", serif;
    font-size: 2.5em;
    font-weight: 300;
    color: #727171;
    margin-bottom: 20px;
    padding-left:0.5em;
    box-sizing:border-box;
}
.infomationBox h3{
    border-left:5px solid #d3adaf;
}
.flyerBox h3{
    border-left:5px solid #b46c62;
}
.informationBox_inner{
    height:300px;
    overflow-y:auto;
}
.informationBox_inner table tr th,
.flyerBox_inner table tr th{
    display:block;
    width:100%;
    font-size:1.25em;
    font-weight:500;
    text-align:left;
    padding-bottom: 5px;
}
.informationBox_inner table tr td{
    display:block;
    width:100%;
    font-size:1em;
    padding-bottom: 15px;
}
.flyerBox_inner table tr td{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.flyerBox_inner table tr td p{
    width:48%;
}
.informationBox_inner table tr td a{
    font-size:1em;
    transition:0.5s all;
}
.informationBox_inner table tr td a:hover,
.informationBox_inner table tr td a:active{
    color:#b46c62;
    transition:0.5s all;
}
@media (max-width:1500px){
    .infomationBox h3,
    .flyerBox h3{
        font-family: "EB Garamond", serif;
        font-size: 2.25em;
        font-weight: 300;
        color: #727171;
        margin-bottom: 20px;
    }
}
@media (max-width:1200px){
    .infomationBox h3,
    .flyerBox h3{
        font-family: "EB Garamond", serif;
        font-size: 2em;
        font-weight: 300;
        color: #727171;
        margin-bottom: 20px;
    }
}
@media (max-width:1024px){
    .informationRow{
        width:90%;
    }
}
@media (max-width:768px){
    .information{
        padding:50px 0 0 0;
    }
    .infomationBox,
    .flyerBox{
        width:100%;
    }
    .infomationBox{
        margin-bottom:50px;
    }
}