/* -- ▶▶▶ SMACSS Rule

▶▶▶ CDN
  ▷ pure.css
▶▶▶ Base Setting
  ▷ Element
▶▶▶ Layout Setting
　▷ Division
　▷ Text
　▷ Table (sp-scroll)
　▷ Image
　▷ Button item
　▷ Photo Panel
▶▶▶ Module Setting
　▷ Global Menu
　▷ footer
▶▶▶ State Setting
　▷ Toggle
▶▶▶ Themes Setting 
　▷ Element
　▷ Font 
　▷ Acms Entry 
 ▷ Acms Pager
　▷ Layout Division
　▷ Layout Text
　▷ Layout Table (sp-scroll)
　▷ Layout images
　▷ Button item
　▷ Photo Panel
  ▷ Module Global Menu
　▷ Module Footer
　▷ Module Form



/* -- ▶▶▶ Unit Rule
▷ width - em,px (state)
▷ height - em,px (state)
▷ margin - em,px (state)
▷ padding - em,px (state)
▷ font - em	
▷ line-height - em
 */


/* -- ▶▶▶ Base Setting ----------------------------- */
/* -- ▷ Element ------------- */
a {text-decoration: none;}
ul,ol {}
ul li {list-style: none;}
ol li {list-style: decimal;list-style-position: inside;}
table {width: 100%;margin-top:1em;}
tr,th,td {padding:0.4em;text-align: left;}

