@charset "UTF-8";
/* CSS Document */

:root{
--navy: #0f2540;
--gold: #897d55;
--cream: #f3f3e0;
--light_cream: #f8f8f3;
--gray: #636363;
--light_gray: #cdcdcd;
}

/*---メイン画像---*/
header{
    position: relative;
    width: 100%;
    height: 160vw;
}
#logo{
    width: 252px;
    padding-top: 16px;
}
.sns{
    display: flex;
    padding-left: 20px;
    margin-top: 8px;
}
.sns li{
    width: 30px;
    margin-right: 20px;
}
.sns li a{
    display: block;
    width: 30px;
}
#read{
    width: 360px;
}
#mainCopy{
    position: absolute;
    width: 100%;
    max-width: 1500px;
    height: auto;
    top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); /* ここで“半分戻す” */
    z-index: -1;
}
#mainImg{
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 50%; transform: translateY(-50%);
    z-index: -2;
    padding-bottom: 166%
}
#mainImg picture{
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    opacity: 0;
    animation: change-img-anim 15s infinite;
}
#mainImg picture:nth-of-type(1) {
  animation: change-img-anim-first 15s infinite;
	animation-delay: 0s;
}
#mainImg picture:nth-of-type(2) {
	animation-delay: 5s;
}
#mainImg picture:nth-of-type(3) {
	animation-delay: 10s;
}

@keyframes change-img-anim-first {
	0%{ opacity: １;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@media screen and (min-width: 599px){
    header{
    height: 58.2vw;
    max-height: calc(100vh - 30px);
        overflow: hidden;
}
#mainImg{
    padding-bottom: 58%
}
}
@media screen and (min-width: 834px){
#logo{
    width: 360px;
    padding-top: 24px;
}
.sns{
    display: flex;
    padding-left: 40px;
    margin-top: 16px;
}
.sns li{
    width: 48px;
	margin-right: 40px;
}
.sns li a{
    width: 48px;
}
#read{
    width: 450px;
}
}
@media screen and (min-width: 1080px){
#logo{
    width: 360px;
    padding-top: 24px;
}
.sns{
    display: flex;
    padding-left: 40px;
    margin-top: 16px;
}
.sns li{
    width: 60px;
    margin-right: 40px;
}
.sns li a{
    width: 60px;
}
#read{
    width: 610px;
}
}
h1,h2,h3,h4,h5,p,li,dt,dd{
    font-family: 'Zen Old Mincho', serif;
    font-weight: 400;
}
.txt_nv{
color: var(--navy) !important;
}
.txt_gold{
color: var(--gold) !important;
}
.txt_gray{
color: var(--gray)!important;
}
.txt_cream{
color: var(--cream) !important;
}
strong{
font-weight: 800;
}

/*---メインリード---*/

#mainRead h1{
    font-size: 1.25rem;
    color: var(--gold);
    padding-bottom: 24px;
    text-align: center;
}
#mainRead p{
    font-size: 0.875rem;
    line-height: 2;
}
#mainRead {
background-image: url("../images/bg_xmas.jpg");
background-size: cover;
background-position: top center;
}
#mainRead .wBox{
max-width: 1480px;
    padding: 32px 16px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255,255,255,0.5)
}
@media screen and (min-width: 834px){
#mainRead {
}
#mainRead .wBox{
    padding: 40px 48px;
}
#mainRead h1{
    font-size: 2rem;
    padding-bottom: 36px
}
#mainRead p{
    font-size: 1.125rem;
}
}
/*---メインセクション---*/
#renove section{
    /*margin-top: 80px;*/
}
#renove section h2{
    font-size: 1.125rem;
    color: var(--navy);
    padding: 16px 24px 0;
    
}
#renove section h3{
    font-size: 1.125rem;
    color: var(--navy);
    padding: 0 24px 32px;
    
}
.picBlock{
max-width: 1680px;
margin-left: auto;
margin-right: auto;
    
}
.picBg{
    margin-bottom: 20px;
}
.picBox{
    margin: 0 10px 20px 0;
    padding: 0 14px 20px;
    position: relative;
    overflow: hidden;
}
.picList li{
    position: absolute;
    top: 4%;
    left: 0;
    width: 96%;
    height: auto;
    cursor: pointer;
}
.picList li{
    transform:rotate(1.25deg);
    z-index: 4
    }
