@charset "utf-8";
/* ---------------------------------------------------------------------------------------------------*/
#mainvisual{
    padding-top: 96px;
    width: 100%;
    min-width: 1120px;
    height: 560px;
    background: url("../images/top/top_mainvisual_pc.png") 50% 0 no-repeat,url("../images/top/top_mainvisual_bg.png") 50% 0 repeat;
}
#mainvisual .inner{
    padding-left: 550px;
}
#mainvisual h1{
    width: 570px;
    height: 170px;
    text-indent: -9999px;
    overflow: hidden;
    background: url("../images/top/top_mainvisual_catch.png") 0 0 no-repeat;
}
#mainvisual h1 + p{
    padding-top: 28px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
#mainvisual .linkButtonOrange{
    margin: 40px auto 0;
}
#mainvisual .snsWrap{
    padding-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#mainvisual .snsWrap > *{
    margin: 0 8px;
}

/* ---------------------------------------------------------------------------------------------------*/
#whats{
    padding-top: 60px;
    padding-bottom: 32px;
    background: url("../images/top/top_whats_bg.png") 50% 100% no-repeat;
}
#whats h2{
    padding-top: 144px;
    margin-bottom: 40px;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    background: url("../images/top/top_head_icon_whats.png") 50% 0 no-repeat;
}
#whats p{
    margin-top: 1em;
    text-align: center;
}
/* ---------------------------------------------------------------------------------------------------*/
#merit{
    padding-top: 80px;
}
#merit h2{
	padding-bottom: 24px;
	text-align: center;
	font-size: 20px;
    font-weight: 600;
}
.meritList{
    display: flex;
    justify-content: space-between;
}
.meritList > div{
    width: 336px;
}
.meritList > div h3{
    padding: 24px 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
.meritList > div p{
    padding-bottom: 1em;
}
.meritList > div p.caution{
    padding-bottom: 0;
}
.merit01 h3 span{
    color: #ff8800;
}
.merit02 h3 span{
    color: #33aaee;
}
.merit03 h3 span{
    color: #00cc44;
}
/* ---------------------------------------------------------------------------------------------------*/
#recommend{
	padding-top: 80px;
	padding-bottom: 40px;
}
#recommend2{
	padding-bottom: 80px;
}
#recommend h2,
#recommend2 h2{
	padding-bottom: 24px;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}
#recommend .inner,
#recommend2 .inner{
	padding: 40px 0;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
#recommend .inner::before,
#recommend2 .inner::before{
	content: "";
	top: 0;
    bottom: 0;
    left: calc(50% - 320px);
    background: #E8F8FF;
    right: 0;
	position: absolute;
	z-index: -1;
}
#recommend .thumbImage{
	width: 560px;
    position: relative;
    z-index: 1;
	background-image: url("../images/top/top_recommend_bg.jpg");
	background-size: cover;
	background-position: 50% 50%;
}
#recommend2 .thumbImage{
	width: 560px;
    position: relative;
    z-index: 1;
	background-image: url("https://gametrainer.jp/wp-content/uploads/2022/08/top_recommend2_bg.png");
	background-size: cover;
	background-position: 50% 50%;
}
#recommend .text,
#recommend2 .text{
	z-index: 2;
    background: #FFF;
	border: 8px solid #1eccda;
    padding: 40px 40px 32px;
    width: calc(100% - 320px);
    margin: 40px 0 0 -280px;
    position: relative;
}
#recommend h3 img,
#recommend2 h3 img{
	width: auto;
	height: 56px;
}
#recommend .subhead,
#recommend2 .subhead{
	padding-top: 24px;
	padding-bottom: 4px;
	font-weight: 600;
}
#recommend h4,
#recommend2 h4{
	padding-top: 24px;
	font-size: 20px;
	font-weight: 600;
	color: #ff8800;
	line-height: 1.4em;
}
#recommend h4 span,
#recommend2 h4 span{
	font-size: 14px;
	color: rgba(0, 0, 0, .88);
}
#recommend ul,
#recommend2 ul{
	padding: 12px 0 8px;
	display: flex;
}
#recommend ul li,
#recommend2 ul li{
	margin-right: 8px;
	padding: 0 1em;
	line-height: 32px;
	color: #FFF;
	font-weight: 600;
	border-radius: 4px;
	background: #33aaee;
}
#recommend2 .caution{
	margin-top: 8px;
}
/* ---------------------------------------------------------------------------------------------------*/
#trial{
    padding: 40px 0;
    background: url("../images/top/top_trial_bg.jpg") 50% 50% no-repeat;
    background-size: cover;
}
#trial .inner{
    margin: 0 auto;
    padding: 16px;
    width: 792px;
    background: url("../images/top/top_trial_slash.png");
}
#trial .inner > div{
    padding: 24px 40px 40px;
    background: #FFF;
}
#trial .inner h2.trial01{
    width: 100%;
    height: 198px;
    text-indent: -9999px;
    overflow: hidden;
    background: url("../images/top/top_trial_text.png") 50% 0 no-repeat;
}
#trial .inner h2.trial02{
    width: 100%;
    height: 190px;
    text-indent: -9999px;
    overflow: hidden;
    background: url("../images/top/top_trial_text02_pc.png") 50% 0 no-repeat;
}
#trial .inner p{
    padding: 24px 0;
    text-align: center;
}

