@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Nunito:600');

/* □□□□□□□□□□□□□□□□□□□□□□□□
BabyHug Topページ
□□□□□□□□□□□□□□□□□□□□□□□□□ */
#features.explanation,
#shopping.lineup-section{
	padding:50px 0;
}
#product-odekakemypiillob{ /* おでかけ用 */
	margin-bottom:100px;
}


/* ------------------------------------------------------
コンセプト
--------------------------------------------------------*/
#concept{
	height:100%;
	padding:400px 0 20px;
	background:#FFF url(/baby-hug/images/top/img_concept.webp) no-repeat 55% center / cover;
}
.concept-content{
	margin:0 auto;
	padding-bottom:10px;
	overflow:hidden;
	text-align:center;
}
.concept-content #brand-title{
}
.concept-content #brand-title p{
	line-height:1.2;
}
.concept-content #brand-title span{
	display:inline-block;
	font-family:'M PLUS Rounded 1c', 'Lucida Grande', Meiryo, "メイリオ", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
}
.concept-content #brand-title .brand-name{
	margin-bottom:-30px;
}
.concept-content #brand-title .brand-name span{
	color:rgba(255,255,255,0.7);
	font-family: 'Nunito', sans-serif;
	font-size:13rem;
	letter-spacing:-.05em;
}
.concept-content #brand-title .brand-ruby{
	margin-bottom:30px;
}
.concept-content #brand-title .brand-ruby span{
	padding-left:.5em;
	color:rgba(255,255,255,1);
	font-size:2.4rem;
	font-weight:bold;
	letter-spacing:2em;
	text-shadow:
		1px 1px 1px rgba(107,142,35,0.1), /* オリーブドラブ */
		1px -1px 1px rgba(107,142,35,0.1), /* オリーブドラブ */
		-1px 1px 1px rgba(107,142,35,0.1), /* オリーブドラブ */
		-1px -1px 1px rgba(107,142,35,0.1), /* オリーブドラブ */
		2px 2px 2px rgba(0,0,0,0.1);
}
.concept-content #brand-title .brand-slogan{
	margin-bottom:20px;
}
.concept-content #brand-title .brand-slogan span{
	padding:.3em 1.5em;
	background:rgba(255,255,255,0.6);
	border:1px solid rgba(255,255,255,1);
	border-radius:1.5em;
	color:#6B8E23; /* オリーブドラブ */
	font-size:2rem;
	font-weight:bold;
	letter-spacing:.2em;
	text-shadow:1px 1px 3px rgba(255,255,255,1);
}
.concept-content #brand-title .by-aoba{
	margin-bottom:30px;
}
.concept-content #brand-title .by-aoba span{
	color:rgba(255,255,255,0.8);
	font-family: 'Nunito', sans-serif;
	font-size:3rem;
	text-shadow:
		1px 1px 1px rgba(107,142,35,0.1), /* オリーブドラブ */
		1px -1px 1px rgba(107,142,35,0.1), /* オリーブドラブ */
		-1px 1px 1px rgba(107,142,35,0.1), /* オリーブドラブ */
		-1px -1px 1px rgba(107,142,35,0.1), /* オリーブドラブ */
		2px 2px 2px rgba(0,0,0,0.1);
}
.concept-content h1{
	margin-bottom:10px;
	color:#838D3B; /* ムス */
	font-size:3rem;
	font-weight:bold;
	letter-spacing:-1px;
	text-shadow:
		1px 1px 1px rgba(255,255,255,1),
		1px -1px 1px rgba(255,255,255,1),
		-1px 1px 1px rgba(255,255,255,1),
		-1px -1px 1px rgba(255,255,255,1),
		3px 3px 3px rgba(0,0,0,0.15);
}
.concept-content h1 span{
	display:inline-block;
	padding-right:10px;
}
@media only screen and (max-width:680px){
	.concept-content #brand-title .brand-name span{
		font-size:11rem;
	}
	.concept-content #brand-title .brand-name{
		margin-bottom:-20px;
	}
	.concept-content #brand-title .brand-ruby{
		margin-bottom:20px;
	}
	.concept-content #brand-title .brand-ruby span{
		font-size:2rem;
	}
	.concept-content #brand-title .by-aoba span{
		font-size:2.4rem;
	}
}
@media only screen and (max-width:590px){
	.concept-content #brand-title .brand-name span{
		font-size:9rem;
	}
	.concept-content #brand-title .brand-slogan span{
		font-size:1.8rem;
	}
}
@media only screen and (max-width:480px){
	.concept-content #brand-title .brand-name span{
		font-size:8rem;
	}
	.concept-content #brand-title .brand-name{
		margin-bottom:-10px;
	}
	.concept-content #brand-title .brand-ruby{
		margin-bottom:10px;
	}
	.concept-content #brand-title .brand-ruby span{
		font-size:1.8rem;
	}
	.concept-content #brand-title .brand-slogan{
		margin-bottom:10px;
	}
	.concept-content #brand-title .by-aoba span{
		font-size:2rem;
	}
	.concept-content h1 span{
		font-size:2.6rem;
	}
}
@media only screen and (max-width:450px){
	.concept-content #brand-title .brand-name{
		margin-bottom:-85px;
	}
	.concept-content #brand-title .brand-name span{
		font-size:10rem;
		text-align:left;
		line-height:.83;
	}
	.concept-content #brand-title .brand-ruby{
		margin-bottom:90px;
	}
	.concept-content #brand-title .brand-ruby span{
		padding-left:1.8em;
		letter-spacing:.3em;
	}
}
@media only screen and (max-width:410px){
	.concept-content h1{
		font-size:2.6rem;
	}
}
@media only screen and (min-width:451px){
	.concept-content #brand-title .brand-name span br,
	.concept-content #brand-title .brand-slogan br{
		display:none;
	}
}
@media only screen and (min-width:768px){
	#concept{
		padding:250px 0 50px;
	}
	.concept-content{
		width:100%;
		padding:370px 0 50px;
		overflow:hidden;
	}
	.concept-content h1{
		margin-bottom:20px;
		font-size:3.4rem;
		text-shadow:
			1px 1px 1px rgba(255,255,255,1),
			1px -1px 1px rgba(255,255,255,1),
			-1px 1px 1px rgba(255,255,255,1),
			-1px -1px 1px rgba(255,255,255,1),
			3px 3px 3px rgba(0,0,0,0.3);
	}
}
@media only screen and (min-width:992px){
	#concept{
		padding:230px 0 20px;
	}
	.concept-content #brand-title .brand-name span{
		font-size:15rem;
	}
}