.picList li:nth-child(2){
    transform:rotate(-3deg);
    z-index: 3
    }
.picList li:nth-child(3){
    transform:rotate(-1.5deg);
    z-index: 2
    }
.picList li:nth-child(4){
    transform:rotate(4deg);
    z-index: 1;
    }
.picList li span{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 30px;
    left: 30px;
    z-index: 6;
    pointer-events: none;
    background-image: url("../images/arrow_pic.svg");
    background-size: 40px 40px;
    background-position: center center;
    background-repeat: no-repeat;
    transform:rotate(180deg);
    opacity: 0.8;
}
.picList li.picPrev span{
    transform:rotate(0deg);
}
.picList .moveR span{
    position: absolute;
    right: 30px;
    left: auto;
    transform:rotate(0deg);
}

.picList li.picPrev.moveR span{
    transform:rotate(180deg);
}

/* 画像1枚の時 */
.picList .picOnly{
    cursor:default;
}

.txtBox {
    position: relative;
}
.txtBox h2{
    padding-bottom: 16px;

	
}
.txtBox h2 img{
    width: 67%;
    min-width:235px;
    display: block;
}
.txtBox p{
    padding-left:24px;
    padding-right:24px;
    line-height: 1.8;
}
.txtBox .txtBg{
    position: absolute;
    top: 0;
    right: 0;
    width: 24.7%;
    height: auto;
}
@media screen and (min-width: 600px){
    section h2{
    font-size: 1.5rem;

}
}
@media screen and (min-width: 834px){
#renove section{
    /*margin-top: 120px;*/
}
#renove section h2{
    font-size: 2.0rem;
    padding: 0 24px 0;
}
#renove section h2.stayTtl{
font-size: 1.6rem;
}
#renove section h3{
    font-size: 1.25rem;
    padding: 12px 24px 0;
    color: var(--navy);
}
.picBlock{
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
    align-items: center;
    column-gap: 40px;
}
.picBox{
    width: 60%;
    margin-top: 120px;
    margin-bottom: 20px;
    max-width: 960px
    }
.picBg{
    margin-bottom: 80px;
}
.txtBox{
        width: 40%;
    }
.txtBox h2{
    padding-bottom: 16px;
    margin-top: 10px;

}
#renove main .txtBox h2 img{
    width: 100%;
    max-width: 320px;
}
.txtBox p{
   /* padding: 0 48px;*/
    line-height: 1.8;
    font-size: 0.875rem;
}
.txtBox .txtBg{
    position: relative;
    width:100%;
    height: auto;
    text-align: right;
}
#renove main .txtBox .txtBg img{
    width: 65%;
    max-width:340px; 
    border-radius: 10px;
    }

.picBlockLeft .picBox{
    margin-left: 0;
    padding-left: 0;
    position: relative;
}
.picBlockRight{
    flex-direction:row-reverse
    }
.picBlockRight .picBox{
    margin-right: 0;
    padding-right: 0;
    position: relative;
}
.picBlockRight .txtBox .txtBg{
    text-align: left;
}
.picList li span{
    width: 60px;
    height: 60px;
    background-size: 60px 60px;
}
}
@media screen and (min-width: 1500px){
.picBg{
        margin-bottom:  120px;
    }
.picBox{
        width:960px;
    }
.txtBox{
        width:calc(100% - 960px)
    }
.txtBox h2{
    margin-top: 20px;
    padding: 36px 80px 0;
}
.txtBox p{
    font-size: 1rem;
    /*padding-left: 80px;*/
}
}

/*---おすすめプラン---*/
.planBlock{
    max-width: 1008px;
    margin-left: 20px;
    margin-right: 20px;
    border: 1px solid rgba(199,184,158,1);
}
.planBlock ul{
  
}
.planBlock li{
    margin: 24px;
    display: flex;
    flex-direction: column;

}
.planBlock  .align{
    display: flex;

}/*テスト中-*/
.planTxtWrap{
    flex-grow: 1;
}
.planBlock h2{
    text-align: center;
    font-size: 1rem;     /* 16px */
    margin-top: 20px;
}
.planBlock h3{
    font-size: .875rem;  /* 14px */
    line-height: 1.6;
}
.planBlock .planCopy{
    margin-top: 16px;
}
.planBlock .planBtn{
    margin-top: 12px;    
}

