@charset "utf-8";

@media screen and (max-width: 768px) {
    /* ---------------------------------------------------------------------------------------------------*/
    #mainvisual {
        padding-top: 80px;
        min-width: auto;
        position: relative;
        background-size: contain;
    }
    #mainvisual .section1 {
        padding: 0 32px;
        width: 100%;
    }
    #mainvisual .section1 h1 {
        width: 100%;
        font-size: 32px;
        line-height: 60px;
        text-align: center;
    }
    #mainvisual .section1 h1 i {
        font-size: 28px;
    }
    #mainvisual .section1 h1 span {
        padding: 0 12px;
        font-size: 40px;
        background-size: 12px 20px;
    }
    #mainvisual .section1 h1 span i {
        font-size: 32px;
    }
    #mainvisual .section1 p {
        padding-top: 24px;
        font-size: 14px;
    }
    #mainvisual .section1 a {
        margin: 24px 0 0;
        width: 100%;
    }
    /* ---------------------------------------------------------------------------------------------------*/
    #mainvisual .section2,
    #mainvisual .section3 {
        padding-top: 40px;
        width: 100%;
    }
    #mainvisual .section2 .subHead {
        margin: 0 32px;
        padding: 16px;
        background: #020924;
        border: 2px solid #068;
    }
    #mainvisual .section2 h2 {
        padding: 0;
        font-size: 20px;
        border: none;
    }
    #mainvisual .section2 h2 span {
        margin-bottom: 8px;
        padding-left: 20px;
        font-size: 18px;
        background-size: 14px 20px;
        line-height: 24px;
    }
    #mainvisual .section2 .contentWrap {
        margin: -80px 16px 0;
        padding: 92px 12px 24px;
        z-index: 2;
    }
    #mainvisual .section2 .trainingConut i {
        font-size: 42px;
        vertical-align: -2px;
    }
    #mainvisual .section2 .contentWrap h3 {
        font-size: 18px;
    }
    #mainvisual .section2 .contentWrap h3+p {
        padding-top: 16px;
    }
    #mainvisual .section2 .bg {
        z-index: 1;
        right: 0;
        top: -32px;
        width: 100vw;
        background: url("../images/top/top_bg01.png") 100% 0 no-repeat;
        background-size: cover;
    }
    /* ---------------------------------------------------------------------------------------------------*/
    #mainvisual .section3 .subHead {
        margin: 0 32px;
        padding: 16px;
        width: auto;
        background: #020924;
        border: 2px solid #068;
    }
    #mainvisual .section3 h2 {
        padding: 0;
        font-size: 20px;
        border: none;
    }
    #mainvisual .section3 h2 span {
        margin-bottom: 8px;
        padding-left: 20px;
        font-size: 18px;
        background-size: 14px 20px;
        line-height: 24px;
    }
    #mainvisual .section3 .contentWrap {
        margin: -80px 16px 0;
        padding: 92px 12px 24px;
        z-index: 2;
    }
    #mainvisual .section3 .bg {
        z-index: 1;
        left: 0;
        top: -32px;
        width: 100vw;
        background: url("../images/top/top_bg02.png") 0 0 no-repeat;
        background-size: cover;
    }
    /* ---------------------------------------------------------------------------------------------------*/
    #mainvisual .section4 {
        padding: 0 32px;
        width: 100%;
    }
    #mainvisual .section4 p {
        text-align: justify;
        font-size: 18px;
    }
    #mainvisual .section4 div {
        padding: 0;
        background: transparent;
    }
    /* ---------------------------------------------------------------------------------------------------*/
    #gameTitle .inner {
        padding: 0 16px;
    }
    #gameTitle h2 {
        font-size: 16px;
    }
    #gameTitle h2 span {
        font-size: 40px;
    }
    #gameTitle ul.gameList {
        margin: 8px 0 0;
        padding: 0 16px;
        flex-direction: column;
    }
    #gameTitle ul.gameList li {
        margin: 16px 0 0 0;
        width: 100%;
    }
	#gameTitle ul.gameList li a{
		padding: 32px;
	}
	#gameTitle .annotation p{
		padding-left: 1em;
		text-indent: -1em;
		text-align: left;
	}
    /* ---------------------------------------------------------------------------------------------------*/
    #gameTrainer .inner {
        padding: 0 16px;
    }
    #gameTrainer h2 {
        font-size: 16px;
    }
    #gameTrainer h2 span {
        font-size: 38px;
    }
    #gameTrainer .trainerCard {
        margin: 8px 0 24px;
        flex-direction: column;
    }
	#gameTrainer .trainerCard > li{
		margin-top: 16px;
		width: 100%;
	}
	#gameTrainer .trainerCard .trainerThumb{
		margin-right: 16px;
		width: 88px;
		height: 88px;
	}
    /* ---------------------------------------------------------------------------------------------------*/
    #voice h2 {
        padding-bottom: 16px;
        font-size: 16px;
    }
    #voice h2 span {
        font-size: 40px;
    }
    #voice .voiceWrap {
        margin-bottom: -32px;
        padding: 16px 16px 0;
        display: flex;
        flex-direction: column;
    }
    #voice .voiceCard {
        padding: 24px;
        width: 100%;
    }
    #voice .voiceHead .thumbImage {
        width: 88px;
        height: 88px;
    }
    #voice .voiceHead p {
        font-size: 18px;
    }
    #voice .voiceHead p span {
        font-size: 14px;
    }
    /* ---------------------------------------------------------------------------------------------------*/
    #price {
        background: #F1F1F1;
        position: relative;
    }
    #price .inner {
        padding: 16px 32px 0;
    }
    #price h2 {
		margin-bottom: 24px;
        font-size: 16px;
        text-align: center;
    }
    #price h2 span {
        font-size: 40px;
    }
	#price .priceWrap{
		padding-top: 20px;
	}
	#price .priceWrap span{
		padding: 0 16px 0 24px;
		font-size: 16px;
		line-height: 40px;
		position: absolute;
		top: 0;
		left: 0;
	}
	#price .priceWrap span::after{
		border-width: 40px 16px 0 0;
		right: -16px;
	}
    #price .priceWrap p {
		padding: 32px 0 12px;
		width: 100%;
		font-size: 16px;
    }
    #price .priceWrap i {
        font-size: 36px;
        vertical-align: -2px;
    }
	#price .campaignCatch{
		font-size: 20px;
		line-height: 1.5em;
	}
	#price .courseList{
		flex-direction: column;
	}
	#price .courseWrap{
		margin-top: 16px;
		width: 100%;
	}
    /* ---------------------------------------------------------------------------------------------------*/
	#freeTrial .bg{
		width: calc(100% - 16px);
		left: 0;
		top: 17px;
	}
	#freeTrial .inner{
		padding: 180px 16px 0;
	}
	#freeTrial h2{
		margin-bottom: 24px;
		font-size: 16px;
		text-align: center;
	}
	#freeTrial h2 span{
		font-size: 40px;
	}
	#freeTrial p{
		padding: 0 16px;
	}
	.cautionWrap{
		margin-top: 16px;
		justify-content: flex-start;
	}
    /* ---------------------------------------------------------------------------------------------------*/
    #faq .inner {
        padding: 0 16px;
    }
    #faq h2 {
        padding-bottom: 16px;
        font-size: 16px;
    }
    #faq h2 span {
        font-size: 40px;
    }
    #faq dl {
        padding-top: 16px;
    }
    #faq dt {
        padding: 16px 52px 16px 16px;
        background: transparent;
        background-size: 14px 20px;
        font-size: 18px;
        line-height: 1.5em;
    }
    #faq dt i {
        width: 32px;
        height: 32px;
        top: calc(50% - 16px);
        right: 12px;
    }
    #faq dt i::after {
        font-size: 18px;
        line-height: 30px;
    }
    #faq dd {
        padding: 0 16px 16px;
    }
    /* ---------------------------------------------------------------------------------------------------*/
    #application .inner {
        padding: 0 16px;
    }
    #application h2 {
        padding-bottom: 8px;
        font-size: 16px;
    }
    #application h2 span {
        font-size: 40px;
    }
    #application h2+p {
        padding: 16px;
        text-align: justify;
    }
    #application .whiteWrap {
		margin: 0 1px;
        padding: 0;
    }
	#application .form{
		padding: 0 16px;
		border: none;
	}
}