@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Noto+Serif+JP:wght@400;700;900&display=swap&family=Roboto:wght@100;600&display=swap');

/*paddingとborderがwidthとheightの中に含まれるようになる*/
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }

.pc { display: block; }
.pc-inline { display: inline; }
.sp { display: none; }

a { text-decoration: underline; color: #ff66cc; }
a:hover { text-decoration: none; color: #ff66cc; }
a:visited { color: #ff66cc; }


/* 背景定義 */
div#background-top img:first-child { top: 0; left: 0; }
div#background-top img { position: absolute; top: 0; right: 0; width: 47%; }
div#background-top img:first-child { position: absolute; top: 0; right: 0; width: auto; }
div#background-second img:first-child { top: 0; left: 0; }
div#background-second img { position: absolute; top: 0; right: 0; width: 253px; }
div#background-second img:first-child { position: absolute; top: 0; right: 0; width: auto; }


/* ベース定義 */

body { font-size: 100%; line-height: 220%; color: #212721; background-color: #ffffff; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; margin: 0; padding: 0; overflow-x: hidden; }

.image-center { display: block; margin: 0 auto; }
img { max-width: 100%; height: auto; }

#background-top { z-index: 0; position: relative; }
#background-second { z-index: 0; position: relative; }

#common-wrapper { width: 100%; overflow: hidden; background: url(../img/common-background-logo.jpg)left top no-repeat; margin: 0 0 60px; z-index: 1; position: relative; }
.content { display: block; width: 100%; max-width: 1200px; margin: 120px auto 0; padding: 0 20px; }

div.box { position: relative; margin: 60px 0; overflow: hidden; }
div.box ul { display: flex; justify-content: space-between; overflow: hidden; padding: 0; }
div.box ul.middle { align-items:center; }
div.box ul li { width: 100%; list-style:none; padding-left: 0; }

div.title { font-family: 'Roboto', sans-serif; font-size: 370%; line-height: 100%; margin: 40px 0; letter-spacing: 1px; }
div.title p { position: relative; z-index: 1; margin: 0; padding: 17px 20px 3px 25px; }
div.title span { font-family: 'Noto Sans JP', sans-serif; font-size: 25%; display: block; line-height: 100%; color: #4679bd; font-weight: 600; position: relative; z-index: 1; }
div.title span.head-border { display: flex; align-items: flex-end; }
.head-border:after { content: ""; height: 1px; flex-grow: 1; background-color: #4679bd; }
.head-border:after { margin-left: 1rem; }
div.title img { display: block; position: absolute; z-index: 0; }

.gmap { height: 0; overflow: hidden; padding-bottom: 36.25%; position: relative; margin-top: 150px; }
.gmap iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }

#footer { background-color: #212721; }
#footer div.box { margin: 0 auto; max-width: 1280px; padding: 60px 20px 20px; }
#footer p { color: #fff; margin: 0; display: block; float: left; font-size: 150%; letter-spacing: 1px; }
#footer div.box div { float: right; }
#footer div.box div a { text-decoration: underline; color: #fff; display: inline-block; margin-left: 20px; text-underline-offset: 10px; font-size: 90%; }

#footer div.box ul { clear: both; padding: 70px 0 0; }
#footer div.box ul li { color: #fff; line-height: 180%; font-size: 85%; padding: 0 20px 0 40px; border-left: 1px solid #333; font-weight: 400; }
#footer div.box ul li:first-child { border-left: none; }

#footer div.box div.footer-logo { text-align: center; color: #fff; font-size: 75%; margin-top: 40px; float: none; clear: both; }

header { width: 100%; overflow: hidden; }

#navigation { /*position: absolute; z-index: 10;*/ margin: 0 auto; width: 100%; overflow: hidden; }
#top-logo { float: left; padding: 40px 0 0 100px; }
#top-logo img { max-width: 360px; }
#top-logo-sp { padding: 30px 90px 10px 20px; height: 100px; }
#top-logo-sp img { max-height: 60px; }
#navigation ul { float: right; padding: 30px 40px 0 0; }
#navigation ul li { display: inline-block; letter-spacing: 2px; font-size: 110%; margin-top: 5px; margin-right: 35px; vertical-align: top; }
#navigation ul li a.line { color: #212721; font-weight: 600; text-decoration: none; position: relative; display: inline-block; }
#navigation ul li a.line::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 2px; background-color: #212721; transform: scaleX(0); transition: transform 0.3s; }
#navigation ul li a.line:hover::after { transform: scaleX(1); }
#navigation ul li a.active::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 2px; background-color: #212721; transform: scaleX(1); }

#page_top { position: fixed; right: -50px; bottom: 100px; opacity: 1; z-index: 999; }
#page_top a { position: relative; display: block; transition: 0.5s; }
#page_top a::before { bottom: 0; right: 0; left: 0; margin: auto; text-align: center; opacity: 0.6; }
#page_top a:hover { opacity: 0.6; }

#image-second { margin: 0 75px 0 100px; padding: 0; min-height: 170px; z-index: 1; position: relative; width: calc(100% - 175px); max-width: none; }
#image-second.company { background: url("../img/image-company.jpg")no-repeat; background-size: cover; }
#image-second.product { background: url("../img/image-product.jpg")no-repeat; background-size: cover; }
#image-second.recruit { background: url("../img/image-recruit.jpg")no-repeat; background-size: cover; }
#image-second div.box { margin: 0 auto; min-height: 170px; }
#image-second div.left { position: absolute; bottom: 0; left: 0; color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 600%; font-weight: 600; letter-spacing: 10px; line-height: 88%; }
#image-second div.right { position: absolute; bottom: 14px; right: 0; color: #fff; font-size: 180%; font-weight: 400; letter-spacing: 10px; line-height: 88%; }
section#image-second.recruit div.box div.right { color: #212721; }

.menu {position: fixed; font-size: 60%; font-weight: 700; color: #005bac; z-index: 9999; top: 46px; right: -1px; cursor: pointer; width: 50px; height: 50px;}
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{ /*ボタン内側の基点となるためrelativeを指定。追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
position: relative; width: 50px; height:50px; cursor: pointer; }
/*ボタン内側*/
.openbtn span{ display: inline-block; transition: all .4s; position: absolute; right: 13px; height: 2px; background-color: #005bac; }
.openbtn span:nth-of-type(1) { top:22px; width: 50%; }
.openbtn span:nth-of-type(2) { top:29px; width: 30%; }
/*activeクラスが付与されると線が回転して×に*/
.openbtn.active span:nth-of-type(1) { top: 20px; left: 16px; transform: translateY(6px) rotate(-45deg); width: 35%; }
.openbtn.active span:nth-of-type(2) { top: 32px; left: 16px; transform: translateY(-6px) rotate(45deg); width: 35%; }
/*========= ナビゲーションのためのCSS ===============*/
#g-nav{ position:fixed; z-index: -1; opacity: 0; top:0; left: 0; width: 100%; height: 100vh; background: #f4f4f4; transition: all 0.3s; }
/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{ opacity: 1; z-index:999; }
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; }
/*ナビゲーション*/
#g-nav ul { display: none; position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 500px; padding: 20px; }
#g-nav.panelactive ul { display: block; }
/*リストのレイアウト設定*/
#g-nav li { list-style: none; text-align: center; }
#g-nav li a { color: #333; text-decoration: none; padding: 20px; display: block; letter-spacing: 0.1em; font-size: 160%; }
/*========= ボタンのためのCSS ===============*/
.openbtn{ position: fixed; z-index: 9999; top: 10px; right: 10px; cursor: pointer; width: 50px; height:50px; }

th,td { border: none; padding: 15px; }
table { border-collapse:  collapse; width: 90%; margin: 0 auto; }
tr { background-color: #f6f6f6; }
tr:nth-of-type(odd) { background-color: #fff; }
td { text-align: left; }
td:first-child { font-weight: 600; width: 25%; }


/* トップ定義 */

#main-image-wrapper { background: url(../img/main-copy-background.png); background-size: cover; padding-bottom: 1px; position: relative; z-index: 1; }
#main-image { display: block; width: 100%; max-width: 1800px; margin: 60px auto 0; padding: 0 5%; }
#main-image div.box ul li.copy { padding-right: 50px; padding-left: 50px; max-width: 520px; padding-top: 100px; font-size: 120%; }
#main-image div.box { overflow: visible; }
#main-image div.box ul { overflow: visible; }

.title1 { width: 100%; display: inline-block; padding: 10px 15px 10px 0; color: #005bac; font-weight: 900; letter-spacing: 1px; font-size: 130%; text-align: left; }
img.title1-img { margin: 0 auto; }

#copy div.box { border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; }
#copy div.box ul li:first-child { border-right: 1px solid #d2d2d2; font-size: 150%; line-height: 223%; padding: 55px; width: 915px; font-weight: 600; }
#copy div.box ul li { padding: 60px 30px 30px 70px; line-height: 180%; }
#copy div.box ul li img { display: block; margin-top: 20px; }

#newstopics div.box {  }
#newstopics div.box ul li { padding: 30px 0; border-bottom: 1px solid #bababa; margin-left: 0; }
#newstopics div.box ul li:first-child { max-width: 325px; font-family: 'Roboto', sans-serif; font-weight: 600; overflow: hidden; padding: 30px 0 30px 20px; border-bottom: 1px solid #bababa; margin-left: 70px; }
#newstopics div.box ul li span { text-align: center; color: #fff; background-color: #565656; padding: 0px; border-radius: 20px; font-size: 80%; letter-spacing: 1px; min-width: 180px; display: inline-block; margin-left: 20px; }


/* スライドショー定義*/
#main-image ul.slideshow { width: 100%; list-style-type: none; position: absolute; top: 0; overflow: visible; }
#main-image ul.slideshow > li { opacity: 0; position: absolute; transition: opacity 3s ease-in-out; }
#main-image ul.slideshow > li.showSlide { opacity: 1; }
#main-image ul.slideshow > li > img { width : 100%; height: auto; }
#main-image ul.slideshow ul li.showSlide { padding: 0; }


/*個別設定*/

#about ul li:first-child { width: 60%; }
#about ul li { width: 40%; }

#about table tr td p { font-size: 85%; border-top: 1px solid #cacaca; padding: 10px 0 10px 0; margin: 0; line-height: 150%; }
#about table tr td p:first-child { border-top: none; padding: 0 0 10px 0; }

div.recruit-copy { text-align: center; border: 1px solid #4679bd; color: #4679bd; font-size: 150%; line-height: 180%; font-weight: 400; letter-spacing: 1px; padding: 20px; max-width: 980px; margin: 0 auto 120px; }

div.product-copy { text-align: center; border: 1px solid #4679bd; color: #4679bd; font-size: 150%; line-height: 180%; font-weight: 400; letter-spacing: 1px; padding: 20px; max-width: 980px; margin: 0 auto 120px; }

#product div.product-box { width: 90%; margin: 100px auto 0; }

#product div.product-box ul { clear: both; }

#product div.product-box div.title { position: relative; height: 120px; clear: both; }
#product div.product-box div.title h2 { display: inline-block; color: #fff; text-align: center; font-size: 14px; padding: 20px 40px; float: left; font-family: 'Noto Sans JP', sans-serif; }
#product div.product-box div.title h1 { display: inline-block; text-align: left; font-size: 50%; margin: 5px 0 0; padding: 0 0 0 20px; float: left; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; }
#product div.product-box div.title h1 span { display: block; text-align: left; font-size: 65%; margin: 0; padding: 0; color: #999; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; }
#product div.product-box div.title img { position: absolute; bottom: 25%; right: 0; }

#product div.product-box div.title h2.to { line-height: 200%; }

#product div.product-box ul li b { display: block; font-size: 120%; }
#product div.product-box ul li { font-size: 90%; padding: 0 0 0 20px; }

#product div.product-box div.product-photo { position: relative; clear: both; overflow: hidden; }
#product div.product-box div.product-photo img { width: 100%; display: block; }
#product div.product-box div.product-photo p { display: block; float: left; width: calc(50% - 10px); margin: 0 0 20px; position: relative; }
#product div.product-box div.product-photo p:nth-of-type(even) { float: right; }
#product div.product-box div.product-photo p span { display: block; position: absolute; bottom: 0; width: 100%; font-size: 85%; padding: 10px 20px; text-align: center; background-color: rgba(0,0,0,0.3); color: #fff; line-height: 145%; }


#product div.product-01 div.title { border-bottom: 1px solid #8ec31f; }
#product div.product-01 div.title h2 { background-color: #8ec31f; }
#product div.product-01 ul li b { color: #8ec31f; }
#product div.product-02 div.title { border-bottom: 1px solid #0d6fb8; }
#product div.product-02 div.title h2 { background-color: #0d6fb8; }
#product div.product-02 ul li b { color: #0d6fb8; }
#product div.product-03 div.title { border-bottom: 1px solid #0ba29a; }
#product div.product-03 div.title h2 { background-color: #0ba29a; }
#product div.product-03 ul li b { color: #0ba29a; }
#product div.product-04 div.title { border-bottom: 1px solid #ae4582; }
#product div.product-04 div.title h2 { background-color: #ae4582; }
#product div.product-04 ul li b { color: #ae4582; }
#product div.product-05 div.title { border-bottom: 1px solid #f39800; }
#product div.product-05 div.title h2 { background-color: #f39800; }
#product div.product-05 ul li b { color: #f39800; }
#product div.product-06 div.title { border-bottom: 1px solid #744895; }
#product div.product-06 div.title h2 { background-color: #744895; }
#product div.product-06 ul li b { color: #744895; }

#product-option { background-color: #4f8290; max-width: none; margin: 120px auto 0; }
#product-option div.box { max-width: 980px; margin: 0 auto; width: 100%; padding: 100px 0; color: #fff; text-align: center; }
#product-option div.box div.title { text-align: left; font-size: 200%; margin: 0 0 40px 0; }
#product-option div.box span { text-align: left; display: block; }
section#product-option.content div.box span:nth-child(2) { border-bottom: 1px solid #fff; text-align: left; display: block; color: #e6e6e6; font-size: 120%; margin: 0 0 10px 0; padding: 0 0 10px 0; }
#product-option div.box img { display: block; margin: 40px auto; }
#product-option div.box p { display: inline-block; margin: 0 auto; border: 1px solid #fff; padding: 20px; text-align: left; }