@charset "utf-8";
/* CSS Document */

/*NotoSansJP*/
@font-face {
font-family:"Noto Sans JP";
src:url("../fonts/Noto_Sans_JP/NotoSansJP-Black.ttf") format("TrueType");
font-display:swap;
font-style:normal;
font-weight:800;
}

@font-face {
font-family:"Noto Sans JP";
src:url("../fonts/Noto_Sans_JP/NotoSansJP-Bold.ttf") format("TrueType");
font-display:swap;
font-style:normal;
font-weight:600;
}

@font-face {
font-family:"Noto Sans JP";
src:url("../fonts/Noto_Sans_JP/NotoSansJP-SemiBold.ttf") format("TrueType");
font-display:swap;
font-style:normal;
font-weight:500;
}

@font-face {
font-family:"Noto Sans JP";
src:url("../fonts/Noto_Sans_JP/NotoSansJP-Regular.ttf") format("TrueType");
font-display:swap;
font-style:normal;
font-weight:400;
}

@font-face {
font-family:"Noto Sans JP";
src:url("../fonts/NotoSans/NotoSansJP-Light.ttf") format("TrueType");
font-display:swap;
font-style:normal;
font-weight:300;
}

/* Shippori Mincho */
@font-face {
font-family:"Shippori Mincho";
src:url("../fonts/Shippori_Mincho/ShipporiMincho-Bold.ttf") format("TrueType");
font-display:swap;
font-style:normal;
font-weight:700;
}

@font-face {
font-family:"Shippori Mincho";
src:url("../fonts/Shippori_Mincho/ShipporiMincho-SemiBold.ttf") format("TrueType");
font-display:swap;
font-style:normal;
font-weight:500;
}

@font-face {
/*フォントの名前*/
font-family:'Roboto Condensed';
src: url("../fonts/Robot/RobotoCondensed-SemiBold.ttf") format("TrueType"),
	url("../fonts/Robot/RobotoCondensed-Bold") format("TrueType");
font-display:swap;
}

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 15px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック,メイリオ, Meiryo,sans-serif;
	font-weight: 400;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background: #fff;
}

