@charset "utf-8";
/*
Theme Name: TAISHO Optical.
Theme URI: https://saitasaita.co.jp/
Author: Saita Corp.
Author URI: https://saitasaita.co.jp/
Description: Original Wordpress theme for with TAISHO Optical.
Version: 1.0.0
*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900|Noto+Serif+JP:200,300,400,500,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap');
@import url("style_contents.css");
/*font-family: 'Caveat', cursive;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Noto Serif JP', serif;
*/


li {list-style:none;}
img {border:0;}
a {color:#000; outline: none;}

h1, h2, h3, h4 {margin:0; padding:0;font-family: 'Roboto',MS UI Gothic,Osaka,sans-serif;}
ul {margin:0; padding:0;}
html {
 height:100%;
}

.orik {display: inline-block;}


.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

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



#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 10001;
  text-align:center;
}
#loader {
  display: none;
  position: absolute;
  top: 0vh;
  left: 0;
  width: 100%;
  height: 1px;
}

/*----------------loading------------------*/

/* ラインの最初の色のスタイル */
#line {
    width:100%; /* 横幅100% */
    height:1px;
    margin:0px auto;
    background:#d6d6d6;
}
 
/* ラインのアニメーション時の色と動き */
#line .expand {
    width:100%;
    height:1px;
    margin:0;
    background:rgba(214,0,15,1);
    position:absolute;
	left: 0;
	animation:fullexpand 1s ease-out;
    -moz-animation:fullexpand 1s ease-out;
    -webkit-animation:fullexpand 1s ease-out;
}
 
 /* キーフレームを使った横幅100%のローディングの始まりと終わりの変化 */
@keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;} 
}
@-webkit-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;} 
}

@-webkit-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;} 
}




body {
	margin: 0 auto;
	padding:0;
	color:#000;
	line-height:160%;
	font-family: 'Roboto',MS UI Gothic,Osaka,sans-serif;
	font-size:15px;
	font-weight: 300;
	overflow-x: hidden;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
}




/*----Ios初期化-----*/
	
  input,textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-appearance: none;
    max-width: 100%;
  }

/*----tel イベント-------------*/

a.tel {
    cursor: default;
    pointer-events: none;
	text-decoration: none;
}
@media screen and (max-width: 855px) {
    a.tel {
        pointer-events: auto;
    }
}
/*---------------------------------------------------------------------------
ヘッダー

---------------------------------------------------------------------------*/

#header {
	width:100%;
	max-width:1800px;
	margin: 0 auto;
	height: 125px;
	letter-spacing: -0.4em;
	margin-bottom: 8px;
	position: fixed;
	z-index: 900;
	background-color: #fff;
}

/*--ロゴ周り----*/

#header #left {
	width: 303px;
	height: auto;
	display: inline-block;
	margin: 23px 0 0 36px;
	letter-spacing: normal;
	vertical-align: top;
}

#header #left img {
	width: 100%;
	height: auto;
}

/*--お問合せボタン---*/

#header #topright {
	display: inline-block;
	width: 240px;
	letter-spacing: normal;
	text-align: center;
}

#header #topright p {margin: 0;padding: 0;display: block;}
#header #topright p a {display: block;text-decoration: none; color: #fff;}

#header #topright p a.tel {
	font-size:15px;	
	width: 100%;
	height: 90px;
	padding: 20px 0 0 0;
	box-sizing: border-box;
	background: linear-gradient(360deg, #720000 0%, #c30000 100%);
	display: block;
}

#header #topright a.tel span {
	font-family: 'Oswald',"游ゴシック";
	font-size:24px;
	margin:20px auto 0 auto;
	line-height: 0;
	line-height: 26px;
}

#header #topright a.tel span::before {
	content: "tel. ";
	font-size: 15px;
}

#header #topright p a.btn{
	background:#550000;
	font-size:15px;
	padding: 10px 0;
	bottom: 0;
	left: 0;
	width: 100%;
	display: block;
	transition: 0.5s;
}

#header #topright p a.btn:hover {
	background-color: #333333;
}

/*--真ん中メニュー部分---*/

#header #center {
	width: calc(100% - 240px - 339px);
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
}


#header #center .lang {
	position: absolute;
	right: 240px;
	top: 0;
	letter-spacing: -0.4em;
}

#header #center  p.word{
	display: inline-block;
	margin: 0;
	padding:15px 20px;
	box-sizing: border-box;
	line-height: 100%;
	vertical-align: top;
	background:#19304a;
	letter-spacing: normal;
	color:#fff;
	transition: 0.3s;
}

#header #center  p.word:hover {background-color: #333333; color: #fff;}

#header #center  p.jap{
	background: #dcdcdc;
	color:#000;
}
#header #center  p.jap:hover {background-color: #333333; color: #fff;}


/*-------smp------------------------*/
@media screen and (max-width: 1300px) {
	
/*--お問合せボタン---*/

#header #topright {
	width: 200px;
}	
	
/*--真ん中メニュー部分---*/

#header #center {
	width: calc(100% - 200px - 339px);
}
	
#header #center .lang {
	right: 200px;
}

}

/*-------smp------------------------*/
@media screen and (max-width: 1260px) {
	
/*--ロゴ周り----*/

#header #left {
	width: 250px;
	margin: 35px 0 0 25px;
}
	
/*--真ん中メニュー部分---*/

#header #center {
	width: calc(100% - 200px - 275px);
}
}

/*-------smp------------------------*/
@media screen and (max-width: 1100px) {
	
/*--お問合せボタン---*/

#header #topright {
	width: 170px;
}	
	
/*--真ん中メニュー部分---*/

#header #center {
	width: calc(100% - 170px - 275px);
}
	
#header #center .lang {
	right: 170px;
}

#header #topright p a.tel {
	font-size:14px;	
}

#header #topright a.tel span {
	font-size:20px;
}
	

#header #topright p a.btn{
	font-size:14px;
}
}

/*-------smp ハンバーガーが出る幅------------------------*/
@media screen and (max-width: 1060px) {

#header {
	height: 100px;
	margin-bottom: 0;
}	
	
/*--お問合せボタン---*/

#header #topright {
	display: none;
}		
#header #center .lang {
	right: 90px;
}
	
/*--真ん中メニュー部分---*/

#header #center {
	width: 0;
}
	
/*--ロゴ周り----*/

#header #left {
	width: calc(100% - 100px);
	max-width: 280px;
	margin: 23px 0 0 25px;
}
	
}

/*-------smp ------------------------*/
@media screen and (max-width: 680px) {
	
#header #center .lang {
	display: none;
}
	
#header #left {
	width: calc(100% - 130px);
	max-width: 250px;
	margin: 23px 0 0 20px;
}

}
	
	

/*---------------------------------------------
グローバルメニュー　
---------------------------------------------*/

#gmenu {
	width:auto;
	height:78px;
	margin:0;
	padding: 44px 0 0 0;
	font-weight: bold;
}

#gmenu ul p {margin: 0; padding: 0;}

#gmenu ul {
	width:auto;
	margin:0 30px 0 auto;
	text-align: right;
	letter-spacing: -0.4em;
}

#gmenu li.mn {
	display: inline-block;
	box-sizing: border-box;
	letter-spacing: normal;
	}

#gmenu li.mn a {
	text-decoration: none;
	line-height: 78px;
	height: 78px;
	padding: 0 22px;
	font-size:15px;
	border-bottom: 2px solid transparent;
	box-sizing: border-box;
	display:block;
}


