@charset "utf-8";

/* ---------------------------------------- 
 - contents（共通）
---------------------------------------- */
#contents_inner {
	background: #ededed;
	padding: 95px 0;
}
@media screen and (max-width: 768px) {
	#contents_inner {
		padding: 12vw 0;
	}
}

/* section */
.section{
	margin: 0 auto 120px;
	padding-top: 100px; /* アンカーリンク対策 */
    margin-top:-100px; /* アンカーリンク対策 */
}
.section:last-child{
	margin-bottom: 0;
}
.section_inner {
	width: 100%;
	max-width: 1100px;
	background: #fff;
	padding: 50px;
	margin: 0 auto;
	text-align: center;
}
.section .midashi{
	position: relative;
    display: inline-block;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 auto 40px;
}
.section .midashi::before{
	position: absolute;
	bottom: 0;
    content: '';
    background: #222;
    display: inline-block;
	width: 100%;
	height: 3px;
}
.section .lead{
	text-align: left;
	margin-bottom: 50px;
}
.section .figure{
	margin: 0 auto 50px;
}
@media screen and (max-width: 768px) {
	.section{
		margin-bottom: 20vw;
	}
	.section_inner {
		padding: 8% 5%;
	}
	.section .midashi{
		font-size: 4.4vw;
		margin-bottom: 5vw;
		letter-spacing: 0;
	}
	.section .midashi::before{
		height: 2px;
	}
	.section .lead{
		font-size: 1.4rem;
		margin-bottom: 30px;
	}
	.section .figure{
		margin-bottom: 20px;
	}
}

/* section_ttl */
.section_ttl {
	width: 86%;
	max-width: 930px;
	text-align: center;
	/*border: solid 4px #195ffb;*/
	position: relative;
	outline: 4px solid #195ffb;
	outline-offset: -4px;
	background: #fff;
	margin: 0 auto 30px;
}
.section_ttl > span{
	position: relative;
    display: block;
	padding: 30px;
	font-size: 5.0rem;
	font-weight: 700;
	line-height: 1.6;
}
.section_ttl::before,
.section_ttl::after,
.section_ttl > span::before,
.section_ttl > span::after{
	position: absolute;
    content: '';
    background: #195ffb;
    display: block;
}
.section_ttl::before {
    top: -8px;
    left: -8px;
    width: 100%;
    height: 4px;
}
.section_ttl::after {
    top: -8px;
    left: -8px;
    width: 4px;
    height: 100%;
}
.section_ttl > span::before {
    bottom: -8px;
    right: -8px;
    width: 100%;
    height: 4px;
}
.section_ttl > span::after {
    bottom: -8px;
    right: -8px;
    width: 4px;
    height: 100%;
}
.section_ttl .num{
	position: absolute;
	top:0;
	left:30px;
	margin-right: auto;
	font-size: 8.6rem;
	font-weight: 500;
	line-height: 1;
	height: 100%;
    display: flex;
	align-items: center;
	color: #195ffb;
}
.section_ttl .num img{
	height:70px;
}
@media screen and (max-width: 768px) {
	.section_ttl {
		width: 90%;
		outline: 3px solid #195ffb;
		outline-offset: -3px;
		margin-bottom: 30px;
	}
	.section_ttl > span{
		padding: 4% 5%;
		font-size: 5.6vw;
		line-height: 1.4;
	}
	.section_ttl::before {
		top: -6px;
		left: -6px;
		height: 3px;
	}
	.section_ttl::after {
		top: -6px;
		left: -6px;
		width: 3px;
	}
	.section_ttl > span::before {
		bottom: -6px;
		right: -6px;
		height: 3px;
	}
	.section_ttl > span::after {
		bottom: -6px;
		right: -6px;
		width: 3px;
	}	
	.section_ttl .num{
		left:5%;
		font-size: 9.0vw;
	}
	.section_ttl .num img{
		height:8vw;
		width: auto;
	}
}
@media screen and (max-width: 480px) {
	.section_ttl {
		outline: 2px solid #195ffb;
		outline-offset: -2px;
	}
	.section_ttl::before {
		top: -4px;
		left: -4px;
		height: 2px;
	}
	.section_ttl::after {
		top: -4px;
		left: -4px;
		width: 2px;
	}
	.section_ttl > span::before {
		bottom: -4px;
		right: -4px;
		height: 2px;
	}
	.section_ttl > span::after {
		bottom: -4px;
		right: -4px;
		width: 2px;
	}
}