a{
	color:#007bbb;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

.t-blue { color:#192f60!important; }
.t-bold { font-weight:bold !important;}
.mincho { font-family: 'Shippori Mincho', serif!important; }

a:active, a:focus,input:active, input:focus{outline:0;}

.clearFix:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
.clearFix { display:inline-block; }

/* for macIE \*/
* html .clearFix { height:1%; }
.clearFix { display:block; }

.mt10 { margin-top:10px!important; }
.mt15 { margin-top:15px!important; }
.mt20 { margin-top:20px!important; }
.mt25 { margin-top:25px!important; }
.mt30 { margin-top:30px!important; }

.mb10 { margin-bottom:10px!important; }
.mb15 { margin-bottom:15px!important; }
.mb20 { margin-bottom:20px!important; }
.mb25 { margin-bottom:25px!important; }
.mb30 { margin-bottom:30px!important; }

.font-110 { font-size:110%; }
.font-120 { font-size:120%; }
.font-150 { font-size:150%; }
.t-center { text-align:center !important;}
.t-right { text-align:right!important;}

@media screen and (min-width: 650px){	
.br-pc { display:block; }
.br-sp { display:none; }
}
@media screen and (max-width: 650px){	
.br-pc { display:none; }
.br-sp { display:block; }
.font-110 { font-size:100%; }
.font-120 { font-size:100%; }
.font-150 { font-size:110%; }
.font-150 { font-size:110%; }
}


h1, h2{
	font-family: 'Shippori Mincho', serif;
	color:#19448e;
	font-weight: bold;
}

img{
	max-width: 100%;
	height: auto;
}

section{
  clear: both;
  margin:70px 0 200px;
}

section.gray{
  clear: both;
  margin:70px 0 200px;
  background:#fafafa;
  height:200px;
}

section h2{
	margin: 150px auto;
	font-size:35px;
	padding:0 30px;
	text-align: center;
	position:relative;
}

section h2:before,
section h2:after {
  position: absolute;
  content: '';
}

section h2:after {
  top: -60px;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-left: 1px solid #19448e;
}

section h2:before {
  top: -40px;
  right: calc(50%);
  width: 40px;
  height:40px;
  border-top: 1px solid #19448e;
}

.inner80{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 50px;
}

.inner60{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 80px;
}

@media screen and (max-width: 768px){
section h2{
	font-size:28px;
}
section h2:after {
  left: calc(55% - 20px);
}

section h2:before {
  right: calc(45%);
}
}

@media screen and (max-width: 767px){
section h2{
	font-size: 24px;
}
}

@media screen and (max-width: 768px){
section{
  clear: both;
  margin:50px 30px;
}

.inner80{
	width: 94%;
	margin: 0 auto;
	padding-bottom: 30px;
}
.inner60{
	width: 94%;
	padding-bottom: 30px;
}	
}


/* ヘッダー
------------------------------------------------------------*/
.menu-company-info {
	margin: 20px auto;
	padding: 20px 25px;
	width:70%;
	font-size:13px;
	background:url(../images/tiny_grid.png) repeat;
}
.menu-company-info h2 {
	font-size: 17.5px;
	font-family: 'Noto Sans JP', Arial, Verdana, 游ゴシック,メイリオ, Meiryo,sans-serif;
	margin-bottom:10px;
	letter-spacing: 1.5px;
	text-align:center;
	line-height: 1.6;
}


.menu-company-info p {
	/* padding-left:10px; */
	line-height: 1.6;
}

@media screen and (max-width:1536px){
.menu-company-info {
	margin:15px auto;
	padding:15px 20px;}
}

@media screen and (max-width:1380px){
.menu-company-info h2 {
	font-size: 15px;
	line-height: 1;
}
.menu-company-info {
	font-size:11.5px;
}
.menu-company-info {
	margin: 10px auto 10px;
	padding: 20px 20px;
	}
}

@media screen and (max-width: 1000px){
.menu-company-info {
    margin: 0 auto 0 !important;
    padding: 25px 0;
    width: 100%;
}
.menu-company-info p {
	padding: 10px 20px 10px 0;
	text-align:left;
	width:40%;
	display: inline-block;
}
}



/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 20px 50px;
	text-align: center;
	font-size: 12px;
}

/*　３カラム
------------------------------------------------------------*/

ul.col_3 {
	width:90%;
	margin: 0 auto;
}

ul.col_3 li{
	padding-bottom:80px;
}

.col_3 li{
  display: inline-block;
  width: 28%;
  padding: 0 2%;
  vertical-align: top;
  text-align: left;
}

.col_3 .youtube{
	margin: 0 auto;
}

ul.top-youtube p { 
text-align:center!important; 
font-size:16px!important;}

ul.top-youtube p a{ 
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

ul.top-youtube p a:hover { 
opacity:0.7;}

@media screen and (max-width: 768px){	
.col_3 li{
  text-align: center;
  width:45%;
}
}

@media screen and (max-width: 767px){	
.col_3{
  text-align: center;
}
.col_3 li{
  margin: 0 auto 50px;
  display: block;
  text-align: center;
  width:100%;
}
}

/*　２カラム
------------------------------------------------------------*/
ul.col_2 {
	width:100%;
	margin: 0;
	padding:0;
}

.col_2 li{
	padding-bottom:80px;
}

ul.col_2 li{
  display: inline-block;
  width:39.5%;
  padding: 0 5%;
  margin:0;
  vertical-align: top;
  text-align: left;
}

@media screen and (max-width: 767px){	
.col_2{
  text-align: center;
}
ul.col_2 li{
  margin: 0 auto 50px;
  padding:0;
  display: block;
  text-align: center;
  width:100%;
}
}

ul.col_2 li h2 {
	font-size:24px;
	font-family: 'Noto Sans JP', Arial, Verdana, 游ゴシック,メイリオ, Meiryo,sans-serif;
	font-weight: 600;
	margin:0 0 20px 0;
	padding:0;
	text-align:left;
	line-height:1.5;
}

ul.col_2 li h2::before,ul.col_2 li h2::after {
display:none;
}

ul.col_2 li h2 span {
display:block;
font-size:13px;
color:#888;
letter-spacing:1.5px;
}

ul.col_2 li p {
padding-left:10px;
}

@media screen and (max-width: 767px){	
ul.col_2 li h2 {
text-align:center;
}
ul.col_2 li p {
padding:0;
}
}

/* ヘラ絞り
------------------------------------------------------------*/
.metal-spinning{
	clear: both;
	overflow: hidden;
	padding-bottom: 50px;
}

.metal-spinning div {float:left;width:45%;}
.metal-spinning img{
	float:right;
	width:45%;
	margin: 5px 0 20px 10%;
}

.metal-spinning h2 {
	position:relative;
	margin:0 0 30px;
	font-size:30px;
	padding-left:15%;
	text-align:left;
	line-height:1.5;
	padding-right: 0;
}

.metal-spinning h2::after { 
	position: absolute;
	top: 50%;
	left:0;
	z-index: 1;
	content: '';
	display: block;
	width:10%;
	height: 2px;
	background:rgba(10,60,150,1.0);
}
	
.metal-spinning p{
	margin-bottom: 20px;
}

@media only screen and (max-width:431px){
.metal-spinning div {
	float:none;width:100%;
}
.metal-spinning img{
	float: none;
	display: block;width:100%;
	margin: 0 auto 20px;
}

.metal-spinning h2 {
	position:relative;
	margin:0 0 30px;
	font-size:24px;
	padding-left:15%;
	text-align:left;
	line-height:1.5;
}
}

/* RESPONSIVE 設定
------------------------------------------------------------*/
#mainnav a{
	color: #000;
}

@media only screen and (min-width: 1000px){
	body{
		font-size:14px;
	}
	
	#wrapper{
		width: 100%;
	}
	#content{
		width: 80%;
		float:right;
	}
	
	#sidebar{
		/*width: 12%;*/
		width:20%;
		position: fixed;
		top:0;
		height:100%;
		margin:0 0 0 0;
		overflow-y: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}	
  a#menu{
		display:none;
	}
	.panel{
		display:block !important;
	}	
	#mainnav li{
		font-size: 14px;
		font-weight:500;
		letter-spacing:1px;
	}

	#mainnav li a {
		font-family: 'Noto Sans JP', sans-serif!important;
		text-decoration:none;
		display:block;
		position:relative;
		  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
	}