/*  --------------------------------------------------
ベビハグ製品のこだわり
-----------------------------------------------------*/
/*#features{
	background:#FCFAF2;  白練 
}*/
#features.explanation{
	position:relative;
	padding-bottom:30px;
}
#features.explanation .explanation-center img{ /* こだわり */
	filter:drop-shadow(3px 3px 6px rgba(0, 0, 0, 0));
}
#features.explanation #madein-japan.explanation-inner img, /* 日本製 */
#features.explanation #material-sewing.explanation-inner img{ /* 素材と縫製 */
	height:110px;
}
@media only screen and (max-width:991px){
	#features.explanation .container > p{
		margin-bottom:0;
	}
	#features.explanation .container > h1 + p{
	}
	#features.explanation .explanation-center{ /* こだわり */
		margin-bottom:30%;
		position:absolute;
		left:0;
	}
	#features.explanation .explanation-left{ /* こだわり */
		margin-top:55%;
	}
	#features.explanation .explanation-center > p img{
		padding:10px 0;
	}
}
@media only screen and (max-width:860px){
	#features.explanation .explanation-left{ /* こだわり */
		margin-top:50%;
	}
}
@media only screen and (max-width:767px){
	#features.explanation .explanation-left{ /* こだわり */
		margin-top:45%;
	}
}
@media only screen and (max-width:630px){
	#features.explanation .explanation-left{ /* こだわり */
		margin-top:50%;
	}
}
@media only screen and (max-width:390px){
	#features.explanation .explanation-left{ /* こだわり */
		margin-top:53%;
	}
}
@media only screen and (min-width:992px){
	#features.explanation{
		padding-bottom:150px;
	}
	#features.explanation .explanation-inner{ /* こだわり */
		background:rgba(255, 255, 255, 0.7);
		position:relative;
	}
	#features.explanation #madein-japan.explanation-inner{ /* 日本製 */
		top:-170px;
		left:-30px;
	}
	#features.explanation #sleeping-soundly.explanation-inner{ /* スヤスヤ */
		bottom:-100px;
		right:-70%;
	}
	#features.explanation #material-sewing.explanation-inner{ /* 素材と縫製 */
		top:-200px;
		right:-30px;
	}
	#features.explanation #washing-cleaning.explanation-inner{ /* 洗濯で清潔 */
		bottom:-60px;
		left:-100%;
	}
	#features.explanation .explanation-left,
	#features.explanation .explanation-right{
		top:200px;
	}
	#features.explanation .explanation-center img{
		max-width:100%;
		padding-top:100px; /* 寝床 */
		padding-top:30px; /* こだわり */
	}
}
@media only screen and (min-width:1200px){
	#features.explanation{
		padding-bottom:30px;
	}
	#features.explanation #madein-japan.explanation-inner{ /* 日本製 */
		left:0; /* こだわり */
	}
	#features.explanation #sleeping-soundly.explanation-inner{ /* スヤスヤ */
		bottom:-30px; /* こだわり */
	}
	#features.explanation #material-sewing.explanation-inner{ /* 素材と縫製 */
		right:0; /* こだわり */
	}
	#features.explanation #washing-cleaning.explanation-inner{ /* 洗濯で清潔 */
		bottom:-20px; /* こだわり */
	}
	#features.explanation .explanation-left,
	#features.explanation .explanation-right{
		top:230px;
	}
	#features.explanation .explanation-center img{
		max-width:80%;
		padding-top:20px;
	}
}


