@charset "UTF-8";

/* ////////// html・body ////////// */

html:focus-within {
	scroll-behavior: smooth;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
}

body {
	background-color: #e2dfd6;
	color: #303030;
}

/* ////////// リンク色 ////////// */

main a {
	text-decoration:none;
	transition: 0.25s;
	color:#0076ff;
}

main a:hover,
main a:active {
	color:#77b3fa;
	cursor:pointer;
}

main a img,
main a div {
	border-width:0;
	border-style:none;
	transition: 0.25s ;
}
main a img:hover,
main a div:hover {
	filter: brightness(115%);
	cursor: pointer;
}

/* ////////// break point ////////// */

#article-pc { display: block; }
#article-sp { display: none; }

@media screen and ( max-width: 549px ) {
	#article-pc { display: none; }
	#article-sp { display: block; }
}

/* ////////// PC ////////// */

#article-pc {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
	font-size: max( 15px, min( 1.6vw, 25.6px ) );	/* 1600px * .016 */
	background-color: #fff;
}
#article-pc h1 {
	margin: 0;
}
#article-pc h1 img {
	width: 50%;
	max-width: 894px;
	min-width: 400px;
}
#article-pc p {
	padding: 0;
	margin-top: 1.2em;
	line-height: 1.75;
	font-size: max( 14px, .875em );
}
#article-pc section {
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;
}

/* PC top (A,B) */

#sectionTopA-pc > div,
#sectionTopB-pc > div {
	width: 100%;
	height: 49.21875vw;
	max-height: 787px;
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;
}
#sectionTopA-pc > div {
	background-image: url('/images/lp/creator/2507/pc_top_bg-a.svg');
}
#sectionTopB-pc > div {
	background-image: url('/images/lp/creator/2507/pc_top_bg-b.svg');
	text-align: left;
}
#sectionTopA-pc > div img {
	width: 30%;
	margin-top: 40%;
}
#sectionTopB-pc > div img {
	width: 38%;
	margin-top: 40.7%;
	margin-left: 43%;
}

/* PC 01 */

#section1-pc {
	background-color: #fff;
	background-image: url('/images/lp/creator/2507/pc_1_bg.svg');
	margin-top: 3%;
	padding-top: 3%;
}
.balloon-pc {
	width: 60%;
	margin-top: 3%;
	min-width: 660px;
}
.learning-pc {
	box-sizing: border-box;
	width: 56%;
	min-width: 620px;
	margin: 5% auto 4% auto;
	background-image: url('/images/lp/creator/2507/pc_1_learning.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: left;
}
@media screen and (max-width:659px) {
	.balloon-pc {
		width: 100%;
		min-width: 0;
	}
	.learning-pc {
		width: 94%;
		min-width: 0;
	}
}
.learning-pc p {
	font-size: 1.1em;
	padding: 9% 27% 0 4% !important;
}
.learning-pc span {
	background-color: #fff462;
}


/* PC 02 */
#section2-pc {
	background-color: #eeece6;
}
#section2-pc h1 {
	background: linear-gradient(180deg, #fff 0%, #fff 30%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);
}
#section2-pc p + p {
	font-size: 1.15em;
	margin-top: 0;
}
#section2-pc > div img {
	margin-top: 2%;
	width: 85%;
	max-width: 920px;
	margin-bottom: 6%;
}

/* PC 03 */

#section3-pc {
	background-color: #fff;
}
#section3-pc h1 {
	background: linear-gradient(180deg, #eeece6 0%, #eeece6 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 40% );
}

#section3-pc div {
	background-image: url('/images/lp/creator/2507/pc_3_bg.svg');
	background-size: 1100px !important; 
	background-position-x: center;
	background-position-y: 140px;
	background-repeat: no-repeat;
	height: 850px;
}

@media screen and (max-width:1599px) {
	#section3-pc div { 
		background-size: 68.75vw !important; 
		background-position-y: 8.8vw;
		height: 53.125vw;
	}
}
@media screen and (max-width:819px) {
	#section3-pc div { 
		background-size: 563.75px !important; 
		background-position-y: 72.16px;
		height: 435.625px;
	}
}

/* PC 04 */

#section4-pc {
	background-color: #eeece6;
}
#section4-pc h1 {
	background: linear-gradient(180deg, #fff 0%, #fff 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 100%);
}
#section4-pc > div {
	width: 57.5%;
	min-width: 530px;
	margin: 5% auto 0 auto;
}
#section4-pc > div img {
	width: 100%;
	margin-bottom: 2em;
}
#section4-pc h3 {
	text-align: left;
	font-size: 1.2em;
	line-height: 1;
	color: #00a968;
}

/* PC mid */

#sectionMid-pc {
	background-color: #00a968;
	background-image: url('/images/lp/creator/2507/pcsp_middle_bg.svg');
	background-size: 5.3% !important;
	background-repeat: repeat !important;
}
#sectionMid-pc > div img {
	width: 57.5%;
	min-width: 530px;
	margin-top: 4%;
}
#sectionMid-pc > a img {
	width: 40%;
	min-width: 277px;
	margin-top: -6.5%;
	margin-bottom: 3%;
}

/* PC 05 */

