@charset "utf-8";

/*Copyright 2018 Hyuga Kouzai.*/
/* CSS Document */
/* ------------------------------------------------ */
/* 1.共通
/* ------------------------------------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
/* ボックスサイズの計算方法を指定 */
* {
	box-sizing: border-box;
}
html{
	font-size: clamp(1rem, 2.5vw, 2rem);
}

body{
	margin: 0;
	padding: 0;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",Verdana, Roboto, "Droid Sans", sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #444444;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	background:#ffffff;
	/*テキスト選択不可*/
		-webkit-touch-callout:none;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none
}
ol, ul ,li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* リンクの基本スタイル */
a {
    margin:0;
    padding:0;
    vertical-align:baseline;
    background:transparent;
	color: #444444;
	transition: 0.5s;
	text-decoration:none;
}
/* リンクにマウスが乗ったときのスタイル */
a:hover {
	color: #333333;
	opacity: 0.7;
}
/* リンク後のスタイル */
a:visited {
	color:#333333;
	text-decoration:none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	vertical-align: top;
	font-size:0;
	line-height: 0;
	/*▼選択不可*/
	pointer-events: none;
	-moz-pointer-events: none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	user-select:none;
}

/* ------------------------------------------------ */
/* 2.ヘッダー
/* ------------------------------------------------ */

/* TOPページ以外のヘッダー */
header {
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	margin-bottom:1rem;
}
header .hed{
	display: grid;
	width:100%;
	margin:0 auto;
	grid-template-rows: 0.8rem 0.8rem 0.8rem 0.8rem;
	grid-template-columns: 65% 20% 15%;
	grid-auto-flow: column;
	background-color:#d3d3d3;
	background-image:url("../img/header_bg_top.png"),url("../img/header_bg.jpg");
	background-size:contain,cover;
	background-repeat: no-repeat,repeat-x;
	background-position:right,left;
	& > div{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-align-items: center; 	
		align-items: center; 	
	}
	& > div:nth-child(1){
		grid-row:span 1;
		padding-top: 0.5rem;
		padding-left: 2rem;
		font-size: 0.95vw;
	  }
	& > div:nth-child(2){
		grid-row:span 3;
		& > a picture{
			display: block;
			padding-left:2rem;
			margin-top:0.5rem;
			text-align: left;
			& > img{
				width:80%;
			}
		}
	}
	& > div:nth-child(3){
		grid-row:span 4;
	    display: table; 
		font-size: 1.5vw;
		font-weight: bold;
			& > p {
				display: table-cell;
				vertical-align: middle;
				text-align:center;
				line-height: 1rem;
				padding-bottom: 0;
				& > span{
					color:#c80405;
					font-size: 1.8vw;
					}
				}
	  }
	& > div:nth-child(4){
		grid-row:span 4;
		-webkit-justify-content: center;
		justify-content: center;
		& > a img{
			width:82%;
		}
	}
}
	
/*TOPページheader*/
#site-header{
    position: absolute;
    display: grid;
    width: 90vw;
    grid-template-columns: 1fr 5fr;
    gap: 1rem;
    padding-top:2rem;
    padding-bottom:2rem;
    z-index: 1000;
	& > div{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		box-sizing: border-box;
		color: #FFF;
		-webkit-align-items: center; 	
		align-items: center; 	
		-webkit-justify-content: center; 	
		justify-content: center; 	
		text-shadow: 0 2px 10px rgba(0,0,0,.3);
		font-family: 
			"Arial",
			"Hiragino Kaku Gothic ProN",
			"Hiragino Sans",
			"Noto Sans JP",
			sans-serif;
	}
	& > div:nth-of-type(2n) {
		justify-self: start;
		p{
		font-size: 0.8rem;
		color: #FFF;
		span{
			font-size: 1.2rem;
			& > a{
				color:#fff;
				text-decoration:none;
				}
			}
		}
	}
	img{
		width: 65%; 
		height: auto;
	}
}

