@charset "UTF-8";


/*--- 共通 ------------------------------------*/
body {
	font-family: "ヒラギノ角ゴ Pro W3";
	font-size: 14px;
	text-align: center;
	line-height: 1.7;
	color: #818181;
}

/* 表示切り替え */
.pc {
	display: block;
}
.sp {
	display: none;
}

/* TB & SP */
@media only screen and (max-width: 979px) {
	.pc {
		display: none;
	}
	.tb {
		display: block;
	}
	.sp {
		display: block;
	}
}

/* SP */
@media only screen and (max-width: 767px) {
	.pc {
		display: none;
	}
	.tb {
		display: none;
	}
	.sp {
		display: block;
	}
}


/*--- ヘッダー ------------------------------------*/
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 120;
}

#header.fixed {
	background: rgba(229, 81, 66, 0.8);
	-webkit-transition:background 1s ease-in 0.3s;
	transition:background 1s ease-in 0.3s;
}

.h_logo {
	position: relative;
	width: 125px;
	height: 58px;
	padding: 14px 0 14px 32px;
}
.h_menu {
	position: absolute;
	top: 31px;
	right: 32px;
}

.h_menu .menu_list {
	float: left;
}

.h_menu .menu_list + .menu_list {
	margin-left: 60px;
}

.h_menu .menu_list:hover,
.h_menu .menu_list.current {
	border-bottom: 1px solid #fff;
}

.h_menu .menu_list:nth-child(2) {
	padding-top: 3px;
}

/* TB & SP */
@media only screen and (max-width: 980px) {
	.h_menu .menu_list {
		float: none;
	}
	.h_menu .menu_list + menu_list {
		margin-left: 0;
	}
	.h_menu .menu_list:hover,
	.h_menu .menu_list.current {
		border-style: none;
	}
}

/*-- ハンバーガーボタン -------------------------*/
#header .btn_hamburger {
	position: absolute;
	top: 14px;
	right: 32px;
	width: 50px;
	height: 50px;
}

#header .btn_hamburger .line {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 3px;
	background: #fff;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#header .btn_hamburger .line_01 {
	top: 10px;
}

#header .btn_hamburger .line_02 {
	top: 24px;
}

#header .btn_hamburger .line_03 {
	top: 38px;
}

#header .btn_hamburger.is-active .line_01 {
	top: 24px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#header .btn_hamburger.is-active .line_02 {
	opacity: 0;
}

#header .btn_hamburger.is-active .line_03 {
	top: 24px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

/* PC */
@media only screen and (min-width: 980px) {
	#header .btn_hamburger {
		display: none;
	}
}

/* TB & SP */
@media only screen and (max-width: 979px) {
	#header {
		background: #ef5a4b;
		-webkit-transition: none;
		transition: none;
	}
	#header.fixed {
		background: #ef5a4b;
	}
	.h_menu {
		display: none;
		position: relative;
		top: 0;
		right: 0;
		width: 100%;
		padding: 0 0 10px 0;
	}
	.h_menu .menu_list {
		float: none;
		padding: 10px 40px 20px 0;
		text-align: right;
	}
	.h_menu .menu_list:nth-child(2) {
		padding-top: 10px;
		padding-bottom: 17px;
	}
	.h_menu .menu_list:last-of-type {
		padding-bottom: 6px;
	}
}


/*--- コンテンツ共通 ---------------------------*/
#page_content {
	position: relative;
	overflow: hidden;
	background: rgba(229, 81, 66, 0.3);
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	#page_content {
		background: #fff;
	}
}


/*--- 背景動画 --------------------------------*/
.video_bg video {
	position: fixed;
	top: 0;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-filter: blur(0px);
	filter: blur(0px);
	overflow: hidden;
}


/*--- top ------------------------------------*/
.top {
	position: relative;
	padding: 0 0 270px 0;
	overflow: hidden;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.top {
		padding: 0 0 100px 0;
		background: url(../img/top_img.jpg) no-repeat;
		background-size: cover;
		background-position: center 86px;
	}
}

