@charset "utf-8";

/* ----------------------------------------------- */
/*                      basic                      */
/* ----------------------------------------------- */
html{
	overflow: hidden;
	height: 100%;
}
body{
	overflow: auto;
	height: 100%;
}

body{
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.7;
	position: relative;
	min-width: 828px;
}

p{
	line-height: 1.7;
}

.col_pi{
	color: #E20077;
}

.credit{
	font-size: 70%;
	color: #777;
	text-align: right;
}

.banner{
	margin: 0 auto;
	width: 70%;
	max-width: 600px;
}

.banner img{
	width: 100%;
	border: 2px #bbb solid;
}

/* ----------------------------------------------- */
/*                     column                      */
/* ----------------------------------------------- */
@media screen and (min-width:769px){
	.clm{
		-js-display: flex;
		display: -webkit-flex;
		display: flex;
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
		-webkit-flex-direction: row;
		flex-direction: row;
		/* IE10 */
		display: -ms-flexbox;
		-ms-flex-direction: row;
		-ms-flex: 1 1 auto;
		list-style: none;
	}

	.clm_b{		/* カラム左右均等分け */
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-ms-flex-pack: justify;
	}

	.clm_c{		/* カラム左右中央寄せ */
		-webkit-justify-content: center;
		justify-content: center;
		-ms-flex-pack: center;
	}
}