#gmenu li.mn a:hover {border-color: #C90048;}
#gmenu li.mn a.current {border-color: #999;}

#gmenu li ul li a  {border: none;}

#gmenu li a:hover {
	border-color: rgba(255,255,255,0.3);
}

#gmenu li a.slc {
	border-color: rgba(255,255,255,0.6);
	}




	#gmenu li a {
	-webkit-transition: 0.5s ease-in-out;
	   -moz-transition: 0.5s ease-in-out;
		 -o-transition: 0.5s ease-in-out;
			transition: 0.5s ease-in-out;
			}

/*---サブメニュースタイル--*/

#gmenu ul.sub {
position: absolute;
z-index: 9999;
top: 122px;
left: 0;
margin: 0;
padding: 0 20px;
width: calc(100% - 240px);
box-sizing: border-box;
white-space: nowrap;
zoom:100%;
background:#19304a;
height: auto;
max-height: 180px;
}

#gmenu ul li a,
#gmenu ul li a:hover,
#gmenu ul li a {
	width: auto;
	display: block;
}

#gmenu ul > li > ul.sub > li {
  overflow: hidden;
  width: 20%;
  height: 0;
  color: #fff;
  transition: .5s;
  position: relative;
	float: right;
}

#gmenu ul li a:hover {
	opacity:100;
	filter: alpha(opacity=10);
	-ms-filter: "alpha( opacity=10 )";
}

#gmenu ul li ul.sub li a {
  	padding: 25px 15px;
	width: 100%;
  	text-align: left;
 	font-size: 15px;
	height: 100%;
	line-height: 160%;
	text-indent: 0;
  	font-weight: normal;
	color: #ffffff;	
}

#gmenu ul li ul.sub li a img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	border: 1px solid transparent;
	box-sizing: border-box;
	transition: 0.3s;
}

#gmenu ul li ul.sub li a span {
	display: block;
	font-size: 15px;
}

#gmenu ul li ul.sub li a:hover img {
	border-color: #fff;
	color: #ffffff;
}
#gmenu > li:hover > a {  background: none }
#gmenu > li:hover li:hover > a img {border-color: #fff;   }
#gmenu li:hover > ul.sub > li {
  overflow: hidden;
  height: 180px;
	display: inline-block;
	letter-spacing: normal;
}


/*-------smp------------------------*/
@media screen and (max-width: 1400px) {

#gmenu ul {
	margin:0 15px 0 auto;
}
	
#gmenu li.mn a {
	padding: 0 15px;
	font-size: 14px;
}

}

/*-------smp------------------------*/
@media screen and (max-width: 1300px) {

#gmenu ul.sub {
padding: 0 10px;
width: calc(100% - 200px);
}

	
#gmenu ul li ul.sub li a span {
	font-size: 13px;
}

#gmenu li.mn a {
	padding: 0 10px;
}
	
#gmenu ul li ul.sub li a {
  	padding: 25px 10px;
}

}

/*-------smp------------------------*/
@media screen and (max-width: 1100px) {

#gmenu li.mn a {
	padding: 0 8px;
}
	
}








/*---------------------------------------------------------------------------
ハンバーガーメニュー

---------------------------------------------------------------------------*/

#nav-drawer {display: none;}
@media screen and (max-width: 1060px) {

#gmenu {display: none;}
#nav-drawer {display: block;}

}
/*----------ハンバーガー-----------*/


/*Media Queries*/

#nav-drawer {
  position: fixed;
  top:0px;
  left: calc(100% - 90px);
  z-index: 9999;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 90px;
  height: 90px;
  vertical-align: middle;
  background-color: #D6000F;
  box-sizing: border-box;
  line-height: 48px;
  position: absolute;
  font-weight: 500;
  cursor: pointer;
  z-index: 9999;
	text-align: center;
	font-size: 13px;
	color: #fff;
}

#nav-open span {
  display: block;
  transition: all .2s;
  box-sizing: border-box;
}

#nav-open span {
  position: absolute;
  left: 28px;
  width: 36px;
  height: 1px;
  background-color: #fff;
}
#nav-open span:nth-of-type(1) {
  top: 38px;
}
#nav-open span:nth-of-type(2) {
  top: 50px;
}
#nav-open span:nth-of-type(3) {
  top: 62px;
}

#nav-input:checked ~ #nav-open span:nth-of-type(1) {
  -webkit-transform: translateY(11px) rotate(-45deg);
  transform: translateY(12px) rotate(-45deg);
}
#nav-input:checked ~ #nav-open span:nth-of-type(2) {
  opacity: 0;
}
#nav-input:checked ~ #nav-open span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}



/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 9996;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  opacity: 0;
  transition: .3s ease-in-out;  
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9997;/*最前面に*/
  width: calc(100% - 90px);/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 400px;
  height: 100%;
  transition: 0.5s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
  padding: 30px 20px;
  box-sizing: border-box;
  background-size: auto 50px;
  background-position: 50% 30px;
  text-align: left;
  /*background-color: rgba(0,0,0,0.6);*/
  -moz-box-shadow: 2px 2px 16px rgba(0,0,0,0.3);
  -webkit-box-shadow: 2px 2px 16px rgba(0,0,0,0.3);
  box-shadow: 2px 2px 16px rgba(0,0,0,0.3);
}



/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .3;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  /*box-shadow: 6px 0 25px rgba(0,0,0,.15);*/
}



/*------PC版ハンバーガーの中身----------*/

#nav-content {
	background-color: #fff;
}

#nav-content #smp {margin:0 0 20px 0;}
#nav-content #smp img {
	width: 80%;
	height: auto;
}

#nav-content p a {
	font-size: 16px;
	width:90%;
	border-bottom:1px solid #d6d6d6;
	display:block;
	text-decoration:none;
	margin:0 auto;
	padding:5px 10px;
}

#nav-content .submenu {padding: 0 0 10px 0;}

#nav-content .submenu p {margin: 0; padding: 0;}

#nav-content .submenu p a {
	font-size: 15px;
	border-bottom:none;
	display:block;
	text-decoration:none;
	margin:0 auto;
	padding:0 0 0px 5px;
}

#nav-content .submenu p a::before {
	content:"- ";
}

#nav-content .isogi {
	text-align: center;
	background-color: red;
	padding: 10px;
}

#nav-content .isogi a {
	text-decoration: none;
	color: #fff;
}

#nav-content .map {letter-spacing: -0.4em; margin-bottom: 30px;}
#nav-content .map a {
	letter-spacing: normal;
	display: inline-block;
	width: 50%;
	text-align: center;
	background-color: #333;
	color: #fff;
	padding: 10px 0;
	text-decoration: none;
}

#nav-content .map a {
	border-right: 1px dashed rgba(255,255,255,0.6);
	box-sizing: border-box;
}
#nav-content .map p {
	letter-spacing: normal;
	padding: 10px;
}



/*---------------------------------------------------------------------------
フッター

---------------------------------------------------------------------------*/

#footer {
	width:100%;
	max-width:1800px;
	margin: 0 auto -20px auto;
	letter-spacing: -0.4em;
	font-family:'Roboto','Noto Sans JP',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	font-weight: 400;
	background: linear-gradient(-135deg, #1f247f, #158b8a);
	color: #fff;
	text-align: center;
	padding: 20px 0 0 0;
}

#footer a {color: #fff;}


