@charset "utf-8";

/* ----------------------------------- */
/* アクビこどもせきどめシロップLP用CSS */
/* ----------------------------------- */
/* Modified 2024/11/23 11:20 */

/* ―――――― */
/* ■全体の装飾 */
/* ―――――― */
:root {
	font-size: 16px;
	scroll-behavior: smooth;

	--theme-color:	#ffffff;		/* ベースカラー */
	--yellow-base:	#fff7c3;		/* 背景黄色 */
	--green-base:	#d2f97d;		/* 背景黄緑 */
	--hotpink-base:	#f294d8;		/* 背景ピンク(濃) */
	--ligpink-base:	#f2e0e9;		/* 背景ピンク(薄) */
	--blue-base:	#70b8de;		/* 背景青色 */
	--blue-text:	#00b7ee;		/* 文字青色 */
	--green-text:	#87c11f;		/* 文字緑色 */

	--design80pt:	5rem;			/* Design調整80pt */
	--design55pt:	3.4375rem;		/* Design調整55pt */
	--design50pt:	3.125rem;		/* Design調整50pt */
	--design36pt:	2.25rem;		/* Design調整36pt */
	--design34pt:	2.125rem;		/* Design調整34pt */
	--design32pt:	2rem;			/* Design調整32pt */
	--design28pt:	1.75rem;		/* Design調整28pt */
	--design27pt:	1.6875rem;		/* Design調整27pt */

	--standard-weight:	500;
	--bold-weight:	600;
	--extrabold-weight:	800;

	--drawer-backcolor: #0471AD;		/* ドロワーメニューの背景色 */
	--drawer-linkcolor: white;			/* ドロワーメニュー項目の文字色 */
	--hamburger-bar-open-color: #fff;		/* ハンバーガーボタン平時の線色(ドロワーを開くボタンの線色) */
	--hamburger-bar-close-color: #fff;		/* ハンバーガーボタン開時の線色(ドロワーを閉じるボタンの線色) */
	--hamburger-label-textcolor: white;		/* ハンバーガーボタンのラベル文字色 */
	--hamburger-button-color: black;		/* ハンバーガーボタンのボタン色(背景色) */
}
body {
	margin: 0;
	padding: 0;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: var(--standard-weight);
	font-style: normal;
	background-color: #08C5FF;
	line-height: 1.5;
}

h1,h2,h3,h4,h5,h6,p {
	margin: 0;
	padding: 0;
	font-size: 1rem;
}

a:hover {
	opacity: 0.5;
}

i { display:inline-block; font-style:normal; }

/* ―――――― */
/* ■レイアウト */
/* ―――――― */
.landingPageCover {
	margin: 0 auto;
	padding: 0;
	max-width: 750px;
	background-color: var(--theme-color)
}

.oneSection {
	background-color: white;
	margin: 0;
	margin-bottom: 2em;
	margin-top: 4rem;
	
}

.oneSection:first-of-type {
	margin-top: 0;
}

/* ---------------- */
/* セクション別装飾 */
/* ---------------- */
.section1 { 
	background-color: var(--theme-color)
}

.section2 {
	background-color: var(--theme-color);
	position: relative;
	margin-bottom: -5rem;
	padding: 0;
}
	.heartsTitle.overTitleBox {
	position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		position: relative;
		top: 1rem;
		margin-bottom: 0;
	}

.section3 {
	padding: 10rem 0 3rem;
	background-color: var(--theme-color);
}

.section4 {
	background: linear-gradient(var(--yellow-base), var(--yellow-base) 24%, var(--green-base) 25%, var(--green-base) 49%, var(--hotpink-base) 50%, var(--hotpink-base) 74%, var(--ligpink-base) 75%, var(--ligpink-base));
}

.section5 {
	background-color: var(--ligpink-base);
}

.section6 {
	background: linear-gradient(var(--ligpink-base), var(--ligpink-base) 49%, var(--blue-base) 51%, var(--blue-base));
}

.section7 {
	padding: 6rem 0 1px;
	background-color: var(--blue-base);
}

.section8 {
	background: linear-gradient(var(--blue-base), var(--blue-base) 50%, white);
}
.section9 { }

.section10 { }

.section11 {
	background-color: black;
	padding-bottom:  3rem;
}

.section12 {
	background-color: black;
	padding-top: 3rem;

}

