@charset "UTF-8";
/* CSS Document */

/*========= 
トップページ 
===============*/

#top-page .label {
  position: relative;
  cursor: pointer;
  padding-left: 30px;
}

.style{
	display: flex;
	font-weight: 900
}
.style .choice{
	display: flex;
}
.choice li{
	padding-left: 1rem;
	margin: auto 0;
}
.choice li a{
	text-decoration: none;
	margin: auto 0;
	color: #fff;
	margin-left: 1.5rem;
}

.choice li a::before,
.choice li a::after {
  content: "";
  display: block; 
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

.choice li a::before {
  background-color: #fff;
  border: 6px solid #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  /*left: 5px;*/
}

.choice  li .select::after {
  background-color: #000;
  border-radius: 50%;
  opacity: 1;
  width: 8px;
  height: 8px;
  /*left: 7px*/
  margin: 0 6px;
}

#top-page input:checked + label::after {
  opacity: 1;
}

#top-page .visually-hidden {
 position: absolute;
 white-space: nowrap;
 border: 0;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
 height: 1px;
 width: 1px;
 margin: -1px;
 padding: 0;
}

#top-page .choice2 li a{
	text-decoration: none;
	margin: auto 0;
	color: #fff;
}
#top-page .choice2 {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
}

#top-page .choice2 li {
  width: 6rem;
}

#top-page .choice2 li a::before,
#top-page .choice2 li a::after {
  content: "";
  display: block; 
  border-radius: 50%;
  transform: translate(175%, -60%);
  /*top: 50%;*/
  margin: -10px 2.8%;
}

#top-page .choice2 li a::before {
  background-color: #fff;
  border: 6px solid #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  /*left: 5px;*/
}

#top-page .choice2  li .select2::after {
  background-color: #000;
  border-radius: 50%;
  opacity: 1;
  width: 8px;
  height: 8px;
  /*left: 7px*/
  transform: translate(512%, -410%);
}


#top-page{
	width: 100%;
    margin: 0 auto;
	overflow: hidden;
}
#top-page .main-mv-area{
	/*max-width: 900px;*/
    position: relative;
    /*height: 560px;*/
}
#top-page .main-mv{
    margin: 0 auto;
	text-align: center
}
#top-page .main-mv video{
	width: 100%;
	display: block;
}
.main-txt-area{
	/*background: #f4bf36;
	position: relative;
	margin-top: 500px;*/
	background-image: url(../image/back_l.svg),url(../image/back_r.svg);
	background-repeat: repeat-y, repeat-y;
	background-position: top left, top right;
	background-color: #CD0000;
	background-size: 25%;
	padding-top: 2rem;
}
/*#top-page .main-txt-area::before{
	content: '';
	display: block;
	width: 2000px;
    height: 500px;
	background: url("../image/main-txt-bg.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: relative;
    top: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: -1;
}*/

#top-page .text{
	width: 18rem;
    text-align: left;
    margin: 0 auto;
    padding: 2rem;
    line-height: 2.4rem;
}
#top-page .text p{
	padding: 1rem 0 3rem 2rem;
}

#top-page .main-txt-area h2{
	width: 50%;
	margin: -850px auto 150px;
}
#top-page .main-txt img{
	width: 80%;
	margin: 0 auto;
}
#top-page .main-txt{
	position: relative;
	margin-bottom: 150px;
}
#top-page .main-txt::after{
	content: '';
	display: block;
	width: 92px;
	height: 92px;
	background: url("../image/main-txt-qq.png");
	background-size: contain;
	position: absolute;
	right: 0;
	animation: 2s steps(2) infinite qq-anime ;
}
#top-page .text2{
	width: 30rem;
    text-align: center;
    margin: 0 auto 6rem;
}
#top-page .text3{
	width: 30rem;
    text-align: center;
    margin: 0 auto;
	padding: 4rem 0 10rem;
}
#top-page .text3 p{
	margin-top: 1rem;
}
#top-page .text3 a{
	text-decoration: none;
	color: #fff;
}


#top-page .detail{
	margin-top: 2rem;
    margin-bottom: -5px;
    margin-right: 10px;
    font-size: .8rem;
    text-align: right;
	text-decoration: none;
	color: #fff;
}
#top-page .deteail-link{
	text-decoration: none;
	color: #fff;
}

#top-page .arrow01{
    line-height: 1;
    position: relative;
    background: #fff;
	margin: .5rem 0 0 auto;
}
#top-page .arrow01::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    position: absolute;
    box-sizing: border-box;
}
#top-page .arrow01.-right{
    width: 100px;
    height: 1px;
	display: block;
}
#top-page .arrow01.-right::before {
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    top: 50%;
    right: -1px;
    transition: all .3s;
}
#top-page .arrow01.-right::after {
    content: "";
	position: absolute;
    transition: all .3s;
}

#top-page .arrow02{
    line-height: 1;
    position: relative;
    background: #fff;
	margin: .5rem 7.5rem 0 auto;
}
#top-page .arrow02::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    position: absolute;
    box-sizing: border-box;
}
#top-page .arrow02.-right{
    width: 40px;
    height: 1px;
	display: block;
}
#top-page .arrow02.-right::before {
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    top: 50%;
    right: -1px;
    transition: all .3s;
}
#top-page .arrow02.-right::after {
    content: "";
	position: absolute;
    transition: all .3s;
}
/*
#top-page .arrow.-right:hover::before {
    left: 80%;
	transition: all .3s;
}
#top-page .arrow.-right:hover {
    right: -3%;
	transition: all .3s;
}*/

