@charset "utf-8";

/**
 *
 *  サイト共通
 *
 */

/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,ins,kbd,q,samp,small,strong,
sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
ul,ol,li,dl,dt,dd{list-style-type:none;list-style-position:outside;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
img{vertical-align:top;border:0;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:0;padding:0;}
input,select{vertical-align:middle;}
h1,h2,h3,h4,h5,h6{font-weight: 500;}

/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/

html{
	overflow-y: scroll;
	font-size: 62.5%;
}


/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/

body{
	color: #231815;
	background: #FFF;
	font-family: "Noto Serif JP","YuMincho","Yu Mincho","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.6rem;
	line-height: 1.8;	
}

/* fonts */
.sans-serif{
	font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体", "Yu Gothic", YuGothic,"メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;
}

.en{
	font-family: adobe-garamond-pro, serif; 	
}
.trajan{
	font-family: trajan-pro-3, serif; 	
}

/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/

a{
	outline: none;
}
a:link,
a:visited{
	text-decoration: none;
	color: #000;
}

.ophover{
	transition: opacity ease .3s;	
}
.ophover:hover{
	opacity: .7;
}


/*--------------------------------------------------------------------------
   img
---------------------------------------------------------------------------*/
img{
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;		
}

/*--------------------------------------------------------------------------
   Animation
---------------------------------------------------------------------------*/

.fade,.fade01,.fade02,.fade03,.fade04,
.delay01,.delay02,.delay03,.delay04,.delay05 {
	transition: 1.3s;
}
.fade {
	opacity: 0;
	transform: translate(0,0); 
}
.fade01{
	opacity: 0;
	transform: translate(0,50px); 
}
.fade02 {
	opacity: 0;
	transform: translate(0,-50px); 
}
.fade03 {
	opacity: 0;
	transform: translate(-50px,0); 
}
.fade04 {
	opacity: 0;
	transform: translate(50px,0); 
}
.delay01{
	transition-delay: 0.3s;		
}
.delay02{
	transition-delay: 0.6s;		
}
.delay03{
	transition-delay: 0.9s;		
}
.delay04{
	transition-delay: 1.2s;		
}
.delay05{
	transition-delay: 1.5s;		
}

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


/*--------------------------------------------------------------------------
   PC
---------------------------------------------------------------------------*/
.sp{
	display: none;	
}
/* box-sizing ---*/	
header, footer, section, div, h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, th, td, a, span {
	box-sizing: border-box;
}



/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
#Page{
	overflow: hidden;	
}
.inner{
	max-width: 1240px;
	padding: 0 20px;
	margin: 0 auto;
}
.layout-box{
  display: flex;
  justify-content: space-between;  
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
#Content {
	margin-top: 75px;
}


/*sec-block
-----------------------------------------------------------------*/
    .sec-block{
        margin-top:200px; 
    }


/* page-ttl
-----------------------------------------------------------------*/
.page-ttl{
	position: relative;
	height: 360px;
	background: no-repeat center center;
	background-size: cover;
}
.page-ttl h1{
	position: absolute;
	left: 0;
	margin-top: 100px;
	min-width: 500px;
	padding: 25px 45px 40px;
	background: rgba(0,0,0,.8);
	color: #FFF;
	line-height: 1;	
}
.page-ttl h1 .en{
	display: block;
	margin-bottom: 10px;
	font-family: trajan-pro-3, serif;
	font-size: 5rem;
}
.page-ttl h1 .ja{
	font-size: 2.2rem;
}
.page-ttl .caption{
	position: absolute;
	right: 10px;
	bottom: 0;
	font-size: 1.4rem;
	color: #FFF;	
}


/* breadcrumb
-----------------------------------------------------------------*/
.breadcrumb{
	display: flex;	
	max-width: 1240px;
	margin: 0 auto;
	padding: 5px 20px;

	font-size: 1.5rem;	
}
.breadcrumb li:nth-child(n+2)::before{
	display: inline-block;
	margin: 0 1em;
	content: ">";
}