/* ---------------------------------------------------------------------------------------------------*/
#inductionPersonal{
    padding: 40px 0;
    background: url("../images/common/bg_personal.jpg") 50% 50% no-repeat;
    background-size: cover;
}
#inductionPersonal .inner{
    margin: 0 auto;
    padding: 40px;
    width: 792px;
    background: #FFF;
	border: 16px solid #f4f4f4;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#inductionPersonal .inner h2{
	padding-top: 4px;
	padding-left: 40px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4em;
	color: #03bbdd;
	background: url("../images/common/subehead_slash.png") 0 0 no-repeat;
}
#inductionPersonal .inner p.logoPersonal{
	margin-top: 32px;
	width: 290px;
	height: 80px;
    background: url("../images/common/logo_personal_black.png") 50% 0 no-repeat;
	background-size: contain;
}
#inductionPersonal .inner p{
    padding: 32px 0 24px;
    text-align: center;
}
#inductionPersonal .inner p span{
    font-weight: bold;
    background: linear-gradient(transparent 50%, #ff6 50%);
}
/* ---------------------------------------------------------------------------------------------------*/
#wishing{
    padding-top: 60px;
    padding-bottom: 80px;
    background: url("../images/top/top_wishing_bg.png") 50% 100% repeat;
}
#wishing h2{
    padding-top: 128px;
    margin-bottom: 40px;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    background: url("../images/top/top_head_icon_wishing.png") 50% 0 no-repeat;
}
#wishing .frame{
    margin-top: 20px;
    padding: 32px;
    display: flex;
    justify-content: space-between;
    background: #FFF;
    border: 8px solid #f2f2f2;
}
#wishing .frame h3{
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
}
#wishing .frame p{
    padding-top: 14px;
}
#wishing .frame01 .text{
    width: calc(100% - 392px);
}
#wishing .frame01 .thumbImage{
    width: 360px;
}
#wishing .frame02 .text{
    width: calc(100% - 392px);
}
#wishing .frame02 .thumbImage{
    width: 360px;
    height: 290px;
}
#wishing .initiative{
    margin-top: 20px;
    padding: 16px;
    background: url("../images/top/top_initiative_slash.png");
    background-size: 8px 8px;
}
#wishing .initiative > div{
    padding: 32px;
    width: 100%;
    background: url("../images/top/top_initiative_bg.png") calc(100% - 48px) 100% no-repeat, #FFF;
}
#wishing .initiative h3{
    padding-bottom: 24px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6em;
}
#wishing .initiative h3,
#wishing .initiative p{
    text-align: center;
}
#wishing .initiative ul{
    padding: 24px 0;
    display: flex;
    width: 100%;
    justify-content: center;
}
#wishing .initiative ul li{
    padding: 71px 24px 0;
    text-align: center;
    font-weight: 600;
}
#wishing .initiative ul li:nth-of-type(1){
    background: url("../images/top/top_initiative_img01.png") 50% 0 no-repeat;
    background-size: 108px 55px;
}
#wishing .initiative ul li:nth-of-type(2){
    background: url("../images/top/top_initiative_img02.png") 50% 0 no-repeat;
    background-size: 108px 55px;
}
#wishing .initiative ul li:nth-of-type(3){
    background: url("../images/top/top_initiative_img03.png") 50% 0 no-repeat;
    background-size: 108px 55px;
}

