@charset "UTF-8";

/* reset
------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
html {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote {
	quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}
a {
	text-decoration: none;
}
a img {
	border: none;
	outline: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
}

/* html.body
------------------------------------------------------------ */
html {
	font-size: 62.5%;
	overflow-y: scroll;
	background-color: #d5ecff;
}
body {
	-webkit-text-size-adjust: 100%; /* ios用フォントサイズ自動調整解除 */
	font-size: 1.0rem;
	line-height: 1.5;
	color: #333;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	background-color: #d5ecff;
}
.font-barlow {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
}
img {
	width: auto;
	max-width: 100%;
	vertical-align: bottom;
}
a {
	transition: all .3s ease-out;
}

/* animation
------------------------------------------------------------ */
@keyframes fuwa {
	0% {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes slide_up {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes slide_left {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes slide_right {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
.scroll-flag {
	opacity: 0;
}
.fuwa.show {
	animation: fuwa 0.5s forwards linear;
}
.slide-up.show {
	animation: slide_up 0.5s forwards linear;
}
.slide-left.show {
	animation: slide_left 0.5s forwards linear;
}
.slide-right.show {
	animation: slide_right 0.5s forwards linear;
}

/* wrapper
------------------------------------------------------------ */
#wrapper {
	position: relative;
	min-width: 1280px;
	font-size: 1.6rem;
	overflow: hidden;
}

/* header
------------------------------------------------------------ */
header {
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
}
header #logo {
	position: absolute;
	top: 0;
	left: 40px;
	width: 220px;
}
header nav {
	position: absolute;
	top: 30px;
	right: 0;
}
header nav ul {
	display: flex;
}
header nav ul li {
	margin-right: 45px;
}
header nav ul li a {
	font-size: 1.6rem;
	color: #0d65b0;
	font-weight: 700;
	border-bottom: 2px solid transparent;
}
header nav ul li a:hover {
	border-bottom: 2px solid #0d65b0;
}
header nav .hotline {
	display: none;
}
header #share-head {
	display: none;
}
header #nav-btn {
	display: none;
}

/* mv
------------------------------------------------------------ */
#mv {
	position: relative;
	width: 1106px;
	margin: 0 auto;
	padding: 140px 50px 60px;
	box-sizing: border-box;
}
#mv::after {
	content: "";
	position: absolute;
	top: 0;
	right: 90px;
	display: block;
	width: 200vw;
	height: 100%;
	border-bottom-right-radius: 340px;
	background-color: #fff;
	z-index: 1;
}
#mv .inner {
	position: relative;
	z-index: 2;
}
#mv .inner::before {
	content: "";
	position: absolute;
	top: 115px;
	right: -50px;
	display: block;
	width: 565px;
	height: 345px;
	background: url(../img/illust_a.png) no-repeat center;
	background-size: contain;
	z-index: 2;
}
#mv .inner h1 {
	position: relative;
	font-size: 3rem;
	color: #0d65b0;
	font-weight: 700;
	line-height: 2;
}
#mv .inner h1 span {
	font-size: 6.2rem;
	color: #000;
	line-height: 1.4;
	background: linear-gradient(transparent 75%, #d5ecff 20%);
}
#mv .inner p.video_anker {
	width: 396px;
	margin-top: 40px;
}
#mv .inner p.video_anker button {
	position: relative;
	width: 100%;
	padding: 0;
	cursor: pointer;
	background: none;
	border: none;
	border-radius: 25px;
	box-shadow: 20px 20px 30px 0 rgba(0, 0, 0, 0.2);
	overflow: hidden;
}
#mv .inner p.video_anker button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.6;
	transition: all .3s ease-out;
	opacity: 0;
	z-index: 1;
}
#mv .inner p.video_anker button:hover:before {
	opacity: 0.6;
}
#mv .inner p.video_anker button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	background: url(../img/icon_play_a.png) no-repeat center;
	background-size: contain;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	transition: all .3s ease-out;
	z-index: 2;
}
#mv .inner .point {
	position: absolute;
	top: 10px;
    right: -26px;
	width: 150px;
	margin-top: 0;
	z-index: 3;
}
#mv #scroll {
	position: absolute;
	bottom: 0;
	right: calc(50% - 66px);
	font-size: 1.8rem;
	color: #0d65b0;
	font-family: 'Barlow', sans-serif;
	transform: rotate(90deg);
	z-index: 3;
}
#mv #scroll span {
	position: relative;
	padding-right: 90px;
}
#mv #scroll span::after {
	content: "";
	position: absolute;
	bottom: 5px;
	right: 0;
	display: block;
	width: 80px;
	height: 1px;
	background-color: #0d65b0;
	animation: scroll_more 1.4s ease-in-out infinite;
}
@keyframes scroll_more {
	0% {
		width: 0;
		right: 80px;
	}
	50% {
		width: 80px;
		right: 0;
	}
	100% {
		width: 0;
		right: 0;
	}
}
#mv #share {
	position: absolute;
	top: 240px;
	left: -65px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 40px;
	z-index: 3;
}
#mv #share dt {
	padding-bottom: 6px;
	font-size: 2rem;
	color: #0d65b0;
	transform: rotate(90deg);
}
#mv #share dd ul {
	display: flex;
	flex-wrap: wrap;
	width: 40px;
}
#mv #share dd ul li {
	width: 40px;
	margin-top: 20px;
}
#mv #share dd ul li:first-child {
	margin-top: 30px;
}