#footer .box {
	width: auto;
	display: inline-block;
	padding: 0 3% 0 0;
	letter-spacing: normal;
	vertical-align: top;
	text-align: left;
}

#footer .box:last-child {padding-right: 0;}

#footer .box a {text-decoration: none;}

#footer .box p {
	margin: 0;
	padding: 0;
}
#footer .box p a {
	padding: 10px 0;
	margin: 0;
}


#footer .box p.mini a {
	font-size: 13px;
	padding: 3px 0;
	margin: 0;
}
#footer .box p.mini a::before {
	content: "- ";
}

#footer .inner {
	width: calc(100% - 60px);
	max-width: 1500px;
	padding: 30px;
	text-align: left;
	letter-spacing: normal;
	margin: 0 auto;
	box-sizing: border-box;
}

#footer .inner.wline {
	border-top: 1px solid rgba(255,255,255,0.6);
	font-weight: 300;
}

#footer .inner.wline p {
	padding: 0;
	margin: 0;
	font-size: 14px;
}

#footer .inner.wline p span {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 2px;
}

#footer .inner.wline p span:first-child {
	background-color: #333;
	padding: 0 3px;
	width: 8em;
	font-weight: 500;
	text-align: center;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#footer .inner.wline p span:nth-child(2) {width: 20em;}

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

	#footer .box {
	padding: 0 0 30px 0;
	width: 33%;
	}
}

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

	#footer .box {
	width: auto;
	padding: 0 30px 30px 0;
	}
	
	#footer .inner.mn {display: none;}
	
#footer .inner.wline p span:first-child {
	display: block;
	}

	#footer .inner.wline {border: none;}
}


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

}

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

}


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


}

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

#footer .inner {
	padding: 30px 0;
}	
}

/*---------------*/
#footer #cpr {
	width: 100%;
	clear: both;
	text-align: left;
	letter-spacing: normal;
	padding: 20px 0 0 0;
}

#footer #cpr p {
	font-size: 13px;
	font-weight: 300;
	color: #fff;
}



/*----------------------------------------------------------------------------
フォーム用
-----------------------------------------------------------------------------*/
#formw {
padding: 20px 0;
}

#formw p {margin: 0; padding: 0; line-height: 120%;}
	
#formw span.need {
	background-color: #19304A;
	padding: 2px 6px;
	color: #ffffff;
	display: inline-block;
	font-size: 11px;
	line-height: 110%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-right: 5px;
	margin: 0;
	}
	
.wpcf7-response-output {border-color: #9E1C1E;}

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

#formw {
	clear: both;
	margin: 30px 0;
	padding: 10px;
	box-sizing: border-box;
}
	#formw .th {
	display:block;
	width: 100%;

}

#formw .td {
	display:block;
	width: 100%;
}
	
	#formw .td span.pc{display: none;}	
	#formw .td span.sp{display:inline-block;}	
}

/*----------------------------------------------------------------------------
フォーム用のボタン・入力
-----------------------------------------------------------------------------*/
	.a1 {
		padding:10px;
		border:1px solid #ccc;
		font-size:15px;
		font-family:'Roboto','Noto Sans JP',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
		background:#f6f6f6;
		width:100%;
		box-sizing:border-box;
		margin-bottom: 2px;
	}
	
	.a2 {
		padding:10px;
		border:1px solid #ccc;
		font-size:15px;
		font-family:'Roboto','Noto Sans JP',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
		background:#f6f6f6;
		width:50%;
		box-sizing:border-box;
		margin-bottom: 2px;
	}
	
	.a3 {
		padding:10px;
		border:1px solid #ccc;
		font-size:15px;
		font-family:'Roboto','Noto Sans JP',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
		background:#f6f6f6;
		width:30%;
		box-sizing:border-box;
		margin-bottom: 2px;
	}
	
.a1:focus,
.a2:focus,
.a3:focus {
	border-color: #333333;
	background-color: #ffffff;
}
	.sendb,
	.sendb:focus {
		padding:8px 20px;
		background-color:red;
		color:#FFFFFF;
		border:none;
		font-size: 18px;
		-webkit-box-shadow: 0px 0px 3px #ccc;
		-moz-box-shadow: 0px 0px 3px #ccc;
		cursor:pointer;
		box-shadow: 0px 0px 3px #ccc;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px; 
		border-radius: 5px;
		font-family:'Roboto','Noto Sans JP',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	}
	
	.sendb:hover {
		background-color:#19304A;
		cursor:pointer;
	}
	
	





/*---------------------------------------------------------------------------
トップページ
スライダー
---------------------------------------------------------------------------*/
   .swiper-container {
        width: 100%;
        height: 646px;
		z-index:0; 
	   padding-top: 125px;
    }
    .swiper-slide {
        background: #fff;
		overflow: visible;
		position: relative;
		z-index: 10;
		letter-spacing: -0.4em;
		text-align: right;
    }

.swiper-slide .left {
	width: 45%;
	height: 100%;
	display: inline-block;
}
.swiper-slide .right {
	width: 45%;
	height: 100%;
	display: inline-block;
}
	

.swiper-slide h2 {
	font-size: 50px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	line-height: 160%;
	position: absolute;
	left: 40px;
	bottom: 150px;
	letter-spacing: normal;
	font-family: 'Noto Serif JP', serif;
	text-align: left;
}


.swiper-slide .bbox {
	position: absolute;
	bottom: 30px;
	left: 57%;
	padding-right: 3%;
}

.swiper-slide p.mid {
	font-size: 24px;
	color: #fff;
	font-family: 'Noto Serif JP', serif;
	text-align: left;
	font-weight: 300;
	margin: 0;
	padding: 0;
	line-height: 160%;
	letter-spacing: normal;
}

.swiper-slide p.big {
	font-size: 18px;
	font-weight: 300;
	margin: 20px 0 0 0;
	padding: 0;
	line-height: 120%;
	color: #fff;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: normal;
	text-align: left;
}




.swiper-slide-active h2,
.swiper-slide-duplicate-active h2,
.swiper-slide-prev h2 {
-webkit-animation:fleft 1s;
-o-animation:fleft 1s;
-ms-animation:fleft 1s;
-moz-animation:fleft 1s;	
}

.swiper-slide-active p.mid,
.swiper-slide-duplicate-active p.mid,
.swiper-slide-prev p.mid {
-webkit-animation:fleft2 1s;
-o-animation:fleft2 1s;
-ms-animation:fleft2 1s;
-moz-animation:fleft2 1s;	
}

.swiper-slide-active  p.big,
.swiper-slide-duplicate-active p.big,
.swiper-slide-prev p.big {
-webkit-animation:fleft3 1s;
-o-animation:fleft3 1s;
-ms-animation:fleft3 1s;
-moz-animation:fleft3 1s;	
}

