/*
	美容室ドルフィン
	全ページ共通部分
*/


/*=============================================================
//	定数
=============================================================*/
:root{
}


/*=============================================================
//	ページ全体の設定
=============================================================*/
html{
	scroll-behavior: smooth;
}

body{
	margin: 0px;
}

/*-------------------------------------------------------------
	リンク
-------------------------------------------------------------*/
/*	通常時	*/
a:link{
	text-decoration: none;
	color:	inherit;
}
/*	訪問済み	*/
a:visited{
	text-decoration: none;
	color:	inherit;
}
/*	カーソルが乗っている	*/
a:hover{
	text-decoration: none;
	color:	inherit;
}
/*	クリック中	*/
a:active{
	text-decoration: none;
	color:	inherit;
}

/*-------------------------------------------------------------
	クリック出来る要素
-------------------------------------------------------------*/
.clickable_element{
}

.clickable_element:hover{
	cursor:	pointer;
}


/*-------------------------------------------------------------
	段落、リスト
-------------------------------------------------------------*/
p, a, li, th, td{
	font-family: "Meiryo", sans-serif;
	margin:	0px;
}

/*-------------------------------------------------------------
	メディア（img, video）の枠
-------------------------------------------------------------*/
.media_frame{
}

.media_frame img, .media_frame video, .media_frame ifarme{
	width:	100%;
	height:	100%;
	object-fit:	contain;
}

/*-------------------------------------------------------------
	@mediaでの制御
-------------------------------------------------------------*/
/* 画面の幅768ピクセル以上 */
@media screen and ( min-width: 769px )
{
	.disp_vertical_only { display: none!important; }
}

/* 画面の幅768ピクセル未満 */
@media screen and ( max-width: 768px )
{
	.disp_horizontal_only { display: none!important; }
}


/*=============================================================
//	ヘッダー
=============================================================*/
#header_frame{
	position:	absolute;
	top:	32px;
	width:	100%;
	height:	96px;

	display:	flex;
	justify-content:	space-between;
	align-items:	center;
}

#header_logo{
	height:	100%;
	margin-left:	32px;
}

#header_menu{
	display:	flex;
	justify-content:	space-between;
	flex-wrap:	wrap;

	width:	32%;
	margin-right:	64px;
}

#header_menu > a{
	word-break:	keep-all;
	color:	#ffffff;
}

/* 画面の幅768ピクセル未満 */
@media screen and ( max-width: 768px )
{
	#header_frame{
		height: 64px;
	}
}


/*=============================================================
//	ハンバーガーナビ
=============================================================*/
#hamburger_icon{
	position: fixed;
	top: 40px;
	right: 32px;
	width:  56px;
	height: 48px;
	z-index: 128;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hamburger_icon_item{
	width: 100%;
	height: 2px;
	background-color: #ffffff;
}

#hamburger_menu_back{
	position: fixed;

	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	z-index: 127;

	background-color: rgba( 0.0, 0.0, 0.0, 0.8 );
}

#hamburger_menu{
	width: 64%;

	display: flex;
	flex-direction: column;
}

.hamburger_menu_item{
	width: 100%;
	height: 64px;
	display: flex;
	padding: 0px 8px;
	align-items: center;
}

.hamburger_menu_item > p{
	font-size: 24px;
	font-weight: bold;
	color: #ffffff;
}


/*=============================================================
//	フッター
=============================================================*/
footer{
	background-color: #000000;
}

#footer_access_frame{
	display:	flex;
	flex-direction: row-reverse;
	width:	100%;
	height:	768px;
}


#footer_map{
	flex-basis:	50%;
	height:	100%;
}

#footer_map > iframe{
	width:	100%;
	height:	100%;
	object-fit:	contain;
	filter: grayscale( 100% );
}

#footer_info{
	flex-basis:	50%;
	height:	100%;
	background-color:	#404040;
	display:	flex;
	flex-direction:	column;
	align-items:	center;
	justify-content:	space-around;
}

.footer_info_item{
	width:	96%;
	padding:	16px 0px;
	border-bottom:	solid 1px #ffffff;
	display:	flex;
}

.footer_info_header{
	flex-basis:	32%;
}

.footer_info_data{
	flex-basis:	64%;
}

.footer_info_item p{
	color:	#ffffff;
}

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

.footer_info_icon{
	height: 64px;
	margin: 0px 8px;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#footer_access_frame{
		flex-direction: column;
		height:	auto;
	}
	#footer_map{
		flex-basis:	100%;
		height:	320px;
	}
	.footer_info_item{
		display: flex;
		flex-direction: column;
	}
	.footer_info_header{
		margin-bottom: 16px;
	}
	.footer_info_data{
		margin-left: 32px;
	}
}


#footer_frame{
	width:	100%;
	height:	256px;

	display:	flex;
	justify-content:	space-between;
	align-items:	center;
}

.footer_logo_set{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-left: 32px;
}

.footer_logo{
	height:	96px;
}

.footer_logo_set > p{
	color: #ffffff;
}

.footer_menu{
	display:	flex;
	justify-content:	space-between;
	flex-wrap:	wrap;

	width:	48%;
	margin-right:	64px;
}

.footer_menu > a{
	word-break:	keep-all;
	color:	#ffffff;
}

.footer_icon{
	height: 64px;
}


/*=============================================================
//	ページトップ
=============================================================*/
.top_image, .top_image_mask{
	width: 100%;
	height: 100vh;
}

.top_image{
	position: fixed;
	top: 0px;
	z-index: -127;

	display: flex;
	align-items: flex-start;
}

.top_image > img, .top_image > video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*=============================================================
//	ページトップ以外の背景
=============================================================*/
#contents_body{
	width: 100%;
	background-color: #ffffff;
	padding: 32px 0px;
}


/*=============================================================
//	導入部分
=============================================================*/
.intro_title_set{
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	height: 100%;
}

.intro_title{
	display: flex;
}

.intro_title > p{
	writing-mode: vertical-rl;
	font-size: 96px;
	font-family: 'Noto Serif JP', serif;
	white-space: nowrap;
}

.intro_sub_title{
	display: flex;
	flex-direction: column;
}

.intro_sub_title > p{
	word-break: keep-all;
}

/* 画面の幅768ピクセル未満 */
@media screen and ( max-width: 768px )
{
	.intro_title > p{
		writing-mode: horizontal-tb;
		font-size: 48px;
		white-space: normal;
	}
	.intro_sub_title{
		display: none;
	}
}


/*=============================================================
//	ロボットのアイコン関係
=============================================================*/
.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 )
{
	.ai_info_balloon{
		width: 272px;
		padding: 16px 8px;
	}
	.ai_info_balloon > p{
		font-size: medium;
	}
}