/* □□□□□□□□□□□□□□□□□□□□□□□□□□□□
mediaoba Setting
□□□□□□□□□□□□□□□□□□□□□□□□□□□□ */
/*--------------------------------------------------------------
General Styles
Clear Fix
Layout
Header
	Top Bar
	Header Image
	Main Navigation
Main
	Sidebar Right
	Main Content
	Main Container
Footer
	Footer Menu
------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@900&display=swap');


/* ------------------------------------------------------
General Styles
--------------------------------------------------------*/
html{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	scroll-behavior:smooth;
	background-color:#FFF;
}
*,
*::before,
*::after{
	-webkit-box-sizing:inherit;
	-moz-box-sizing:inherit;
	box-sizing:inherit;
	outline:none;
}
body{
	min-width:320px;
	color:#212222; /* 墨 */
	font-feature-settings:'palt'; /* 自動カーニング */
	font-family:'Lucida Grande', Meiryo, 'メイリオ', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
	font-size:16px;
	line-height:1.5;
	letter-spacing:normal;
	text-transform:none;
}
p{
	margin-bottom:15px;
}
a{
	color:#006AB6; /* 青 */
}
a:hover,
a:focus,
a:active{
	color:#6D6C69; /* ピジョン */
	text-decoration:none;
}
a:hover img{
	filter:alpha(opacity=80); opacity:.8;
}
hr{
	border-top:1px solid #E5E5E5;
	border-bottom:1px solid #FFF;
}
b,
strong {
	font-weight: bold;
}
select,
input,
textarea{
	background-color:#FFF;
	border:1px solid #DCDCDC; /* ゲインズボロ */
}
table tr,
table th,
table td{
	padding:10px;
	border:1px solid #DCDCDC; /* ゲインズボロ */
}
@media screen and (max-width:979px){
	html{
		scroll-padding-top:50px;
	}
	body{
		padding-top:50px;
	}
}
@media screen and (max-width:530px){
	html{
		scroll-padding-top:45px;
	}
	body{
		padding-top:45px;
	}
}

/* テキスト選択時の背景色 */
::selection{
	color:#FFF;
	background-color:#006AB6; /* 青 */
}
::-moz-selection{
	color:#FFF;
	background-color:#006AB6; /* 青 */
}

/* セレクト選択時の背景色 */
select option[selected]{
	background-color:#CCC;
}

/* オートフィル（自動入力）の背景色 for Chrome */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
	-webkit-box-shadow:0 0 0px 1000px white inset;
}

/* Placeholder */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
	color:#A1A1A1;
}
input::-moz-placeholder,
textarea::-moz-placeholder{
	color:#A1A1A1;
}


/* ------------------------------------------------------
Clear Fix
--------------------------------------------------------*/
#top-bar::before, #top-bar::after,
#main-nav::before, #main-nav::after,
.main-content::before, .main-content::after,
footer::before, footer::after{
	content:"";
	display:table;
	table-layout:fixed;
}
#top-bar::after,
#main-nav::after,
.main-content::after,
footer::after{
	clear:both;
}


/*--------------------------------------------------------------
Layout
--------------------------------------------------------------*/
/* Boxed Wrapper */
.boxed-wrapper{
	width:100%;
	max-width:1240px;
	margin:0 auto;
}
#top-bar .boxed-wrapper{
	overflow:hidden;
}
#top-bar .boxed-wrapper,
#main-nav .boxed-wrapper{
	padding:0 40px;
}
@media screen and (max-width:979px){
	#top-bar .boxed-wrapper,
	#main-nav .boxed-wrapper{
	}
}
@media screen and (max-width:480px){
	#top-bar .boxed-wrapper,
	#main-nav .boxed-wrapper{
		padding-left:20px;
		padding-right:20px;
	}
}

/* Blog Grid */
.blog-grid{
	padding-left:0 !important;
	list-style:none;
	font-size:0;
}
.blog-grid > li{
	display:inline-block;
	margin-right:32px;
	margin-bottom:40px;
	font-size:1rem;
	vertical-align:top;
}
.blog-grid > li:nth-of-type(2n+2) {
	margin-right: 0;
}