@-webkit-keyframes fleft {
0%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-webkit-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
@-o-keyframes fleft {
0%	{-o-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-o-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
@-ms-keyframes fleft {
0%	{-ms-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-ms-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
@-moz-keyframes fleft {
0%	{-moz-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-moz-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
	
@-webkit-keyframes fleft2 {
0%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
30%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-webkit-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
@-o-keyframes fleft2 {
0%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
50%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-o-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
@-ms-keyframes fleft2 {
0%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
30%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-ms-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
@-moz-keyframes fleft2 {
0%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
30%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-moz-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
	

@-webkit-keyframes fleft3 {
0%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
50%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-webkit-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
@-o-keyframes fleft3 {
0%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
50%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-o-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
@-ms-keyframes fleft3 {
0%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
50%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-ms-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
@-moz-keyframes fleft3 {
0%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
50%	{-webkit-transform:translateX(-100%);opacity:0; filter: alpha(opacity=50);}
100% {-moz-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
}
	
@media screen and (max-width: 1060px) {
   .swiper-container {
	   padding-top: 100px;
    }
	
}
@media screen and (max-width: 1000px) {


.swiper-slide .left {
	width: 50%;
}
.swiper-slide .right {
	width: 50%;
}
	
.swiper-slide h2 {
	font-size: 30px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	line-height: 160%;
	position: absolute;
	left: 53%;
	bottom: 180px;
	letter-spacing: normal;
	font-family: 'Noto Serif JP', serif;
	text-align: left;
	color: #fff;
}

.swiper-slide .bbox {
	position: absolute;
	bottom: 30px;
	left: 53%;
	padding-right: 3%;
}

.swiper-slide p.mid {
	font-size: 18px;
}

.swiper-slide p.big {
	font-size: 16px;
}

}



@media screen and (max-width: 800px) {
	
.swiper-container {
	width: 100%;
	height: calc(100vh - 133px - 85px);
	z-index:0; 
}

   .swiper-slide {
     background: #fff;
	overflow: visible;
	position: relative;
	z-index: 10;
	letter-spacing: -0.4em;
	text-align: right;
    }

.swiper-slide .left,
.swiper-slide .right{
	width: 100%;
	height: calc(50vh - 62px - 42px);
	display: block;
}

.swiper-slide h2 {
	font-size: 30px;
	left: 20px;
	bottom: calc(50vh - 62px - 42px);
	color: #000;
}

.swiper-slide .bbox {
	position: absolute;
	bottom: inherit;
	left: 20px;
	top: calc(50vh - 62px - 32px);
}

.swiper-slide p.mid {
	font-size: 17px;
	color: #fff;
}

.swiper-slide p.big {
	font-size: 16px;
}
}


/*---------------------------------------------------------------------------
お取引の流れ

---------------------------------------------------------------------------*/
#flow {}

#flow h2#fl {
	color: red;
	font-weight: 400;
	font-size: 15px;
	padding: 0;
	margin: 0;
}

#flow p {padding: 0; margin: 0; font-size: 14px;}

#flow .isogi {
	border: 1px solid red;
	padding: 10px;
	margin: 10px 0 20px 0;
}

#flow .nagare {
	padding: 10px;
}


#flow p.flow {
	font-weight: bold;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px;
}

#flow p.flow span {
	background-color: #333;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	color: #fff;
	padding: 0 8px;
	display: inline-block;
	margin-right: 5px;
}

#flow p.mini {
	font-size: 12px;
	margin: 0 0 20px 30px;
	padding: 0 !important;
	line-height: 140%;
}


/*---------------------------------------------------------------------------
トップページ

---------------------------------------------------------------------------*/

/*---ニュース---*/

#top_info {
	background: linear-gradient(-135deg, #1f247f, #158b8a);
	width: 100%;
	max-width: 1197px;
	padding: 40px;
	box-sizing: border-box;
	color: #fff;
	margin-top: 0px;
	margin-bottom: 100px;
	padding-left: 5%;
}

#top_info p {
	padding: 5px 0;
	margin: 0;
}
#top_info a {
	text-decoration: none;
	color: #fff;
}

#top_info p span {
	display: inline-block;
	margin-right: 10px;
}





#special {
	width: 84%;
	margin: 0 auto;
	text-align: center;
	max-width: 1500px;
	margin-bottom: 90px;
	font-family: 'Noto Sans JP',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	font-size: 400;
	color: #333;
}

#special h2{
	padding: 0 0 40px 0;
	font-size: 33px;
}


#special .container{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	
}

#special .box{
	width: 24%;
	
}


#special .box__text1 a{
	text-decoration: none;
    justify-content: center;
    display: inline-block;
    width: 75%;
    padding: 5px 0;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: white;
    font-size: 16px;
    border: solid 1px;
}

#special .box__text2 {
	padding: 0 11.7%;
	text-align: left;
}

#special .box img{
	width: 100% !important;
	height: 247px;
	object-fit: cover;
}

#special .box h3{
	font-size: 33.67px;
    padding: 25px 0;
    color: #d3d3d3;
    margin-top: 25px;
    font-family: oswald;
}

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

#special .box h3{
	font-size: 25px;
}

}

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

#special .box{
	width: 49%;
	
}
#special .box h3{
	font-size: 33px;
}

}


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

#special .box h3{
	font-size: 25px;
}
#special h2{
	padding: 0 0 40px 0;
	font-size: 25px;
}

}



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

#special .box{
	    width: 95%
	
}

#special .box img{
	    width: 85% !important;
    margin: 0 auto;
}

#special .box__text2 {
	width: 60%;
	margin: 0 auto;
	text-align: left;
	margin-bottom: 15px;
}

#special .bgcolor{
	background-color: #eeeeee ;
}

#special .bgcolor a{
	background-color: #eeeeee ;
}


#special .box h3 {

    margin-top: 0px;
}

#special h2 {
    padding: 0 0 25px 0;
	font-size: 20px;
}


}

@media screen and (max-width: 500px) {
#special .box img{
	height: 50vw;
}
}


/*-------------PICKUP-----------------------*/

#pick{
	max-width: 1500px;
	width: 100%;
	color: white;
	background-color: black;
	margin: 0 auto;
}

#pick .pickup{
  
  width: 250px;
    float: left;
    height: 100%;
    font-family: oswald;
    font-size: 33.67px;
    text-align: right;
    box-sizing: border-box;
    padding: 50px 30px 0 0px;
}
#pick .container{
	width: calc(100% - 250px);
	float: right;
	margin: 0 auto;
	background-color: #19304A;
	
	
}

#pick .clear{
	clear:both;
}

#pick .container__box{
	width: 91%;
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding-top: 50px;
	padding-bottom: 50px;
}

#pick .box{
	width: 21%;
	margin: 0 2%;
}

#pick .box h3 {
	font-weight: 400;
	font-size: 15px;
	padding: 5px 0 0 0;
	margin: 0;
}

#pick .pickup__left p{
	font-size: 14.58px;
}


#pick .pickup__right img {
	width: 100%;
	height: 15vw;
	max-height: 210px;
	object-fit: cover;
}


#pick .pickup__right p{
	font-family: oswald;
	font-size: 33.67px;
	margin: 10px 0;
	color: #959595;
}

#pick .container__box hr{
	display: none;
	width: 91%;
	margin: 0 auto;
}
#pick .pickup__left {
    width: 91%;
}

@media screen and (max-width: 1024px) {
	#pick .pickup{
		float: none;
		width: 100%;
		text-align: center;
    	padding: 40px 0 20px 0;
	}
	#pick .container{
		width: 100%;
		float: none;


	}
	
	#pick .pickup__left{
		float: left;
		width:calc(100% - 170px);
	}
	
	#pick .pickup__right{
		float: right;
		width: 170px;
		height: 130px;
		
		
	}
	#pick .box{
	    width: 44%;
}

	#pick .pickup__right p {
		font-family: oswald;
		position: absolute;
		    top: 0;
    		right: 10px;
		
	}

	#pick .pickup__right {
		float: right;
		position: relative;
		margin: 15px 0 25px 0;

	}
	#pick .pickup__left p{
		    margin: 20px 0;
   			font-size: 13px;
			margin-right:20px;
	}
}