/* mv-page
------------------------------------------------------------ */
#mv-page {
	position: relative;
	width: 1106px;
	margin: 0 auto;
	padding: 180px 50px 120px;
	box-sizing: border-box;
}
#mv-page::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 1180px;
	height: 100%;
	border-bottom-right-radius: 60px;
	border-bottom-left-radius: 60px;
	background-color: #fff;
	transform: translateX(-50%);
	z-index: 1;
}
#mv-page .inner {
	position: relative;
	z-index: 2;
}
#mv-page .inner h1 {
	position: relative;
	font-size: 3rem;
	color: #0d65b0;
	font-weight: 700;
	line-height: 2;
	z-index: 3;
}
#mv-page .inner h1 span {
	font-size: 6.2rem;
	color: #000;
	line-height: 1.4;
	background: linear-gradient(transparent 75%, #d5ecff 20%);
}
#mv-page .inner p.lead {
	position: relative;
	width: 406px;
	margin-top: 50px;
	font-size: 1.8rem;
	color: #0d65b0;
	line-height: 2;
	z-index: 3;
}
#mv-page .inner p.come {
	position: relative;
	width: 385px;
	margin-top: 20px;
	padding-left: 1em;
	font-size: 1.3rem;
	color: #0d65b0;
	text-indent: -1em;
	line-height: 1.6;
	z-index: 3;
}
#mv-page .inner p.video_anker {
	position: absolute;
	top: 30px;
	right: 0;
	width: 528px;
	font-size: 1.6rem;
	color: #0d65b0;
	line-height: 1.8;
	text-align: center;
}
#mv-page .inner p.video_anker button {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	padding: 0;
	cursor: pointer;
	background: none;
	border: none;
	border-radius: 25px;
	overflow: hidden;
}
#mv-page .inner p.video_anker button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.6;
	transition: all .3s ease-out;
	opacity: 0;
	z-index: 1;
}
#mv-page .inner p.video_anker button:hover:before {
	opacity: 0.6;
}
#mv-page .inner p.video_anker button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	background: url(../img/icon_play_a.png) no-repeat center;
	background-size: contain;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	transition: all .3s ease-out;
	z-index: 2;
}
#mv-page #scroll {
	position: absolute;
	bottom: 0;
	right: calc(50% - 66px);
	font-size: 1.8rem;
	color: #0d65b0;
	font-family: 'Barlow', sans-serif;
	transform: rotate(90deg);
	z-index: 3;
}
#mv-page #scroll span {
	position: relative;
	padding-right: 90px;
}
#mv-page #scroll span::after {
	content: "";
	position: absolute;
	bottom: 5px;
	right: 0;
	display: block;
	width: 80px;
	height: 1px;
	background-color: #0d65b0;
	animation: scroll_more 1.4s ease-in-out infinite;
}
#mv-page #share {
	position: absolute;
	top: 240px;
	left: -65px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 40px;
	z-index: 3;
}
#mv-page #share dt {
	padding-bottom: 6px;
	font-size: 2rem;
	color: #0d65b0;
	transform: rotate(90deg);
}
#mv-page #share dd ul {
	display: flex;
	flex-wrap: wrap;
	width: 40px;
}
#mv-page #share dd ul li {
	width: 40px;
	margin-top: 20px;
}
#mv-page #share dd ul li:first-child {
	margin-top: 30px;
}

/* content-body
------------------------------------------------------------ */
#content-body {
	position: relative;
}

#content-body section.block-a {
	position: relative;
	width: 1180px;
	margin: 80px auto 0;
	padding: 60px 50px;
	box-sizing: border-box;
	border-radius: 60px;
	background-color: #fff;
}
#content-body section.block-b {
	position: relative;
	width: 100%;
	margin: 80px auto 0;
	padding: 20px 50px;
	box-sizing: border-box;
}
#content-body section.block-c {
	position: relative;
	width: 100%;
	margin: 80px auto 0;
	padding: 70px 50px 80px;
	box-sizing: border-box;
	background-color: #fff;
}
#content-body section.block-d {
	position: relative;
	width: 1180px;
	margin: 80px auto 0;
	padding: 60px 50px;
	box-sizing: border-box;
}
#content-body section.block-d::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100vw;
	min-width: 1280px;
	height: 100%;
	border-radius: 60px;
	background-color: #fff;
	z-index: 1;
}
#content-body section.block-d > * {
	position: relative;
	z-index: 2;
}
#content-body section.block-e {
	position: relative;
	width: 1180px;
	margin: 80px auto 0;
	padding: 60px 50px;
	box-sizing: border-box;
}
#content-body section.block-e::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 100vw;
	min-width: 1280px;
	height: 100%;
	border-radius: 60px;
	background-color: #fff;
	z-index: 1;
}
#content-body section.block-e > * {
	position: relative;
	z-index: 2;
}
#content-body section.block-bnr {
	position: relative;
	width: 670px;
	margin: 80px auto 0;
	box-sizing: border-box;
}
#content-body section.block-bnr a {
	display: inline-block;
}
#content-body section.block-bnr a:hover {
	transform: scale(1.03);
}