/* ――――― */
/* ■タイトル */
/* ――――― */
.heartsTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: var(--standard-weight);
	line-height: 1;
	/*margin: 0 0rem 0rem 2rem;*/

	background-image: url("./img/img_-title.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
	min-height: 6.5rem;
}
.heartsTitle .en {
	/*font-family: "Palatino Linotype", "Book Antiqua", Palatino, "serif";*/
	font-weight: var(--standard-weight);
	font-style: normal;
	font-size: var(--design80pt);
	text-align: center;
}
.heartsTitle .jp {
	font-size: var(--design36pt);
	color: var(--blue-text);
	/*margin-top: 0.1em;*/
}

	/* 掲載位置による調整 */
	.section10 .heartsTitle { margin-bottom: 2.5rem; }
	.section10 .heartsTitle .en { line-height: 0.8; }
	.section10 .heartsTitle .en .line1 { font-size: var(--design55pt); }
	.section10 .heartsTitle .en .line2 { font-size: var(--design50pt); }
	.section10 .heartsTitle .jp { padding-top: 0.5rem; }

.subTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: var(--standard-weight);
	line-height: 1;
	margin: 1rem 2rem 1rem 2rem;
	padding-top: 3rem;
	
}

.subTitle .sub {
	text-align: center;
	font-size: var(--design36pt);
	color: var(--theme-color);
}

/* ――――― */
/* ■画像調整 */
/* ――――― */
.autoResize {
	max-width: 100%;
	width: 100%;
	height: auto;
}
.contentImg {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
	height: auto;
}

/* ――――― */
/* ■本文など */
/* ――――― */