.planBlock .planBtn a{
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: .875rem;  /* 14px */
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    text-align: center;
    background-color: rgba(199,184,158,1);
    transition: all  0.3s ease;
}
.planBlock .planBtn a:hover{
    background-color: rgba(199,184,158,0.8);
}
@media screen and (min-width: 599px){
    
.planBlock{
    margin-left: 40px;
    margin-right: 40px;
}
.planBlock li{
    margin: 40px;
}
.planBlock h2{
    font-size: 1.5rem;     /* 16px */
    margin-top: 40px;
}
.planBlock h3{
    font-size: 1.125rem; 
}
.planBlock p{
    font-size: 1rem
    }
}
@media screen and (min-width: 834px){
.planBlock{
    margin-left: auto;
    margin-right: auto;
}
.planBlock ul{
    display: flex;
    justify-content: space-between;
    padding-right: 40px;
}
.planBlock li{
    margin-left: 40px;
    margin-right: 0;
    width: calc(50% - 40px)
}

.planBlock .planTxt{
        height: 64px;
    }
}
/*---ご予約はこちらから---*/
.conYoyaku{
	width:100%;
	max-width:640px;
	padding:0 15px;
}
.conYoyaku p{
font-size: 1rem;
}
@media screen and (min-width: 768px){	

.conYoyaku{
	margin-left:auto;
	margin-right:auto;
	padding:0;
}
}



/*店舗ご案内*--------------------*/
.bgGold{
background: var(--cream);
	padding-bottom:40px
}
.bgGray{
background: var(--gray);
	padding-bottom:40px
}
.bgNv{
background: var(--navy);
	padding-bottom:40px
}

.con2{
	width:100%;
	max-width:980px;
	padding:0 20px;
}
@media screen and (min-width: 768px){	

.con2{
	margin-left:auto;
	margin-right:auto;
	padding:0;
}
}



.fList li{
	margin:0 auto 30px;
	max-width:460px;
}
.fList li:last-child{
	margin-bottom:0;
}
@media screen and (min-width: 768px){	
.fList{
	display:flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom:-30px
}
.fList li{
	padding:0 20px 30px;
	margin:0;
}
}



.picTenpo {
	text-align:left;
}
.picTenpo h4{
	margin:20px 0 10px
}
.picTenpo li{
	width:90%;
}
.picTenpo img{
border-radius: 10px;
}

@media screen and (min-width: 768px){
.picTenpo li{
	width:33.3%;
}
}

/*メニューBOx*--------------------*/
#menuBox h1{
    font-size: 2.0em;
    color: var(--gold);
    line-height: 1.7;	

}
#menuBox p{
    font-size: 1.2em;
    line-height: 2;
}

#menuBox p span{
    line-height: 2;
}
#menuBox .priceList li{
display: flex;
justify-content: center;
column-gap: 20px;
margin:10px auto;
}
#menuBox .priceList li p{
color: var(--navy);
    font-size: 1.5em;
}
#menuBox .priceList li p span{
font-size: 0.8rem;
}

@media screen and (max-width: 768px){

#menuBox p{
text-align: left;
font-size: 1.0em;
}
}

/*---問い合わせはこちらから---*/
.conToi{
	width:100%;
	max-width:460px;
	padding:0 15px;
}
@media screen and (min-width: 768px){	

.conToi{
	margin-left:auto;
	margin-right:auto;
	padding:0;
	max-width:600px;
}
}

.toiBox {
	padding: 10px;
	margin-top:10px;
	width: 100%;
	background: #fff;
	text-align: center;
	border: 1px solid var(--gold);
}
.toiFor  {
font-family:'Zen Antique Soft', serif;
	color: var(--gold);
	font-size: 1.25em;
 line-height: 1.6;
}