#library{
    width: 100%;
    margin: 0 auto;
    padding-top: 70px;
    overflow: hidden;
    background-color: #CD0000;
}

#library .main-txt-area{
	background-image: none;
}

#library .text4{
	width: 72rem;
    margin: 0 auto;
    padding: 2rem;
    line-height: 2.4rem;
}
#library .library_wrap{
	display:flex;
	justify-content: space-between;
	padding-top: 1.5rem;
	flex-wrap: wrap;
}
#library .library_wrap::after{
  content:"";
  display: block;
  width:28%;
}
#library a{
	width: 28%;
	text-decoration: none;
    color: #fff;
	margin: 1.5rem 0;
}
#library a .library_contents{
	/*width: 28%;*/
}
#library a .library_contentsitem{
	display:flex;
	justify-content: space-between;
	/*padding-top: 1.5rem;*/
}
#library a .library_date{
	transform: rotate(-90deg);
    transform-origin: 0 0;
    margin: auto -2rem -1rem 0;
    line-height: 1rem;
}
#library a .library_ttl{
    padding-top: 1.5rem;
    font-size: 1.6rem;
	margin-bottom: 0;
}
#library a .library_txt{
    line-height: 1.75rem;
    margin: 0;
}
#library .space{
	padding:5rem;
}


@keyframes qq-anime{
	0%{
		transform:rotate(10deg);
		transform-origin:center bottom;
	}
	100%{
		transform:rotate(0);
	}
}
#top-page #youkoso-mv{
	width: 100%;
    display: block;
}

/*========= SELECT ===============*/
.select-area{
	background: #0f659f;
	text-align: center;
	padding: 100px 0 150px ;
}
.select-area h3{
	width: 300px;
	background: #0f659f;
	position: relative;
	margin-bottom: 100px;
}
.select-area h3::before{
	content: '';
	display: block;
	width: 360px;
	height: 10px;
	background: url("../image/select-title-bg.png");
	background-repeat: repeat-x;
	background-position: left center;
	position: absolute;
	top: 18px;
    left: -410px;
}
.select-area h3::after{
	content: '';
	display: block;
	width: 360px;
	height: 10px;
	background: url("../image/select-title-bg.png");
	background-repeat: repeat-x;
	background-position: left center;
	position: absolute;
	top: 18px;
    left: 350px;
}
.select-area .select-box{
	display: flex;
	justify-content: space-between;
}
.select-area .select-btn{
	width: 30%;
}
.select-area .select-btn a:hover{
	opacity: inherit;
}
.select-area .select-btn a img:hover{
	transform: translateY(-10px);
	transition: all 0.5s;
}


/*========= scrollアイコン ===============*/
.scroll-icon{
	color: #CD0000;
	font-size: 1.2rem;
	position:absolute;
	right: 0;
	transform: rotate(90deg);
	z-index: 5;
}

.scroll-icon span::after{
	content: "";
    width: 20px;
    height: 20px;
    border: 1px solid #CD0000;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    top: 50%;
    right: -80px;
    display: block;
    position: absolute;
    margin: 0rem 4rem 0 auto;
}

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px) rotate(90deg);
  }

  to {
    opacity: 1;
	transform: translateY(0) rotate(90deg);
  }
}
#top-page .scroll-icon{
	top:380px;
}
#top-page .fadeDown{
	animation-delay: 2s;
}

/*========= 
下層ページ共通 
===============*/

