@charset "UTF-8";

/* ////////// base ////////// */

html:focus-within {
	scroll-behavior: smooth;
}
html, body {
	margin: 0;
	padding: 0;
	font-feature-settings: "palt";
}
body {
	background-color: #e2dfd6;
	color: #000;
}
div,
p {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
div {
	background-repeat: no-repeat;
}
a,
a:hover,
a:active {
	color: #1b1464;
}
a > img {
	filter: drop-shadow( 0 2px 3px rgba( 0, 0, 0, .5 ) );
}
a:hover > img {
	cursor: pointer;
	filter: drop-shadow( 0 2px 3px rgba( 0, 0, 0, .5 ) ) brightness( 125% );
}
.fullPageScroll {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	scroll-snap-type: y mandatory;
	overflow-y: auto;
	overflow-x: hidden;
}

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

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

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


/* ////////// PC・MD common ////////// */

.md-section,
.pc-section {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	scroll-snap-align: start;
	background-size: cover;
	background-position: 50% 50%;
	display: flex;
	align-items: center;
}
.md-section > div {
	width: min( 62.5dvh, 100vw );
	margin: 0 auto;
}
.md-section > div {
	position: relative;
}
.pc-section > div {
	width: 100vw;
}
.pc-section > div:first-child > div {
	margin: 0 auto;
	position: relative;
	max-width: 1000px;
	max-height: 100dvh;
	aspect-ratio: 1280 / 900;
}
.pc-section > div > div p,
.md-section > div p {
	font-weight: 500;
	position: absolute;
}


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

#article-pc {
	width: 100%;
	max-width: 2000px;
	margin: 0 auto;
	box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
}
.pc-section1 {
	background-color: #f6f7f9;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec1.jpg');
}
.pc-section2 {
	background-color: #f4d5d7;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec2.jpg');
}
.pc-section3 {
	background-color: #c0ebff;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec3.jpg');
}
.pc-section4 {
	background-color: #fdef8d;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec4.jpg');
}
.pc-section5 {
	background-color: #e4e1ef;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec5.jpg');
}
.pc-section6 {
	background-color: #ffd6aa;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec6.jpg');
}
.pc-section7 {
	background-color: #cde9d0;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec7.jpg');
}
.pc-section8, 
.pc-section9 {
	background-color: #ffd9d9;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec8_9.jpg');
}
.pc-section10 {
	background-color: #afd4e6;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec10.jpg');
}
.pc-section11 {
	background-color: #f1e79b;
	background-image: url('../../../../images/lp/creator/6/bg_pc-sec11.jpg');
}
.pc-footlink {
	padding-right: 2em;
}

/* ////////// Mobile Device ////////// */

.md-section1 {
	background-color: #f6f7f9;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec1.jpg');
}
.md-section2 {
	background-color: #f4d5d7;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec2.jpg');
}
.md-section3 {
	background-color: #c0ebff;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec3.jpg');
}
.md-section4 {
	background-color: #fdef8d;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec4.jpg');
}
.md-section5 {
	background-color: #e4e1ef;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec5.jpg');
}
.md-section6 {
	background-color: #ffd6aa;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec6.jpg');
}
.md-section7 {
	background-color: #cde9d0;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec7.jpg');
}
.md-section8,
.md-section9 {
	background-color: #ffd9d9;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec8_9.jpg');
}
.md-section10 {
	background-color: #afd4e6;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec10.jpg');
}
.md-section11 {
	background-color: #f1e79b;
	background-image: url('../../../../images/lp/creator/6/bg_md-sec11.jpg');
}
.md-footer {
	background-color: #ffffff;
	height: auto;
}
.md-footer table {
	border-collapse: collapse;
	margin: 0 auto;
	font-size: 2.4vw;
	line-height: 2;
	text-align: left;
	white-space: nowrap;
}
.md-footer div:last-child {
	text-align: center;
	margin-top: 5.0vw;
	margin-bottom: 2.5vw;
	font-size: 2.3vw;
	color: #666;
}