#mainnav li a::before,
#mainnav li a::after {
  position: absolute;
  content: '';  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}	
#footer{
padding: 30px 10px 70px 0;}
}


/*2024ロゴ、メニューレスポンシブ調整*/
#sidebar h1{
		text-align:center;
		/*background:#19448e;*/
		background:#223a70;
}
#sidebar h1 img{
		max-width:90%;
		width:155px;
}
#sidebar h1 span {
		display:block;
		color:#fff;
		letter-spacing:1.5px;
		font-size:16px;
		font-weight:500;
		margin: 0px 5px 0 0px;
		font-family: 'Noto Sans JP', Arial, Verdana, 游ゴシック,メイリオ, Meiryo, sans-serif;
}
#sidebar h1 span:nth-of-type(1) {
		font-size:10px;
		margin: 3px 0 0px 0px;
}
#sidebar h1 span:nth-of-type(3) {
		font-size:9px;
		margin:0 5px 0 0px;
}

/*メニュー*/
#mainnav li a {
	padding: 20px 0 20px 25%;
}
/*メニューの＋*/
#mainnav li a::before {
  top:calc(50% - 4px);
  left:calc(20% + 5px);
  width: 10px;
  height:10px;
  border-left: 1px solid #19448e;
}
#mainnav li a::after {
  top:50%;
  left:calc(20%);
  width: 10px;
  border-top: 1px solid #19448e;
}
#mainnav li a:hover {
  padding: 20px 0 20px 30%;
  color:#19448e;
  background:#fafafa;
}

#mainnav li a:hover::before {
  display:none;
}
#mainnav li a:hover::after {
  top:50%;
  left:calc(0%);
  width:25%;
  border-top: 1px solid #19448e;
}


/*2024サイドバー*/
#sidebar h1{padding: 30px 0 20px;}

#sidebarWrap{
		margin-left:0;
		margin-right:0;
		margin-top:20px;
	background:#fff;
}