/* ---------------------------------------- 
 - main_title
---------------------------------------- */
#main_title .ttl {
	margin: 150px auto 90px;
	text-align: center;
}
#main_title .ttl .en {
	display: block;
	margin-bottom: 10px;
}
#main_title .ttl .en img {
	height: 110px;
	width: auto;
	margin: auto;
}
#main_title .ttl .jp {
	font-size: 3.0rem;
	line-height: 1.6;
	display: block;
	font-weight: 700;
}
#main_title .visual {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: unset;
	overflow: hidden;
	position: relative;
	margin-bottom: 12px;
}
#main_title .visual ul{
	display: flex;
	flex-wrap: nowrap;
	justify-content: unset;
	animation: main-slide 70s infinite linear 1s both;
}
@keyframes main-slide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
#main_title .visual ul li {
	width: 410px;
	margin-right: 12px;
}
@media screen and (max-width: 1024px) {
	#main_title .ttl .en img {
		height: 10vw;
	}
	#main_title .ttl .jp {
		font-size: 3.2vw;
	}
}
@media screen and (max-width: 768px) {
	#main_title .ttl {
		margin: 9vw auto 6vw;
	}
	#main_title .ttl .en img {
		height: 11vw;
	}
	#main_title .ttl .jp {
		font-size: 4.0vw;
	}	
	#main_title .visual {
    margin-bottom: 1.5vw;
}
	#main_title .visual ul li {
		width: 45vw;
		margin-right: 1.5vw;
	}
}

/* ---------------------------------------- 
 - katei
---------------------------------------- */
#katei .figure {
	width: 100%;
	max-width: 797px;
}
#katei .accordion {
	margin-top: 60px;
}
#katei .accordion .txt_box .catch {
    font-size:3.6rem;
	font-weight: 700;
	line-height: 1.6;
	color:#195ffb;
	margin-bottom: 30px;
}
#katei .accordion .txt_box dl {
	margin-bottom: 25px;
}
#katei .accordion .txt_box dl dt {
    font-size:2.6rem;
	font-weight: 700;
	line-height: 1.8;
	border: solid 2px #195ffb;
	margin-bottom: 25px;
}
#katei .accordion .txt_box dl dd .txt {
	text-align: left;
	margin-bottom: 30px;
}
#katei .accordion .txt_box dl.know_01 dd .visual {
	width: 86%;
	max-width: 480px;
	margin: 0 auto;
    position: relative;
	padding-bottom: 90px;
}
#katei .accordion .txt_box dl.know_01 dd .visual::before {
    content: "";
    position: absolute;
    bottom: -20px;
	margin-left: -45px;
	transform: rotate(90deg);
    border: 35px solid transparent;
    border-left: 45px solid #1a5ffc;
}
#katei .accordion .txt_box dl.know_02 dd .visual {
	width: 100%;
	max-width: 555px;
	margin: 0 auto;
    position: relative;
}
#katei .accordion .txt_box > .visual {
	width: 100%;
	max-width: 655px;
	margin: 100px auto 80px;
}
#katei .accordion .txt_box > .link_btn a {
	font-size: 2.8rem;
	padding-left: 25px;
	padding-right: 65px;
	margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
	#katei .accordion {
		margin-top: 35px;
	}
	#katei .accordion .txt_box .catch {
		font-size:5.8vw;
		margin-bottom: 20px;
	}
	#katei .accordion .txt_box dl {
		margin-bottom: 15px;
	}
	#katei .accordion .txt_box dl dt {
		font-size:4.6vw;
		margin-bottom: 15px;
	}
	#katei .accordion .txt_box dl dd .txt {
		margin-bottom: 20px;
	}
	#katei .accordion .txt_box dl.know_01 dd .visual {
		padding-bottom: 40px;
	}
	#katei .accordion .txt_box dl.know_01 dd .visual::before {
		bottom: -15px;
		margin-left: -26px;
		transform: rotate(90deg);
		border: 18px solid transparent;
		border-left: 26px solid #1a5ffc;
	}
	#katei .accordion .txt_box > .visual {
		margin: 50px auto 40px;
	}
	#katei .accordion .txt_box > .link_btn a {
		font-size: 4.2vw;
		padding-left: 15px;
		padding-right: 25px;
		margin-bottom: 10px;
	}
}