/* Style */
.blog-classic-style{
	width:100%;
}
.blog-classic-style:not(.top){
	border:1px solid #EEE;
	border-radius:5px;
	padding:5px 5px 30px 5px;
}
.blog-grid-style{
	width:calc((100% - 32px) /2 - 1px);
	width:-webkit-calc((100% - 32px) /2 - 1px);
}
.blog-grid-style:nth-last-of-type(-n+2){
	margin-bottom:0;
}
.blog-list-style{
	width:100%;
	margin-right:0;
	border-bottom:1px solid #DCDCDC; /* ゲインズボロ */
}
@media screen and (min-width:980px){
	.blog-list-style:nth-last-of-type(-n+1){
		margin-bottom:0;
	}
}
@media screen and (max-width:640px){
	.blog-grid > li:not(.blog-grid-style){
		width:100%;
		margin-right:0;
	}
	.blog-grid > li:nth-last-of-type(-n+1){
		margin-bottom:0;
	}
}


/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
header{
	position:relative;
}


/*--------------------------------------------------------------
Top Bar
--------------------------------------------------------------*/
#top-bar{
	position:relative;
	width:100%;
	height:50px;
	min-width:320px;
	background-color:#FFF;
	box-shadow:0px 1px 5px rgba(0, 0, 0, 0.1);
	text-align:center;
	z-index:8000;
}
#top-bar a:not(:hover){
	color:#212222; /* 墨 */
}
@media screen and (max-width:979px){
	#top-bar{
		position:fixed;
		top:0;
	}
}
@media screen and (max-width:530px){
	#top-bar{
		height:45px;
	}
}

/* Top Bar Logo */
.top-bar-logo{ /* 青葉ロゴタイプ */
	float:left;
	display:inline-block;
	padding:10px 0;
	position:relative;
}
.top-bar-logo img{
	width:auto;
	height:30px;
}
@media screen and (max-width:530px){
	.top-bar-logo img{
		height:25px;
	}
}

/* Top Memu */
#top-menu{
	float:right;
}
#top-menu li{
	position:relative;
	display:inline-block;
	list-style:none;
}
#top-menu li a{
	display:block;
	position:relative;
	margin-left:0;
	padding:0 5px;
	text-decoration:none;
	font-size:0.875rem;
	line-height:50px;
}
#top-menu li:first-of-type a{
	padding-left:0px;
}
#top-menu li:last-of-type a{
	padding-right:0px;
}
@media screen and (max-width:979px){
	#top-menu{
		display:none;
	}
}

/* Mobile Menu Btn */
.mobile-menu-btn{
	display:none;
	float:right;
	padding:10px 0 10px 10px;
	color:#6D6C69; /* ピジョン */
	font-size:1.25rem;
	line-height:25px;
	cursor:pointer;
}
.mobile-menu-btn:hover{
	color:#9EA1A3; /* すず色 */
}
.mobile-menu-btn .mobile-menu-txt::after{
	content:"\00A0\f0c9";
	font-family:FontAwesome;
	font-size:1.2em;
	line-height:25px;
	vertical-align:middle;
}
@media screen and (max-width: 979px) {
	.mobile-menu-btn {
		display:block;
	}
}
@media screen and (max-width:340px){
	#top-bar .mobile-menu-btn{
		font-size:1.125rem;
	}
}


/*--------------------------------------------------------------
Header Image
--------------------------------------------------------------*/
#header-image{
	position:relative;
	height:150px;
	background-image:url(/assets/images/common/background/header_bg.jpg);
	background-repeat:no-repeat;
	background-position:left 43%;
	background-size:100%;
}
@media screen and (max-width:1280px){
	#header-image{
		height:120px;
		background-position:left 41%;
		background-size:110%;
	}
}
@media screen and (max-width:1080px){
	#header-image{
		height:100px;
		background-position:left 40%;
		background-size:120%;
	}
}
@media screen and (max-width:690px){
	#header-image{
		background-position:left 39%;
		background-size:130%;
	}
}
@media screen and (max-width:640px){
	#header-image{
		background-position:left 35%;
		background-size:200%;
		padding:50px 0 !important;
	}
}
@media screen and (max-width:550px){
	#header-image{
		padding:30px 0 !important;
	}
}