/*global navi（TOPページ以外 ハンバーガーメニュー）*/
.menu-wrapper {
  position: relative;
  margin:0 auto;
  padding:0;
  overflow:hidden;
  box-sizing: border-box;
  z-index: 9999;
}
.menu-icon {
	display:none;
}
#gNav{
	width:100%;
	box-sizing: border-box;
	border-top:1px solid #dcdcdc;
	border-bottom:1px solid #dcdcdc;
	& > ul{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		margin:0 auto;
		padding:0;
		& > li{
			border-left: 1px solid #7dceec;
			text-align: center;
			width: 23%;
			list-style:none;
			z-index: 2;
			a{
				display: block;
				font-size: 1.2vw;
				line-height: 1.6rem;
				text-decoration: none;
			}
			&:hover{
				background-color: #BDF5FE;
				font-weight: bold;
			}
		}
		& > li.current{
				background-color: #89dffe;
				font-weight: bold;
				a{
					font-weight:600;
				}
		}
		& > li:nth-firtst-child,
		& > li:nth-child(8){
			border-left: none;
		}
	}
}

/*top page global navi（ハンバーガーメニュー）*/
#top .menu-wrapper {
	position: absolute;
	top:0;
	right:0;
	z-index: 9999;
}
#top .menu-icon {
	position: fixed;
	width: 40px;
	height: 50px;
	top: 2rem;
	right: 2rem;
	cursor: pointer;
	z-index: 9998;
	display: inline-block;
	& > span{
		display: block;
		height: 4.5px;/*線の太さ*/
		margin: 8px 0;/*線間隔*/
		background: #e6e5e5;
		border-radius: 2px;
		transition: 0.4s;
	}
}
#top #toggle:checked + .menu-icon span:nth-child(1) {
	transform: translateY(15px) rotate(45deg);
	background: #646464;
}
#top #toggle:checked + .menu-icon span:nth-child(2) {
	opacity: 0;
}
#top #toggle:checked + .menu-icon span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
	background: #646464;
}

/* オーバーレイ背景 menuを開くと画面表示全体がグレーに変化*/
#top .overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.1);
	opacity: 0;
	pointer-events: none;
	transition: 0.4s;
	z-index: 1;
}

#top #toggle:checked ~ .overlay {
	opacity: 1;
	pointer-events: auto;
}

/* メニュー本体（右から出す） */
#top #gNav {
	position: fixed;
	top: 0;
	right: -250px; /* ← 初期位置を右へ */
	width: 250px;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	color:#fff;
	background-color: #444;
	transition: left 0.4s ease;
	opacity: 0.9;
	z-index: 2;
	ul{
		display:block;
		list-style: none;
		padding: 3.5rem 1rem 1rem;
		& > li{
			display: block;
			width: 100%;
			margin-right: 0;
			border-left: none;
			border-bottom: 1px solid #ffffff;
			background-color: #444;
			text-align: left;
			line-height: 1.5rem;
				& > a{
				text-decoration: none;
				padding: 0.1rem;
				color: #fff;
				margin:0.3rem 0;
				font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
				font-size: 0.6rem;
				font-weight: 400;
				transition: color 0.3s;
				text-shadow: 0 2px 5px rgba(0,0,0,.3);
				&:hover{
					font-weight:bold;
					background-color:#ccc;
				}
			}
		}
	}
}
#top #toggle:checked ~ #gNav {
right: 0; /* ← 開いたときは右へ */
}
#top #gNav,#gNav{
	.hide{
	display:none;
	}
}
/*上部へ戻るボタン*/
#page_top{
	width: 90px;
	height: 90px;
	position: fixed;
	z-index: 3;/*重なり順序 デフォルト値0 数値が大きいほど前面へ*/
	right: 1rem;
	bottom: 1rem;
	background: #2AA8E5;
	opacity: 0.6;
	border:solid 2px #fff;
	border-radius: 50%;
	& > a{
		position: relative;
		display: block;
		width: 90px;
		height: 90px;
		text-decoration: none;
	}
	& > ::before{
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		content: '\f102';
		font-size: 25px;
		color: #fff;
		position: absolute;
		width: 25px;
		height: 25px;
		top: -40px;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		text-align: center;
	}
	& > ::after{
		content: 'PAGE TOP';
		font-size: 13px;
		color: #fff;
		position: absolute;
		top: 45px;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		text-align: center;
	}
}
/*------------------------------------------------------------------------
	パンくずリスト
--------------------------------------------------------------------------*/
.breadcrumbs {
	display: block;
	position: relative;
	width:95%;
	margin: 0rem auto 1rem;
	font-size: 1.2vw;
}
/*------------------------------------------------------------------------
	画像
--------------------------------------------------------------------------*/
/*会社概要　設備一覧*/
.photoframe {
	border: 1px solid #eeeeee;
	border-radius: 4px;
	box-shadow: 1px 1px 1px #999999;
	padding: 0px;
}
/*鋼材販売*/
#products .photoframe {
	border: 1px solid #eeeeee;
	border-radius: 4px;
	box-shadow: 1px 1px 1px #999999;
	padding: 0px;
}
/* ------------------------------------------------ */
/* 3.コンテンツ
/* ------------------------------------------------ */