@media only screen and (max-width:1560px){
#sidebar h1{
padding:30px 0 20px;
}
#sidebarWrap{
	margin-left:0;
	margin-right:0;
	margin-top:15px;
}
#mainnav li a {
	padding:15px 0 15px 22%;
}
#mainnav li a:hover {
  padding: 15px 0 15px 26.5%;
  color:#19448e;
  background:#fafafa;
}
/*メニューの＋*/
#mainnav li a::before {
  top:calc(50% - 4px);
  left:calc(15% + 5px);
  width: 10px;
  height:10px;
  border-left: 1px solid #19448e;
}
#mainnav li a::after {
  top:50%;
  left:calc(15%);
  width: 10px;
  border-top: 1px solid #19448e;
}
}

@media only screen and (max-width:1380px){
#sidebar h1{
padding:18px 0 13px;
}
#sidebar h1 img{
	max-width:90%;
	width:135px;
}
}

@media only screen and (max-width: 1200px){
#sidebarWrap {
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    margin-bottom: 60px;
}
#mainnav li a {
padding: 15px 0 15px 25%;
}
#mainnav li a::before {
  left:calc(18% + 5px);
}

#mainnav li a::after {
  left:calc(18%);
}
.menu-company-info {
	margin: 10px auto;
	width: 88%;
	padding: 18px 0;
}
.menu-company-info h2 {
    font-size:15px;
}
.menu-company-info p {
    padding-left:15px;
    font-size:11px;
}
#sidebar h1 span {
		letter-spacing:1px;
		font-size:15px;
		margin: 0px 5px 0px 0px;
}
#sidebar h1 span:nth-of-type(3) {
		margin:-3px 5px 0 0px;
}
}

@media only screen and (max-width:1000px){
#sidebarWrap {
    margin-bottom:30px;
}
.menu-company-info {
	margin: 10px auto;
	width:100%;
}
}

@media only screen and (max-width:840px){
#mainnav li a:hover::after {
  display:none;
}
.menu-company-info h2 {
    font-size:20px;}
.menu-company-info p {
    font-size:17px;
}
}

@media only screen and (max-width:767px){
.menu-company-info h2 {
    font-size:18px;
}
.menu-company-info p {
    padding-left: 10px;
    font-size:15px;
}
}
@media only screen and (max-width:400px){
.menu-company-info p {
    font-size:14px;
}
}


@media only screen and (min-width: 641px){
	.col2 li{
		width: 60%;
		vertical-align: top;
	}
	.col2 li:first-child{
		width: 35%;
		padding-right: 4%;
	}
}

@media only screen and (max-width: 640px){
	#map iframe{
		width: 96% !important;
		left: 2%;
	}
}

@media only screen and (max-width: 1000px){
	#sidebar{
		position: fixed;
		width: 100%;
		z-index:500;
	}
	
	#sidebarWrap{
		position: relative;
		width: 100%;
		height: 60px;
		background:#1c305c;
		margin-top: 0px;
		/*border-bottom: 1px solid #ccc;*/
		box-shadow: 0 0 8px gray;
	}
	
#sidebar h1 div.logo-deco {
display:none;
}
#sidebar h1 div.logo-deco-bottom {
display:none;
}

#sidebar h1{
	text-align:left;
	padding:0 0 0 calc( 50% - 75px);
}
#sidebar h1 span {
	position:absolute;
	top: 5px;
	z-index:501;
	text-align:center;
	margin: 0 auto 0;
}
#sidebar h1 span:nth-of-type(1) {
	margin-left:10px;
}
#sidebar h1 span:nth-of-type(2) {
	font-size:18px;
	top: 20px;
}
#sidebar h1 span:nth-of-type(3){
	display: none;
}

#sidebar h1 img {
	position: absolute!important;
	top: 7px;
	margin:0!important;
	left: 20px!important;
	z-index:501;
	width: 100px!important;
	max-height: 42px;
}
  a#menu{
  	display: inline-block;
  	position: relative;
	  cursor:pointer;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #fff;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #fff;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: -10px;
		z-index: 100;
		background: #fff;
		box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
	}

	#mainnav{
		position: absolute;
		top: 0;
		height: 60px;
		width: 100%;
		text-align: right;
	}

	#mainnav ul{
		border-bottom: 1px solid #ccc;
		/*background: #fff;
		background:rgba(23,39,77,0.9);*/
		background:rgba(34,58,112,0.9);
		text-align: left;
	}
	
	#mainnav ul li{
		width:49.5%;
		display:inline-block;
	}

	#mainnav li a{
		position: relative;
		display: block;
		padding: 15px 25px;
		border-bottom: 1px solid rgba(255,255,255,0.5);
		color: #fff;
		font-weight: 400;
	}
	#mainnav li a:hover {
	text-decoration:none !important;
	background:#fafafa;
	padding: 15px 25px;
	color:rgba(34,58,112,1.0);
	}
	
	#mainnav li a:after{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left:auto;
		right:25px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

}