/* ---------------------------------------------------------------------------------------------------*/
#voice{
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid #DDD;
}
#voice h2{
    padding-top: 128px;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    background: url("../images/top/top_head_icon_voice.png") 50% 0 no-repeat;
}
#voice .voiceList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#voice .voice{
    margin-top: 48px;
    padding: 24px;
    width: 536px;
    border: 8px solid #F2F2F2;
}
#voice .headline{
    padding-left: 86px;
    padding-bottom: 8px;
    position: relative;
}
#voice .headline::after{
    content: "";
    display: block;
    width: 110px;
    height: 110px;
    position: absolute;
    left: -48px;
    bottom: 8px;
}
#voice .voice01 .headline::after{
    background: url("../images/top/top_voice01.png") 0 0 no-repeat;
}
#voice .voice02 .headline::after{
    background: url("../images/top/top_voice02.png") 0 0 no-repeat;
}
#voice .voice03 .headline::after{
    background: url("../images/top/top_voice03.png") 0 0 no-repeat;
}
#voice .voice04 .headline::after{
    background: url("../images/top/top_voice04.png") 0 0 no-repeat;
}
#voice .headline h3{
    padding-bottom: 8px;
    font-size: 18px;
    color: #00cc44;
    font-weight: 600;
}
#voice .headline span{
    font-size: 13px;
    color: #888;
}
#voice .voice p{
    padding-top: 1em;
}

/* ---------------------------------------------------------------------------------------------------*/
#plan{
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid #DDD;
}
#plan h2{
    padding-top: 128px;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    background: url("../images/top/top_head_icon_plan.png") 50% 0 no-repeat;
}
#plan h2 span{
    font-size: 16px;
}
#plan .planList{
    padding-top: 48px;
    display: flex;
    justify-content: space-between;
}
#plan .plan{
    width: 348px;
}
#plan .plan > div{
    padding: 24px 16px 16px;
}
#plan .plan h3{
    padding: 8px 0 8px 16px;
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4em;
    position: relative;
}
#plan .plan h3 span{
    display: block;
    font-size: 14px;
    font-weight: 400;
}
#plan .plan01{
    border: 4px solid #00899F;
}
#plan .plan02{
    border: 4px solid #F36E21;
}
#plan .plan03{
    border: 4px solid #E41E2B;
}
#plan .plan01 h3{
    background: #00899F;
}
#plan .plan02 h3{
    background: #F36E21;
}
#plan .plan03 h3{
    background: #E41E2B;
}
#plan .plan01 h3::after{
    content: "";
    display: block;
    width: 90px;
    height: 100px;
    background: url("../images/top/top_plan01.png") 50% 0 no-repeat;
    background-size: 90px 100px;
    position: absolute;
    left: 8px;
    bottom: 0;
}
#plan .plan02 h3::after{
    content: "";
    display: block;
    width: 90px;
    height: 100px;
    background: url("../images/top/top_plan02.png") 50% 0 no-repeat;
    background-size: 90px 100px;
    position: absolute;
    left: 8px;
    bottom: 0;
}
#plan .plan03 h3::after{
    content: "";
    display: block;
    width: 90px;
    height: 100px;
    background: url("../images/top/top_plan03.png") 50% 0 no-repeat;
    background-size: 90px 100px;
    position: absolute;
    left: 8px;
    bottom: 0;
}
#plan .price{
    padding-bottom: 16px;
    color: #E71018;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
#plan .price span{
    font-size: 28px;
}
#plan .average{
    padding: 8px;
    font-weight: 600;
    text-align: center;
    background: #F2F2F2;
}
#plan .average span{
    font-size: 20px;
}
#plan .discount{
    padding-top: 8px;
    font-size: 24px;
    text-align: center;
}
#plan .discount i{
    font-size: 16px;
}
#plan .discount span{
    font-size: 18px;
}
#plan .plan02 .discount,
#plan .plan02 .discount i,
#plan .plan02 .discount span{
    color: #F36E21;
    font-weight: 600;
}
#plan .plan03 .discount,
#plan .plan03 .discount i,
#plan .plan03 .discount span{
    color: #E41E2B;
    font-weight: 600;
}
#plan .trial{
    margin-top: 60px;
}
#plan .trial h3{
    width: 100%;
    height: 198px;
    text-indent: -9999px;
    overflow: hidden;
    background: url("../images/top/top_trial_text.png") 50% 0 no-repeat;
}
#plan .trial h3 + p{
    padding-top: 40px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
#plan .trial .frame{
    margin: 40px auto 0;
    padding: 16px;
    width: 792px;
    background: url("../images/top/top_trial_slash.png");
}
#plan .trial .frame > div{
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #FFF;
}
#plan .trial .frame p{
    padding-bottom: 16px;
    font-size: 16px;
    text-align: center;
}
#plan .trial .frame .caution{
    padding-bottom: 0;
    font-size: 14px;
    text-align: justify;
}
#plan .trial .frame .caution span{
    color: #00B900;
    font-weight: 600;
}
#plan .trial .frame .linkButtonLine{
    margin-top: 24px;
}

