@charset "utf-8";
@media screen and (max-width: 768px){

/* ---------------------------------------------------------------------------------------------------*/
#mainvisual{
    padding: 170px 24px 24px;
    width: 100%;
    min-width: auto;
    height: auto;
    background: url("../images/top/top_mainvisual_sp.jpg") 50% 25% no-repeat;
    background-size: cover;
    border-bottom: 1px solid #DDD;
}
#mainvisual .inner{
    padding: 24px;
    background: rgba(255,255,255,.8);
}
#mainvisual h1{
    margin: 0 auto;
    padding-top: 31%;
    width: 100%;
    height: 0;
    background-size: 100% auto;
}
#mainvisual h1 + p{
    padding-top: 16px;
    font-size: 14px;
}
#mainvisual .linkButtonOrange{
    margin: 24px 0 0 0;
}
/* ---------------------------------------------------------------------------------------------------*/
#whats{
    padding: 24px 24px 60%;
    background: url("../images/top/top_whats_bg_sp.png") 50% 100% no-repeat;
    background-size: calc(100% - 32px) auto;
}
#whats h2{
    padding-top: 100px;
    margin-bottom: 40px;
    font-size: 20px;
    background-size: auto 75px;
}
#whats p{
	text-align: justify;
}
/* ---------------------------------------------------------------------------------------------------*/
#merit{
    padding: 40px 24px;
}
#merit h2{
	font-size: 18px;
	padding-bottom: 0;
}
.meritList{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.meritList > div{
    padding-top: 24px;
    width: 100%;
}
.meritList > div h3{
    padding: 16px 0;
}
/* ---------------------------------------------------------------------------------------------------*/
#recommend{
	border-top: 1px solid #E5E5E5;
	padding: 40px 0 0;
}
#recommend2{
	padding: 0;
}
#recommend h2 {
	padding: 0 24px 16px;
	font-size: 18px;
}
#recommend .inner,
#recommend2 .inner{
	padding: 40px 24px;
}
#recommend .inner::before,
#recommend2 .inner::before{
	content: none;
}	
#recommend .thumbImage,
#recommend2 .thumbImage{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#recommend .text,
#recommend2 .text{
    padding: 32px 16px 16px;
    width: 100%;
    margin: 0;
}
#recommend h3,
#recommend2 h3{
	text-align: center;
}
#recommend h3 img,
#recommend2 h3 img {
	max-width: 100%;
	max-height: 56px;
}
#recommend h4,
#recommend2 h4{
	font-size: 18px;
}
#recommend ul,
#recommend2 ul{
	padding: 8px 0 16px;
	flex-direction: column;
}
#recommend ul li,
#recommend2 ul li{
	margin: 8px 0 0;
	text-align: center;
}
/* ---------------------------------------------------------------------------------------------------*/
#trial{
    padding: 40px 24px;
}
#trial .inner{
    padding: 8px;
    width: 100%;
    background-size: 5px 5px;
}
#trial .inner > div{
    padding: 24px 16px;
}
#trial .inner h2{
    padding-top: 33.33%;
    width: 100%;
    height: 0;
    background: url("../images/top/top_trial_text02_sp.png") 50% 0 no-repeat;
    background-size: 100% auto;
}
#trial .inner p{
    padding: 24px 0 16px;
    text-align: left;
}
/* ---------------------------------------------------------------------------------------------------*/
#inductionPersonal{
    padding: 40px 24px;
}
#inductionPersonal .inner{
	padding: 24px 16px 16px;
    width: 100%;
	border: 12px solid #f4f4f4;
}
#inductionPersonal .inner h2{
	padding-top: 0;
	padding-left: 28px;
	font-size: 20px;
	background-size: auto 24px;
}
#inductionPersonal .inner p.logoPersonal{
	margin-top: 24px;
	padding-top: 14%;
	width: 80%;
	height: 0;
}
#inductionPersonal .inner p{
	padding: 24px 0;
	text-align: justify;
}
.inductionButton{
	width: 100%;
    height: 64px;
}
.inductionButton a{
    font-size: 15px;
    line-height: 64px;
}
.inductionButton i{
	font-size: 16px;
	top: calc(50% - 9px);
}
/* ---------------------------------------------------------------------------------------------------*/
#wishing{
    padding: 40px 16px;
}
#wishing h2{
    padding-top: 100px;
    margin-bottom: 40px;
    font-size: 18px;
    background-size: auto 75px;
}
#wishing .frame{
    margin-top: 24px;
    padding: 16px;
    flex-direction: column;
    justify-content: flex-start;
}
#wishing .frame h3{
    padding-bottom: 0;
    font-size: 16px;
}
#wishing .frame p{
    padding-top: 14px;
}
#wishing .frame01 .text,
#wishing .frame02 .text{
    width: 100%;
    order: 2;
}
#wishing .frame01 .thumbImage,
#wishing .frame02 .thumbImage{
    margin-bottom: 16px;
    width: 100%;
    height: auto;
    order: 1;
}
#wishing .miniButton{
    padding-top: 16px;
    padding-bottom: 8px;
}
#wishing .linkFrame{
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    height: 160px;
    background-size: cover;
}
#wishing .linkFrame .linkButton{
    margin: 0 24px -30px;
    width: 100%;
}

