@charset "UTF-8";
/* CSS Document */
html{
    font-size: 62.5%;
	
}
body{
    font-size: 1.6rem;
    font-family: 'Cinzel','Noto Serif JP', serif;
    font-feature-settings: "palt";
    letter-spacing: 0.2em;
    line-height: 2;
}


.fadein {
  opacity : 0;
  transform : translate(0, 50px);
  transition:all 0.5s;
}

.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}

.fadein {
  opacity : 0;
  transform : translate(0, 50px);
  transition:all 1s;
}
 
.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}
.section-body{
    padding: 0 20px;
}
img{
    max-width: 100%;
    height: auto;
}
b{
    font-size:2rem;
    padding-right: 80px;
}
.sp{
    display: none;
}
.pc{
    display: block;
}
.fit{
    width: 100%;
    object-fit: cover;
   height:100vh;
}
.btn-trigger{
    display: none;
}
.center{
    display: block;
    text-align: center;
}
.left{
    text-align: left;
}


/*-----

start

-----*/
.start {
	background: #340101;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
}

/*-----

col 

-----*/
.bg-red{
    background-color: #340101;
}
.bg-brown{
    background-color: #573317;
}
.bg-blk{
    background-color: #000;
}
.deco{
    color:#d3a371;
}
.text{
    color: #fff;
}


/*-----

hero-image

-----*/
.hero-image{
	position:relative;
	top: 0;
	left: 0;
	height: 100vh;
}
.logo-center{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate3d(-50%,-50%,0);
    z-index: 10;
}
.hero-image li::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000000;
    opacity: 0.5;
    display: block;
}
.hero-image li{
    position: absolute;
	top:0;
	right:0;
	left:0;
}
.img-cover::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000000;
    opacity: 0.5;
    display: block;
}

/*-----

page title 

-----*/
.page-title{
	position: absolute;
    top: 300px;
    right: 200px;
    z-index: 500;
}

.page-title h1{
	color:#ffffff;
	font-size: 3rem;
}

/*-----

about 

-----*/
.about{
    margin-bottom: 24px;
}
.break{
    margin-bottom: 20px;
}
.sign{
    text-align: end;
}

/*-----

nav

-----*/
.inner{
    box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
    max-width: 1120px;
    margin: auto;
}
.nav-top_logo{
    width: 80px;
}
.nav-list{
    display: flex;
    justify-content: center;
    padding: 5px 0 5px 0;
}
.nav-item{
    color: #fff;
    margin-left: 30px;
    font-size: 1.3rem;
}
.nav-item:hover{
    color: #d3a371;
    transition: all 0.5s ease 0s;
}
.nav-item.pc:last-of-type{
    margin-left: 100px;
    margin-right: 0;
    font-size: 1.8rem;
}
.nav-item.pc:last-of-type:hover{
    color: #fff;
}
.nav-item span{
    margin-right: 10px;
}
.nav-sub{
    font-size: 1rem;
    text-align: center;
}
/*  header 上部固定css  */
nav{
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.4);
    z-index:10;
}

/*-----

section 

-----*/
.section-body{
    padding-top: 85px;
    padding-bottom: 120px;
    text-align: center;
}
.section-body .section-inner{
    text-align: left;
    display: inline-block;
}
.section-title{
    color: #fff;
    font-size: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-title:before,
.section-title:after{
    border-top: 1px solid #d3a371;
    content:"";
    width: 180px;
}
.section-title:before{
    margin-right: 2rem;
}
.section-title:after{
    margin-left:  2rem;
}
.section-sub{
    font-size: 14px;
    text-align: center;
    margin-bottom: 64px;    
}

/*-----

insta

-----*/
.instaimg-cover{
	width: 70%;
	margin: auto;
}
/*-----

map 

-----*/
.maps-cover_around{
    margin-top: 40px;
    padding-bottom: 20px;
}
.maps-cover{
    position:relative;
	padding-top: 50%;
}
.maps{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}

/*-----

btn 

-----*/
.btn-cover{
    margin-top: 40px;
}

.btn{
    width: 100%;
    margin-top: 40px;
    padding: 16px 16px;
    border: solid 1px #d3a371;
    transition: all 0.3s ease 0s;
}
.btn:hover{
    background-color: #d3a371;
    color: #340101;
}
.icon{
    margin-left: 10px;
}

/*-----

comment 

-----*/
.comment{
    padding: 90px 0 40px;
}
/*-----

price 

-----*/
.section-box{
    display: flex;
    position: relative;
    max-width:1120px;
    margin: auto;
}
.reverse{
  flex-direction: row-reverse;  
}
.section-box_img{
    width: 500px;
    margin: 0 50px;
}
.section-box_p1{
    position: absolute;
    bottom: 0;
    right: 0;
}
.section-box_p2{
    position: absolute;
    bottom: 0;
    left: 0;
}

/*-----

list 

------*/
.list{
    margin: auto;
}
td{
    text-align: right;
}
.list-table{
    width: 730px;
    height: 870px;
}

/*-----

icon-flex apply 

-----*/
.icon-flex{
    display: flex;
    justify-content: center;
    padding-bottom: 170px;
}
.icon-flex span{
    margin-right: 150px;
}
.icon-flex span:last-of-type{
    margin-right: 0;
}

/*-----

footer 

-----*/
.footer-inner{
    box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
    max-width: 1120px;
    margin: auto;
}
.footer .footer-inner{
    padding-top: 100px;
}
.footer .nav-list{
    padding-bottom: 0;
}
.footer .nav-item:last-of-type{
    margin-left: 40px;
}
.logo_footer{
    width: 100px;
}
.copyrights{
    margin-top: 100px;
}

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

/*-----
    
hero-image
    
------*/
     .hero-image{
        height: 134vw;
    }
    .fit{
        height: 134vw;
    }    
/*-----

insta

-----*/
.instaimg-cover{
	width: 100%;
}
/*-----
    
nav
    
------*/ 
    .nav-item{
        margin-left: 18px;
    } 
/*-----
    
price
    
------*/      
    .section-box{
        display: block;
        position: relative;
        max-width:900px;
        text-align: center;
    }
    .section-box_img{
        width: 400px;
        margin: 0;
    }
    .section-box_p1,.section-box_p2{
        position: inherit;
        margin-top: 50px;
        text-align: center;
    }

}