/* ----------------------------------------------- */
/*                     anchor                      */
/* ----------------------------------------------- */
/* 基本リンク */
a			{ color: #D31B7C; outline: none; }
a:link		{ color: #D31B7C; text-decoration: none; }
a:visited	{ color: #D31B7C; text-decoration: none; }
a:hover		{ color: #D31B7C; text-decoration: underline; }
a:active	{ color: #D31B7C; text-decoration: underline; }

/* ----------------------------------------------- */
/*                      sns                        */
/* ----------------------------------------------- */
.top_sns {
    margin: 10px auto 0;
    text-align: right;
}

.top_sns > *{
	margin: 0 3px 0 0;
}

@media screen and (min-width:769px){
	.snsBtn.line{
		display: none;
	}
}

/* ----------------------------------------------- */
/*                   frontpage                     */
/* ----------------------------------------------- */
.hide{
	display: none;
}

#frontpage{
	width: 100%;
	position: absolute;
	background: #fff;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-animation: openPage 3s 1 ease 2.5s forwards;
	animation: openPage 3s 1 ease 2.5s forwards;
	animation-play-state: running;
	z-index: 1000;
}

#frontpage::after{
	position: absolute;
	display: block;
	content: "";
	background: url(/images/10th/top/back_front.png) top center repeat-x;
	bottom: -116px;
	left: 0;
	width: 100%;
	height: 116px;
	backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#frontpage .wrapper{
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

.logo_10th_main{
	width: 40%;
	max-width: 400px;
	margin: 0 auto;
	-webkit-animation: FadeLogo 1s 1 ease-in-out;
	animation: FadeLogo 1s 1 ease-in-out;
}

.logo_10th_main img{
	width: 100%;
}

@-webkit-keyframes FadeLogo{
	0%		{ opacity: 0; }
	100%	{ opacity: 1; }
}

@keyframes FadeLogo{
	0%		{ opacity: 0; }
	100%	{ opacity: 1; }
}

@-webkit-keyframes openPage{
	0%		{ top: 0; }
	70%		{ top: -120%; }
	70.1%	{ opacity: 1; }
	70.2%	{ opacity: 0; }
	100%	{ opacity: 0; top: -120%;}
}

@keyframes openPage{
	0%		{ top: 0; }
	70%		{ top: -120%; }
	70.1%	{ opacity: 1; }
	70.2%	{ opacity: 0; }
	100%	{ opacity: 0; top: -120%;}
}

/* ----------------------------------------------- */
/*                      main                       */
/* ----------------------------------------------- */
#main{
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
	background: url(/images/10th/top/main_img.jpg) center top no-repeat #fff;
	background-size: 90% auto;
	padding: 48% 8% 0;
}

@media screen and (min-width: 1800px){
	#main{
		padding-top: 855px;
	}
}

#main .wrapper{
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 105px;
}

#main p:not(.main_logo_10th){
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.main_logo_10th{
	width: 150px;
    position: absolute;
    right: 5%;
    top: 20px;
	z-index: 100;
}

.main_logo_10th img{
	width: 100%;
}

.main_title{
	background: url(/images/10th/top/main_title.svg) center top no-repeat;
	background-size: 100%;
	width: 90%;
	margin: 0 auto;
	padding-bottom: 17%;
}

.main_text{
	background: url(/images/10th/top/main_text.svg) center top no-repeat;
	background-size: 100%;
	width: 80%;
	margin: 0 auto;
	padding-bottom: 25%;
}

.main_menu_list{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
    list-style: none;
    -js-display: flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 0 1 48.5%;
    flex: 0 1 48.5%;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	-webkit-justify-content: space-between;
    justify-content: space-between;
}

.main_menu_list > li {
    width: 48.5%;
    line-height: 1.7;
	margin-bottom: 20px;
}

.main_menu_list > li img{
	width: 100%;
	display: block;
}

.main_menu_list > li img:hover{
	opacity: .8;
}

/* ----------------------------------------------- */
/*                    contents                     */
/* ----------------------------------------------- */
section{
	position: relative;
	padding: 90px 8% 165px;
	background: url(/images/10th/top/back_sec.png) repeat;
	background-attachment: fixed;
	background-size: 25% auto;
}

section::after{
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 50px;
	background: url(/images/10th/top/line.png) repeat-x;
	background-size: auto 100%;
	top: -25px;
	left: 0;
}

.contents > .wrapper{
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	z-index: 0;
}

.contents_title{
	width: 85%;
	margin: 0 auto;
	padding-bottom: 30%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.contents_title.c01{
	background: url(/images/10th/top/contents_title_01.svg) center top no-repeat;
	background-size: 100% auto;
}

.contents_title.c02{
	background: url(/images/10th/top/contents_title_02.svg) center top no-repeat;
	background-size: 100% auto;
}

.contents_title.c03{
	background: url(/images/10th/top/contents_title_03.svg) center top no-repeat;
	background-size: 100% auto;
}

.contents_title.c04{
	background: url(/images/10th/top/contents_title_04.svg) center top no-repeat;
	background-size: 100% auto;
}

.contents_title.c06{
	background: url(/images/10th/top/contents_title_06.svg) center top no-repeat;
	background-size: 100% auto;
}

.contents_text{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width: 90%;
	margin: 0 auto;
}

.contents_button{
	width: 80%;
	margin: 45px auto 0;
	max-width: 500px;
	background: #C12871;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 22px;
	font-size: 2.2rem;
}

.contents_button:hover{
	background: #d5498c;
	cursor: pointer;
}

.contents_button a{
	display: block;
	padding: 50px 0;
}

.contents_button a,
.contents_button a:link,
.contents_button a:hover,
.contents_button a:active,
.contents_button a:visited{
	color: #fff;
	text-decoration: none;
}

/* ----------------------------------------------- */
/*                   contents_01                   */
/* ----------------------------------------------- */
.contents_text.c01_01{
	background: url(/images/10th/top/contents_01_text_01.svg) center top no-repeat;
	background-size: 100%;
	padding-bottom: 11%;
}

.contents_text.c01_02{
	background: url(/images/10th/top/contents_01_text_02.svg) center top no-repeat;
	background-size: 100%;
	padding-bottom: 11%;
}

.g_comment{
	margin: 75px auto 105px;
}

.g_comment li{
	background: url(/images/10th/top/line_comment.png) repeat;
    background-size: 0.8%;
    padding: 10px;
	margin-bottom: 30px;
}

.g_comment_wrap{
	background: #fff;
	padding: 15px 30px;
	color: #c47d1f;
}

.comment_title{
	text-align: center;
}

.comment_title img{
	width: 100%;
	max-width: 450px;
	margin: 0 auto 10px;
}

.comment_text{
	font-size: 17px;
	font-size: 1.7rem;
	color: #444;
}

/* ----------------------------------------------- */
/*                   contents_02                   */
/* ----------------------------------------------- */
.contents_text.c02_01{
	background: url(/images/10th/top/contents_02_text_01.svg) center top no-repeat;
	background-size: 100%;
	padding-bottom: 11%;
}

/* ----------------------------------------------- */
/*                   contents_03                   */
/* ----------------------------------------------- */
.contents_text.c03_01{
	background: url(/images/10th/top/contents_03_text_01.svg) center top no-repeat;
	background-size: 100%;
	padding-bottom: 9%;
}

.interview_menu{
	margin: 30px auto 0;
}

.interview_menu li{
	width: 47%;
}

.interview_menu .contents_button{
	width: 100%;
}

/* ----------------------------------------------- */
/*                   contents_04                   */
/* ----------------------------------------------- */
.contents_text.c04_01{
	background: url(/images/10th/top/contents_04_text_01.svg) center top no-repeat;
	background-size: 100%;
	padding-bottom: 10%;
}

.contents_text.c04_02{
	background: url(/images/10th/top/contents_04_text_02.svg) center top no-repeat;
	background-size: 100%;
	padding-bottom: 8%;
}

.badge{
	margin: 0 auto 60px;
	width: 70%;
	max-width: 600px;
	padding: 15px;
	border: 1px #bbb solid;
	background: #fff;
}

.badge img{
	width: 100%;
	display: block;
}

/* ----------------------------------------------- */
/*                   contents_05                   */
/* ----------------------------------------------- */
.contents_text.c05_01{
	background: url(/images/10th/top/contents_05_text_01.svg) center top no-repeat;
	background-size: 100%;
	width: 80%;
	padding-bottom: 29%;
}

.contents_text.c05_02{
	background: url(/images/10th/top/contents_05_text_02.svg) center top no-repeat;
	background-size: 100%;
	width: 70%;
	padding-bottom: 14%;
}

.contents_text.c05_03{
	background: url(/images/10th/top/contents_05_text_03.svg) center top no-repeat;
	background-size: 100%;
	width: 70%;
	padding-bottom: 18%;
}

.characters_image_title{
	background: url(/images/10th/top/characters_image_title.svg) center top no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: 500px;
    padding-bottom: 4%;
    margin: 0 auto;
}

.characters{
	margin: 0 auto 45px;
	width: 95%;
}

.characters p.left{
	width: 53%;
}

.characters p.right{
	width: 38%;
}

.characters img{
	width: 100%;
}

.end{
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

.end .wrapper{
	width: 100%;
}

.contents_text.c05_04{
	background: url(/images/10th/top/contents_05_text_04.svg) center top no-repeat;
	background-size: 100%;
	width: 80%;
	max-width: 800px;
	padding-bottom: 5%;
}

/* ----------------------------------------------- */
/*                   contents_06                   */
/* ----------------------------------------------- */
.contents_text.c06_01{
	background: url(/images/10th/top/contents_06_text_01.svg) center top no-repeat;
	background-size: 100%;
	width: 82%;
	padding-bottom: 9%;
}

.contents_text.c06_02{
	background: url(/images/10th/top/contents_06_text_02.svg) center top no-repeat;
	background-size: 100%;
	width: 82%;
	padding-bottom: 6%;
}

/* ----------------------------------------------- */
/*                      footer                     */
/* ----------------------------------------------- */
#footer{
	text-align: center;
	background: #C12871;
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
	padding: 8px 0;
}

.copyright {
    font-family: Times New Roman, Times;
}

.footer_logo_piapro{
	height: 15px;
	width: auto;
	vertical-align: middle;
	margin-left: 6px;
}

/* ----------------------------------------------- */
/*                     pagetop                     */
/* ----------------------------------------------- */
#pageTop{
	display: block;
	position: fixed;
	right: 40px;
    bottom: 25px;
	width: 50px;
	height: 50px;
	text-align: center;
	transition-duration: 0.3s;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	z-index: 100;
	opacity: 0.6;
}

#interview #pageTop{
	bottom: 30px;
}

#pageTop::after{
	position: absolute;
    left: 0;
    top: 0;
    display: block;
    line-height: 50px;
    height: 50px;
    width: 50px;
    text-align: center;
    color: #fff;
    font-family: 'FontAwesome';
    content: '\f062';
    font-size: 16px;
	font-size: 1.6rem;
    transition-duration: .3s;
}

#pageTop:hover{
	background: rgba(0, 0, 0, 0.7);
	text-decoration: none;
}

#pageTop:hover::after{
	text-decoration: none;
    font-size: 26px;
	font-size: 2.6rem;
}

/* ----------------------------------------------- */
/*                       sns                       */
/* ----------------------------------------------- */
.index_sns {
    max-width: 1100px;
    padding: 105px 0 0;
    margin: 0 auto;
    text-align: center;
}
/* test update 4 */