@charset "UTF-8";

/* ======================================
	メニュー（modal menu）
	https://ecmemo.net/modal-window
========================================= */

/* ヘッダーの基本設定
----------------------------------------- */
/* * { border: 1px red solid;} */
#header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 80px;
	font-family: 'Nunito','Kosugi Maru', sans-serif;
	font-weight: 500;
	border-bottom: 1px solid rgba(8, 47, 85, 0.2);
	background-color: #133F87;
	z-index: 1000;
	transition:all .5s ease;
}
#header h1#logo {
	position: fixed;
	display: flex;
	flex-direction: column; 
	justify-content: center; 
	align-items: center;
	margin: 0;
	width: 100%;
	height: 80px;
	text-align: center;
	z-index: 10000;
	transition: .5s ease;
}
#header h1#logo a {
	display: block;
	width: 250px;
	height: auto;
	text-align: center;
}
#header h1#logo a img {
	margin: auto;
	width: auto;
	height: 50px;
	filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(329deg) brightness(102%) contrast(102%);
	transition: all .5s ease;
}



/* 検索
----------------------------------------- */
#search {
	margin: 0 auto ;
	height: 40px;
	width: 250px;
}


/* モーダル部分
------------------------------------------ */
.modal {
	position: fixed;
	width: 100%;
	height: 0;
	text-align: center;
	z-index: 0;
	transition: .5s ease;
	overflow-y: scroll;
}
.open-menu .modal {
	height: auto;
	min-height: 100%;
	opacity: 1;
	display: block;
}
.modal .modal-window {
	position: absolute;
	top: 0;
	right:0px;
	padding: 0;
	width: 100%;
	height: auto;
	transition: .5s ease;
	z-index: 1000;
	background-color: #133F87;
}

.open-menu .modal .modal-window {
	min-height: 100vh;
	transition: .5s ease;
}


/* モーダル内メニュー 
	----------------------------------------------- */
.modal .modal-window .modal_menu-container {
	display: flex;
	flex-direction: column; 
	justify-content: center; 
	align-items: center;　
	min-height: 100vh;
}
.open-menu .modal .modal-window .modal_menu-container ul {
	margin: 0 auto;
	padding: 120px 0 0;
	width: 80%;
	height: auto;
}
.modal .modal-window .modal_menu-container ul li {
	margin: 0 auto 15px;
	width: 100%;
	overflow: hidden;
}
.modal .modal-window .modal_menu-container ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 55px;
	line-height: 55px;
	color: #fff;
	font-size: 1.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-align: center;
}


.home.open-menu #header h1#logo {
	position: absolute;
	display: flex;
	z-index: 11111;
}
/* .open-menu #header h1#logo img { filter: none;} */


.modal .modal-window .modal_menu-container ul li.sns {
	float: left;
	margin-top: 2vh;
	width: 50%;
	text-indent: -9999px;
	filter: invert(98%) sepia(1%) saturate(0%) hue-rotate(253deg) brightness(121%) contrast(100%);
}
.modal .modal-window .modal_menu-container ul li.sns.insta a {
	display: block;
	margin-right: 30%;
	width: 70%;
	background: url(../images/icon-insta.svg) no-repeat center center;
	background-size: 32px auto;
	opacity: 0.8;
}
.modal .modal-window .modal_menu-container ul li.sns.twitter a {
	display: block;
	margin-left: 30%;
	width: 70%;
	background: url(../images/icon-twitter.svg) no-repeat center center;
	background-size: 32px auto;
	opacity: 0.8;
}
.modal .modal-window .modal_menu-container ul li.sns a:hover {
	opacity: 1;
}


/* PC用メニュー表示
	----------------------------------------------- */

/* メニュー５／2 */
#header .pc_menu-container {
	display: none;
	transition: .5s ease;
}


/* ウィジェットエリア 
	---------------------------------------------- */
#header .widgetarea {
	padding: 0 10% 5vh;
	font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E","メイリオ", Meiryo,"Times New Roman", "游明朝", YuMincho,   serif;
}
.widgetarea label { display: none;}
#header .widgetarea  h2 {
margin: .9em 0 .4em;
	color: #09305b;
	font-size: 2.4rem;
	text-align: left;
}



/* 検索 */
.widgetarea .widget_search .search input {
	padding: .2em .4em;
	width: calc( 100% - 45px);
	height: 35px;
	font-size: 1.8rem;
	border: 1px solid #09305b;
	border-radius: 3px;
} 
.widgetarea .widget_search .search button {
	margin-left: .3em;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
	background: url(../images/icon-search.svg) no-repeat center center;
	background-size: 80%;
	border: none;
	overflow: hidden;
	cursor: pointer;	
	opacity: 0.7;
	filter: invert(15%) sepia(36%) saturate(2554%) hue-rotate(188deg) brightness(93%) contrast(99%);
}
#header .widgetarea .widget_search .search button:hover {
	opacity: 1;
}