@media screen and (max-width: 415px) {
#sidebar h1 {
	text-align:left;
	padding:0 0 0 calc( 50% - 55px);
}
#sidebar h1 span {
top: 7px;}
#sidebar h1 span:nth-of-type(1) {
	margin-left:5px;
}
#sidebar h1 span:nth-of-type(2) {
	font-size:16px!important;
	top:22px;
}
#mainnav li a{
		position: relative;
		display: block;
		padding:12px 25px;}
#mainnav ul li{
		width:100% !important;
		display:block!important;
}
}

/*下からフェードイン*/
.fade-in-bottom {
   opacity: 0;
   animation-name: fadein-bottom;
   animation-duration: 1.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/* アニメーションエフェクト */

.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition:all 1.5s;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}


.To-right {
transform : translate(0, 0);
  -webkit-transition: all 1.5s;
   transition:all 1.5s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.To-right.move {
transform : translate(-50px, 0);
  -webkit-transform: translate(-50px, 0);
  opacity: 0;
}


.To-left {
transform : translate(0, 0);
  -webkit-transition: all 1.5s;
   transition:all 1.5s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.To-left.move2 {
transform : translate(50px, 0);
  -webkit-transform: translate(50px, 0);
  opacity: 0;
}

@media screen and (max-width: 768px) {

.To-right {
transform :none;
-webkit-transform:none;
}
.To-right.move {
transform :none;
-webkit-transform:none;
}

.To-left {
transform :none;
-webkit-transform:none;
}
.To-left.move2 {
transform :none;
-webkit-transform:none;
}
}

/* Back to top button
---------------------------------- */
#back-top {
	position: fixed;
	z-index: 1000;
	bottom: 20px;
	right: 20px;
}

#back-top a {
	position:relative;
	width: 60px;
	height: 60px;
	display: block;
	color: #FFF !important;
	background: #A9A9B1;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}


.arrow::before,
.arrow::before {
	position: absolute;
	content: "";
	margin: auto;
	top: 40%;
	left:40%;
	width: 10px;
	height: 10px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(-45deg);
		-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}

#back-top a:hover {
	background: #CCC;color: #FFF !important;
	
}

#back-top a:hover .arrow::before,
#back-top a:hover .arrow::before {
	top: 35%;
}


@media only screen
and (min-width : 320px)
and (max-width : 480px) {
#back-top {
	position: fixed;
	bottom: 10px;
	right: 10px;
}
#back-top a {
	width: 40px;
	height: 40px;
}
.arrow::before, .arrow::before {
    width: 7px;
    height: 7px;
}
}

.btn-detail {
	font-size: 15px;
	color: #fff;
	/* width:250px; */
	width: 280px;
	padding: 20px 0;
	margin-bottom: 30px;
	display: block;
	background: #192f60;
	text-align: center;
	position: relative;
	transition: all .3s ease-out;
	background-color: #192f60;
}

@media only screen and (max-width: 768px){
.btn-detail {
  width:auto;}
}

.btn-detail a {
text-decoration:none;
}

.btn-detail:hover {
 background:#1e50a2;
 text-decoration:none;
 color:#fff;
}

.btn-detail::before,
.btn-detail::after {
  position: absolute;
  content: '';
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.btn-detail::before {
  top:calc(50% - 4px);
  right:calc(10% - 5px);
  width: 10px;
  height:10px;
  border-left: 1px solid #fff;
}

.btn-detail::after {
  top:50%;
  right:calc(10%);
  width: 10px;
  border-top: 1px solid #fff;
}

.btn-detail:hover::before{
  top:calc(50% - 4px);
right:calc(5.5%);
  width:10px;
  height:10px;
  border-left:none;
  border-right: 1px solid #fff;
  transform: rotate(-45deg);
}

.btn-detail:hover::after {
  top:50%;
  right:calc(5%);
  width:40px;
  border-top: 1px solid #fff;
}



/* 新着情報 */
h3.news-title {
  position: relative;
  padding:100px 0 0rem 5px;
  text-align: center;
  font-size:30px;
  color:#19448e;
  letter-spacing:2px;
  clear:both;
  margin:0 auto 100px;
  font-family: 'Noto Sans JP', sans-serif!important;
}

h3.news-title:after {
  display:none;
}

h3.news-title:before {
  top: auto;
  right:0;
  border-top:none;  
  position: absolute;
  bottom: -30px;
  left: calc(50% - 30px);
  width: 60px;
  height: 2px;
  content: '';
  background:#19448e;
}

#newsWrap {
	width: 100%;
	max-width:1200px;
	margin:0 auto;
}