@media screen and (max-width: 824px){
	#pick .box{
	width: 86%;
	margin: 20px auto;
	border-top: 1px solid rgba(255,255,255,0.6);
}
#pick .container__box{
	width: 100%;
	margin: 0 auto;
	display: block;
	padding-top: 30px;	
}

#pick .container__box hr{
	display: block;
}
#pick .pickup__left p{
		    margin: 20px 0;
   			font-size: 14.58px;
			margin-right:20px;
	}
	

	
#pick .pickup__right img {
	height: 20vw;
}
	
}

@media screen and (max-width: 500px){
#pick .pickup__right img {
	height: 25vw;
}
		
}

@media screen and (max-width: 425px){
	#pick .pickup__left p{
		    margin: 20px 0;
   			font-size: 13px;
			margin-right:10px;
	}
	#pick .pickup__right{
		float: right;
		width: 120px;
		height: 90px;
		
		
	}
	#pick .pickup__left{
		float: left;
		width:calc(100% - 130px);
	}
}


#mgs{
	width: 100%;
}

#mgs .mgs__left{
	width: 50%;
}
#mgs .mgs__left img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#mgs .mgs__right{
	width: 50%;
	padding-left: 7%;
	box-sizing: border-box;
	background-color: #eeeeee;
}


#mgs .mgs__container{
	margin: 0 auto;
	max-width: 1500px;
	display: flex;
}

#mgs .mgs__right h2{
    font-family: oswald;
    font-size: 62.93px;
    color: #bdbcbc;
    line-height: 35px;
    margin: 24% 0 0 0;
}

#mgs .mgs__right h3{
	font-size: 34.9px;
    margin: 9.3% 0 6% 0;
	
}


#mgs .mgs__right p{
	font-size: 18.23px;
	
}

@media screen and (max-width: 1100px){
#mgs .mgs__right h2{
    font-size: 45.93px;
    line-height: 30px;
	margin: 15% 0 0 0;

}
#mgs .mgs__right h3 {
    font-size: 24.9px;
}

#mgs .mgs__right p {
    font-size: 14.23px;
}



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

#mgs .mgs__container{
	display: block;
	background-color: #eeeeee;
	
}

#mgs .mgs__left{
	width: 100%;
}

#mgs .mgs__left img{
	width: 100%;
}
#mgs .mgs__right{
	width: 82%;
	margin: 0 auto;
	padding-left: 0;
	box-sizing: border-box;
	padding: 0 0 60px 0;
}
#mgs .mgs__right h2{
    font-size: 62.93px;
    line-height: 35px;
}
#mgs .mgs__right h3{
	font-size: 30.9px;
	
}
#mgs .mgs__right p {
    font-size: 18.23px;
}
}

@media screen and (max-width: 500px){
#mgs .mgs__right h2{
    font-size: 45.93px;
    line-height: 30px;
}
#mgs .mgs__right h3 {
    font-size: 20px;
}

#mgs .mgs__right p {
    font-size: 14.23px;
}
}



#wagasha{
	width:94%;
	max-width: 1410px;
	margin: 0 auto 50px auto;
	display: flex;
	margin-top:40px; 
}

#wagasha .container__left{
	width: 50%;
	font-size: 15px;
}

#wagasha .container__right{
	width: 50%;
	letter-spacing: -0.4em;
	padding: 0 0 0 30px;
	box-sizing: border-box;
}

#wagasha .container__right figure.container__img {
	width: 20%;
	height: 150px;
	display: inline-block;
	padding: 8px;
	box-sizing: border-box;
	letter-spacing: normal;
	margin: 0 0 10px 0;
	vertical-align: top;
	text-align: center;
}

#wagasha .container__right figure.container__img figcaption {
	font-size:10.5px;
	padding: 5px 0;
}

#wagasha .container__right figure.container__img img{
max-height: 100%;
width: auto;
}

#wagasha .item__box{
	display:flex;
	justify-content: space-around;
}

#wagasha .item{
	width: 50%;
}

#wagasha .item p {
	font-size: 14px;
	line-height: 180%;
}

#wagasha .container__left hr{
	    width: 100%;
	border: none;
	border-bottom: 1px solid #333;
}

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

	#wagasha{
	display: block;
	
}
#wagasha .container__left{
	width:100%;
	margin: 0 auto;
	font-size: 15px;
}
	

#wagasha .container__right{
	width: 100%;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 50px;
	padding: 0;
	text-align: left
}
}

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

	#wagasha .container__left {padding: 0 30px; box-sizing: border-box;}
#wagasha .item__box{
	display:block;
}
#wagasha .item__box .item {
	width: 100%;
} 
}


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

#wagasha .container__right figure.container__img {
	width: 33.333%;
	height: 150px;
	margin: 0 0 30px 0;
}

}


/*---------------------------------------------------------------------
コンテンツタイトル（共通部分）

--------------------------------------------------------------------*/

.cttl {
	max-width: 1339px;
	text-align: left;
	padding: 165px 30px 20px 30px;
	box-sizing: border-box;
	margin: 0 auto;
}

.cttl.nttl {padding-top: 45px;}

.cttl p {margin: 0; padding: 0;}
.cttl p.eng {
	font-size: 39px;
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	display: inline-block;
	padding: 0 0 10px 0;
	font-weight: 600;
}

.cttl h2 {
	font-size: 17px;
	display: inline-block;
	padding: 0 0 10px 0;
	margin: 0 10px;
	font-weight: normal;
}


/*--上部にラインが欲しい場合---*/
.linetop {border-top: 1px solid #333;}


/*------ハンバーガーに切り替わる----------*/
@media screen and (max-width: 1060px) {
	



.cttl p {margin: 0; padding: 0;}	
}


@media screen and (max-width: 700px) {
	
.cttl p.eng {
	font-size: 30px;
}	

}

@media screen and (max-width: 450px) {
	
.cttl h2 {margin: 0; display: block;}

}



/*---------------------------------------------------------------------
製造技術
#tech
--------------------------------------------------------------------*/
/*---メイン画像部分---*/
#tech {
	width: 100%;
	max-width: 1339px;
	margin: 0 auto;
	padding-bottom: 50px;
}

#tech #mainv {
	width: 100%;
	height: 463px;
	overflow: hidden;
	position: relative;
}

#tech #mainv img.back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#tech #mainv .inner {
	position: absolute;
	left: 5%;
	top: 50px;
	width: 90%;
	color: #fff;
}


#tech #mainv .inner p.big {
	font-size: 138px;
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	line-height: 100%;
	margin: 0 0 30px 0;
}

#tech #mainv .inner h2 {
	font-size: 30px;
	font-weight: 400;
	margin: 0 0 20px 0;
}

#tech #mainv .inner h1 {
	font-size: 16px;
	font-weight: 300;
	margin: 0 0 30px 0;
}


/*-------smp ------------------------*/
@media screen and (max-width: 700px) {
	

#tech #mainv {
	height: 300px;
}

#tech #mainv .inner {
	left: 30px;
	top: 30px;
}

#tech #mainv .inner p.big {
	font-size: 80px;
}
}

/*-------smp ------------------------*/
@media screen and (max-width: 600px) {
	
	
	#tech #mainv .fil {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
	}
	
