@charset "UTF-8";
/*========================================================
Reset CSS for HTML5
========================================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, main, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
ul {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
img {
	line-height: 1;
}
/*change colours to suit your needs*/
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}
input, select {
	vertical-align:middle;
}
/*========================================================
common
========================================================*/
/*--------------------------------------------- elements*/
body {
	min-width: 960px;
	line-height: 1.5;
	margin: 0 auto;
	padding: 0;
	color: #333;
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 14px;
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
.gnav a, h2, h2 a, h3, h3 a, h4 span { font-weight: bold }
p { line-height: 1.6 }
a {
	text-decoration: none;
	color: #333;
}
a:hover, a img:hover {
	text-decoration: underline;
	ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: 0.7;
}
/*---------------------------------------------- class*/
.content {
	width: 960px;
	margin: 0 auto;
	/*overflow: auto;*/
}
.main {
	float: right;
	width: 710px;
}
/* clearFix */
.clearfix:after, .gnav ul:after, .catHead p:after { display: block; clear: both; content: ""; }
/* breadcrumb */
.breadcrumb ul {
	display:block;
	width: 960px;
	margin: 0 auto;
	padding: 15px 0;
}
.breadcrumb ul li {
	display: inline-block;
	padding-right: 5px;
}
.breadcrumb ul li a {
	color: #333;
}
.breadcrumb ul li a span {
	font-weight: bold;
	color: #333;
}
/*========================================================
header
========================================================*/
.ghead {
	padding-top: 120px;
}
.gheadInner {
	position: fixed;
	top:0;
	width: 100%;
	background: #fff;
	z-index: 100;
		padding-bottom: 5px;
	box-shadow:0px 6px 6px -2px rgba(0,0,0,0.2);
	-moz-box-shadow:0px 6px 6px -2px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 6px 6px -2px rgba(0,0,0,0.2);
}
.gnavWarap {
	display: table;
	width: 960px;
	margin: 0 auto;
}
.gnavWarap > a {
	display: table-cell;
	vertical-align: bottom;
}
/* gnav */
.gnav {
	display: table-cell;
	vertical-align: top;
	padding-left: 34px;
}
.gnav ul {
	display: table;
}
.gnav li {
	display: table-cell;
	padding-right: 10px;
}
.gnav li:last-child {
	padding-right: 0;
}
.gnav li a {
	display: table-cell;
	width: 99px;
	padding: 30px 10px 15px;
	color: #eb5c02;
	border: solid 1px #eb5c02;
	border-top: none;
	border-radius: 0 0 6px 6px;
	vertical-align: bottom;
}
.gnav li:first-child a {
	padding-top: 51px;
	text-align: center;
}
#sp-gnav {
    display: none; /* ハンバーガーメニュー用のグロナビを非表示にする */
}
.gheadInner h1 {
	width: 960px;
	margin: 6px auto 0;
	text-align: right;
}
/*========================================================
side
========================================================*/
.side {
	float: left;
	width: 220px;
}
.sideRecom li {
	margin-bottom: 12px;
}
.sideRecom li a {
	font-weight: bold;
}
.sideRecom li:first-child a {
	display: block;
	position: relative;
	width: 220px;
	height: 90px;
	overflow: hidden;
	color: #fff;
}
.sideRecom li:first-child a img {
	position: absolute;
	top: -50px;
}
.sideRecom li:first-child a span {
	display: table-cell;
	position: relative;
	width: 200px;
	height: 90px;
	vertical-align: middle;
	padding: 0 10px;
	font-weight: bold;
	background: url(images/bg_bt.png);
}
/* side_about */
.side > span {
	display: block;
	margin-top: 40px;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}
