@charset "UTF-8";

/*HEADER
================================================= */
header{
	width: 100%;
	height: 160vw;
	background-image:url("../image/header_back_1.jpg"),url("../image/header_back_2.jpg");
	background-repeat: no-repeat;
	background-size: 124% auto, 124% auto;
	background-position: left 40% top 40% , right 10% top 20%;
	background-color: #000000;
	color: #ffffff;
	animation: header_img 10s; 
	animation-iteration-count: infinite;
}
.header_box {
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding: 12vw 0;
	background-image:linear-gradient(180deg,rgb(63,53,55, 1) 4%, rgb(63,53,55, 0.0) 80%);
}

header h1{/*logo*/
	width: 24vw;
	margin: 0 4vw 0 auto;
}
header h2{
	width: 16vw;
	max-width: 120px;
	margin: 4vw 9vw 0 auto;
	font-size: 4.2vw;
	writing-mode: vertical-rl;
	letter-spacing: 0.1em;
	font-family: "BIZ UDMincho", serif;
}
header h2 > span{letter-spacing: -0.4em;}

.open_day{
	display: block;
	width: 38vw;
	margin: -8vw auto 0 0;
	padding: 1vw 2vw;
	font-size: 3.6vw;
	text-align: center;
	border-top: solid 1px #ffffff;
	border-bottom: solid 1px #ffffff;
	border-right: solid 1px #ffffff;
}
.header_link{
	width: 110px;
	margin: 1.2rem auto 0 4vw;
	font-size: 1.4rem;
	line-height: 2;
}
.header_link a{
	display: block;
	width: 100%;
	position: relative;
	padding-left:42px; 
}
.header_link a::before {
	position: absolute;
	display: block;
	content: "　";
    height: 32px;
    width: 32px;
    background-image: url("../image/icon_ig_w.svg");
	background-repeat: no-repeat;
    background-size: 30px auto;
	background-position: bottom;
	left:0;
}

.display_pc{display: none;}
.display_smp{display: inherit;}
	