/* 執筆陣 */
#header .widgetarea .widget select {
	padding: .2em .7em;
	width: 100%;
	height: 40px;
	color: #fff;
	font-size: 1.8rem;
	background-color: rgba(8, 47, 85, 0.5);
	border: none;
	border-radius: 7px;
}
#header .widgetarea .widget select option.level-0 {
/* 	display: none !important; */
/*
	height: 0;
	visibility: hidden;
*/
/*
	margin-bottom: .2em;
	font-size: 1.8rem;
*/
}


#side .section { margin: 0 0 3vh;}
#side .section h2 {
	margin: .8em auto .3em;
	padding: .3em;
	font-size: 1.8rem;
	background-color: rgba(8, 47, 85, 0.2);
}






/* バナーエリア */
#header .banner {
	margin: 5% auto;
	width: 90%;
	max-width: 400px;
}
#header .banner li {
	margin-bottom: 15px;
	border-radius: 3px;
	overflow: hidden;
}
.sidebar .banner li a {
	display: flex;
	display: flex;
	flex-direction: column; 
	justify-content: center; 
	align-items: center;　
	width: 100%;
	height: 70px;
	text-align: center;
	background-color: #30addc;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
}
.sidebar .banner li a img {
	margin: auto;
	height: 90%;
}


/* サイドバー */
#side .banner li { margin-bottom: 10px;}
.sidebar .banner li.h100.fes a img { height: 90px;}
#side .banner li a:hover {
	box-shadow : 0px 0px 20px 0px rgba(8, 47, 85, 0.3);
	filter: brightness( 108% ) contrast( 106% ) saturate( 105% ) ;
}



/* 日本語・英語 */
#lang {
	margin: 3vh auto 2vh;
	text-align: center;
}
#lang li {
	display: inline-block;
	margin: 0 .4em;
	width: 40px;
	height: 40px;
	color: #fff;
	line-height: 40px;
	font-size: 1.5rem;
}
/* #lang li.jp { border-right: 1px solid #565656;} */
#lang li a {
	display: block;
	width: 100%;
	height: 100%;
	color: rgba(48, 173, 220, 0.5);
	background-color: #fff;
	border-radius: 50%;
}
#lang li a:hover {color: rgba(48, 173, 220, 0.8);}
#lang li a:active {color: rgba(48, 173, 220, 1);}




/* ハンバーガーメニューアイコン（burgermenu）
----------------------------------------- */

.burgermenu {
	display: block;
	position: fixed;
	top: 10px;
	right: 10px;
	width: 60px;
	height: 60px;
	z-index: 10001;
}
.burgermenu input.toggle { display: none;}
.burgermenu label.toggle-label {
	position: relative;
	cursor: pointer;
	display: block;
	width: 60px;
	height: 60px;
	background-color: #133F87;
}
.toggle-label .toggle-icon,
.toggle-label .toggle-icon:before,
.toggle-label .toggle-icon:after {
  position: relative;
  display: block;
  width: 30px;
  height: 2px;
  background: #fff;
  transition: all 300ms ease-in-out;
}
.toggle-label .toggle-icon {
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -2px, 0);
}
.toggle-label .toggle-icon:before {
	content: '';
	transform: translate3d(0, -10px, 0);
}
.toggle-label .toggle-icon:after {
	content: '';
	transform: translate3d(0, 8px, 0);
}
.toggle:checked ~ .toggle-label .toggle-icon {
	background-color: transparent; /* 透明 */
	box-shadow :none;
}
.toggle:checked ~ .toggle-label .toggle-icon:before,
.toggle:checked ~ .toggle-label .toggle-icon:after {
	top: 0;
	background-color: #fff;/* #30addc */
	box-shadow :none;
}
.toggle:checked ~ .toggle-label .toggle-icon:before {
	transform: rotate(45deg);
	box-shadow :none;
}
.toggle:checked ~ .toggle-label .toggle-icon:after {
	transform: translateY(-2px) rotate(-45deg);
	box-shadow :none;
}




/* -------------------------------------- 
	🌟サイドバーハンバーガーメニュー
----------------------------------------- */

.menu-content {
	position: fixed;
	top: 0%;
	right: -100%;/*leftの値を変更してメニューを画面外へ*/
	padding: 30px;
	width: 100%;
	height: 100%;

	background-color: #3584bb;

	background-color: rgba(255, 255, 255, 0.9);
	box-shadow : -10px 13px 10px -10px rgba(0,0,0,0.1);
	transition: all 0.5s;/*アニメーション設定*/
	z-index: 800000;
	overflow: 0;
}
#content.column2 .menu-content {
/*
	position: absolute;
	top: 0;
	right: 0;
	padding-left: 30px;
	padding-bottom: 30px;
*/


}


.open-menu .menu-content {
	right: 0;
}

#menu-btn-check:checked ~ .menu-content {

}


.menu-content h2.title_side {
	margin:2vh -10px 3vh;
}




/* modalmenu 
----------------------------------------- */
#modalmenu {
}
#modalmenu .widget label { display: none;}

/* 検索 */
#modalmenu .widget_search .search input {
	padding: .2em .4em;
	width: calc( 100% - 45px);
	height: 35px;
	font-size: 1.8rem;
	border: 1px solid #aaa;
	border-radius: 3px;
} 
#modalmenu .widget_search .search button {
	margin-left: .3em;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
	background: url(../images/icon-search.svg) no-repeat center center;
	background-size: 80%;
	border: none;
	overflow: hidden;
	cursor: pointer;	
	opacity: 0.5;
}
#si#modalmenude .widget_search .search button:hover {
	opacity: 1;
}

