@charset "utf-8";
/* デスクトップ＆スマホ共通項目 */
body {background-color: #31313a;}
header#header_190926, header#header_191006{
font-size: 0em;
}
#archives a, #karte_nav a {
	color: #e50065;
	text-decoration: none;
	border-bottom: #e50065 2px dotted;
}
.ro-shino {
/*font-family: ro-shino-std, serif;
font-weight: 400;
font-style:normal;*/
font-family: 'Shippori Mincho B1', serif;
font-weight: 600;
color: #333;
}
.b_name {
	color: #e50065;
	font-weight: 900;
}

@media (min-width: 1180px){
	#movie {
	display: block;
	position: relative;
	width: 800px;
	height: 450px;
	margin: 0 auto;
	margin-top: 70px;
	}
	#movie .tvo-video {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0 ;
	right: 0;
	}
	#header_190926 {
	background: url("../images/common/desktop/header_190926.jpg") center top no-repeat;
	height: 270px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	} 
	#header_191006 {
	background: url("../images/common/desktop/header_191006.jpg") center top no-repeat;
	height: 270px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	} 
	#main {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 175%;
	}
	#ttl_karte {
	background: url("../images/karte/desktop/ttl_karte.png")center top no-repeat;
	width: 260px;
	height: 258px;
	margin: 0 auto;
	margin-top: -120px;
	font-size: 0em;
	position: relative;
	z-index: 2;
	}
	#karte {
	width: 1180px;
	margin: 0 auto;
	margin-top: -120px;
	display: flex;
	position: relative;
	z-index: 1;
	}
	#karte article {
	background-color: #fff;
	margin: 0 auto;
	margin-top: -30px;
	margin-right: 1%;
	padding: 20px;
	width: 80%;
	}
	#karte article h1 {
	margin: 0;
	margin-bottom: 10px;
	padding: 10px 20px;
	font-size: 28px;
	line-height: 150%;
	color: #e50065;
	text-align: center;
	border-bottom: #e50065 1px solid;
	}
	#karte article h2 {
	margin-top: 50px;
	padding-top:20px; 
	font-size: 28px;
	color: #e50065;
	text-align:center;
	border-top: #e50065 3px solid;
	}
	#karte article h3, #karte article dt {
	background-color:#dfdfdf;
	margin: 15px 0;
	margin-top: 30px;
	padding: 7px;
	font-size: 18px;
	color: #e50065;
	text-indent: 1rem;
	/*text-align: center;*/
	}
	#karte article h4 {
	margin: 30px 0;
	padding: 15px 0;
	font-size: 18px;
	color: #e50065;
	text-align: center;
	border-top: #e50065 2px solid;
	border-bottom: #e50065 1px solid;
	}
	#karte article p, #karte article dd {
	width: 96%;
	margin: 15px auto;
	font-size: 16px;
	line-height: 175%;
	}
	#karte .guest_photo {
	width: 50%;
	margin: 15px auto;
	}
	#karte article img {
	width: 100%;
	}
	.lip {
	display: block;
	background: url("../images/karte/common/lip.png") no-repeat;
	width: calc(90px * 0.3) ;
	height: calc(68px * 0.3);
	background-size: contain;
	margin:5px; 
	float: left;
	}
	#karte article dd {
	line-height: 175%;
	}
	article #photos {
	display: flex;
	flex-wrap: wrap;
	}
	article #photos a {
	width: 33%;
	height: auto;
	margin: 1px;
	}
	article #photos a:hover {
	opacity: 0.7;
	}
	#karte #cast_yamamoto {
	background: url("../images/karte/desktop/cast_yamamoto@2x.png") center no-repeat;
	/*background-color: #635863;*/
	width: 418px;
	height: 379px;
	background-size: contain;
	font-size: 0em;
	}
	#karte #provide {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	}
	#karte #provide li {
	width: 40%;
	text-align: center;
	}
	.comment a {
	width: 47%;
	margin-right: 3%;
	float: left;
	}
	#archives {
	background-color: #fff;
	width: 20%;
	margin: 0 auto;
	margin-top: -30px;
	padding: 20px;
	}
	#archives .ttl_archives {
	font-size: 16px;
	color: #e50065 ;
	text-align: center;
	border-bottom: #e50065 2px solid;
	}
	#archives a {
	border: none;
	}
	#archives dl {
	width: 100%;
	margin: 0 auto;
	padding: 10px 0;
	border-bottom: #DFDFDF 1px solid;
	}
	#archives dt {
	width: 100%;
	margin: 0 auto;
	}
	#archives dd {
	width: 100%;
	height: auto;
	font-size: 14px;
	line-height: 150%;
	text-align: center;
	}
	#archives dd img {
	width: 100%;
	height: auto;
	}
	#karte_nav {
	background-color: #fff;
	width: 100%;
	margin: 0 auto;
	margin-top: -30px;
	padding: 20px;
	}
	#karte_nav .ttl_archives {
	font-size: 16px;
	color: #e50065 ;
	text-align: center;
	border-bottom: #e50065 2px solid;
	margin-top: 120px;
	}
	#karte_nav a {
	border: none;
	}
	#karte_nav dl {
	width: 24.5%;
	margin: 0 2px 16px;
	padding: 10px 0;
	float: left;
	}
	#karte_nav dt {
	width: 100%;
	margin: 0 auto;
	}
	#karte_nav dd {
	width: 100%;
	height: auto;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
	}
	#karte_nav dd img {
	width: 100%;
	height: auto;
	}
}