@media only screen and (max-width:1300px){
#newsWrap {
	width:95%;}
}
@media only screen and (max-width:767px){
#newsWrap {
	width:100%;}
}

ul#newsList{
	display:flex;
	flex-wrap:wrap;
	gap:60px 40px;
	flex-direction:row;
	display:flex;
	margin:0 0 0 20px;
}
ul#newsList li {
	width: calc((100% - 80px)/3);
	height:auto;
	margin:0;
	padding:0;
}

@media only screen and (max-width:767px){
ul#newsList{
	gap:30px 20px;
}
ul#newsList li {
	width:calc((100% - 20px)/2);}	
}

ul#newsList li a {
color:#444;
text-decoration:none;
display:block;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
ul#newsList li a:hover{
	opacity:0.75;
	text-decoration:none;
}

ul#newsList .title {
	display:block;
	font-size:14.5px;
	line-height:1.4;
	font-weight:600;
	letter-spacing:0.5px;
	color:#19448e;
	min-height:3em;
}

.date-cat-new {
	display:flex;
	flex-wrap:wrap;
	gap: 0px 7px;
	flex-direction:row;
	display:flex;
	margin: 0 0 8px 0;
	/* align-items: center; */
}
.date-cat-new span {
	height: 17.5px;
}

ul#newsList .catName {
	color:#fff;
	font-size:12px;
	line-height:100%;
	margin: 0;
}
ul#newsList .cat-0 .catName{
	background:#192f60;
	padding: 3px 10px 0px;
}
ul#newsList .cat-1 .catName{
	background:#0095d9;
	padding:3px 10px 5px;
}
ul#newsList .cat-2 .catName{
	background:#4d5aaf;
	padding:3px 4px 5px 3px;
}

ul#newsList .newMark{
	padding:2px 4px 1px;
	font-size:11px;
	line-height:100%;
	background:#d73700;
	color:#fff;
}
ul#newsList .comment {
	display:block;
	padding:3px 0;
	/*float:left;*/
	overflow:hidden;
	font-size:13px;
	line-height:1.5;
	/*width:500px;*/
	/* 本文部分の幅。ここは特に設置ページ合わせて変更下さい */
}
ul#newsList .up_ymd {
	color:#1e50a2;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:17px;
	font-weight: 500;
	line-height: 1.4;
}

@media only screen and (max-width:768px){
ul#newsList{
	margin:0 auto 30px;
}

ul#newsList li{
	padding: 15px 0;
	line-height:2;
}
ul#newsList .up_ymd { display:block;}
ul#newsList .catName{
	margin:0 10px 0 0;}
}

ul#newsList .thumbNailWrap {
	display:block;
	height:30vh;
	object-fit: cover;
	margin-bottom: 10px;
	overflow:hidden;
}

@media only screen and (max-width:1200px){
ul#newsList .thumbNailWrap {
height:28vh;}	
}
@media only screen and (max-width:1100px){
ul#newsList .thumbNailWrap {
height:25vh;}	
}
@media only screen and (max-width:820px){
ul#newsList .thumbNailWrap {
height:19.5vh;}	
}
@media only screen and (max-width:767px){
ul#newsList .thumbNailWrap {
height:18vh;}	
}



/* 一覧ページ */
#newsWrap-page {
	width:90%;
	margin:0 auto;}

ul#newsList-page {
	margin:0 auto 15px;
	padding:0;
	border-top:1px solid #ccc;
}
ul#newsList-page li {
	color:#444;
	font-size:14px;
	margin:0;
	padding:20px 0;
	margin-bottom:3px;
	border-bottom:1px solid #ccc;
	line-height:120%;
	list-style-type:none;
}