#content-body section#lead-top p {
	margin-top: 35px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.9;
	text-align: center;
}
#content-body section#lead-top p.base {
	margin-top: 60px;
}
#content-body section#lead-top p strong {
	background: linear-gradient(transparent 75%, #fffe89 20%);
}
#content-body section#lead-top .bnr-lead {
	margin-top: 65px;
	text-align: center;
}
#content-body section#lead-top .bnr-lead a {
	display: inline-block;
	max-width: 680px;
}
#content-body section#lead-top .bnr-lead a:hover {
	transform: scale(1.03);
}
#content-body section#lead-top .text-link {
	font-size: 2rem;
	text-align: center;
}
#content-body section#lead-top .text-link a {
	color: #0d65b0;
	border-bottom: solid 2px #0d65b0;
}
#content-body section#lead-top .text-link a:hover {
	color: #d11323;
	border-bottom: solid 2px #d11323;
}

#content-body section#movie .more {
	margin-top: 40px;
	text-align: center;
}

#content-body section#download #download-list {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	text-align: center;
}
#content-body section#download #download-list li {
	max-width: 400px;
	margin: 0 15px;
}
#content-body section#download #download-list li .more {
	display: block;
	margin-top: 20px;
	text-align: center;
}

#content-body section#contact .text-c {
	margin-top: 18px;
}

#content-body .ttl-a {
	text-align: center;
	font-weight: 700;
}
#content-body .ttl-a i {
	position: relative;
	display: block;
	width: 50px;
	margin: 0 auto 25px;
}
#content-body .ttl-a i::before {
	content: "";
	position: absolute;
	top: 50%;
    left: 30%;
	display: block;
	width: 50px;
	height: 40px;
	background-color: #0d65b0;
	transform: skewX(-30deg) translate(-50%, -50%);
	z-index: 1;
}
#content-body .ttl-a i span {
	position: relative;
	color: #fff;
	font-size: 2rem;
	letter-spacing: 0.16em;
	z-index: 2;
}
#content-body .ttl-a > span {
	font-size: 3.2rem;
	color: #000;
	line-height: 1.7;
	background: linear-gradient(transparent 75%, #d5ecff 20%);
}
#content-body .ttl-b {
	font-size: 2.8rem;
	color: #000;
	text-align: center;
	font-weight: 700;
}
#content-body .ttl-b span {
	font-size: 3rem;
}
#content-body .ttl-c {
	text-align: center;
	font-weight: 700;
}
#content-body .ttl-c i {
	position: relative;
	display: block;
	width: 130px;
	margin: 0 auto 25px;
}
#content-body .ttl-c i::before {
	content: "";
	position: absolute;
	top: 50%;
    left: 40%;
	display: block;
	width: 130px;
	height: 40px;
	background-color: #d11323;
	transform: skewX(-30deg) translate(-50%, -50%);
	z-index: 1;
}
#content-body .ttl-c i span {
	position: relative;
	color: #fff;
	font-size: 2rem;
	letter-spacing: 0.16em;
	text-indent: -1em;
	z-index: 2;
}
#content-body .ttl-c > span {
	font-size: 3.2rem;
	color: #000;
	line-height: 1.7;
	background: linear-gradient(transparent 75%, #d5ecff 20%);
}
#content-body .ttl-d {
	font-weight: 700;
}
#content-body .ttl-d > span {
	font-size: 3.2rem;
	color: #000;
	line-height: 1.7;
	background: linear-gradient(transparent 75%, #d5ecff 20%);
}

#content-body .lead-a {
	margin-top: 20px;
	font-size: 1.8rem;
	color: #0d65b0;
	text-align: center;
}

#content-body .ttl-point {
	position: relative;
	text-align: center;
	font-weight: 700;
}
#content-body .ttl-point::before {
	content: "";
	position: absolute;
	top: -90px;
	left: 50%;
	display: block;
	width: 120px;
	height: 120px;
	background: url(../../assets/img/icon_point.png) no-repeat center;
	background-size: contain;
	transform: translateX(-50%);
}
#content-body .ttl-point > span {
	position: relative;
	font-size: 3.2rem;
	color: #000;
	line-height: 1.7;
	background: linear-gradient(transparent 75%, #d5ecff 20%);
	z-index: 2;
}

#content-body .col-b {
	color: #0d65b0;
}

#content-body .text-c {
	text-align: center;
}

#content-body .illust-b {
	position: relative;
	margin: 60px auto 0;
	padding: 40px 600px 50px 120px;
	line-height: 1.9;
}
#content-body .illust-b::before {
	content: "";
	position: absolute;
	top: 0;
	right: 100px;
	display: block;
	width: 415px;
	height: 345px;
	background: url(../img/illust_b.png) no-repeat center;
	background-size: contain;
	z-index: 2;
}
#content-body .illust-b p.more {
	margin-top: 35px;
}