/* ---------------------------------------- 
 - gakusai
---------------------------------------- */
#gakusai .lead > span {
	background: #d9e4f3;
	color:#0042a3;
	font-weight: 700;
}
#gakusai .figure {
	width: 100%;
	max-width: 800px;
	margin-bottom: 90px;
}
#gakusai .figure_box {
	margin-bottom: 40px;
}
#gakusai .figure_box .ttl {
	font-size: 2.8rem;
	font-weight: 700;
	margin: 0 auto 20px;
}
#gakusai .figure_box .swipe {
	display: none;
}
@media screen and (max-width: 768px) {
	#gakusai .figure {
		margin-bottom: 40px;
	}
	#gakusai .figure_box {
		margin-bottom: 20px;
	}
	#gakusai .figure_box .ttl {
		font-size: 4vw;
		margin-bottom: 10px;
		letter-spacing: 0;
	}
	#gakusai .figure_box .swipe {
		display: block;
		text-align: left;
		font-size:1.4rem;
		margin-bottom: 1.0em;
	}
	#gakusai .figure_box .swipe span{
		position: relative;
		padding-left: 40px;
	}
	#gakusai .figure_box .swipe span::before{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		content: "";	
		background-image: url("../images/common/ico_swipe.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;	
		width: 30px;
		height: 7px;
	}
	#gakusai .figure_box .visual_box .visual {
		width: 200%;
		padding-bottom: 10px;
	}	
}