ul#newsList-page li a {
	color:#444;
	text-decoration:none;
}
ul#newsList-page li a:hover{
	color:#888;
	text-decoration:none;
}

ul#newsList-page .catName{
	display:inline-block;
	color:#fff;
	font-size:12px;
	line-height:100%;
	margin:0 10px;
}
ul#newsList-page .cat-0 .catName{
	background:#192f60;
	padding:3px 10px 5px;
}
ul#newsList-page .cat-1 .catName{
	background:#0095d9;
	padding:3px 10px 5px;
}
ul#newsList-page .cat-2 .catName{
	background:#4d5aaf;
	padding:3px 4px 5px 3px;
}

ul#newsList-page .newMark{
	display:inline-block;
	padding:2px 4px 1px;
	font-size:11px;
	line-height:100%;
	background:#d73700;
	color:#fff;
}
ul#newsList-page .comment{
	display:block;
	padding:3px 0;
	float:left;
	overflow:hidden;
	width:500px;/* 本文部分の幅。ここは特に設置ページ合わせて変更下さい */
}
ul#newsList-page .up_ymd { color:#1e50a2;
font-family: 'Roboto Condensed', sans-serif;
font-size:17px;}

@media only screen and (max-width: 768px){
ul#newsList-page {
	margin:0 auto 30px;
}

ul#newsList-page li{
	padding: 15px 0;
	line-height:2;
}
ul#newsList-page .up_ymd { display:block;}
ul#newsList-page .catName{
	margin:0 10px 0 0;
}
}

ul#newsList-page .thumbNailWrap{
	display:block;
	width:110px;
	float:left;
	height:80px;
	overflow:hidden;
}



/* Pager style（外部化可） */
.pager{
	text-align:right;
	padding:10px;
	clear:both;
}
/*ページャーボタン*/
.pager a{
    border: 1px solid #999;
    color: #333;
    font-size: 12px;
    padding: 3px 7px 2px;
    text-decoration: none;
	margin:0 1px;
}

/*現在のページのボタン*/
.pager a.current{
    background: #999;
    border: 1px solid #999;
    color: #fff;
    font-size: 12px;
    padding: 3px 7px 2px;
	margin:0 1px;
    text-decoration: none;
}

.pager a:hover{
    background:#999;
    color: #fff;
}

.overPagerPattern{
	padding:0 2px ;	
}

.btn-list {
	font-size: 15px;
	color: #fff;
	/* width:250px; */
	width: 280px;
	padding: 20px 0;
	margin: 50px 40px 10px 0;
	display: block;
	float:right;
	background: #192f60;
	text-align: center;
	position: relative;
	transition: all .3s ease-out;
	background-color: #192f60;
}

@media only screen and (max-width: 414px){
.btn-list {
  width:auto;
  float:none;
  margin:0 auto;
}

}
.btn-list a {
text-decoration:none;
}

.btn-list:hover {
 background:#1e50a2;
 text-decoration:none;
 color:#fff;
}

.btn-list::before,
.btn-list::after {
  position: absolute;
  content: '';
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.btn-list::before {
  top:calc(50% - 4px);
  right:calc(10% - 5px);
  width: 10px;
  height:10px;
  border-left: 1px solid #fff;
}

.btn-list::after {
  top:50%;
  right:calc(10%);
  width: 10px;
  border-top: 1px solid #fff;
}

.btn-list:hover::before{
  top:calc(50% - 4px);
right:calc(5.5%);
  width:10px;
  height:10px;
  border-left:none;
  border-right: 1px solid #fff;
  transform: rotate(-45deg);
}

.btn-list:hover::after {
  top:50%;
  right:calc(5%);
  width:40px;
  border-top: 1px solid #fff;
}

.news-detail-page {
 min-height:800px;
 padding-top:50px; }

@media only screen and (max-width: 768px){
.news-detail-page {
 min-height:800px;
 padding-top:100px; }
}


h2.news-detail-title {
	font-size:24px;
	font-family:'Noto Sans JP', Arial, Verdana, 游ゴシック,メイリオ, Meiryo,sans-serif;
	color:#369;
	margin:10px 0px 10px 0;
	font-weight:normal;
	border-bottom:2px solid #1e50a2;
	padding:5px 10px 5px 0;
	text-shadow:1px 1px 0px #fff;
}
#up_ymd{
	text-align:right;
	font-size:15px;
	margin:5px 10px;
	margin-right:3em;
	font-family: 'Roboto Condensed', sans-serif;
}
.detailUpfile{
	margin:5px 0 35px;
	text-align:center;
}
.backORcloseBtn{
	text-align:center;
	line-height:100%;
	margin-top:50px;
	margin-bottom: 50px;
}
.backORcloseBtn a{
	display:inline-block;
	padding:10px 15px;
	border:1px solid #aaa;
	color:#999;
	text-decoration:none;
	font-size:12px;
}
.detailUpfile img{
	max-width:100%;
	height:auto;
}
.pNav{
	font-size:13px;
	padding:10px;
	margin-bottom:30px;
	background:#fafafa;
}
.pNav a { position:relative;
margin-right:2em;}

