@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	トップページ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	レイアウト

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		max-width: none;
		/* max-width: 1920px; 固定幅レイアウト時 */
		width: 100%;
		min-height: 50vh;
		display: block;
		margin: 0 auto;
	}

	.inner_wrap {
		position: relative;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		width: 100%;
	}

	.inner_wrap {
		position: relative;
	}
}




/* ================================================================================

	メイン画像

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.main_top {
		position: relative;
		background: url(../img/top_main.jpg) center top / contain no-repeat;
		width: 100%;
		height: 43.28vw;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.main_top {
		position: relative;
		background: url(../img/top_main_sp.jpg) center top / contain no-repeat;
		width: 100%;
		height: 102vw;
	}
}




/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	ここからコンテンツ内容

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ================================================================================

	QUESTION

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row01 {
		padding: 190px 0;
	}
	
	.row01_title h2 {
		color: #4dd4ff;
		font-weight: 900;
		font-family: 'Roboto', 'ヒラギノ角ゴ ProN W3', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		font-size: 140px;
		text-align: center;
		letter-spacing: 0.075em;
	}
	
	.row01_subtitle {
		margin-top: 34px;
	}
	.row01_subtitle h3 {
		text-indent: -9999px;
		background: url(../img/row01_subtitle.jpg) center top / contain no-repeat;
		width: 100%;
		height: 79px;
	}
	
	.row01_text {
		text-align: center;
		font-weight: 600;
		font-size: 20px;
		margin: 40px 0 0 0;
		line-height: 2.4;
		letter-spacing: 0.03em;
	}
	
	.button01 {
		width: 282px !important;
		margin: 58px auto 0;
	}
	.button01 a {
		color: #ffffff;
		font-weight: 900;
		background-color: #84e0ff;
		line-height: 1.5;
		position: relative;
		display: inline-block;
		cursor: pointer;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		width: 282px;
		border-radius: 16px;
		font-size: 22px;
		padding: 18px 0;
		letter-spacing: 0.1em;
		transition-property: all;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
		transform: translate(0,-8px);
	}
	.button01:after {
		content: '';
		width: 282px;
		height: 69px;
		background-color: #69cff1;
		position: absolute;
		z-index: -1;
		display: block;
		top: 0;
		left: 0;
		border-radius: 16px;
	}
	.button01 a:hover {
		opacity: 1;
		transform: translate(0,0);
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row01 {
		padding: 14vw 0 18vw;
	}
	
	.row01_title h2 {
		color: #4dd4ff;
		font-weight: 900;
		font-family: 'Roboto', 'ヒラギノ角ゴ ProN W3', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		font-size: 12vw;
		text-align: center;
		letter-spacing: 0.075em;
	}
	
	.row01_subtitle {
		margin-top: 3vw;
	}
	.row01_subtitle h3 {
		text-indent: -9999px;
		background: url(../img/row01_subtitle.jpg) center top / contain no-repeat;
		width: 100%;
		height: 7vw;
	}
	
	.row01_text {
		text-align: center;
		font-weight: 600;
		margin: 4vw 0 0 0;
		line-height: 2;
		letter-spacing: 0.03em;
	}
	
	.button01 {
		margin: 5vw auto 0;
		text-align: center;
		width: 55vw !important;
	}
	.button01 a {
		color: #ffffff;
		font-weight: 900;
		background-color: #84e0ff;
		line-height: 1.5;
		position: relative;
		display: inline-block;
		cursor: pointer;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		width: 55vw;
		border-radius: 4vw;
		font-size: 4vw;
		padding: 3vw 0;
		letter-spacing: 0.1em;
		transition-property: all;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
		transform: translate(0,-1.4vw);
	}
	.button01:after {
		content: '';
		width: 55vw;
		height: 10vw;
		background-color: #69cff1;
		position: absolute;
		z-index: -1;
		display: block;
		top: 2vw;
		border-radius: 4vw;
		left: 0;
	}
	.button01 a:hover {
		opacity: 1;
		transform: translate(0,0);
	}
	
	
}





/* ================================================================================

	MEMBER

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row02 {
		position: relative;
		z-index: 0;
		padding: 160px 0 200px;
	}
	.row02::before {
		content: '';
		position: absolute;
		background: url(../img/chara01.png) center top / contain no-repeat;
		top: -280px;
		left: 50%;
		width: 410px;
		height: 349px;
		margin-left: -568px;
		z-index: -1;
	}
	.row02::after{
		content: '';
		position: absolute;
		left: 0;
		top: -80px;
		transform: skewY(-4deg);
		transform-origin: top right;
		z-index: -2;
		width: 100%;
		height: 100%;
		background: #ebfaff;
	}
	
	.row02_title h2 {
		position: relative;
		color: #4dd4ff;
		font-weight: 900;
		font-family: 'Roboto', 'ヒラギノ角ゴ ProN W3', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		font-size: 140px;
		text-align: center;
		letter-spacing: 0.075em;
	}
	.row02_title h2:after {
		position: absolute;
		content: '';
		background: url(../img/row02_title.png) center top / contain no-repeat;
		top: 69px;
		right: 58px;
		width: 322px;
		height: 162px;
	}
	
	.row02_text {
		text-align: center;
		font-weight: 600;
		font-size: 20px;
		margin: 40px 0 0 0;
		line-height: 2.4;
		letter-spacing: 0.03em;
	}
	
	.row02_imgbox {
		margin: 62px 0 20px;
	}
	
	.row02_img02 {
		margin: 0 45px;
	}
	
	.row02_img a {
		line-height: 1.5;
		position: relative;
		cursor: pointer;
		width: 303.04px;
		transition-property: all;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
		transform: translate(0,-10px);
		display: block;
	}
	.row02_img:after {
		content: '';
		width: 303.04px;
		height: 303.04px;
		background-color: #bceeff;
		position: absolute;
		z-index: -1;
		display: block;
		top: 0;
		left: 0;
		border-radius: 16px;
	}
	.row02_img a:hover {
		opacity: 1;
		transform: translate(0,0);
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row02 {
		position: relative;
		z-index: 0;
		padding: 34vw 0 20vw;
	}
	.row02::before {
		content: '';
		position: absolute;
		background: url(../img/chara01.png) center top / contain no-repeat;
		top: -14vw;
		left: 5vw;
		width: 53vw;
		height: 45vw;
		z-index: 0;
	}
	.row02::after{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		transform: skewY(-4deg);
		transform-origin: top right;
		z-index: -2;
		width: 100%;
		height: 100%;
		background: #ebfaff;
	}
	
	.row02_title h2 {
		position: relative;
		color: #4dd4ff;
		font-weight: 900;
		font-family: 'Roboto', 'ヒラギノ角ゴ ProN W3', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
		font-size: 12vw;
		text-align: center;
		letter-spacing: 0.075em;
	}
	.row02_title h2:after {
		position: absolute;
		content: '';
		background: url(../img/row02_title.png) center top / contain no-repeat;
		top: 5vw;
		right: 6vw;
		width: 37vw;
		height: 8vw;
	}
	
	.row02_text {
		text-align: center;
		font-weight: 600;
		margin: 4vw 0 0 0;
		line-height: 2;
		letter-spacing: 0.03em;
	}
	
	.row02_imgbox {
		margin: 7vw 20vw 5vw;
	}
	
	.row02_img02 {
		margin: 8vw 0;
	}
	
	.row02_img a {
		line-height: 1.5;
		position: relative;
		cursor: pointer;
		transition-property: all;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
		transform: translate(0,-2.3vw);
		display: block;
	}
	.row02_img:after {
		content: '';
		width: 60vw;
		height: 60vw;
		background-color: #bceeff;
		position: absolute;
		z-index: -1;
		display: block;
		top: 0;
		left: 0;
		border-radius: 2.5vw;
	}
	.row02_img a:hover {
		opacity: 1;
		transform: translate(0,0);
	}
	
	
}





/* ================================================================================

	バナー

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row03 {
		padding: 154px 0 309px;
	}
	
	.row03::before {
		position: absolute;
		content: '';
		background: url(../img/chara02.png) center top / contain no-repeat;
		width: 434px;
		height: 281px;
		top: -272px;
		left: 50%;
		margin-left: 110px;
	}
	.row03::after {
		position: absolute;
		content: '';
		background: url(../img/chara03.png) center top / contain no-repeat;
		width: 426px;
		height: 249px;
		bottom: -48px;
		left: 50%;
		margin-left: -104px;
		z-index: -1;
	}
	
	.row03_banner01 a {
		position: relative;
		display: block;
		background: url(../img/row03_banner01.png) center top / contain no-repeat;
		color: #fff;
		font-size: 40px;
		font-weight: 900;
		height: 214px;
		padding: 73px;
	}
	.row03_banner01 a:after {
		position: absolute;
		content: '>';
		font-size: 50px;
		top: 59px;
		right: 60px;
		color: #fff;
	}
	
	.row03_banner02 {
		margin-top: 70px;
	}
	.row03_banner02 a {
		display: block;
		background: url(../img/row03_banner02.png) center top / contain no-repeat;
		color: #fff;
		font-size: 40px;
		font-weight: 900;
		height: 214px;
		padding: 73px;
	}
	.row03_banner02 a:after {
		position: absolute;
		content: '>';
		font-size: 50px;
		top: 59px;
		right: 60px;
		color: #fff;
	}
	
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row03 {
		padding: 29vw 6vw 40vw;
	}
	
	.row03::before {
		position: absolute;
		content: '';
		background: url(../img/chara02.png) center top / contain no-repeat;
		width: 57vw;
		height: 37vw;
		top: -17vw;
		right: 6vw;
	}
	.row03::after {
		position: absolute;
		content: '';
		background: url(../img/chara03.png) center top / contain no-repeat;
		width: 57vw;
		height: 34vw;
		bottom: -8vw;
		left: 50%;
		margin-left: -14vw;
		z-index: -1;
	}
	
	.row03_banner01 a {
		position: relative;
		display: block;
		background: url(../img/row03_banner01_sp.png) center top / contain no-repeat;
		color: #fff;
		font-size: 6vw;
		font-weight: 900;
		height: 46vw;
		padding: 18vw 0;
		text-align: center;
	}
	.row03_banner01 a:after {
		position: absolute;
		content: '>';
		font-size: 6vw;
		top: 17.5vw;
		right: 5vw;
		color: #fff;
	}
	
	.row03_banner02 {
		margin-top: 8vw;
	}
	.row03_banner02 a {
		display: block;
		background: url(../img/row03_banner02_sp.png) center top / contain no-repeat;
		color: #fff;
		font-size: 6vw;
		font-weight: 900;
		height: 46vw;
		padding: 18vw 0;
		text-align: center;
	}
	.row03_banner02 a:after {
		position: absolute;
		content: '>';
		font-size: 6vw;
		top: 17.5vw;
		right: 5vw;
		color: #fff;
	}
}





/* ================================================================================

	〇〇

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	
}





/* ================================================================================

	〇〇

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	
}