@charset "UTF-8";

/* --------------------------------------
	global
-------------------------------------- */

	#baby_trial	img		{ width:100%; display:block; vertical-align:bottom; }
	#baby_trial a img	{ transition:opacity ease 0.3s;			}
	#baby_trial .pr		{ position:relative;					}
	#baby_trial .pa		{ position:absolute;					}
	#baby_trial .dn		{ display:none;							}
	#baby_trial .df		{ display:flex;							}
	#baby_trial .fww	{ flex-wrap:wrap;						}
	#baby_trial .jcc	{ justify-content:center;				}
	#baby_trial .jcsb	{ justify-content:space-between;		}
	#baby_trial .jcfs	{ justify-content:flex-start;			}
	#baby_trial .aic	{ align-items:center;					}
	#baby_trial .tc		{ text-align:center;					}
	#baby_trial .hac	{ left:50%; transform:translateX(-50%); }



/* ----------------------------------
	layout
---------------------------------- */

	body
	{
		scrollbar-width		:none; /*Firefox対応のスクロールバー非表示コード*/
		-ms-overflow-style	:none; /*Internet Explore対応のスクロールバー非表示コード*/
	}
	body::-webkit-scrollbar			{ display:none; /*Google Chrome、Safari、Microsoft Edge対応のスクロールバー非表示コード*/ }
	body							{ background:#fffcf4; }

	header							{ background:rgba(255,255,255,0.75); max-width:750px; width:100%; height:70px; position:fixed; left:calc(50% - 375px); top:0; padding:0 0 0 25px; z-index:999; }
	header h1						{ width:220px; }
	main							{ margin:0; }
	#baby_trial						{ max-width:750px; background:#fff; box-shadow:0px 0px 54px 0px rgb(0 0 0 / 30%); overflow-x:hidden; margin:auto; }
	footer							{ height:unset; margin:0 0 50px; }
	
	@media screen and (max-width:750px)
	{
		header						{ width:100vw; height:9.333vw; left:calc(50% - 50vw); padding:0 0 0 3.333vw; }
		header h1					{ width:29.333vw; }
		footer						{ height:unset; margin:0 0 0vw; }
	}



/* ----------------------------------
	bg
---------------------------------- */

	#baby_trial section.appeal3				{ background:url('../img/bg/appeal3.png')	0 0 / 100% no-repeat; }
	#baby_trial section.slide1				{ background:url('../img/slide/01-bg.png')	0 0 / 100% no-repeat; }


/* ----------------------------------
	decorations
---------------------------------- */

	/* bttns */
	#baby_trial .bttn						{ width:79.734%; cursor:pointer; }
	#baby_trial .bttn02						{ bottom: 4%; }

	/* accordion */
	#baby_trial .acc .trg::before,
	#baby_trial .acc .trg::after			{ transition:transform 0.5s; content:''; display:block; background:#756c67; width:2%; height:4%; position:absolute; right:14%; top:50%; }
	#baby_trial .acc .trg::after			{ transition:transform 0.5s; transform:rotate(90deg); }
	#baby_trial .acc .trg.active::after		{ transition:transform 0.5s; transform:rotate( 0deg); }

	/* coupon */
	#baby_trial .coupon_wrap					{ margin-top: 2%; }
	#baby_trial .coupon						{ cursor:pointer; }

	/* coupon 500off title */
	#baby_trial .coupon_500off_ttl			{ margin-top: 6%; }

	/* otoku accordion */
	#baby_trial .otoku-acc{    margin-bottom: 5%;}
	#baby_trial .otoku-acc__btn				{ width:100%; margin:4% auto 0; cursor:pointer; }
	#baby_trial .otoku-acc__btn::after
	{
		content:'';
		position:absolute;
		right: 8.7%;
		top: 52%;
		width:min(36px, 5.2vw);
		height:min(22px, 3.2vw);
		transform:translateY(-50%);
		background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none'%3E%3Cpath d='M4 4 L12 13 L20 4' stroke='%236c5f57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		transition:transform 0.3s ease;
	}
	#baby_trial .otoku-acc__btn.active::after	{ transform:translateY(-50%) rotate(180deg); }

/* ----------------------------------
   acc-wrap (クーポン使い方アコーディオン)
---------------------------------- */
#baby_trial .acc-wrap {
	background-color: #fff7dc;
}

#baby_trial .acc-wrap .acc {
	cursor: pointer;
}

#baby_trial .acc-wrap .acc::before,
#baby_trial .acc-wrap .acc::after {
	transition: transform 0.5s;
	content: '';
	display: block;
	background: #756c67;
	width: 3%;
	height: 4%;
	position: absolute;
	right: 10%;
	top: 50%;
}

#baby_trial .acc-wrap .acc::after {
	transition: transform 0.5s;
	transform: rotate(90deg);
}

#baby_trial .acc-wrap .acc.active::after {
	transition: transform 0.5s;
	transform: rotate(0deg);
}

/* ----------------------------------
   coupon-code link
---------------------------------- */
#baby_trial .coupon-code {
    cursor: pointer;
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-size: min(22px, 3.2vw);
    line-height: 1.2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-weight: bold;
    color: #746d67;
    white-space: nowrap;
    max-width: 100%;
}