/* タブレット */
@media screen and (min-width:600px) and (max-width:1179px) {
	#movie {
	display: block;
	position: relative;
	width: 100%;
	padding-top:calc(9 / 16 * 100%);
	margin: 3% auto;
	background-size: contain;
	clear: both;
	}
	#movie .tvo-video {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0 ;
	right: 0;
	}
	
	#main {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	width:100%;
	margin: 0 auto;
	}	

	#header_190926 {
	background: url("../images/common/tablet/header_190926.png") center top no-repeat;
	width: calc(1536 / 1536 * 100%);
	height: 0;
	padding-bottom: calc(351 / 1536 * 100%);
	background-size: contain;
	margin:0 auto;
	} 
	#header_191006 {
	background: url("../images/common/tablet/header_191006.png") center top no-repeat;
	width: calc(1536 / 1536 * 100%);
	height: 0;
	padding-bottom: calc(351 / 1536 * 100%);
	background-size: contain;
	margin:0 auto;
	} 
	#ttl_karte {
	background: url("../images/karte/tablet/ttl_karte.png") no-repeat;
	width: calc(338 / 1536 * 100%);
 	height: 0;
	padding-bottom:calc(335 / 1536 * 100%);
	background-size: contain;
 	font-size: 0em;
	margin: 0 auto;
	margin-top: -11%;
	position: relative;
	z-index: 2;
	}
	#karte article {
	background-color: #fff;
	width: 92%;
	margin: 0 auto;
	margin-top: -11%;
	padding: 3% 2%;
	position: relative;
	z-index: 1;
	}
	#karte article h1 {
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	line-height: 175%;
	color: #e50065;
	text-align: center;
	border-bottom: #e50065 1px solid;
	}
	#karte article h2 {
	margin-top: 4%;
	padding-top: 2%;
	font-size: 1.2rem;
	line-height: 175%;
	color: #e50065;
	border-top: #e50065 3px solid;
	text-align: center;
	}
	#karte article h3, #karte article dt {
	background-color: #dfdfdf;
	margin: 3% 0;
	padding: 2%;
	font-size: 0.9rem;
	line-height: 150%;
	color: #e50065;
	/*text-align: center;*/
	text-indent: 1rem;
	}
	#karte article h4 {
	margin: 3% 0;
	padding: 2% 0;
	font-size: 1.2rem;
	line-height: 175%;
	color: #e50065;
	text-align: center;
	border-top: #e50065 2px solid;
	border-bottom: #e50065 1px solid;
	}
	#karte article p, #karte article dd {
	width: 96%;
	margin: 3% auto;
	font-size: 0.9rem;
	line-height: 175%;
	}
	#karte article img {
	width: 100%;
	}
	.lip {
	display: block;
	background: url("../images/karte/common/lip.png") no-repeat;
	width: calc(90 / 1536 * 65%);
	height:0;
	padding-bottom: calc(68 / 1536 * 65%);
	background-size: contain;
	margin:1% 1% 0 0; 
	float: left;
	}
	#karte .guest_photo{
	width: 60%;
	margin: 3% auto;
	}
	article #photos {
	display: flex;
	flex-wrap: wrap;
	}
	article #photos a {
	width: 33%;
	height: auto;
	margin: 1px;
	}
	#karte #cast_yamamoto {
	background: url("../images/karte/desktop/cast_yamamoto@2x.png") center no-repeat;
	width: calc(837 / 1536 * 100%);
	height: 0;
	padding-bottom: calc(758 / 1536 * 100%);
	background-size: contain;
	margin:0 auto;
	font-size: 0em;
	}
	#karte #provide {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	}
	#karte #provide li {
	width: 40%;
	text-align: center;
	}
	.comment a {
	width: 47%;
	margin-right: 3%;
	float: left;
	}
	
	#archives, #karte_nav  {
	background-color: #fff;
	width: 92%;
	margin: 0 auto;
	margin-top: 2%;
	padding: 3% 2%;
	clear: both;
	}
	#archives .ttl_archives, #karte_nav .ttl_archives {
	font-size: 1.2rem;
	color: #e50065;
	text-align: center;
	padding-bottom: 1%;
	border-bottom: #e50065 2px solid;
	}
	#archives a, #karte_nav a {
	border: none;
	}
	#archives a dl, #karte_nav a dl {
	width: 31%;
	margin: 0 1%;
	padding: 1% 0;
	text-align: center;
	float: left;
	}
	#archives dt, #karte_nav dt {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 3%;
	}
	#archives dd, #karte_nav dd {font-size: 0.9rem; line-height: 150%;}
	#archives dd img, #karte_nav dd img {
	width: 15%;
	height: auto;
	}
}		