#tech #mainv .inner {
	left: 20px;
	top: inherit;
	bottom: 20px;
}

	#tech #mainv .inner p {
		font-size: 15px;
	}
	
#tech #mainv .inner p.big {
	font-size: 50px;
	margin: 0 0 10px 0;
}
	
#tech #mainv .inner h2 {
	font-size: 20px;
	margin: 0 0 5px 0;
}

#tech #mainv .inner h1 {
	font-size: 15px;
	margin: 0 0 10px 0;
}

	
}


/*---------------------------------------------------------------------
製造技術
#tech
list部分
--------------------------------------------------------------------*/

#tech .list {
	width: 100%;
	padding: 20px 0;
	letter-spacing: -0.4em;
}

#tech .list .box {
	width: calc(50% - 20px);
	margin: 0 10px;
	border-top: 1px dashed #333;
	display: inline-block;
	padding: 20px;
	box-sizing: border-box;
	letter-spacing: normal;
	vertical-align: top;
	position: relative;
}

#tech .list .box:first-child,
#tech .list .box:nth-child(2)  {border-color: #fff;}

#tech .list .box a {
	display: block;
	text-decoration: none;
}

#tech .list .box img {
	width: 45%;
	height: 25vw;
	max-height: 218px;
	object-fit: cover;
	float: left;
	margin: 0 30px 0 0;
}

#tech .list .box p.big {
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	margin: 0px 0 15px 0;
	font-size: 36px;
	padding-top: 20px;
}

#tech .list .box h3 {
	font-size: 16px;
	margin: 0 0 30px 0;
	font-weight: 400;
}

#tech .list .box h3.md {
	font-size: 18px;
}

#tech .list .box h3.sm {
	font-size: 16px;
	line-height: 180%;
}

#tech .list .box p.kon {
	font-size: 14px;
	background-color: #19304a;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
	display: inline-block;
	color: #fff;
}


/*--詳細ボタン--*/

#tech .list .box p.sbtn {
	position: absolute;
	bottom: 0;
	right: 20px;
	background-color: #19304a;
	padding: 0 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: 12px;
	color: #ffffff;
	transition: 0.3s;
}

#tech .list .box p.sbtn:hover {
	background-color: #6E0E0F;
}

@media screen and (max-width: 700px) {
	
#tech .list .box {
	width: calc(100% - 20px);
	margin: 0 10px;
}	


#tech .list .box p.big {
	line-height: 100%;
	font-size: 28px;
}	
	
	
#tech .list .box img {
	width: 45%;
	height: 35vw;
	max-height: 218px;
	object-fit: cover;
	float: right;
	margin: 0 0 0 20px;
}

#tech .list .box:nth-child(2)  {border-color: #333;}
#tech .list .box p.kon {
	font-size: 14px;
	line-height: 100%;
	margin-top: -10px;
}

#tech .list .box p.sbtn {
	position: static;
	display: inline-block;
	width: 50px;
}

}



/*----------------------------------------------------------------------
製造技術
詳細ぺージ
#tech_arc
----------------------------------------------------------------------*/
#tech_arc {
	width: 100%;
	max-width: 1339px;
	margin: 0 auto;
}

/*---head　青いターム表示部---*/
#tech_arc #head {
	background: linear-gradient(-135deg, #1f247f, #158b8a);
	width: 100%;
	padding: 40px;
	box-sizing: border-box;
	color: #fff;
}

#tech_arc #head p.big {
	font-size: 138px;
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	line-height: 100%;
	margin: 0 30px 0 0;
	display: block; 
	float: left;
}

#tech_arc #head h5 {
	font-size: 30px;
	font-weight: 400;
	margin: 0 0 20px 0;
	padding-top: 20px;
}

#tech_arc #head h4 {
	font-size: 16px;
	font-weight: 300;
	margin: 0 0 20px 0;
}

/*-------smp ------------------------*/
@media screen and (max-width: 1339px) {
	
#tech_arc #head {
	margin: 0 30px;
	width: calc(100% - 60px);
	padding: 40px;
}	
}

/*-------smp ------------------------*/
@media screen and (max-width: 1000px) {
	
#tech_arc #head {
	margin: 0 30px;
	padding: 20px;
}	

#tech_arc #head p.big {
	font-size: 80px;
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	line-height: 90%;
	margin: 0 20px 0 0;
	display: block; 
	float: left;
}

#tech_arc #head h5 {
	font-size: 20px;
	font-weight: 400;
	margin: 0 0 0px 0;
	padding-top: 5px;
}

#tech_arc #head h4 {
	font-size: 15px;
	font-weight: 300;
	margin: 0;
}
	
#tech_arc #head p {
	margin: 0;
	padding: 0;
}
}




/*---コンテンツ・段組み---------------------*/

#tech_arc .inner {
	padding: 0 0 30px 30px;
}

#tech_arc .inner .side {
	width: 290px;
	float: right;
	padding-top: 30px;
}

#tech_arc .inner .main {
	width: calc(100% - 290px);
	float: left;
	padding: 0 80px 0 0;
	box-sizing: border-box;
}

#tech_arc .inner .main.infomain {
	padding-top: 20px;
}


/*-------smp ------------------------*/
@media screen and (max-width: 1339px) {
	
#tech_arc .inner {
	padding: 0 30px 30px 30px;
}	
}

/*-------smp ------------------------*/
@media screen and (max-width: 1000px) {
	
#tech_arc .inner .side {
	width: 220px;
	padding-top: 30px;
}

#tech_arc .inner .main {
	width: calc(100% - 220px);
	padding: 0 60px 0 0;
}
}

/*-------smp ------------------------*/
@media screen and (max-width: 900px) {

	
#tech_arc .inner .side {
	width: 100%;
	padding-top: 30px;
}

#tech_arc .inner .main {
	width: 100%;
	padding: 0;
}
}

/*-------smp ------------------------*/
@media screen and (max-width: 700px) {
	


}



/*---side　サイド用-----------------------*/

#tech_arc .inner .side p.cg {
	margin: 0 0 10px 0;
	padding: 0;
}

#tech_arc .inner .side p.cg a {
	background-color: #f6f6f6;
	padding: 15px 15px;
	display: block;
	text-decoration: none;
	transition: 0.3s;
	font-size: 1.1em;
	font-weight: bold;
}

#tech_arc .inner .side p.cg a:hover {
	background-color: #d6d6d6;
}


/*--info用---*/
#tech_arc .inner .side p.inf {
	margin: 0 0 10px 0;
	padding: 0;
}

#tech_arc .inner .side p.inf a {
	background-color: #f6f6f6;
	padding: 15px 15px;
	display: block;
	text-decoration: none;
	transition: 0.3s;
}

#tech_arc .inner .side p.inf a:hover {
	background-color: #d6d6d6;
}




#tech_arc .inner .side h3 {
	font-size: 22px;
	letter-spacing: 0.05em;
	margin: 20px 0;
	font-weight: 400;
	padding: 0;
}

#tech_arc .inner .side h3 span {
	font-size: 25px;
	font-family: 'Oswald';
	display: inline-block;
	margin-right: 22px;
	font-weight: 500;
	letter-spacing: normal;
}

/*-------smp ------------------------*/
@media screen and (max-width: 1000px) {
	
#tech_arc .inner .side h3 {
	font-size: 16px;
	letter-spacing: 0.1em;
	margin: 20px 0;
	font-weight: 400;
	padding: 0;
}