#content-body .illust-c {
	position: relative;
	margin: 40px auto 0;
	padding: 60px 150px 80px 570px;
	line-height: 1.9;
}
#content-body .illust-c::before {
	content: "";
	position: absolute;
	top: 0;
	left: -10px;
	display: block;
	width: 525px;
	height: 345px;
	background: url(../img/illust_c.png) no-repeat center;
	background-size: contain;
	z-index: 2;
}
#content-body .illust-c p.more {
	margin-top: 35px;
}

#content-body .illust-d {
	position: relative;
	margin: 50px auto 0;
	padding: 40px 600px 50px 120px;
	line-height: 1.9;
}
#content-body .illust-d::before {
	content: "";
	position: absolute;
	top: 0;
	right: 100px;
	display: block;
	width: 450px;
	height: 320px;
	background: url(../img/illust_d.png) no-repeat center;
	background-size: contain;
	z-index: 2;
}
#content-body .illust-d p.more {
	margin-top: 35px;
}

#content-body .illust-g {
	position: relative;
	margin: 40px auto 0;
	padding: 75px 140px 95px 570px;
	line-height: 1.9;
}
#content-body .illust-g::before {
	content: "";
	position: absolute;
	top: 0;
	left: -10px;
	display: block;
	width: 498px;
	height: 348px;
	background: url(../img/illust_g.png) no-repeat center;
	background-size: contain;
	z-index: 2;
}
#content-body .illust-g p.more {
	margin-top: 35px;
}

#content-body .case-list {
	display: flex;
	justify-content: center;
	margin-top: 55px;
}
#content-body .case-list li {
	width: 220px;
	margin: 0 18px;
}
#content-body .case-list li a {
	display: block;
	font-size: 1.6rem;
	color: #0d65b0;
	font-weight: 700;
	text-align: center;
}
#content-body .case-list li a:hover {
	color: #d11323;
}
#content-body .case-list li a span.inner {
	display: inline-flex;
	align-items: center;
	margin-top: 16px;
	font-size: 1.4rem;
	text-align: left;
}
#content-body .case-list li a span.inner::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: 9px;
	margin-right: 15px;
	border-top: 2px solid #0d65b0;
	border-right: 2px solid #0d65b0;
	transform: rotate(45deg) translate(-30%, -30%);
	box-sizing: border-box;
	transition: all .3s ease-out;
	z-index: 2;
}
#content-body .case-list li a:hover span.inner::before {
	border-top: 2px solid #d11323;
	border-right: 2px solid #d11323;
}

#content-body .video-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#content-body .video-list li {
	width: 480px;
	margin: 50px 20px 0;
	text-align: center;
}
#content-body .video-list li button {
	width: 100%;
	padding: 0;
	font-size: 2rem;
	color: #0d65b0;
	text-align: center;
	cursor: pointer;
	background: none;
	border: none;
}
#content-body .video-list li button span {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 18px;
	border-radius: 25px;
	overflow: hidden;
}
#content-body .video-list li button span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.6;
	transition: all .3s ease-out;
	opacity: 0;
	z-index: 1;
}
#content-body .video-list li button:hover span::before {
	opacity: 0.6;
}
#content-body .video-list li button span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	background: url(../img/icon_play_a.png) no-repeat center;
	background-size: contain;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	transition: all .3s ease-out;
	z-index: 2;
}

#content-body .hotline {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 640px;
	height: 120px;
	margin: 40px auto 0;
	background-color: #fffe89;
	border-radius: 60px;
}
#content-body .hotline::after {
	content: "";
	position: absolute;
	top: -12px;
	right: -104px;
	width: 184px;
	height: 192px;
	background: url(../img/chara_188.png) no-repeat center;
	background-size: contain;
}
#content-body .hotline dt {
	font-size: 2.4rem;
	color: #0d65b0;
	font-weight: 700;
	text-indent: 0.5em;
}
#content-body .hotline dt span {
	font-size: 1.8rem;
}
#content-body .hotline dd {
	width: 170px;
}

#content-body .contact {
	margin-top: 20px;
}
#content-body .contact dt {
	text-align: center;
}
#content-body .contact dd {
	margin-top: 8px;
	text-align: center;
}

#content-body .btn-a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 280px;
	height: 50px;
	color: #0d65b0;
	font-weight: 700;
	border-radius: 25px;
	border: 2px solid #0d65b0;
	box-sizing: border-box;
}
#content-body .btn-a:hover {
	color: #fff;
	background-color: #0d65b0;
}
#content-body .btn-a::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-top: 9px;
	margin-right: 15px;
	border-top: 2px solid #0d65b0;
	border-right: 2px solid #0d65b0;
	transform: rotate(45deg) translate(-30%, -30%);
	box-sizing: border-box;
	transition: all .3s ease-out;
	z-index: 2;
}
#content-body .btn-a:hover:before {
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
#content-body .btn-a .size-s {
	margin-top: 0.2rem;
	font-size: 1.2rem;
}

/* float-bnr
------------------------------------------------------------ */
.float-bnr .inner {
	position: fixed;
	top: calc(50% - 185px);
	right: 20px;
	width: 70px;
	z-index: 9;
}
.float-bnr .inner a {
	display: inline-block;
}
.float-bnr .inner a:hover {
	transform: scale(1.05);
}

