@charset "utf-8";
/* ---------------------------------------------------------------------------------------------------*/
#mainvisual{
    padding-top: 96px;
    width: 100%;
    min-width: 1120px;
    height: 520px;
    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;
}
/* ---------------------------------------------------------------------------------------------------*/
#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://gemutore.com/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{
    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%);
}
.inductionButton{
    margin: 0 auto;
    width: 380px;
    height: 80px;
}
.inductionButton a{
    display: block;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #FFF;
    line-height: 80px;
    text-align: center;
    background: #0377ee;
    position: relative;
    transition: all 0.2s ease-out;
    box-shadow: 0 -4px 0 0 #006688 inset;
}
.inductionButton i{
    font-size: 18px;
    display: block;
    color: #FFF;
    position: absolute;
    top: calc(50% - 7px);
    right: 18px;
    transition: all 0.2s ease-out;
}
.inductionButton a:hover,
.inductionButton a.hover{
    text-decoration: none;
    background: #006688;
    box-shadow: none;
}
.inductionButton a:hover i,
.inductionButton a.hover i{
    right: 12px;
}
/* ---------------------------------------------------------------------------------------------------*/
#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 .linkFrame{
    margin-top: 40px;
    display: flex;
    align-items: center;
    height: 240px;
    background: url("../images/top/top_wishing_link_bg.jpg") 100% 0 no-repeat;
}
#wishing .linkFrame .linkButton{
    margin: 0;
    width: 320px;
}

/* ---------------------------------------------------------------------------------------------------*/
#initiative{
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid #E5E5E5;
}
#initiative p{
    padding-top: 1em;
}
#initiative h2{
    padding-top: 128px;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    background: url("../images/top/top_head_icon_initiative.png") 50% 0 no-repeat;
}
#initiative h2 + p{
    text-align: center;
}
#initiative h3{
    padding-top: 48px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
}
#initiative h4{
    font-size: 18px;
    font-weight: 600;
}
#initiative .frame01{
    margin-top: 32px;
    padding: 32px;
    border: 8px solid #F2F2F2;
    display: flex;
    justify-content: space-between;
}
#initiative .frame01 .thumbImage{
    width: 440px;
}
#initiative .frame01 .text{
    width: calc(100% - 472px);
}
#initiative .frame02{
    display: flex;
    justify-content: space-between;
}
#initiative .frame02 > div{
    margin-top: 32px;
    padding: 32px;
    width: calc(50% - 16px);
    border: 8px solid #F2F2F2;
}
#initiative .frame02 h4{
    padding-bottom: 16px;
    text-align: center;
}

/* ---------------------------------------------------------------------------------------------------*/
#voice{
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid #E5E5E5;
}
#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 #E5E5E5;
}
#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 h2 + div{
    padding-top: 24px;
}
#plan h2 + div p{
    text-align: center;
}
#plan i{
	font-style: normal;
}
#plan p.caution{
    padding-top: 0.5em;
    font-size: 14px;
    font-weight: 600;
}
#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{
    color: #E71018;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
#plan .price span{
    font-size: 28px;
}
#plan .price i{
	color: #888;
	display: block;
}
#plan .discount{
    font-size: 16px;
    text-align: center;
}
#plan .discount i{
	padding-left: 2px;
	font-size: 24px;
}
#plan .discount i span{
	padding-left: 2px;
    font-size: 16px;
}
#plan .discount > span{
    font-size: 12px;
	font-weight: normal;
	color: #888;
}
#plan .plan02 .discount,
#plan .plan02 .discount i,
#plan .plan02 .discount i span{
    color: #F36E21;
    font-weight: 600;
}
#plan .plan03 .discount,
#plan .plan03 .discount i,
#plan .plan03 .discount i span{
    color: #E41E2B;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------------*/
#application{
    padding-top: 80px;
    padding-bottom: 80px;
    border-top: 1px solid #E5E5E5;
    background: url("../images/top/top_wishing_bg.png") 50% 100% repeat;
}
#application .inner{
    padding: 32px;
    max-width: 880px;
    background: #FFF;
    border: 8px solid #F5F5F5;
}
#application h3{
    padding-bottom: 16px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
}
#application h3 + p{
    padding-bottom: 24px;
    text-align: center;
}

/* ---------------------------------------------------------------------------------------------------*/
#faq{
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid #E5E5E5;
}
#faq .inner{
    max-width: 880px;
}
#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 h3{
    margin-top: 24px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6em;
    background: #F5F5F5;
}
#faq dt{
    padding: 20px 0 10px 36px;
    font-size: 15px;
    line-height: 1.6em;
    position: relative;
    cursor: pointer;
}
#faq dt::before{
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: calc(50% - 8px);
    left: 4px;
    font-size: 24px;
    color: #F6AB00;
}
#faq dt.open::before{
    content: "\f068";
}
#faq dt:hover::before,
#faq dt.hover::before{
    color: #e8380c;
}
#faq dd{
    padding: 16px 24px;
    background: #FFF;
    border: 1px solid #CCC;
    cursor: pointer;
    display: none;
}
#faq dd p{
    margin: 8px 0;
}


/* ---- 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%;
}