/* スマホ */
@media screen and (min-width:10px) and (max-width:599px) {
	#movie {
	display: block;
	position: relative;
	width: 100%;
	padding-top:calc(9 / 16 * 100%);
	margin: 3% auto;
	background-size: contain;
	}
	#movie .tvo-video {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0 ;
	right: 0;
	}
	main {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	width:100%;
	margin: 0 auto;
	}
	#header_190926 {
	background: url("../images/common/smp/header_190926.png") center top no-repeat;
	width: calc(750 / 750 * 100%);
	height: 0;
	padding-bottom: calc(258/ 750 * 100%);
	background-size: contain;
	margin: 0 auto;
	} 
	#header_191006 {
	background: url("../images/common/smp/header_191006.png") center top no-repeat;
	width: calc(750 / 750 * 100%);
	height: 0;
	padding-bottom: calc(258/ 750 * 100%);
	background-size: contain;
	margin: 0 auto;
	} 
	#ttl_karte {
	background: url("../images/karte/smp/ttl_karte.png") no-repeat;
	width: calc(338 / 750 * 100%);
 	height: 0;
	padding-bottom:calc(335 / 750 * 100%);
	background-size: contain;
 	font-size: 0em;
	position: relative;
	z-index: 2;
	}
	#karte article {
	background-color: #fff;
	width: 92%;
	margin: 0 auto;
	margin-top: -30%;
	padding: 2% 2%;
	position: relative;
	z-index: 1;
	}
	#karte article h1 {
	margin:0;
	padding: 2% 0;
	padding-top: 5%;
	font-size: 1.1rem;
	line-height: 175%;
	color: #e50065;
	text-align: right;
	border-top: #e50065 3px solid;
	border-bottom: #e50065 1px solid;
	}
	#karte article h2 {
	margin: 2% 0;
	padding-bottom: 5%;
	font-size: 1.0rem;
	line-height: 175%;
	color: #e50065;
	text-align: right;
	}
	#karte article h3, #karte article dt {
	background-color: #dfdfdf;
	margin: 3% 0;
	padding: 2%;
	font-size: 0.9rem;
	line-height: 175%;
	color: #e50065;
	/*text-align: center;*/
	text-indent: 1rem;
	}
	#karte article h4 {
	margin: 3% 0;
	padding: 2% 0;
	font-size: 1.0rem;
	line-height: 175%;
	color: #e50065;
	text-align: center;
	border-top: #e50065 2px solid;
	border-bottom: #e50065 1px solid;
	}
	#karte article p, #karte article dd {
	width: 96%;
	margin: 3% auto;
	font-size: 0.9rem;
	line-height: 175%;
	}
	.lip {
	display: block;
	background: url("../images/karte/common/lip.png") no-repeat;
	width: calc(90 / 750 * 50%);
	height:0;
	padding-bottom: calc(68 / 750 * 50%);
	background-size: contain;
	margin:2% 1% 0 0; 
	float: left;
	}
	#karte .guest_photo{
	width: 90%;
	margin: 3% auto;
	}
	article #photos {
	display: flex;
	flex-wrap: wrap;
	}
	article #photos a {
	width: 49%;
	height: auto;
	margin: 1px;
	}
	#karte #cast_yamamoto {
	background: url("../images/karte/desktop/cast_yamamoto@2x.png") center no-repeat;
	width: calc(837 / 750 * 75%);
	height: 0;
	padding-bottom: calc(758 / 750 * 75%);
	background-size: contain;
	margin:0 auto;
	font-size: 0em;
	}
	#karte #provide {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	}
	#karte #provide li {
	width: 45%;
	text-align: center;
	}
	.comment a {
	width: 90%;
	text-align: center;
	}
	
	#archives, #karte_nav  {
	background-color: #fff;
	width: 92%;
	margin: 0 auto;
	margin-top: 2%;
	padding: 2%;
	clear: both;
	}
	#archives .ttl_archives, #karte_nav .ttl_archives {
	padding: 2% 0;
	font-size: 1.0rem;
	color: #e50065;
	text-align: center;
	border-top: #e50065 2px solid;
	border-bottom: #e50065 1px solid;
	}
	#archives a, #karte_nav a {
	border: none;
	}
	#archives dl, #karte_nav dl {
	width: 46%;
	margin: 2% 1%;
	padding: 2% 0;
	text-align: center;
	float: left;
	}
	#archives dt, #karte_nav dt  {
	width: 90%;
	height :auto;
	margin: 0 auto;
	margin-bottom: 2%;
	}
	#archives dd, #karte_nav dd {
	font-size: 0.8rem;
	line-height: 175%;
	}
}