@media screen and (max-width:768px){
    .sp{
        display: block;
    }
    .pc{
        display: none;
    }
    .text{
         max-width: 80%;
        text-align: center;
        margin: auto;
        font-size: 1.4rem;
    }
/*------

*hero-image*

-------*/
    .hero-image{
        height: 180vw;
    }
    .fit{
        height: 180vw;
    }
    .page-title{
        right: 50px;
    }
/*------

*header*

-------*/
    .header{
        top: 0;
        left: 0;
        z-index:50;
        width: 100%;
    }
    .logo-center{
        width: 200px;
    }
/*------

*btn-trigger*

-------*/
    .btn-trigger{
	-webkit-appearance:none;
	appearance:none;
	position: fixed;
	top:24px;
	right: 12px;
	z-index: 110;
	width: 40px;
	height: 20px;
	border: none;
	display: block;
}
    .btn-trigger span{
        position: absolute;
        display: block;
        width: 28px;
        height: 1px;
        background-color: #fff;
        transition: all 0.5s;
        top:10;
        right:20;
    }

    .btn-trigger span:first-of-type{
        top: 0;
    }
    .btn-trigger span:nth-of-type(2){
        top: 10px;
    }
    .btn-trigger span:last-of-type{
        bottom: 0;
    }

    .btn-trigger.active span:first-of-type{
        transform: rotate(45deg);
        top: 10px;
    }
    .btn-trigger.active span:nth-of-type(2){
        opacity: 0;
    }
    .btn-trigger.active span:last-of-type{
        transform: rotate(-45deg);
        bottom: 10px;
    }

    .inner{
        display: none; 
        box-sizing: border-box;
        position:fixed;
        top:0;
        left:0;
        z-index: 100;
        width: 100%;
        height: 120%;
        padding: 0px;
        background-color: rgba(0,0,0,0.97);
        margin: auto;
    }
 /*------

*sp用アイコン*

-------*/
    .tel-sp{
        -webkit-appearance:none;
        appearance:none;
        position: fixed;
        bottom: 50px;
        right: 40px;
        z-index: 110;
        border: none;
        display: block;
		font-size: 32px
    }
    .tel-sp span{
        position: absolute;
        display: block;
        width: 40px;
        height: 40px;
        color: #fff;
    }
    
/*------

*nav*

-------*/
    .nav-list{
        display: grid;
        padding: 20px 0;
    } 
    .nav-item{
        margin-bottom: 40px;
        margin-left: 0;
        text-align: center;
    }
    .nav-top_logo{
        padding-bottom: 20px;
    }
    .nav-item:last-of-type{
    margin-left: 0;
    }
    .footer .nav-item:last-of-type {
        margin-left: 0;
    }
    
    
/*------

*comment 下層*

-------*/
    .comment{
        padding: 60px 0 24px;
    }
/*------

*section*

-------*/ 
    .section-body{
        padding-top: 50px;
        padding-bottom: 80px;
    }
    .section-body .section-inner{
        display: block;
    }
    .section-title{
        font-size: 2rem;
    }
    .section-title:before,
    .section-title:after{
        width: 100px;
    }
    .section-sub{
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
/*------

*price*

-------*/
    .section-box_img{
        width: 350px;
    }
      
/*------

*list*

-------*/
    td{
        display: block;
        text-align: start;
        font-size: 1.4rem;
    }
    .list-table{
        width: 100%;
    }
    table {
        border-collapse: collapse;
    }

    table tbody {
        border-bottom: 15px solid #340101;
    }
    table .tbody2{
        border-bottom: 15px solid #573317;
    }
/*------

*apply*

-------*/ 
    .icon-flex{
        display: block;
        text-align: center;
        padding-bottom: 0;
    }
    .icon-flex span{
        display: block;
        padding-bottom: 80px;
        margin-right: 0;
    }
    .icon-flex span:last-of-type{
        padding-bottom: 140px;
    }
/*------

*footer*

-------*/  
    .copyrights{
        margin-top: 80px;
    }
}