/* タイトルのスタイル */
h2 {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-align-items: center; 	
	align-items: center; 	
	-webkit-justify-content: center; 	
	justify-content: center; 	
	color: #555;
	text-align:center;
	line-height:1.2rem;
	font-weight: bold;
	font-size: 1.8vw;
	letter-spacing:0.5rem;
	margin:0.5rem 1rem;
	padding: 0.2rem;
	background-color:#eeeeee;
	background-image: radial-gradient(#d9d9d9 20%, transparent 33%), radial-gradient(#ccc 30%, transparent 33%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;	height:100%;
}
h2 span{
	display: none;
}
/* 小見出し */
h3 {
	font-weight: bold;
	margin-bottom: 25px;
}

/* ▼各ページ共通class */
/*products plasma process machine */
#business_contents{
	align-items:center;
}
.entry-content {
	margin-bottom: 2rem;
}

.entry-content::after {
	content: '';
	display: block;
	clear: both;
}

body.archive .entry-content img {
	float: left;
	margin: 0 15px 15px 0;
	width: 250px;
	height: auto;
}

/* ------------------------------------------------ */
/* 4.フッター
/* ------------------------------------------------ */
footer {
	position: relative;
	width:100%;
	z-index: 10;
	background: #2AA8E5;
	color: #ffffff;
	font-family: 
	"Yu Mincho",
	"Hiragino Mincho Pro",
	"Yu Gothic",
	"Arial",
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	"Noto Sans JP",
	sans-serif,
	serif;
	& > #fNav{
		margin: 0;
		padding: 0.5rem 0;
		font-size:1.2rem;
		background-color: #5bc6fc;
		background-image:
		radial-gradient(#6dcefe 30%, transparent 33%),
		radial-gradient(#6dcefe 30%, transparent 33%);
		background-size: 8px 8px;
		background-position: 0 0, 4px 4px;
		
		& > ul {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 0px;
			margin:0.5rem 5rem;
			& > li{
				width: 100%;
				padding: 0.5rem 0;
				text-align: center;
				list-style:none;
				line-height: 1.5vw;
				font-family: メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
				font-size:1.3vw;
				& > a{
					color: #fff;
					text-decoration: none;
					&:hover{
						font-weight: bold;
						opacity: 1;
					}
				}
			}
			& > li:nth-child(2),
			li:nth-child(5),
			li:nth-child(8),
			li:nth-child(11){
				border-left: 1px solid #fff;
				border-right: 1px solid #fff;
			}
		}
	}
	& > .footer_contact{
		/*margin-top: 2rem;*/
		padding:1.5rem 0;
		text-align:center;
		text-decoration: none;
		& > p{
			color: #fff;
			font-size:1.2vw;
			text-decoration: none;
			& > a{
			text-decoration: none;
				color: #fff;
				& :hover{
				color: #fff;
				font-weight: bold;
				text-decoration: none;
				}
			}
		}
		& > p:first-child{
			font-weight: 300;
			font-size:2.8vw;
			text-align: center;
		}
		& > p:nth-of-type(2){
			margin-top: 0.5rem;
			font-size:1vw;
		}
		& > p:nth-of-type(3){
			font-size:1.6vw;
		}
		& > p:last-child{
			font-size:1vw;
			& > span{
				font-size:1.5vw;
			}
		}
	}
	& > .f_bar{
		width: 100%;
		display: block;
		padding:1% 0;
		background-color: #3d3d3d;
		color:#fff;
		text-align: center;
		& > p{
			letter-spacing: 0.1vw;
			font-size: 0.9vw;
		}
	}
}

/* ------------------------------------------------ */
/* タブレット*/
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (min-width: 760px) and (max-width:1300px) {
	/*上部へ戻るボタン*/
	#top #gNav {
		ul{
			padding: 4rem 1rem 1rem;
			& > li{
				& > a{
				font-size:1.8vw;
				}
			}
		}
	}
	h2 {
		font-size: 1.8vw;
	}
}

