@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Sawarabi+Mincho&family=Noto+Serif+JP:wght@400&display=swap');
#intro h2::before{font-family: 'Great Vibes', cursive!important;}
#intro h2,#contents h3,.top_cms_box h2{font-family: 'Sawarabi Mincho', sans-serif;}
.more,.top_cms_box h2,header #header #header_menu li a span,#page_title h2 span,#cms_5-c .box_title1::before,#cms_5-c .box_txt1::before,#bottom_menu,#info_title_box span,#page10 a{font-family: 'Noto Serif JP', serif;}

.linkStyle{color: #603813;}


/*--- anim ------------------------------------*/
.fadein{
	opacity : 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	transition: all .7s ease; 
}
.fadein.start{
    opacity : 1;
	transform: none;
}
.fadein_rotate {
    opacity : 0;
	-webkit-transform : translateY(10px) rotateY(180deg);
	transform : translateY(10px) rotateY(180deg);
	transition: transform .65s ease .1s,opacity 1s ease .1s;
}
.fadein_rotate.start {
    opacity : 1;
    -webkit-transform : translateY(0) rotateY(0);
	transform : translateY(0) rotateY(0);
}



/* 動画 ---------------------------------------------------------------------------------------------*/
#video{
background-image: url(./dup/img/main_img.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#video{height: 96vh}
#main_img{max-height: inherit;position: relative;}
#main_img::before{
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(./dup/img/fil.png);
	background-repeat: repeat;
	background-size: 1280px;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 10;
	background-color: rgba(0,0,0,0);
opacity: 0.2;
}


/* ヘッダー ---------------------------------------------------------------------------------------------*/
header .logo,header #header #header_menu li{transition: all .3s}
header{background: rgba(255,255,255,0);padding-bottom: 10px;}
header #header #header_menu li a span{color: #ffffff!important;}
header.transform{background: rgba(96, 56, 19, 0.47)!important;}
header.transform #header #header_menu li{border-color: #ffffff!important;}

#logo{padding-top: 12px;}
header.transform .logo{width: 144px;}



/* top ---------------------------------------------------------------------------------------------*/
#intro_txt{padding-top: 80px;padding-bottom: 110px;}
#intro h2{font-size: 30px;position: relative;padding-top: 48px;padding-bottom: 15px;margin-bottom: 60px;}
#intro h2::before{
	display: block;
	content: "Italian dining";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
	opacity: 0.3;
	color: #000;
	font-size: 43px;
	letter-spacing: 5px;
}
#intro h2::after{
	display: inline-block;
	content: "";
	width: 40px;
	height: 1px;
	background: #8C6239;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
#intro h2 span{border: none;}
#intro_txt p{line-height: 1.8}
#contents h3{font-size: 23px;}
#contents figure a{position: relative;}
#contents figure a::before {
	display: inline-block;
	content: "";
	width: 127px;
	height: 50px;
	background: rgba(255,255,255,1);
	position: absolute;
	bottom: -30px;
	left: -29px;
	transform: rotate(33deg);
	z-index: 1;
}
.top_cms_box h2 {font-size: 40px;}


/* 他 ---------------------------------------------------------------------------------------------*/
#page_title{background-position: center!important;}
#page_title #filter_white{background-color: rgba(188, 170, 143, 0.28)!important;}
.cate_list li a{border-bottom: 1px solid #212121;}

#cms_5-c .box_title1,#cms_5-c .box_txt1{padding-left: 0;}
#cms_5-c .box_title1::before,#cms_5-c .box_txt1::before{display: none;}



/* IE */
@media all and (-ms-high-contrast: none){
#main_img::before{
	background-repeat: no-repeat;
	background-size: cover;
}
#cms_5-c .cate_title{padding-bottom: 2px;}
header #header #header_menu li:last-child a span{padding-top: 4px;padding-bottom: 7px;margin-top: 5px;}
.more a{padding-top: 5px;}
#info_title_box .info_title span{padding: 11px 40px 12px;}
#page_title h2 span{padding-top: 15px;}
#intro,#info_title_box{background-position: center!important;background-repeat: no-repeat!important;background-attachment: fixed!important;}
}
/* IE タブレット以下 */
@media all and (-ms-high-contrast: none) and (max-width: 768px){
#intro,#info_title_box{background-position: center!important;background-repeat: no-repeat!important;background-attachment: scroll!important;}
}
/* Edge */
@supports (-ms-ime-align: auto) {
#intro,#info_title_box{background-position: center!important;background-repeat: no-repeat!important;background-attachment: fixed!important;}
}
/* Edge タブレット以下 */
@media all and (max-width: 768px){
@supports (-ms-ime-align:auto){
#intro,#info_title_box{background-position: center!important;background-repeat: no-repeat!important;background-attachment: scroll!important;}
}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#video{height: auto;}
#video{height: 50vh;}/*動画来たら消す*/
.video{transform: none;width: 100%!important}
#contents figure a::before{width: 96px;}
.logo {width: 126px;}
#logo{margin-bottom: 16px;}
#page_title #filter_white {padding-top: 197px!important;}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
#video {height: 36vh;}
header.transform {background: rgba(96, 56, 19, 0.57)!important;}
header .logo{width: 122px;}
header.transform .logo {width: 94px;}
.drawer-hamburger{transform: translateY(6px);}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{background-color: rgb(255, 255, 255)!important;}
.drawer-open .drawer-hamburger-icon {background-color: transparent!important;}

#intro #intro_txt{padding-top: 50px;}
#intro h2{font-size: 22px;}
#intro h2::before{font-size: 36px;}
#contents h3{font-size: 22px;}
#contents figure a::before{width: 64px;}
#contents .grid_11{width: 100%!important;}
.top_cms_box h2{font-size: 32px;}
}

/* 2022.12.07 */
#main_img{
	height: auto;
	max-height: 100vh;
	position: relative;
}
#main_img .main_img_wrap{
    height: 650px;
}
#main_img .main_img_wrap:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(70,70,70,0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#main_img #left, #main_img #right{z-index: 0;}
#main_img .main_logo{z-index: 1;}
#intro h2 {
opacity: 1!important;
    transform: none!important;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main_img .main_img_wrap{
    height: 569px;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
header {padding-bottom: 0;}
header .logo {
    width: 106px;
}
#main_img .main_img_wrap{
    height: 100vw;
}
#main_img #left, #main_img #right{
    height: 50%;
}
#main_img .main_logo {
    max-width: 120px;
}
}