﻿/* ///////////////////////////////
/  header-extra領域カスタマイズ
/////////////////////////////// */
/* 検索 & ソーシャル */
#header-extra #header-social-toggle,
#header-extra #header-search-toggle
{
	display: none;
}

/* ///////////////////////////////
/  branding領域カスタマイズ
/////////////////////////////// */
#branding{
	display: none;
}

#searchform
{
	display: none;
}

#logo-wrap
{
	display: none;
}

/* 画面縮小時モバイルメニュー非表示 */
#fixed-header-menu
{
	display: none;
}

#mobile-header-left-nav
{
	display: none;
}

/* ///////////////////////////////
/  ナビゲーション非表示
/////////////////////////////// */
#access
{
	display: none;
}

#access-top
{
	display: none;
}

.entry-header
{
	display: none;
}

/* 画面縮小時モバイルメニュー非表示 */
#fixed-header-menu
{
	display: none;
}

#mobile-header-left-nav
{
	display: none;
}

/* ヘッダーレイアウト */
.header-area
{
	width: 100%;
	height:602px;
  margin: 0;
  padding: 0;
	background-color: #fff;
	position: relative;
	top: 0;
	left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}

.header-top
{
	width: 100%;
	max-width: 1440px;
	margin:0 auto;
	height: 102px;
	display:flex;
}

.left-block
{
	width: 25%;
}

.left-block img
{
	margin:14px 5px 0;
}

.right-block
{
	width: 75%;
}

.right-block table
{
	width: 654px;
	margin: 5px 0 5px auto;
}

.right-block td
{
	border:solid 5px #fff;
	width: 218px;
	text-align: center;
}

.right-block a
{
	outline: none;
}

/* 健康美セラピー用ヘッダーレイアウト */
.kenkoubi-header-area
{
	position: fixed;
	width: 100%;
	height:104px;
	top: 0;
	z-index:99;
	background: #fff;
}

.kenkoubi-header-top
{
	width: 912px;
	margin:0 auto;
	display:flex;
}

.kenkoubi-left-block
{
	width: 25%;
	text-align: center;
}

.kenkoubi-left-block img
{
	margin:10px auto 0;
}

.kenkoubi-right-block
{
	width: 72%;
}

.kenkoubi-right-block table
{
	width: 654px;
	margin: 7px auto 7px;
}

.kenkoubi-right-block td
{
	border:solid 5px #fff;
	width: 218px;
	text-align: center;
}

.kenkoubi-right-block a
{
	outline: none;
}