.top_h {
	position: absolute;
	top: 184px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
/* SP */
@media only screen and (max-width: 767px) {
	.top_h {
		top: 150px;
	}
	.top_h img {
		width: 960px;
		height: 117.5px;
	}
}

.top_play .open_video_button {
	position: relative;
	padding: 448px 0 0 0;
}
/* SP */
@media only screen and (max-width: 767px) {
	.top_play .open_video_button {
		padding: 280px 0 0 0;
	}
}

.top_play .open_video_button a {
	display: block;
	width: 238px;
	height: 52px;
	margin: 0 auto;
	background: url(../img/top_play_img.png) no-repeat;
	background-position: 0 0;
	background-size: 238px 104px;
}

.top_play .open_video_button a:hover {
	background-position: 0 bottom;
}

.top_scroll {
	position: fixed;
    width: 59px;
	left: 50%;
	bottom: 32px;
	margin: 0 0 0 -30px;
	z-index: 1;
}

.top_scroll .scroll_at {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -4px;
	z-index: 2;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.top_scroll {
		position: relative;
    	width: 59px;
		top: 0;
		left: 0;
		margin-left: 0;
		margin: 10% auto 5% auto;
	}
	.top_scroll .scroll_at {
		position: absolute;
		top: 0;
		left: 26px;
		margin: 0;
		z-index: 1;
	}
}

.top_cp {
	position: fixed;
	right: 32px;
	bottom: 32px;
}

/*--- consept以降のセクション共通 -------------------*/
.item {
	position: relative;
	width: 900px;
	margin: 0 auto 40px;
	padding: 0 0 88px 0;
	border-radius: 80px;
	background: #fff;
	z-index: 100;
}

.item .item_h {
	padding: 53px 0 0 0;
}

.item .item_txt {
	padding: 20px 0 0 0;
	text-align: center;
}

/* TB & SP */
@media only screen and (max-width: 979px) {
	.item {
		width: 100%;
		margin: 0;
		border-radius: 0;
	}
}
/* SP */
@media only screen and (max-width: 767px) {
	.item:first-of-type {
		margin-top: 40px;
	}
}


/*--- babymo consept -------------------------------*/
.concept .item_h {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -86px;
	z-index: 100;
}

/*-- 画像 ---*/
.concept .concept_img img {
	border-radius: 80px 80px 0 0;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.concept {
		overflow: hidden;
	}
	.concept .concept_img {
		position: relative;
		top: 0;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		width: 800px;
		height: auto;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 0;
	}
	.concept .concept_img img {
		width: 100%;
		height: auto;
		border-radius: 0;
	}
}

/*-- テキスト ---*/
.concept .item_txt {
	padding: 46px 0 0 0;
}

/* SP */
@media only screen and (max-width: 767px) {
	.concept .item_txt img {
		max-width: 409px;
		width: 95%;
		height: auto;
	}
}


/*--- babymo product ------------------------------*/
.product {
	padding: 0;
}

.product .inner_img {
	position: relative;
}

.product .inner_img:first-of-type {
	padding: 44px 0 0 0;
}

/* TB & SP */
@media only screen and (max-width: 979px) {
	.item .inner_img .p1_base_img img,
	.item .inner_img .p2_base_img img,
	.item .inner_img .p3_base_img img
	{
		width: 95%;
		height: auto;
	}
}

.product .inner_h_img {
	padding: 14px 0 0 0;
}

/* SP */
@media only screen and (max-width: 767px) {
	.inner_h_img img {
		width: 90%;
		height: auto;
	}
	.h_last img {
		width: 75%;
	}
}

/*-- テキスト ---*/
.product .inner_txt {
	padding: 20px 130px 82px 130px;
	text-align: left;
}

.product .inner_txt:last-child {
	padding: 20px 130px 62px 130px;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.product .inner_txt,
	.product .inner_txt:last-child {
		padding: 20px 5% 50px;
	}
}

/*-- interface -------*/
.product .inner_interface {
	padding: 0 0 88px 0; 
	background: #fdeeed;
	border-radius: 0 0 80px 80px;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.product .inner_interface {
		border-radius: 0;
	}
}

.product .inner_interface .int_img {
	padding: 25px 0 0 0;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.product .inner_interface .int_img img {
		width: 90%;
		height: auto;
	}
}

.product .inner_interface .if_list {
	padding: 30px 120px 0 120px;
	text-align: left;
}

.product .inner_interface .if_list li {
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: 1px solid #fff;
}

.product .inner_interface .if_list li:last-of-type {
	border-bottom: 1px solid #fff;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.product .inner_interface .if_list {
		margin-top: 3%;
		padding: 0 5%;
		text-align: left;
	}
}

