@charset "utf-8";

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


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

/*メインビジュアル背景*/
.mv {
	background-color: #f4f0eb;
	/*	画像はこちら↓ */
		background: url(../images/permanent/bg_stripe.gif) repeat center;
	margin-top: -1px;
}
/*アクセントカラー（背景色）*/
.nav,
.ttl_h2:before,
.slick-arrow,
.slick-active button::before,
.popup_close {
	background-color: #e3027c;
}

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

.popup_close {
	border-color: #e3027c;
}


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

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

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

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

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


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

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

/*コンテンツ背景*/
.contents {
	background-color: #f4f0eb;
}

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

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

.banner_wide {
    max-width: 500px;
    margin: 0 auto 30px;
}

.images_list {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	justify-content: flex-start;
    width: calc(750 / 964 * 100%);
    margin: 0 auto;
    flex-wrap: wrap;
}

.images_list li {
    margin-left: calc(5 / 750 * 100%);
    margin-right: calc(5 / 750 * 100%);
    margin-bottom: calc(30 / 750 * 100%)!important;
    min-width: calc(110 / 750 * 100%);
    width: 30%;
}

.area_list{
	position: relative;
}
.area_name{
	position: absolute;
	top:0;
	left:0;
	padding: 1% 5%;
	color: #fff;
	font-weight: bold;
	background-color: #dd9ba4;
}
.wrapper section:not(:last-child) {
    border-bottom: none;
}

.btn_wide {
    max-width: 250px;
    margin: 0 auto 30px;
}
.nextoa{
	text-align: center;
    font-size: 3rem;
    font-weight: bold;
    padding: 2rem;
}
@media screen and (max-width: 768px) {
	#main {
    background-size: 20px auto;
}
	.mv {
    background-size: 20px auto;
}
	.inner {
    width: 90%;
	}
	.images_list {
    justify-content: space-between;
    width: 100%;
}
	.images_list li {
    width: 45%;
		margin-bottom: calc(60 / 750 * 100%)!important;
}
.nextoa{
    font-size: 2.5rem;
}
}