@charset "utf-8";
@media print, screen and (max-width:768px){
/*=========================================================================
STYLE BASIC
=========================================================================*/
.for_pc {display: none !important;} 

/* ---------------------------------------------------------------- */
body.open {z-index: -1; overflow: hidden;}
#Wrapper.open:before {
content: "";
position: fixed;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s;
}

/* ---------------------------------------------------------------- */
#markNew {font-size: 11px; font-weight: 900;}

@media print, screen and (max-width:414px){
#markNew {font-size: 2.4vw;}
}

/* ---------------------------------------------------------------- */
.anchor_style {padding-top: 80px; margin-top: -80px;}

/*-------------------------------------------------------------------------------------------------------------------------*/
#Coming {padding: 24% 0; font-size: 22px; font-weight: 900; }

@media print, screen and (max-width:414px){
#Coming {font-size: 5vw;}
}

/*=========================================================================
HEADER
=========================================================================*/
#Header,#headerContents {height: 60px;}

/* ---------------------------------------------------------------- */
#siteLogo {
width: 40%;
max-width: 140px;
left:50%;
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}



/*=========================================================================
HEADER：GLOBAL NAVI
=========================================================================*/
#globalNavi {
overflow-x: hidden;
min-height: 100vh;
background: #fff;
color: #000;
width: 70%;
height: 100%;
position: fixed;
top:60px;
right: -200%;
z-index: -1;
transition: all .5s;
opacity: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

#globalNavi.open {opacity: 1; z-index:98 !important; right: 0;}

#globalNavi:after {
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}

/* ---------------------------------------------------------------- */
#menu-trigger {
position:absolute;
width:36px;
height: 36px;
cursor: pointer;
z-index: 99;
margin: auto;
right: 0%;
top:50%;
transition: all .5s;
background: #05389b;
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
#menu-trigger span {
background: #dee5f7;
display: block;
position: absolute;
height: 3px;
width:70%;
left: 15%;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

#menu-trigger span:nth-child(1) {  top: 8px;}
#menu-trigger span:nth-child(2) {  top: 16px;}
#menu-trigger span:nth-child(3) {  top: 24px;}

#menu-trigger.active span:nth-child(1) , #menu-trigger.active span:nth-child(3) {top: 16px;}
#menu-trigger.active span:nth-child(1) {-webkit-transform: rotate(315deg);transform: rotate(315deg);}
#menu-trigger.active span:nth-child(2) {width: 0;left: 50%;}
#menu-trigger.active span:nth-child(3) {-webkit-transform: rotate(-315deg);transform: rotate(-315deg);}


/* ---------------------------------------------------------------- */
ul#naviList {list-style-type: none;text-align: left;}
ul#naviList li {font-size: 16px; border-bottom: 1px solid #dee5f7; font-weight: 900;}
ul#naviList li:first-of-type {border-top: 1px solid #dee5f7; animation-delay: .15s; }
ul#naviList li:nth-of-type(2) { animation-delay: 0.2s; }
ul#naviList li:nth-of-type(3) { animation-delay: 0.45s; }
ul#naviList li:nth-of-type(4) { animation-delay: 0.6s; }
ul#naviList li:nth-of-type(5) { animation-delay: 0.75s; }
ul#naviList li:nth-of-type(6) { animation-delay: 0.9s; }
ul#naviList li:nth-of-type(7) { animation-delay: 1.05s; }
ul#naviList li:nth-of-type(8) { animation-delay: 1.2s; }

ul#naviList li:last-of-type {margin-bottom: 0;}

ul#naviList li a {display: block; color: #050505; padding: 20px 3.5em; position: relative; z-index: 1;}
ul#naviList li a:hover {background: inherit; color: #05389b;}

@media print, screen and (max-width:414px){
ul#naviList li {font-size: 4vw; }
ul#naviList li a {padding: 6% 3em;}
}

/* ---------------------------------------------------------------- */
ul#naviList li a:before{
content: "";
position: absolute;
top:51%;
left: 5%;
background-image: url("../img/icon_title.png");
background-position: left top;
background-size: contain;
background-repeat: no-repeat;
width: 1.4em;
height: 1.4em;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}


/*=========================================================================
HEADER：SNS LINKS
=========================================================================*/
#link_widgetBox {width: 90%; margin:0 auto; padding-top: 6%;}

/* ---------------------------------------------------------------- */
ul#widgetList {width: 100%; margin: 0 auto; max-width:240px;text-align: left; display: flex; flex-wrap: wrap; justify-content: center;}
ul#widgetList li {margin-bottom: 8%; display: inline-block; letter-spacing: 0; vertical-align: middle;}
ul#widgetList li#wid-Tel {width: 80%; margin: 0 auto 4%;max-width: 240px;}
ul#widgetList li#wid-Bnr {width: 50%;}
ul#widgetList li#wid-Fb,
ul#widgetList li#wid-Lang {margin-left: 6%; width: 14%;}

@media print, screen and (max-width:480px){
ul#widgetList {max-width: inherit;}
}