/* ---------------------------------------- 
 - module
---------------------------------------- */
#module .figure {
	width: 100%;
	max-width: 795px;
	padding: 20px 0;
}
/* block_list */
#module ul.block_list{
	position:relative;
	width:100%;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	padding: 0 0 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#module ul.block_list li {
	width: calc(50% - 22%);
    max-width: 215px;
    margin: 0 11% 70px;
    position: relative;
}
#module ul.block_list li:last-child {
	margin-bottom: 0;
}
/* block */
#module .block{
	width:100%;
	margin: auto;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
	transform: scale(1);
	/*opacity: 0;	*/
}
#module .block img{
	position: absolute;
	top: 0;
    left: 0;
	transition: all 0.5s 0s ease;
}
/* block_01 */
#module .block_01 .block_01 img{
	transform:translate(-24%,-6%) rotate(45deg);
	transition-delay: 0.7s;
}
#module .block_01 .block_02 img{
	transform:translate(34%,21%) rotate(35deg);
	transition-delay: 1.3s;
}
#module .block_01 .block_03 img{
	transform:translate(32%,-26%) rotate(75deg);
	transition-delay: 1.9s;
}
#module .block_01 .block_04 img{
	transform:translate(-14%,-2%) rotate(40deg);
	transition-delay: 1.9s;
}
#module .block_01 .block_05 img{
	transform:translate(50%,-20%) rotate(125deg);
	transition-delay: 1.9s;
}
#module .block_01 .block_06 img{
	transform:translate(-8%,25%) rotate(35deg);
	transition-delay: 1.9s;
}
#module .block_01 .block_07 img{
	transform:translate(35%,48%) rotate(95deg);
	transition-delay: 1.9s;
}
#module .block_01 .block_08 img{
	transform:translate(-39%,32%) rotate(105deg);
	transition-delay: 1.9s;
}
/* block_02 */
#module .block_02 .block_01 img{
	transform:translate(7%,20%) rotate(90deg);
	transition-delay: 0.7s;
}
#module .block_02 .block_02 img{
	transform:translate(30%,10%) rotate(35deg);
	transition-delay: 1.3s;
}
#module .block_02 .block_03 img{
	transform:translate(22%,9%) rotate(65deg);
	transition-delay: 1.9s;
}
#module .block_02 .block_04 img{
	transform:translate(-13%,11%) rotate(35deg);
	transition-delay: 1.9s;
}
#module .block_02 .block_05 img{
	transform:translate(-45%,-12%) rotate(50deg);
	transition-delay: 1.9s;
}
#module .block_02 .block_06 img{
	transform:translate(20%,18%) rotate(85deg);
	transition-delay: 1.9s;
}
#module .block_02 .block_07 img{
	transform:translate(-14%,-10%) rotate(70deg);
	transition-delay: 1.9s;
}
#module .block_02 .block_08 img{
	transform:translate(3%,28%) rotate(105deg);
	transition-delay: 1.9s;
}
/* block_03 */
#module .block_03 .block_01 img{
	transform:translate(-30%,15%) rotate(55deg);
	transition-delay: 0.7s;
}
#module .block_03 .block_02 img{
	transform:translate(-55%,-20%) rotate(75deg);
	transition-delay: 1.3s;
}
#module .block_03 .block_03 img{
	transform:translate(10%,11%) rotate(55deg);
	transition-delay: 1.9s;
}
#module .block_03 .block_04 img{
	transform:translate(-13%,-7%) rotate(40deg);
	transition-delay: 1.9s;
}
#module .block_03 .block_05 img{
	transform:translate(4%,28%) rotate(55deg);
	transition-delay: 1.9s;
}
#module .block_03 .block_06 img{
	transform:translate(69%,8%) rotate(35deg);
	transition-delay: 1.9s;
}
#module .block_03 .block_07 img{
	transform:translate(-17%,40%) rotate(80deg);
	transition-delay: 1.9s;
}
#module .block_03 .block_08 img{
	transform:translate(-15%,2%) rotate(115deg);
	transition-delay: 1.9s;
}
#module ul.block_list li.anime .block img{
	transform:translate(0,0) rotate(0deg);
}
/* accordion */
#module .accordion {
	margin-top: 60px;
}
#module .accordion .txt_box dl {
	margin-bottom: 65px;
}
#module .accordion .txt_box dl:last-child {
	margin-bottom: 0;
}
#module .accordion .txt_box dl dt {
    font-size:2.4rem;
	font-weight: 700;
	background: #e0e0e0;
	padding: 0.2em;
	margin-bottom: 25px;
}
#module .accordion .txt_box dl dd {
	display: flex;
	justify-content: space-between;
}
#module .accordion .txt_box dl dd .ex_box:nth-child(1) {
	width: 53%;
}
#module .accordion .txt_box dl dd .ex_box:nth-child(2) {
	width: 43%;
}
#module .accordion .txt_box dl dd .ex_box .ttl {
	font-size: 1.8rem;
	font-weight: 700;
	border-bottom: solid 1px #777;
	margin-bottom: 20px;
}
#module .accordion .txt_box dl dd .ex_box .txt {
	text-align: left;
	font-size: 1.4rem;
	margin-top: 10px;
}
@media screen and (max-width: 768px) {
	/* block_list */
	#module ul.block_list {
		padding-bottom: 20px;
	}
	/* accordion */
	#module .accordion {
		margin-top: 30px;
	}
	#module .accordion .txt_box dl {
		margin-bottom: 45px;
	}
	#module .accordion .txt_box dl dt {
		font-size:2rem;
		margin-bottom: 10px;
	}
	#module .accordion .txt_box dl dd {
		display: block;
	}
	#module .accordion .txt_box dl dd .ex_box:nth-child(1) {
		width: 100%;
		margin-bottom: 15px;
	}
	#module .accordion .txt_box dl dd .ex_box:nth-child(2) {
		width: 100%;
	}
	#module .accordion .txt_box dl dd .ex_box:nth-child(2) .visual {
		width: 90%;
		margin: auto;
	}
	#module .accordion .txt_box dl dd .ex_box .ttl {
		font-size: 1.6rem;
		margin-bottom: 10px;
		letter-spacing: 0;
	}
	#module .accordion .txt_box dl dd .ex_box .txt {
		text-align: left;
		font-size: 1.4rem;
		margin-top: 10px;
	}
}
@media screen and (max-width: 480px) {
	/* block_list */
	#module ul.block_list li:nth-child(1) {
		margin: 0 12% 12% 8%;
	}
	#module ul.block_list li:nth-child(2) {
		margin: 0 8% 12% 12%;
	}
}

