@import url(//fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese);
@import url(//fonts.googleapis.com/css?family=Roboto:400,700&display=swap);
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
}
article,
aside,
details,
figcaption,
figure,
main,
footer,
header,
hgroup,
menu,
nav,
section {
 display:block
}
ol,
ul {
 list-style:none
}
blockquote,
q {
 quotes:none
}
blockquote::before,
blockquote::after,
q::before,
q::after {
 content:'';
 content:none
}
table {
 border-collapse:collapse;
 border-spacing:0
}
* {
 -webkit-box-sizing:border-box;
 box-sizing:border-box
}
*::before,
*::after {
 -webkit-box-sizing:border-box;
 box-sizing:border-box
}
html {
 font-size:14px;
 -webkit-font-smoothing:antialiased;
 -webkit-tap-highlight-color:transparent
}
html,
body {
 font-size:62.5%;
 overflow-x:hidden
}
body {
 font-family:"メイリオ",Meiryo,Droid Sans,Roboto,HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN","Lucida Grande","Lucida Sans","Lucida Sans Unicode","Trebuchet MS","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
 font-weight:300;
 width:100%;
 -webkit-text-size-adjust:100%;
 font-size:14px;
 font-size:1.4rem;
 line-height:2
}


/* .sp
------------------------------------------------------------*/

.sp { display:none!important; }
.iPad { display:none!important; }

@media screen and (max-width:800px) {
.pc { display: none!important; }
.sp { display: block!important; }
}
@media screen and (max-width:1200px) {
.iPad { display: block!important; }
}



/* Global Button Styles */
a.animated-button:link, a.animated-button:visited {
    position: relative;
    font-weight: bold;
    overflow: hidden;
    letter-spacing: .08em;
    display:block;
 margin:0 auto;
 width:300px;
 border:1px solid #000;
 line-height:60px;
 padding:0 10px;
 text-decoration:none;
 text-align:center;
 color:#000;
 transition:all .3s

}

a.animated-button span
{ margin-left: 3%; font-size:200%; vertical-align: bottom;}

a.animated-button:link:after, a.animated-button:visited:after {
    content: "";
    position: absolute;
    height: 0%;
    left: 50%;
    top: 50%;
    width: 150%;
    z-index: -1;
    -webkit-transition: all 0.75s ease 0s;
    -moz-transition: all 0.75s ease 0s;
    -o-transition: all 0.75s ease 0s;
    transition: all 0.75s ease 0s;
    
}
a.animated-button:link:hover, a.animated-button:visited:hover {
    color:white;
    text-shadow: none;
}


/* Victoria Buttons */

a.animated-button.victoria-three {
    border: 2px solid black;
}

a.animated-button.victoria-three:after {
    background:#003466;
    opacity: .5;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

a.animated-button.victoria-three:hover:after {
    height: 140%;
    opacity: 1;
}




/* btnSp */
.btnSp {
 width:100%;
 height:50px;
 margin:15px 0
}
.btnSp a {
 position:relative;
 display:block;
 margin:0 auto;
 height:60px;
 width:300px;
 border:1px solid #000;
 line-height:60px;
 padding:0 10px;
 text-decoration:none;
 text-align:left;
 color:#000;
 font-weight:bold;
 transition:all .3s
}
.btnSp a:after {
 content:"\f2a0";
 font-family:"Font Awesome 5 Free";
 position:absolute;
 top:50%;
 right:10px;
 transform:translateY(-50%);
 font-size:18px;
 font-weight:bold
}
.btnSp a:hover {
 border:1px solid #c11e3a;
 background:#c11e3a;
 color:#fff
}
@media screen and (min-width: 481px) {
 .btnSp {
  display:none
 }
}



/*





.tbl01 {
 width:100%;
 margin-bottom:40px
}
.tbl01 tr th,
.tbl01 tr td {
 text-align:left;
 display:block;
 width:100%;
 padding:15px 0
}


*/

.tbl01 {
 width:100%;
 margin-bottom:40px
}

 .tbl01 tr th,
 .tbl01 tr td {
  display:table-cell;
  width:auto;
  padding:20px 0;
  text-align:left;

 }

.tbl01 tr th {
 border-bottom:1px solid #003466;
 padding:20px 0 10px
}
@media screen and (min-width: 769px) {
 .tbl01 tr th {
  padding:20px 0
 }
}
.tbl01 tr td {
 border-bottom:1px solid #d1dded
}
.pageTop {
 opacity:0;
 position:fixed;
 bottom:20px;
 right:20px;
 z-index:150;
 transition:all .5s
}
@media all and (max-width: 1024px) {
 .pageTop {
  bottom:10px;
  right:10px
 }
}
.pageTop a {
 display:block;
 width:76px;
 height:40px;
 transition:all .3s
}
@media screen and (min-width: 769px) {
 .pageTop a {
  width:85px;
  height:50px
 }
}
.pageTop a:hover {
 opacity:.7
}
.pageTop a img {
 width:100%
}
.pageTop.active {
 opacity:1;
}


/* .header
------------------------------------------------------------*/
.header {
 width:100%;
 position: fixed;
 top:0;
 left:0;
 z-index:999
}
.header .headerInner {
 height:55px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 transition:all 0.5s ease;
 background:none
}
@media screen and (min-width: 769px) {
 .header .headerInner {
  height:120px;
  background:rgba(255,255,255,0.8)

 }
}
@media screen and (min-width: 1200px) {
 .header .headerInner {
  background:none
 }
}
.header .headerInner .headerTop {
 display: flex;
 align-items:center;
 height:100%;

}
@media screen and (min-width: 1200px) {
 .header .headerInner .headerTop {
  background:rgba(255,255,255,0.85)
 }
}
.header .headerInner .headerTop h1 a{
margin-right:15px;
  padding-left:15px;
   font-size:100%;
		font-weight:bold;
		color:white;
			text-decoration: none;

}


.headerTop.changeNav{ opacity:100%}

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

.headerTop.changeNav{ opacity:0}
}


@media screen and (min-width: 769px) {
.header .headerInner .headerTop h1 a{
font-size:200%;
color:black;
}


}
.header .headerInner .headerTop p img {
 width:80px
}
@media screen and (min-width: 769px) {
 .header .headerInner .headerTop p img {
  width:100px
 }
}
.header .headerInner .headerTopRight {
 display:flex;
 align-items:center
}
@media screen and (min-width: 1200px) {
 .header .headerInner .headerTopRight {
  width:100%;
  -webkit-flex:1;
  flex:1
 }
}
.header .headerInner .navButton {
 display:block;
 cursor:pointer;
 float:right;
 background:#003466;
 z-index:20;
 position:relative;
 width:55px;
 height:55px
}
@media screen and (min-width: 1200px) {
 .header .headerInner .navButton {
  display:none
 }
}
.header .headerInner .navButton span {
 display:inline-block;
 transition:all .4s;
 position:absolute;
 left:10px;
 width:35px;
 height:4px;
 background-color:#fff
}
.header .headerInner .navButton span:nth-of-type(1) {
 top:13px
}
.header .headerInner .navButton span:nth-of-type(2) {
 top:26px
}
.header .headerInner .navButton span:nth-of-type(3) {
 bottom:12px
}
.header .headerInner .navButton.active span:nth-of-type(1) {
 -webkit-transform:translateY(14px) rotate(-45deg);
 transform:translateY(14px) rotate(-45deg)
}
.header .headerInner .navButton.active span:nth-of-type(2) {
 opacity:0
}
.header .headerInner .navButton.active span:nth-of-type(3) {
 -webkit-transform:translateY(-13px) rotate(45deg);
 transform:translateY(-13px) rotate(45deg)
}
.header .headerInner .nav {
 opacity:0;
 position:fixed;
 right:-100%;
 top:0;
 z-index:10;
 background:white;/*background:rgba(255,255,255,0.85);*/
 width:100%;
 margin-top:55px;
 transition:all .3s
}
@media screen and (min-width: 769px) {
 .header .headerInner .nav {
  margin-top:120px;
  position: absolute;
  background:rgba(255,255,255,0.85);
 }
}
@media screen and (min-width: 1200px) {
 .header .headerInner .nav {
  opacity:1;
  position:inherit;
  margin:0;
  height:120px

 }
}
.header .headerInner .nav .gNav {
 margin-right:30px;
 width:100%;
 position:relative;
 overflow-x:hidden;
 overflow-y:auto;
 display:flex;
 flex-wrap:wrap;
 transition:all .3s
}
@media screen and (min-width: 1200px) {
 .header .headerInner .nav .gNav {
  height:100%;
  text-align:center;
  justify-content:flex-end
 }
}
.header .headerInner .nav .gNav li {
 display:flex;
 width:100%
}
@media screen and (min-width: 1200px) {
 .header .headerInner .nav .gNav li {
  justify-content:center;
  width:auto;
  align-items:center
 }
}
.header .headerInner .nav .gNav li a {
 text-decoration:none;
 line-height:1.75;
 display:block;
 color:#000;
 padding:20px;
 font-size:1.6rem;
 width:100%;
 border-bottom:1px solid #ccc;
 position:relative;
   background:white;/*background:rgba(255,255,255,0.85);*/
}
.header .headerInner .nav .gNav li a:after {
 content:"▶";
 position:absolute;
 top:50%;
 right:10px;
 transform:translateY(-50%);
 font-size:8px
}
@media screen and (min-width: 1200px) {
.header .headerInner .nav .gNav li a { background:none}/*background:rgba(255,255,255,0.85);*/

.header .headerInner .nav .gNav li a:after {
  content:none
 }
}
@media screen and (min-width: 1200px) {
 .header .headerInner .nav .gNav li a {
  padding:0 20px;
  font-size:1.4rem;
  border-bottom:none
 }
}
@media screen and (min-width: 1300px) {
 .header .headerInner .nav .gNav li a {
  padding:0 35px
 }
}
.header .headerInner .nav .gNav li a span {
 color:#003466;
 font-family:"Roboto",sans-serif;
 font-weight:bold;
 margin-left:15px;
 font-size:1.2rem
}
@media screen and (min-width: 1200px) {
 .header .headerInner .nav .gNav li a span {
  display:block;
  margin-left:0
 }
}
@media screen and (min-width: 1300px) {
 .header .headerInner .nav .gNav li a span {
  font-size:1.4rem
 }
}
.header .headerInner .nav .gNav li a:hover {
 opacity:.7
}

@media screen and (min-width: 1200px) {
 .header .headerInner .nav .gNav li.btnContact,
 .header .headerInner .nav .gNav li.btnRecruit {
  display:none
 }
}
.header .headerInner .nav.open {
 right:0;
 opacity:1
}
.header .headerInner .gNavSub {
 display:none
}
@media screen and (min-width: 1200px) {
 .header .headerInner .gNavSub {
  height:100%;
  width:250px;
  display:block
 }
}
.header .headerInner .gNavSub li {
 height:120px
}
.header .headerInner .gNavSub li a {
 width:250px;
 height:100%;
 display:flex;
 justify-content:center;
 align-items:center;
 color:#fff;
 text-decoration:none
}
.header .headerInner .gNavSub li a.btnContact {
 background-color: #003466;
}
.header .headerInner .gNavSub li a.btnRecruit {
 background:rgba(168,40,62,0.7)
}
.header .headerInner .gNavSub li a:hover {
 opacity:.7
}
@media screen and (min-width: 1025px) {
 .header .headerInner .gNavSub {
  width:auto
 }
}



/* .secTtl
------------------------------------------------------------*/
.secTtl {
 font-size:1.8rem;
 font-weight:bold;
 margin-bottom:40px;
 line-height:1.5
}
.secTopQuality .secTtl {
  font-size:250%;
  margin-bottom:1.5%;
  border-bottom:1px solid black;
 font-weight:bold;
  width: auto;

}
@media screen and (min-width: 374px) {
 .secTtl {
  font-size:2rem
 }
}
@media screen and (min-width: 769px) {
 .secTtl {
  font-size:3.6rem;
 }
}
.secTtl .secTtlIcon {
 font-size:2.5rem;
 color:#c11e3a
}
@media screen and (min-width: 769px) {
 .secTtl .secTtlIcon {
  font-size:5rem
 }
}
.secTopQuality .secTtlEng {
 display:block;
 font-size:140%;
 color:#003268;
 font-weight:bold;
 font-family:"Roboto",sans-serif
}

.secTtl .secTtlEng {
 display:block;
 font-size:1.2rem;
 color:#003268;
 font-family:"Roboto",sans-serif
}
@media screen and (min-width: 769px) {
 .secTtl .secTtlEng {
  font-size:1.6rem
 }
}
.secTtl.secTtlLeft .secTtlEng {
 display:block;
 margin-left:10px;
 vertical-align:middle
}
@media screen and (min-width: 481px) {
 .secTtl.secTtlLeft .secTtlEng {
  display:inline
 }
}

.secTtl.secTtlLeft .secTtlEng {
  margin-left:0
 }
@media screen and (min-width: 769px) {
 .secTtl.secTtlLeft .secTtlEng {
  margin-left:30px
 }
}
.secTtl.secTtlCenter {
 text-align:center
}
.secTtl.secTtlCenter .secTtlEng {
 display:block;
 margin-left:10px;
 vertical-align:middle
}
@media screen and (min-width: 481px) {
 .secTtl.secTtlCenter .secTtlEng {
  display:inline
 }
}
@media screen and (min-width: 769px) {
 .secTtl.secTtlCenter .secTtlEng {
  margin-left:30px
 }
}



/* .secTtl
------------------------------------------------------------*/

.sec {
 padding:80px 0 0
}
.sec .secInner {
 width:100%;
 max-width:1470px;
 padding:0 15px;
 margin:0 auto
}
.sec .secInner .secInnerBox {
 margin-bottom:40px
}
@media screen and (min-width: 769px) {
 .sec .secInner .secInnerBox {
  margin-bottom:80px
 }
}
.sec .secInner .secInnerBox.box860 {
 width:100%;
 max-width:860px;
 margin-left:auto;
 margin-right:auto
}
.sec .secInner .secInnerBox.box1000 {
 width:100%;
 max-width:1000px;
 margin-left:auto;
 margin-right:auto
}
.sec .secInner .secInnerBox.box1000 p {
 width:100%;
 max-width:860px;
 margin-left:auto;
 margin-right:auto
}
.sec .secInner .secInnerBox .secTtlSub1000 {
 width:100%;
 max-width:1000px;
 margin-left:auto;
 margin-right:auto
}
.sec .secInner p {
 font-size:1.4rem
}
@media screen and (min-width: 769px) {
 .sec .secInner p {
  font-size:1.6rem
 }
}
.sec .secInner p.txtIndent {
 padding-left:15px
}
@media screen and (min-width: 769px) {
 .sec .secInner p.txtIndent {
  padding-left:30px
 }
}
.sec.hasMgb {
 margin-bottom:40px
}
@media screen and (min-width: 769px) {
 .sec.hasMgb {
  margin-bottom:80px
 }
}
.sec .secCaution {
 font-size:1.2rem;
 margin:40px 0 20px
}
@media screen and (min-width: 769px) {
 .sec .secCaution {
  font-size:1.4rem;
  margin:80px 0 40px
 }
}


/* .productsList
------------------------------------------------------------*/

.productsList ul {
 display:flex;
 justify-content:space-between;
 flex-wrap:wrap;
 background:#000
}
.productsList ul li {
 width:50%
}
@media screen and (min-width: 769px) {
 .productsList ul li {
  width:25%
 }
}
.productsList ul li a {
 display:block;
 color:#fff
}
.productsList ul li a .productsListBox {
 position:relative;
 overflow:hidden
}
.productsList ul li a .productsListBox .productsListBoxImg img {
 width:100%;
 vertical-align:bottom;
 transition:all .3s
}
@media screen and (min-width: 769px) {
 .productsList ul li a .productsListBox .productsListBoxImg img {
  opacity:.5
 }
}
.productsList ul li a .productsListBox .productsListBoxOv {
 background:url(../img/top/bg_productsList_01.png) center center no-repeat;
 background-size:cover;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%
}
@media screen and (min-width: 769px) {
 .productsList ul li a .productsListBox .productsListBoxOv {
  transform:translateY(100%);
  transition:all .3s
 }
}


/* .productsListBoxOvInner*/

.productsList ul li a .productsListBox .productsListBoxOv .productsListBoxOvInner {
 position:absolute;
 bottom:5.5%;
 left:15%;
 width:45%;
}

 .productsList ul li a .productsListBox .productsListBoxOv .productsListBoxOvInner h3 {
  font-size:120%;
  text-align:left;
  font-weight:bold
     
 }

/*view detail*/

.productsList ul li a .productsListBox .productsListBoxOv .productsListBoxOvInner .productsListBtn {
 text-align:right;
 color:#fff;
 margin-top:3%;
 font-size:100%
}


@media (min-width: 451px) and (max-width: 1024px) {
	
/* .productsListBoxOvInner*/

.productsList ul li a .productsListBox .productsListBoxOv .productsListBoxOvInner {
 position:absolute;
 bottom:4.5%;
 left:15%;
 width:63%;
}

 .productsList ul li a .productsListBox .productsListBoxOv .productsListBoxOvInner h3 {font-size:90%;}

/*view detail*/

.productsList ul li a .productsListBox .productsListBoxOv .productsListBoxOvInner .productsListBtn {
 margin-top:0;
 font-size:90%
}

}


@media screen and (max-width:450px) {
	
/* .productsListBoxOvInner*/

.productsList ul li a .productsListBox .productsListBoxOv .productsListBoxOvInner {
 position:absolute;
 bottom:4%;
 left:15%;
 width:63%;
}

 .productsList ul li a .productsListBox .productsListBoxOv .productsListBoxOvInner h3 {font-size:80%;}

/*view detail*/

.productsList ul li a .productsListBox .productsListBoxOv .productsListBoxOvInner .productsListBtn {
 margin-top:-9%;
 font-size:80%
}
}


/*transform*/

.productsList ul li a:hover .productsListBox .productsListBoxImg img {
 opacity:1;
 transform:scale(1.2, 1.2)
}
.productsList ul li a:hover .productsListBox .productsListBoxOv {
 transform:translateY(0)
}



/* .footer
------------------------------------------------------------*/

.footer {
 width:100%;
 text-align:center
}


/*footerTop*/
.footer .footerTop {
  padding:6% 0;
  margin-bottom:5%;
  background:#003466 url(../img/top/flecha.jpg) no-repeat center 65%;
  background-size:22%;
	}

.footer .footerTop span a {
	color:white;
  font-size: 120%;
  font-weight: bold;
	text-align:center;
	text-decoration:none;
	}
	
@media screen and (max-width:800px){
.footer .footerTop {
  padding:9% 0;
  background:#003466 url(../img/top/flecha.jpg) no-repeat center 70%;
  background-size:55%;
	}

.footer .footerTop span {font-size:100%;}
}
	
/*footerNav*/
.footer .footerNav {
 margin-bottom:40px
}
@media screen and (min-width: 769px) {
 .footer .footerNav {
  margin-bottom:80px
 }
}
.footer .footerNav ul {
 display:block
}
@media screen and (min-width: 769px) {
 .footer .footerNav ul {
  display:flex;
  justify-content:center
 }
}
.footer .footerNav ul li {
 padding:10px 0;
 border-bottom:1px solid #eee
}

.footer .footerNav ul li a span {
  display:block;
  margin-left:0;
  color:#073662;
 }
@media screen and (min-width: 769px) {
 .footer .footerNav ul li {
  padding:0 50px;
  display:block;
  border:none
 }
}
.footer .footerNav ul li a {
 color:#000;
 font-weight:bold;
 text-decoration:none
}
.footer .footerNav ul li a:hover {
 opacity:.7
}

.footer .footerLogo h2 {
 margin:0 auto;
  font-size: 220%;
  font-weight: bold;
}
.footer .footerLogo h2 a:hover {
 opacity:.7
}
.footer .footerLogo .footerTel {
 margin:20px auto 40px;
 font-size:1.6rem;
 font-family:"Roboto",sans-serif
}
.footer .footerLogo p {
 font-size:1rem;
 font-family:"Roboto",sans-serif;
 line-height:1.5;
 margin:30px 0
}
@media screen and (min-width: 769px) {
 .footer .footerLogo p {
  font-size:1.2rem
 }
}
.footer .footerLogo p img {
 width:100px
}
@media screen and (min-width: 769px) {
 .footer .footerLogo p img {
  width:150px
 }
}
.footer .footerLogo p.btnSp {
 margin:10px 0 25px;
 font-size:1.4rem
}
.footer .copy {
 text-align:center;
 margin-bottom:30px;
 font-size:1rem;
 color:#404040
}
@media screen and (min-width: 769px) {
 .footer .copy {
  font-size:1.2rem
 }
}