.main-area{
	background: #fff;
	position: relative;
}
.main-area::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/main-bg-after.png");
	background-size: 100% 100%;
    z-index: 1;
}
.main-title{
	max-width: 1200px;
    margin:70px auto 0;
}
/*.main-title img{
	width: 70%;
	margin: 0 auto;
}*/
.start-mark{
	position: absolute;
	width: 25%;
	right: 0;
	top: 240px;
	z-index: 1;
	opacity: 0;
}
.start-anime{
	opacity: 1;
	animation: start-anime 0.5s ease-out;
}
@keyframes start-anime{
	0%{
		transform: translateX(50px);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
section{
	position: relative;
	padding: 20vw 0 10vw;
}
section h2{
	padding-left: 5%;
}
section .sec-mv{
	width: 50%;
	padding-left: 45%;
    padding-right: 5%;
	margin-top: -100px;
}
section .sec-mv-2{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 50px;
}
section .sec-txt{
	border-radius: 30px;
	color: #fff;
	font-size: 2rem;
	width: 60%;
    margin-left: 40%;
	margin-top: 50px;
	padding: 1em 2em;
}
#chara01,#chara01-2,#chara02,#chara03,#chara03-2,#chara04,#chara05,#chara06,#chara07{
	width: 100%;
	height: 0px;
}
.chara-area{
	width: 100%;
	height: 180px;
	opacity: 0;
	transition: all 0.5s;
}
.chara-area img{
	width: auto;
    height: 300px;
	position: relative;
    left: 10%;
    bottom: 140px;
	opacity: 0;
	transition: all 0.5s;
}
.chara-area.fixed{
	background: url("../image/ground.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 100%;
	opacity: 1;
    position: fixed;
	bottom: 0;
	z-index: 2;
}
.chara-area img.fixed{
	opacity: 1;
}
#chara-goal{
	width: 100%;
	height: 180px;
	margin-top: 100px;
}
#chara-goal .chara-area{
	background: url("../image/ground.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 100%;
	opacity: 1;
}
#chara-goal .chara-area img{
	opacity: 1;
}
#ground01-trigger,#ground01-2-trigger,
#ground02-trigger,
#ground03-trigger,#ground03-2-trigger,
#ground04-trigger,
#ground05-trigger,
#ground06-trigger,
#ground07-trigger{
	position: absolute;
    width: 100%;
    height: 1000px;
}
#dm-page #ground02-trigger{
	height: 2000px;
}
#payslip-page #ground01-2-trigger{
	height: 1500px;
}
#payslip-page #ground04-trigger{
	height: 500px;
	margin-top: -200px;
}
#textbook-page #ground07-trigger{
	height: 400px;
	margin-top: -100px;
}
#dm-page #ground04-trigger{
	height: 200px;
}
#chara01-trigger,
#chara01-2-trigger,
#chara02-trigger,
#chara03-trigger,#chara03-2-trigger,
#chara04-trigger,
#chara05-trigger,
#chara06-trigger,
#chara07-trigger{
	position: absolute;
    width: 100%;
	height: 0px;
}
.goal-mark{
	position: absolute;
	width: 25%;
	right: 0;
	top: 240px;
	z-index: 1;
}
section#sec-goal{
	background: #eae9e1;
	padding-bottom: 0;
}
section#sec-goal h2 img{
	width: auto;
    height: 200px;
}
section#sec-goal .sec-txt{
	background: #b0ae9b;
}
.matome-area{
	text-align: center;
	padding: 200px 0 500px;
}
.matome-area h3{
	width: 300px;
	margin: 0 auto 50px;
}
.matome-area p{
	font-size: 1.2rem;
}
.matome-area p span{
	display: block;
	font-size: 2.4rem;
}
.select-area .select-box-chara{
	width: 30%;
	position: relative;
}
.select-area .select-box-chara img{	
    width: 60%;
	margin-top: 80px;
}
.select-area .select-box-chara .hukidashi02{
	width: 220px;
	height: 130px;
	background: url("../image/hukidashi02.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
    left: 90px;
}
.select-area .select-box-chara .hukidashi02 p{
	width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	font-size: 1.2rem;
	line-height: 1.3;
}
.poyopoyo-anime{
	animation: poyopoyo 2s ease-out;	
}
@keyframes poyopoyo{
	0%, 40%, 60%, 80%{
		transform: scale(1.0);
	}
	50%, 70%{
		transform: scale(0.95);
	}
}
#payslip-page video,
#textbook-page video,
#dm-page video{
	border-radius: 10px;
}


/*========= 
給与明細ページ 
===============*/
#payslip-page{
	width: 100%;
    margin: 0 auto;
	position: relative;
	overflow: hidden;
}
#payslip-page .scroll-icon{
	top: 450px;
    right: 2%;
}
#payslip-page #sec01{
	background: #65bfd7;
}
#payslip-page #sec01::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec01-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#payslip-page #sec01 h2 img{
	width: auto;
    height: 400px;
}
#payslip-page #sec01 .sec-txt{
	background: #288fb5;
}

#payslip-page #sec01-2{
	background: #5ec852;
}
#payslip-page #sec01-2::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec01-2-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#payslip-page #sec01-2 h2 img{
	width: auto;
    height: 300px;
}
#payslip-page #sec01-2 .kodawari-anime img{
	width: 200px;
	margin-left: 3%;
	animation: kodawari-anime 2s ease-out infinite;
}
@keyframes kodawari-anime{
	0%, 40%, 60%, 80%{
		transform:translateY(0);
	}
	50%, 70%{
		transform:translateY(-5px);
		transform-origin:center bottom;
	}
}
#payslip-page #sec01-2 .kodawari-mv{
	width: 50%;
}
#payslip-page #sec01-2 .kodawari-img{
	width: 50%;
}
#payslip-page #sec01-2 .kodawari-img img{
	border-radius: 10px;
}
#payslip-page #sec01-2 .sec-txt{
	background: #239d1a;
}

#payslip-page #sec02{
	background: #f5b900;
}
#payslip-page #sec02::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec02-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#payslip-page #sec02 h2 img{
	width: auto;
    height: 300px;
}
#payslip-page #sec02 .sec-txt{
	background: #ff9701;
}

#payslip-page #sec03{
	background: #ff8111;
}
#payslip-page #sec03::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec03-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#payslip-page #sec03 h2 img{
	width: auto;
    height: 300px;
}
#payslip-page #sec03 .sec-mv-2{
	align-items: baseline;
}
#payslip-page #sec03 .pod-mv{
	width: 15%;
}
#payslip-page #sec03 .pod-img{
	width: 60%;
}
#payslip-page #sec03 .pod-img img{
	border-radius: 10px;
}
#payslip-page #sec03 .sec-txt{
	background: #ff6113;
}
#payslip-page #sec03 .whatis-pod{
	background: #fff;
    border-radius: 30px;
    width: 500px;
    margin-left: -50px;
	padding: 20px 0 20px 200px;
	box-shadow: inset -3px 3px 10px rgb(0 0 0 / 30%);
	margin-top: 100px;
}
#payslip-page #sec03 .whatis-pod img{
	width: 450px;
}
#payslip-page #sec03 .whatis-pod-txt{
    height: 320px;
	background: url("../image/payslip-point_bg_pc.png");
	background-repeat: no-repeat;
	background-size: 1100px auto ;
    background-position: right top;
	margin-top: 50px;
	position: relative;
}
#payslip-page #sec03 .whatis-pod-txt p{
	text-align: center;
	color: #fff;
    font-size: 1.6rem;
	position: absolute;
    top: 100px;
    right: 15%;
}
#payslip-page #sec03 .whatis-pod-txt::before{
	content: '';
	display: block;
	width: 200px;
	height: 150px;
	background: url("../image/payslip-point.png");
	background-size: contain;
	position: absolute;
	right: 5%;
    top: -90px;
}