#tech_arc .inner .side h3 span {
	display: block;
}
}



/*---製造技術サイド---*/

#tech_arc .inner .side .tbs {
	display: table;
	margin: 0 auto 5px auto;
	width: 90%;
	transition: 0.5s;
	height: 60px;
	border-top: 1px solid #d6d6d6;
}

#tech_arc .inner .side .tbs:hover {background-color: #f6f6f6;}


#tech_arc .inner .side a {text-decoration: none;}
#tech_arc .inner .side .tbs .img {
	display: table-cell;
	width: 60px;
	min-height: 60px;
}

#tech_arc .inner .side .tbs .ttl {
	display: table-cell;
	width: calc(100% - 60px);
	vertical-align: middle;
	padding: 5px 10px 5px 15px;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 160%;
}

#tech_arc .inner .side .tbs .img img {
	width: 60px;
	height: 60px;
	object-fit: cover;
}
/*-------smp ------------------------*/
@media screen and (max-width: 900px) {
	
#tech_arc .inner .side .tbs {
	display: inline-table;
	width: 32.5%;
	border-top: 1px dotted #d6d6d6;
}	
	
}


/*-------smp ------------------------*/
@media screen and (max-width: 600px) {
	
#tech_arc .inner .side .tbs {
	display: inline-table;
	width: 49%;
}	
}

/*-------smp ------------------------*/
@media screen and (max-width: 500px) {
	
#tech_arc .inner .side .tbs {
	display: table;
	width: 100%;
}	
}




/*---対応分野サイド---*/

#tech_arc .inner .side .tb {
	display: table;
	margin-bottom: 5px;
	width: 100%;
	transition: 0.5s;
	height: 80px;
}

#tech_arc .inner .side .tb:hover {background-color: #f6f6f6;}

#tech_arc .inner .side .tb .img {
	display: table-cell;
	width: 80px;
}

#tech_arc .inner .side .tb .ttl {
	display: table-cell;
	width: calc(100% - 80px);
	vertical-align: middle;
	padding: 0 10px 0 20px;
	box-sizing: border-box;
}

#tech_arc .inner .side .tb .img img {
	height: 80px;
	width: 80px;
	object-fit: cover;
}

/*-------smp ------------------------*/
@media screen and (max-width: 900px) {
	
#tech_arc .inner .side .tb {
	display: inline-table;
	width: 32.5%;
	border-top: 1px dotted #d6d6d6;
}	
	
}


/*-------smp ------------------------*/
@media screen and (max-width: 600px) {
	
#tech_arc .inner .side .tb {
	display: inline-table;
	width: 49%;
}	
}

/*-------smp ------------------------*/
@media screen and (max-width: 500px) {
	
#tech_arc .inner .side .tb {
	display: table;
	width: 100%;
}	
}




/*---main---*/

/*---main部分のタイトル回り----*/
#tech_arc .inner .main .ttl {
	padding: 40px 0;
}

#tech_arc .inner .main .ttl h1 {
	font-size: 28px;
	font-weight: 400;
	margin: 0 20px 0 0;
	padding: 0;
	line-height: 120%;
	display: inline-block;
}



/*-------smp ------------------------*/
@media screen and (max-width: 500px) {
	
#tech_arc .inner .main .ttl h1 {
	font-size: 20px;
}	
}

#tech_arc .inner .main .ttl p {
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	font-size: 20px;
	margin: 0;
	padding: 0;
	display: inline-block;
}


#tech_arc .inner .main p.dt {
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	font-size: 17px;
	margin: 50px 0 10px 0;
	padding: 0;
}

#tech_arc .inner .main h1.info {
	font-size: 20px;
	margin: 0 0 30px 0;
	padding: 0;
	font-weight: 400;
}


/*---main部分の画像廻り（製造技術で使用）---*/

#tech_arc .inner .main .imgf {}
#tech_arc .inner .main .img {
	width: 60%;
	float: left;
}
#tech_arc .inner .main .siyo {
	width: 40%;
	float: right;
	padding: 0 0 0 30px;
	box-sizing: border-box;
}

	#tech_arc .inner .main .img img {
		width: 100%;
		height: auto;
	}


/*-------smp ------------------------*/
@media screen and (max-width: 1100px) {
	
#tech_arc .inner .main .img {
	width: 100%;
	float: none;
	padding-bottom: 20px;
}
#tech_arc .inner .main .siyo {
	width: 100%;
	float: none;
	padding: 0px;
	box-sizing: border-box;
}

}


/*---テキスト段組みなど（対応分野で使用）---*/

#tech_arc .inner_txt {
	padding: 10px;
}

#tech_arc .inner_txt p {
	padding: 10px;
}

#tech_arc .inner_txt h2 {
	font-weight: 400;
	font-size: 18px;
	margin: 10px 0 20px 0;
	line-height: 180%;
	padding: 10px;
}


#tech_arc .inner_txt .in {
	letter-spacing: -0.4em;
}
#tech_arc .inner_txt .in .box {
	width: 50%;
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
}

#tech_arc .inner_txt .in .box:first-child {padding-right: 20px;box-sizing: border-box;}
#tech_arc .inner_txt .in .box:nth-child(2) {padding-left: 20px;box-sizing: border-box;}

#tech_arc .inner_txt .in .box h3 {
	border-bottom: 2px solid #333;
	padding: 5px 10px;
	font-weight: normal;
	font-size: 16px;
	margin-top: 30px;
}

#tech_arc .inner_txt .in .box hr.h3u {
	width: 50px;
	border:none;
	background-color: transparent;
	margin: 0;
	padding: 0;
	position: relative;
	top: -2px;
	border-top: 2px solid red;
}


#tech_arc .inner_txt .in .box.ll {width: 35%;}
#tech_arc .inner_txt .in .box.rr {width: 65%;}


/*-------smp ------------------------*/
@media screen and (max-width: 800px) {
	
#tech_arc .inner_txt .in .box {
	width: 100%;
}
	

#tech_arc .inner_txt .in .box.ll {width: 100%;}
#tech_arc .inner_txt .in .box.rr {width: 100%;}
	
	
#tech_arc .inner_txt .in .box:first-child {padding-right: 0px;box-sizing: border-box;}
#tech_arc .inner_txt .in .box:nth-child(2) {padding-left: 0px;box-sizing: border-box;}
	
	
	
#tech_arc .inner_txt {
	padding: 0px;
}

#tech_arc .inner_txt p {
	padding: 0px;
}

#tech_arc .inner_txt h2 {
	padding: 0px;
}

#tech_arc .inner_txt .in .box h3 {
	border-bottom: 2px solid #333;
	padding: 5px 0px;
	font-weight: normal;
	font-size: 17px;
	margin-top: 30px;
}	
	
}


/*---画像4枚のエリア----*/
.iarea {
	margin: 20px 0;
	letter-spacing: -0.4em;
}

.iarea img {
	width: 25%;
	height: 200px;
	display: inline-block;
	object-fit: cover;
}

/*-------smp ------------------------*/
@media screen and (max-width: 500px) {
	
.iarea img {
	width: 50%;
	height: 40vw;
	object-fit: cover;
	display: block;
	float: left;
}	
}



/*---tableの装飾----*/

#tech_arc table {
	background-color: #d6d6d6;
	border-spacing: 1px;
	width: 100%;
}

#tech_arc table th,
#tech_arc table td {
	padding: 5px;
	background-color: #fff;
	min-width: 80px;
}