/* ---------------------------------------------------------------------------------------------------*/
#blog{
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid #DDD;
}
#blog h2{
    padding-top: 128px;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    background: url("../images/top/top_head_icon_blog.png") 50% 0 no-repeat;
}
#blog .blogList{
    padding-top: 48px;
    display: flex;
    justify-content: flex-start;
}
#blog .blogList .blog{
    padding-right: 40px;
    width: 290px;
}
#blog .blog:last-child{
    padding-right: 0;
    width: 250px;
}
#blog .blog .blogThumb{
    height: 186px;
}
#blog .blogList .blog a{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
#blog .blog .category{
    padding: 0 16px;
    line-height: 32px;
    font-size: 12px;
    color: #FFF;
    background: #222;
    position: absolute;
    top: 154px;
    left: 0;
    z-index: 10;
}
#blog .blog .title{
    padding: 16px 0;
    font-size: 16px;
    line-height: 1.6em;
    font-weight: 600;
}
#blog .blog .blogBottom{
    margin-top: auto;
}
#blog .blog .blogBottom > div:nth-of-type(1){
    padding-bottom: 8px;
    display: flex;
    align-items: center;
}
#blog .blog .blogBottom > div:nth-of-type(2){
    padding-top: 8px;
    border-top: 1px dotted #BBB;
    display: flex;
    justify-content: space-between;
}
#blog .blog .blogBottom span{
    font-size: 13px;
}
#blog .blog .blogBottom .writterThumb{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
#blog .blog .blogBottom .writterThumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#blog .blog .blogBottom .author{
    padding-left: 8px;
}
#blog .blog .blogBottom .author,
#blog .blog .blogBottom .date{
    color: #888;
}
#blog .blog a:hover,
#blog .blog a.hover{
    text-decoration: none;
}
#blog .blog a:hover .blogThumb img,
#blog .blog a.hover .blogThumb img{
    opacity: 0.6;
}
#blog .blog a:hover .title,
#blog .blog a.hover .title{
    text-decoration: underline;
}

#blog .linkButton{
    margin-top: 48px;
}

/* ---------------------------------------------------------------------------------------------------*/
#faq{
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid #DDD;
}
#faq h2{
    padding-top: 128px;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    background: url("../images/top/top_head_icon_faq.png") 50% 0 no-repeat;
}
#faq .ufaq-faq-list p{
    margin: 1em 0;
}
/* ---------------------------------------------------------------------------------------------------*/
#news{
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid #DDD;
}
#faq .inner{
    width: 792px;
}
#news .news{
    display: flex;
    align-items: center;
}
#news .rightBlock{
    padding: 40px;
    width: 320px;
}
#news h2{
    padding-top: 124px;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    background: url("../images/top/top_head_icon_news.png") 50% 0 no-repeat;
}
#news .miniButton{
    margin-top: 32px;
}
#news ul{
    padding-left: 56px;
    width: calc(100% - 320px);
    background: url("../images/top/top_news_slash.png") 0 0 repeat-y;
}
#news li{
    padding: 24px 0;
    display: flex;
    border-bottom: 1px dotted #BBB;
}
#news li div{
    width: 216px;
    display: flex;
}
#news li .date{
    display: block;
    width: 96px;
    font-size: 14px;
    color: #888;
    line-height: 24px;
}
#news li .label{
    display: block;
    width: 96px;
    font-size: 12px;
    color: rgba(255, 255, 255, .88);
    line-height: 24px;
    text-align: center;
    align-self: flex-start;
}
#news li p{
    width: calc(100% - 216px);
}
#news li a{
    color: rgba(0, 0, 0, .88);
}
#news li a:hover,
#news li a.hover{
    color: rgba(0, 0, 0, .88);
}

/* ---------------------------------------------------------------------------------------------------*/
/* .snsShare */
/* ---------------------------------------------------------------------------------------------------*/
.snsShare{
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 40px;
    width: 700px;
}

/* ---- embedded responsive media ---- */
div.responsive {
	width: 90vw;
	height: calc(90vw * 0.5625);
	max-width: 960px;
	max-height: 540px;
	margin: 20px auto 40px;
	text-align: center;
}

div.responsive.googleslide {
	height: calc(90vw * 0.5625 + 36px);
	max-height: calc(540px + 36px);
	
}

div.responsive iframe {
	width: 100%;
	height: 100%;
}