﻿/* ///////////////////////////////
/  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;
}

/* ページヘッダーレイアウト */
.page-header
{
	display: flex;
	justify-content: center;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 10px 0 0;
	z-index: 99;
	background: #fff;
	border-bottom: solid 1px #eee;
}

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

/* ヘッダーレイアウト */
.header-area
{
	width: 100%;
	height:auto;
	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: 1366px;
	margin:0 auto;
	height: 112px;
	display:flex;
}

.header-top ul
{
	display: flex;
	width: 100%;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: #fff;
}

.header-top li.left-parts
{
	float:left;
	width: 70px;
	height: 92px;
	margin: 10px 10px 0;
}

.header-top li.left-parts a
{
	outline: none;
}

.header-top li.center-parts h1
{
	font-family: 'Kosugi Maru', serif;
	font-size: 20px;
	color: #111;
	text-align: left;
	font-weight:bold;
	margin:35px 10px 0 0;
}

.header-top li.right-parts ul
{
	float:right;
	display: flex;
	height: 68px;
	margin:15px 0 0;
}

.header-top li.right-parts li
{
	width: 318px;
	height: 68px;
	display: flex;
	margin: 0 10px 0;
}

.header-top li.right-parts li a
{
	outline: none;
}

/* 固定ヘッダースクロール切替 */
.site-header
{
	display: flex;
	padding: 10px 0 15px;
	position: absolute;
	justify-content: center;
	width: 100%;
	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;
}

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

.header-nav
{
	width: 100%;
	max-width: 1366px;
	margin:0 auto;
	display:flex;
	justify-content: flex-end;
	background: #fff;
}

nav ul
{
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: #fff;
}

nav li.left-parts
{
	font-family: 'Kosugi Maru', serif;
	font-size: 24px;
	color: #FE016C;
	text-align: left;
	font-weight:bold;
	margin:35px 10px 0 0;
}

nav li.left-parts a
{
	color: #FE016C;
	 text-decoration-color:  #FE016C;
	text-underline-offset: 8px;
	outline: none;
}

nav li.right-parts ul
{
	float:right;
	display: flex;
	height: 68px;
	margin:15px 0 0;
}

nav li.right-parts li
{
	width: 318px;
	height: 68px;
	display: flex;
	margin: 0 10px 0;
}

nav li.right-parts li a
{
	outline: none;
}

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

/* ここからスマホ用ヘッダー */
@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: 'Kosugi Maru', 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: 'Kosugi Maru', 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: 'Kosugi Maru', 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: 'Kosugi Maru', 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: 'Kosugi Maru', 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: 'Kosugi Maru', serif;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-align: left;
}

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