#tech_arc table tr td:first-child {background-color: #f6f6f6; vertical-align: top;}


/*----------------------------------------------------------------------
お知らせ

#info
----------------------------------------------------------------------*/
#info {
	width: 100%;
	max-width: 1339px;
	margin: 0 auto;
	padding: 0;
}

#info .wrap {
	letter-spacing: -0.4em;
	margin-bottom: 50px;
}

#info .wrap .box {
	display: inline-block;
	width: calc(50% - 40px);
	margin: 0 20px;
	padding: 20px;
	box-sizing: border-box;
	letter-spacing: normal;
	vertical-align: top;
}

#info .wrap .box.img {
	border: 1px solid #d6d6d6;
	text-align: center;
}

#info .wrap .box p.dt {
	font-size: 17px;
	font-weight: 400;
	margin: 0 0 10px 0;
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	color: #999;
}

#info .wrap .box h1 {
	font-size: 19px;
	font-weight: 400;
	margin: 0 0 30px 0;
}


/*---お知らせ一覧----*/

#info .gr {
	background-color: #f6f6f6;
	width: 100%;
	padding: 80px 30px;
	box-sizing: border-box;
}

#info .gr h3 {
	font-size: 19px;
	text-align: center;
	margin: 0;
	padding: 0 0 50px 0;
	font-weight: 400;
	letter-spacing: 0.2em;
}


#info .gr a {text-decoration: none; }
#info .gr a .box:hover {background-color: rgba(25,48,74,0.6); color: #fff;}

#info .gr .box {
	display: table;
	width: 100%;
	max-width: 800px;
	margin: 0 auto 10px auto;
	background-color: #fff;
	transition: 0.5s;
}

#info .gr .box .dt {
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	color: #666;
	width: 130px;
	display: table-cell;
	padding: 10px;
	text-align: center;
}

#info .gr .box .md {
	color: #666;
	width: calc(100% - 150px);
	display: table-cell;
	padding: 10px;
	box-sizing: border-box;
}

#info .gr .box:hover .md,
#info .gr .box:hover .dt {color: #fff;}


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

#info .wrap .box {
	width: calc(100% - 40px);
}

	
#info .gr .box .dt {
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
	color: #666;
	width: 5em;
	display: table-cell;
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
}

#info .gr .box .md {
	color: #666;
	width: calc(100% - 5em);
	display: table-cell;
	padding: 10px;
	box-sizing: border-box;
}

}


/*----------------------------------------------------------------------
わが社の強み

#str
----------------------------------------------------------------------*/

#str {
	width: 100%;
	max-width: 1338px;
	margin: 0 auto 0px auto;
	padding: 20px 0;
}


#str2 {
	width: 100%;
	max-width: 1338px;
	margin: 0 auto 50px auto;
	padding: 20px 0;
}

#str .img {
	letter-spacing: -0.4em;
}

#str .img img {
	display: inline-block;
	width: 50%;
	height: auto;
}


#str2 .tb {
	display: table;
	margin: 10px auto;
	max-width: 1134px;
	width: 90%;
	border-bottom: 1px dashed #666;
}

#str2 .tb:last-child {border: none;}

#str2 .tb .td {
	display: table-cell;
	padding: 10px;
	vertical-align: top;
}

#str2 .tb .td p {margin: 0;padding: 0;}

#str2 .tb .td.num {
	width: 50px;
	font-size: 50px;
	font-family: 'Oswald',"游ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
}
#str2 .tb .td.left {width: 200px; font-size: 20px; font-weight: 300; font-weight: bold;}
#str2 .tb .td.ctr {width: 240px;}
#str2 .tb .td.ctr img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	display: block;
	float: left;
}

#str2 .tb .td.righ {width: calc(100% - 490px);}


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

#str2 .tb {
	display: block;
	letter-spacing: -0.4em;
	border-bottom: 1px dashed #666;
	padding: 20px 0;
}

#str2 .tb .td {
	display: inline-block;
	letter-spacing: normal;
}
#str2 .tb .td.num {width: 70px;  box-sizing: border-box;}
#str2 .tb .td.left {width: calc(100% - 70px); box-sizing: border-box;}
#str2 .tb .td.ctr {width: 260px; box-sizing: border-box;}
#str2 .tb .td.righ {width: calc(100% - 260px); box-sizing: border-box;}
}


@media screen and (max-width: 800px) {
	
#str .img img {
	display: block;
	width: 100%;
	height: auto;
}
}


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

#str2 .tb {
	display: block;
	letter-spacing: -0.4em;
	border-bottom: 1px dashed #666;
	padding: 20px 0;
}

#str2 .tb .td {
	display: inline-block;
	letter-spacing: normal;
}

#str2 .tb .td.ctr {width: 100%;}
#str2 .tb .td.righ {width: 100%;}
	
#str2 .tb .td.ctr img {
	width: 50%;
	height: 40vw;
	object-fit: cover;
}
}


/*----------------------------------------------------------------------------
ページングカスタマイズ
-----------------------------------------------------------------------------*/

nav.pagination {
	letter-spacing: normal; 
	text-align: center;
	font-size: 16px;
	color:#000;
	margin: 30px 0 ;
}

nav.pagination h2 {display: none;}
nav.pagination a{
	color:#000;
	margin: 0 10px;
	text-decoration: none;
}

nav.pagination span.page-numbers {
	background-color: #000;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	padding: 5px 10px;
	color: #ffffff;
	text-decoration: none;
}

nav.pagination span.dots{
	background: none;
	color:#000;
}
/*--nav.pagination span.page-numbers {background-color: #d6d6d6;}--*/



/*---------------------------------------------------------------------------
ページングのスタイル
---------------------------------------------------------------------------*/
.newer-older {
	margin: 30px auto 80px auto;
	letter-spacing: -0.4em;
	display:flex;
	-js-display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	width: 100%;
	max-width: 1200px;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid #d6d6d6;
}
.newer-older p {margin: 0; padding: 0;}

.newer-older p.newer {text-align: right; background: url("images/yajir.png") no-repeat right;}
.newer-older p.older {text-align: left; background: url("images/yajil.png") no-repeat left;}
.newer-older p.blog {
	text-align: center; 
	background-color: #f6f6f6;
	border-right: 1px solid #d6d6d6;
	border-left: 1px solid #d6d6d6;
}

.newer-older p.older,
.newer-older p.newer {
	letter-spacing: normal;
	box-sizing: border-box;
	vertical-align: middle;
}

.newer-older p.older{width: calc(50%)}
.newer-older p.newer{width: calc(50%)}


.newer-older p.older a,
.newer-older p.newer a {
	height: 100%;
	display: block;
	text-decoration: none;
	transition: 0.5s;
	box-sizing: border-box;
}

.newer-older p.older a {padding: 20px 20px 20px 40px;}
.newer-older p.newer a {padding: 20px 40px 20px 20px;}

.newer-older p.older a:hover,
.newer-older p.newer a:hover {
	background-color: #f6f6f6;
}

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

.newer-older p.older{width: 50%}
.newer-older p.newer{width: 50%; border-left: 1px solid #d6d6d6;}
.newer-older p.blog { display: none;}
.newer-older {
	margin: 0px auto 80px auto;
}
}

.bgred{
    background-color: #e60012;
    color: white;
    text-align: center;
    margin: 0 0% 10px 0%;
    padding: 2px 15px;
    display: inline-block;
}