/* CSS Document */
body {
	font-family: "vdl-logona", sans-serif;
	color: #643219;
	font-weight: 400;
	font-style: normal;
	font-size: 35px;
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: #fff100;
	box-sizing: border-box;
}


header {
	width: 100%;
	margin: 0 auto;
}

.bg001 {
	margin: 0;
	padding: 5% 0 25% 0;
	background-color: #FDD742;
}
.bg1-header{
	color: orangered;
}
.bg001 img {
	width: 80%;
}
.bg001_p {
	margin: 0 auto;
	width: 80%;
}
.bg001_p h2 {
	text-align: center;
}
.bg002 {
	width: 100%;
	margin: 0 auto;
	height: auto;
	padding: 10% 0 0 0;
	background: linear-gradient(#FFA2A2, #FFE993);
	position: relative;
	text-align: center;
	box-sizing: border-box;
}
.text-fcover{
	padding-top: 5%;
	width: 80%;
	margin: 0;
}
.bg002-header {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-100%, -50%);
}
.bg002-header img {
	width: 200%;
}
.bg002-text-img {
	margin: 5% auto;
	text-align: center;
}
.pgbtn {
	margin: 0;
	width: 50%;
	
}
.bg002-about-text {
	text-align: center;
	margin: 0 auto;
}
.bg2ch-header{
	background-color: #E68214;
	padding: 1% 0;
	margin-bottom: 8%;
}
.bg2ch-h-text{
	color: white;
}
.bg2chapter-header {
	width: 80%;
	margin: 0 auto;
}
.bg2chapter {
	max-width: 60%;
	min-width: 50%;
	background-color: white;
	border: 3px solid;
	border-radius: 30px;
	padding: 4%;
	margin: 0 auto 10% auto;
	position: relative;
}
.ch-number {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-60%, 50%);
}
.ch-number-img {
	width: 120%;
}
.ch01 {
	border-color: #E68214; 
}
.ch02 {
	border-color: #EE5D80;
}
.ch03 {
	border-color: #3BCCC2;
}
.bg2ch-img{
	width: 80%;
	max-width: 80%;
	margin: 0;
	height: auto;
}
/* bg003 */
.bg003 {
	margin: 0;
	padding: 5% 0 1% 0;
	background-color: #FDD742;
}
.bg3-h1{
	color: #FDD742; 
}
.reviews {
	background-color: #fff5e1;
	background-image:
	linear-gradient(-90deg, #FFF1D8 50%, rgba(0, 0, 0, 0) 50%);
	background-size: 7px 7px;
	width: 70%;
	border: 3px solid;
	border-color: #008CD7;
	border-radius: 25px;
	margin: 10% auto;
	overflow: hidden;
	text-align: center;
}
.review-header {
	background-color: #008CD7;
	margin: 0;
	padding: 3% 0;
	widows: 100%;
}
.review-slider {
	width: 80%;
	margin: 0 auto;
	height: auto!important;
}

.review-slider img{
	width: 100%;
}
/*---------- 矢印 ----------*/
.review-slider .slick-next{
    right:-12%!important;
}
.review-slider .slick-prev{
    left:-12%!important;
}
.review-slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.review-slider .slick-arrow:before{
    font-size: 50px!important;
	color: #008CD7;
}
/*bg004*/
.bg004 {
	margin: 0;
	padding: 15% 0 7% 0;
	background-color: #008CD7;
	text-align: center;
}
.bg4-column{
	max-width: 80%;
	min-width: 60%;
	margin: 0 auto;
	padding: 13% 0;
	border-radius: 30px;
	background-color: #FFE7C1;
	background-image: url("#");
	background-size: 10%;
	background-repeat: repeat;
	position: relative;
}

.bg4li{
	display: flex;
	box-sizing: border-box;
	text-align: left;
}
.bg4li-img{
	width: 16%;
	height: 10%;
	padding: 3%;
	position: relative;
}
.bg4li-text{
	position: absolute;
	left: 20%;
}
.bg4-header{
	width: 110%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}
.bg4-ph1{
	color: #FDD742;
}
.how-to-get {
	width: 100%;
	margin: 8% auto;
	padding: 0;
	text-align: center;
	box-sizing: border-box;
}
.htg-header{
	width: 30%;
}
.htgs {
	width: 100%;
	height: auto;
	margin: 3% auto;
}
.htg {
	box-sizing: border-box;
	background-color: white;
	border: 3px solid;
	border-radius: 25px;
	border-color: #FAD117;
	display: inline-block;
	width: 30%;
	color: #643219;
	padding-left: 1%;
	margin: 0;
	overflow: hidden;
}
.htg-img{
	padding-top: 7%;
	width: 80%;
}
.htg-bottom {
	display: flex;
}
.pg-num{
	width: 30%;
	height: 30%;
	margin: 0;
	padding: 0;
	position: relative;
}
.pg-text{
	width: 100%;
	text-align: left;
	margin: 0 auto;
	padding-top: 0;
	font-size: 100%;
}

/*bg005*/
.bg005 {
	margin: 0;
	padding: 1% 0;
	background-color: #F66994;
}
.bg5-header{
	text-align: center;
	color: white;
}
.self-intro {
	max-width: 80%;
	min-width: 60%;
	margin: 0 auto;
	padding: 8%;
	border-radius: 25px;
	background-color: #FFE7C1;
	text-align: center;
}
.self-picture{
	width: 60%;
	border-radius: 60%;
}
.bg5si-prename{
	color: #F66994;
	margin: 0;
}
.bg5si-name{ 
	color: #F66994;
	padding: 2% 0;  
	border-top: 10px solid #F66994;
	border-bottom: 10px solid;
}
.bg5si-history{
	text-align: left;
	list-style: none;
}
.bg5-pre-sf{
	padding-top: 5%;
	text-align: center;
	color: white;
}
/*story-formula*/
.story-formula {
	margin: 0 auto;
	text-align: center;
	padding: 7% 0;
	background-color: #FDD742;
}
.s-all{
	border-radius: 30px;
	width: 80%;
	padding: 5%;
	margin: 0 auto;
}
.story01{
	background-color: #EFECE7;
	position: relative;
}
.story02{
	background-color: #F3C5D3;
	position: relative;
}
.story03{
	background-color: #FBE4BC;
	position: relative;
}
.s-header{
	position: absolute;
	top: 0;
	left: 0;
	width: 80%;
}

/*footer*/
footer {
	margin: 0;
	text-align: center;
	padding: 0;
	width: 100%;
	color: white;
}
footer::before{
	content: "";
  	display: block;
  	position: fixed;
  	top: 0;
  	left: 50%;
	transform: translateX(-50%);
  	z-index: -1;
  	width: 100%;
  	height: 100vh;
	background-image: url("../images/playgames_0418.png");
  	background-size: cover;
  	background-repeat: no-repeat;
}
.footer-column{
	width: 80%;
	margin: 0 auto;
	padding: 2% 2%;
	border-radius: 30px;
	background: linear-gradient(to right, #F225D6 0%, #FBAF3D 100%);
	position: relative;
	text-align: center;
	color: purple;

}
.footer-uls{
	width: 100%;
	background-color: white;
	border-radius: 30px;
	padding: 7% 0;
	box-sizing: border-box;
	border: 1px solid #fff;
	overflow: hidden;
}
.footer-uls .bg4li-img{
	margin-left: -1%;
}
/*Q&A*/
.inner{
	width:90%;
	margin: 20px auto;
}
.qa_box{
    margin-bottom: 20px;
}
.qa_box .qa_q{
	background-color: #F656A0;
	border: 1px solid #F656A0;
	padding: 20px 25px;
	position: relative;
	cursor: pointer;
	color: #fff;
}

.toggle_icon{
	position: absolute;
	top: 50%;
	right: 2rem;
	width: 20px;
	height: 20px;
	margin-top: -15px;
}
.toggle_icon::before{
	position: absolute;
	content: "▼";
	margin: auto;
	box-sizing: border-box;
	vertical-align: middle;
}
.qa_q.open .toggle_icon:before{
	position: absolute;
	content: "ー";
	margin: auto;
	box-sizing: border-box;
	vertical-align: middle;
}
.q-txt{
	display: block;
    padding-left: 35px;
    position: relative;
    line-height: 1.5;
    font-size: 20px;
}
.q-txt::before{
	position: absolute;
	left: 0;
    content: "Q．";
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}
.qa_box .qa_a {
    display: none;
    padding: 25px 30px;
    border-left: 1px solid #F656A0;
    border-right: 1px solid #F656A0;
    border-bottom: 1px solid #F656A0;
    box-sizing: border-box;
    background: #fff;
}
.a-txt{
	display: block;
    padding-left: 35px;
    position: relative;
    line-height: 1.5;
	color: #643219;
	font-size: 20px;
}
.a-txt::before{
	position: absolute;
    left: 0;
    content: "A．";
    color: #F656A0;
    font-size: 20px;
    font-weight: bold;
}
/**/
.icons {
	background-color: linear-gradient(#F656A0, #E68214);
	padding-top: 5%;
	width: 30%;
	margin: 0 auto;
}
.icon {
	display: inline;
}

.icon img {
	width: 20%;
	padding: 5%;
}

.svg-separator {
	margin-bottom: -1%;
}
/*JavaScript-Animation*/
.element {
  /* 最初は非表示 */
  opacity: 0;
  z-index: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
@media screen and (max-width: 767px) { 
	footer　h1 {
		font-size: 200px;
	}
    .inner{
        width: auto;
    }
    
    .toggle_icon {
        right: 0.8rem;
    }
    
    .toggle_icon:before {
        width: 15px;
    }
    .toggle_icon:after {
        height: 15px;
        right: 7px;
    }
}
@media screen and (max-width: 480px) { 
	footer　h1 {
		font-size: 200px;
	}
    .toggle_icon {
        right: 0.4rem;
    }
	.a-txt {
		font-size: 45px;
	}
}