/* footer
------------------------------------------------------------ */
footer {
	position: relative;
	padding: 50px;
	overflow: hidden;
}
footer .policy {
	display: flex;
	justify-content: center;
}
footer .policy li {
	margin: 0 40px;
}
footer .policy li a {
	color: #000;
	border-bottom: 1px solid #000;
}
footer .policy li a:hover {
	color: #000;
	border-bottom: 1px solid transparent;
}
footer #foot-logo {
	margin-top: 50px;
	text-align: center;
}
footer #foot-logo a:hover {
	opacity: 0.8;
}
footer #copyright {
	margin-top: 25px;
	font-size: 1.4rem;
	text-align: center;
}

/* modal
------------------------------------------------------------ */
#modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 80px 30px;
	box-sizing: border-box;
	overflow: hidden;
}
#modal .bg {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.9;
}
#modal #modal-btn {
	position: absolute;
	top: -70px;
	right: 0;
	display: block;
	width: 60px;
	height: 60px;
	padding: 0;
	cursor: pointer;
	background: none;
	border: none;
	z-index: 4;
}
#modal #modal-btn::before {
	content: "";
	position: absolute;
	display: block;
	width: 60px;
	height: 4px;
	background-color: #fff;
	transform: rotate(45deg);
}
#modal #modal-btn::after {
	content: "";
	position: absolute;
	display: block;
	width: 60px;
	height: 4px;
	background-color: #fff;
	transform: rotate(-45deg);
}
#modal .modal-body {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 840px;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 3;
	transition: all 0.3s;
}
#modal .modal-body #cookie-body {
	width: 100%;
	overflow-y: scroll;
}
#modal .modal-body #cookie-body h2 {
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
}
#modal .modal-body #cookie-body p {
	margin-top: 20px;
	font-size: 1.8rem;
	color: #fff;
	line-height: 1.8;
	text-align: left;
}
#modal .modal-body #cookie-body p a {
	color: #0d65b0;
}
#modal .modal-body #cookie-body p a:hover {
	opacity: 0.8;
}
#modal .modal-body.comic-body {
	width: 100%;
	max-width: 500px;
}
#modal .modal-body.comic-body #comic-box {
	width: 100%;
	overflow-y: scroll;
}
#modal .modal-body #player-box {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
#modal .modal-body #player-box iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
@media only screen and (max-height:66vw) {

	#modal {
		padding: 80px 30px 10px;
	}
	#modal .modal-body {
		top: calc(50% + 30px);
		width: calc((100vh - 90px) / 0.5625);
	}
	
}
/* close */
#modal.close {
	transition-delay: 0.3s;
	z-index: -1;
}
/* open */
#modal.open {
	z-index: 9501;
}
#modal.open .modal-body {
	opacity: 1;
}

/* scroll-flag
------------------------------------------------------------ */
#content .scroll-flag {
	opacity: 0;
	transform: scale(1.1);
}

@media print {

	/* wrapper
	------------------------------------------------------------ */
	#wrapper {
		min-width: 1280px;
	}

}