.pNav a::after {
position: absolute;
content: "";
border-top: 2px solid #999;
border-right: 2px solid #999;
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: -1.5em;
top:7px;
}

#detail {
 width:80%;
 margin:15px auto;
}

@media only screen and (max-width: 767px){
#detail {
 width:90%;
 margin:15px auto;
}
}

/*青戸ラボ*/
.labo_banner {
	margin: 0 auto 30px;
	background: #fff;
	text-align:center;
	border:2px solid #eb6100;
	width: calc( 70% + 40px);
	position:relative;
}

.labo_banner a {
	padding: 10px 0;
	display: block;
	width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.labo_banner a:hover {
opacity:0.9;
}

.labo_banner a img {
	width:80%;
	margin:0 8% 0 0;
	vertical-align: middle;
} 

.labo_banner_arrow {
	position:absolute;
	top:50%;
	right:32px;
	padding: 0 0 0 0;
	color: #eb6100;
	vertical-align: middle;
	text-decoration: none;
	-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.labo_banner_arrow::before,
.labo_banner_arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.sample5-6::before{
	box-sizing: border-box;
	width:24px;
	height:24px;
	background:#eb6100;
	border:1.5px solid #eb6100;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.sample5-6::after{
	left: 7px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.labo_banner a:hover .labo_banner_arrow {
	position:absolute;
	top:50%;
	right:29px;
	padding: 0 0 0 0;
	color: #eb6100;
	vertical-align: middle;
	text-decoration: none;
}

@media screen and (max-width:1300px){
.labo_banner a img {
	margin:0 9% 0 0;
} 
.labo_banner_arrow {
	right:30px;
}
.sample5-6::before{
	width:22px;
	height:22px;
}
.sample5-6::after{
	left: 7px;
	width: 5px;
	height: 5px;
}
.labo_banner a:hover .labo_banner_arrow {
	right:27px;}
}

@media screen and (max-width:1200px){
.labo_banner a img {
	margin:0 10% 0 0;
}
.labo_banner_arrow {
	right:27px;
}
.sample5-6::before{
	width:20px;
	height:20px;
}
.sample5-6::after{
	left: 6.5px;
	width: 4px;
	height: 4px;
}
.labo_banner a:hover .labo_banner_arrow {
	right:25px;}
}

@media screen and (max-width: 1000px){
.labo_banner {margin: 25px auto;}

.labo_banner a img {
	width:60%;
	margin:0 8% 0 0;
	vertical-align: middle;
} 
	
.labo_banner a img {
	margin:0 10% 0 0;
}
.labo_banner_arrow {
	right:70px;
}
.sample5-6::before{
	width:40px;
	height:40px;
}
.sample5-6::after{
	left:12px;
	width:10px;
	height:10px;
}
.labo_banner a:hover .labo_banner_arrow {
	right:63px;}
}

@media screen and (max-width:767px){
.labo_banner_arrow {
	right:60px;
}
.sample5-6::before{
	width:30px;
	height:30px;
}
.sample5-6::after{
	left:9px;
	width:8px;
	height:8px;
}
.labo_banner a:hover .labo_banner_arrow {
	right:55px;}
}

@media screen and (max-width:400px){
.labo_banner_arrow {
	right:50px;
}
.labo_banner a:hover .labo_banner_arrow {
	right:45px;}
}