.side .clearfix p {
	float: left;
	width: 135px;
}
.side .clearfix p a {
	color: #eb5c02;
	font-weight: bold;
}
.side .clearfix img {
	float: right;
	padding-top: 13px;
}
/*========================================================
recom
========================================================*/
.recom {
	margin-top: 100px;
	padding: 30px 20px 20px;
	background: #f2f2f2;
}
.recom h4 {
	margin-bottom: 20px;
	color: #eb5c02;
	font-size: 28px;
	text-align: center;
}
.recom > ul > li > ul > li > a {
	display: inline-block;
	padding: 10px 18px;
	color: #666;
	border: solid 1px #ccc;
	background: #fff;
}
.recom ul li h5 a {
	display: inline-block;
	margin: 13px 0;
	font-size: 16px;
}
.recom > ul > li > a {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 10px;
	color: #fff;
	border-radius: 6px;
	background: #eb5c02;
}
/*========================================================
footer
========================================================*/
.gfoot {
	margin-top: 65px;
}
.gfootInner {
	display: table;
	width: 960px;
	margin: 0 auto 30px;
}
/* fnav */
.fnav {
	display: table-cell;
}
.fnav li a {
	display: inline-block;
	margin-bottom: 8px;
	padding-left: 15px;
	background: url(images/arrow_02.gif) left 4px no-repeat;
}
.gfootInner > p {
	display: table-cell;
	width: 430px;
	vertical-align: bottom;
}
.gfootInner > p a {
	color: #eb5c02;
	font-weight: bold;
}
.gfootInner > p span {
	display: block;
	font-weight: bold;
	text-align: right;
}
.ftBottom {
	padding: 40px 0 30px;
	background: #3d3d3d;
}
.ftBottom small {
	display: block;
	width: 960px;
	margin: 0 auto;
	color: #fff;
}
/*========================================================
index
========================================================*/
.index .desc {
	padding: 40px 20px 50px;
	color: #fff;
	background: #eb5c02;
}
.index .desc h2 {
	margin-bottom: 15px;
	font-size: 24px;
	text-align: center;
}
/* index_recommend */
.indexRecom {
	margin-top: 30px;
}
.indexRecomCat {
	float: left;
	width: 340px;
}
.indexRecomCat h3 {
	margin: 7px 0 20px;
	color: #eb5c02;
	font-size: 28px;
	text-align: center;
}
.indexRecomCat span {
	display: block;
	position: relative;
	height: 145px;
	overflow: hidden;
}
.indexRecomCat span img {
	position: absolute;
	top: -100px;
}
.indexRecomCat a {
	display: block;
	margin: 20px 0;
	font-weight: bold;
	font-size: 18px;
}
.indexRecomNews {
	float: right;
	width: 300px;
	padding: 20px;
	background: #f2f2f2;
}
.indexRecomNews h3 {
	padding-bottom: 20px;
	color: #eb5c02;
	font-size: 28px;
	text-align: center;
	border-bottom: dotted 3px #ccc;
}
.indexRecomNews li {
	margin-top: 20px;
}
.indexRecomNews li a {
	padding-left: 18px;
	font-weight: bold;
	background: url(images/arrow_01.gif) left 2px no-repeat;
}
/*========================================================
category
========================================================*/
.catInner {
	padding: 30px 20px;
	background: #f3f3f3;
}
.catHead {
	position: relative;
	margin-bottom: 45px;
	padding: 30px 20px;
	color: #fff;
	background: url(images/cat_head_bg.gif);
}
.catHead h2 {
	margin-bottom: 25px;
	font-size: 24px;
	text-align: center;
}
.catHead p img {
	float: left;
	margin-right: 25px;
	border-radius: 50%;
	vertical-align: middle;
}
/* cat_post */
.catPost li {
	margin-bottom: 35px;
}
.catPost li div:first-child {
	margin-bottom: 10px;
}
.catPost li div:first-child > h3 a {
	float: left;
	font-size: 18px;
}
.catPost li div:first-child > a {
	display: inline-block;
	float: right;
	padding: 5px 15px;
	color: #fff;
	border-radius: 6px;
	background: #eb5c02;
}
.catPost li div:last-child {
	position: relative;
}
.catPost li span {
	display: block;
	position: relative;
	height: 265px;
	overflow: hidden;
	background: #000;
}
.catPost li span img {
	position: absolute;
	top: -200px;
	opacity: .7;
}
.catPost li p {
	position: absolute;
	top: 0;
	height: 189px;
	margin: 20px 20px 20px 0;
	padding: 18px;
	vertical-align: middle;
	color: #fff;
	border-radius: 0 6px 6px 0;
	background: rgba(0, 0, 0, 0.5);
}
/*========================================================
detail
========================================================*/
.detaHead {
	position: relative;
}
.detaHead span {
	display: block;
	position: relative;
	width: 710px;
	height: 280px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.7);
}
.detaHead span img {
	position: absolute;
	top: -200px;
	-webkit-filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	filter: progid:DXImageTransform.Microsoft.BasicImage(GrayScale=1);
}
.detaHead h2 {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	width: 710px;
	height: 280px;
}
.detaHead h2 span {
	display: table-cell;
	vertical-align: middle;
	color: #eb5c02;
	font-size: 28px;
	text-align: center;
}
/* deta_post*/
.detaPost h3 {
	padding-bottom: 10px;
	margin: 30px 0 20px;
	color: #eb5c02;
	font-size: 18px;
	border-bottom: solid 1px #eb5c02;
}
.detaPost p > a {
	color: #eb5c02;
	font-weight: bold;
}
.detaPost + div {
	margin-top: 30px;
	text-align: center;
}
.detaPost > div {
	margin: 15px 0;
}
.detaPost > div > p:nth-child(2n) {
	margin-bottom: 10px;
}
.detaPost > div > p:nth-child(2n) a {
	padding: 0 .3em;
	color: blue;
	font-weight: bold;
	transition: all .3s;
}
.detaPost > div > p:nth-child(2n) a:hover {
	color: #fff;
	background-color: #76e8fa;
	text-decoration: none;
}
.detaPost + div time {
	display: inline-block;
	padding: 20px;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	background: #eb5c02;
}
/* タブレット縦 */
@media screen and (max-width: 959px) {
	*{
		box-sizing: border-box;
	}
	
	body {
		min-width: inherit;
	}
	
	.ghead {
		padding-top: 90px;
	}
	
	.gheadInner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 3% 5px;
	}
	
	.gnavWarap {
		width: 100%;
	}
	
	.gnavWarap img {
		width: 100%;
		max-width: 281px;
		object-fit: contain;
	}
	
	.gheadInner h1{
		width: 100%;
		text-align: left;
		padding: 0 3% 0 10%;
		margin-top: 0;
	}
	
	.breadcrumb ul {
		width: 94%;
		padding: 15px 0 15px;
	}
	
	.breadcrumb ul li {
		display: inline;
	}
	
	.gnav {
	    display: none; /* PC用のグロナビを非表示にする */
	}
	
	#sp-gnav {
	    display: block; /* ハンバーガーメニュー用のグロナビを表示する */
	    padding: 20px; /* ハンバーガーの三本線が端っこに寄りすぎているので余白入れる */
	    position: relative;
	}

	/*チェックボックス等は非表示に*/
	.nav-unshown {
	    display:none;
	}
	
	/*アイコンのスペース*/
	#nav-open {
	    display: inline-block;
	    width: 30px;
	    height: 22px;
	    vertical-align: middle;
	}
	
	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
	    position: absolute;
	    height: 3px;/*線の太さ*/
	    width: 25px;/*長さ*/
	    border-radius: 3px;
	    background: #eb5c02;
	    display: block;
	    content: '';
	    cursor: pointer;
	}
	#nav-open span:before {
	    bottom: -8px;
	}
	#nav-open span:after {
	    bottom: -16px;
	}
	
	/*閉じる用の薄黒カバー*/
	#nav-close {
	    display: none;/*はじめは隠しておく*/
	    position: fixed;
	    z-index: 99;
	    top: 0;/*全体に広がるように*/
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: black;
	    opacity: 0;
	    transition: .3s ease-in-out;
	}
	
	/*中身*/
	#nav-content {
	    overflow: auto;
	    position: fixed;
	    top: 0;
	    right: 0;
	    z-index: 9999;/*最前面に*/
	    width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	    max-width: 330px;/*最大幅（調整してください）*/
	    height: 100%;
	    background: #fff;/*背景色*/
	    transition: .3s ease-in-out;/*滑らかに表示*/
	    -webkit-transform: translateX(215%);
	    transform: translateX(215%);/*左に隠しておく*/
	}
	
	#nav-content ul {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 20px;
		padding-left: 5%;
	}
	
	#nav-content li {
	    padding: 10px;
		border: solid 1px #eb5c02;
		border-right: none;
		border-radius: 3px 0 0 3px;
	}
	
	#nav-content li a {
		color: #eb5c02;
		font-weight: bold;
	}
	
	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
	    display: block;/*カバーを表示*/
	    opacity: .5;
	}
	
	#nav-input:checked ~ #nav-content {
	    -webkit-transform: translateX(0%);
	    transform: translateX(0%);/*中身を表示（右へスライド）*/
	    box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
	
	.content {
		width: 94%;
	}
	
	.side{
		width: 27%;
	}
	
	.sideRecom li {
		overflow: hidden;
	}
	
	.sideRecom li:first-child a {
		width: 100%;
		display: table;
	}
	
	.sideRecom li:first-child a span {
		width: 100%;
	}
	
	.sideRecom li:first-child a img {
		width: 100%;
		height: 100%;
		top: unset;
		object-fit: cover;
	}
	
	.side > span + div {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.side .clearfix::after {
		display: none;
	}
	
	.side .clearfix img {
		height: auto;
		order: 1;
	}
	
	.side .clearfix p {
		width: 100%;
		order: 2;
	}
	
	.main{
		width: 70%;
	}
	
	.index .desc h2 {
		font-size: min(4.5vw,24px);
	}
	
	.indexRecom {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
		gap: 30px 3%;
	}
	
	.indexRecom::after {
		display: none;
	}
	
	.indexRecomCat,
	.indexRecomNews{
		width: 100%;
	}
	
	.indexRecomCat span img {
		width: 100%;
		height: 100%;
		top: unset;
		object-fit: cover;
	}
	
	.indexRecomNews li {
		background: url(images/arrow_01.gif) left 2px center no-repeat;
		padding-left: 18px;
	}
	
	.indexRecomNews li a {
		background: none;
		padding-left: 0;
	}
	
	.recom h4 {
		font-size: min(4.5vw,28px);
	}
	
	.catHead p img{
		width: 150px;
		height: 150px;
	}
	
	.catHead p img {
		width: 25vw;
		max-width: 150px;
		height: 25vw;
		max-height: 150px;
		margin-right: 15px;
	}
	
	.catPost li div:first-child {
		margin-bottom: 0;
	}
	
	.catPost li div:first-child > h3 a {
		font-size: min(3.5vw,18px);
		margin-bottom: 5px;
	}
	
	.catPost li div:first-child > a {
		margin-bottom: 10px;
	}
	
	.catPost li div:last-child {
		overflow: hidden;
	}
	
	.catPost li span{
		width: 100%;
		height: 100%;
		position: absolute;
		top: ;
	}
	
	.catPost li span img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: static;
	}
	
	.catPost li p{
		width: calc(100% - 20px);
		height: auto;
		position: relative;
		border-radius: 6px 0 0 6px;
		margin: 20px 0 20px auto;
	}
		
	.detaHead span,
	.detaHead h2{
		width: 100%;
		height: 40vw;
		max-height: 280px;
	}
	
	.detaHead h2 span{
		height: 100%;
		font-size: min(5vw,28px);
		padding: 0 3%;
	}
	
	.detaHead span img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: static;
	}
	
	.detaPost p > a img{
		width: 100%;
		height: auto;
	}
	
	.gfootInner {
		width: 94%;
		display: block;
	}
	
	.fnav{
		width: 100%;
		display: block;
	}
	
	.fnav ul {
		width: 100%;
		display: flex;
		justify-content: space-between;
		gap: 10px 3%;
	}
	
	.gfootInner > p{
		width: 100%;
		display: block;
		margin-top: 40px;
	}
	
	.gfootInner > p span {
		text-align: left;
	}
	
	.ftBottom{
		width: 100%;
	}
	
	.ftBottom small{
		width: 94%;
	}
	
}


