/*
	美容室ドルフィン
	トップページスタイルシート
*/


/*=============================================================
//	ページトップ
=============================================================*/
/*-------------------------------------------------------------
	画面の幅768ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 769px )
{
	#top_inner_frame{
		width:	96%;
		height:	80%;
		display:	flex;
		justify-content:	space-around;
		align-items:	center;
		border-left:	solid 1px #ffffff;
	}
}

.top_image_mask{
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

#top_outer_frame{
	width:	80%;
	height:	80%;
	display:	flex;
	justify-content:	center;
	align-items:	center;
}

#top_inner_frame{
	height: 100%;
}

#top_message_frame{
	display: flex;
	flex-direction: column;
	flex-basis: 40%;
}

#top_message_frame p{
	color: #ffffff;
}

#top_caption > p{
	font-size: 64px;
	font-family: 'Noto Serif JP', serif;
}

#top_message > p{
	font-size:	large;
}

#top_image{
	flex-basis:	40%;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#top_video_mask{
		align-items: center;
	}
	#top_message_frame{
		height: 100%;
		justify-content: space-around;
	}
	#top_caption > p{
		word-break: keep-all;
	}
}


/*=============================================================
//	導入
=============================================================*/
.intro_top{

	display: flex;
	padding-top: 64px;

	width:  96%;
	height: 800px;
	margin: 0px auto;
}

.intro_right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 80%;
}

.intro_caption{
	position: relative;
	width: calc( 100% + 128px );
	left: -128px;

	display: flex;
	align-items: center;

	z-index: 1;
}

.intro_caption > p{
	font-size: 64px;
	font-family: 'Noto Serif JP', serif;
	color: #808080;
}

.intro_caption_img{
	position: relarive;
	height:	192px;
}

.intro_body{
	display: flex;
	flex-direction: row-reverse;

	align-items: flex-end;
	width: 100%;
}

.intro_photo{
	flex-basis: 50%;
	max-width: 512px;
	margin: 0px 32px;
}

.intro_balloon{
	position: absolute;
	width: 320px;
	top: -64px;
	right: -16%;
}

.intro_body_right{
	flex-basis: 50%;
	z-index: 1;
}

.intro_body_img{
	max-width: 480px;
	margin-bottom: 64px
}

.intro_body_right > p{
	line-height: 2em;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	.intro_top{
		flex-wrap: wrap;
		justify-content: center;
		height: auto;
	}

	.intro_caption{
		position: static;
		flex-wrap: wrap;

		width: 96%;
		left: 0px;
	}
	.intro_caption > p{
		word-break: keep-all;
		font-size: x-large;
	}

	.intro_caption_img{
		height: 64px;
	}

	.intro_right{
		width: 96%;
	}

	.intro_body{
		flex-wrap: wrap;
		flex-direction: reverse;
		justify-content: center;
	}

	.intro_body_right{
		flex-basis: 100%;
		z-index: 1;
	}
	.intro_body_img{
		max-width: 480px;
		margin: 32px 0px;
	}

	.intro_photo{
		flex-basis: 100%;
		width: 100%;
		margin: 0px;
		max-width: none;
	}

}


/*=============================================================
//	コンセプト
=============================================================*/
.concept_top{
	width:	100%;
	margin:	64px 0px;
}

.concept_header{
	width:	100%;
}

.concept_body{
	display:	flex;
	justify-content:	space-between;
	align-items:	center;
	width:	96%;
	margin: 32px auto;
}

.concept_message{
	border-left:	solid 2px #000000;
	padding:	16px 64px;
}

.concept_message > p{
	font-family: 'Noto Serif JP', serif;
	font-size:	x-large;
	margin: 16px 0px;
}

.concept_photo{
	width:	640px;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	.concept_body{
		flex-wrap: wrap;
		justify-content: center;
	}

	.concept_message{
		border-left: unset;
		border-top: dotted 4px #c0c0c0;
		padding: 16px 0px;
	}

	.concept_message > p{
		font-size: medium;
	}

	.concept_photo{
		width:	96%;
	}
}