/* -- ▶▶▶ Layout Setting  ----------------------------- */
/* -- ▷ Division ----*/
.sp {display: block;}
.pc {display: none;}
.l-box-base {max-width: 61.25em; margin: 0 auto;padding: 1em 0.7em;}
.l-box-rich-padding {max-width: 640px;margin: 0 auto;}
.l-box {padding: 0.5em 1em;}
.l-box-s {padding: 0.5em;}
.l-box-center {margin: 0 auto;}
.l-box-bm {padding-bottom: 2em;}
.l-box-hr {border-bottom: dotted 1px #ccc;}
.l-box-category-header {background: #eee;}
.l-box-mono-reversal {background: #000;color: #fff;}

/* -- ▷ Text ----*/
.is-center {text-align: center;}
.is-right {text-align: right;}
.is-large {font-size: large;}
.is-small {font-size: .9em;}
.is-mono-reversal {color: #fff;}
.is-block {display: block;}
.is-block-inline {display: inline-block;}
.is-block-u-lg  {display: block;}
.is-block-inline-u-lg  {display: inline-block;}

/* -- ▷ Table (sp-scroll) ----*/
.is-sp-scroll {overflow: auto;white-space: nowrap;}
.is-sp-scroll::-webkit-scrollbar {height: 5px;}
.is-sp-scroll::-webkit-scrollbar-track {background: #F1F1F1;}
.is-sp-scroll::-webkit-scrollbar-thumb {background: #BCBCBC;}

/* -- ▷ Image ----*/
.is-img-circle-trim {border-radius: 50%;}
.is-img-trim-edge {border: solid 1px #ccc;}
.pure-img-responsive {display: block;max-width: 100%;height: auto;}

/* -- ▷ Button item ------------- */
.is-button {display: block;margin-bottom: 0.5em; padding:1em;text-align: center;border-radius: 4px;}
.is-button-smart {padding:0.3em}
.is-button-round {border-radius: 50px;}
.is-button-color-solid {color: #fff; font-weight: 400;background-color: #1d2087;}
.is-button-color-solid-mono-reversal {color: #000; font-weight: 400;background-color: #fff;}
.is-button-line-box {color: #1d2087; font-weight: 400;border: solid 1px #1d2087;}
.is-button-line-box-mono-reversal {color: #fff; font-weight: 400;border: solid 1px #fff;}

/* -- ▷ Photo Panel ------------- */
.l-photo-panel-bg {background: rgb(49, 49, 49);}
.l-photo-panel, .l-photo-panel-text {overflow: hidden;position: relative;height: 250px;text-align: center;}
.l-photo-panel-thin {height: 120px;}
.l-photo-panel img {width: 100%; max-width: 100%;height: auto;min-height: 250px;}
.l-photo-panel aside {position: absolute;bottom: 0;right: 0;padding: 1em 0.5em;color: #FFF;width: 100%;text-align: right;
background: -moz-linear-gradient(top,  rgba(16,27,30,0) 0%, rgba(12,2,2,1) 90%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(16,27,30,0)), color-stop(90%,rgba(12,2,2,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00101b1e', endColorstr='#0c0202',GradientType=0 ); /* IE6-9 */}
.l-photo-panel aside span {color: #aaa;}
.l-photo-panel aside span a {color: #ccc;text-decoration: none;}
.l-photo-panel-text {background: rgb(49, 49, 49); /* bluish grey */color: #A48D27; /* steel blue */}

/* -- ▶▶▶ Module Setting ----------------------------- */
/* -- ▷Global Menu ----*/
.custom-wrapper {height: 3em;padding: 0.3em 0;overflow: hidden;z-index: 99;}
.custom-wrapper.open {height: 100%;-webkit-font-smoothing: antialiased;-webkit-transition: height 0.5s;-moz-transition: height 0.5s;-ms-transition: height 0.5s;transition: height 0.5s;}
.custom-menu-righter {text-align: left;}

/* -- ▷Topic Path ------------- */
.l-topic-path {margin: 0;}
.l-topic-path-item {display: inline-block;list-style: none;}

/* -- ▷footer ----*/
.l-footer {margin: 0;padding: 0;background: #1d2087; color: #FFF;}
.page-head-button {position: fixed; bottom: 1em; right: 0.5em;}
.footer-menu {margin-bottom: 1.2em;}
.footer-menu li {margin-right: 1.5em;padding: 0 0 15px 8px;border-left: 1px solid #FFF;}
#back_top {width: 70px;height: 70px;text-align: center;position: fixed;right: 0;bottom: 10%;font-size: 30px;opacity: 0.6;}
#back_top a {display: block;padding: 20px;color: #FFF;cursor: pointer;text-decoration: none;background: #636363;}
#back_top a:hover {color: #FFF !important;}

/* -- ▶▶▶ State Setting ----------------------------- */
/* -- ▷ Toggle ----*/
.custom-toggle {width: 58px;height: 58px;display: block;position: absolute;top: 0;right: 0; display: block;border-bottom: solid 1px #1d2087;border-left: solid 1px #1d2087;box-sizing: border-box; }
.custom-toggle .bar {background-color: #1d2087;display: block;width: 32px;height: 3px;border-radius: 100px;position: absolute;top: 30px;right: 10px;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;}
.custom-toggle .bar:first-child {-webkit-transform: translateY(-6px);-moz-transform: translateY(-6px);-ms-transform: translateY(-6px);transform: translateY(-6px);}
.custom-toggle.x .bar {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.custom-toggle.x .bar:first-child {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}

/* -- ▶▶▶ Themes Setting ----------------------------- */

/* -- ▷ Element  ------------- */
body {color: #000;}
::selection {background:#b7e3fc;}
a {color: #000;}
h1,h2 {color: #333;}
h3,h4,h5 {color: #666;}

/* -- ▷ Font ------------- */


@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100;
  src: url(../../fonts/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 300;
  src: url(../../fonts/NotoSansJP-Light.otf) format('opentype');
}

@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 400;
   src: url(../../fonts/NotoSansJP-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 500;
   src: url(../../fonts/NotoSansJP-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 700;
   src: url(../../fonts/NotoSansJP-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 900;
   src: url(../../fonts/NotoSansJP-Black.otf) format('opentype');
 }


* {font-weight: 300; font-family: 'Noto Sans JP',sans-serif; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

.noto100 {font-weight:100;}
.noto200 {font-weight:200;}
.noto300 {font-weight:300;}
.noto400 {font-weight:400;}
.noto500 {font-weight:500;}
.noto600 {font-weight:600;}
.noto700 {font-weight:700;}
.noto800 {font-weight:800;}
.noto900 {font-weight:900;}
.selector-san-serif {font-family:"游ゴシック","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","ＭＳ ゴシック",sans-serif;}
.selector-serif {font-family:"游明朝","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","ＭＳ 明朝",serif;}
body {font-size: 1em;line-height: 1.8em;font-feature-settings : "palt" 1;}
h1,h2,h3,h4,h5 {line-height: 1.4em;}
h1,h2 {font-size: 2.1em;font-weight:300;}
h3 {font-size: 1.8em;font-weight:300;}
h4 {font-size: 1.1em;font-weight:400;}
h5 {font-size: 1em;font-weight:400;}

/* -- ▷ Acms Entry ------------- */
.acms-entry {font-size: 1.1em;letter-spacing: 0.05em;}
.acms-entry p {text-align: justify;}
.acms-entry img {display: block;max-width: 100%;height: auto;}
.acms-entry ul li {list-style: circle;list-style-position: inside;}
.acms-entry table {border-top:solid 1px #ccc;border-right:solid 1px #ccc;}
.acms-entry th,.acms-entry td {display: block;border-bottom:solid 1px #ccc;border-left:solid 1px #ccc;}
.acms-entry th {background: #eee;}
tr.odd {}
tr.even { background: rgba(240, 240, 240, 0.8);}
.column-image-left,.column-media-left,.column-image-center,.column-media-center,.column-image-right,.column-media-right {margin: 0 0 0.5em}
.column-video-left, .column-youtube-left {display: inline;float: left}
.column-video-right, .column-youtube-right {display: inline;float: right}
.column-video-center, .column-youtube-center {float: none;margin-left: auto;margin-right: auto}
.column-eximage-left {display: inline;float: left}
.column-eximage-right {display: inline;float: right}
.column-eximage-center {float: none;margin-left: auto;margin-right: auto;text-align: center}
.column-iframe, .column-youtube {position: relative;width: 100%;height: 100%;padding-top: 30px;padding-bottom: 56.25%;overflow: hidden}
.column-iframe embed, .column-iframe iframe, .column-iframe object,.column-youtube embed, .column-youtube iframe, .column-youtube object {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.clearHidden {display: block;clear: both;visibility: hidden;height: 0;margin: 0;border: none;}
.column-map-auto {margin-bottom: 10px;overflow: hidden;}
.column-map-left {float: left;margin-right: 10px;margin-bottom: 10px;overflow: hidden;}
.column-map-right {float: right;margin-left: 10px;margin-bottom: 10px;overflow: hidden;}
.column-map-center {display:block;margin-right: auto;margin-left: auto;margin-bottom: 10px;overflow: hidden;}

/* -- ▷ Acms Pager ------------- */
.is-pager-item {display: inline-block;width: auto; height: auto;margin: 1em 0.2em; list-style: none;}
.is-pager-item-outer {display: inline-block; width: 2em; line-height: 2em; border: solid 1px #666;}
.is-pager-item-button {display: block; margin: 0;padding: 0; color: #FFF;font-weight: 500; background: #666;}

/* -- ▷ Layout Division ------------- */
.l-box-hero-image {background: url(
../../images/home/home_bg.jpg) no-repeat center center; background-size:cover;}


/* -- ▷ Layout Text ------------- */
.is-home-title-chatch {padding: 3.6em 0; font-size:1.8em; color: #FFF;filter: drop-shadow(2px 2px 2px #333);}
.is-home-boxlink-title {padding: 4em 0;font-size:1.6em;color: #FFF;filter: drop-shadow(2px 3px 3px #333);}
.is-section-title {margin: 2em auto;}
.is-category-title {padding: 2em 0; font-size:1.8em; color: #FFF; filter: drop-shadow(2px 2px 2px #333);}
.is-entry-title {margin-bottom: 1em; padding: 0.3em 0.5em; border-top: solid 2px #1d2087;border-bottom: solid 2px #1d2087;font-size: 1.3em;}

.acms-entry h2 {margin: 3em auto 0;font-size: 1.6em;text-align: center;font-weight: 500;}
.acms-entry h3 {margin: 2em 0 1em; padding: 0.5em 1em; font-size: 1em; font-weight: 500; color: #FFF; background: #1d2087;}
.acms-entry h4 {}
.acms-entry h5 {}
.acms-entry p {}
.acms-entry ul,.acms-entry ol,.acms-entry dl {margin: 0.5em 0 1em;padding:0.5em 0 0;}
.acms-entry ul li,.acms-entry ol li {padding-left: 1em;}
.acms-entry dt {margin-top: 1em;padding-left: 1em; color: #1d2087; font-weight: 500;}
.acms-entry dd {margin: 0; padding: 0.3em; text-align: right; border-bottom: dotted 1px #ccc;}
.acms-entry table {}
.acms-entry table tr {}
.acms-entry table th,.acms-entry table td {font-size: 0.9em;}
.acms-entry table th {font-weight: 400; background: rgba(201,202,237,0.40);}
.acms-entry table td {text-align: right;}

.is-product-spec {}
.is-product-spec h4 {margin: 0.5em 0 0 1em;font-size: 0.9em;}
.is-product-spec dl {}
.is-product-spec dt {margin-top: 0.5em}
.is-product-spec dd {margin-top: -2em;}
.is-product-spec-remarks {margin: 0.5em 0 0 1em;font-size: 0.8em;line-height: 1.4em;padding: 0.3em; border-bottom: dotted 1px #ccc;}

/* -- ▷ Layout Table (sp-scroll) ----*/
.is-sp-scroll table {border-top:solid 1px #ccc;border-right:solid 1px #ccc;}
.is-sp-scroll th,.is-sp-scroll td {border-bottom:solid 1px #ccc;border-left:solid 1px #ccc;}
.is-sp-scroll th {background: #eee;}

/* -- ▷ Layout images ------------- */
.l-logo-image {width:80px; height: 30px;}
.l-box-category-header {background-size:cover;}
.l-box-bg-news {background: url(../../images/header/hbg_news.jpg) center center;}
.l-box-bg-product {background: url(../../images/header/hbg_product.jpg) center center;}
.l-box-bg-company {background: url(../../images/header/hbg_company.jpg) center center;}
.l-box-bg-enquiry {background: url(../../images/header/hbg_enquiry.jpg) center center;}

/* -- ▷ Module Global Menu ------------- */
.global-menu {background-color: #FFF;}
.pure-menu-link,.pure-menu-link-global {padding: 0.5em 1.2em; color: #1d2087;}
.pure-menu-active>.pure-menu-link, .pure-menu-link:hover {color: #FFF;background: #1d2087;}

/* -- ▷ Module Modal ------------- */


.modal-content {
    position:fixed;
    display:none;
    z-index:2;
    width:90%;
    height: 90%;
    margin:0;
    padding:2em;
    background:#fff;
    overflow-x: hidden;
    overflow-y: auto;
    border: solid 10px rgba(204,204,204,0.52);
    box-sizing: border-box;
}

.modal-content p {
    margin:0;
    padding:0;
}

.modal-overlay {
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
}

.modal-open {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 1.5em 0 1em;
	font-size: 21px;
	font-weight: 300;
	color: #000;
	border: solid 2px #000;
}
.modal-open i {
	display: block;
	margin-bottom: 0.1em;
	font-weight: 100;
}

.modal-open:hover {
    cursor:pointer;
}

.modal-close {
	display: block;
	width: 100%;
	margin-top: 2em;
	border: solid 1px #ddd;
	border-radius: 4px;
	color: #555;
	text-align: center;
}

.modal-close:hover {
    cursor:pointer;
    color:#f00;
}


/* swiper */

.swiper-container {
    width: 600px;
    height: 300px!important;
}


/* Hide scroll bar */

html.remodal-is-locked {overflow: hidden;touch-action: none;}
/* Anti FOUC */
.remodal,[data-remodal-id] {display: none;}
/* Necessary styles of the overlay */
.remodal-overlay {position: fixed;z-index: 9999;top: -5000px;right: -5000px;bottom: -5000px;left: -5000px;display: none;}
/* Necessary styles of the wrapper */
.remodal-wrapper {position: fixed;z-index: 10000;top: 0;right: 0;bottom: 0;left: 0;display: none;overflow: auto;text-align: center;-webkit-overflow-scrolling: touch;}
.remodal-wrapper:after {display: inline-block;height: 100%;margin-left: -0.05em;content: "";}
/* Fix iPad, iPhone glitches */
.remodal-overlay,.remodal-wrapper {backface-visibility: hidden;}
/* Necessary styles of the modal dialog */
.remodal {position: relative;outline: none;text-size-adjust: 100%;}
.remodal-is-initialized {/* Disable Anti-FOUC */display: inline-block;}

.is-modal-control {position: fixed; top:1em;right: 1em;text-shadow: 0px 0px 2px #FFF; z-index: 9999;}
.is-modal-image {width: 100%;max-width: 90px;margin: 2em auto 0.5em; opacity: 0.8;}


/* -- ▷ Headline Card ------------- */	

.l-box-card-outer {position: relative;display: block; width: 100%;height: 300px; background: rgba(201,202,237,0.40); box-sizing: border-box; border: solid 4px #1d2087;box-sizing: border-box;}
.l-box-card-image {width: 100%; height: 200px; overflow: hidden; }
.is-card-title {margin:0.5em 0 0;font-size: 1.4em; color: #333;}
.is-card-date {color: #666;}


/* -- ▷ Headline items ------------- */	
.l-headline-box {margin: 0 1em 0;}
.l-headline-item {display: block; margin:0;padding: 0.5em; border-bottom: 1px dotted rgba(170, 170, 170, 0.35);}
.l-headline-date {display: block; padding-right: 1em;}

/* -- ▷ Module Topic Path ------------- */
.l-topic-path-item {font-size: 0.75em;color: #999;}
.l-topic-path-item:after {display: inline-block;padding: 0 0.25em; content: "/";}

/* -- ▷ Module Footer ------------- */
.l-footer {clear: both;}
.footer-menu .pure-menu-item {height: auto; border: none; font-size: .9em; text-align: center;}
.footer-menu .pure-menu-link {color: rgba(51, 51, 51, 0.8) !important;}
.footer-menu .pure-menu-link:hover {text-decoration: none;}

/* -- ▷ Module Form ------------- */
.pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form select, .pure-form textarea {display: block; width:100%!important;margin-top:0.4em;padding: 0.7em 1em;border-radius: 0.15em;box-shadow: 0 0 0 #fff;font-size: 1.2em;}
select {color: #000!important;}
textarea.pure-input-1-2,select.pure-input-1-2 {width:100%!important;}
textarea.pure-input-1-2{height: 8em;}
.pure-button {width: 100%; margin-top: 1em;padding: 1em;font-weight: 400;}
.pure-button-primary{background: #666;}
.l-single-column {max-width: 48em;margin: 2em auto 1em;line-height: 1em;}
.is-validator-highlight {border-color: #FE0037!important}
.is-validator-massage {display: block;color: #FE0037;font-size: 0.8em;}
.pure-form label {display: block;}
.is-form-label {padding-top: 1em; font-size: 1.2em; color: #666; font-weight: 600;}
.is-label-en {padding-left: 1em;font-size: small;color: #ccc;}
.l-confirm {font-size: 1.1em;}
.is-confirm-item {padding: 0.5em; border-bottom: dotted 1px #ccc;line-height: 1.6em;}
.is-confirm-item-label {display: block;5em; padding-right: 1em; color: #666;font-size:0.8em;}

@media (min-width: 35.5em){}

@media (max-width:47.9em) and (orientation : landscape){}

@media (min-width: 48em) {

/* -- ▶▶▶ Base Setting ----------------------------- */
/* -- ▷ Element ------------- */

/* -- ▶▶▶ Layout Setting ----------------------------- */
/* -- ▷ Division ----*/
/* -- ▷ Text ----*/
/* -- ▷ Image ----*/
/* -- ▷ Photo Panel ---- */
.l-photo-panel, .l-photo-panel-text {text-align: left;}
.l-photo-panel-thin {height: 250px;}

/* -- ▶▶▶ Module Setting ----------------------------- */

/* -- ▶▶▶ State Settin  ----------------------------- */
/* -- ▷ Toggle ----*/
.custom-menu-righter {text-align: right;}
.custom-toggle {display: none;}

/* -- ▶▶▶ Themes Setting ----------------------------- */
/* -- ▷ Element  ------------- */
/* -- ▷ Font ------------- */
/* -- ▷ Acms Entry ------------- */
.acms-entry th,.acms-entry td {display: table-cell!important;}
.acms-entry th {width: 33.3%;}
.column-image-left,.column-media-left {margin: 0 0.5em 0.5em 0;float:left;}
.column-image-center,.column-media-center {margin: 0 auto 0.5em 0;float: none;text-align: center;}
.column-image-right,.column-media-right {margin: 0 0 0.5em 0.5em;float:right;}

/* -- ▷ Layout Division ------------- */
/* -- ▷ Layout Text ----*/
.is-block-u-lg ,.is-blockis-block-inline-u-lg  {display: inline;}
.is-home-title-chatch {padding: 5em 0; font-size:2.6em;}
.is-home-boxlink-title {padding: 4em 0;font-size:2em;}
.is-entry-title {font-size:1.8em;}
.acms-entry table th {max-width: 30%;}
.acms-entry table td {text-align: left;}

/* -- ▷ Layout images ------------- */
.l-logo-image {width:240px; height: 90px;}

/* -- ▷ Module Global Menu ------------- */
.custom-wrapper {height:100%;}
.pure-menu-link,.pure-menu-link-global {padding: 2.2em 1.6em;}
.pure-menu-active>.pure-menu-link, .pure-menu-link:hover {border-radius: 10px;}

/* -- ▷ Module Footer ------------- */
/* -- ▷ Module Form ------------- */
.pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form select, .pure-form textarea{width:75%;font-size: 1em;}
textarea.pure-input-1-2,select.pure-input-1-2 {width:75%!important;}
}