/* Header Image Sub Logo */
#header-image .sub-logo{
	padding:0 40px;
	color:#006AB6; /* 青 */
	font-family:'Nunito', sans-serif;
	font-size:1.2rem;
	font-weight:600;
}
#header-image .sub-logo span{
	display:inline-block;
	width:226px;
	text-align:center;
}
@media screen and (max-width:640px){
	#header-image .sub-logo{
		position:absolute;
		top:0;
	}
}
@media screen and (max-width:530px){
	#header-image .sub-logo{
		text-align:left;
		font-size:1.1rem;
	}
	#header-image .sub-logo span{
		width:100%;
		text-align:left;
	}
}
@media screen and (max-width:480px){
	#header-image .sub-logo{
		padding:0 20px;
	}
}

/* Header Image Content Info */
.content-info{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:100%;
	min-height:65.6px;
	padding:1em 0;
	text-align:center;
}
.content-info h1{
	position:relative;
	display:inline-block;
	margin:0 auto;
	transition:all 0.05s ease-in 0s;
	padding:.3em .75em .3em 1em;
	background-color:rgba(255,255,255,0.7);
	border-radius:2em;
	color:#4B474D; /* チャコールグレイ */
	color:#006AB6; /* 青 */
	font-family:'M PLUS Rounded 1c', sans-serif;
	font-weight:500;
	font-size:1.5rem;
	line-height:1.2;
	letter-spacing:.25em;
	text-shadow:1px 1px 1px rgb(255, 255, 255), 1px -1px 1px rgb(255, 255, 255), -1px 1px 1px rgb(255, 255, 255), -1px -1px 1px rgb(255, 255, 255), 3px 3px 3px rgba(0, 0, 0, 0.15);
}
.content-info h1::before{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	top:0; left:0;
	border:1px solid #FFF;
	border-radius:2em;
}
@media screen and (max-width:750px){
	.content-info h1{
		padding:.2em .4em .2em .5em;
		font-size:1.3125rem;
		letter-spacing:.1em;
	}
}
@media screen and (max-width:420px){
	.content-info h1{
		letter-spacing:normal;
	}
}


/*--------------------------------------------------------------
Main Navigation
--------------------------------------------------------------*/
#main-nav{
	position:relative;
	z-index:1100;
	min-height:60px;
	box-shadow:0px 1px 3px rgba(0, 0, 0, 0.1);
	text-align:center;
}
#main-nav a:not(:hover){
	color:#212222; /* 墨 */
}
#main-nav .boxed-wrapper{
	position:relative;
}
@media screen and (max-width:979px){
	#main-nav{
		position:absolute;
		top:50px;
		width:100%;
		min-height:0;
	}
}
@media screen and (max-width:530px){
	#main-nav{
		top:45px;
	}
}

/* Main Menu */
#main-menu{
	width:auto;
	padding:0;
}
#main-menu li{
	position:relative;
}
#main-menu > li{
	display:inline-block;
	list-style:none;
}
#main-menu > li:not(:last-of-type)::after{
	content:'';
	position:absolute;
	top:0;
	right:-3px;
	bottom:0;
	width:5px;
	height:5px;
	margin:auto 0;
	background-color:#D3D3D3; /* ライトグレイ */
	-webkit-transform:rotateZ(-45deg);
	transform:rotateZ(-45deg);
}
#main-menu li a{
	display:block;
	position:relative;
	padding:0 17px;
	font-size:0.875rem;
	line-height:60px;
}
#main-menu > li a{
	display:block;
	text-decoration:none;
}
#main-menu > li:first-of-type a{
	padding-left:0px;
	font-size:1rem;
}
#main-menu > li:last-of-type a{
	padding-right:0px;
}
@media screen and (max-width:979px){
	#main-menu{
		display:none;
	}
}

/* Mobile Menu  */
#mobile-menu{
	display:none;
	clear:both;
	padding-bottom:15px;
}
#mobile-menu li{
	position:relative;
	width:100%;
	text-align:center;
	font-size:0.875rem;
	line-height:50px;
	border-bottom:1px solid #DCDCDC; /* ゲインズボロ */
}
#mobile-menu > li:last-of-type{
	border-bottom:none;
}
#mobile-menu li.open-menu{
	border-top:1px solid #A1A9BA; /* グリーブルー */
	border-bottom:1px solid #A1A9BA; /* グリーブルー */
}
#mobile-menu li.open-menu + li.open-menu{
	border-top:none;
}
#mobile-menu li a{
	display:block;
	position:relative;
	z-index:5;
	height:50px;
	line-height:50px;
}
#mobile-menu > li:first-of-type a{
	font-size:1.0625rem;
}
#mobile-menu > .menu-item:hover a{
	color:#006AB6 !important; /* 青 */
}
@media screen and (max-width:979px){
	#mobile-menu{
		position:fixed;
		top:50px;
		left:0;
		width:100%;
		min-width:320px;
		max-height:100%;
		overflow-y:auto;
		z-index:900;
		background-color:rgba(255,255, 255, 0.95);
		box-shadow:0px 1px 3px rgba(0, 0, 0, 0.5);
	}
}
@media screen and (max-width:530px){
	#mobile-menu{
		top:45px;
	}
}