/* ------------------------------------------------ */
/* 600～700pxのタブレットサイズに対応
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (min-width: 600px) and (max-width:700px) {
	/* ▼フッターナビゲーション */
	#fNav ul li {
		font-size:0.5em;
	}
}


/* ------------------------------------------------ */
/* レスポンシブ（780px以下）
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:780px) {

	/* ------------------------------------------------ */
	/* 1.共通
	/* ------------------------------------------------ */
	body {
		padding-bottom: 1rem; /* .f_bar の高さに合わせて調整 */
	}
	#page_top{
		z-index: 9997;/*重なり順序 デフォルト値0 数値が大きいほど前面へ*/
		right: 0.5rem;
		bottom: 2.5rem;

	}
	/* パンくずリスト */
	.breadcrumbs {
		display: block;
		position: relative;
		width: 95%;
		padding-top:4.5rem;
		font-size: 3vw;
	}
	/* ------------------------------------------------ */
	/* 2.レイアウト
	/* ------------------------------------------------ */

	/* ページ全体を画面の横幅に合せる */
	#wrapper {
		width: 100%;
		margin-top:0px;
	}

	/* ------------------------------------------------ */
	/* 3.ヘッダー
	/* ------------------------------------------------ */
	header {
		position: fixed;
		padding-top: 0px;
		/*height:4rem;*/
		z-index: 9997;
	}
	header .hed{
		display: grid;
		width:100%;
		margin:0 auto;
		grid-template-rows: 1rem 1rem 1rem 1rem;
		grid-template-columns: 56% 28% ;
		grid-auto-flow: column;
		background-image:url("../img/header_bg_top.png"),url("../img/header_bg.jpg");
		& > div{
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			-webkit-align-items: center; 	
			align-items: center; 	
		}
		& > div:nth-child(1){
			grid-row:span 1;
			padding-top: 1rem;
			padding-left: 0.5rem;
			font-size: 1.5vw;
		}
		& > div:nth-child(2){
			grid-row:span 3;
			& > a picture{
				padding-left:0.5rem;
				& > img{
					width:100%;
				}
			}
		}
		& > div:nth-child(3){
		grid-row:span 4;
		font-size: 2.5vw;
			& > p {
				line-height: 1.5rem;
				& > span{
					font-size: 2.8vw;
					& > a{
					color:#c80405;
					font-size: 3vw;
					}
				}
			}
		}
		& > div:nth-child(4){
			display: none;
		}
	}
	/*TOPページheader*/
	#site-header{
		width: 85vw;
		grid-template-columns: 1fr 4fr;
		padding:1rem 0 0 0.5rem;
		& div:nth-of-type(2n) {
			p{
			font-size: 1rem;
				span{
					font-size: 1.5rem;
					}
			}
		}
		& div:first-child img{
			width: 100%; 
			height: auto;
		}
	}

	/*global navi（ ハンバーガーメニュー）*/
	.menu-wrapper,
	#top .menu-wrapper {
		position: absolute;
		top:0;
		right:0;
		z-index: 9998;
	}
	.menu-icon,
	#top .menu-icon	{
		width: 40px;
		height: 50px;
		position: fixed; /* ← fixedにして常に左上固定 */
		top: 0.8rem;
		right: 1rem;
		cursor: pointer;
		z-index: 9999;
		display: inline-block;
		& > span{
			display: block;
			height: 4.5px;/*線の太さ*/
			margin: 8px 0;/*線間隔*/
			background: #646464;
			border-radius: 2px;
			transition: 0.4s;
		}
	}
	#top .menu-icon span {
		background: #e6e5e5;
	}
	/* ハンバーガーがXに変形 */
	#toggle:checked + .menu-icon span:nth-child(1) {
		transform: translateY(15px) rotate(45deg);
		background: #646464;

	}
	#toggle:checked + .menu-icon span:nth-child(2) {
		opacity: 0;
	}
	#toggle:checked + .menu-icon span:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
		background: #646464;

	}

	/* オーバーレイ背景 menuを開くと画面表示全体がグレーに変化*/
	.menu-wrapper .overlay {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.1);
		opacity: 0;
		pointer-events: none;
		transition: 0.4s;
		z-index: 1;
	}
	/* メニューが開いている時 */
	.menu-overlay.is-active {
		opacity: 1;
		visibility: visible;
	}
	
	#toggle:checked ~ .overlay {
		opacity: 1;
		pointer-events: auto;
	}

	/* メニュー本体（右から出す） */
	#gNav,
	#top #gNav {
		position: fixed;
		top: 0;
		right: -250px; /* ← 初期位置を右へ */
		width: 250px;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		color:#fff;
		background-color: #444;
		transition: left 0.4s ease;
		opacity: 0.9;
		z-index: 2;
	}
	#toggle:checked ~ #gNav {
		right: 0; /* ← 開いたときは右へ */
	}
	#gNav,
	#top #gNav{
		 & > ul {
			display:block;
			width: 100%;
			padding:3rem 1rem;
			& > li{
				display: block;
				width: 100%;
				margin-right: 0;
				border-left: none;
				border-bottom: 1px solid #ffffff;
				background-color: #444;
				text-align: left;
				line-height: 3rem;
					& > a{
					margin:0.8rem 0;
					padding:0.1rem 1rem;
					color: #fff;
					font-size: min(1.2rem,3.8vw);
					font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
					&:hover{
						font-weight:bold;
						background-color: #cccccc;
					}
				}
			}
			& > li.current{
				background-color: #444;
				a{
					font-weight:normal;
				}
			}
		}
	}

	/* メニューが開いている時 */
	.global-nav.is-active {
		right: 0; /* 画面内にスライド */
	}	
	#top #gNav,#gNav{
	 .hide{
		display:block;
	}
}

	/* ------------------------------------------------ */
	/* 4.コンテンツ
	/* ------------------------------------------------ */

	/* エリア内枠のスタイル */
	#contents{
		z-index: 1;
	}
	#contents .inner {
		padding: 0 10px;
	}

	/* 見出しを左右中央寄せ */
	h2 {
		margin-top:1rem;
		text-align: center;
		font-size: 1.1rem;
		letter-spacing: 0.2em;
		line-height: 2rem;
	}
	h2 span{
		display:contents;
	}
	/* ------------------------------------------------ */
	/* 4.フッター
	/* ------------------------------------------------ */
	footer {
		width: 100%;
		& > #fNav{
			display: none;
		}
		& > .footer_contact{
			margin: 0;
			padding:1.5rem 0;
			text-align:center;
			text-decoration: none;
			& > p{
				color: #fff;
				font-size:1rem;
				text-decoration: none;
				& > a{
				text-decoration: none;
					color: #fff;
					& :hover{
					color: #fff;
					font-weight: bold;
					text-decoration: none;
					}
				}
			}
			& > p:first-child{
				font-weight: 300;
				font-size:1.2rem;
				text-align: center;
			}
			& > p:nth-of-type(2){
				margin-top: 0.5rem;
				font-size:0.6rem;
			}
			& > p:nth-of-type(3){
				font-size:0.8rem;
			}
			& > p:last-child{
				font-size:0.6rem;
				& > span{
					font-size:0.8rem;
				}
			}
		}
		& > .f_bar{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding:0.2rem 0;
			color:#fff;
			text-align: center;
			& > p{
				letter-spacing: 0.1vw;
				font-size: 0.5rem;
			}
		}
	}


}
/* ------------------------------------------------ */
/* 380px以下に対応
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:380px)  and (max-height: 890px){
	#gNav,
	#top #gNav{
		 & > ul {
				& > li{
					& > a{
					margin:0.8rem 0;
					padding:0.1rem 1rem;
					color: #fff;
					font-size: min(1.2rem,5vw);
					font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
					&:hover{
						font-weight:bold;
						background-color: #cccccc;
					}
				}
			}
			& > li.current{
				background-color: #444;
				a{
					font-weight:normal;
				}
			}
		}
	}
}
/* ------------------------------------------------ */
/* スマホ横向き時 450px以下 */
/* ------------------------------------------------ */
@media screen and (orientation: landscape) and (max-height: 450px) {
	header .hed{
		display: grid;
		margin:0 auto;
		grid-template-rows: 1rem 1rem 1rem 1rem;
		grid-template-columns: 45% 28% ;
		& > div{
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			-webkit-align-items: center; 	
			align-items: center; 
		}
		& > div:nth-child(1){
			grid-row:span 1;
			padding-top: 1rem;
			padding-left: 1rem;
			font-size: 1.1vw;
		}
		& > div:nth-child(2){
			grid-row:span 3;
			& > a picture{
				padding-left:0.5rem;
				& > img{
					width:80%;
				}
			}
		}
		& > div:nth-child(3){
		grid-row:span 4;
		font-size: 2vw;
			& > p {
				line-height: 1.5rem;
				& > span{
					font-size: 2.5vw;
					& > a{
					color:#c80405;
					font-size: 3vw;
					}
				}
			}
		}
		& > div:nth-child(4){
			display: none;
		}
	}
	#site-header{
		width: 85vw;
		grid-template-columns: 1fr 4fr;
		padding-top:1rem;
		& > div:nth-of-type(2n) {
			& > p{
			font-size: 1rem;
				span{
					font-size: 1.5rem;
					}
			}
		}
		& > div:first-child img{
			width: 65%; 
			height: auto;
		}
	}
	/*global navi（ ハンバーガーメニュー）*/
	.menu-wrapper,
	#top .menu-wrapper {
		position: absolute;
		top:0;
		right:0;
		z-index: 9999;
	}
	.menu-icon,
	#top .menu-icon	{
		width: 40px;
		height: 50px;
		position: fixed; /* ← fixedにして常に左上固定 */
		top: 0.8rem;
		right: 1rem;
		cursor: pointer;
		z-index: 9998;
		display: inline-block;
		& > span{
			display: block;
			height: 4.5px;/*線の太さ*/
			margin: 8px 0;/*線間隔*/
			background: #646464;
			border-radius: 2px;
			transition: 0.4s;
		}
	}
	#top .menu-icon span {
		background: #e6e5e5;
	}
	/* ハンバーガーがXに変形 */
	#toggle:checked + .menu-icon span:nth-child(1) {
		transform: translateY(15px) rotate(45deg);
		background: #646464;

	}
	#toggle:checked + .menu-icon span:nth-child(2) {
		opacity: 0;
	}
	#toggle:checked + .menu-icon span:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
		background: #646464;

	}

	/* オーバーレイ背景 menuを開くと画面表示全体がグレーに変化*/
	.menu-wrapper .overlay {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.1);
		opacity: 0;
		pointer-events: none;
		transition: 0.4s;
		z-index: 1;
	}
	/* メニューが開いている時 */
	.menu-overlay.is-active {
		opacity: 1;
		visibility: visible;
	}
	
	#toggle:checked ~ .overlay {
		opacity: 1;
		pointer-events: auto;
	}

	/* メニュー本体（右から出す） */
	#toggle:checked ~ #gNav {
		right: 0; /* ← 開いたときは右へ */
	}
	#gNav,
	#top #gNav{
		position: fixed;
		top: 0;
		right: -250px; /* ← 初期位置を右へ */
		width: 250px;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		color:#fff;
		background-color: #444;
		transition: left 0.4s ease;
		opacity: 0.9;
		z-index: 2;
		 & > ul {
			display:block;
			width: 100%;
			padding:4rem 1rem 1rem;
				& > li{
				display: block;
				width: 100%;
				margin-right: 0;
				border-left: none;
				border-bottom: 1px solid #ffffff;
				background-color: #444;
				text-align: left;
				line-height: 1.5rem;
					& > a{
					margin: 0;
					padding:0.5rem 1rem;
					color: #fff;
					font-size: min(0.8rem,2vw);
					font-family: "M PLUS Rounded 1c", メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
					&:hover{
						font-weight:bold;
						background-color: #cccccc;
					}
				}
			}
		}
	}
	#top #gNav,#gNav{
	 .hide{
		display:block;
	 }
	}

	/* メニューが開いている時 */
	.global-nav.is-active {
		right: 0; /* 画面内にスライド */
	}	
	#gNav .hide{
		display:block;
	}
	#site-header div:nth-of-type(2n){
	font-size: 0.5rem;
		span{
		font-size: 1.2rem;
		}
	}
	/* エリア内枠のスタイル */
	#contents{
		z-index: 1;
	}
	#contents .inner {
		padding: 0 10px;
	}

	/* 見出しを左右中央寄せ */
	h2 {
		margin-top:1rem;
		text-align: center;
		font-size: 1.1rem;
		letter-spacing: 0.2em;
	}
	h2 span{
		display:contents;
	}
}
/* ------------------------------------------------ */
/* /* 画面が2つの領域に分割（開いた状態） */
/* ------------------------------------------------ */
@media (horizontal-viewport-segments: 2){
	/* パンくずリスト */
	.breadcrumbs {
		font-size: 1.8vw;
	}
}