#baby_trial .coupon-code-text {
    border-bottom: 1.5px solid #746d67;
}

#baby_trial .coupon-code::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: min(43px, 6vw);
    aspect-ratio: 101 / 110;
    background: url("../img/parts/pointer_icon.png") center center / 100% no-repeat;
    transform: translate(14%, 22%);
}

/* ----------------------------------
	baby_cassette
---------------------------------- */
.baby_cassette{
	background-color: #fff7dc;
	padding: 6% 0;
}

/* ----------------------------------
	slide, slick
---------------------------------- */

	.slide ul								{ width:100%; left:0%; padding-bottom: 13%;}
	.slide ul li							{ margin:0 15px; }
	.slide .slick-prev,
	.slide .slick-next						{ z-index:10; border-radius:50%; font-size:0; opacity:0.8; }
	.slide .slick-prev::before,
	.slide .slick-next::before				{ display:none; }
	.slide .slick-slide img					{ display:block; margin:auto; }
	.slide .slick-dots						{ display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start; list-style:none; }
	.slide .slick-dots li					{ background:#ffffff; width:20px; height:20px; border:solid 2px #ff9a37; border-radius:50%; }
	.slide .slick-dots li.slick-active		{ background:#ff9a37; }
	.slide .slick-dots li button			{ display:none; }

	.slide1 ul li.slick-slide				{ width:560px; }
	.slide1 .slick-prev						{ width:86px; height:86px; background:url(../img/slide/01-arrow-prev.png) center center / 100% no-repeat; left :8%; top:25%; }
	.slide1 .slick-next						{ width:86px; height:86px; background:url(../img/slide/01-arrow-next.png) center center / 100% no-repeat; right:8%; top:25%; }
	.slide1 .slick-dots						{ margin-top:30px; padding-bottom: 10%; }
	.slide1 .slick-dots li					{ border:solid 2px #f5bd48; }
	.slide1 .slick-dots li.slick-active		{ background:#f5bd48; }

	@media screen and (max-width:750px)
	{
		.slide ul li							{ margin:0 2.333vw; }
		.slide .slick-dots li					{ width:2.667vw; height:2.667vw; border:solid 0.267vw #ff9a37; }
		.slide1 ul li.slick-slide				{ width:72.333vw; }
		.slide1 .slick-prev						{ width:11.467vw; height:11.467vw; }
		.slide1 .slick-next						{ width:11.467vw; height:11.467vw; }
		.slide1 .slick-dots						{ margin-top:4vw; }
	}



/* ----------------------------------
	links
---------------------------------- */

	#baby_trial .links div								{ background:url('../img/links/bg.png') center top / 100% repeat-y; }
	#baby_trial .links div.branches						{ padding:0 0 75px; }
	#baby_trial .links div.branches ul					{ width:56.533%; margin:30px auto 0;}
	#baby_trial .links div.branches ul li				{ margin:0 0 30px; }
	#baby_trial .links div.branches ul li:nth-child(1)	{ width: 96.698%; }
	#baby_trial .links div.branches ul li:nth-child(2)	{ width: 34.434%; }
	#baby_trial .links div.branches ul li:nth-child(3)	{ width: 27.830%; }
	#baby_trial .links div.branches ul li:nth-child(4)	{ width:100%; margin-bottom:0; }
	#baby_trial .links div.branches ul li a				{ font-size:32px; color:#649ed5; text-decoration:underline; margin:0 0 30px; }
	#baby_trial .links div.tel							{ 					padding:0 0 75px; }
	#baby_trial .links div.tel .number					{ width:65.334%;						margin:40px auto 30px; }
	#baby_trial .links div.tel .txt						{ font-size:24px; }
	#baby_trial .links div.sns ul:nth-of-type(1)		{ width:69.6%;		padding:40px 0;		margin:0 auto; }
	#baby_trial .links div.sns ul:nth-of-type(2)		{ width:50.0%;							margin:0 auto; }
	#baby_trial .links div.sns ul:nth-of-type(1) li		{ width:47.893%; }
	#baby_trial .links div.sns ul:nth-of-type(2) li		{ width:24.268%; }
	#baby_trial footer .logo							{ width:46.668%;	padding:50px 0;		margin:0 26.5%; }
	#baby_trial footer small							{ font-size:20px; }

	@media screen and (max-width:750px)
	{
		#baby_trial .links div.branches					{ padding:0 0 10vw; }
		#baby_trial .links div.branches ul				{ margin:4vw auto 0;}
		#baby_trial .links div.branches ul li			{ margin:0 0 4vw; }
		#baby_trial .links div.branches ul li a			{ font-size:4.267vw; margin:0 0 4vw; }
		#baby_trial .links div.tel						{ padding:0 0 10vw; }
		#baby_trial .links div.tel .number				{ margin:5.333vw auto 4vw; }
		#baby_trial .links div.tel .txt					{ font-size:3.2vw; }
		#baby_trial .links div.sns ul:nth-of-type(1)	{ padding:5.333vw 0; }
		#baby_trial footer .logo						{ padding:6.667vw 0; }
		#baby_trial footer small						{ font-size:2.667vw; }	
	}