/* sec-ttl
-----------------------------------------------------------------*/
.sec-ttl{
  font-size: 8.6rem;
  line-height: 1.1;
  color: #614e3e;
  text-transform:uppercase;
  font-family: trajan-pro-3, serif;  
}
.sec-ttl span{
  display: inline-block;  
}
.sec-ttl span:first-letter{
  font-size: 120%;  
}


/* btn-base
-----------------------------------------------------------------*/
.btn-base a,
.btn-base > span{
  position: relative;
  display: block;
  max-width: 500px;
  margin: 0 auto;
  padding: 18px 10px 20px;
  background:  #b2977c;
  color: #FFF;
  font-size: 2.0rem;
  line-height: 1;
  text-align: center;
  transition :.3s; 
  border-radius: 30px;
}
.btn-base2 a,
.btn-base2 > span{
  position: relative;
  display: block;
  max-width: 500px;
  margin: 0 auto;
  padding: 18px 10px 20px;
  background:  #670a0a;
  color: #FFF;
  font-size: 2.8rem;
  line-height: 1;
  text-align: center;
  transition :.3s;  
}
.btn-base a:hover,
a:hover .btn-base > span,
.btn-base2 a:hover,
a:hover .btn-base2 > span{
  opacity: .7;
}
.btn-base a::after,
.btn-base > span::after,
.btn-base2 a::after,
.btn-base2 > span::after{
  position:absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  content: "";
  width: 60px;
  height: 7px;
  background:url(../image/common/arw_btn.svg) no-repeat right center;
  background-size: auto 100%;
}
.btn-base > span.comingsoon::after,
.btn-base2 > span.comingsoon::after{
	display: none;	
}
.btn-base > span.comingsoon span,
.btn-base2 > span.comingsoon span{
	opacity: .5;	
}


/* page-notes
-----------------------------------------------------------------*/
.page-notes{
	padding: 50px 0;
	background: url(../image/common/bg_beige02.jpg) center center;	
}
.page-notes p,
.page-notes ul{
	font-size: 1rem;	
}

/* clearfix
-----------------------------------------------------------------*/
.cf:after{
	clear :both;
	content: "";
	display: block;
	height: 0;
}




/* footer
-----------------------------------------------------------------*/
footer{
    margin-top: 200px;
}






/*--------------------------------------------------------------------------
   Tablet
---------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

/*sec-block
-----------------------------------------------------------------*/
    .sec-block{
        margin-top:150px; 
    }
    

}







/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	body{
		font-size: 1.2rem;
	}
	#Page {
		min-width: 320px;	
	}
	#Page img{
		width: 100%;
		height: auto;
	}
	.pc{
		display: none;	
	}
	.sp{
		display: block;	
	}
	img.sp,
	br.sp{
		display: inline;
	}


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
	.inner{
		max-width: initial;
	}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
	#Content {
		margin-top: 49px;
	}



/* breadcrumb
-----------------------------------------------------------------*/
	.breadcrumb{
		padding: 5px 15px;
		font-size: 1.2rem;	
	}


/* btn-base
-----------------------------------------------------------------*/
	.btn-base a,
	.btn-base > span,
	.btn-base2 a,
	.btn-base2 > span{
		max-width: 280px;
		padding: 16px 10px 18px;
		font-size: 1.6rem;
	}
	.btn-base a:hover,
	a:hover .btn-base > span,
	.btn-base2 a:hover,
	a:hover .btn-base2 > span{
		opacity: 1;
	}
	.btn-base a::after,
	.btn-base > span::after,
	.btn-base2 a::after,
	.btn-base2 > span::after{
		right: 8px;
		width: 35px;
		height: 7px;
	}

    
/*sec-block
-----------------------------------------------------------------*/
    .sec-block{
        margin-top:100px; 
    }
    
    
/* page-notes
-----------------------------------------------------------------*/
	.page-notes{
		padding: 30px 0;
	}


}