/* ---------------------------------------------------------------- */
#naviPhoto {margin: 6% auto 6%; width: 80%; height: auto; max-width:260px;}
#naviPhoto img {width: 100%; height: auto; display: block;}

#naviPhoto img.navi_logo {width: 70%; margin: 3% auto 0;}

@media print, screen and (max-width:480px){
#naviPhoto {max-width: inherit; margin-top: 0;}
}
/*=========================================================================
BREAD CRUMB
=========================================================================*/
.crumb_inner {padding: 10px 0;}

/* ---------------------------------------------------------------- */
#breadCrumb p, #breadCrumb a {font-size: 13px;}

@media print, screen and (max-width:414px){
#breadCrumb p, #breadCrumb a {font-size: 3vw;}
}

/*=========================================================================
FOOTER
=========================================================================*/
#Footer {padding: 9% 0;}

/* ---------------------------------------------------------------- */
#bottomLogo {width: 30%; margin-bottom: 6%; max-width: 200px;}

@media print, screen and (max-width:414px){
#bottomLogo {width: 40%;}
}

/* ---------------------------------------------------------------- */
#bottom_linkBloc {width: 100%; margin: 0 auto 14%;}

/* ---------------------------------------------------------------- */
ul.bottom_linklist {width: 49%; margin:0 auto 4% ; }
ul.bottom_linklist:last-of-type {margin-bottom: 0;}

@media print, screen and (max-width:414px){
ul.bottom_linklist {width: 60%; margin-bottom: 9%; }
}

/* ---------------------------------------------------------------- */
ul.bottom_linklist li, ul.bottom_linklist li a {font-size: 11px;}
ul.bottom_linklist li {margin-bottom: 5px;}
ul.bottom_linklist li a {padding-left: 15px;}

@media print, screen and (max-width:414px){
ul.bottom_linklist li, ul.bottom_linklist li a {font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
ul.bottom_linklist li:before {width: 6px;height: 6px; margin-top: 5px;}


/* ---------------------------------------------------------------- */
#bottomHeadline {font-size: 15px; margin-bottom: 15px;font-weight: 900; }
#bottomHeadline p, #bottomHeadline a {font-size: 12px; font-weight: 400;}

#bottomHeadline.no_space {margin-bottom: 5px;}

@media print, screen and (max-width:414px){
#bottomHeadline {font-size: 3.3vw; margin-bottom:12%;  }
#bottomHeadline p {font-size: 2.8vw;}
}

/* ---------------------------------------------------------------- */
#footBnr {width: 30%; margin-bottom: 6%; max-width: 200px;}

@media print, screen and (max-width:414px){
#footBnr {width: 40%;}
}


/* ---------------------------------------------------------------- */
#Copy {font-size: 11px;font-weight: 500;}

@media print, screen and (max-width:414px){
#Copy {font-size: 2.6vw;}
}


/*=========================================================================
SIDE COLUMN
=========================================================================*/
#sideOne {padding-top: 10px; margin-bottom: 6%;}

/* ---------------------------------------------------------------- */
#sideHeadline {font-size: 15px; padding: 3px 10px;}

@media print, screen and (max-width:414px){
#sideHeadline {font-size: 3.5vw;}
}

/* ---------------------------------------------------------------- */
dl#product_catBody {padding: 10px 10px 0;}
dl#product_catBody:last-of-type {padding-bottom: 10px;}

dl#product_catBody dt,
dl#product_catBody dt a,
dl#product_catBody dt span {font-size: 13px;}
dl#product_catBody dd, ul#prd_catList li {font-size: 12px;}

dl#product_catBody dt a,
dl#product_catBody dt span {padding:10px 15px;}

@media print, screen and (max-width:414px){
dl#product_catBody dt a, dl#product_catBody dt span {font-size: 3.3vw;}
dl#product_catBody dd, ul#prd_catList li {font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
dl#product_catBody dt span:after {font-size: 15px; top: 50%;}

@media print, screen and (max-width:414px){
dl#product_catBody dt span:after {font-size: 3.3vw;}
}

/* ---------------------------------------------------------------- */
dl#product_catBody dt a:after {width: 6px; height:6px;}


/* ---------------------------------------------------------------- */
ul#prd_catList li a {padding: 15px 15px 15px 30px;}


/*=========================================================================
PAGE TOP
=========================================================================*/
#page-top {width: 36px;}

/*=========================================================================
PAGER
=========================================================================*/
a.page-numbers, .pager .current, .pager a:hover{font-size: 14px;}

@media print, screen and (max-width:414px){
a.page-numbers, .pager .current, .pager a:hover{font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
.pager {margin: 9% auto 0;}


/*=========================================================================
NO PAGE
=========================================================================*/
#no_pagebox {	margin:0 auto 30px;	padding:9% 0%; width: 88%;}

#notfoud {font-size: 28px; }
#notfont_kana {font-size: 16px;}
#no_pagebox p {margin: 15px 0 ; font-size: 12px; }


@media print, screen and (max-width:414px){
#notfoud {font-size: 7vw; }
#notfont_kana {font-size: 4vw;}
#no_pagebox p {margin: 3% 0 ; font-size: 2.8vw; }
}



}