/*宿泊*--------------------*/
.boxWrap{
text-align: center;
}
#renove .boxWrap h2{
}
.boxCon{
max-width: 1280px;
background: #fff;
padding: 20px;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.boxCon .picBox{
max-width: 720px;
}

@media screen and (min-width: 1500px){
.boxCon .txtBox{
width:calc(100% - 640px)
}
.boxCon .picBox{
width: 640px;
}

}
@media screen and (min-width: 768px){

}

/*公式とトーンあわせ*--------------------*/

.cardList{
display: flex;
justify-content: center;
column-gap: 60px
}
.cardLink{
max-width: 240px;
}
.cardLink a,
.cardLink span{
display: block;
position: relative;
text-decoration: none;
}
.cardLink a .cardListImg,
.cardLink span .cardListImg{
aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  transition: 0.5s;
}
.cardLink a .ar16_9,
.cardLink span .ar16_9{
aspect-ratio: 16 / 9;
}

.cardLink a:hover .cardListImg {
border-radius: 320px
}
.cardLink a img,
.cardLink span img{
    width: 100%;
  height: 100%;
  object-fit: cover; /* はみ出しをトリミングして埋める */
}
.cardLink a .cardTxt::before,
.lineLink a::before{
content: '';
display: block;
position: absolute;
background-color: var(--navy);
background-image: url("../images/btn_circle_arrow_wht.png");
background-size: 20px 9px;
background-position: center center;
background-repeat: no-repeat;
z-index: 2;
  transition: 0.5s;
}

.cardLink a .cardTxt::before{
top:-35px;
right: -35px;
width: 70px;
height: 70px;
border-radius: 70px;
}
.cardLink a:hover .cardTxt::before{
width: 84px;
height: 84px;
border-radius: 84px;
}

.cardLink a.nolink{
cursor: default;
  transition: 0;
}

.cardLink a.nolink .cardTxt::before{
content: none
}
.cardLink a.nolink:hover .cardListImg  {
  border-radius: 10px;

}
cardLink a.nolink .cardListImg{
position: relative;
}
.cardLink a.nolink .cardListImg::before,
.cardLink a.nolink .cardListImg::after{
aspect-ratio: 1 / 1;
display: block;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
border-radius: 10px;

}

.cardLink a.nolink .cardListImg::after{
content: '';
background-color: rgba(15, 37, 64, 0.8);

}

.cardLink a.nolink .cardListImg::before{
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
content: 'Coming Soon';
text-align: center;
font-size: 24px;
color: var(--cream)
}

.cardTxt{
position: relative;
}
a .cardTxt h3{
text-decoration: none;
font-size: 18px;
color: var(--navy);
padding-top: 30px;
font-family: 'Zen Old Mincho', serif;
font-weight: 800;
}

a .cardTxt p{
font-size: 14px;
color: var(--navy);
padding-top: 12px;
}

#mainRead a .cardTxt p{
font-size: 14px;
}
.lineLink a{
display: flex;
position: relative;
min-height: 70px;
text-decoration: none;
color:var(--navy);
border-bottom: 1px solid var(--light_gray);
border-top: 1px solid var(--light_gray);
align-items: center;
}
.lineLink2 a{
border-top: none;
}

.lineLink a:hover{
background-color: var(--light_cream);
}
.lineLink a::before{
top: calc(50% - 25px);
right: 0;
width: 50px;
height: 50px;
border-radius: 50px;
}
.lineLink a:hover::before{
width: 60px;
height: 60px;
top: calc(50% - 30px);
}

.btnLink a{
display: block;
border-radius: 10px;
padding: 20px;
min-height: 70px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
background-color: var(--gold);
color: #fff;
position: relative;
text-align: center;
text-decoration: none;
transition: 0.5s}

.btnLink a::after{
content: '';
display: block;
position: absolute;
width:20px;
height: 9px;
top: calc(50% - 4px);
right: 10px;
background-image: url("../images/btn_circle_arrow_wht.png");
background-repeat: no-repeat;
background-size: 20px 9px;
}
.btnLink a:hover{
background-color: var(--gray);
}
.border_lg{
padding: 20px;
background: var(--light_cream);
border-radius:10px
}
.border_top{
padding-top: 20px;
border-top: 1px solid var(--cream)
}
/*---ご予約は10月1日から---*/
.conYoyakuBefore{
	width:100%;
	max-width:480px;
	padding:0 20px;
}
.conYoyakuBefore p{
font-size: 1rem;
}
@media screen and (min-width: 768px){	

.conYoyakuBefore{
	margin-left:auto;
	margin-right:auto;
	padding:20px;
}
}
/*予約リンクしない*--------------------*/
.btnLinkNo {
    display: block;
    padding: 20px;
    min-height: 70px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    color: #887d58;
    position: relative;
    text-align: center;
    border:1px solid #887d58;
	border-radius: 10px;
}