/*-------------------------------------------------------
各製品の特長
--------------------------------------------------------*/
#product-features{
}
#product-features.split-explanation{
	padding:0;
}
#product-features .split-explanation1,
#product-features .split-explanation2{
	padding:50px 20px;
}
#product-features .split-explanation1{
	background:#FFF;
}
#product-features .split-explanation2{
	background:#FCFAF2; /* 白練 */
}
#product-features .split-image{
	padding:0;
}
#product-features .split-image img{
	padding:0 20px;
	border:none;
	border-radius:0;
	-webkit-filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
}
#product-features .split-content{
	padding:20px 0;
}
#product-features .split-content h1{
	margin-bottom:20px;
	font-size:1.8rem;
}
#product-features .split-content p,
#product-features .split-content ul,
#product-features .split-content ol{
	font-size:1.6rem;
}
#product-features .split-content ul{
	list-style-type:none;
	color:#417038; /* スピナッチグリーン */
}
#product-features .split-content ul li{
	padding-left:1.2em;
	text-indent:-1em;
}
#product-features .split-content ul li a::before{
	font-family:FontAwesome;
	padding-right:.2em;
	content:"\f138";
}
#product-features .split-content .to-aoba{
	margin-top:30px;
	margin-left:-0.5em;
}
#product-nedoko .split-image img{ /* 天使の寝床 */
	padding:0 4%;
}
#product-ohina .split-image img{ /* おひなまき */
	padding:5% 5% 0;
}
#product-mypiillo .split-image img{ /* マイピーロ */
	padding:0 5%;
}
#product-ohinamaki-box .split-image img{ /* 草木染おひなまきBOX */
	padding:5% 5% 0;
}
#product-mukiguse .split-image img{ /* 向きぐせ防止クッション */
	padding:1% 5% 0 3%;
}
#product-pillow .split-image img{ /* 快眠枕 */
	padding:0 10% 0 5%;
}
#product-jyunyu .split-image img{ /* 授乳用クッション */
	padding:3% 7% 5%;
}
#product-oppai .split-image img{ /* おっぱいクッション */
	padding:0 13% 0 7%;
}
#product-odekakemypiillob .split-image img{ /* おでかけ用 */
	padding:0 5%;
}
/*@media only screen and (min-width:768px){
	#product-features.split-explanation{
		padding:0;
	}
}*/
@media only screen and (min-width:992px){
	#product-features .split-image img{
		padding:0 20px;
	}
	#product-features .split-content{
		padding:50px 20px;
	}
	#product-nedoko .split-image img{ /* 天使の寝床 */
		padding:0 7%;
	}
	#product-ohina .split-image img{ /* おひなまき */
		padding:5% 7% 0;
	}
	#product-mypiillo .split-image img{ /* マイピーロ */
		padding:17% 5% 0;
	}
	#product-ohinamaki-box .split-image img{ /* 草木染おひなまきBOX */
		padding:10% 7% 0;
	}
	#product-mukiguse .split-image img{ /* 向きぐせ防止クッション */
		padding:5% 6% 0;
	}
	#product-pillow .split-image img{ /* 快眠枕 */
		padding:0 10% 0 5%;
	}
	#product-jyunyu .split-image img{ /* 授乳用クッション */
		padding:3% 7% 0 10%;
	}
	#product-oppai .split-image img{ /* おっぱいクッション */
		padding:0 10%;
	}
	#product-odekakemypiillob .split-image img{ /* おでかけ用 */
		padding:0 7%;
	}
}


