@charset "utf-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, fieldset, form, label, legend, table, caption, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	border: 0;
	outline: 0;
	font-size: 100%;
	font-style: normal;
	vertical-align: baseline;
	background: transparent;
	margin: 0;
	padding: 0
}
main, article, aside, details, summary, blockquote, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block
}
h2, h3, h4, h5, dl, dt, dd, ol, ul, p, figure {
	margin: 0;
}
ul {
	list-style: none
}
li {
	margin-bottom: 0
}
img, iframe {
	vertical-align: top
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
html {
	overflow-y: scroll;
	overflow-x: hidden;
}
body {
	font-size: 16px;
	line-height: 1;
	letter-spacing: .1em;
	font-family: "Ryumin Light KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-family: "Shimanami";
	font-feature-settings: "palt";
	-webkit-text-size-adjust: 100%;
	margin: 0 auto;
	padding: 0;
}
a {
	color: #000;
	font-size: 100%;
	vertical-align: baseline;
	text-decoration: none;
	margin: 0;
	padding: 0;
	transition: 0.75s;
}
a:hover,
label:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	transition: 1s;
}

/*------------------------------------------------------------------------*/

@media screen and (min-width: 768px) {
	.sp {
		display: none!important
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
}

/*------------------------------------------------------------------------*/

@media screen and (max-width: 767px) {
	.pc {
		display: none!important
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■header
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

header {
	width: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 4;
}
header h1 {
	margin: 0 30px;
	padding: 0;
}
header h1 img {
	width: 200px;
	height: 41px;
}
header nav {
	margin: 0;
	padding: 0;
}
header input {
	display: none
}
header label {
	width: 103px;
	height: 103px;
	padding: 0;
	margin: 0 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	position: relative;
	z-index: 14;
	transition: 0.75s;
}
header label:before {
	content: "";
	display: block;
	width: 23px;
	height: 23px;
	background: url(../img/header_icon_drawer_open.svg) no-repeat center center / 16px 23px;
}
header input:checked+label:before {
	content: "";
	display: block;
	width: 23px;
	height: 23px;
	background: url(../img/header_icon_drawer_close.svg) no-repeat left top / cover;
}
header input:checked+label+div {
	transform: scale(1);
	visibility: visible;
	opacity: 1;
	overflow: auto;
	z-index: 4;
}

header div {
	visibility: hidden;
	opacity: 0;
	transition: all 0.75s ease;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	background: rgba(255, 255, 255, .95);
	display: flex;
	align-items: center;
	justify-content: center;
}
header div ul {
	margin: 0;
	padding: 0;
}
header div li {
	margin: 0 0 40px 0;
	padding: 0;
}
header div li:last-child {
	margin-bottom: 0;
}
header div li a {
	display: flex;
	align-items: flex-end;
	font-size: 36px;
	font-size: 32px;
}
header div li a small {
	font-size: 18px;
	margin-left: 20px;
	position: relative;
	margin-bottom: 2px;
}
header div li a:hover {
}


/*------------------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1080px) {

	header div li a {
		font-size: 3.2vw;
	}

}
/*------------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	header h1 {
		margin: 17px;
	}
	header h1 img {
		width: 75px;
		height: 16px;
	}
	header label {
		width: 63px;
		height: 56px;
	}
	header div li {
		margin-bottom: 30px;
	}
	header div li:last-child {
		margin-bottom: 0;
	}
	header div li a {
		font-size: 22px;
	}
	header div li a small {
		margin-left: 15px;
		position: static;
		bottom: 0;
	}

}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■Layout
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

main {
	margin: 0 auto;
	padding: 103px 0 0 0;
}
article {}
section {
	max-width: 1000px;
	margin: 0 auto;
	padding: 80px 20px;
	transition: opacity 1.5s, transform 1.5s;
}

section h2 {
	font-size: 36px;
	font-weight: 400;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text-align: center;
	margin: 0 0 80px 0;
	white-space: nowrap;
}
section h2 small {
	flex: none;
	font-size: 18px;
	margin-left: 20px;
	position: relative;
	margin-bottom: 2px;
}
section h3 {
	font-weight: 400;
}
section p {
	line-height: 2;
}

.shimanami {
	font-family: "Shimanami";
}
.gothic {
	font-family: "A1 Gothic L";
}

.iframe {
	width: 100%;
	max-width: 1000px;
	padding: 0;
	margin: 0 0 80px 0;
}
.iframe:last-of-type {
	margin-bottom: 0;
}
.iframe span {
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	display: block;
}
.iframe span iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 8;
}

/*------------------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1080px) {

	section h2 {
		font-size: 3.2vw;
	}

}

/*------------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	main {
		padding-top: 56px;
	}

	section {
		max-width: auto;
		margin: 0;
		padding: 30px 20px;
	}
	section h2 {
		font-size: 22px;
		margin-bottom: 30px;
	}
	section h2 small {
		margin-left: 15px;
		position: static;
		bottom: 0;
	}
	.iframe {
		margin-bottom: 30px;
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■loading
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.loading{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #fff;
	z-index: 20;
}
.animation{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.animation .logo{
	margin: 0
}
.animation .logo img{
	width: 150px;
	height: 19px;
}

/* アニメーション */
.animation{
	-webkit-animation: loadinganimation 1800ms ease-out forwards infinite;
	animation: loadinganimation 1800ms ease-out forwards infinite;
}
@keyframes loadinganimation{
	from,to{
		opacity: 0;
	}
	50%{
		opacity: .5;
	}
}


/*------------------------------------------------------------------------*/

@media screen and (max-width: 767px) {


}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■mv
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.mv {
	max-width: 1200px;
	margin: 0 auto 90px auto;
	padding: 0 20px;
}
.mv img {
	width: 100%;
}

/*------------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	.mv {
		margin-bottom: 30px;
		padding: 0 10px;
	}

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■read
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.read {
	margin: 0 auto 64px auto;
	padding: 0;
}
.read p {
	font-size: 40px;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-align: center;
	margin: 0;
}

/*------------------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1080px) {

	.read p {
		font-size: 3.6vw;
	}

}

/*------------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	.read {
		margin-bottom: 20px;
	}
	.read p {
		font-size: 20px;
		letter-spacing: 0.05em;
	}

}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■News
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#news {
}
#news ul {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
#news li {
	width: calc(50% - 20px);
	width: -webkit-calc(50% - 20px);
	margin: 0;
	padding: 0;
}
#news li h3 {
	font-size: 32px;
	font-family: "A1 Gothic L";
	font-weight: 400;
	text-align: center;
	margin-bottom: 20px;
}

#news li .box {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 0;
	padding-top: 100%;
	position: relative;
	display: block;
	overflow: hidden;
}
#news li .box .scroll {
	border: 1px solid #eee;
	box-sizing: border-box;
	overflow-y: scroll;
}

#news li .box div {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/*------------------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1080px) {

	#news li h3 {
		font-size: 3.0vw;
	}

}

/*-----------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	#news ul {
		display: block;
	}
	#news li {
		width: 100%;
		max-width: 480px;
		margin: 0 auto 30px auto;
	}
	#news li:last-child {
		margin-bottom: 0;
	}
	#news li h3 {
		font-size: 20px;
		margin-bottom: 15px;
	}


}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■Introduction
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#introduction {
	padding-bottom: 70px;
}
#introduction h3 {
	font-size: 36px;
	font-weight: 400;
	text-align: center;
	margin: 76px 0 64px 0;
}
#introduction h4 {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	margin: 0 0 64px 0;
}
#introduction h4 span {
	letter-spacing: 0em;
}
#introduction p {
	font-size: 20px;
	font-family: "A1 Gothic M";
}
#introduction p img {
	max-width: 100%;
}


/*------------------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1080px) {

	#introduction h3 {
		font-size: 3.2vw;
	}
	#introduction h4 {
		font-size: 3.0vw;
	}

}

/*-----------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	#introduction {
		padding-bottom: 24px;
	}
	#introduction h3 {
		font-size: 20px;
		line-height: 1.5;
		margin: 25px 0 20px 0;
	}
	#introduction h4 {
		font-size: 18px;
		margin-bottom: 20px;
	}
	#introduction p {
		font-size: 16px;
	}


}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■Cast & Director
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#cast,
#director {
}
#cast dl,
#director dl {
	margin: 0 0 80px 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
#cast dl:last-of-type,
#director dl:last-of-type {
	margin-bottom: 0;
}
#cast dt,
#director dt {
	width: calc(50% - 20px);
	width: -webkit-calc(50% - 20px);
	margin: 0;
	padding: 0;
}
#cast dt.message,
#director dt.message {
	box-sizing: border-box;
	border: 1px solid #000;
	font-size: 24px;
	line-height: 1.5;
	display: flex;
	align-items: center;
	justify-content: center;
}
#cast dt img,
#director dt img {
	width: 100%;
}
#cast dt figure,
#director dt figure {
}
#cast dt figcaption,
#director dt figcaption {
	margin-top: 10px;
	font-size: 12px;
	text-align: right;
}
#cast dd,
#director dd {
	width: calc(50% - 20px);
	width: -webkit-calc(50% - 20px);
	margin: 0;
	padding: 0;
}
#cast dd h3,
#director dd h3 {
	font-size: 32px;
	margin: 0 0 32px 0;
	display: flex;
	align-items: flex-end;
}
#cast dd h3 small,
#director dd h3 small {
	font-size: 20px;
	margin-left: 10px;
	position: relative;
	margin-bottom: 2px;
}

/*------------------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1080px) {

	#cast dt.message,
	#director dt.message {
		font-size: 2.2vw;
	}

	#cast dd h3,
	#director dd h3 {
		font-size: 3.0vw;
	}
	#cast dd h3 small,
	#director dd h3 small {
		font-size: 1.8vw;
	}

}

/*-----------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	#cast,
	#director {
		padding-bottom: 22px;
	}
	#cast dl,
	#director dl {
		display: block;
		margin-bottom: 30px;
	}
	#cast dt,
	#director dt {
		width: 100%;
		margin-bottom: 30px;
	}
	#cast dt.message,
	#director dt.message {
		font-size: 20px;
		padding: 20px 0;
	}
	#cast dd,
	#director dd {
		width: 100%;
	}
	#cast dd h3,
	#director dd h3 {
		font-size: 20px;
		margin-bottom: 22px;
		justify-content: center;
	}
	#cast dd h3 small,
	#director dd h3 small {
		font-size: 14px;
		position: static;
		bottom: 0;
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■Comments
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#comments {
}
#comments ul {
	margin: 0;
	padding: 0;
}
#comments li {
	margin: 0 0 40px 0;
	padding: 32px 40px 30px 40px;
	background: #fafafa;
}
#comments li:last-of-type {
	margin-bottom: 0;
}
#comments li dl {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}
#comments li dt {
	order: 2;
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
#comments li dt small {
	font-size: 16px;
	margin-left: 10px;
	position: relative;
	margin-bottom: 2px;
}
#comments li dd {
	order: 1;
	margin: 0;
	padding: 0;
}
#comments li dd p {
	margin: 0 0 20px 0;
}


/*-----------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	#comments li {
		margin-bottom: 20px;
		padding: 16px 20px 20px 20px;
	}
	#comments li dt {
		font-size: 18px;
		line-height: 1;
		flex-direction: column;
	}
	#comments li dt small {
		font-size: 14px;
		margin: 10px 0 0 0;
		position: static;
		bottom: 0;
	}
	#comments li dd p {
		margin-bottom: 10px;
	}

}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■Theaters
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#theaters {
}
#theaters .table {
	border: 1px solid #eee;
	border-right: 0;
	margin: 0 0 18px 0;
}
#theaters .table > .head {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}
#theaters .table > .head li {
	width: calc(50% - 120px);
	width: -webkit-calc(50% - 120px);
	font-weight: 500;
	background: #f5f5f5;
	margin: 0;
	padding: 16px 0;
	border-right: 1px solid #eee;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#theaters .table > .head li:first-child,
#theaters .table > .head li:last-child {
	width: 120px;
}

#theaters .body {
	margin: 0;
	padding: 0;
	display: flex;
	font-family: "A1 Gothic L";
}
#theaters .body:nth-of-type(odd) {
	background: #fafafa;
}
#theaters .body li {
	width: calc(50% - 120px);
	width: -webkit-calc(50% - 120px);
	margin: 0;
	padding: 12px 0;
	border-right: 1px solid #eee;
	box-sizing: border-box;
	line-height: 1.5;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#theaters .body li:first-child,
#theaters .body li:last-child {
	width: 120px;
}
#theaters .body li .head {
	display: none;
}
#theaters .body li a {
	text-decoration: underline;
}
#theaters .notice {
	font-size: 14px;
	font-family: "A1 Gothic L";
	line-height: 1.4;
	text-align: right;
}
#theaters .banner {
	margin: 80px auto 0 auto;
}
#theaters .banner a {
	width: 100%;
	height: 125px;
	border: 1px solid #808080;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
#theaters .banner img {
	width: 722px;
}

/*-----------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {


	#theaters .table {
		border: 0;
	}
	#theaters .table > .head {
		display: none;
	}

	#theaters .body {
		display: block;
		border: 1px solid #000;
		margin: 0 0 20px 0;
		padding: 20px;
	}
	#theaters .body:last-of-type {
		margin-bottom: 0;
	}
	#theaters .body:nth-of-type(odd) {
		background: none;
	}
	#theaters .body li {
		width: 100%;
		padding: 0;
		margin: 0 0 10px 0;
		border-right: 0;
		display: flex;
		align-items: center;
		justify-content: start;
		text-align: left;
	}
	#theaters .body li:first-child,
	#theaters .body li:last-child {
		width: auto;
	}
	#theaters .body li:last-child {
		margin-bottom: 0;
	}
	#theaters .body li .head {
		flex: none;
		display: inline-block;
		background: #000;
		color: #fff;
		padding: 4px;
		margin: 0 10px 0 0;
		font-family: "Shimanami";
		line-height: 1;
	}
	#theaters .notice {
		text-align: left;
		text-indent: -1.1em;
		padding-left: 1.1em;
	}
	#theaters .banner {
		margin-top: 30px;
	}
	#theaters .banner a {
		height: 52px;
	}
	#theaters .banner img {
		width: 302px;
	}

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■footer
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

footer {
	padding: 0;
	margin: 80px 0;
}
footer nav {
	margin: 0 auto;
}
footer nav ul {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
footer nav li {
	margin: 0 20px;
	padding: 0;
}
footer nav li .facebook {
	width: 40px;
	height: 40px;
}
footer nav li .twitter {
	width: 40px;
	height: 32px;
}
footer .banner {
	width: 100px;
	margin: 80px auto 0 auto;
	text-align: center;
}
footer .banner a {
	width: 100%;
	height: 141px;
	border: 1px solid #808080;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
footer .banner img {
	width: 61px;
}
footer .pagetop {
	width: 40px;
	height: 40px;
	margin: 0;
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 3;
	display: none;
}
footer .pagetop a img {
	width: 40px;
	height: 40px;
}

footer .attention {
	position: fixed;
	left: 0;
	bottom: 40px;
	z-index: 3;
}
footer .attention .close label {
	width: 25px;
	height: 25px;
	margin: 0 0 0 auto;
	padding: 0;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
footer .attention .close input[type="checkbox"] {
	display: none;
}
footer .attention .close img {
	width: 15px;
	height: 15px;
}
footer .attention .mark label {
	width: 255px;
	height: 60px;
	margin: 0;
	padding: 0;
	background: #f00;
	font-size: 24px;
	font-weight: 400;
	font-family: "A1 Gothic M";
	letter-spacing: .1em;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: underline;
}
footer .attention .mark label:hover {
	text-decoration: none;
}
footer .attention .mark img {
	width: 30px;
	height: 27px;
	margin-right: 10px;
}



footer .private-screening {
	position: fixed;
	left: 295px;
	bottom: 40px;
	z-index: 3;
}
footer .private-screening .close label {
	width: 25px;
	height: 25px;
	margin: 0 0 0 auto;
	padding: 0;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
footer .private-screening .close input[type="checkbox"] {
	display: none;
}
footer .private-screening .close img {
	width: 15px;
	height: 15px;
}
footer .private-screening .mark a {
	width: 255px;
	height: 60px;
	margin: 0;
	padding: 0;
	background: #000;
	font-size: 24px;
	font-weight: 400;
	font-family: "Shimanami";
	letter-spacing: .1em;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
}




/*-----------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	footer {
		margin: 30px 0 40px 0;
	}
	footer nav li {
		margin: 0 10px;
	}
	footer nav li .facebook {
		width: 20px;
		height: 20px;
	}
	footer nav li .twitter {
		width: 20px;
		height: 16px;
	}

	footer .banner {
		width: 85px;
		margin-top: 40px;
	}
	footer .banner a {
		height: 120px;
	}
	footer .banner img {
		width: 52px;
	}

	footer .pagetop {
		right: 20px;
		bottom: 20px;
	}




	footer .attention {
		bottom: 20px;
	}
	footer .attention .close label {
		width: 20px;
		height: 20px;
	}
	footer .attention .close img {
		width: 12px;
		height: 12px;
	}
	footer .attention .mark label {
		width: 200px;
		height: 45px;
		font-size: 18px;
	}
	footer .attention .mark img {
		width: 23px;
		height: 20px;
		margin-right: 7px;
	}




	footer .private-screening {
		left: 0;
		bottom: 105px;
	}
	footer .private-screening .close label {
		width: 20px;
		height: 20px;
	}
	footer .private-screening .close img {
		width: 12px;
		height: 12px;
	}
	footer .private-screening .mark a {
		width: 200px;
		height: 45px;
		font-size: 18px;
	}



}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■modal
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.modal {
	width: 100%;
	margin: 0;
	padding: 0;
}
.modal input[type="checkbox"] {
	display: none;
}
.modal .overlay {
	visibility: hidden;
	opacity: 0;
	transition: all 0.25s ease;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, .75);
}
.modal .close {
	width: 100%;
	height: 100%;
	position: fixed;
	cursor: pointer;
	left: 0;
	top: 0;
	background: url(../img/header_icon_drawer_close.svg) no-repeat right 40px top 40px / 23px 23px;
}
.modal input:checked~.close {
	z-index: 8;
}
.modal input:checked~.overlay {
	transform: scale(1);
	visibility: visible;
	opacity: 1;
	z-index: 7;
	overflow: auto;
}
.modal input:checked~.overlay .iframe {
	z-index: 9;
}

.modal label img {
	width: 23px;
	height: 23px;
}
.modal .wrap {
	width: 100%;
	max-width: 1060px;
	margin: auto;
	padding: 0 30px;
	box-sizing: border-box;
	position: relative;
}

/*-----------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	.modal .close {
		background: url(../img/header_icon_drawer_close.svg) no-repeat right 20px top 17px / 23px 23px;
	}
	.modal .wrap {
		padding: 0 20px;
	}

}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	■modal-attention
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.modal-attention {
	width: 100%;
	margin: 0;
	padding: 0;
}
.modal-attention input[type="checkbox"] {
	display: none;
}
.modal-attention .overlay {
	visibility: hidden;
	opacity: 0;
	transition: all 0.25s ease;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, .95);
}
.modal-attention .close {
	width: 100%;
	height: 100%;
	position: fixed;
	cursor: pointer;
	left: 0;
	top: 0;
	background: url(../img/header_icon_drawer_close.svg) no-repeat right 40px top 40px / 23px 23px;
}
.modal-attention input:checked~.close {
	z-index: 8;
}
.modal-attention input:checked~.overlay {
	transform: scale(1);
	visibility: visible;
	opacity: 1;
	z-index: 7;
	overflow: auto;
}
.modal-attention input:checked~.overlay .iframe {
	z-index: 9;
}

.modal-attention label img {
	width: 23px;
	height: 23px;
}
.modal-attention .wrap {
	width: 100%;
	max-width: 1060px;
	margin: auto;
	padding: 0 30px;
	box-sizing: border-box;
	position: relative;
}

.modal-attention h1 {
	font-size: 24px;
	font-weight: 400;
	font-family: "A1 Gothic M";
	letter-spacing: .1em;
	color: #f00;
	text-decoration: underline;
	text-align: center;
	margin: 0 0 75px 0;
}
.modal-attention h2 {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.3125;
	letter-spacing: .1em;
	text-align: center;
	margin: 0 0 65px 0;
}
.modal-attention h2 .nowrap {
	white-space: nowrap!important;
	word-break: keep-all!important;
}
.modal-attention h2 + p {
	font-size: 20px;
	font-weight: 400;
	line-height: 2;
	letter-spacing: .1em;
	margin: 0 0 70px 0;
}
.modal-attention .logo {
	margin: 0 auto;
	text-align: center;
}
.modal-attention .logo img {
	width: 250px;
	height: 32px;
}

/*-----------------------------------------------------------------------*/

@media screen and (max-width: 767px) {

	.modal-attention .close {
		background: url(../img/header_icon_drawer_close.svg) no-repeat right 20px top 17px / 23px 23px;
	}
	.modal-attention .wrap {
		padding: 0 20px;
	}


	.modal-attention h1 {
		font-size: 18px;
		margin-bottom: 55px;
	}
	.modal-attention h2 {
		font-size: 20px;
		line-height: 1.5;
		letter-spacing: .05em;
		margin-bottom: 17px;
	}
	.modal-attention h2 + p {
		font-size: 16px;
		margin-bottom: 52px;
	}
	.modal-attention .logo img {
		width: 200px;
		height: 26px;
	}



}