@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : layout.css
Description : レイアウト用CSS
===================================================================== */


/* ==========================================================
	共通
========================================================== */

/*メインビジュアル背景*/
.mv {
	background-color: #fff456;
	/*	画像はこちら↓ */
	/*	background: url(../images/bg.png) repeat center;*/
}

/*アクセントカラー（背景色）*/
.nav,
.ttl_h2:before,
.slick-arrow,
.slick-active button::before,
.popup_close {
	background-color: #5ba5fa;
}

/*アクセントカラー（文字色）*/
.ttl_h3,
.wrapper .txt_link,
.wrapper b.highlight,
.cast_name1 {
	color: #f8bc2c;
}

.popup_close {
	border-color: #eacfb7;
}


/* ==========================================================
	header
========================================================== */

/*メニューの幅(SP) 
　※calc(### / 750 * 100%)の###部分を変更してください*/
.nav ul {
	width: calc(1200 / 750 * 100%);
	justify-content: space-around;
}

/*メニューの文字色*/
.nav a {
	color: #fff;
}

/*メニューの文字色：ホバー*/
/*テキストリンクの文字色：ホバー*/
.nav a:hover,
.txt_link:hover {
	color: #000;
}

/*メニューの下線：ホバー*/
.nav a:hover:after {
	background-color: #000;
}


/* ==========================================================
	コンテンツ
========================================================== */

/*コンテンツ外側の背景*/
#main {
	background-color: #fff456;
    /*	画像はこちら↓ */
    /*	background: url(../images/bg.png) repeat center;*/
}

/*コンテンツ背景*/
.contents {
	background-color: #fff;
	border-left: 1.2rem solid #5ba5fa;
	border-right: 1.2rem solid #5ba5fa;
}

/*スライダーの矢印ボタン：ホバー*/
/*ポップアップのクローズボタン：ホバー*/
.slick-arrow:hover,
.popup_close:hover {
	background-color: #000;
}

/*ポップアップのクローズボタン：ホバー*/
.popup_close:hover {
	border-color: #000;
}

.bold-txt {
font-weight: bold;
}

.item {
    width: 100%;
	margin-bottom: 1em;
	
}

@media screen and (min-width: 768px) {
	.guestBox{
	display: flex;
	justify-content: space-between;
    margin-bottom: 1em;
}
.item {
    width: 49%;
	margin-bottom: 0;
}
}

.gDef-top-banner {
    background-color: #5ba5fa;
}
.sub_text{
	margin-bottom: 2em;
}
.logo{
	width: 88px !important;
	height: 17px !important;
	display: inline !important;
    vertical-align: middle;
}
.campaign_box{
	width:100%;
	margin: 6rem auto 3rem;
	padding: 1rem;
	text-align: center;
	/* background-color: #fff8e0;
	border: 4px solid #f8bc2c; */
} 
.campaign_box a{
	display: inline;
	color: #5ba5fa;
	text-decoration: underline;
}

.link_box{
	width: fit-content;
	margin: 1rem auto;
	padding: 2rem 3rem;
	border-radius: 2rem;
	background-color: #fc5744;
	font-size: 2.4rem;
}
.link_box a{
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
.link_box a:hover{
	opacity: 0.7;
}

@media screen and (min-width: 768px) {
	.campaign_box{
		width:calc(600 / 1024 * 100%);
	}
}

.present_box{
	display: flex;
	justify-content: center;
	text-align: center;
	min-height: 50vh;
}
.present_box a{
	display: inline;
	color: #5ba5fa;
	text-decoration: underline;
}

.enjooy_header{
background-color: #fabe00;
}

.enjooy_header h1{
	padding:1rem 1.5rem;
    margin: 0;
}
.enjooy_header h1 img{
	width: 4.6rem;
}
.highlight{
	display: block;
}
.text_box{
	width: 100%;
}
.photo_box{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-top: 3rem;
}
.photo_box p{
	width: 49%;
}
.cast_box{
	display: flex;
}
.cast_box li{
width: calc(350 / 750 * 100%);
margin-right: 1rem;
}
.cast_id dd{
	text-align: center;
}

@media screen and (min-width: 768px) {
	.highlight{
		display: flex;
	}
	.text_box{
		width: 40%;
	}
	.photo_box{
		width: 60%;
		display: flex;
		justify-content: space-between;
		align-items: end;
	}
	.photo_box p{
		width: 49%;
	}
	.cast_box{
		display: flex;
	}
	.cast_box li{
	width: calc(200 / 940 * 100%);
	margin-right: 1rem;
	}
	.cast_id dd{
		text-align: center;
	}
}

.present{
	/* background: url(../images/bg_top.png) repeat-x top center; */
	padding: 0 !important;
	margin: 0 calc(50% - 50vw);
    width: 100vw;
	background-size: contain;
}
.present h2{
	width: 97%;
	margin: 0 auto;
	position: relative;
    z-index: 1;
}
.present h2 img{
	width: 100%;
	margin: 0 auto;
}
.present p img{
	width: 97%;
	margin: -5rem auto 0;
	z-index: 0;
    position: relative;
}
.wrapper section:not(:last-child) {
     border-bottom:none;
}

@media screen and (min-width: 768px) {
	.present h2 img{
		width: 86%;
		max-width: 1000px;
	}
	.present p img{
		width: 83%;
		max-width: 1000px;
	}
}