/*グリーンボタン*/
	.btn_box {
		text-align: center;
		margin: 4em auto 2em auto;
		padding: 2em auto 4em auto;

	}
		.btn_box p {
			margin-top: 10px;
			margin-bottom: 0px;
			color: #F84800;
		}
		.btn_box a {
			text-decoration: none;
			color: #FFF;
		
		}

	.btn_green{
		background: darkgreen; 
		box-shadow: 0 5px 0 #000000; 
		border-radius: 50vh; 
		padding: 1em 2em 0.8em; 
		line-height:1.5; 
		display: inline-block;
		font-size: 1.4em;
		border: #00CCFF;
 		width: 70%;
 	
		}

	/* ---------------- */
	/* 賞品リスト上下線 */
	.heartsLine {
		margin: 0;
		padding: 0 2rem;
		font-size: 0.67rem;
		text-align: center;
	}
	.heartsLine.topLine		{ padding-top: 1.5rem; padding-bottom: 1.75rem; }
	.heartsLine.bottomLine	{ padding-top: 2rem; }

	/* ---------- */
	/* 賞品リスト */
	.prizeList {
		margin: 3rem 2.25rem 3rem;
		padding: 0;
		list-style-type: none;
	}
		.prize {
			font-size: 2.5rem;
			font-weight: var(--extrabold-weight);

		}
		.prize1 { color: #000000; text-align: center;}
		.prize2 { color: var(--blue-text); }
		.prize3 { color: var(--green-text); }
			.prizeDetails {
				margin: 0;
				padding: 1rem  0 1rem 1.5rem;
				font-size: var(--design32pt);
				font-weight: var(--standard-weight);
				color: black;
				list-style-type: none;
				text-align: left;
			}

	/* -------------- */
	/* お申込みエリア */
	/* -------------- */
	.application {
		margin: 0 3rem 0 3rem;
		font-size: var(--design28pt);
	}
		.applicationist {
			list-style-type: none;
			margin: 2rem 0 0 0;
			padding: 0;
			font-weight: var(--extrabold-weight);
			line-height: 1.67;
		}
			.applicationList .date { color: var(--theme-color); }

		.deliveryAnnounce {
			margin: 1.75rem 3rem 1rem 0;
			line-height: 1.25;
			font-size: var(--design28pt);
		}


	/* ---------------------------------- */
	/* キャラクターデザイナープロフィール */
	.personArea {
		margin: 0;
		padding: 0 0 1px 0;
	}
		.profileHeadBox {
			display: flex;
			margin: 0;
			padding: 3rem 2rem 2rem;
		}
			.profileHeadL {
				flex: 1;
				color: var(--theme-color);
				font-size: var(--design34pt);
				font-weight: bold;
				line-height: 1;
			}
			.profileHeadR {
				min-width: 40%;
				background-image: url("./img/suzuka-deco-line1.png");
				background-size: cover;
			}

		.profilePhotoBox {
			margin: 0;
			padding: 3rem 27.5%;
		}
			.profilePhoto {
				max-width: 100%;
				height: auto;
			}

		.personNameBox {
			display: flex;
			margin: 0;
			padding: 2rem 2.75rem;
			font-size: 1.75rem;
			font-weight: bold;
			gap: 1em;
		}
			.pTitle {
				color: var(--theme-color);
			}
			.pName {
			}

		.personHistory {
			margin: 0;
			padding: 0 2rem 0 2.75rem;
			font-size: var(--design27pt);
			line-height: 1.5;
		}

		.personLinkBox {
			margin: 0;
			padding: 3rem 4.5rem;
			list-style-type: none;
		}
			.personLinkBox a {
				display: block;
				font-size: 1.75rem;
				color: var(--theme-color);
				font-weight: bold;
				text-decoration: none;
				width: 19em;

				background-image: url("./img/chevron-right-solid.svg");
				background-repeat: no-repeat;
				background-position: right center;
				background-size: 1rem;
			}
				.personLinkBox a span {
					color: black;
				}
				.instaIcon {
					vertical-align: -3px;
				}

		.profileBelt {
			background-image: url("./img/suzuka-deco-line1.png");
			background-size: cover;
			font-size: 1.75rem;
			margin: 2rem;
			padding: 0;
		}

	/* ---------------- */
	/* 応募ステップ説明 */
	.oneStep {
		padding: 2rem 2rem;
		text-align: center;
	}
	.oneStep.firstStep {
		padding-top: 6rem;
	}
		.stepTitle { }
			.stepTitleImage {
				max-width: 100%;
				height: auto;
			}

		.stepGuide {
			margin: 3rem 1rem 0;
			font-weight: var(--standard-weight);
			font-size: var(--design32pt);
			
		}
		.stepGuide span{
			font-weight: var(--bold-weight);
			font-size: var(--design34pt);
			color: var(--theme-color);
			
		}
			.siroopLogo {
				max-width: 100%;
				width: 90%;
				height: auto;
			}
			
			.contactGuide {
				color: #FFFFFF;
				text-align: center;
			}
				.contactGuide a {
					color: #FFFFFF;
					text-decoration: none;
				}

		.officialAccountGuide {
			margin: 0 0 3rem 0;
			color: var(--theme-color);
		}
　　　　
		.section8 .stepGuide { margin-left: 0.75rem; margin-right: 0.75rem; }

	.encouragePost {
		margin: 0;
		padding: 0rem 0 0rem;
	}

	/* ------------------- */
	/* SNSリンクアイコン枠 */
	.linkIcons {
		margin: 0;
		padding: 1rem;
		list-style-type: none;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		gap: 1rem;
	}
		.linkIcons a {
			display: block;
			border-radius: 50%;
			text-decoration: none;
			text-align: center;
		}
			.linkIcons a img {
				display: block;
				border-radius: 50%;
				border: 10px solid var(--theme-color);
				box-sizing: border-box;
				max-width: 250px;
				width: 100%;
				height: auto;
			}

	/* -------------- */
	/* フレーム掲載枠 */
	.oneFrame {
		margin: 0;
		padding: 5rem 0 1rem;
	}
		.frameTitle {
			margin: 0;
			padding: 0 0 2rem 0;
		}
			.frameTitleImage {
				max-width: 100%;
				height: auto;
			}
		.frameBox { }
			.frameImage {
				max-width: 100%;
				height: auto;
			}
		.photoBtnBox {
			margin: 0;
			padding: 2rem 0 0 0;
		}
			.photoBtn { }

	/* ---------------------- */
	/* フッタコンテストロゴ枠 */
	.footContestLogoBox {
		margin: 0;
		/*padding: 3rem 0;*/
	}

	/* -------------- */
	/* 会社ロゴ掲載枠 */
	.companyBox {
		text-align: center;
		padding: 5rem 0;
	}
		.companyLogo {
			width: auto;
			height: 110px;
		}


/* ――――― */
/* ■表組周り */
/* ――――― */
/* 背景追加枠 */
	.BkBox {
		margin: 0;
		padding: 0;
	}

.appreqTableCover {
	margin: 0;
	padding: 0 1rem 6rem;
}
	.appreqTable  {
		border-collapse: collapse;
		border: 1px solid #B6B6B7;
	}
		.appreqTable th {
			background-color: var(--ligpink-base);
			font-weight: var(--standard-weight);
			line-height: 1.25;
			text-align: left;
		}
		.appreqTable th,
		.appreqTable td {
			border-bottom: 1px solid #B6B6B7;
			padding: 0.75rem;
		}

			.appreqTable td ul,
			.appreqTable td ol {
				margin: 0;
				padding: 0 0.25rem 0 1.6rem;
				text-align: justify;
			}

/* ――――― */
/* ■サブタイトルフォント */
/* ――――― */

.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}