@media only screen and (min-width:769px) {

	/* device-sp
	------------------------------------------------------------ */
	.device-sp {
		display: none !important;
	}

}

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

	/* wrapper
	------------------------------------------------------------ */
	#wrapper {
		min-width: auto;
		font-size: 3.22vw;
	}

	/* header
	------------------------------------------------------------ */
	header {
		position: relative;
		top: 0;
		left: 0;
		z-index: 10;
	}
	header #logo {
		left: 2.66vw;
		width: 40.93vw;
		z-index: 8001;
	}
	body.nav-open header #logo {
		position: fixed;
		top: 0;
	}
	header nav {
		position: fixed;
		top: 0;
		right: -100vw;
		display: none;
		width: 100vw;
		height: 100%;
		padding: 24.6vw 8.66vw 17.53vw;
		background-color: rgba(255,255,255,0.95);
		overflow-y: scroll;
		box-sizing: border-box;
		z-index: 8000;
	}
	body.nav-open header nav {
		right: 0;
		display: block;
	}
	header nav ul {
		display: block;
	}
	header nav ul li {
		margin-right: 0;
		margin-top: 8vw;
	}
	header nav ul li a {
		font-size: 4.53vw;
	}
	header nav ul li a:hover {
		color: #0d65b0;
	}
	header nav .hotline {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		margin: 9.33vw auto 0;
		padding: 4.66vw 0 5.06vw;
		background-color: #fffe89;
		border-radius: 6vw;
	}
	header nav .hotline::after {
		content: "";
		position: absolute;
		bottom: -17.53vw;
		right: -4.66vw;
		width: 30.93vw;
		height: 32.2vw;
		background: url(../img/chara_188.png) no-repeat center;
		background-size: contain;
	}
	header nav .hotline dt {
		font-size: 4.26vw;
		color: #0d65b0;
		font-weight: 700;
		text-indent: 0.5em;
		text-align: center;
	}
	header nav .hotline dt span {
		font-size: 3.2vw;
	}
	header nav .hotline dd {
		margin-top: 2vw;
		text-align: center;
	}
	header nav .hotline dd img {
		width: 26vw;
	}
	header #share-head {
		display: flex;
		position: absolute;
		top: 4vw;
		right: 17.3vw;
	}
	body.nav-open header #share-head {
		position: fixed;
		z-index: 8001;
	}
	header #share-head li {
		width: 8vw;
		margin-left: 1.33vw;
	}
	header #nav-btn {
		position: fixed;
		top: 4.6vw;
		right: 2.6vw;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 9.3vw;
		height: 6.4vw;
		padding: 0;
		cursor: pointer;
		background-color: transparent;
		border: none;
		box-sizing: border-box;
		z-index: 9002;
	}
	header #nav-btn span {
		position: relative;
		width: 9.3vw;
		height: 6.4vw;
	}
	header #nav-btn span i {
		position: absolute;
		left: 0;
		display: block;
		width: 9.3vw;
		height: 0.8vw;
		background-color: #0d65b0;
		transition: all .1s ease-out;
	}
	header #nav-btn span i:nth-child(2) {
		top: 50%;
		transform: translateY(-50%);
	}
	header #nav-btn span i:nth-child(3) {
		bottom: 0;
	}
	body.nav-open header #nav-btn span i:nth-child(1) {
		-webkit-transform: translateY(2.7vw) rotate(-45deg);
		transform: translateY(2.7vw) rotate(-45deg);
	}
	body.nav-open header #nav-btn span i:nth-child(2) {
		opacity: 0;
	}
	body.nav-open header #nav-btn span i:nth-child(3) {
		-webkit-transform: translateY(-2.7vw) rotate(45deg);
		transform: translateY(-2.7vw) rotate(45deg);
	}
	
	/* mv
	------------------------------------------------------------ */
	#mv {
		width: 100%;
		height: 145.73vw;
		margin-bottom: 14vw;
		padding: 33.33vw 15.66vw 37.33vw;
	}
	#mv::after {
		right: 4.66vw;
		border-bottom-right-radius: 40vw;
	}
	#mv .inner::before {
		top: 38.3vw;
		right: 2.33vw;
		width: 72.33vw;
		height: 46.13vw;
	}
	#mv .inner h1 {
		font-size: 4.06vw;
	}
	#mv .inner h1 span {
		font-size: 7.8vw;
		background: linear-gradient(transparent 75%, #d5ecff 15%);
	}
	#mv .inner p {
		margin-top: 5.33vw;
		font-size: 3.46vw;
	}
	#mv .inner p.video_anker {
		position: absolute;
		bottom: -92.2vw;
		right: 50%;
		width: 64vw;
		transform: translateX(50%);
	}
	#mv .inner p.video_anker a {
		border-radius: 4vw;
	}
	#mv .inner p.video_anker button {
		border-radius: 4vw;
		box-shadow: 3.6vw 3.6vw 4.2vw 0 rgba(0, 0, 0, 0.2);
	}
	#mv .inner p.video_anker button::after {
		width: 14vw;
		height: 14vw;
		border-radius: 7vw;
	}
	#mv .inner .point {
		top: -17.33vw;
		right: -13.66vw;
		width: 26.66vw;
	}
	#mv #scroll {
		display: none;
	}

	/* mv-page
	------------------------------------------------------------ */
	#mv-page {
		width: auto;
		margin: 0 4.66vw;
		padding: 23.33vw 5.86vw 62.66vw;
	}
	#mv-page::after {
		width: 100%;
		height: 100%;
		border-bottom-right-radius: 10.6vw;
		border-bottom-left-radius: 10.6vw;
	}
	#mv-page .inner h1 {
		font-size: 7.8vw;
		line-height: 1.6;
	}
	#mv-page .inner h1 span {
		font-size: 7.8vw;
	}
	#mv-page .inner p.lead {
		width: auto;
		margin-top: 5vw;
		font-size: 3.46vw;
	}
	#mv-page .inner p.come {
		width: auto;
		margin-top: 2.66vw;
		font-size: 2.66vw;
	}
	#mv-page .inner p.video_anker {
		position: relative;
		width: 68.26vw;
		margin: 5.2vw auto 0;
		font-size: 2.93vw;
	}
	#mv-page .inner p.video_anker button {
		margin-bottom: 4vw;
		border-radius: 4vw;
	}
	#mv-page .inner p.video_anker button::after {
		width: 14vw;
		height: 14vw;
		border-radius: 7vw;
	}
	#mv-page #scroll {
		display: none;
	}
	#mv-page #share {
		display: none;
	}
	
	/* content-body
	------------------------------------------------------------ */
	#content-body {
		position: relative;
	}
	
	#content-body section.block-a {
		width: auto;
		margin: 16vw 4.66vw 0;
		padding: 10.66vw 6vw;
		border-radius: 8vw;
	}
	#content-body section.block-b {
		margin: 0 auto 0;
		padding: 5.77vw 6vw 8vw;
	}
	#content-body section.block-c {
		margin: 16vw auto 0;
		padding: 10.66vw 6vw;
	}
	#content-body section.block-d {
		width: auto;
		margin: 13.3vw 4.66vw 0;
		padding: 10.66vw 6vw;
	}
	#content-body section.block-d::before {
		width: 110vw;
		border-radius: 8vw;
	}
	#content-body section.block-e {
		width: auto;
		margin: 13.3vw 4.66vw 0;
		padding: 10.66vw 6vw;
	}
	#content-body section.block-e::before {
		width: 110vw;
		border-radius: 8vw;
	}
	#content-body section.block-bnr {
		width: auto;
		margin: 14vw 4.66vw 14.6vw;
	}
	#content-body section.block-bnr a:hover {
		transform: scale(1);
	}

	#content-body section#lead-top p {
		margin-top: 9.3vw;
		font-size: 4.26vw;
	}
	#content-body section#lead-top p.base {
		margin-top: 12.3vw;
	}
	#content-body section#lead-top .bnr-lead {
		margin-top: 10vw;
		text-align: center;
	}
	#content-body section#lead-top .bnr-lead a {
		display: inline-block;
		max-width: 85.33vw;
	}
	#content-body section#lead-top .bnr-lead a:hover {
		transform: scale(1);
	}
	#content-body section#lead-top .text-link {
		font-size: 3.4vw;
	}
	#content-body section#lead-top .text-link a:hover {
		color: #0d65b0;
		border-bottom: solid 2px #0d65b0;
	}
	
	#content-body section#movie .more {
		margin-top: 5.33vw;
	}
	
	#content-body section#download #download-list {
		display: block;
		margin-top: 0;
	}
	#content-body section#download #download-list li {
		max-width: 100%;
		margin: 9.33vw 0 0;
	}
	#content-body section#download #download-list li:first-child {
		margin: 6vw 0 0;
	}
	#content-body section#download #download-list li .more {
		margin-top: 4vw;
	}
	
	#content-body section#hotline {
		padding: 10.66vw 6vw 15vw;
		overflow: hidden;
	}
	
	#content-body section#contact .text-c {
		margin-top: 5.33vw;
	}
	
	#content-body .ttl-a i {
		width: 8.66vw;
		margin: 0 auto 2.66vw;
	}
	#content-body .ttl-a i::before {
		width: 8.66vw;
		height: 6.66vw;
	}
	#content-body .ttl-a i span {
		font-size: 3.73vw;
	}
	#content-body .ttl-a > span {
		font-size: 5.6vw;
		line-height: 1.7;
	}
	#content-body .ttl-b {
		font-size: 4.26vw;
	}
	#content-body .ttl-b span {
		font-size: 4.53vw;
	}
	#content-body .ttl-c i {
		width: 20.66vw;
		margin: 0 auto 2.66vw;
	}
	#content-body .ttl-c i::before {
		width: 20.66vw;
		height: 6.66vw;
	}
	#content-body .ttl-c i span {
		font-size: 3.73vw;
	}
	#content-body .ttl-c > span {
		font-size: 5.6vw;
		line-height: 1.7;
	}
	#content-body .ttl-d > span {
		font-size: 5.6vw;
		line-height: 1.7;
	}

	#content-body .lead-a {
		margin-top: 5.33vw;
		font-size: 3.46vw;
		text-align: left;
	}

	#content-body .ttl-point::before {
		top: -12vw;
		width: 16vw;
		height: 16vw;
	}
	#content-body .ttl-point > span {
		font-size: 5.6vw;
		line-height: 1.7;
	}

	#content-body .illust-b {
		margin: 7.33vw auto 0;
		padding: 71.33vw 0 0;
	}
	#content-body .illust-b::before {
		right: 1.7vw;
		width: 74.6vw;
		height: 65.3vw;
	}
	#content-body .illust-b p.more {
		margin-top: 5.3vw;
		text-align: center;
	}
	
	#content-body .illust-c {
		margin: 7.33vw auto 0;
		padding: 58.33vw 0 0;
	}
	#content-body .illust-c::before {
		left: -1.7vw;
		width: 78.6vw;
		height: 51.3vw;
	}
	#content-body .illust-c p.more {
		margin-top: 5.3vw;
		text-align: center;
	}
	
	#content-body .illust-d {
		margin: 6.33vw auto 0;
		padding: 65.33vw 0 0;
	}
	#content-body .illust-d::before {
		right: -1vw;
		width: 80vw;
		height: 59.6vw;
	}
	#content-body .illust-d p.more {
		margin-top: 5.3vw;
		text-align: center;
	}

	#content-body .illust-g {
		margin: 7.33vw auto 0;
		padding: 58.33vw 0 0;
	}
	#content-body .illust-g::before {
		left: 1vw;
		width: 76.6vw;
		height: 53.8vw;
	}
	#content-body .illust-g p.more {
		margin-top: 5.3vw;
		text-align: center;
	}

	#content-body .case-list {
		flex-wrap: wrap;
		margin-top: 10vw;
	}
	#content-body .case-list li {
		width: 36vw;
		margin: 0 0 5.33vw;
	}
	#content-body .case-list li:nth-child(2n+1) {
		margin: 0 6vw 5.33vw 0;
	}
	#content-body .case-list li a {
		font-size: 2.6vw;
	}
	#content-body .case-list li a:hover {
		color: #0d65b0;
	}
	#content-body .case-list li a span.inner {
		margin-top: 2.6vw;
		font-size: 2.6vw;
	}
	#content-body .case-list li a span.inner::before {
		width: 1.4vw;
		height: 1.4vw;
		margin-top: 1.1vw;
		margin-right: 1vw;
		border-top: 0.4vw solid #0d65b0;
		border-right: 0.4vw solid #0d65b0;
	}
	#content-body .case-list li a:hover span.inner::before {
		border-top: 2px solid #d11323;
		border-right: 2px solid #d11323;
	}
	
	#content-body .video-list {
		display: block;
		margin-top: 0;
	}
	#content-body .video-list li {
		width: 100%;
		margin: 6vw 0 0;
	}
	#content-body .video-list li button {
		margin-top: 2vw;
		font-size: 4.26vw;
	}
	#content-body .video-list li button span {
		border-radius: 4vw;
	}
	#content-body .video-list li button span::before {
		display: none;
	}
	#content-body .video-list li button span::after {
		width: 14.93vw;
		height: 14.93vw;
		border-radius: 14.93vw;
	}
	
	#content-body .hotline {
		display: block;
		width: 100%;
		height: auto;
		margin: 9.33vw auto 0;
		padding: 4.66vw 0 5.06vw;
		border-radius: 6vw;
	}
	#content-body .hotline::after {
		top: auto;
		bottom: -17.53vw;
		right: -4.66vw;
		width: 30.93vw;
		height: 32.2vw;
	}
	#content-body .hotline dt {
		font-size: 4.26vw;
		text-align: center;
	}
	#content-body .hotline dt span {
		font-size: 3.2vw;
	}
	#content-body .hotline dd {
		margin-top: 2vw;
		width: auto;
		text-align: center;
	}
	#content-body .hotline dd img {
		width: 26vw;
	}

	#content-body .contact {
		margin-top: 5.33vw;
	}
	#content-body .contact dt {
		line-height: 1.8;
	}
	#content-body .contact dd {
		margin-top: 1.8vw;
	}
	
	#content-body .btn-a {
		width: 56vw;
		height: 10.66vw;
		border-radius: 28vw;
		border: 0.5vw solid #0d65b0;
	}
	#content-body .btn-a:hover {
		color: #0d65b0;
		background-color: #fff;
	}
	#content-body .btn-a::before {
		width: 1.33vw;
		height: 1.33vw;
		margin-top: 1.2vw;
		margin-right: 2vw;
		border-top: 0.5vw solid #0d65b0;
		border-right: 0.5vw solid #0d65b0;
	}
	#content-body .btn-a:hover:before {
		border-top: 0.5vw solid #0d65b0;
		border-right: 0.5vw solid #0d65b0;
	}
	#content-body .btn-a .size-s {
		margin-top: 0.4vw;
		font-size: 2.2vw;
	}

	/* float-bnr
	------------------------------------------------------------ */
	.float-bnr {
		height: 18vw;
		margin: 16.6vw 0 0;
		padding-bottom: 5.33vw;
	}
	.float-bnr .inner {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		padding: 0 4.66vw;
	}
	.float-bnr.float .inner {
		position: fixed;
		bottom: 5.33vw;
		padding: 0 4.66vw;
	}
	.float-bnr .inner a:hover {
		transform: scale(1);
	}
	
	/* footer
	------------------------------------------------------------ */
	footer {
		padding: 10vw 10vw 28vw;
	}
	footer .policy {
		display: block;
	}
	footer .policy li {
		margin: 6vw 0 0;
		text-align: center;
	}
	footer .policy li:nth-child(1) {
		margin: 0;
	}
	footer .policy li a {
		border-bottom: 0.25vw solid #000;
	}
	footer .policy li a:hover {
		border-bottom: 0.25vw solid #000;
	}
	footer #foot-logo {
		margin-top: 10.66vw;
	}
	footer #foot-logo a img {
		width: 31.2vw;
		max-width: 234px;
	}
	footer #foot-logo a:hover {
		opacity: 1;
	}
	footer #copyright {
		margin-top: 5.33vw;
		font-size: 2.66vw;
	}

	/* modal
	------------------------------------------------------------ */
	#modal {
		padding: 0;
	}
	#modal #modal-btn {
		top: -6.66vw;
		width: 6.66vw;
		height: 6.66vw;
	}
	#modal #modal-btn::before {
		width: 6.66vw;
		height: 0.53vw;
	}
	#modal #modal-btn::after {
		width: 6.66vw;
		height: 0.53vw;
	}
	#modal .modal-body {
		width: 100%;
	}
	#modal .modal-body#type-inline {
		width: 88%;
		margin: 0 auto;
	}
	#modal .modal-body #cookie-body h2 {
		font-size: 4.26vw;
	}
	#modal .modal-body #cookie-body p {
		margin-top: 4vw;
		font-size: 2.6vw;
	}
	#modal .modal-body #cookie-body p a:hover {
		opacity: 1;
	}

	/* device-pc
	------------------------------------------------------------ */
	.device-pc {
		display: none !important;
	}

}

@media only screen and (max-width:374px) {
	
	/* content-body
	------------------------------------------------------------ */
	#content-body .case-list li:nth-child(2) a span.inner br {
		display: none;
	}

}