#payslip-page #sec04{
	background: #19ced5;
}
#payslip-page #sec04::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec04-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#payslip-page #sec04 h2 img{
	width: auto;
    height: 200px;
}
#payslip-page #sec04 .sec-txt{
	background: #00aad0;
}
#payslip-page #sec04 .sec-mv{
	padding-left: 0;
    padding-right: 0;
    margin: 50px auto 0;
}
#payslip-page #sec-goal .goal-mv{
	margin-top: 50px;
	background: url("../image/payslip-goal-mv-bg.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
}
#payslip-page .matome-area{
	background: url("../image/payslip-matome-bg.png");
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: center bottom 150px;
}


/*========= 
教科書ページ 
===============*/
#textbook-page{
	width: 100%;
    margin: 0 auto;
	position: relative;
	overflow: hidden;
}
#textbook-page .scroll-icon{
	top: 450px;
    right: 2%;
}
#textbook-page #sec01{
	background: #f8b100;
}
#textbook-page #sec01::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec02-bg-after3.png");
	background-size: 100% 100%;
	z-index: 1;
}
#textbook-page #sec01 h2 img{
	width: auto;
    height: 400px;
}
#textbook-page #sec01 .sec-txt{
	background: #ff9701;
}
#textbook-page #sec01 .sec-mv{
	margin-top: 0;
}

#textbook-page #sec02{
	background: #65bfd7;
}
#textbook-page #sec02::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec01-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#textbook-page #sec02 h2 img{
	width: auto;
    height: 300px;
}
#textbook-page #sec02 .sec-mv{
	width: 40%;
}
#textbook-page #sec02 .sec-txt{
	background: #288fb5;
}

#textbook-page #sec03{
	background: #ff8111;
}
#textbook-page #sec03::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec03-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#textbook-page #sec03 h2 img{
	width: auto;
    height: 300px;
}
#textbook-page #sec03 .sec-txt{
	background: #ff6113;
}
#textbook-page #sec03 .sec-mv{
	margin-top: 50px;
}

#textbook-page #sec03-2{
	background: #1dbc3f;
}
#textbook-page #sec03-2::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec03-2-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#textbook-page #sec03-2 h2 img{
	width: auto;
    height: 200px;
	position: relative;
    z-index: 1;
}
#textbook-page #sec03-2 .sec-txt{
	background: #038b10;
}
#textbook-page #sec03-2 .kodawari-anime img{
	width: 200px;
	margin-left: 3%;
	animation: kodawari-anime 2s ease-out infinite;
}
@keyframes kodawari-anime{
	0%, 40%, 60%, 80%{
		transform:translateY(0);
	}
	50%, 70%{
		transform:translateY(-5px);
		transform-origin:center bottom;
	}
}
#textbook-page #sec03-2 .sec-mv{
	padding-left: 0;
    padding-right: 0;
    margin: 50px auto;
}

#textbook-page #sec04{
	background: #39a1eb;
}
#textbook-page #sec04::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec04-bg-after02.png");
	background-size: 100% 100%;
	z-index: 1;
}
#textbook-page #sec04 h2 img{
	width: auto;
    height: 300px;
}
#textbook-page #sec04 .sec-txt{
	background: #095ee0;
}
#textbook-page #sec04 .sec-mv{
	padding-left: 0;
    padding-right: 0;
	margin-top: 50px;
}
#textbook-page #sec04 .sec-mv:nth-of-type(2){
	padding-left: 50%;
}
#textbook-page #sec04 .rintenki{
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
#textbook-page #sec04 .rintenki div:nth-of-type(1){
	width: 40%;
	background: url("../image/textbook-rintenki-bg01.png");
	background-repeat: no-repeat;
	background-position: right -10px bottom;
	background-size: 90% auto;
}
#textbook-page #sec04 .rintenki div:nth-of-type(2){
	width: 50%;
}
#textbook-page #sec04 .rintenki div:nth-of-type(3){
	width: 9%;
	background: url("../image/textbook-rintenki-bg02.png");
	background-repeat: no-repeat;
	background-position: left -10px bottom;
	background-size: 110% auto;
}

#textbook-page #sec05{
	background: #ff7abf;
}
#textbook-page #sec05::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec05-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#textbook-page #sec05 h2 img{
	width: auto;
    height: 300px;
}
#textbook-page #sec05 .sec-txt{
	background: #ff3a8f;
}
#textbook-page #sec05 .sec-mv-2 div:nth-of-type(1){
	width: 40%;
}
#textbook-page #sec05 .sec-mv-2 div:nth-of-type(2){
	width: 60%;
}
#textbook-page #sec05 .sec-mv-2 div:nth-of-type(2) img{
	border-radius: 10px;
}