/*=============================================================
//	ケア
=============================================================*/
/*-------------------------------------------------------------
	画面の幅768ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 769px )
{
	.care_step_left > *{
		padding: 0px 32px;
	}
}

.care_top{
	width:	100%;
	margin:	64px 0px;
}

.care_header{
	width:	100%;
}

.care_step, .care_step_reverse{
	display: flex;
	justify-content: space-between;

	width: 80%;
	margin: 64px auto;
}

.care_step_reverse{
	flex-direction: row-reverse;
}


.care_step_left{
}

.care_step_left > *{
}

.care_step_title{
	display:	flex;
	align-items:	flex-end;
	padding-bottom:	32px;
	border-bottom:	solid 1px #808080;
	margin-bottom:	32px;
}

.care_step_title_icon{
	width:	128px;
	height:	128px;
	margin:	0px 32px;
}

.care_step_title > p{
	font-size: 40px;
}

.care_step_title_jpn{
	color: #1a73e8;
	font-weight: bold;
}

.care_step_title_eng{
	font-family: 'Noto Serif JP', serif;
}

.care_step_detail{
}

.care_step_detail > p{
	font-size: medium;
}

.care_step_photo{
	width:	640px;
}

.deep_inf{
    margin-top: 40px;
    margin-left: 100px;
    margin-right: 100px;     
}
 .short-line {
    border-top: 1.5px solid #808080;
    width: 70%;
  }
.carepro{
    margin-top: 40px;
    max-width: 800px;
    width: auto;
}



/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	.care_step, .care_step_reverse{
		flex-wrap: wrap;
		justify-content: center;
		width: 96%;
		margin: 32px auto;
	}
	.care_step_left{
		width: 96%;
	}
	.care_step_title{
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
	}
	.care_step_title > p{
		font-size: large;
	}
	.care_step_title_icon{
		margin:	32px 32px;
	}
	.care_step_detail > p{
		font-size: small;
		line-height: 2em;
	}
	.care_step_photo{
		width:	96%;
	}
}


/*=============================================================
//	メニュー
=============================================================*/
.menu_top{
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 64px;
}

.menu_frame{
}

.menu_header{
	display:	flex;
	align-items:	center;
}

.menu_header_icon{
	width:	160px;
	margin-right:	32px;
}

.menu_header_caption{
}

.menu_header_caption > p{
	font-size:	96px;
	font-family: 'Noto Serif JP', serif;
	color:	#c0c0c0;
}

.menu_item{
	display:	flex;
	justify-content:	space-between;
	padding:	32px 0px;
	border-bottom:	solid 1px #000000;
	width:	100%;
}

.menu_item > p{
	font-size:	x-large;
}

.sample_link{
	width: 64%;
	margin: 0px auto;
}


/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	.menu_header_icon{
		width: 80px;
	}
	.menu_header_caption > p{
		font-size: 48px;
	}
	.menu_item > p{
		font-size:	large;
	}

	.sample_link{
		width: 80%;
	}
}


/*=============================================================
//	問い合わせ
=============================================================*/
#access_top{
	width:	100%;
	display:	flex;
	flex-direction:	column;
	align-items:	center;
	padding: 64px 0px;

	background-image: url( "./media/photo_data/BG_green.png" );
}

.access_item, .access_item_reverse{
	display:	flex;
	height:	96px;
	justify-content:	center;
	align-items:	center;
}
.access_item{
	margin: 32px 0px;
}

.access_item_reverse{
	flex-direction: row-reverse;
}

.access_paragraph_sub{
	font-size: small;
}

.access_icon{
	height: 100%;
	margin: 0px 16px;
}

.access_barcode{
	height: 64px;
	margin-left: 16px;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#access_top{
		width: 96%;
		margin: 0px auto;
	}
	.access_item, .access_item_reverse{
		flex-direction: column;
		height: auto;
	}
	.access_icon{
		height: 128px;
		margin: 8px;
	}
}

/*=============================================================
//	動画リンク
=============================================================*/
.bottom_video_link_set{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	margin: 96px auto;
}

.bottom_video_link_img{
	margin: 32px 32px;
	border: solid 4px #c0c0c0;

	display: flex;
}

.bottom_video_link_sentence{
	display: flex;
	flex-direction:  column;
	justify-content: center;
}

/* 画面の幅768ピクセル未満 */
@media screen and ( max-width: 768px )
{
	.bottom_video_link_set{
		flex-direction: column;
		width: 80%;
	}

	.bottom_video_link_img{
		height: auto;
		margin: 32px 0px;
	}
}