/* スマートフォン縦 */
@media screen and (max-width: 480px) {
	.ghead {
		padding-top: 130px;
	}
	
	.gheadInner {
		flex-wrap: wrap;
		align-items: start;
	}
	
	.gnavWarap {
		width: calc(100% - 70px);
		text-align: center;
		align-self: center;
		order: 1;
	}
	
	.gheadInner h1 {
		order: 3;
		padding: 10px 0;
	}
	
	#sp-gnav {
		align-self: end;
		order: 2;
		padding-right: 0; 
	}
	
	.main{
		width: 100%;
		float: none;
	}
	
	.index .desc h2 {
		font-size: max(5.2vw, 20px);
	}
	
	.indexRecom {
		display: flex;
		flex-direction: column;
		row-gap: 50px;
	}
	
	.recom{
		margin-top: 60px;
	}
	
	.recom h4 {
		font-size: max(5vw, 20px);
	}
	
	.recom > ul > li > a {
		display: table;
		margin: 10px 0 0 auto;
	}
	
	.catPost li div:first-child > h3 a {
		font-size: min(5.2vw,18px);
	}
	
	.detaHead h2 span {
		font-size: min(6.5vw,24px);
	}
	
	.side{
		width: 100%;
		float: none;
		margin: 80px auto;
	}
	
	.side > span {
		margin-top: 60px;
	}	
	
	.detaHead span img {
		top: -35px;
	}
	
	.fnav ul {
		flex-direction: column;
	}
	
	.fnav li a {
		margin-bottom: 0;
	}

}