#textbook-page #sec07{
	background: #65bfd7;
}
#textbook-page #sec07::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec01-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#textbook-page #sec07 h2 img{
	width: auto;
    height: 200px;
}
#textbook-page #sec07 .sec-txt{
	background: #288fb5;
}
#textbook-page #sec07 .sec-mv{
	width: 60%;
    padding-left: 0;
    padding-right: 0;
    margin-top: 50px;
}
#textbook-page #sec-goal .goal-mv{
	margin-top: 50px;
	background: url("../image/textbook-goal-mv-bg.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
}
#textbook-page .matome-area{
	background: url("../image/textbook-matome-bg.png");
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: center bottom 120px;
}

/*========= 
DMページ 
===============*/
#dm-page{
	width: 100%;
    margin: 0 auto;
	position: relative;
	overflow: hidden;
}
#dm-page .scroll-icon{
	top: 450px;
    right: 2%;
}
#dm-page #sec01{
	background: #ea6d96;
}
#dm-page #sec01::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec01-bg-after02.png");
	background-size: 100% 100%;
	z-index: 1;
}
#dm-page #sec01 h2 img{
	width: auto;
    height: 400px;
}
#dm-page #sec01 .sec-txt{
	background: #d72f58;
}
#dm-page #sec01 .sec-mv{
	margin-top: 0;
}

#dm-page #sec02{
	background: #f4b400;
}
#dm-page #sec02::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec02-bg-after02.png");
	background-size: 100% 100%;
	z-index: 1;
}
#dm-page #sec02 h2 img{
	width: auto;
    height: 200px;
}
#dm-page #sec02 .sec-txt{
	background: #ff9701;
}
#dm-page #sec02 .sec-mv{
	margin-top: 0;
}

#dm-page #sec03{
	background: #65d7be;
}
#dm-page #sec03::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec03-bg-after02.png");
	background-size: 100% 100%;
	z-index: 1;
}
#dm-page #sec03 h2 img{
	width: auto;
    height: 300px;
}
#dm-page #sec03 .sec-txt{
	background: #28b58e;
}
#dm-page #sec03 .sec-mv-2 {
    align-items: baseline;
}
#dm-page #sec03 .tpj-mv{
	width: 15%;
}
#dm-page #sec03 .tpj-img{
	width: 60%;
}
#dm-page #sec03 .tpj-img img{
	border-radius: 10px;
}
#dm-page #sec03 .whatis-tpj{
	background: #fff;
    border-radius: 30px;
    width: 500px;
    margin-left: -50px;
	padding: 20px 0 20px 200px;
	box-shadow: inset -3px 3px 10px rgb(0 0 0 / 30%);
	margin-top: 100px;
}
#dm-page #sec03 .whatis-tpj img{
	width: 450px;
}
#dm-page #sec03 .whatis-tpj-mv{
	padding-left: 0;
    padding-right: 0;
    margin-top: 50px;
}
#dm-page #sec03 .whatis-tpj-txt{
    height: 300px;
	background: url("../image/dm-point_bg_pc.png");
	background-repeat: no-repeat;
	background-size: 860px auto ;
    background-position: right top;
	margin-top: 50px;
	position: relative;
}
#dm-page #sec03 .whatis-tpj-txt p{
	text-align: center;
	color: #fff;
    font-size: 1.6rem;
	position: absolute;
    top: 60px;
    right: 3%;
}
#dm-page #sec03 .whatis-tpj-txt::before{
	content: '';
	display: block;
	width: 200px;
	height: 150px;
	background: url("../image/payslip-point.png");
	background-size: contain;
	position: absolute;
	right: 5%;
    top: -90px;
}

#dm-page #sec04{
	background: #65bfd7;
}
#dm-page #sec04::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -199px;
	width: 100%;
	height: 200px;
	background: url("../image/sec01-bg-after.png");
	background-size: 100% 100%;
	z-index: 1;
}
#dm-page #sec04 h2 img{
	width: auto;
    height: 300px;
}
#dm-page #sec04 .sec-txt{
	background: #288fb5;
	margin-top: 100px;
}
#dm-page #sec04 .sec-mv-2 div:nth-of-type(1){
	width: 40%;
	position: relative;
    top: 80px;
}
#dm-page #sec04 .sec-mv-2 div:nth-of-type(2){
	width: 60%;
}
#dm-page #sec04 .sec-mv-2 div:nth-of-type(2) img{
	border-radius: 10px;
}
#dm-page #sec-goal .goal-mv{
	margin-top: 50px;
	background: url("../image/dm-goal-mv-bg.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
}
#dm-page .matome-area{
	background: url("../image/dm-matome-bg.png");
	background-repeat: no-repeat;
	background-size: 25%;
	background-position: center bottom 150px;
}




