@charset "UTF-8";
/* CSS Document */

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/06/21
* Last update : 2018/12/04
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll;}
body{ height: 100%; margin: 0; padding: 0; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif"; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%;}
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, dl, dt, dd{ margin: 0; padding: 0;}
li, ol{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}



/*************************************************************************************************************************
* 画面幅：640px 以下
*************************************************************************************************************************/
html{ font-size: 14px; color: #333;}
body{ padding: 205px 0 0;}
.anchor{ display: block; margin-top: -205px; padding-top: 205px;}

@media print, screen and (min-width:681px){
  html{ font-size: 14px;}
  body{ min-width: 1050px; padding: 81px 0 0;}
  .anchor{ margin-top: -81px; padding-top: 81px;}
}


/* header
**********************************************************************/

.newsCov{ display: block; width: calc(100% - 30px); padding: 10px; background: #ffffff; border: 3px solid #ff0000; font-size: 15px; font-weight: bold; line-height: 1.3; color: #333; position: absolute; top: 128px; left: 15px;}
.newsCov span{ color: #FF0000;}
@media print, screen and (min-width: 681px){
  .newsCov{ width: 980px; text-align: center; top: 100px; left: 50%; transform: translateX(-50%);}
}



header{ background: rgba(255,255,255,1); width: 100%; height: 205px; position: fixed; top: 0; left: 0; z-index: 100; border-bottom: 1px solid #ddd;}
header h1{ width: 100px; position: absolute; top: 12px; left: 10px;}
header h1 a.menubtn{ display: block;}
header > a.menubtn{ display: block; background: url(../img/nav_open.svg) no-repeat 0 0 / cover; width: 50px; height: 50px; position: absolute; top: 0; right: 0; overflow: hidden; text-indent: 100%; white-space: nowrap;}
header.nav-on > a.menubtn{ background-image: url(../img/nav_close.svg); z-index: 5;}
header nav{ display: none; background: rgba(58,72,81,1); width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 4;}
header nav ul{ width: 100%; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-top: 1px solid #4b5c66;}
header nav ul li a{ display: block; height: 50px; border-bottom: 1px solid #4b5c66; padding: 0 0 0 22px; font-size: 13px; line-height: 50px; color: #fff;}
header nav ul li.contact a{ background: #2e808a; margin: 20px 20px 0; padding-left: 0; position: relative; border-bottom: none; border-radius: 25px; text-align: center;}
header nav ul li.contact a::before{ content: ""; background: url(../img/icon_arrow01.svg) no-repeat 0 0 / cover; width: 6px; height: 8px; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

header .shopinfo{ width: 100%; height: 62px; padding: 16px 0 0 8px; background: #D30716; position: absolute; top: 51px; left: 0; overflow: hidden;}
header .shopinfo strong{ display: block; width: 77px; height: 15px; background: url(../img/head_shop_title.svg) no-repeat left top/cover; overflow: hidden; text-indent: 100%; white-space: nowrap; position: absolute; top: 5px; left: -5px;}
header .shopinfo p{ font-size: 12px; color: #FFFFFF; line-height: 1.0;}

header .shopinfo p span{ position: relative; bottom: 2px;  display: inline-block; margin: 0 0 0 8px; font: 700 25px/1 "Roboto",sans-serif; color: #FF0; font-style: italic; letter-spacing: 1px; transform: translateY(2px); text-shadow: 2px 2px 0px #600505; }
/*
header .shopinfo p span::before{ content: "553"; font: 700 25px/1 "Roboto",sans-serif; color: #FFFF00; font-style: italic; letter-spacing: 1px; position: absolute; top: -2px; left: -2px;}
*/
header .shopinfo ul{ display: flex; position: absolute; top: 5px; right: 5px;}
header .shopinfo ul li{ width: 71px;}
header .shopinfo ul li:nth-child(1){ margin: 0 5px 0 0;}
header .shopinfo ul li a{ display: block; width: 71px; height: 48px; background: #FFFFFF; border-radius: 4px; box-shadow:0px 3px 0px 0px rgba(0,0,0,.2);}
header .shopinfo > span{ font-size: 10px; color: rgba(255,255,255,.8); position: absolute; top: 4px; left: 80px;}
@media print, screen and (min-width:451px){
  header .shopinfo p{ display: inline;}
  header .shopinfo > span{ position: absolute; top: 40px; left: 9px;}
}
@media print, screen and (min-width:531px){
  header .shopinfo p{ font-size: 13px; letter-spacing: 1px;}
}
@media print, screen and (min-width:571px){
  header .shopinfo p{ font-size: 15px;}
  header .shopinfo p span{ font-size: 28px;}
  header .shopinfo p span::before{ font-size: 28px;}
  header .shopinfo > span{ top: 42px;}
}
@media print, screen and (min-width:681px){
  header .shopinfo{ width: 370px; height: 81px; padding: 14px 0 0 15px; top: 0; left: auto; right: 0;}
  header .shopinfo strong{ width: 92px; height: 18px; top: 8px; left: -7px;}
  header .shopinfo p{ display: block; font-size: 13px; letter-spacing: 0.5;}
  header .shopinfo p span{ font-size: 35px;}
  header .shopinfo p span::before{ font-size: 35px;}
  header .shopinfo > span{ top: 63px; left: 15px;}
  header .shopinfo ul{ top: 11px; right: 8px;}
  header .shopinfo ul li{ width: 80px;}
  header .shopinfo ul li a{ width: 80px; height: 58px; padding: 2px 0 0 0; box-shadow:0px 5px 0px 0px rgba(0,0,0,.2); transition: box-shadow,transform .1s;}
  header .shopinfo ul li a:hover{ box-shadow:0px 0px 0px 0px rgba(0,0,0,.2); transform: translateY(3px);}
}
@media print, screen and (min-width:1061px){
  header nav{ margin: 0 410px 0 0;}
  header .shopinfo{ width: 400px; padding: 14px 0 0 20px;}
  header .shopinfo strong{ left: 0px;}
  header .shopinfo > span{ left: 20px;}
  header .shopinfo ul{ top: 11px; right: 25px;}
  header .shopinfo ul li:nth-child(1){ margin: 0 8px 0 0;}
}



@media print, screen and (min-width:681px){
  header{ min-width: 1050px; height: 81px;}
  header h1{ width: 153px; left: 33px;}
  header > a.menubtn{ display: none;}
  header nav{ display: block!important; background: none; width: auto; height: auto; margin: 0 380px 0 0; position: static; float: right;}
  header nav ul{ width: 470px; position: static; -webkit-transform: none; transform: none; border-top: none; overflow: hidden;}
  header nav ul li a{ display: block; height: 80px; border-bottom: none; padding: 0px 9px; float: left; line-height: 80px; font-size: 12px; color: #333; text-align: center; transition: background .2s linear, color .2s linear; }
  header nav ul li a:hover,
  #news header nav ul li:nth-child(1) a,
  #vision header nav ul li:nth-child(2) a,
  #business header nav ul li:nth-child(3) a,
  #company header nav ul li:nth-child(4) a,
  #contact header nav ul li:nth-child(6) a{ background: #dd0716; color: #fff;}
  header nav ul li.contact a{ width: 200px; height: 44px; margin: 18px 0 0 15px; border-radius: 22px; line-height: 44px; color: #fff; text-align: center;}
  header nav ul li.contact a::before{ right: 17px;}
}
@media print, screen and (min-width:1061px){
  header nav{ margin: 0 410px 0 0;}
}
@media print, screen and (min-width:1180px){
  header nav ul{ width: 590px;}
  header nav ul li a{padding: 0px 16px; font-size: 13px;}
}



/* lead text
**********************************************************************/
.lead{ background: #f9f9f9; padding: 10px; font-weight: bold; text-align: left;}

@media print, screen and (min-width:681px){
.lead{ text-align: center;}
}



/* pankuzu
**********************************************************************/
.pankuzu{ background: #f1f2f3; overflow: hidden;}
.pankuzu li{ height: 36px; padding: 0 12px; float: left; font-size: 11px; line-height: 36px;}
.pankuzu li a{ display: block; position: relative; color: #333;}
.pankuzu li:first-child a{ background: #e0dfdb; margin: 0 0 0 -12px; padding: 0 12px 0 28px;}
.pankuzu li:first-child a::before{ content: ""; background: url(../img/icon_home.svg) no-repeat 0 0 / cover; width: 14px; height: 12px; margin: -1px 0 0; position: absolute; top: 50%; left: 12px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.pankuzu li:first-child a::after{ content: ""; width: 0; height: 0; position: absolute; top: 0; right: -12px; border-style: solid; border-width: 18px 0 18px 12px; border-color: transparent transparent transparent #e0dfdb;}
.pankuzu li:not(:first-child):not(:last-child){ display: none;}

@media print, screen and (min-width:681px){
  .pankuzu li{ height: 50px; padding: 0 24px; line-height: 50px;}
  .pankuzu li:nth-child(3n){ padding: 0 24px 0 50px;}
  .pankuzu li:first-child a{ margin: 0 0 0 -25px; padding: 0 30px 0 55px;}
  .pankuzu li:first-child a::before{ left: 35px;}
  .pankuzu li:first-child a::after{ right: -18px; border-width: 25px 0 25px 18px;}
  .pankuzu li:not(:first-child):not(:last-child){ display: block;}
  .pankuzu li:not(:first-child):not(:last-child) a::before,
  .pankuzu li:not(:first-child):not(:last-child) a::after{ content: ""; width: 0; height: 0; position: absolute; top: 0; right: -35px; border-style: solid; border-width: 25px 0 25px 18px;}
  .pankuzu li:not(:first-child):not(:last-child) a::before{ right: -44px; border-color: transparent transparent transparent #ddd;}
  .pankuzu li:not(:first-child):not(:last-child) a::after{ right: -43px; border-color: transparent transparent transparent #f1f2f3;}
}


/* page title
**********************************************************************/
.pagetitle{ height: 140px; padding: 44px 0 0; font: 600 30px/1 "din-2014",sans-serif; color: #fff; text-align: center; letter-spacing: 3px;}
.pagetitle span{ display: block; margin: 5px 0 0; font: 500 13px/1 "heisei-kaku-gothic-std",sans-serif; letter-spacing: 1px;}
#vision .pagetitle{ background: url(../../vision/img/main_img.jpg) no-repeat center / cover;}
#business .pagetitle{ background: url(../../business/img/main_img.jpg) no-repeat center / cover;}
#overseas .pagetitle{ background: url(../../business/overseas/img/main_img.jpg) no-repeat center / cover;}
#company .pagetitle{ background: url(../../company/img/main_img.jpg) no-repeat center / cover;}
#contact .pagetitle{ background: url(../../contact/img/main_img.jpg) no-repeat center / cover;}
#privacy .pagetitle{ background: url(../../privacy/img/main_img.jpg) no-repeat center / cover;}
#news .pagetitle{ background: url(../../news/img/main_img.jpg) no-repeat center / cover;}

@media print, screen and (min-width:681px){
  .pagetitle{ height: 270px; padding: 100px 0 0; font-size: 40px; letter-spacing: 4px;}
  .pagetitle span{ margin: 8px 0 0; font-size: 16px; letter-spacing: 2px;}
}


/* contents
**********************************************************************/
body:not(#home) .contents{ padding: 0 0 40px;}

@media print, screen and (min-width:681px){
  body:not(#home) .contents{ padding: 0 0 70px;}
}


/* footer
**********************************************************************/
footer > a{ display: none; background: url(../img/page_top.svg) no-repeat center / 15px 9px rgba(255,255,255,.9); width: 40px; height: 40px; position: fixed; bottom: 10px; right: 0; overflow: hidden; text-indent: 100%; white-space: nowrap;}
footer .address{ background: #eae9e5; padding: 15px 0 15px 15px; font-size: 11px; line-height: 1.4; text-align: center;}
footer div{ padding: 15px 0;}
footer div > a{ display: block; width: 100px; margin: 0 auto;}
footer div ul{ display: none;}
footer .copyright{ background: #dd0716; padding: 10px 0; font: 300 10px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center;}

@media print, screen and (min-width:681px){
  footer{ position: relative;}
  footer > a{ display: block; background: url(../img/page_top.svg) no-repeat center / 21px 14px rgba(255,255,255,1); width: 70px; height: 70px; position: absolute; top: 0; transition: background-color .2s linear;}
  footer > a:hover{ background-color: #dd0716;}
  footer .address{ height: 70px; padding: 0 0 0 35px; line-height: 70px; text-align: left;}
  footer .address br{ display: none;}
  footer div{ height: 70px; padding: 0 0 0 32px; overflow: hidden;}
  footer div > a{ width: 120px; margin: 12px 0 0; float: left;}
  footer div ul{ display: block; overflow: hidden;}
  footer div ul li a{ margin: 0 0 0 40px; float: left; font-size: 12px; line-height: 70px; color: #333;}
  footer .copyright{ padding: 15px 30px; text-align: right;}
}