/*
	美容室ドルフィン
	商品紹介スタイルシート
*/


/*=============================================================
//	ページトップ
=============================================================*/
.top_image_mask{
}

.top_sample_order{
	position: absolute;
	right:  64px;
	bottom: 64px;

	height: 128px;
}

.top_ai_info_set{
	position: absolute;
	right: 128px;
	top:   160px;
	display: flex;
}

.ai_info_icon{
	position: relative;
	width:  128px;
	height: 128px;
	margin: 0px 16px;

	animation-name: robo;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
@keyframes robo{
	0%   { top:  0px; }
	100% { top: 24px; }
}

.ai_info_balloon{
	display: flex;
	flex-direction:  column;
	justify-content: center;
	text-align: center;
	padding: 16px 32px;
	border:  solid 4px #c0c0c0;
}

.ai_info_balloon > p{
	font-size: x-large;
	font-weight: bold;
	color: #606060
}

@media screen and ( max-width: 768px )
{
	.top_ai_info_set{
		right: auto;
		width: 100%;
		flex-direction: column;
		align-items: center;
	}
	.ai_info_balloon{
		width: 272px;
		padding: 16px 8px;
	}
	.ai_info_balloon > p{
		font-size: medium;
	}

	.top_sample_order{
		right: auto;
		bottom: 16px;
		width: 100%;
		height: 224px;
		display: flex;
		justify-content: center;
	}
}


/*=============================================================
//	導入
=============================================================*/
/* 画面の幅768ピクセル以上 */
@media screen and ( min-width: 769px )
{
	.intro_top{
		height: 100vh;
		align-items: flex-end;
	}
}

.intro_top{
	display: flex;
	width:  96%;
	margin: 0px auto;
	padding: 64px 0px;
}

.intro_image{
	width:  75%;
	height: 100%;
}

/* 画面の幅768ピクセル未満 */
@media screen and ( max-width: 768px )
{
	.intro_top{
		flex-direction: column;
		align-items: center;
	}
	.intro_image{
		width:  100%;
		height: auto;
	}
}


/*=============================================================
//	前節
=============================================================*/
.preceding_section_top{
	width: 96%;
	margin: 0px auto;
	padding: 32px 0px;
}

.preceding_section_title_set{
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.preceding_section_title_image{
	height: 128px;
}

.preceding_section_title{
}

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

.preceding_section_caption{
	display: flex;
	justify-content: center;
	height: auto;
}
.preceding_section_caption > p{
	font-family: 'Noto Serif JP', serif;
	font-size: 64px;
}

.preceding_section_body{
	display: flex;
	justify-content: center;
	align-items: center;

	width: 88%;
	margin: 32px auto;
}

.preceding_section_sentence{
	flex-basis: 50%;
}

.preceding_section_sentence p, .preceding_section_sentence li{
	line-height: 2em;
}

.preceding_section_photo{
	height: 640px;
	flex-basis: 50%;
}

/* 画面の幅768ピクセル未満 */
@media screen and ( max-width: 768px )
{
	.preceding_section_title_image{
		height: 64px;
	}
	.preceding_section_title > p{
		font-size: 48px;
	}
	.preceding_section_caption > p{
		word-break: keep-all;
		font-size: x-large;
	}

	.preceding_section_body{
		flex-direction: column;
		width: 100%;
		height: auto;
	}

	.preceding_section_sentence p, .preceding_section_sentence li{
		line-height: 2em;
		font-size: x-small;
	}

	.preceding_section_photo{
		height: auto;
		width: 100%;
	}
}


/*=============================================================
//	商品紹介
=============================================================*/
.items_row{
	display: flex;
	width: 96%;
	margin: 0px auto;
	justify-content: space-around;
}

.item_container, .item_container_dummy{
	display: flex;
	flex-direction: column;
	flex-basis: 40%;
	align-items: center;
	padding: 16px 0px;
}

.item_container_dummy{
	justify-content: center;
}

.item_photo{
	width: 96%;
}

.item_name_eng, .item_name_jpn, .item_breaf{
	text-align: center;
}

.item_name_eng > p{
	font-family: 'Noto Serif JP', serif;
	font-size: 56px;
	color: #808080;
}
.item_name_jpn > p{
	font-size: 48px;
	color: #1a73e8;
	font-weight: bold;
}
.item_breif > p{
	font-size: 32px;
	color: #1a73e8;
	font-weight: bold;
}
.item_detail > p{
	line-height: 2em;
}

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

	.item_photo{
		width: 100%;
	}

	.item_name_eng > p{
		font-size: 48px;
	}
	.item_name_jpn > p{
		font-size: 32px;
	}
	.item_breif > p{
		font-size: 24px;
	}
	.item_detail > p{
		font-size: x-small;
	}
}


/*=============================================================
//	通販リンク
=============================================================*/
.bottom_ai_info_set{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 32px auto;
}


/*=============================================================
//	動画リンク
=============================================================*/
.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;
	}
}