@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : base.css
Description :
===================================================================== */

/* =====================================================================
*    共通・大枠
* =================================================================== */
html {
	font-size: calc(10 / 750 * 100vw);
}

@media screen and (min-width: 768px) {
	html {
		font-size: 10px;
		overflow-y: scroll;
	}
}

body {
	overflow-x: hidden;
	color: #133b80;
	font-family: "M PLUS 1p", sans-serif;
	line-height: 1.5;
	letter-spacing: .05rem;
	margin: auto;
	position: relative;
}

.set1,
.set1 * {
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.set1 img {
	width: 100%;
	height: auto;
	display: block;
}

.set1 a {
	display: inline;
	color: #FFF;
	/*    text-decoration: none;*/
}


/* =====================================================================
*    section
* =================================================================== */
#wrapper {
background: #CBFFFE;
background: linear-gradient(90deg,rgba(203, 255, 254, 1) 0%, rgba(203, 255, 254, 1) 0%, rgba(129, 216, 255, 1) 100%);
background-repeat: no-repeat;
background-size: cover;

	/* background-size: calc(25 / 750 * 100%) auto; */
	/* height: 100vh; */
	/* display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center; */
}

.main {
	display: block;
}

@media screen and (min-width: 768px) {
	body::before {
		content: "";
		display: block;
		width: 100%;
		height: 100vh;
		background: url(../images/common/img_bg.jpg) no-repeat;
		background-size: cover;
        background-position: center top;
		position: fixed;
		top: 0;
		left: 0;
	}

	#wrapper {
		width: 750px;
		margin: 0 auto;
		position: relative;
		z-index: 2;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.5); 
    box-sizing: border-box;
	}
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
	/*
body::after {
width: 434px;
left: calc(30vw - 188px);
}
*/
}


/* =====================================================================
*    footer
* =================================================================== */
.footer {
	padding: calc(140 / 750 * 100%) 0 calc(50 / 750 * 100%);
	background: url(../images/common/bg_footer.jpg) repeat center top;
	background-size: calc(166 / 750 * 100%) auto;
	z-index: 100;
}

.footer_banner {
	position: relative;
	background: #000935;
}
/* .footer_banner::before {
	content: "";
	position: absolute;
	top:-2rem;
	right: -1rem;
	background: url(../images/common/snow_r.png);
	background-size: contain;
	width: 17.5rem;
	height: 20.7rem;
}
.footer_banner::after {
	content: "";
	position: absolute;
	bottom: -2rem;
	left: -4rem;
	background: url(../images/common/snow_l.png);
	background-size: contain;
	width: 19.5rem;
	height: 35.9rem;
	} */

/* .footer_banner li:not(:last-child) {
	margin: 0 0 calc(30 / 590 * 100%);
} */
 .footer_banner li {
	width: calc(600 / 750 * 100%);
	margin: 0 auto;
 }
.footer_banner a {
	display: block;
	/* border: 4px solid #1b5185; */
}

.footer small {
	display: block;
	color: #fff;
	font-size: 1.9rem;
	line-height: 1;
	text-align: center;
}


/* =====================================================================
*    popup
* =================================================================== */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: none;
}

.popup_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	    background: linear-gradient(90deg, rgba(203, 255, 254, 1) 0%, rgba(203, 255, 254, 1) 0%, rgba(129, 216, 255, 1) 100%);
}

.popup_area {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.popup_inner {
	margin: calc(150 / 750 * 100%) auto;
	z-index: 2;
}

.popup_list {
	width: 100%;
	height: 100%;
}

.popup_details {
	display: none;
	overflow: hidden;
}

.popup_ttl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: calc(30 / 750* 100%);
}



.popup_ttl span {
	margin: 0 0.6em;
	color: #ff1818;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}

.popup_box {
	width: calc(630 / 750* 100%);
	margin: 4rem auto;
	padding: 2em;
	background: #fff;
	box-shadow: 0px 0px 10px 2px #00eaff;

}
.popup_box_inner{
    background-color: #ffffff;
}
.poster{
	width: calc(630 / 750* 100%);
	margin: 4rem auto;
	padding: 2em;
	background: #fff;
	box-shadow: 0px 0px 32px 5px #fffacc;
}
.popup_txt {
	width: calc(600 / 666 * 100%);
	margin: 0 auto;
}

.popup_txt dt {
	width: calc(140 / 540 * 100%);
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.popup_txt dd {
	-ms-flex-item-align: center;
	align-self: center;
	width: calc(510 / 540* 100%);
	margin: 0 auto;
	padding-bottom: 4rem;
	color: #000000;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.75;
}
.popup_txt dd span{
	color: #d1bd49;
}
.color_y {
	color: #ffcc31;
}

.popup_close {
	width: calc(400 / 750* 100%);
    margin: 4rem auto 0;
	padding: 1em 0;
	background-color: #ef0a6a;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	background: linear-gradient(180deg, #ef0a6a 0%, rgba(182, 53, 156, 1) 100%);	border-radius: 4rem;

}

.popup_close::before {
	content: "×";
	display: inline-block;
	margin: 0 0.4em 0 0;
	color: #fff;
	font-weight: 900;
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

@media screen and (min-width: 768px) {
	.popup_area {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.popup_inner {
		width: 750px;
		margin: auto;
	}


	.popup_close {
		margin-top: calc(30 / 750* 100%);
		cursor: pointer;
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	.popup_close:hover {
		opacity: 0.7;
	}
}

/* ===============================================
    ローディング
=============================================== */
#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transform: translate(-50%, -50%);
    border-radius: 5%;
    display: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #666;
    border-top: 5px solid #fff;
    border-radius: 50%;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}