/*--------------------------------------------------------------
Main
--------------------------------------------------------------*/


/*--------------------------------------------------------------
Sidebar Right
--------------------------------------------------------------*/
.sidebar-right-wrap{
	float:right;
	width:302px;
	padding-left:32px;
}
@media screen and (max-width:979px){
	.sidebar-right-wrap{
		float:none;
		width:100%;
		padding:0 55px;
		margin-top:40px;
	}
}
@media screen and (max-width:640px){
	.sidebar-right-wrap{
		padding:0;
	}
}


/*--------------------------------------------------------------
Main Content
--------------------------------------------------------------*/
.main-content{
	position:relative;
	padding:40px 52px 92px;
}
@media screen and (max-width:979px){
	.main-content{
		padding-top:60px;
	}
}
@media screen and (max-width:480px){
	.main-content{
		padding-left:20px;
		padding-right:20px;
	}
}


/*--------------------------------------------------------------
Main Container
--------------------------------------------------------------*/
.main-container{
	float:left;
	width:-webkit-calc(100% - 302px);
	width:calc(100% - 302px);
	overflow:hidden;
}
@media screen and (max-width:979px){
	.main-container{
		float:none;
		width:100%;
	}
}


/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/
footer:not(.post-meta){
	background:#FAFAFA;
	color:#222;
}
footer:not(.post-meta) a:hover{
	color:#006AB6; /* 青 */
}

/* Footer Copyright */
.footer-copyright{
	overflow:hidden;
	padding:60px 0 50px;
	text-align:center;
}
.copyright-info{
	display:inline-block;
	margin-bottom:20px;
	font-size:13px;
}
.copyright-info,
.copyright-info a:not(:hover){
	color:#7E7C73; /* スーリー */
}
@media screen and (max-width:979px){
	.footer-copyright{
		padding-left:30px;
		padding-right:30px;
	}
}
@media screen and (max-width:480px){
	.footer-copyright{
		padding-left:20px;
		padding-right:20px;
	}
}

/* Scrolltop */
.scrolltop{
	display:block;
	width:100px;
	margin:0 auto;
	font-size:12px;
	font-weight:600;
	letter-spacing:0.5px;
	cursor:pointer;
}
.scrolltop .icon-angle-up{
	display:inline-block;
	width:40px;
	height:40px;
	border:1px solid #DCDCDC; /* ゲインズボロ */
	border-radius:50%;
	color:#4B474D; /* チャコールグレイ */
	line-height:1em;
	font-size:20px;
}
.scrolltop .icon-angle-up::before{
	display:inline-block;
	padding-top:7px;
	content:"\f106";
	font-family:FontAwesome;
	font-size:1.5rem;
}
.scrolltop .icon-angle-up:hover{
	border:1px solid #B0E0E6; /* パウダーブルー */
	color:#006AB6; /* 青 */
}


/*--------------------------------------------------------------
Footer Menu
--------------------------------------------------------------*/
.footer-menu{
	margin-top:0;
	background-color:#6D6C69; /* ピジョン */
}
.footer-menu-inner{
	max-width:1240px;
	margin:0 auto;
	padding:50px 52px 0;
	-webkit-column-count:3;
	-webkit-column-gap:32px;
	column-count:3;
	column-gap:32px;
}
@media screen and (max-width:979px){
	.footer-menu-inner{
		-webkit-column-count:2;
		column-count:2;
	}
}
@media screen and (max-width:640px){
	.footer-menu-inner{
		-webkit-column-count:auto;
		column-count:auto;
	}
}
@media screen and (max-width:480px){
	.footer-menu-inner{
		padding-left:20px;
		padding-right:20px;
	}
}