#section5-pc {
	background-color: #fff;
	background-image: url('/images/lp/creator/2507/pc_5_bg.svg');
	background-size: 60% 60% !important;
	background-position: 50% -25% !important;
	padding-top: 3em;
}
@media screen and (max-width:1279px) {
	#section5-pc {
		background-size: 65% 65% !important;
		background-position: 50% -40% !important;
	}
}
@media screen and (max-width:1023px) {
	#section5-pc {
		background-size: 70% 70% !important;
		background-position: 50% -60% !important;
	}
}
@media screen and (max-width:849px) {
	#section5-pc {
		background-size: 80% 80% !important;
		background-position: 50% -110% !important;
	}
}
@media screen and (max-width:719px) {
	#section5-pc {
		background-size: 90% 90% !important;
		background-position: 50% -270% !important;
	}
}
#section5-pc > div img {
	margin-top: 3%;
	width: 90%;
	max-width: 920px;
	margin-bottom: 3%;
}

/* PC 06 */

#section6-pc {
	background-color: #eeece6;
	background-image: url('/images/lp/creator/2507/pc_6_bg.svg');
	padding-top: .5em;
	margin-top: 1em;
}
#section6-pc > div img {
	margin-top: -10%;
	width:75%;
	min-width: 660px;
	margin-bottom: 3%;
}
@media screen and (max-width:659px) {
	#section6-pc > div img {
		width: 100%;
		min-width: 0;
	}
}

/* PC 07 */

#section7-pc {
	background-color: #fff;
}
#section7-pc h1 {
	background: linear-gradient(180deg, #eeece6 0%, #eeece6 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 100%);
}

#section7-pc > div img {
	margin-top: 3%;
	width: 55%;
	min-width: 660px;
	margin-bottom: 3%;
}

@media screen and (max-width:699px) {
	#section7-pc > div img {
		width: 94%;
		min-width: 0;
	}
}


/* PC bottom */

#sectionBtm-pc > div {
	width: 100%;
	background-image: url('/images/lp/creator/2507/pc_bottom_bg.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;
}

#sectionBtm-pc > div img {
	width: 37%;
	margin-top: 30%;
	margin-bottom: 3.5%;
}

/* ////////// mobile ////////// */

#article-sp {
	font-size: 4.325vw;
	background-color: #fff;
}
#article-sp h1 {
	margin: 0;
}
#article-sp h1 img {
	width: 77.3333%;
}
#article-sp p {
	padding: 0 2em;
	margin-top: 1.2em;
	line-height: 1.6;
	text-align: left;
}
#article-sp section {
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;
}

/* SP top (A,B)  */

#sectionTopA-sp > div,
#sectionTopB-sp > div {
	width: 100vw;
	height: 160vw;
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;
}
#sectionTopA-sp > div {
	background-image: url('/images/lp/creator/2507/sp_top_bg-a.svg');
}
#sectionTopB-sp > div {
	background-image: url('/images/lp/creator/2507/sp_top_bg-b.svg');
}
#sectionTopA-sp > div img {
	width: 58%;
	margin-top: 135%;
}
#sectionTopB-sp > div img {
	width: 80%;
	margin-top: 140%;
}

/* SP 01 */

#section1-sp {
	background-color: #fff;
}
#section1-sp h1 {
	padding-top: 2em;
}
.balloon-sp {
	width: 100%;
	max-width: 585px;
	margin-top: max( 2%, 10px );
}
.learning-sp {
	box-sizing: border-box;
	width: calc(100vw - 2em);
	margin: 1em;
	background-image: url('/images/lp/creator/2507/sp_1_learning.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: left;
}
.learning-sp p {
	padding: 26% 5% 2% 5% !important;
}
.learning-sp span {
	background-color: #fff462;
}

/* SP 02 */

#section2-sp {
	background-color: #eeece6;
	padding: 4% 0;
}
#section2-sp p+p {
	font-size: 1.15em;
	margin: 0;
}
#section2-sp p+p span {
	white-space: nowrap;
}
#section2-sp img {
	width: calc( 100vw - 3em );
	margin-top: 1em;
	margin-bottom: 1em;
}

/* SP 03 */

#section3-sp {
	background-color: #fff;
	padding: 7% 0;
}

#section3-sp img {
	width: calc( 100vw - 3em );
}

/* SP 04 */

#section4-sp {
	background-color: #eeece6;
	padding: 7% 0;
}
#section4-sp img {
	width: calc( 100vw - 4em );
}
#section4-sp h3 {
	color: #00a968;
	text-align: left;
	font-size: 4.8vw;
	line-height: 1;
	padding-left: 1.8em;
	margin-top: 2em;
}

/* SP mid */

#sectionMid-sp {
	background-color: #00a968;
	background-image: url('/images/lp/creator/2507/pcsp_middle_bg.svg');
	background-size: 11.4% !important;
	background-repeat: repeat !important;
}
#sectionMid-sp > div img {
	width: 86vw;
	margin-top: 9vw;
}
#sectionMid-sp > a img {
	width: 88vw;
	margin-top: 4vw;
	margin-bottom: 6vw;
}

/* SP 05 */

#section5-sp {
	background-color: #fff;
	padding: 7% 0;
}
#section5-sp img {
	width: calc( 100vw - 4em );
	margin-bottom: 1em;
}

/* SP 06 */

#section6-sp {
	background-color: #eeece6;
	padding: 7% 0;
}

#section6-sp img {
	width: 100vw;
}


/* SP 07 */

#section7-sp {
	background-color: #fff;
	padding: 6% 0;
}
#section7-sp img {
	width: calc( 100vw - 2em );
}

/* SP bottom */

#sectionBtm-sp > div {
	width: 100%;
	background-image: url('/images/lp/creator/2507/sp_bottom_bg.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;
}

#sectionBtm-sp > div img {
	width: 45%;
	margin-top: 59%;
	margin-bottom: 4%;
}