/*  --------------------------------------------------
まるまるねんね
-----------------------------------------------------*/
#baby-section{
	background:#FCFAF2; /* 白練 */
}
#for-baby{ /* 赤ちゃんのために */
	background:url(/baby-hug/images/baby/img_baby_mother_hand.webp) no-repeat center top / cover;
}
#bedding-baby{ /* 昔の赤ちゃんの育ち方 */
	background:url(/baby-hug/images/baby/img_happy_baby_bed.webp) no-repeat center top / cover;
}
#distort-baby{ /* 赤ちゃんの頭にゆがみがあると */
	background:url(/baby-hug/images/baby/img_baby_towel.webp) no-repeat 55% top / cover;
}
#smile-baby{ /* “まるまるねんね”でにこにこあかちゃん */
	background:url(/baby-hug/images/baby/img_massage_baby.webp) no-repeat 45% bottom / cover;
}
#sleeping-baby{ /* 赤ちゃんは寝るのが仕事 */
	background:url(/baby-hug/images/baby/img_baby_sleeping_face.webp) no-repeat 60% 10% / cover;
}
#relax-baby{ /* 赤ちゃんのコリをほぐす「マイピーロ ネオ体操 */
	background:url(/baby-hug/images/baby/img_baby_smile_massage.webp) no-repeat 70% top / cover;
}
@media only screen and (max-width:679px){
	#relax-baby{ /* 赤ちゃんのコリをほぐす「マイピーロ ネオ体操 */
		background-position:70% bottom;
	}
}
@media only screen and (max-width:530px){
	#bedding-baby{ /* 昔の赤ちゃんの育ち方 */
		background-position:70% top;
	}
	#distort-baby{ /* 赤ちゃんの頭にゆがみがあると */
		background-position:55% center;
	}
}
@media only screen and (min-width:680px){
	#smile-baby{ /* “まるまるねんね”でにこにこあかちゃん */
		background-position:45% top;
	}
	#sleeping-baby{ /* 赤ちゃんは寝るのが仕事 */
		/*background-position:60% top;*/
	}
}
@media only screen and (min-width:992px){
	#bedding-baby{ /* 昔の赤ちゃんの育ち方 */
		background-position:center 40%;
	}
	#sleeping-baby{ /* 赤ちゃんは寝るのが仕事 */
		background-position:60% center;
	}
	#relax-baby{ /* 赤ちゃんのコリをほぐす「マイピーロ ネオ体操 */
		background-position:center top;
	}
}
@media only screen and (min-width:1200px){
	#for-baby{ /* 赤ちゃんのために */
		background-position:center center;
	}
	#distort-baby{ /* 赤ちゃんの頭にゆがみがあると */
		background-position:55% 40%;
	}
	#smile-baby{ /* “まるまるねんね”でにこにこあかちゃん */
		background-position:45% 20%;
	}
	#relax-baby{ /* 赤ちゃんのコリをほぐす「マイピーロ ネオ体操 */
		background-position:center 10%;
	}
}


/* ------------------------------------------------------
ご購入はこちら
--------------------------------------------------------*/
#products-buy{
	padding:70px 0 20px;
	background:#FFF;
}
#products-buy .header-txt{
	margin-bottom:50px;
}
#products-buy .lineup{
	margin-bottom:60px;
}
#products-buy .lineup .split-title{
	margin-bottom:10px;
	color:#7C745F; /* あくいろ */
	font-size:1.8rem;
	font-weight:bold;
	letter-spacing:1px;
	line-height:1.5;
}
#products-buy .split-image{
	margin-bottom:20px;
	line-height:0;
}
@media screen and (max-width:767px){
	#products-buy .split-content{
		margin-left:0;
		margin-right:0;
	}
}
@media screen and (min-width:768px){
	#products-buy .split-content::after{
		clear:both;
		display:table;
		content:" ";
	}
	#products-buy .header-txt{
		margin-bottom:70px;
	}
}

/* ドットコム */
#buy_dot .split-image span{
	position:relative;
}
#buy_dot .img-logo{
	border: none;
	border-radius:0;
	width:60%;
	position:absolute;
	top:5%; left:3%;
}


/*----------------------------------------------------
バナー
-----------------------------------------------------*/
#banner-section{
	background:#FCFAF2; /* 白練 */
}
#commu{ /* トコちゃんコミュニティ */
	background:url(/toco-belt/images/main-image/img_commu.webp) no-repeat center center / cover;
}
.carousel #commu .carousel-text h3,
.carousel #commu .carousel-text p{
	color:#FFF;
}
@media only screen and (max-width:679px){
	.carousel #commu .carousel-text{
		background:rgba(65,112,56,0.5); /* スピナッチグリーン */
		border-radius:0 0 15px 15px;
	}
}
@media only screen and (max-width:430px){
	#commu{
		background-position:20% center;
	}
}
@media only screen and (min-width:680px){
	.carousel #commu .carousel-text h3 span{
		background:rgba(65,112,56,0.5); /* スピナッチグリーン */
	}
	.carousel #commu .carousel-text p span{
		background:rgba(65,112,56,0.5);
	}
}