/* 執筆陣 */
#modalmenu .widget select {
	width: 100%;
	height: 35px;
}











@media screen and (min-width: 480px) { /* スマホ横（480px以上）*/

/* ヘッダーの基本設定（480px以上）
	----------------------------------------------- */
#header .inner h1#logo { width: 100%;}

/*
h1#logo img {
	padding-top: 5px;
	height: 60px;
}
*/


/* メニュー表示（480px以上）
	----------------------------------------------- */
#header .menu-main-container .menu li { display: inline-block;width: 49%;}
.open-menu #header .menu-main-container .menu li { width: 49%;}


}@media screen and (min-width: 768px) {/* タブレット（768px以上）*/

/* ヘッダーの基本設定（768px以上）
	----------------------------------------------- */






}@media screen and (min-width: 992px) { /* ノートPC（992px以上） */
/* ハンバーガーメニューアイコンクリア（非表示）
----------------------------------------- */
.burgermenu { display: none;}


/* モーダル部分
------------------------------------------ */
.modal {
	position: relative;
	height: auto;	
}
.modal .modal-window {
	position: relative;
	margin: auto;
	max-width: 1400px;
	background: none;
}



/* ヘッダーの基本設定（992px以上）
	----------------------------------------------- */
#header h1#logo {
	position: absolute;
	width: auto;
	margin-left: 5vw;
}
#header h1#logo a {
	margin: auto;
	width: 170px;
}
h1#logo a img {
	width: 100%;
	height: auto;
}




/* ヘッダーロゴの表示エリア
	----------------------------------------------- */
header.headercommon {
	margin: auto;
	width: 50%;
	background: none;
}
header.headercommon h1.logo {
	margin-left: 2vw;
	width: 300px;
}

/* ヘッダーメニュー
	----------------------------------------------- */
.modal .modal-window .modal_menu-container {
  display: block;
  text-align: right;
}
.modal .modal-window .modal_menu-container ul {
	padding-left: 160px;
	text-align: right;
}
.modal .modal-window .modal_menu-container ul li {
	display: inline-block;
	margin: 0;
	width: auto;
}
.modal .modal-window .modal_menu-container ul li a {
	display: block;
	padding: 0 1.5vw;
	height: 80px;
	line-height: 80px;
	font-size: 1.3rem;
	transition: all .5s ease;
}
.modal .modal-window .modal_menu-container ul li a:link,
.modal .modal-window .modal_menu-container ul li a:visited { color: #ccc;}
.modal .modal-window .modal_menu-container ul li a:hover {
	color: #fff;
	filter: brightness( 104% ) contrast( 106% ) grayscale(0%) saturate( 100% ) ;
	opacity: 1;
}
.modal .modal-window .modal_menu-container ul li a:active {}

.modal .modal-window .modal_menu-container ul li.sns {
	float: none;
	margin-top: 0;
	width: 60px;
}
.modal .modal-window .modal_menu-container ul li.sns.insta a {
	margin: 0;
  background: url(../images/icon-insta.svg) no-repeat center center;
  background-size: 22px auto;
}
.modal .modal-window .modal_menu-container ul li.sns.twitter a {
	margin: 0;
  background: url(../images/icon-twitter.svg) no-repeat center center;
  background-size: 22px auto;
}




/* ヘッダーメニュー縮小
	----------------------------------------------- */
.HeightMin #header { height: 60px;}
.HeightMin #header h1#logo { height: 60px;}
.HeightMin #header h1#logo a img {
	width: auto;
	height: 40px;
}
.HeightMin header.headercommon {
	height: 59px;
	background: none;
}
.HeightMin .modal .modal-window .modal_menu-container ul li a {
	height: 60px;
	line-height: 60px;
}

/* ウィジェットエリア(widgetarea)
	------------------------------------- */
#header .widgetarea .widget_block h2 {
	font-size: 2.1rem;
	text-align: left;
}



/* 検索 */
#header .inner #search {
	position: absolute;
	right: 30px;
	top: 100px;
	z-index: 100;
}
#searchform { width: 100%;}
#searchform #s { width: 80%; max-width: 200px;}







}@media screen and (min-width: 1250px) {	/* デスクトップ（1250px以上） */
/* ヘッダーロゴの表示エリア
	----------------------------------------------- */
header.headercommon {
	text-align: center;
}
/*
header.headercommon h1.logo {
	margin-left: 10vw;
}
*/

/* ヘッダーメニュー
	----------------------------------------------- */

.modal .modal-window .modal_menu-container ul li a {
	font-size: 1.45rem;
}



}@media screen and (min-width: 1600px) {/* デスクトップ（1450px以上） */
/* ヘッダーの基本設定（1450px以上）
	----------------------------------------------- */
#header h1#logo { margin-left: 0;}
.modal .modal-window .modal_menu-container ul li a {
  padding: .3em 25px;
}


}