/* ---------------------------------------- 
 - movie
---------------------------------------- */
#movie .movie_list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#movie .movie_list li {
	width:48%;
	max-width: 480px;
	position: relative;
	margin-bottom: 4%;
}
#movie .movie_list li:nth-child(1) {
	margin-right: auto;
}
#movie .movie_list li:nth-child(2) {
	margin-left: auto;
}
#movie .movie_list li::before {
	position: absolute;
    z-index: 2;
    top: -20px;
    left: 20px;
    content: '';
    background: #7f7f7f;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#movie .movie_list li a {
    position: relative;
    display: block;
}
#movie .movie_list li a::before {
    position: absolute;
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%); 
	content: '';
    transition: .3s;
    z-index: 2;	
	background-image: url(../images/feature/movie_arw.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 8vw;
	max-width: 100px;
	height: 8vw;
	max-height: 100px;
}
#movie .movie_list li a:hover::before {
	opacity: .7;
}
#movie .notice {
	margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
	#movie .movie_list {
		display: block;
	}
	#movie .movie_list li {
		width:100%;
		max-width: 480px;
		margin-bottom: 25px;
	}
	#movie .movie_list li a::before {
		width: 15vw;
		height: 15vw;
	}	
	#movie .notice {
		margin-bottom: 0;
	}
}

/* ---------------------------------------- 
 - home_btn
---------------------------------------- */
.home_btn{
	width: 80%;
	margin: 95px auto 0;
	text-align: center;
}
.home_btn a{
	padding-left: 35px;
	padding-right: 25px;	
}
.home_btn a::before{
	right: auto;
	left: 25px;
}
.home_btn a::after{
	right: auto;
	left: 30px;
	transform: rotate(180deg);
}
@media screen and (max-width: 768px) {
	.home_btn{
		margin-top: 12vw;
	}
	.home_btn a{
		padding-left: 25px;
		padding-right: 15px;
	}
}

/* ---------------------------------------- 
 - request
---------------------------------------- */
#request {
	width: 100%;
	margin: 95px auto;
    position: relative;
	text-align: center;
	padding-top: 0;
}
#request .btn a{
	display: inline-block;
	position: relative;
    transition: .3s;
	text-decoration: none;
	font-size: 3.0rem;
	font-weight: 700;
	line-height: 110px;
	height: 110px;
	width: 80%;
	max-width: 450px;
	padding: 0 2%;
	margin-left: auto;
	box-sizing: border-box;
	background: #195ffb;
	color:#fff;
	text-align: center;
	z-index: 2;
}
#request .btn a:hover{
	opacity: 0.7;
}
#request .btn a span{
	position: relative;
	display: inline-block;
	padding-left: 50px;
}
#request .btn a span::before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	width: 31px;
	height: 24px;
	background-image: url("../images/common/ico_request_wht.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
@media screen and (max-width: 1000px) {
	#request .btn a{
		font-size: 2.8vw;
	}
	#request .btn a span{
		padding-left: 35px;
	}
	#request .btn a span::before{
		width: 22px;
		height: 17px;
	}
}
@media screen and (max-width: 768px) {
	#request {
		margin: 12vw auto;
		height: auto;
	}
	#request .btn {
		display: block;
	}
	#request .btn a{
		font-size: 4.4vw;
		line-height: 100px;
		height: 100px;
		width: 80%;
	}
	#request .btn a span{
		padding-left: 50px;
	}
	#request .btn a span::before{
		width: 31px;
		height: 24px;
	}
}
@media screen and (max-width: 768px) {
	#request .btn a{
		font-size: 4.8vw;
		line-height: 70px;
		height: 70px;
	}
	#request .btn a span{
		padding-left: 40px;
	}
	#request .btn a span::before{
		width: 24px;
    	height: 18px;
	}
}