/*========= スマホレイアウト ===============*/
@media screen and (max-width:768px) {
	.scroll-icon{
		font-size: 1rem;
		right: -20px;
		top: 160px;
	}
	/*#top-page{
		margin-top: 80px;
	}
	#top-page .main-mv-area{
		height: 190px;
	}*/
	#top-page .scroll-icon{
		top:190px;
	}
	/*#top-page .main-mv{
		width: 90%;
	}
	#top-page .main-txt-area{
		margin-top: 300px;
	}*/
	#top-page .main-txt-area h2{
		width: 70%;
		margin: -750px auto 10vw;
	}
	#top-page .main-txt-area::before{
		width: 200%;
		top: 0px;
	}
	#top-page .main-txt::after{
		width: 40px;
    	height: 40px;
		right: 3%;
		top: 50px;
	}
	#top-page .main-txt{
		margin-bottom: 16vw;
	}
	#top-page .text2 {
    width: auto;
}
	#top-page .text3 {
    width: auto;
}
	#top-page .choice2 {
    transform: scale(.8);
}
	.select-area{
		padding: 12vw 0 10vw;
	}
	.select-area h3{
		width: 30%;
		margin: 0 auto 10vw;
	}
	.select-area h3::before{
		width: 100%;
		background-size: 20% auto;
		left: -110%;
		top: 20%;
	}
	.select-area h3::after{
		width: 100%;
		background-size: 20% auto;
		left: 110%;
		top: 20%;
	}
	.select-area .select-box{
		display: block;
	}
	.select-area .select-btn{
		width: 90%;
		margin: 0 auto 10vw;
	}
	
	.main-area::after{
		height: 50px;
		bottom: -49px;
	}
	.main-title{
		padding-bottom: 80px;
	}
	.main-title img{
		width: 90%;
		margin: 0 auto;
	}
	/*.contents{
		margin: 0 5%;
	}*/
	.start-mark{
		width: 40%;
    	top: 60px;
	}
	section .sec-mv{
		width: 80%;
    	margin-top: 10px;
    	padding-left: 20%;
    	padding-right: 0;
	}
	section .sec-txt{
		font-size: 1.2rem;
		padding: 1em 1em;
	}
	#payslip-page #ground04-trigger{
		height: 200px;
		margin-top: -100px;
	}
	#textbook-page #ground03-2-trigger{
		margin-top: 100px;
	}
	#chara01-trigger,
	#chara01-2-trigger,
	#chara02-trigger,
	#chara03-trigger,#chara03-2-trigger,
	#chara04-trigger,
	#chara05-trigger,
	#chara06-trigger,
	#chara07-triggerr{
		margin-top: -100px;
	}
	#payslip-page #chara03-trigger{
		margin-top: -110px;
	}

	section#sec-goal h2 img{
		height: 100px;
	}
	.goal-mark{
		width: 40%;
    	top: 60px;
	}
	section#sec-goal .sec-txt{
		width: 70%;
    	margin-left: 30%;
		margin-bottom: 150px;
	}

	.matome-area{
		padding: 100px 0 250px;
	}
	.matome-area h3{
		width: 60%;
	}
	.matome-area p span{
		font-size: 2rem;
		line-height: 1.3;
		margin-top: 10px;
	}
	.select-area .select-box-chara{
		width: 100%;
		margin-bottom: 10vw;
	}
	.select-area .select-box-chara img{
		width: 35%;
		margin-left: 15%;
		margin-top: 100px;
	}
	.select-area .select-box-chara .hukidashi02{
		top: -60px;
		left: 35%;
	}
	.chara-area{
		height: 70px;
	}
	.chara-area img{
		height: 180px;
		left: 5%;
		bottom: 120px;
	}
	.chara-area.fixed{
		background-size: 100% auto;
	}
	#chara-goal{
		height: 70px;
	}
	#payslip-page .main-title{
		padding-top: 80px;
    	margin: 0;
	}
	#payslip-page .main-title img{
		margin: 0 3% 0 7%;
	}
	#payslip-page .scroll-icon{
		top: 92vw;
		right: 5px;
	}
	#payslip-page #sec01 h2 img{
		height: 200px;
	}
	#payslip-page #sec01::after,
	#payslip-page #sec01-2::after,
	#payslip-page #sec02::after,
	#payslip-page #sec03::after,
	#payslip-page #sec04::after{
		height: 50px;
		bottom: -49px;
	}
	#payslip-page #sec01-2 .kodawari-anime img{
		width: 100px;
		margin-bottom: 10px;
	}
	#payslip-page #sec01-2 h2 img{
		height: auto;
    	width: 90%;
	}
	#payslip-page #sec01-2 .sec-txt{
		width: 70%;
    	margin-left: 30%;
	}
	#payslip-page #sec02 h2 img{
		height: 150px;
	}
	#payslip-page #sec02 .sec-mv{
		width: 100%;
    	padding-left: 0;
    	margin: 10px auto 0;
	}
	#payslip-page #sec03 h2 img{
		height: 150px;
	}
	#payslip-page #sec03 .pod-mv{
		width: 20%;
	}
	#payslip-page #sec03 .pod-img{
		width: 75%;
	}
	#payslip-page #sec03 .pod-img img{
		margin-bottom: 10px;
	}
	#payslip-page #sec03 .sec-txt{
		width: 70%;
    	margin-left: 30%;
	}
	#payslip-page #sec03 .whatis-pod{
		width: 60%;
    	margin-left: -10%;
    	padding: 20px 20px 20px 15%;
	}
	#payslip-page #sec03 .whatis-pod img{
		width: 225px;
	}
	#payslip-page #sec03 .whatis-pod-txt p{
		font-size: 1rem;
		text-align: right;
		line-height: 1.3;
		top: 26vw;
    	right: 14%;
	}
	#payslip-page #sec03 .whatis-pod-txt{
		height: 80vw;
		background: url("../image/payslip-point_sp.png");
		background-repeat: no-repeat;
		background-size: 80% auto;
    	background-position: right -4px top;
		margin-top: 0;
	}
	#payslip-page #sec03 .whatis-pod-txt::before{
		display: none;
	}
	#payslip-page #sec04 h2 img{
		height: 100px;
	}
	#payslip-page #sec04 .huunyuu{
		margin-top: 0;
	}
	#payslip-page #sec04 .sec-txt{
		margin-top: 30px;
		width: 75%;
    	margin-left: 25%;
	}
	#payslip-page .matome-area{
		background-size: 50%;
		background-position: center bottom 100px;
	}
	
	#textbook-page .main-title{
		padding-top: 80px;
    	margin: 0;
	}
	#textbook-page .scroll-icon{
		top: 96vw;
		right: 5px;
	}
	#textbook-page #sec01 h2 img{
		height: 200px;
	}
	#textbook-page #sec01::after,
	#textbook-page #sec02::after,
	#textbook-page #sec03::after,
	#textbook-page #sec03-2::after,
	#textbook-page #sec04::after,
	#textbook-page #sec05::after,
	#textbook-page #sec06::after,
	#textbook-page #sec07::after{
		height: 50px;
		bottom: -49px;
	}
	#textbook-page #sec02 h2 img,
	#textbook-page #sec03 h2 img,
	#textbook-page #sec04 h2 img,
	#textbook-page #sec05 h2 img{
		height: 150px;
	}
	#textbook-page #sec02 .sec-txt,
	#textbook-page #sec03 .sec-txt,
	#textbook-page #sec03-2 .sec-txt,
	#textbook-page #sec07 .sec-txt{
		width: 65%;
    	margin-left: 35%;
	}
	#textbook-page #sec01 .sec-mv{
		padding-left: 10%;
	}
	#textbook-page #sec02 .sec-mv{
		width: 90%;
    	padding-left: 0;
	}
	#textbook-page #sec03 .sec-mv{
		padding-left: 0;
    	margin: 50px auto 0;
	}
	#textbook-page #sec03-2 .kodawari-anime img{
		width: 100px;
		margin-bottom: 10px;
	}
	#textbook-page #sec03-2 h2 img,
	#textbook-page #sec06 h2 img,
	#textbook-page #sec07 h2 img{
		height: 100px;
	}
	#textbook-page #sec03-2 .kodawari-bg{
		width: 100%;
		margin-top: -180px;
	}
	#textbook-page #sec04 .rintenki div:nth-of-type(1){
		background-position: right -1px bottom;
	}
	#textbook-page #sec04 .rintenki div:nth-of-type(2){
		width: 80%;
		margin-bottom: -10px;
	}
	#textbook-page #sec04 .rintenki div:nth-of-type(3){
		background-position: left -1px bottom;
	}
	#textbook-page #sec04 .sec-mv:nth-of-type(2) {
    	width: 60%;
    	padding-left: 35%;
		margin-top: 10px;
	}
	#textbook-page #sec07 .sec-mv{
		width: 90%;
    	padding-left: 0;
	}
	#textbook-page .matome-area{
		background-size: 50%;
    background-position: center bottom 80px;
	}
	
	#dm-page .main-title{
		padding-top: 80px;
    	margin: 0;
	}
	#dm-page .scroll-icon{
		top: 90vw;
		right: 5px;
	}
	#dm-page #sec01 h2 img{
		height: 200px;
	}
	#dm-page #sec01::after,
	#dm-page #sec02::after,
	#dm-page #sec03::after,
	#dm-page #sec04::after{
		height: 50px;
		bottom: -49px;
	}
	#dm-page #sec01 .sec-mv{
		padding-left: 10%;
	}
	#dm-page #sec02 h2 img{
		height: 100px;
	}
	#dm-page #sec02 .sec-mv{
		width: 90%;
		padding-left: 0;
	}
	#dm-page #sec01 .sec-txt,
	#dm-page #sec03 .sec-txt{
		width: 65%;
    	margin-left: 35%;
	}
	#dm-page #sec03 h2 img,
	#dm-page #sec04 h2 img{
		height: 150px;
	}
	#dm-page #sec03 .tpj-mv{
		width: 20%;
	}
	#dm-page #sec03 .tpj-img{
		width: 75%;
	}
	#dm-page #sec03 .tpj-img img{
		margin-bottom: 10px;
	}
	#dm-page #sec03 .whatis-tpj{
		width: 60%;
    	margin-left: -10%;
    	padding: 20px 20px 20px 15%;
	}
	#dm-page #sec03 .whatis-tpj img{
		width: 225px;
	}
	#dm-page #sec03 .whatis-tpj-mv{
		display: block;
	}
	#dm-page #sec03 .whatis-tpj-mv div{
		width: 80%;
	}
	#dm-page #sec03 .whatis-tpj-mv div:nth-of-type(1){
		padding-left: 20%;
	}
	#dm-page #sec03 .whatis-tpj-mv div:nth-of-type(2){
		margin-top: 0;
	}
	#dm-page #sec03 .whatis-tpj-txt p{
		font-size: 1rem;
		text-align: right;
		line-height: 1.3;
		top: 34%;
	}
	#dm-page #sec03 .whatis-tpj-txt{
		height: 300px;
		background: url("../image/dm-point_sp.png");
		background-repeat: no-repeat;
		background-size: 80% auto;
    	background-position: right -4px top;
		margin-top: 0;
	}
	#dm-page #sec03 .whatis-tpj-txt::before{
		display: none;
	}
	#dm-page #sec04 .sec-mv-2 div:nth-of-type(1){
		top: 0;
	}
	#dm-page #sec04 .sec-txt{
		margin-top: 50px;
	}
	#dm-page .matome-area{
		background-size: 40%;
    	background-position: center bottom 60px;
	}
	#library .space {
    	padding: 2rem;
	}
	#library .text4 {
    	width: auto;
	}
	#library a {
    	width: auto;
	}
}