/* ここまで健康美セラピー用

/* 固定ヘッダースクロール切替 */
.site-header
{
	display: flex;
	justify-content: center;
	position: absolute;
	width: 100%;
	padding: 10px 0 15px;
	z-index: 99;
	background: #fff;
	left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.site-header.fixed
{
	position: fixed;
	top: 0;
}

.page-header
{
	display: flex;
	justify-content: center;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 10px 0 0;
	z-index: 99;
	background: #fff;
/*	border:none;*/
}

.page-header.fixed
{
	position: fixed;
	top: 0;
}

.nav-border
{
	position: absolute;
	width: 100%;
	height: 6px;
	background: url("../images/navi-border.jpg");
	background-repeat: repeat;
	content:'';
	margin: 0;
	padding: 0;
}

nav ul
{
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: #fff;
}

nav img
{
	border-style:none;
}

.navi-right
{
	margin: 5px 0 0 20px;
}

.navi-right table
{
	height: 53px;
}

.navi-right td
{
	border:solid 5px #fff;
}

.navi-right a
{
	outline: none;
}

/* ナビメニューフェード */

.btn01
{
	position: relative;
	width: 62px;
	height: 53px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	cursor: pointer;
}
.btn02
{
	position: relative;
	width: 126px;
	height: 53px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	cursor: pointer;
}
.btn03
{
	position: relative;
	width: 142px;
	height: 53px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	cursor: pointer;
}
.btn04
{
	position: relative;
	width: 110px;
	height: 53px;
	margin: 0 auto;
	display: block;
/*	overflow: hidden; ドロップダウンメニュー対応 */
	cursor: pointer;
}
.btn05
{
	position: relative;
	width: 110px;
	height: 53px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	cursor: pointer;
}

.btn01 img,
.btn02 img,
.btn03 img,
.btn04 img,
.btn05 img
{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn01:hover img:nth-of-type(2),
.btn02:hover img:nth-of-type(2),
.btn03:hover img:nth-of-type(2),
.btn04:hover img:nth-of-type(2),
.btn05:hover img:nth-of-type(2)
{
	opacity: 0;
}

/* ここからドロップダウンメニュー対応 */
.btn04 p
{
	font-size:0px;
}


nav > li {
	display;inline-block;
	position:relative;
}
nav li > ul {
	display:none;
}
nav li:hover ul {
	display:block;
	position:absolute;
	width: 300px;
	margin:54px 0 0;
	top:0;
	left:0;
	background: #fff;
}
nav li:hover li {
	display:block;
	width: 300px;
	list-style-type:none;
	background: #31859C;
	margin: 5px 0 0;
}
nav li:hover li p {
	font-family: 'Noto Serif JP', serif;
	font-size: 16px;
	color: #fff;
	text-align: left;
	font-weight:bold;
	padding: 10px 10px;
}
nav li:hover li a:hover {
	background-color: #fff;
	text-decoration: underline #fff;
}
/* ここまでドロップダウンメニュー対応 */

/* ここまで固定ヘッダースクロール切替 */



/* ここからスマホ用ヘッダー */
@media screen and (max-width: 480px) {
#heade-area {
	background-color: #fff;
	position: fixed;
	top: 0;
	width: 100%;
	height: 110px;
	-webkit-box-sizing: border-box;
	/* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;
	/* Firefox, other Gecko */
	box-sizing: border-box;
	/* Opera/IE 8+ */
	z-index: 99999;
}
#header-area.fixed {
	margin-top: 0;
}

#header-sp
{
  display: flex;
  width: 100%;
  height: 110px;
  margin: 0 auto;
  text-align: center;
}

#header-sp table
{
  width: 82%;
  height: 90px;
  position: relative;
  top:10px;
  left:8px;
}

#header-sp td
{
  padding: 5px 0;
}

#header-sp td a
{
  outline: none;

}

#header-sp td.logo
{
  width: 37%;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
}

#header-sp td.logo p
{
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  color: #111;
  text-align: center;
}

#header-sp td.sns
{
  width: 21%;
  margin: 0 auto;
  text-align: center;
  vertical-align: top;
}
#nav-drawer {
  float:right;
  position: relative;
  width: 50px;
  text-align: center;
  margin: 0 0 0 -10px;
}

@media screen and (max-width: 375px) {
#header-sp td.logo p
{
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  color: #111;
  text-align: center;
}
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open {
  position: absolute;
  width: 34px;
  height: 42px;
  display: block;
  content: url(/images/sp/header-menu-sp.png);
  display: inline-block;
  margin: 20px 0 0;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 888;
  top: 85px;/*全体に広がるように*/
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(238,238,238,0.7);
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;/*最前面に*/
  width: 100%;/*右側に隙間を作る（閉じるカバーを表示）*/
  height: auto;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateY(-105%);
  transform: translateY(-105%);/*左に隠しておく*/
  text-align: left;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .7;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateY(85px);
  transform: translateY(85px);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-content .nav-list ul
{
	width:100%;
	margin: 0;
	background-color: #fff;
}

#nav-content .nav-list li
{
	display:list-item;
}

#nav-content .nav-list li a
{
	width:100%;
	display:list-item;
}

#nav-content .nav-list li.list01 a
{
	width:100%;
	text-decoration: none;
	margin: -15px 0 0 0;
	padding: 10px 10px;
	background-color: #32859D;
	font-family: 'Noto Serif JP', serif;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-align: left;
}

#nav-content .nav-list li.list01 a:hover
{
	width:100%;
	text-decoration: none;
	margin: -15px 0 0 0;
	padding: 10px 10px;
	background-color: rgba(254,0,107,0.5);
	font-family: 'Noto Serif JP', serif;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-align: left;
}

#nav-content .nav-list li.list02 a
{
	width:100%;
	text-decoration: none;
	margin: -15px 0 0 0;
	padding: 10px 24px;
	background-color: #32859D;
	font-family: 'Noto Serif JP', serif;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-align: left;
}

#nav-content .nav-list li.list02 a:hover
{
	width:100%;
	text-decoration: none;
	margin: -15px 0 0 0;
	padding: 10px 10px;
	background-color: rgba(254,0,107,0.5);
	font-family: 'Noto Serif JP', serif;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-align: left;
}

}
/* ここまでスマホ用ヘッダー */