.header_linko a, .header_link a:link, .header_link a:visited {
  color: rgba(255,255,255,1);
  text-decoration: none;
}
.header_fade-in{
	animation: fade-in ease;
	animation-duration: 1.6s;
}
@keyframes fade-in {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@media print, screen and (min-width: 768px) {
header{
	height: 72vw;
	max-height: 1080px;
	background-size: 70% auto,60% auto;
	background-position:  right -30% bottom,right top 40%;
}
.header_box {
	width: 60%;
	margin: 0 auto 0 0;
	padding: 10vw 0;
	background-image:linear-gradient(90deg,rgb(63,53,55, 1) 74%, rgb(63,53,55, 0.0) 100%);
}

header h1{/*logo*/
	margin: 1vw auto;
	width: 20vw;
}
header h2{
	width: 6vw;
	margin: 0 auto;
	font-size: clamp(1.4rem ,1.8vw , 2.4rem);
	writing-mode: vertical-rl;
	letter-spacing: 0.1em;
}
.open_day{
	width: clamp(180px ,20vw , 240px);
	margin: 3vw auto 0;
	padding: 0.6vw  1vw;
	font-size: clamp(1.4rem ,1.8vw , 1.8rem);
	border-left: solid 1px #ffffff;
}
.header_link{
	width: clamp(100px ,12vw,140px);
	margin: 1.4rem auto 0;
	font-size: clamp(1.4rem ,2vw,1.8rem);
}
.display_pc{display: inherit;}
.display_smp{display: none;}
}

@media print, screen and (min-width: 1280px) {
header{
	height: 46vw;
	max-height: 1080px;
	background-size: 60% auto;
	background-position:  right -10% bottom 12%;
}
.header_box {
	padding: clamp(32px , 3.2vw ,180px ) 0;
	background-image:linear-gradient(90deg,rgb(63,53,55, 1) 80%, rgb(63,53,55, 0.0) 100%);
}
header h1{/*logo border: solid 1px #ffffff;*/
	margin: 0 auto;
	width: 18vw;
	max-width: 420px
}
header h2{
	width: clamp(48px ,4.0vw ,92px);
	margin: 2vw auto 0;
	font-size: clamp(1.2rem ,1.3vw ,3rem);
	writing-mode: vertical-rl;
	letter-spacing: 0.1em;
}
.open_day{
	width: clamp(160px ,14vw , 220px);
	margin: 2vw auto 0;
	padding: 0.4vw  0.8vw;
	font-size: clamp(1.2rem ,1.2vw, 1.8rem);
}
.header_link{
	width: clamp(100px ,12vw,140px);
	margin: 1.2vw auto 0;
	font-size: clamp(1.4rem ,2vw,1.8rem);
}
}


@keyframes header_img {
  0% { background-image: url("../image/header_back_1.jpg"),url("../image/header_back_2.jpg");
  }
  40% { background-image: url("../image/header_back_1.jpg"),url("../image/header_back_2.jpg");
  }
  50% { background-image: url("../image/header_back_2.jpg"),url("../image/header_back_1.jpg");
  }
  90% { background-image: url("../image/header_back_2.jpg"),url("../image/header_back_1.jpg");
  }
  100% { background-image: url("../image/header_back_1.jpg"),url("../image/header_back_2.jpg");
  }
}/**/

/*=Concept ================================================= */
.area_concept { background-color: rgb(182,169,158,1);}
.concept_block { 
	position: relative;
	width: 100%;
	max-width: 1366px;
	margin: 0 auto;
	padding: 12vw 0;
	opacity: 0;
	transform: translateY(30px); /* 下からふわっと出す */
	transition: all 0.8s ease;
}
.concept_block.fadein{
	opacity: 1;
	transform: translateY(0); 
}
.concept_txt { 
	position: relative;
	width: 90vw;
	margin: 18vw 5vw ;
	z-index: 6;
	 font-family: "BIZ UDMincho", serif;
	text-align: center;
}
.concept_txt h3 { font-size: clamp( 2.8rem , 6.2vw , 5rem) }
.concept_txt h3 span { letter-spacing: -0.3em;}
.concept_txt p { 
	margin: 8% 0;
	line-height: 2;
	font-size: clamp( 1.6rem ,2.4vw , 2.2rem);
}
.concept_txt p span { display: inline-block;}

.concept_phogo_01{
	position: absolute;
	width: 46vw;
	z-index: 2;
	left: 8vw;
	top:16vw;
}
.concept_phogo_02{
	width: 46vw;
	position: relative;
	z-index: 4;
	left: 46vw;
	padding-top: 16vw;
}

@media print, screen and (min-width: 768px) {
.concept_block { height:90vw; padding: 10vw 0;}
.concept_txt { 
	width: 50%;
	margin: 8vw 6% 0 44%;
	padding: 0 0 6vw;
	z-index: 6;
	font-size: clamp(1.2rem ,1.3vw ,3rem);
	text-align: left;
}
.concept_phogo_01 {
	width: 26vw;
	left: 0vw;
	top:clamp(60px ,12vw ,200px);
	top:10vw;
}
.concept_phogo_02 {
	position: absolute;
	width: 26vw;
	left: 8vw;
	top:clamp(180px ,32vw ,480px);
	padding-top:0;
}

}
@media print, screen and (min-width: 1280px) {
.concept_block { width: 80%; height: 84vw; max-height: 1280px; padding: clamp(32px , 3.2vw ,180px ) 0;}
.concept_txt { 
	width: 42%;
	margin: 16% 0 0 50%;
	padding: 0 0 6vw;
	z-index: 6;
	font-size: clamp(1.2rem ,1.3vw ,3rem);
}
}


/* =shop infomation================================================= */
.area_shop_info { background:rgb(206,199,182, 1)}
.shop_info { display: flex; flex-wrap: wrap; padding: 12vw 0;}

.shop_info a, .shop_info a:link, .shop_info a:visited {
  color: rgba(63,53,55,1);
  text-decoration: none;
}
.shop_info a:hover, .shop_info a:active {
  color: rgba(63,53,55,0.6);
  text-decoration: underline;
}
.shop_info h3,
.shop_info-container,
.map-container{ width: 100%;}
.shop_info-container { margin-bottom: 8vw;}

.shop_info h3 { 
	margin-bottom: clamp( 1.8rem, 3vw, 48px);
	font-size: clamp( 2.0rem , 4.0vw , 4rem);
}
.shop_info h3 img { width: clamp(160px ,50vw , 310px);}

/* table */
.shop_info table { width: 100%;}
.shop_info tr {
	display: flex;
	flex-wrap: wrap;
	padding: 3% 0;
	text-align: left;
	border-bottom: 1px solid rgb(182,169,158, 1);
}
.shop_info tr:first-child { border-top: 1px solid rgb(182,169,158, 1);}
.shop_info th,.shop_info td { width: 100%; padding:1px 0;}
.shop_info th {letter-spacing: 0.2em; font-size: 1.8rem; font-family: "BIZ UDMincho", serif;}
.shop_info table span { display: inline-block;}

/* map */
.map-container {
  width: 100%;
  margin: 0 0 6vw;
}
.map-container iframe {
  width: 100%;
  height: 400px;
  border: none;
}

/* tell */
.tel-link { text-decoration: underline;}

/* Instagram */
.sns_link_ig { position: relative; padding-left:38px;}
.sns_link_ig::before {
	position: absolute;
	display: block;
	content: "　";
    height: 32px;
    width: 32px;
	top:-3px;
    background-image: url("../image/icon_ig_b.svg");
	background-repeat: no-repeat;
    background-size: 30px auto;
	background-position: top left;
}

@media (min-width: 768px) {
.shop_info { justify-content: space-between; padding: 10vw 0;}
.shop_info-container,.map-container { width: 47%; margin: 0 0 0;}
.shop_info h3 img { width: clamp(160px ,40vw , 310px);}
.shop_info { padding: 8vw 0;}
.shop_info tr {
	padding: clamp(24px ,6% , 40px) 0;
}
.shop_info th { width: clamp(120px ,24% ,180px);}
.shop_info td { width: 70%;}
.tel-link {
    pointer-events: none;
    cursor: default;
    color: inherit;
    text-decoration: none;
  }
}
@media (min-width: 1280px) {
.shop_info { padding: clamp(64px , 8vw ,240px ) 0;font-size: 1.8rem;}
.shop_info th { font-size: 2rem;}
}