/*========= タブレット小縦===============*/
@media only screen and (min-width: 768px) and (max-width: 819px) {
	.scroll-icon{
		top: 360px;
	}
	#top-page .main-mv-area{
		height: 388px;
	}
	#top-page .scroll-icon{
		top:388px;
	}
	#top-page .main-txt-area h2{
		width: 60%;
	}
	.start-mark{
		width: 25%;
	}
	.chara-area{
		height: 80px;
	}
	.chara-area.fixed{
		background-size: 100% 100%;
	}
	section .sec-txt{
		width: 40%;
    	margin-left: 60%;
	}
	#payslip-page .scroll-icon{
		top: 610px;
	}
	#payslip-page #sec01-2 .sec-txt,
	#payslip-page #sec03 .sec-txt,
	#payslip-page #sec04 .sec-txt,
	section#sec-goal .sec-txt{
		width: 40%;
    	margin-left: 60%;
	}
	#payslip-page #sec01-2 h2 img{
		height: 150px;
    	width: auto;
	}
	#payslip-page #sec03 .whatis-pod-txt{
		background-size: 45% auto;
	}
	#payslip-page #sec03 .whatis-pod-txt p{
		top: 40%;
	}
	.goal-mark{
		width: 25%;
	}
	.matome-area{
		padding: 100px 0 400px;
	}
	#textbook-page .scroll-icon{
		top: 630px;
	}
	#textbook-page #sec02 .sec-txt, #textbook-page #sec03 .sec-txt, #textbook-page #sec03-2 .sec-txt, #textbook-page #sec07 .sec-txt{
		width: 40%;
    	margin-left: 60%;
	}
	#dm-page .scroll-icon{
		top: 590px;
	}
	#dm-page #sec01 .sec-txt, #dm-page #sec03 .sec-txt{
		width: 40%;
    	margin-left: 60%;
	}
	#dm-page #sec03 .whatis-tpj-txt{
		background-size: 45% auto;
	}
	#dm-page #sec03 .whatis-tpj-txt p{
		top: 40%;
	}
	#dm-page .matome-area{
		background-size: auto 30%;
		background-position: center bottom 120px;
	}
}