.product .inner_interface .if_number {
	display: inline-block;
	padding-right: 20px;
}

.product .inner_interface .if_description {
	display: inline-block;
}
/* TB & SP */
@media only screen and (max-width: 767px) {
	.product .inner_interface .if_number {
		vertical-align: top;
		padding-right: 8px;
	}
	.product .inner_interface .if_description {
		width: 90%;
	}
}



/*--- babymo vision ------------------------------*/
.vision {
	overflow: hidden;
}

.vision .item_h {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -80px;
	z-index: 100;
}

.vision .vision_img img {
	border-radius: 80px 80px 0 0;
}

/* TB & SP */
@media only screen and (max-width: 979px) {
	.vision .vision_img {	
		position: relative;
		top: 0;
		left: 50%;
		z-index: 0;
		min-width: 100%;
		min-height: 100%;
		width: 800px;
		height: auto;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.vision .vision_img img {
		width: 100%;
		height: auto;
		border-radius: 0;
	}
}

.vision .vision_h_img {
	padding: 44px 0 0 0;
}

.vision .item_txt p {
	line-height: 2.5;
}

/* SP */
@media only screen and (max-width: 767px) {
	.vision .vision_h_img img {
		width: 90%;
		height: auto;
	}
	.vision .item_txt p {
		text-align: left;
		line-height: 1.8;
	}
}

.vision .item_txt {
	padding: 42px 0 0 0;
}

.vision .item_txt p + p {
	padding: 18px 0 0 0;
}
/* SP */
@media only screen and (max-width: 767px) {
	.vision .item_txt {
		padding: 30px 3% 0;
	}
	.vision .item_txt p + p {
		padding-top: 0;
	}
}



/*--- babymo contact -----------------------------*/
.contact {
	margin: 0 auto 60px;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.contact {
		margin: 0;
	}
}

.contact .item_txt {
	padding: 20px 83px 0 83px;
	text-align: left;
}
/* SP */
@media only screen and (max-width: 767px) {
	.contact .item_txt {
		padding: 20px 5% 0 5%;
	}
}

.cont_balloon {
	position: relative;
	width: 740px;
	margin: 38px auto 60px;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.cont_balloon {
		width: 640px;
		margin: 38px auto 40px;
	}
}
/* SP */
@media only screen and (max-width: 767px) {
	.cont_balloon {
		width: 300px;
		margin: 10px auto 0;
	}
}

.contact .cont_img {
	float: left;
}
/* SP */
@media only screen and (max-width: 767px) {
	.contact .cont_img {
		width: 90px;
		height: auto;
	}
	.contact .cont_img img {
		width: 90px;
		height: auto;
	}
}

.contact .cont_img + .cont_img {
	padding: 0 0 0 70px;
}
/* TB & SP */
@media only screen and (max-width: 979px) {
	.contact .cont_img + .cont_img {
		padding: 0 0 0 20px;
	}
}
/* SP */
@media only screen and (max-width: 767px) {
	.contact .cont_img + .cont_img {
		padding: 0 0 0 15px;
	}
}

/* お問い合わせボタン */
.contact .item_btn {
	position: relative;
	width: 473px;
	height: 86px;
	margin: 0 auto;
	padding: 53px 0 0 0;
}

.contact .item_btn a {
	display: block;
	width: 473px;
	height: 86px;
	background: url(../img/btn_contact.png) no-repeat 0 0;
	background-position: 0 0;
	background-size: 473px 172px;
}

.contact .item_btn a:hover {
	background-position: 0 bottom;
}

@media only screen and (max-width: 767px) {
	.contact .item_btn {
		width: 300px;
		height: 54px;
		margin: 0 auto;
		padding: 53px 0 0 0;
	}
	.contact .item_btn a {
		width: 300px;
		height: 54px;
		background-position: 0 0;
		background-size: 300px 108px;
	}
	.contact .item_btn a:hover {
		background-position: 0 bottom;
	}
}


/*--- footer -------------------------------*/
.footer {
	position: relative;
	background: #ef5a4b;
	overflow: hidden;
	z-index: 100;
	
}

@media only screen and (max-width: 979px) {
	.footer {
		margin-top: 0;
	}
}

.footer .f_h {
	padding-top: 53px;
	text-align: center;
}

.footer .f_body {
	width: 933px;
	margin: 42px auto 74px;
	background: #ef5a4b;
}

@media only screen and (max-width: 979px) {
	.footer .f_body {
		width: auto;
	}
}

.footer .f_body li {
	float: left;
}

.footer .f_body li:nth-child(2) {
	margin-left: 89px;
}

.footer .f_body li:nth-child(3) {
	margin-left: 93px;
}

.footer .f_body li:nth-child(4) {
	margin-left: 88px;
}

.footer .f_body li:nth-child(5) {
	margin-top: 44px;
}

.footer .f_body li:nth-child(6) {
	margin-top: 44px;
	margin-left: 105px;
}

.footer .f_body li:nth-child(7) {
	margin-top: 44px;
	margin-left: 126px;
}

.footer .f_body .break {
	clear: both;
}

@media only screen and (max-width: 979px) {
	.footer .f_body li {
		float: none;
		text-align: center;
	}

	.footer .f_body li:nth-child(2) {
		margin-top: 20px;
		margin-left: 0;
	}

	.footer .f_body li:nth-child(3) {
		margin-top: 20px;
		margin-left: 0;
	}

	.footer .f_body li:nth-child(4) {
		margin-top: 20px;
		margin-left: 0;
	}

	.footer .f_body li:nth-child(5) {
		margin-top: 20px;
	}

	.footer .f_body li:nth-child(6) {
		margin-top: 20px;
		margin-left: 0;
	}

	.footer .f_body li:nth-child(7) {
		margin-top: 20px;
		margin-left: 0;
	}
}


.footer .f_logo {
	height: 140px;
	background: #e55142;
}

.footer .f_logo .f_copy {
	width: 288px;
	margin: auto;
}

.footer .f_logo .f_copy > p {
	float: left;
	margin-top: 43px;
	margin-bottom: 47px;
}

.footer .f_logo .f_copy > p + p {
	padding-left: 44px;
}

/*--- アニメーション --------------------------------*/
/*--- concept effect ---*/
.concept .concept_effect .concept_aw_img {
	position: absolute;
	top: 0;
	left: 0;
	margin: 141px 402px 115px 282px;
	-webkit-transition: 2s;
	transition: 2s;
}

@media only screen and (max-width: 979px) {
	.concept .concept_effect .concept_aw_img {
		margin: 141px 70% 115px 30%;
		z-index: 1;
	}
}

@media only screen and (max-width: 767px) {
	.concept .concept_effect .concept_aw_img {
		margin: 130px 70% 0 28%;
		z-index: 1;
	}
	.concept .concept_effect .concept_aw_img img {
		width: 130px;
		height: auto;
	}
}

.concept .concept_effect .concept_em_img {
	position: absolute;
	top: 0;
	left: 0;
	margin: 318px 644px 84px 233px;
	-webkit-transform: scale(1.3, 1.3);
	transform: scale(1.3, 1.3);
	-webkit-transition: 1s all linear 0.5s;
	transition: 1s all linear 0.5s;
}

@media only screen and (max-width: 979px) {
	.concept .concept_effect .concept_em_img {
		margin: 318px 70% 84px 25%;
		z-index: 1;
	}
}

@media only screen and (max-width: 767px) {
	.concept .concept_effect .concept_em_img {
		margin: 270px 70% 0 15%;
		z-index: 1;
	}
}

.concept .concept_effect .concept_qm_img {
	position: absolute;
	top: 0;
	left: 0;
	margin: 117px 263px 285px 600px;
	-webkit-transform: scale(1.3, 1.3);
	transform: scale(1.3, 1.3);
	-webkit-transition: 1s all linear 0.5s;
	transition: 1s all linear 0.5s;
}

@media only screen and (max-width: 979px) {
	.concept .concept_effect .concept_qm_img {
		margin: 117px 30% 285px 68%;
		z-index: 1;
	}
}

@media only screen and (max-width: 767px) {
	.concept .concept_effect .concept_qm_img {
		margin: 90px 30% 0 80%;
		z-index: 1;
	}
}

/*--- project p1 effect ---*/
.product .inner .p1_img {
	position: absolute;
	top: 0;
	left: 0;
	margin: 44px 80px 0 80px;
	-webkit-transition: 1.5s;
	transition: 1.5s;
}

@media only screen and (max-width: 979px) {
	.product .inner .p1_img {
		margin: 44px 0 0 0;
	}
	.product .inner .p1_img img {
		width: 95%;
		height: auto;
	}
}

/*--- project p2 effect ---*/
.product .inner .p2_temp_img {
	position: absolute;
	top: 0;
	left: 0;
	margin: 29px 216px 52px 212px;
	-webkit-transition: 1s all ease-in 1s;
	transition: 1s all ease-in 1s;
}

@media only screen and (max-width: 979px) {
	.product .inner .p2_temp_img {
		margin: 5% 20% 15% 20%;
	}
	.product .inner .p2_temp_img img {
		width: 95%;
		height: auto;
	}
}

.product .inner .p2_aw_img {
	position: absolute;
	top: 0;
	left: 0;
	margin: 120px 270px 68px 256px;
	-webkit-transition: 2s;
	transition: 2s;
}

@media only screen and (max-width: 979px) {
	.product .inner .p2_aw_img {
		margin: 16% 25% 0 25%;
	}
	.product .inner .p2_aw_img img {
		width: 95%;
		height: auto;
	}
}

/*--- project p3 effect ---*/
.product .inner .p3_bb_img {
	position: absolute;
	top: 0;
	left: 0;
	margin: 58px 203px 48px 530px;
	-webkit-transition: 1s;
	transition: 1s;
}

@media only screen and (max-width: 979px) {
	.product .inner .p3_bb_img {
		margin: 10% 20% 10% 60%;
	}
	.product .inner .p3_bb_img img {
		width: 95%;
		height: auto;
	}
}

.product .inner .p3_aw_img {
	position: absolute;
	top: 0;
	left: 0;
	margin: 91px 404px 161px 408px;
	-webkit-transition: 0.5s all ease-in 0.5s;
	transition: 0.5s all ease-in 0.5s;
}

@media only screen and (max-width: 979px) {
	.product .inner .p3_aw_img {
		margin: 12% 43% 10% 42%;
	}
	.product .inner .p3_aw_img img {
		width: 95%;
		height: auto;
	}
}

.product .inner .p3_gf_img {
	position: absolute;
	top: 0;
	left: 0;
	margin: 44px 525px 50px 183px;
	-webkit-transition: 1s all ease-in 1s;
	transition: 1s all ease-in 1s;
}

@media only screen and (max-width: 979px) {
	.product .inner .p3_gf_img {
		margin: 6% 60% 10% 14%;
	}
	.product .inner .p3_gf_img img {
		width: 95%;
		height: auto;
	}
}