@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

html {
	font-size: 62.5%;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	overflow-x: hidden;
	min-width: 320px;
}

img.noivent {
	pointer-events: none;
}

.bg1,
.bg2,
.bg3,
.bg4,
.bg5,
.bg6,
.bg7 {
	width: 100%;
}

.main_pc {
	max-width: 1300px;
	margin: 0 auto;
}

.sec1,
.sec2,
.sec3,
.sec4,
.sec5,
.sec6,
.sec7 {
	position: relative;
}

.sec6.mt40 {
	margin-top: 40px;
}

.sec7 {
	overflow-x: hidden;
}

.appbtn {
	position: absolute;
	top: 75%;
	right: 24%;
	width: 16vw;
	max-width: 208px;
	transition: .1s;
}

.goobtn {
	position: absolute;
	top: 75%;
	right: 5.5%;
	width: 19vw;
	max-width: 250px;
	transition: .1s;
}

.appbtn:hover,
.goobtn:hover,
.facebook_btn:hover,
.twitter_btn:hover {
	transform: translateY(-5px);
}

.sec7 {
	position: relative;
}

.sec7 .appbtn {
	top: 60%;
	left: 18%;
}

.sec7 .goobtn {
	top: 60%;
	left: 35%;
}

.main_pc .facebook_btn {
	width: 5.38vw;
	position: absolute;
	top: 62%;
	left: 56%;
	transition: .1s;
	max-width: 70px;
}

.main_pc .twitter_btn {
	width: 5.38vw;
	position: absolute;
	top: 62%;
	left: 63%;
	transition: .1s;
	max-width: 70px;
}

.main_pc .share {
	width: 12.31vw;
	position: absolute;
	top: 65%;
	left: 69%;
	max-width: 159px;
}

/* スクロールアニメ */
.js-fade {
	opacity: 0;
	visibility: hidden;
	transform: translateY(50px);
	transition: opacity 1s, visibility 1s, transform 2s;
}