/*========= タブレット大縦===============*/

@media only screen and (min-width: 820px) and (max-width: 1179px) {
	#g-nav{
		width: 70%;
	}
	#payslip-page .scroll-icon,
	#textbook-page .scroll-icon,
	#dm-page .scroll-icon{
		top: 33vw;
    	right: 0;
	}
	.main-area::after{
		height: 100px;
		bottom: -99px;
	}
	.start-mark{
		top: 150px;
	}
	.chara-area img{
		left: 5%;
		bottom: 140px;
	}
	section .sec-txt{
		width: 70%;
    	margin-left: 30%;
		font-size: 1.5rem;
	}
	/*#top-page .main-mv-area{
		max-width: 700px;
		height: 435px;
	}*/
	#top-page .scroll-icon{
		top:400px;
	}
	#payslip-page #sec01::after,
	#payslip-page #sec01-2::after,
	#payslip-page #sec02::after,
	#payslip-page #sec03::after,
	#payslip-page #sec04::after{
		height: 100px;
		bottom: -99px;		
	}
	section .sec-mv{
		margin-top: 0;
	}
	.select-area .select-box-chara .hukidashi02{
		top: -20px;
    	left: 15px;
	}
	#payslip-page #sec03 .whatis-pod{
		padding: 20px 0 20px 100px;
	}
	#payslip-page #sec03 .whatis-pod-txt{
		background-size: 700px auto;
    	margin-left: 10%;
    	height: 250px;
	}
	#payslip-page #sec03 .whatis-pod-txt p{
		font-size: 1.4rem;
		top: 50px;
		right: 5%;
	}
	#payslip-page #sec04 .sec-txt{
		margin-left: 40%;
	}
	#textbook-page #sec01::after, #textbook-page #sec02::after, #textbook-page #sec03::after, #textbook-page #sec03-2::after, #textbook-page #sec04::after, #textbook-page #sec05::after, #textbook-page #sec06::after, #textbook-page #sec07::after{
		height: 100px;
		bottom: -99px;		
	}
	#textbook-page #sec03-2 .kodawari-bg{
		margin-top: -350px;
	}
	#dm-page #sec01::after, #dm-page #sec02::after, #dm-page #sec03::after, #dm-page #sec04::after{
		height: 100px;
		bottom: -99px;
	}
	#dm-page #sec03 .whatis-tpj{
		padding: 20px 0 20px 100px;
	}
	#dm-page #sec03 .whatis-tpj-txt{
		background-size: 700px auto;
    	margin-left: 10%;
    	height: 250px;
	}
	#dm-page #sec03 .whatis-tpj-txt p{
		font-size: 1.4rem;
		top: 50px;
		right: 2%;
	}
}

@media only screen and (min-width: 820px) and (max-width: 1079px) {
	.matome-area{
		padding: 200px 0 400px;
	}
}