/* ---------------------------------------------------------------------------------------------------*/
#initiative{
    padding: 40px 16px;
}
#initiative h2{
    padding-top: 100px;
    font-size: 18px;
    background-size: auto 75px;
}
#initiative h2 + p{
    padding: 24px 8px 0;
    text-align: left;
}
#initiative h3{
    padding-top: 40px;
    font-size: 16px;
}
#initiative h4{
    font-size: 16px;
}
#initiative .frame01{
    margin-top: 16px;
    padding: 16px;
    flex-direction: column;
}
#initiative .frame01 h4{
    padding-bottom: 16px;
}
#initiative .frame01 .thumbImage{
    width: 100%;
}
#initiative .frame01 .text{
    width: 100%;
}
#initiative .frame02{
    flex-direction: column;
}
#initiative .frame02 > div{
    margin-top: 16px;
    padding: 16px;
    width: 100%;
}
#initiative .frame02 h4{
    text-align: left;
}

/* ---------------------------------------------------------------------------------------------------*/
#voice{
    padding: 40px 24px;
}
#voice h2{
    padding-top: 100px;
    font-size: 18px;
    background-size: auto 75px;
}
#voice .voiceList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#voice .voice{
    margin-top: 24px;
    padding: 16px;
    width: 100%;
}
#voice .headline{
    padding-left: 48px;
    padding-bottom: 8px;
}
#voice .headline::after{
    width: 72px;
    height: 72px;
    left: -36px;
    bottom: auto;
    top: -12px;
}
#voice .voice01 .headline::after,
#voice .voice02 .headline::after,
#voice .voice03 .headline::after,
#voice .voice04 .headline::after{
    background-size: 72px 72px;
}
#voice .headline h3{
    font-size: 16px;
}
/* ---------------------------------------------------------------------------------------------------*/
#plan{
    padding: 40px 24px;
}
#plan h2{
    padding-top: 100px;
    font-size: 18px;
    background-size: auto 75px;
}
#plan h2 span{
    font-size: 14px;
}
#plan h2 + div{
    padding: 24px 0;
}
#plan h2 + div p{
    text-align: left;
}
#plan .planList{
    padding-top: 0;
    justify-content: flex-start;
    flex-direction: column;
}
#plan .plan{
    margin-top: 24px;
    width: 100%;
}
#plan .plan > div{
    padding: 24px 16px 16px;
}
#plan .trial{
    margin-top: 40px;
}
#plan .trial h3{
    padding-top: 45.5%;
    width: 100%;
    height: 0;
    background-size: 100% auto;
}
#plan .trial h3 + p{
    padding-top: 32px;
    font-size: 15px;
    text-align: justify;
}
#plan .trial .frame{
    margin-top: 16px;
    padding: 8px;
    background-size: 5px 5px;
}
#plan .trial .frame > div{
    padding: 16px;
}
#plan .trial .frame p{
    padding-bottom: 14px;
    font-size: 14px;
    text-align: justify;
}
#plan .trial .frame .caution{
    font-size: 13px;
}
#plan .trial .frame .linkButtonOrange{
    margin-top: 16px;
}

/* ---------------------------------------------------------------------------------------------------*/
#application{
    padding: 40px 16px;
}
#application .inner{
    padding: 16px;
}
#application h3{
    padding: 16px;
    font-size: 18px;
}
#application h3 + p{
    text-align: left;
}

/* ---------------------------------------------------------------------------------------------------*/
#faq{
    padding: 40px 24px;
}
#faq .inner{
    margin: 0 auto;
}
#faq h2{
    padding-top: 100px;
    margin-bottom: 16px;
    font-size: 18px;
    background-size: auto 75px;
}
#faq h3{
    padding: 12px;
    font-size: 15px;
}
#faq dt{
    font-size: 14px;
	cursor: pointer;
}
#faq dd{
    padding: 8px 16px;
}

}