﻿html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1.8}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {display:block}
ul, ol {list-style:none}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}
ins {background-color:#ff9;color:#000;text-decoration:none}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted #000;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:2px solid #cccccc;margin:4em 0;padding:0}
input, select {vertical-align:middle}

/* responsive view */
.spView{display:none;}

/* other */
.clearfix:after{content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden}
.clearfix{display: inline-block;} 
* html .clearfix{height: 1%;}
.clearfix{display:block;}

/*========================================
BASIC
=======================================*/
html{-webkit-text-size-adjust:100%}
body{color:#191919; font-size:16px;font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;background:#f7f7f7;line-height:1.6;}
img {line-height: 1;}
p {margin-bottom: 15px;}
.Hv {transition: .4s;}
.Hv:hover {transition: .4s; opacity: 0.8 }
figure img {margin-bottom: 2%;}


/*========================================
TEXT & TEXTAREA
=======================================*/
input, textarea {font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], textarea {width:100%;border:1px solid #CCC;background:#FFF;margin:0 0 2%;padding:2%;border-radius:4px;box-sizing: border-box;}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus{border: 2px solid #F85E8E;outline: none;}
/*========================================
RADIO
=======================================*/
.radio-input{display: none;}
.radio-input + label{padding-left: 20px; position:relative; margin-right: 20px;}
.radio-input + label::before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border: 1px solid #999; border-radius: 50%;}
.radio-input:checked + label{color: #009a9a;}
.radio-input:checked + label::after{ content: ""; display: block; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; background: #009a9a; border-radius: 50%;}
/*========================================
CHECKBOX
=======================================*/
.checkbox-input{display: none;}
.checkbox-parts{padding-left: 20px; position:relative; margin-right: 20px;}
.checkbox-parts::before{content: ""; display: block; position: absolute; top: 2px; left: 0; width: 15px; height: 15px; border: 1px solid #999; border-radius: 4px;}
.checkbox-input:checked + .checkbox-parts{color: #009a9a;}
.checkbox-input:checked + .checkbox-parts::after{content: ""; display: block; position: absolute; top: -3px; left: 5px; width: 7px; height: 14px; transform: rotate(40deg); border-bottom: 3px solid #009a9a; border-right: 3px solid #009a9a;}
.select-wrap {position: relative;}
.select-wrap:before {z-index: 1; position: absolute; right: 15px; top: 0; content: "\f123";font-family: "IonIcons"; line-height: 43px; color: #7F878C;pointer-events: none;}

/*========================================
SELECT
=======================================*/
select{ outline:none; text-indent: 0.01px; text-overflow: ''; vertical-align: middle; font-size: inherit; appearance: button; appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 40px; padding:1% 2%; border:1px solid #CCC; color:#828c9a; width:100%; border-radius:5px; background: url(../img/arrow_down.png) 98% 50% no-repeat;}
select option{background-color: #fff; color: #333;}
select::-ms-expand {display: none;}
select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #828c9a;}


/*========================================
 COMMON STYLE
=======================================*/
a{color:#31b4be;text-decoration:none;}
a:hover{color:#31b4be}
.PCNone {display:none;}
.TABNone {display:inline;}
.SPNone {display:inline;}

/* フォントカラー */
.red, .fc-red {color:#FF0000;}
.fc-blue {color:#2EA6E0;}
.fc-pink {color:#f2959d;}
.fc-sky {color:#2e9cc1;}
.fc-gray {color:#9F9F9F;}

/* フォント位置 */
.txt-l {text-align: left;}
.txt-r {text-align: right;}
.txt-c {text-align: center !important;}
.midNote {margin-bottom: 30px;}

/* フォントサイズ */
.fs-80 {font-size:80%;}
.fs-90 {font-size:90%;}
.fs-120 {font-size:120%;}
.fs-140 {font-size:140%;}
.fs-160 {font-size:160%;}
.fs-180 {font-size:180%;}
.fs-200 {font-size:200%;}
.quoteNote {text-align: right;font-size: 8px;padding-right: 5px;}

/* 角丸 */
.radius3{-webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px;border-radius: 3px;}
.radius5{-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px;border-radius: 5px;}

/* フォントデコレーション */
.u-l { text-decoration:underline;}
.bold, .Bold {font-weight: bold;}
.vFrame { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 15px;}
.vFrame iframe {position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}

table { background-color: #fff; border: 1px solid #ddd; border-collapse: separate;border-spacing: 0;width: 100%; margin-bottom: 15px;}
table tr th {background: #f5f5f5;border: 1px solid #ddd; padding: 10px; vertical-align: middle; text-align: left;}
table tr td {border: 1px solid #ddd; padding: 10px; vertical-align: middle;}
table img {vertical-align: middle;}



/* YouTube */
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0; width: 100%;height: 100%;}

/* section */
section{}

/*========================================
CONTENTS
=======================================*/
#wrapper{width: 100%;margin: 0 auto;background-color: #fff;}
#Contents {max-width:100%; margin:0 auto 0;box-sizing: border-box;padding: 0 0;}


/* access Map */
.ggmap {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.ggmap iframe,.ggmap object,.ggmap embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


/*========================================
HEADER
=======================================*/
header{width:100%;position: relative; z-index: 6;}
#top {position:relative; top:0;}
header nav {width: 100%;box-sizing: border-box; padding:10px 0;font-size: 14px; overflow:hidden;z-index:1000;background:#191919;box-shadow: 0 2px 5px 0 rgba(0,0,0,.15), 0 3px 3px -2px rgba(0,0,0,.15); }
header nav .cnt {max-width: 1190px;margin:0 auto; position: relative;box-sizing: border-box;padding: 0 5px;}
header nav .cnt .logo {float:left;display:inline-block;width: 66px;padding-top: 3px;}
header nav .cnt .logo img { width:100%; height:auto;}
header nav .cnt ul{float:right;display:inline-block; max-width:780px; margin-top:28px;}
header nav .cnt ul li {float:left;position: relative;color:#fff; text-align:left; margin-right:20px; letter-spacing:1px;}
header nav .cnt ul li:last-child {margin-right: 0;}
header nav a {color: #fff; font-weight: bold;text-decoration:none;transition: .4s;}


@media screen and (max-width: 800px) { 
header {width:100%;}
header .inline {width: 100%; background: #2ab5d3; background:#191919;padding:5px 2%;position:fixed; z-index:100; top:0; height:50px;box-sizing: border-box; box-shadow: 0 2px 5px 0 rgba(0,0,0,.15), 0 3px 3px -2px rgba(0,0,0,.15);}
header .inline .Logo {float:left;width: 40px;padding-top: 0;}
header .inline .Logo img {width:100%; height:auto;}
header .inline .menu { float:right; width:20%;}
header ul {overflow: hidden;}
aside{}
aside ul {overflow: hidden;margin-bottom: 2%;}
nav a {margin: 0 5% 3% 5%;width: 90%;text-align: left;box-sizing: border-box;padding: 20px 0; font-size: 19px; color: #292929; line-height: 1.2;height: 35px; font-weight: bold;display: block;}
nav a li {position: relative;padding-bottom: 10px; border-bottom: 1px solid #E3E3E3;}
.curtain{display: none !important; position: fixed; top: 50px; width: 100%; background: rgba(0, 0, 0, 0.8);z-index: 3;min-height: 110%;}

a.menuBtn{font-size: 14px; position: absolute; right: 8px; top: 12px; border: 0; color: #fff; cursor: pointer;border-radius: 4px; padding: 3px; text-align: center; width: 64px; height: 26px;box-sizing: border-box;background: -moz-linear-gradient(top, #26aecf 50%, #1e87a2 50%);background: -webkit-linear-gradient(top, #26aecf 50%,#1e87a2 50%);background: linear-gradient(to bottom, #26aecf 50%,#1e87a2 50%);}

.menu{position: fixed; top: 50px; right: -120%; width: 100%;box-sizing: border-box; padding: 5% 2%; overflow-y: scroll;background:#f7f7f7;z-index: 110;-webkit-overflow-scrolling: touch}
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/*========================================
FOOTER
=======================================*/
.topReturn {max-width: 1180px; margin:0 auto 10px; text-align:right;}
.topReturn img { width:60px; height:60px;}
#backToTop{position: fixed; bottom: 0;right: 0;z-index: 1;margin: 0;line-height: 0;cursor: pointer;}
footer{ width:100%;box-sizing: border-box; font-size:12px;color:#fff; overflow: hidden; background: #191919;}
footer .Cnt{box-sizing: border-box;padding: 0 10px; max-width: 700px; margin:20px auto 20px; overflow:hidden;text-align: center;}
footer .note {font-size: 9px; color: rgba(205,205,205,1.00)}
footer .copyright {color:#fff;}
footer .copyright a {color:#fff;}
footer .copyright a:hover {color:#fff; text-decoration:underline;}

@media screen and (max-width: 800px) { 
#backToTop{width: 50px; height: 50px; z-index: 4;}
footer{ width:100%;min-width:100%; max-width:100%;font-size:12px;}
footer .Cnt{ width:98%; margin:2% auto 2%;min-width:98%; max-width:98%;}
footer .copyright {width:98%;min-width:98%; max-width:98%;padding-top: 6px;}
}

#hero {width:100%; background: url("../img/bg-mv.jpg") no-repeat;background-size: cover;}
#hero .Cnt {width: 90%;max-width:511px;margin: 0 auto;padding: 100px 0;}
#hero .Cnt h1.logo {width: 100%;}
section.normal {background: #fff;width: 100%;position: relative;padding: 100px 0;line-height: 1.8;}
section.normal.gray {background: #f7f7f7;}
section.normal .Cnt {width: 96%;max-width: 1180px;margin: 0 auto;text-align: center;}
section.normal .Cnt .title {position: relative;padding: 1.5rem; margin-bottom: 3%; text-align: center;font-size: 30px;font-family: 'Noto Serif JP', serif;}
section.normal .Cnt .title:before {position: absolute; bottom: 15px; left: calc(50% - 20px); width: 40px; height: 2px; content: ''; border-radius: 3px; background: #191919;}
section.normal .Cnt h3 {margin-bottom: 20px;font-size: 20px;font-family: 'Noto Serif JP', serif;}
section.normal .Cnt .lov {font-weight: 700; color: #009FAA}
section.normal .newsList {display: table;width: 100%; max-width: 750px;border-bottom: 1px solid rgba(240,240,240,1.00);margin: 0 auto;}
section.normal .newsList dt {width: 20%;display: table-cell;vertical-align: top;box-sizing: border-box;padding: 1%;text-align: left;}
section.normal .newsList dd {width: 80%;display: table-cell;vertical-align: top;box-sizing: border-box;padding: 1%;text-align: left;}
section.normal .newsList dd figure {}
section.normal .newsList dd figure img {width: 100%;height: auto;}
section.normal .newsList dd h3 {font-size: 140%;line-height: 1.4;}
section.normal .newsList dd h4 {font-size: 120%;border-bottom: 2px solid;margin-bottom: 5px;}
section.normal .newsList dd .subTit {font-weight: bold;margin-bottom: 5px;}
section.normal .newsList dd a {text-decoration: underline;}
@media screen and (max-width: 800px) {
section.normal {background: #fff;width: 100%;position: relative;padding: 80px 0;line-height: 1.8;}
section.normal .Cnt h2 {font-size: 26px;}
section.normal .newsList {display:block;width: 100%; max-width: 750px;border-bottom: 1px solid rgba(240,240,240,1.00);margin: 0 auto;}
section.normal .newsList dt {width: 100%;display: block;vertical-align: top;box-sizing: border-box;padding: 1%;text-align: left;background: #292929;color: #fff;font-weight: bold;}
section.normal .newsList dd {width: 100%;display: block;vertical-align: top;box-sizing: border-box;padding: 1%;text-align: left;}
}

.ceo {overflow: hidden;}
.ceo figure{ float: left; width: 40%;}
.ceo .txt {float: right;width: 60%;box-sizing: border-box; padding: 5%;text-align: left;}
.ceo .txt h2.name {text-align: left;padding: 0 0 20px;}
.ceo .txt h2.name:before {content: none;}
.ceo .txt h2.name span {font-size: 14px; color: #898989}
@media screen and (max-width: 800px) {
.ceo {width: 96%;margin: 0 auto;}
.ceo figure{ float: none; width: 100%;}
.ceo .txt {float: none;width: 100%;box-sizing: border-box; padding: 5% 0;text-align: left;}
.ceo .txt h2.name {text-align: left;padding: 0 0 20px;}
.ceo .txt h2.name:before {content: none;}
.ceo .txt h2.name span {font-size: 14px; color: #898989}
}

.history {overflow: hidden;}
.history figure{ float: right; width: 40%;}
.history .txt {float: left;width: 60%;box-sizing: border-box; padding:0 2% 2%;text-align: left;}
.history .txt dl {border-bottom: 1px solid #E3E3E3S;font-size: 80%;overflow: hidden;margin-bottom: 2%}
.history .txt dl dt {font-weight: bold;width: 100%;}
.history .txt dl dd {width:100%;}
.history .txt dl dd .note {margin-left: 5%;}
.history .txt  .wrap { width: 100%; overflow-x: hidden; overflow-y: hidden; margin-bottom:0;box-sizing: content-box;border: 1px solid #E4E4E4;padding: 2%;}
.history .txt  .wrap .scrollAreaMain {overflow-y: scroll;height: 500px;}
@media screen and (max-width: 800px) {
.history {width: 96%;margin: 0 auto;}
.history figure{ float: none; width: 100%;}
.history .txt {float: none;width: 100%;box-sizing: border-box; padding: 5% 0;text-align: left;}
.history .txt h2.name {text-align: left;padding: 0 0 20px;}
.history .txt h2.name:before {content: none;}
.history .txt h2.name span {font-size: 14px; color: #898989}
.history .txt  .wrap { width: 95%; overflow-x: hidden; overflow-y: hidden; margin:0 auto;box-sizing: content-box;border: 1px solid #E4E4E4;padding: 2%;}
.history .txt  .wrap .scrollAreaMain {overflow-y: scroll;height: 400px;}
}

.company {}
.company dl {display: table;width: 96%; max-width: 600px;border-top: 1px solid rgba(240,240,240,1.00);margin: 0 auto;}
.company dl:last-child {border-bottom: 1px solid rgba(240,240,240,1.00);}
.company dl dt {width: 30%;display: table-cell;vertical-align: top;box-sizing: border-box;padding: 1%;text-align: left;}
.company dl dd {width: 70%;display: table-cell;vertical-align: top;box-sizing: border-box;padding: 1%;text-align: left;}
.company dl dd .eng {display: block;font-size: 80%; color:#A5A5A5}

@media only screen and (min-width:801px) and (max-width:989px) {/* Tablet Display - width:801px under - */
body {-webkit-touch-callout:none;-webkit-user-select:none;}
#wrapper{width: 100%;margin: 0 auto;background-color: #fff;}
#Contents {min-width:98%; max-width: 98%; width: 98%; margin:15px auto 0;}
}



@media screen and (max-width: 800px) { /* SmartPhone Display - width:727px under - */
body {-webkit-touch-callout:none;-webkit-user-select:none;position: relative; top: 0 !important;}
#wrapper{width: 100%;margin: 0 auto;}
img{width:100%;height:auto;}
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], textarea {width:100%;margin:0 0 3%;padding:2%;font-size: 16px; line-height: 1.6;}
section{width: 100%; margin: 0 auto;}


.Normal {border-radius: 0;}
.Normal .Cnt{ width: 98%; padding: 2% 1%;}
.Normal .Cnt h1 {font-size: 22px;}
.Normal .Cnt h1.expTitle {font-size: 20px;}

table tr th {font-size: 12px; padding: 1% 2%; width: 40%}
table tr td {font-size: 12px; padding: 1% 2%; width: 60%}

.vComment {margin: 0 auto 30px; width: 96%;font-size: 12px !important; text-align: justify;}

/* responsd View*/
.pcView{display:none;}
.spView{display:block;}
.TABNone{display:inline;}
.topicTitle {font-weight: bold;}

/* iOSでのデフォルトスタイルリセット */
input[type="submit"],input[type="button"] {border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer;}
input[type="submit"]::-webkit-search-decoration,input[type="button"]::-webkit-search-decoration {display: none;}
input[type="submit"]::focus,input[type="button"]::focus {outline-offset: -2px;}

/*========================================
BASIC SP
=======================================*/
#Main{width:100%;float:none;}
#Contents { width: 100%;min-width:100%; max-width:100%;margin: 50px auto 0;padding: 0}


}

