@charset "utf-8";


html {
	width: 100%;
	overflow-x:hidden;
}

body {
    width: 100%;
    min-height: 100svh;      /* ← 100vh から変更（iOS対策） */
    overflow-x: hidden;
    position: relative;
    margin: 0;
    padding: 0;

    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;

    /* ✅ 黒ベタ背景 */
    background-color: #000000;

    /* ✅ 画像系は不要なので削除 */
    /* background-size */
    /* background-position */
    /* background-repeat */
    /* background-attachment */

    font-family: 
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        "Yu Gothic",
        "Meiryo",
        sans-serif;
}

body.shrunk {
	background-size: 100% auto;
}

a {
	transition: all 0.8s;
}

a:link ,
a:visited {
	color: #235994;
}

a:hover ,
a:active ,
a:focus ,
*:focus {
	color: #333;
	text-decoration: none;
}

a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}


/* width -------------------------------*/

.container {
	width: 100%;
	/* height: 95vh; *//* 編集 */
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	align-items: center;
}

@media (min-width: 1200px) {
	.container {
		width: 1200px;
	}
}


/* 共通 -----------------------*/

.br_sp {
	display: inline;
}

.br_pc {
	display: none;
}


/* index -----------------------*/

.container_wrap {
	margin: 30px auto;
}

h1 {
	/* margin: -180px auto 0 auto; *//* 編集 */
	margin: 20px auto ; 
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

h1 img {
	width: 100%;
	height: auto;
}

.enter_wrap {
	text-align: center;
}

.enter_wrap span {
	padding: 0 10px;
	font-size: 40px;
	font-weight: bold;
	vertical-align: bottom;
	line-height: 1.3;
}

.enter input[type="text"] {
	width: 220px;
	padding: 10px;
	border: none;
	outline: none;
	font-size: 20px;
	text-align: center;
	background-color: inherit;
	color: #fff;
	font-weight: bold;
}

.enter .text::placeholder {
	color: #fff;
	font-weight: bold;
}

.submit {
	margin: 20px auto 0 auto;
	padding: 7px 20px;
	display: inline-block;
	text-align: center;
	background-color: #fff;
	color: #000;
	border-radius: 5px;
	font-size: 16px;
	font-weight: bold;
	border: none;
	cursor: pointer;
}

.submit[disabled] {
	opacity: 0.4;
	filter: alpha(opacity=40);
	-ms-filter: "alpha(opacity=40)";
	cursor: default;
}

.album {
	margin: 20px auto 0 auto;
	text-align: center;
}

.terms h2 {
	font-size: 15px;
}

.validate_wrap {
	margin: 20px auto 0 auto;
	text-align: center;
	display: none;
}

.validate_wrap .validate {
	padding: 10px 20px;
	display: inline-block;
	background-color: #fff;
	background-color: rgba(255,255,255,.8);
	border-radius: 5px;
	font-size: 14px;
	font-weight: normal;
	color: #cc0033;
}

.result {
	margin: 0 auto;
	text-align: center;
}

.result figure {
	width: 78%;
	height: auto;
	margin: 0 auto;
}

.result figure img {
	width: 100%;
	height: auto;
	border: 2px solid #fff;
}

.result h3 {
	margin: 30px auto 0 auto;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

.result .social {
	margin: 10px auto 34px auto;
	text-align: center;
}

.result .social img {
	width: 20%;
	padding: 0 10px;
	height: auto;
}

.result .button {
	width: 260px;
	margin: 20px auto 0 auto;
	padding: 7px 0;
	display: block;
	text-align: center;
	background-color: #fff;
	color: #000;
	border-radius: 5px;
	font-size: 14px;
	font-weight: bold;
	border: none;
	cursor: pointer;
	border: 1px solid #fff;
	transition: all 0.8s;
}

.result .button:hover {
	border: 1px solid #000;
	background-color: #000;
	color: #fff;
}

.result .button i {
	padding: 0 0 0 10px;
}

#loading {
	margin: 0 auto;
	text-align: center;
	font-size: 24px;
	display: none;
}

.terms {
	margin: 20px auto 0 auto;
	text-align: left;
	font-size: 10px;
}

.container_wrap .back{
	text-align: center;
}

.container_wrap .back a{
	font-size: 16px;
	color: #fff;
}


/* Media queries -------------------------------*/

/* ～320px iPhone SE */


@media (min-width: 321px) { /* 321px～360px Android */

}


@media (min-width: 361px) { /* 361px～375px iPhone 8 縦・iPhone XS 縦 */

}


@media (min-width: 376px) { /* 376px～412px Android */

}


@media (min-width: 413px) { /* 413px～414px iPhone 8 Plus 縦・iPhone XR 縦・iPhone XS Max 縦 */

}


@media (min-width: 415px) { /* 415px～834px iPhone SE 横・iPhone 8 横・iPhone 8 Plus 横・iPhone XS 横・ Android系横・iPad 9.7" 縦・iPad Pro 10.5" 縦 */

}


@media (min-width: 568px) {

}


@media(min-width:768px) { /* タブレット */
	.br_sp {
		display: none;
	}

	.br_pc {
		display: inline;
	}

	body {
		
		/* ✅ 黒ベタ背景 */
    	background-color: #000000;
	}

	h1 {
		font-size: 16px;
		margin: 0 auto;
		font-weight: bold;
	}

	h1 img {
		width: 85%;
	}
	

	.enter_wrap {
		margin: 40px auto 0 auto;
	}

	.enter_wrap span {
		padding: 0 30px;
		font-size: 42px;
	}

	.enter input[type="text"] {
		width: 300px;
		padding: 10px;
		font-size: 20px;
	}

	.submit {
		margin: 40px auto 0 auto;
		padding: 7px 20px;
		font-size: 16px;
	}

	.album {
		margin: 40px auto 0 auto;
	}

	.validate_wrap .validate {
		padding: 10px 20px;
		font-size: 16px;
	}

	.result {
		margin: 0 auto;
	}

	.result figure {
		width: 35%;
		margin: 0 auto;
	}

	.result h3 {
		margin: 50px auto 0 auto;
		font-size: 20px;
	}

	.result .social {
		margin: 10px auto 50px auto;
	}

	.result .social img {
		width: 7%;
		padding: 0 15px;
	}

	.result .button {
		width: 260px;
		margin: 20px auto 0 auto;
		padding: 7px 0;
		font-size: 16px;
	}

	.terms {
		margin: 20px auto 0 auto;
		text-align: left;
		font-size: 12px;
	}

	.container_wrap .back{
		text-align: center;
	}

	.container_wrap .back a{
		font-size: 16px;
		color: #fff;
	}

	.terms h2 {
		font-size: 15px;
	}

}


@media (min-width: 835px) { /* 835px～959px PC・iPhone XR 横・iPhone XS Max 横 */

}


@media (min-width: 960px) { /* 960px～1023px PC */

}


@media (min-width: 1024px) { /* 1024px～1059px PC・iPad 9.7" 横・iPad Pro 12.9" 縦*/

}


@media (min-width: 1060px) { /* 1060px～1199px PC・iPad Pro 10.5 横 */

}


@media (min-width: 1200px) { /* 1200px～ PC・iPad Pro12.9 横 */

}