/* ----------------------------------- */
/* ▼ドロワーメニュー(PC/モバイル兼用) */
/* ----------------------------------- */
.drawerMenu * {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	font: inherit;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: left;
	text-decoration: none;
	list-style: none;
}

	/* ▼ドロワーボタンの表示と動作 */
	.drawerMenu .drawerBg {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0.5);		/* ドロワーが開いているときにページ全体にかぶせる覆い */
		display: none;
		top: 0;
		left: 0;
	}
	.drawerMenu .drawerBtn {
		display: block;
		background: none;
		border: none;
		width: 31px;
		height: 31px;
		letter-spacing: 0.1em;
		cursor: pointer;
		position: fixed;
		top: 15px;		/* ボタンの配置(上) */
		right: 8px;		/* ボタンの配置(右) */
		z-index: 1001;
		text-align: center;
		outline: none;
		border-radius: 50%;
		background-color: var(--hamburger-button-color);	/* 3本線枠の背景色 */
		padding: 10px 15px 20px 15px;						/* 3本線周囲の余白量：上下と左右で合計サイズを合わせると正円になる */
		box-sizing: content-box;
	}
	/* ▽ドロワーが開いている状態でのドロワーボタン */
	.drawerMenu .drawerBtn.active {
		padding: 10px 10px 20px 20px;		/* クロスする場合の3本線周囲の余白量 */
		background-color: var(--hamburger-button-color);
	}
	.drawerMenu .drawerBtn.active .drawerBar {	width: 23px; transform-origin: left center; }	/* 3本線がクロスする場合の長さ */
	.drawerMenu .drawerBtn.active .drawerBar1 {	transform: rotate(45deg); }
	.drawerMenu .drawerBtn.active .drawerBar2 {	opacity: 0;	}
	.drawerMenu .drawerBtn.active .drawerBar3 {	transform: rotate(-45deg); }
	.drawerMenu .drawerBtn.active .drawerLabelMenu {	display: none;	}
	.drawerMenu .drawerBtn.active .drawerLabelClose {	display: block;	}
	.drawerMenu .drawerBar {
		display: block;
		height: 3px;			/* 3本線の太さ */
		margin: 5px 2px;		/* 3本線の「上下間隔」と「横の長さ」 */
		transition: all 0.2s;
		transform-origin: 0 0;
	}

	/* ▼ドロワーボタンの色 */
	.drawerMenu .drawerBtn { color: var(--hamburger-label-textcolor); } /* 3本線下部のラベル文字色 */
	.drawerMenu .drawerBtn .drawerBar { background-color: var(--hamburger-bar-open-color); } 			/* 3本線の色:平時 */
	.drawerMenu .drawerBtn.active .drawerBar { background-color: var(--hamburger-bar-close-color); }	/* 3本線の色:開時 */

	/* ▼ドロワーボタン下のラベル */
	.drawerMenu .drawerText {
		text-align: center;
		font-size: 10px;
	}
	.drawerMenu .drawerLabelClose {
		letter-spacing: 0.08em;
		display: none;
		margin-left: -6px;
	}
	.drawerMenu .drawerLabelMenu {
		display: block;
	}

	/* ▼ドロワーメニュー本体(ラッパー) */
	.drawerMenu .drawerNaviWrapper {
		background-color: var(--drawer-backcolor);		/* 重なるメニューの背景色 */
		background-image: none;							/* 重なるメニューの背景画像 */
		width: 310px;									/* 重なるメニューの横幅(※変更する場合はtransformの値も変える：＋12pxくらいの値に) */
		height: 100%;
		transition: all 0.2s;
		transform: translate(322px, 0);				/* 初期状態では、画面外に移動させておく： (0, -100%) なら上から下へ現れる */
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1000;	/* 最前面表示 */
	}
	.drawerMenu .drawerNaviWrapper.open {
		transform: translate(0);					/* openクラスが付加されたら、元の位置に戻す */
	}

	/* ドロワーメニュー本体のスクロールベース */
	.drawerScrollBase {
		max-height: 100%;
		overflow: auto;
		box-sizing: border-box;
	}

	/* ▼ドロワーメニュー本体 */
	.drawerMenu .drawerNaviList {
		padding: 72px 6px 150px;				/* メニューの動的な表示開始位置を調整する際は、padding-topの値を変更する。スクロールのために下端に余分に空間を確保する。 */

		padding-left: 32px;
	}

	.drawerMenu .drawerNaviList li {
		list-style-type: '-' !important;
		font-size: 24px;
	}

	/* ▼ドロワーメニュー(リンク)項目 */
	.drawerMenu a.drawerLink {
		color: inherit;
		text-decoration: none;
		display: block;
		margin: 10px 0;
		padding: 8px 18px;
		border-radius: 0.5em;
		font-weight: 500;
		font-size: 24px;
		line-height: 1.25;
	}
	.drawerMenu a.drawerLink {
		color: var(--drawer-linkcolor);
		background-color: var(--drawer-backcolor);
	}
	.drawerMenu a.drawerLink:hover {
		background-color: navy;
		color: var(--theme-color);
		opacity:1;
	}

	/* ▼ドロワーメニュー項目：アイコンリンク */
	.drawerMenu .iconLinkItems {
		text-align: left;
		margin: 50px 0 0 18px;
	}
		.iconLinkList {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			gap: 20px;
			align-items:center;
			justify-content:start;
			width: fit-content;
		}
			.iconLinkItems img {
				display: block;
				height: 42px;
				width: auto;
			}

	/* ▼ドロワーメニュー項目：長ボタンリンク */
	.wideBtnLinkItems {
		padding: 30px 0 0;
		text-align: center;
	}
		.wideBtnLinkItems a.btn {
			display: block;
			width: 100%;
			margin: 0;
			padding: 0.25em 1.5em;
			border-radius: 0.65em;
			box-sizing: border-box;
			text-align: center;
			font-size: 1.1rem;
		}
			.wideBtnLinkItems a .iconInBtn {
				margin-right: 0.75em;
			}

	/* ▼ドロワーメニュー項目：問診ボタンリンク */
	.monshinBtnLinkItems {
		padding: 16px;
	}
		.monshinBtn {
			display: flex;
			align-items:center; justify-content:center;
			line-height: 1;
			font-size: 1rem;
			height: 50px;
			max-width: 10rem;
			margin: 0 0 0.5rem 0;
			padding: 0.25rem 1.5rem;
			border: 3px solid #a2d1d9;
			color: white;
			border-radius: 0.65rem;
			box-sizing: border-box;
			text-align: center;
		}

	/* ▼ドロワーメニュー内部上端のロゴ */
	.logoOnMenu {
		margin: 0;
		padding: 0px 6px;

		background-color: white;
	}
		.drawerMenu .logoOnMenu a {
			display: flex;
			align-items:center;
			justify-content:flex-start;

			background-color: white;
		}
			.drawerMenu .logoOnMenu a {
				margin: 0;
				padding: 14px 0 14px 8px;
			}
			.drawerMenu .logoOnMenu .drawerUsagi {
				width: auto;
				height: 50px;
			}
			.drawerMenu .logoOnMenu .drawerLogo {
				width: auto;
				height: 34px;
			}
		.drawerMenu .logoOnMenu a:hover {
			/* 反転表示を適用せず、半透明にする */
			opacity: 0.5;
			background-color: transparent;
		}
		.drawerMenu .logoOnMenu img {
			width: 100px;
			height: auto;
		}

/* ============== */
/* ■PC向けの調整 */
/* ============== */
@media all and (min-width: 600px) {

	.sp-only { display: none; }

	/* Windows環境で日本語Webフォントのシャギーを防ぐ */
	tr span {
		display: inline-block;
	}
	li, tr span {
		transform: rotate(0.03deg);
	}

}

/* ================== */
/* ■Mobile向けの調整 */
/* ================== */
@media (max-width: 599px) {

	:root {
		font-size: 8px;
	}

			.linkIcons a img {
				border-width: 7.5px;
				max-width: 155px;
			}

	.appreqTable {
		font-size: 16px;
	}
		.appreqTable th {
			min-width: 40px;
		}
			.appreqTable td ul,
			.appreqTable td ol {
				padding-left: 3.2rem;
			}

}