.js-fade.fadeIn {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.main_sp {
	display: none;
}


/* レスポンシブ */
@media screen and (max-width:1020px) {
	.main_pc {
		display: none;
	}

	.main_sp {
		display: block;
	}

	.matsubens {
		width: 65vw !important;
	}
}

/* sp表示 */
.sp1 {
	position: relative;
}

.main_sp .appbtn {
	width: 38.67vw;
	top: 89%;
	right: 53%;
	max-width: 400px;
}

.main_sp .goobtn {
	width: 46.4vw;
	top: 89%;
	right: 8.5%;
	max-width: 450px;
}

@media screen and (max-width:320px) {
	.main_sp .appbtn {
		width: 38.67%;
	}

	.main_sp .goobtn {
		width: 46.4%;
	}
}

.sec8 {
	position: relative;
}

.sec8 .appbtn {
	top: 51%;
}

.sec8 .goobtn {
	top: 51%;
}

.sec8 .facebook_btn {
	width: 11.87vw;
	position: absolute;
	top: 71%;
	left: 21%;
}

.sec8 .twitter_btn {
	width: 11.87vw;
	position: absolute;
	top: 71%;
	left: 36%;
}

.sec8 .share {
	width: 27.27vw;
	position: absolute;
	top: 73.5%;
	left: 51%;
}

/* テキスト系 */
.text1 {
	font-weight: bold;
	color: #E8581B;
	font-size: min(2.5vw, 30px);
	position: absolute;
	top: 25%;
	left: 39%;
	letter-spacing: -2px;
}

.text1.sp {
	/* font-size: min(4.5vw, 42px); */
	position: static;
	text-align: center;
	margin-bottom: 15px;
	margin-top: -100px;
}

@media screen and (max-width:1020px) {
	.text1.sp {
		font-size: 4.5vw;
		margin-top: -20px;
	}
}

@media screen and (max-width:320px) {
	.text1.sp {
		font-size: 14px;
	}
}

.text2 {
	font-weight: bold;
	text-align: center;
	font-size: min(2vw, 25px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	letter-spacing: -1.5px;
	line-height: 1.5;
}

.text2.sp {
	/* font-size: min(3.5vw, 42px); */
	position: static;
	transform: translateX(0);
	line-height: 1.5;
	margin-bottom: 50px;
}

@media screen and (max-width:1020px) {
	.text2.sp {
		font-size: 3.5vw;
	}
}

@media screen and (max-width:320px) {
	.text2.sp {
		font-size: 11px;
	}
}

.text3 {
	position: absolute;
	top: 19%;
	left: 36%;
	font-size: min(1vw, 12px);
	font-weight: bold;
}

.text3.sp {
	font-size: min(2vw, 42px);
	top: 62%;
	left: 58%;
}

@media screen and (max-width:320px) {
	.text3.sp {
		font-size: 10px;
		left: 53%;
	}
}

.text4 {
	position: absolute;
	top: 65%;
	left: 48%;
	font-size: min(2vw, 25px);
	font-weight: bold;
	letter-spacing: -0.5px;
}

.text4.sp {
	top: 28%;
	left: 22.5%;
	font-size: min(3.7vw, 32px);
	line-height: 1.5;
}

@media screen and (max-width:320px) {
	.text4.sp {
		font-size: 11px;
	}
}

.text5 {
	position: absolute;
	top: 58%;
	left: 19%;
	font-size: min(1.8vw, 23px);
	font-weight: bold;
	letter-spacing: -0.5px;
	line-height: 1.6;
}

.text5.sp {
	top: 24%;
	left: 16%;
	/* font-size: min(3.2vw, 40px); */
}

@media screen and (max-width:500px) {
	.text5.sp {
		left: 14%;
	}
}

@media screen and (max-width:380px) {
	.text5.sp {
		top: 23%;
		line-height: 1.5;
	}
}

@media screen and (max-width:320px) {
	.text5.sp {
		font-size: 11px;
	}
}

.text6 {
	position: absolute;
	top: 77%;
	left: 19%;
	font-size: min(1vw, 14px);
	font-weight: bold;
	line-height: 1.7;
}

.text6.sp {
	top: 31.5%;
	left: 16%;
	/* font-size: min(2vw, 23px); */
	width: 375px;
	line-height: 1.2;
	width: 70vw;
	line-height: 1.5;
	box-sizing: border-box;
}

@media screen and (max-width:500px) {
	.text6.sp {
		left: 14%;
		font-size: 10px;
	}
}

@media screen and (max-width:380px) {
	.text6.sp {
		width: 70%;
		top: 30%;
		line-height: 1.3;
	}
}


.text7 {
	position: absolute;
	top: 24%;
	left: 33%;
	font-size: min(1.8vw, 23px);
	font-weight: bold;
	letter-spacing: -0.5px;
	line-height: 1.4;
}

.text7.sp {
	/* font-size: min(3.3vw, 40px); */
	left: 23%;
	top: 23%;
}

@media screen and (max-width:320px) {
	.text7.sp {
		font-size: 11px;
	}
}

.text8 {
	text-align: center;
	position: absolute;
	top: 47.5%;
	left: 33.5%;
	font-size: min(0.9vw, 11px);
	font-weight: 900;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.text8 span {
	display: block;
	text-align: center;
}

.text9 {
	text-align: center;
	position: absolute;
	top: 45%;
	left: 44%;
	font-size: min(0.9vw, 11px);
	font-weight: bold;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.text9 span {
	display: block;
	text-align: center;
}

.text10 {
	text-align: center;
	position: absolute;
	top: 42.5%;
	left: 55.3%;
	font-size: min(0.9vw, 11px);
	font-weight: bold;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.text10 span {
	display: block;
	text-align: center;
}

.text11 {
	text-align: center;
	position: absolute;
	top: 40.8%;
	left: 66.5%;
	font-size: min(0.9vw, 11px);
	font-weight: bold;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.text11 span {
	display: block;
	text-align: center;
}

.text12 {
	text-align: center;
	position: absolute;
	top: 39.5%;
	left: 78%;
	font-size: min(0.9vw, 11px);
	font-weight: bold;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.text12 span {
	display: block;
	text-align: center;
}

.text13 {
	position: absolute;
	top: 72%;
	left: 12.5%;
	font-weight: bold;
	font-size: min(1vw, 13.5px);
}

.text13.sp {
	top: 64%;
	left: 30.5%;
	/* font-size: min(2vw, 40px); */
	width: 59vw;
	line-height: 1.5;
}

@media screen and (max-width:460px) {
	.text13.sp {
		/* top: 64%; */
		font-size: 10px;
		line-height: 1;
	}
}

@media screen and (max-width:375px) {
	.text13.sp {
		/* font-size: min(1.8vw, 40px); */
		font-size: 10px;
		font-weight: 400;
	}

	.mpbtn.sp {
		top: 79% !important;
	}
}

.mpbtn {
	position: absolute;
	top: 78%;
	left: 36%;
}

.mpbtn.sp {
	position: absolute;
	top: auto;
	bottom: 16%;
	left: 33%;
	width: 41vw;
}

@media screen and (mmax-width:460px) {
	.mpbtn.sp {
		bottom: 16%;
		left: 33%;
		width: 40%;
	}
}

.text14 {
	text-align: center;
	position: absolute;
	top: 31.5%;
	left: 50%;
	transform: translateX(-50%);
	font-weight: bold;
	font-size: min(2.3vw, 34px);
	width: 100%;
	line-height: 1.5;
}

.text14 span {
	color: #E8581B;
	font-size: min(3vw, 40px);
}

.text14.sp {
	font-size: min(4.5vw, 40px);
}

.text14.sp span {
	font-size: min(5vw, 40px);
}

.text15 {
	text-align: center;
	font-weight: bold;
	position: absolute;
	top: 77%;
	left: 50%;
	transform: translateX(-50%);
	font-size: min(2vw, 22px);
	white-space: nowrap;
	line-height: 1.5;
}

.text15.sp {
	font-size: 3.3vw;
	width: 100%;
	line-height: 1.5;
	top: 74%;
}

.matsubens {
	position: absolute;
	top: 73%;
	left: 50%;
	transform: translateX(-50%);
	width: 32vw;
	max-width: 434px;
}

.matsubens:hover {
	opacity: .8;
}

.textCpr {
	text-align: center;
	font-weight: bold;
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translateX(-50%);
	font-size: min(2vw, 16px);
	width: 76%;
}

@media screen and (max-width:1020px) {
	.text6.sp {
		width: 70%;
	}

	.text4.sp {
		font-size: 3.7vw;
	}

	.text5.sp {
		font-size: 3.2vw;
	}

	.text6.sp {
		font-size: 2vw;
	}

	.text7.sp {
		font-size: 3.3vw;
	}

	.text13.sp {
		font-size: 2vw;
	}

	.text14.sp {
		font-size: 4.5vw;
	}

	.text14.sp span {
		font-size: 5vw;
	}
}

/* スライド */
.fade-area {
	position: absolute;
	top: 13%;
	left: 59%;
	width: 19vw;
}

.fade-list {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 20%;
}

#slide ul li {
	width: 18vw;
	height: auto;
}

#slide2 ul li {
	width: 58.67vw;
	height: auto;
}

#slide2 ul li img {
	width: 100%;
}

#slide2 {
	position: absolute;
	top: 40%;
	left: 19%;
}

br.spbr {
	display: block;
}

@media screen and (min-width:1200px) {
	.fade-area {
		width: 19%;
	}

	#slide ul li {
		width: 100%;
	}

}

@media screen and (max-width:500px) {
	br.spbr {
		display: none;
	}
}

.red {
	color: red;
}

/* spslider */
#slideWrap {
	position: absolute;
	bottom: 8%;
	left: 20%;
	width: 100%;
}

.slickslide img {
	width: 58vw;
}

@media screen and (max-width:400px) {
	.slickslide img {
		width: 56%;
	}
}

.sec5 {
	overflow: hidden;
}

.merit1 {
	position: relative;
	z-index: 100;
}

.merit2 {
	margin-top: -5%;
}

.merit3 {
	position: relative;
	z-index: 100;
	margin-top: -14%;
}

/* sp文字 */
.text8.sp {
	top: 43.8%;
	left: 14.5%;
	font-size: 1.6vw;
}

.text8.sp span {
	margin-top: 0;
}

.text9.sp {
	top: 42%;
	left: 29.5%;
	font-size: 1.6vw;
}

.text9.sp span {
	margin-top: 0;
}

.text10.sp {
	font-size: 1.6vw;
	top: 40.2%;
	left: 45.8%;
}

.text10.sp span {
	margin-top: 0;
}

.text11.sp {
	font-size: 1.6vw;
	top: 39%;
	left: 61.5%;
}

.text11.sp span {
	margin-top: 0;
}

.text12.sp {
	font-size: 1.6vw;
	top: 38.1%;
	left: 78%;
}

.text12.sp span {
	margin-top: 0;
}

.toppix-box-container {
	text-align: center;
	max-width:1000px;
	margin: 0 auto;
}

.toppix-box-style0 {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 40px 0;
    text-align: left;
    padding: 1.5em 2em;
	border: solid 5px #eeeeee;
	font-size: 18px;
	line-height: 1.5em;
}

.toppix-box-style0 .box-toppix-title {
    position: absolute;
    display: inline-block;
    top: -12px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 20px;
    background: #FFF;
    color: #000;
    font-weight: bold;
}

.mb40 {
    margin-bottom: 40px;
}

h5 {
    margin-bottom: 10px;
}

.chapter_list01 {
text-indent:-1em;
  padding-left:1em;
}

.chapter_list01 li {
    margin-bottom: 10px;
}

@media screen and (max-width:999px) {
	.toppix-box-container {
	text-align: center;
		margin: 0 20px;
	}
	.toppix-box-style0 .box-toppix-title {
	display: none;
	}
	.toppix-box-style0 {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 40px 0;
    padding: 0;
	border: none;
	font-size: 14px;
	line-height: 1.5em;
	}
}