@charset "UTF-8";

html{ font-size: 62.5%;}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, 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, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  font-weight: 300;
  box-sizing: border-box;
  -webkit-appearance: none;
}

body {
  position: relative;
  display: block;
  background-color: #fff;
  color: #333;
  text-align: left;
  font-size: 1.6rem;
  font-family: "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.05em;
  word-spacing: 0.05em;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  cursor: auto;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: #d1446a;
  text-decoration: none;
  cursor: pointer;
}

a,
area,
button,
[role="button"],
input:not([type=range]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  font-family: Meiryo,-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,sans-serif;
  font-weight: 300;
}

a:visited { color: #d1446a;}
a:hover { color: #d1446a;}
a:focus,
a:active { color: #d1446a;}

body.orderbusiness a,
body.orderbusiness a:visited,
body.orderbusiness a:hover,
body.orderbusiness a:focus,
body.orderbusiness a:active { color: #f15e0e;}

em,address { font-style: normal;}

hr { display: none;}

img {
  /*max-width: 100%;*/
  width: 100%;
  height: auto;
  border: none;
  background: transparent;
  vertical-align: bottom;
}

*:focus { outline: none;}

select option { padding: 0;}
label { cursor: pointer;}
strong{ font-weight: bold;}

input,
select{
  position: relative;
  padding: 0.6em 0.5em;
  width: 100%;
  display: block;
  outline: none;
  border: 0.1rem solid #ccc;
  border-radius: 0.2em;
  box-sizing: border-box;
  font-size: 1.6rem;
}

select{
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  position: relative;
}

select::-ms-expand { display: none;}

select:after {
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -0.4rem;
  width: 0.6rem;
  height: 0.6rem;
  display: block;
  border-bottom: solid 0.2rem #b4b3b3;
  border-right: solid 0.2rem #b4b3b3;
  transform: rotate(45deg);
  content: "";
  pointer-events: none;
  z-index: 200;
}

.radio{ display: none;}

.radio + label{
  position:relative;
  margin: 0 2em 0 0;
  padding: 0 0 0 1.5em;
  display: block;
  font-size: 1.6rem;
  line-height: 1.5;
}

.radio + label:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 1.4rem;
  height: 1.4rem;
  display: block;
  border: 0.1rem solid #999;
  border-radius: 50%;
  content: "";
}

.radio:checked + label{
  color: #207fdc;
  font-weight: bold;
}

.radio:checked + label:after{
  position: absolute;
  top: 0;
  left: 0.3rem;
  bottom: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  display: block;
  background: #207fdc;
  border-radius: 50%;
  content: "";
}

.checkbox {display: none;}

.checkbox + label{
  position:relative;
  margin: 0 2em 0 0;
  padding: 0 0 0 1.5em;
  display: block;
  font-size: 1.6rem;
  line-height: 1.4;
}

.checkbox + label:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 1.4rem;
  height: 1.4rem;
  display: block;
  border: 0.1rem solid #999;
  border-radius: 0.2em;
  content: "";
}

.checkbox:checked + label{
  color: #207fdc;
  font-weight: bold;
}

.checkbox:checked + label:after{
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.1rem;
  height: 0.6rem;
  display: block;
  border-left: 0.4rem solid #00aeef;
  border-bottom: 0.4rem solid #00aeef;
  transform: rotate( -45deg );
  content: "";
}

.form-table textarea{
  position: relative;
  margin: 0;
  padding: 0.6em;
  width: 100%;
  height: 8.7em;
  display: block;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 0.4em;
  border: 0.1rem solid #ccc;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
}

@media screen and (min-width: 769px) {

a { transition: all 0.3s ease; }
#PRODUCT ul.cartSUBMIT li.backorder a,
#PRODUCT ul.cartSUBMIT li.back a{ transition: none; }
a:hover { opacity: 0.6; }
  
}/* End min-769 */

em { font-style: normal;}

hr { display: none;}

embed, object {
  outline: 0;
  vertical-align: bottom;
}


.clearfix { overflow: hidden;}


/* ===================================================================
 BUTTON
=================================================================== */


.button{
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 30em;
}

.button a{
  position: relative;
  margin: 0 0 1em;
  padding: 0.6em;
  display: block;
  border-radius: 0.4em;
  background: #d1446a; 
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  z-index: 100;
}
body.orderbusiness .button a{ background:#f1bc0e; color: #fff; }

.button a:before{
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  background: url(/common/img/icon_arrow_circle_white.svg) center center no-repeat;
  background-size: contain;
  content: "";
}

.button.return a{ background: #999; }
.button.return a:before{
  background: url(/common/img/icon_return.svg) center center no-repeat;
  background-size: contain;
}

.button.white a{
  border: solid 0.1rem #d1446a;
  background-color: #fff;
  color: #d1446a;
}

.button.white a:before{
  background: url(/common/img/icon_arrow_circle_red.svg) center center no-repeat;
  background-size: contain;
}

.button.print a:before{ background: url(/common/img/icon_print.svg) center center no-repeat; background-size: contain; width: 5rem; height: 2.3rem; }

.size-m a,
.size-m button{
  position: relative;
  margin: 0 auto 1em;
  padding: 0.8em 1em;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.size-l a,
.size-l button{
  position: relative;
  margin: 0 auto 1em;
  padding: 0.8em 1em;
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.button.size-l{
  width: 90%;
  max-width: 30em;
}

.button.full{ width: 100%; max-width: 100%;}

.link-button{
  position: relative;
  margin: auto;
  padding: 0;
  width: 94%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.link-button li{ margin: 0 0 0.5em;}


@media screen and (min-width: 769px) {

.link-button{
  justify-content: center;
  flex-wrap: nowrap;
}

.link-button li{ margin: 0 1em;}

} /* min-769 */


/* ===================================================================
 structure
=================================================================== */

#WRAPPER {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 13rem;
  display: block;
  overflow: hidden;
}

.serif{ font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight: 500;}
.en{ font-family: 'Montserrat', sans-serif; font-weight: 700;}


.icon01:before{ background: url(/common/img/icon_category01.svg) center center no-repeat; background-size: contain;}
.icon02:before{ background: url(/common/img/icon_category02.svg) center center no-repeat; background-size: contain;}
.icon03:before{ background: url(/common/img/icon_category03.svg) center center no-repeat; background-size: contain;}
.icon04:before{ background: url(/common/img/icon_category04.svg) center center no-repeat; background-size: contain;}
.icon05:before{ background: url(/common/img/icon_category05.svg) center center no-repeat; background-size: contain;}
.icon06:before{ background: url(/common/img/icon_category06.svg) center center no-repeat; background-size: contain;}
.icon07:before{ background: url(/common/img/icon_category07.svg) center center no-repeat; background-size: contain;}
.icon08:before{ background: url(/common/img/icon_category08.svg) center center no-repeat; background-size: contain;}
.icon09:before{ background: url(/common/img/icon_category09.svg) center center no-repeat; background-size: contain;}
.icon10:before{ background: url(/common/img/icon_category10.svg) center center no-repeat; background-size: contain;}
.icon11:before{ background: url(/common/img/icon_category11.svg) center center no-repeat; background-size: contain;}
.icon12:before{ background: url(/common/img/icon_category12.svg) center center no-repeat; background-size: contain;}
.icon13:before{ background: url(/common/img/icon_category13.svg) center center no-repeat; background-size: contain;}
.icon14:before{ background: url(/common/img/icon_category14.svg) center center no-repeat; background-size: contain;}
.icon15:before{ background: url(/common/img/icon_category15.svg) center center no-repeat; background-size: contain;}
.icon16:before{ background: url(/common/img/icon_category16.svg) center center no-repeat; background-size: contain;}
.icon17:before{ background: url(/common/img/icon_category17.svg) center center no-repeat; background-size: contain;}
.icon18:before{ background: url(/common/img/icon_category18.svg) center center no-repeat; background-size: contain;}
.icon19:before{ background: url(/common/img/icon_category19.svg) center center no-repeat; background-size: contain;}
.icon20:before{ background: url(/common/img/icon_category20.svg) center center no-repeat; background-size: contain;}
.icon21:before{ background: url(/common/img/icon_category21.svg) center center no-repeat; background-size: contain;}
.icon22:before{ background: url(/common/img/icon_category22.svg) center center no-repeat; background-size: contain;}
.icon23:before{ background: url(/common/img/icon_category23.svg) center center no-repeat; background-size: contain;}
.icon24:before{ background: url(/common/img/icon_category24.svg) center center no-repeat; background-size: contain;}
.icon25:before{ background: url(/common/img/icon_category25.svg) center center no-repeat; background-size: contain;}
.icon26:before{ background: url(/common/img/icon_category26.svg) center center no-repeat; background-size: contain;}
.icon27:before{ background: url(/common/img/icon_category27.svg) center center no-repeat; background-size: contain;}
.icon28:before{ background: url(/common/img/icon_category28.svg) center center no-repeat; background-size: contain;}
.icon29:before{ background: url(/common/img/icon_category29.svg) center center no-repeat; background-size: contain;}
.icon30:before{ background: url(/common/img/icon_category30.svg) center center no-repeat; background-size: contain;}
.icon31:before{ background: url(/common/img/icon_category31.svg) center center no-repeat; background-size: contain;}
.icon32:before{ background: url(/common/img/icon_category32.svg) center center no-repeat; background-size: contain;}
.icon33:before{ background: url(/common/img/icon_category33.svg) center center no-repeat; background-size: contain;}

.icon01u:before{ background: url(/common/img/icon_purpose01.svg) center center no-repeat; background-size: contain;}
.icon02u:before{ background: url(/common/img/icon_purpose02.svg) center center no-repeat; background-size: contain;}
.icon03u:before{ background: url(/common/img/icon_purpose03.svg) center center no-repeat; background-size: contain;}
.icon04u:before{ background: url(/common/img/icon_purpose04.svg) center center no-repeat; background-size: contain;}
.icon05u:before{ background: url(/common/img/icon_purpose05.svg) center center no-repeat; background-size: contain;}
.icon06u:before{ background: url(/common/img/icon_purpose06.svg) center center no-repeat; background-size: contain;}
.icon07u:before{ background: url(/common/img/icon_purpose07.svg) center center no-repeat; background-size: contain;}
.icon08u:before{ background: url(/common/img/icon_purpose08.svg) center center no-repeat; background-size: contain;}
.icon09u:before{ background: url(/common/img/icon_purpose09.svg) center center no-repeat; background-size: contain;}





@media screen and (min-width: 769px) {
/**/
#WRAPPER { padding-top: 13rem;}
body.orderbusiness #WRAPPER { padding-top: 17.6rem;}
}

@page {
  margin: 2rem;
}


/* ===================================================================
 HEADER
=================================================================== */

header {
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 13rem;
  background-color: #eee;
  transition: all 0.5s ease;
  z-index: 900;
  box-shadow: 0 0 0.6rem 0 rgba(0,0,0,0.5);
}
body.orderbusiness header { height: 17.6rem; }
.fixed header,
body.orderbusiness .fixed header{ height: 7.5rem !important;}



header .head-body{
  position: relative;
  margin: auto;
  padding: 0;
  width: 100%;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
  z-index: 1;
}

header .head-body:after{
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 0.2rem;
  display: block;
  background-color: #d1446a;
  content: "";
  z-index: 100;
}

body.orderbusiness header .head-body:after{ background-color: #f1bc0e; }

header .logo{
  position: relative;
  margin: 0 0 0 6.5rem;
  padding: 0;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.4s ease;
}

header .logo img{
  margin: 0;
  padding: 0;
  width: 12rem;
  transition: all 0.4s ease;
}
header .logo-business img{ width: 6.5rem; }


header .menu-button.trigger{
  position: absolute;
  top: 1.5rem;
  left: 0;
  margin: 0 0 0 0.5em;
  padding: 0;
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 1;
  z-index: 1000;
}

header .menu-button.trigger strong{ display: none;}

header .menu-button.trigger em{
  position: relative;
  margin: -0.1rem 0 0;
  padding: 0;
  width: 3rem;
  height: 0.2rem;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: #d1446a;
  color: #fff;
  cursor:pointer;
  outline: 0;
  transition: all 0.3s ease;
}

header .menu-button.trigger em::before,
header .menu-button.trigger em::after {  
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #d1446a;
  transition: all 0.3s ease;
  content: "";
}
body.orderbusiness header .menu-button.trigger em{ background-color: #f1bc0e; }
body.orderbusiness header .menu-button.trigger em::before,
body.orderbusiness header .menu-button.trigger em::after {  background-color: #f1bc0e; }


header .menu-button em::before,body.orderbusiness header .menu-button em::before { transform: translateY(-0.8rem);}
header .menu-button em::after,body.orderbusiness header .menu-button em::after { transform: translateY(0.8rem);}
header .menu-button.active em,body.orderbusiness header .menu-button.active em { background-color: transparent;}
header .menu-button.active em::before,body.orderbusiness header .menu-button.active em::before { transform: rotate(45deg);}
header .menu-button.active em::after,body.orderbusiness header .menu-button.active em::after { transform: rotate(-45deg);}

header .head-menu{
  margin: 0;
  padding: 0;
  width: calc(100% - 20rem);
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.orderbusiness header .head-menu{ width: calc(100% - 27rem); }
header .logo-business               { display: none; }
.orderbusiness header .logo-business{ display: block; }

header .main-menu{
  position: absolute;
  top: 7.5rem;
  left: -2rem;
  margin: 0;
  padding: 1em 2rem 10em;
  width: calc(100vw + 4rem);
  height: calc(100vh - 7.5rem);
  display: none; 
  background-color: #eee;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 500;
}

header .main-menu.hide-menu.menu-on{ display: block;}

header .main-menu .sp-only-menu{
  position: relative;
  display: block;
}

header .main-menu .sp-only-menu ul{
  position: relative;
  margin: 1em 1em 1.5em;
  padding: 1em;
  display: block;
  border-radius: 0.4rem;
  background-color: #fff;
}


header .main-menu .sp-only-menu ul a{
  position: relative;
  margin: 0;
  padding: 0.5em 0 0.5em 3.4rem;
  display: block;
  color: #333;
  font-size: 1.6rem;
  text-align: left;
}

header .main-menu .sp-only-menu ul a:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;  
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  content: "";
}

header .main-menu .sp-only-menu li.mypage a:before{ background: url(/common/img/icon_head_user.svg) center center no-repeat; background-size: contain;}
header .main-menu .sp-only-menu li.login a:before{ background: url(/common/img/icon_head_login.svg) center center no-repeat; background-size: contain;}
header .main-menu .sp-only-menu li.new-member a:before{ background: url(/common/img/icon_head_user.svg) center center no-repeat; background-size: contain;}
header .main-menu .sp-only-menu li.favorite a:before{ background: url(/common/img/icon_head_fav.svg) center center no-repeat; background-size: contain;}
header .main-menu .sp-only-menu li.history a:before{ background: url(/common/img/icon_head_cart.svg) center center no-repeat; background-size: contain;}

header .main-menu .sp-only-menu li.arrow a{ padding: 0.5em 0 0.5em 2rem;}
header .main-menu .sp-only-menu li.arrow a:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;  
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: url(/common/img/icon_arrow_red.svg) center center no-repeat; background-size: contain;
  content: "";
}


header .main-menu li.close-menu{
  position: fixed;
  bottom: 0;
  margin: 0;
  padding: 1em;
  width: 100vw;
  display: block;  
  background-color: #d1446a;
  text-align: center;
  z-index: 500;
}
body.orderbusiness header .main-menu li.close-menu{ background-color: #f1bc0e; }

header .main-menu li.close-menu:after{
  position: fixed;
  left: 0;
  bottom: 3.5em;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 6rem;
  display: block;  
  background: rgb(238,238,238);
  background: linear-gradient(0deg, rgba(238,238,238,1) 20%, rgba(238,238,238,0) 100%); 
  content: "";
  z-index: 400;
}

header .main-menu li.close-menu span{
  position: relative;
  margin: auto;
  padding: 0 0 0 3rem;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

header .main-menu li.close-menu span:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: block;
  background: url(/common/img/icon_close_white.svg) center center no-repeat;
  background-size: contain;
  content: "";
}



header .main-menu li a,
body.orderbusiness header .main-menu li a{ color: #333;}

header .main-menu .category{
  position: relative;
  padding: 1em 0 1em 3.5rem;
  width: 100%;
  display: block;
  border-bottom: 0.1rem dotted #999;
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
}

header .main-menu .category:before{
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  margin: auto;
  width: 1.8rem;
  height: 1.8rem;
  display: block;
  background: url(/common/img/icon_plus.svg) center center no-repeat;
  background-size: contain;
  transition: all 0.2s linear;
  transform: rotate(0deg);
  content: "";
}

header .main-menu .category.active:before{
  background: url(/common/img/icon_minus.svg) center center no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}

body.orderbusiness header .main-menu .category:before{ background: url(/common/img/icon_plus_orange.svg) center center no-repeat; background-size: contain; }
body.orderbusiness header .main-menu .category.active:before{ background: url(/common/img/icon_minus_orange.svg) center center no-repeat; background-size: contain; }


header .main-menu a.category:before{
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  margin: auto;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  background: url(/common/img/icon_arrow_circle_red.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
body.orderbusiness header .main-menu a.category:before{ background: url(/common/img/icon_arrow_circle_orange.svg) center center no-repeat; background-size: contain; }


.mega-menu {
  position: relative;
  margin: auto;
  padding: 3em 0;
  width: 100%;
  display: none;
  overflow: hidden;
  background: #fbfbfb;
  z-index: 100; 
}

.mega-menu .close-list{
  position: relative;
  margin: 2em auto 0;
  padding: 0.5em;
  width: 90%;
  display: block;
  background-color: #eee;
  text-align: center;
  cursor: pointer;
  z-index: 100;
}

.mega-menu .close-list span{
  position: relative;
  margin: auto;
  padding: 0 0 0 3rem;
  text-align: center;
}

.mega-menu .close-list span:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: block;
  background: url(/common/img/icon_close.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
body.orderbusiness .mega-menu .close-list span:before{ background: url(/common/img/icon_close_orange.svg) center center no-repeat; background-size: contain; }


@keyframes scroll-arrow {
  0% { background-position: left center; opacity: 0;}
  50% { background-position: center center; opacity: 1;}
  100% { background-position: right center; opacity: 0;}
}

.mega-menu-link {
  margin: auto;
  width: 96%;
  max-width: 128rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.mega-menu-link li{
  margin: 0 0 1em;
  padding: 0.2em 0;
  width: 48.5%;
  display: block;
  border-bottom: dotted 0.1rem #ccc;
}

.mega-menu-link li a{
  position: relative;
  margin: 0;
  padding: 0.4em 0 0.4em 4rem;
  display: block;
  font-size: 1.2rem;
  letter-spacing: inherit;
}

.mega-menu-link li.arrow a{ padding: 0.6em 0 0.6em 2.6rem;}


.mega-menu-link li a em{
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
}

.mega-menu-link li a:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  display: block;
  content: "";
}

.mega-menu-link li.arrow a:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  background: url(/common/img/icon_arrow_circle_red.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
body.orderbusiness .mega-menu-link li.arrow a:before{ background: url(/common/img/icon_arrow_circle_orange.svg) center center no-repeat; background-size: contain; }


header .sub-menu{
  position: relative;
  margin: 0;
  padding: 0;
  width: 7rem;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

header .sub-menu li{
  position: relative;
  margin: 0;
  padding: 0;
  width: 7rem;
  height: 7.5rem;
  display: block;
  border-left: 0.1rem solid #ccc;
}

header .sub-menu li.sp-none-menu{ display: none;}

header .sub-menu li a,
body.orderbusiness header .sub-menu li a{
  position: relative;
  margin: 0;
  padding: 5rem 0 0;
  height: 7.5rem;
  display: block;
  background-color: #fbfbfb;  
  color: #333;
  font-size: 1.1rem;
  text-align: center;
}

header .sub-menu li a:before{
  position: absolute;
  top: 1.6rem;
  left: 0;
  right: 0;
  margin: auto;  
  width: 3rem;
  height: 3rem;
  display: block;
  content: "";
}

header .sub-menu li.mypage a:before{ background: url(/common/img/icon_head_user.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.login a:before{ background: url(/common/img/icon_head_login.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.favorite a:before{ background: url(/common/img/icon_head_fav.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.fax a:before{ background: url(/common/img/icon_head_pdf.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.cart a:before{ background: url(/common/img/icon_head_cart.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.history a:before{ background: url(/common/img/icon_head_cart.svg) center center no-repeat; background-size: contain;}

header .sub-menu .number{
  position: absolute;
  top: 1.4rem;
  right: 0.5rem;
  margin: 0;
  padding: 0 0 0 0;
  width: 2.8rem;
  display: inline-block;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: -0.05em;
  text-align: center;
  z-index: 100;
}

header .sub-menu .number:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 0;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 2em;
  background-color: #bd2317;
  content: "";
  z-index: -1;
}

header .search-block{
  position: absolute;
  top: 7.5rem;
  right: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 5.5rem;
  display: block;
  transition: all 0.3s ease;
  z-index: 1;
}

.fixed header .search-block{
  position: absolute;
  top: 0 !important;
  right: 7rem;
  margin: 0;
  padding: 0;
  width: 6.5rem;
  height: 7.5rem;
  display: block;
}
body.orderbusiness header .search-block{ top: 12.1rem; }
body.orderbusiness .fixed header .search-block{ top: 0 !important; }

header .search-block .icon{
  position: absolute;
  top: -7.5rem;
  right: 0;
  display: none;
}

.fixed header .search-block .icon{
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 5rem 0 0;
  width: 6.5rem;
  height: 7.5rem;
  display: block;
  color: #333;
  font-size: 1.1rem;
  text-align: center;  
  cursor: pointer;
}

.fixed header .search-block .icon:before{
  position: absolute;
  top: 1.6rem;
  left: 0;
  right: 0;
  margin: auto;  
  width: 3rem;
  height: 3rem;
  display: block;
  background: url(/common/img/icon_search_gray.svg) center center no-repeat;
  background-size: contain;
  content: "";
}

.fixed header .search-block .icon.active:before{
  position: absolute;
  top: 1.3rem;
  left: 0;
  right: 0;
  margin: auto;  
  width: 4rem;
  height: 4rem;
  display: block;
  background: url(/common/img/icon_close.svg) center center no-repeat;
  background-size: contain;
  content: "";
}

header .head-search{
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 5.5rem;
  display: block;
}

header .head-search.hide-menu{ display: block;}

header .search-on .head-search{ display: block!important;}
 
.fixed header .head-search {
  position: absolute;
  top: 7.5rem;
  left: inherit;
  right: -7.1rem;
  padding: 2em 0 5em;
  width: 100vw;
  display: none;
  background: #eee;
  opacity: 1;
  z-index: 100; 
}

header .head-search .search-icon{
  width: 0;
  height: 0;
  display: block;
  opacity: 0;
}

.fixed header .head-search .search-icon{
  position: absolute;
  top: 0;
  width: 7.5rem;
  height: 7.5rem;
  display: block;
  opacity: 1;
  z-index: 1000;
  transition: all 0.2s ease-in;
}

header .head-search-inner{
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 48rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

header .head-search-inner .head-search-caption{ display: none;}

header .head-search-inner form{
  margin: 0;
  padding: 0 0.5em 0 1em;
  height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-grow: 1;
  overflow: hidden;
  border-radius: 2em;
  border: 0.1rem solid #d1446a;
  font-size: 1.6rem;
  background-color: #fff;
}
body.orderbusiness header .head-search-inner form{ border: 0.1rem solid #f1bc0e; }

header .head-search-inner .searchbox{
  margin: 0;
  padding: 0;
  width: calc(100% - 5rem);
  height: 3.6rem;
  display: block;
  border: none;
}

header .head-search-inner .searcsubmit{
  position: relative;
  margin: 0;
  padding: 0;
  width: 4rem;
  height: 3.8rem;
  display: block;
  overflow: hidden;
  border: none;
  background: url(/common/img/icon_search.svg) center center no-repeat;
  background-size: 60%;
  line-height: 300;
  cursor: pointer;
  z-index: 1;
}
body.orderbusiness header .head-search-inner .searcsubmit{ background: url(/common/img/icon_search_order.svg) center center no-repeat; background-size: 60%; }

.order-business-headnews{ background:#f1bc0e; width: 100%; border-top:1px solid #FFF; } 
.order-business-headnews .head-headnews-inner{ width: 94%; max-width: 100rem; min-height: 4.6rem; margin:auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } 
.order-business-headnews .welcome_name{ color: #222; font-size: 1.7rem; display: block; padding: 0 1em 0 0; } 
.order-business-headnews .welcome_link{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } 
.order-business-headnews .welcome_link a { background:#FFF; border-radius: 25em; position: relative; margin: 0; padding: 0.2em 3rem 0.1em 3.5rem; display: block; font-size: 1.5rem; }
.order-business-headnews .welcome_link a:before{ position: absolute; top: 0; left: 1.5rem; bottom: 0; margin: auto; padding: 0; width: 1.2rem; height: 1.2rem; display: block; background: url(/common/img/icon_arrow_orange.svg) center center no-repeat; background-size: contain; content: ""; }


@media screen and (max-width:400px) {

.mega-menu-link li{
  margin: 0 0 1em;
  padding: 0.2em 0;
  width: 100%;
}

}/* End max 400 */



@media screen and (max-width: 999px) {

.mypage header .main-menu .sp-only-menu{ display: block;}

}/* End max 999 */

@media screen and (max-width: 799px) {
body.orderbusiness #WRAPPER { padding-top: 19rem;}
.order-business-headnews .head-headnews-inner { width: 100%; min-height: 5.9rem; /*display: inline-block;*/ text-align: center; }
.order-business-headnews .welcome_link { display: inline-block; }
.order-business-headnews .welcome_name{ padding:0.2rem 0 0; font-size: 1.4rem; } 
body.orderbusiness header .search-block { top: 13.4rem; }
body.orderbusiness header { height: 19.0rem; }
}




@media screen and (min-width: 640px) {

header .logo{ margin: 0 0 0 7rem;}
header .logo img{ width: 16rem;}
header .logo-business img{ width: 7.4rem; }

header .head-menu{
  margin: 0;
  padding: 0;
  width: calc(100% - 30rem);
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.orderbusiness header .head-menu{ width: calc(100% - 31rem); }
header .main-menu .sp-only-menu{ display: none;}

.mega-menu-link { width: 94%;}

.mega-menu-link:after {
  width: 32%;
  display: block;
  content: "";  
}

.mega-menu-link li{
  margin: 0 0 1em;
  padding: 0.2em 0;
  width: 32%;
  display: block;
  border-bottom: dotted 0.1rem #ccc;
}


.mega-menu-link li a{
  position: relative;
  margin: 0;
  padding: 0.4em 0 0.4em 4rem;
  display: block;
  font-size: 1.2rem;
  letter-spacing: inherit;
}

.mega-menu-link li.arrow a{ padding: 0.6em 0 0.6em 2.6rem;}


.mega-menu-link li a em{
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
}

.mega-menu-link li a:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  display: block;
  content: "";
}



header .sub-menu{
  position: relative;
  margin: 0;
  padding: 0;
  width: 30rem;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

header .sub-menu li{
  position: relative;
  margin: 0;
  padding: 0;
  width: 7.5rem;
  height: 7.5rem;
  display: block;
  border-left: 0.1rem solid #ccc;
}

header .sub-menu li.sp-none-menu{ display: block;}

header .sub-menu li a,
body.orderbusiness header .sub-menu li a{
  position: relative;
  margin: 0;
  padding: 5rem 0 0;
  height: 7.5rem;
  display: block;
  background-color: #fbfbfb;  
  color: #333;
  font-size: 1.1rem;
  text-align: center;
}

header .sub-menu li a:before{
  position: absolute;
  top: 1.6rem;
  left: 0;
  right: 0;
  margin: auto;  
  width: 3rem;
  height: 3rem;
  display: block;
  content: "";
}

header .sub-menu li.mypage a:before{ background: url(/common/img/icon_head_user.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.login a:before{ background: url(/common/img/icon_head_login.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.favorite a:before{ background: url(/common/img/icon_head_fav.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.fax a:before{ background: url(/common/img/icon_head_pdf.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.cart a:before{ background: url(/common/img/icon_head_cart.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.history a:before{ background: url(/common/img/icon_head_cart.svg) center center no-repeat; background-size: contain;}

header .sub-menu .number{
  position: absolute;
  top: 1.4rem;
  right: 0.5rem;
  margin: 0;
  padding: 0 0 0 0;
  width: 2.8rem;
  display: inline-block;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: -0.05em;
  text-align: center;
  z-index: 100;
}

header .sub-menu .number:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 0;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 2em;
  background-color: #bd2317;
  content: "";
  z-index: -1;
}

header .search-block{
  position: absolute;
  top: 7.5rem;
  right: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 5.5rem;
  display: block;
  transition: all 0.3s ease;
}

.fixed header .search-block{
  position: absolute;
  top: 0;
  right: 30rem;
  margin: 0;
  padding: 0;
  width: 7.5rem;
  height: 7.5rem;
  display: block;
  background-color: #fbfbfb;
}

header .search-block .icon{
  position: absolute;
  top: -7.5rem;
  right: 0;
  display: none;
}

.fixed header .search-block .icon{
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 5rem 0 0;
  width: 7.5rem;
  height: 7.5rem;
  display: block;
  border-left: 0.1rem solid #ccc;
  background-color: #fbfbfb;  
  color: #333;
  font-size: 1.1rem;
  text-align: center;  
  cursor: pointer;
}
 
.fixed header .head-search {
  position: absolute;
  top: 7.5rem;
  left: inherit;
  right: -30.1rem;
}

header .head-search .search-icon{
  width: 0;
  height: 0;
  display: block;
  opacity: 0;
}

.fixed header .head-search .search-icon{
  position: absolute;
  top: 0;
  width: 7.5rem;
  height: 7.5rem;
  display: block;
  opacity: 1;
}

header .head-search-inner{
  width: 94%;
  max-width: 68rem;
  height: 5.5rem;
}


header .head-search-inner .head-search-caption{
  margin: 0;
  padding: 0 1em 0 0;
  display: block;
  font-size: 1.6rem;
}



}/* End head TAB */


@media screen and (min-width: 1000px) {

header .head-body{
  position: relative;
  margin: auto;
  padding: 0;
  width: 100%;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
  z-index: 1;
}


header .logo{
  position: relative;
  margin: 0 0 0 1.6rem;
  padding: 0;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

header .logo img{
  margin: 0;
  padding: 0;
  width: 18rem;
}

header .menu-button.trigger{ display: none;}

header .head-menu{
  margin: 0;
  padding: 0;
  width: calc(100% - 20rem);
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

header .main-menu{
  position: inherit;
  top: inherit;
  margin: 0;
  padding: 0;
  width: calc(95% - 30rem);
  height: 7.5rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  overflow-y: inherit;
  transition: all 0.5s ease;
  
  background-color: transparent;
}

.fixed header .main-menu { width: calc(95% - 37.5rem);}

header .main-menu li.close-menu{ display: none;}

header .main-menu > li{
  padding: 0;
  flex-grow: 1;
}



header .main-menu li a,
body.orderbusiness header .main-menu li a{ color: #333;}

header .main-menu .category{
  position: relative;
  padding: 0.8em 0.2em;
  width: 100%;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  font-weight: normal;
  text-align: center;  
  
  cursor: pointer;
}

header .main-menu .category:before,
header .main-menu a.category:before{ display: none;}

header .main-menu .category.active:before {
  position: absolute;
  top: inherit;
  bottom: -1rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-width: 1rem 1rem 0 1rem;
  border-color: #d1446a transparent transparent transparent;
  transform: rotate(0deg);
  content: '';
  z-index: 600;
}
body.orderbusiness header .main-menu .category.active:before { border-color: #f1bc0e transparent transparent transparent; }

header .main-menu .category:after {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  width: 100%;
  height: 0.3rem;
  background: #d1446a;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s;
  content: '';
}
body.orderbusiness header .main-menu .category:after {  background: #f1bc0e; }


header .main-menu .category:hover:after {  
  transform: scale(1, 1);
  transform-origin: left top;
}

.mega-menu {
  position: absolute;
  top: 7.5rem;
  left: -3rem;
  padding: 3em 2.5em 8em;
  width: calc(100vw + 6rem);
  height: 60vh;
  max-height: calc(100vw - 7.5rem);
  display: none;
  background: #eee;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 100; 
}

.mega-menu.mini { height: 30vh;}

.mega-menu .close-list{
  position: fixed;
  top: calc(60vh + 7.5rem);
  left: 0;
  right: 0;
  margin: auto;
  padding: 1em;
  width: 20em;
}

.mega-menu .close-list:before{
  position: fixed;
  top: calc(60vh + 0.5rem);
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
  width: 100vw;
  height: 7.5rem;
  display: block;
  background: rgb(238,238,238);
  background: linear-gradient(0deg, rgba(238,238,238,1) 20%, rgba(238,238,238,0) 85%); 
  z-index: 600; 
  content: "";
}

.mega-menu.mini .close-list{ top: calc(30vh + 7.5rem);}

.mega-menu.mini .close-list:before{ top: calc(30vh + 0.5rem);}

.mega-menu .close-list:after{
  position: absolute;
  bottom: 6rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 4.4rem;
  height: 2rem;
  display: block;
  background: url(/common/img/icon_arrow_red.svg) no-repeat;
  background-size: contain;
  content: "";
  animation: scroll-arrow 1.5s ease-in-out infinite;
  transform:rotate(90deg);
  z-index: 600;
}

.mega-menu-link:after { display: none;}

.mega-menu-link li{
  margin: 0 0 1em;
  padding: 0.2em 0;
  width: 24%;
  display: block;
  border-bottom: dotted 0.1rem #ccc;
}

.mega-menu-link li a{
  position: relative;
  margin: 0;
  padding: 0.4em 0 0.4em 4rem;
  display: block;
  font-size: 1.2rem;
  letter-spacing: inherit;
}

.mega-menu-link li.arrow a{ padding: 0.6em 0 0.6em 2.6rem;}

.mega-menu-link li a em{
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
}

.mega-menu-link li a:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  display: block;
  content: "";
}


header .sub-menu{
  position: relative;
  margin: 0;
  padding: 0;
  width: 30rem;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  transition: all 0.5s ease;
}

.fixed header .sub-menu{ width: 37.5rem;}



header .sub-menu li a,
body.orderbusiness header .sub-menu li a{
  position: relative;
  margin: 0;
  padding: 5rem 0 0;
  height: 7.5rem;
  display: block;
  background-color: #fbfbfb;  
  color: #333;
  font-size: 1.1rem;
  text-align: center;
}

header .sub-menu li a:before{
  position: absolute;
  top: 1.6rem;
  left: 0;
  right: 0;
  margin: auto;  
  width: 3rem;
  height: 3rem;
  display: block;
  content: "";
}

header .sub-menu li.mypage a:before{ background: url(/common/img/icon_head_user.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.login a:before{ background: url(/common/img/icon_head_login.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.favorite a:before{ background: url(/common/img/icon_head_fav.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.fax a:before{ background: url(/common/img/icon_head_pdf.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.cart a:before{ background: url(/common/img/icon_head_cart.svg) center center no-repeat; background-size: contain;}
header .sub-menu li.history a:before{ background: url(/common/img/icon_head_cart.svg) center center no-repeat; background-size: contain;}


header .sub-menu .number{
  position: absolute;
  top: 1.4rem;
  right: 0.5rem;
  margin: 0;
  padding: 0 0 0 0;
  width: 2.8rem;
  display: inline-block;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: -0.05em;
  text-align: center;
  z-index: 100;
}

header .sub-menu .number:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 0;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 2em;
  background-color: #bd2317;
  content: "";
  z-index: -1;
}



}/* End head 1000 */



/*入荷待ち商品*/
#PRODUCT #PRODETAIL.arrival h4.title{
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #999;
	font-size: 1.4em;
	font-weight: 300;
	line-height: 160%;
	letter-spacing: 0.05em;
}
#PRODUCT #PRODETAIL.arrival h5.title{
	margin: 0 0 10px 0 ;
	padding: 20px 0 10px 0;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0.05em;
	border-bottom: 1px dotted #666;
}
#PRODUCT #PRODETAIL.arrival p.txt{
	margin: 0;
	padding: 10px;
	font-size: 1em;
	font-weight: 300;
	line-height: 160%;
}
#PRODUCT #PRODETAIL.arrival p.caution{
	margin: 10px 10px 20px 10px;
	padding: 15px;
	border: 1px solid #ff0000;
	background-color: #ffffcc;
	color: #FF0000;
	font-size: 1em;
	font-weight: 300;
	line-height: 160%;
}
#PRODUCT #PRODETAIL.arrival p.caution strong{
	/*border-bottom: 1px solid #ff0000;*/
    border-bottom: none;
	color: #FF0000;
	font-weight: 600;
	line-height: 160%;
    display: block;
    font-size: 17px;
    padding-bottom: 0.5rem;
}

#PRODUCT #PRODETAIL.arrival table {border-collapse: collapse; margin-bottom: 1rem;}
#PRODUCT #PRODETAIL.arrival th,#PRODUCT #PRODETAIL.arrival td{ vertical-align: middle;  border: 1px solid #333; padding: 0.5rem;}

#PRODUCT #PRODETAIL.arrival p.proIMG{ width: 220px; }

/*.arrival-body {padding: 5rem 10rem;}

@media only screen and (min-width:1px) and (max-width:480px){
  .arrival-body {padding: 3rem;}
}*/

.arrival-body .arrival table th .much,
.arrival-body .arrival table th .much2{ font-weight: bold; }

@media screen and (min-width:1px) and (max-width:899px) {
  /*.arrival-body {padding: 2rem;}*/

.arrival-body .arrival table               { width: 100%; border:1px solid #333 !important; background: #eee; }
.arrival-body .arrival table tr            { display: inherit; float: left; height: auto; max-height:none; }
.arrival-body .arrival table tr td, 
.arrival-body .arrival table tr th        { border-left: none; display: inherit; height: auto; max-height:none; }
.arrival-body .arrival table .t_body td{ border-width:1px  0 0 1px !important; } 
.arrival-body .arrival table .last td    { border-width:1px  0 0 0 !important; } 
.arrival-body .arrival table tr th        { border-width:1px  0 0 0 !important; } 
.arrival-body .arrival table .t_body td:first-child,
.arrival-body .arrival table tr th:first-child{ border-top-width: 0 !important; }
.arrival-body .arrival table thead      { display: block; float: left; width: 12rem; }
.arrival-body .arrival table thead tr   { width: 100%; }
.arrival-body .arrival table .t_body    { display: block; float: left; width: calc(100% - 12rem); background: #FFF; }
.arrival-body .arrival table tbody tr   { width: 100%; }
.arrival-body .arrival table .last         { width: calc(100% - 0.1rem) ; background: #FFF; }
.arrival-body .arrival table tr td + td { border-left: none; }


}


/* ===================================================================
 FOOTER
=================================================================== */


footer{
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f5f5f5;
}


footer .search-block{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 5.5rem;
  display: block;
  background-color: #d1446a;
  z-index: 1;
}
body.orderbusiness footer .search-block{ background-color: #f1bc0e; }

footer .foot-search-inner{
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 64rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

footer .foot-search-inner .foot-search-caption{
  margin: 0;
  padding: 0 1em 0 0;
  display: block;
  color: #fff;
  font-size: 1.5rem;
}

footer .foot-search-inner form{
  margin: 0;
  padding: 0 0.5em 0 1em;
  height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-grow: 1;
  overflow: hidden;
  border-radius: 2em;
  font-size: 1.6rem;
  background-color: #fff;
}

footer .foot-search-inner .searchbox{
  margin: 0;
  padding: 0;
  width: calc(100% - 5rem);
  height: 3.6rem;
  display: block;
  border: none;
}

footer .foot-search-inner .searcsubmit{
  position: relative;
  margin: 0;
  padding: 0;
  width: 4rem;
  height: 3.8rem;
  display: block;
  overflow: hidden;
  border: none;
  background: url(/common/img/icon_search.svg) center center no-repeat;
  background-size: 60%;
  line-height: 300;
  cursor: pointer;
  z-index: 1;
}
body.orderbusiness footer .foot-search-inner .searcsubmit{ background: url(/common/img/icon_search_order.svg) center center no-repeat; background-size: 60%; }

footer .foot-products-button {
  margin: auto;
  padding: 1.5em 1em;
  width: 100%;
  display: block;
  font-size: 1.8rem;
  text-align: center;
  cursor: pointer;
}

footer .foot-products-button em{
  position: relative;
  padding: 0 0 0 4rem;
}

footer .foot-products-button em:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  border: 0.2rem solid #d1446a;
  content: "";
}


footer .foot-products-button em:after{
  position: absolute;
  top: 0;
  left: 0.4rem;
  bottom: 0;
  margin: auto;
  width: 2rem;
  height: 2rem;
  display: block;
  background: url(/common/img/icon_plus.svg) center center no-repeat;
  background-size: contain;
  transition: all 0.2s linear;
  transform: rotate(0deg);
  content: "";
}

footer .foot-products-button.active em:after{
  background: url(/common/img/icon_minus.svg) center center no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}

footer .foot-products {
  margin: auto;
  padding: 0;
  width: 100%;
  display: block;  
  background-color: #fbfbfb;
}

footer .hide-menu { display: none;}

footer .foot-products-link {
  position: relative;
  margin: auto;
  padding: 1em 0 2em;
  width: 96%;
  max-width: 128rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 0.1rem dotted #999;
}

footer .foot-products-link li{
  margin: 0.5em 0 0.5em;
  padding: 0;
  width: 48.5%;
  display: block;
  border-bottom: dotted 0.1rem #ccc;
}

footer .foot-products-link li a{
  position: relative;
  margin: 0;
  padding: 0.4em 0 0.4em 3.6rem;
  display: block;
  font-size: 1.4rem;
  letter-spacing: inherit;
}

footer .foot-products-link li a:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 2.6rem;
  height: 2.6rem;
  display: block;
  content: "";
}

footer .foot-inner{
  margin: auto;
  padding: 3em 0 1em;
  width: 90%;
  display: block;
}

footer .foot-inner .about-kinokuni,
footer .foot-inner .about-shop{
  margin: auto;
  padding: 0;
  width: 100%;
}


footer .logo-split{
  margin: auto;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer .logo-split .logo{
  margin: 0;
  padding: 0;
  width: 48%;
}

footer .logo-split ul{
  margin: 0;
  padding: 0;
  width: 48%;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}

footer .logo-split ul li{
  margin: 0.25rem 0;
  padding: 0;
  width: 100%;
  display: block;
}

footer .logo-split ul li a{
  margin: 0;
  padding: 0.3em;
  width: 100%;
  display: block;
  border-radius: 0.4rem;
  background-color: #d1446a;
  color: #fff;
  text-align: center;
}
body.orderbusiness footer .logo-split ul li a{ background-color: #f1bc0e; color: #fff; }


footer address{
  margin: 0;
  padding: 1em 0;
  display: block;
}

footer h2{
  margin: 0;
  padding: 0.5em 0;
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
}

footer p{
  margin: 0;
  padding: 0 0 1em;
  display: block;
  font-size: 1.6rem;
}

footer .info-tel{
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

footer .info-tel dt{
  margin: 0;
  padding: 0;
  width: 2.8rem;
  height: 2.8rem;
  display: block;
  overflow: hidden;
  line-height: 300;  
}

footer .info-tel .icon-tel{ background: url(/common/img/icon_phone.svg) center center no-repeat; background-size: contain;} 
footer .info-tel .icon-fax{ background: url(/common/img/icon_fax.svg) center center no-repeat; background-size: contain;} 

body.orderbusiness footer .info-tel .icon-tel{ background: url(/common/img/icon_phone_orange.svg) center center no-repeat; background-size: contain;} 
body.orderbusiness footer .info-tel .icon-fax{ background: url(/common/img/icon_fax_orange.svg) center center no-repeat; background-size: contain;} 

footer .info-tel dd{
  margin: 0;
  padding: 0 1.5rem 0 1rem;
  display: block;
  color: #d1446a;
  font-size: 1.8rem;
} 
body.orderbusiness footer .info-tel dd{ color: #f15e0e; }

footer .info-tel dd .tel{ font-size: 2rem; font-weight: bold;} 

footer .info-time{
  margin: 0;
  padding: 1em 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

footer .info-time dt{
  margin: 0;
  padding: 0.4em 0;
  width: 10rem;
  display: block;
  border-radius: 2em;
  background-color: #999;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;  
}

footer .info-time dd{
  margin: 0;
  padding: 0.3em 0;
  width: calc(100% - 11rem);
  display: block;
}

footer .sns-links{
  margin: 0;
  padding: 0 0 1em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

footer .sns-links li{
  margin: 0 1em 0 0;
  padding: 0;
  width: 4rem;
  height: 4rem;
}

footer .foot-logo{
  margin: 0;
  padding: 0 0 1em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.4rem;
}

footer .foot-logo .kinokuni{
  margin: 0 1rem 0 0;
  padding: 0;
  width: 12.6rem;
}

footer .foot-logo .runmax{
  margin: 0 1rem 0 0;
  padding: 0;
  width: 7rem;
}

footer .foot-logo p{
  position: relative;
  margin: 0;
  padding: 0 0 0 1.3em;
  display: block;
}

footer .foot-logo p:before{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  content: "\203B";
}

footer .foot-links{
  margin: 0;
  padding: 1em 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

footer .foot-links li{
  margin: 0 0 0.5em;
  padding: 0;
  width: 48%;
  display: block;
}

footer .foot-links a{
  position: relative;
  margin: 0;
  padding: 0.3em 0 0.3em 1.5rem;
  display: block;
}

footer .foot-links a:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: url(/common/img/icon_arrow_red.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
body.orderbusiness footer .foot-links a:before{ background: url(/common/img/icon_arrow_orange.svg) center center no-repeat; background-size: contain; }


footer .foot-banner{
  margin: 1.5em 0 0;
  padding: 2em 0 0;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 0.1rem dotted #999;
}

footer .foot-banner li{
  margin: 0;
  padding: 0 1rem;
  width: 30%;
  max-width: 34rem;
  display: block;
}


footer .copy{
  margin: 0;
  padding: 1.5em 1em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: inherit;
  text-align: center;
}





/* FOOT PRINT */

.foot-print{
  position: relative;
  clear: both;
  margin: 0 auto 0;
  padding: 0;
  width: 100%;
  max-width: 104rem;
  display: block;
  overflow: hidden;
  z-index: 1;
}

.foot-print ul{
  position: relative;
  margin: auto;
  padding: 1em 0;
  width: 100%;
  display: flex;
  z-index: 1;
}

.foot-print:before,
.foot-print:after {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 1.5rem;
  height: 4em;
  content: "";
}

.foot-print:before { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);}
.foot-print:after { left: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);}

.foot-print ul {
  overflow-x: scroll;
  -ms-overflow-style: none;    /* IE, Edge */
  scrollbar-width: none;       /* Firefox */
}

.foot-print ul::-webkit-scrollbar {  /* Chrome, Safari */
  display:none;
}

.foot-print ul li {
  position: relative;
  margin: 0 0.8rem;
  font-size: 1.2rem;
  line-height: 1.4;
  letter-spacing: normal;
  white-space: nowrap;
}

.foot-print ul li:after{
  position: absolute;
  top: 50%;
  right: -0.8em;
  margin-top: -0.4rem;
  width: 0.6rem;
  height: 0.6rem;
  border: 0;
  border-top: solid 0.1rem #999;
  border-right: solid 0.1rem #999;
  transform: rotate(45deg);
  content: "";
  pointer-events: none;
}

.foot-print ul li:last-child:after{ border: none;}


/* PAGE TOP */

.page-top{
  position: fixed;
  right: 1rem;
  left: auto;
  width: 4.4rem;
  height: 4.4rem;
  display: block;
  background-color:#d1446a;
  border-radius: 50%;
  overflow:hidden;
  outline:none;
  z-index: 800;
}

body.orderbusiness .page-top{ background-color:#f1bc0e; }


.page-top a span{
  position: relative;
  margin: auto;
  padding: 4.4rem 0 0;
  width: 4.4rem;
  height: 0;
  display:block;
  overflow: hidden;
  line-height: 300;
}

.page-top a span:before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: block;
  background: url(/common/img/icon_arrow_white.svg) center center no-repeat;
  background-size: contain;
  transform: rotate( -90deg );
  content: "";
}




@media screen and (max-width: 540px) {

footer .foot-products-link li{ width: 100%;}

footer .foot-inner{ padding: 2em 0 1em;}

footer .logo-split{
  margin: auto;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

footer .logo-split .logo{
  margin: 0 0 1em;
  padding: 0;
  width: 100%;
  text-align: center;
}

footer .logo-split .logo img{
  margin: auto;
  width: 70%;
}

footer .logo-split ul{
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

footer .logo-split ul li{
  margin: 0.25rem 0;
  padding: 0;
  width: 48%;
  display: block;
}

footer .info-tel dt{ margin: 0 0 0.5em;} 

footer .info-tel dd{
  margin: 0 0 0.5em;
  padding: 0 1.5rem 0 1rem;
  width: calc(100% - 2.8rem);
} 


footer .info-time dd{
  margin: 0;
  padding: 0.5em 0 1em;
  width: 100%;
  display: block;
}

footer .foot-links li{
  margin: 0 0 0.5em;
  padding: 0;
  width: 100%;
  display: block;
}


footer .foot-banner li{
  margin: auto;
  padding: 0 0 1em;
  width: 100%;
  max-width: 34rem;
  display: block;
}


}/* End max 540 */


@media screen and (max-width:600px) {


footer .search-block{ height: 9rem;}
footer .foot-search-inner{ height: 9rem;}
footer .foot-search-inner .foot-search-caption{
  padding: 0.5em 0 0;
  width: 100%;
  text-align: center;
}

footer .foot-products-link { width: 94%;}

}/* End max 600 */




@media screen and (min-width: 769px), print {

footer .foot-products-link:after{
  width: 32%;
  display: block;
  content: "";
}

footer .foot-products-link li{ width: 32%;}


footer .foot-inner{
  margin: auto;
  padding: 3em 0 1em;
  width: 96%;
  max-width: 128rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

footer .foot-inner .about-kinokuni,
footer .foot-inner .about-shop{
  margin: 0;
  padding: 0;
  width: 48.5%;
}


footer .copy{
  margin: 0;
  padding: 0 1em;
  width: 100%;
  height: 6rem;
}


.foot-print ul li { font-size: 1.4rem;}

/* PAGE TOP TAB */

.page-top{
  position: fixed;
  right: 2rem;
  width: 5rem;
  height: 5rem;
}

.page-top a span{
  padding: 5rem 0 0;
  width: 5rem;
}

.page-top a span:before{
  width: 3rem;
  height: 3rem;
}

}/* 769 */



@media screen and (min-width: 1000px) {

footer .foot-products-button { display: none;}
footer .hide-menu { display: block !important;}
footer .foot-products-link {
  padding: 2em 0 2em;
  border-top: none;
}
footer .foot-products-link:after{ display: none;}
footer .foot-products-link li{ width: 23.5%;}

footer .foot-links li{
  margin: 0 0 0.5em;
  padding: 0;
  width: 48%;
  display: block;
}

}/* End min 1000 */



/* ===================================================================
 category title
=================================================================== */


.category-title{
  position: relative;
  margin: 0;
  padding: 2em 0;
  width: 100%;
  display: block;
  background:#eaeceb; 
}

.mypage .category-title{ background: url(/img/mypage/title_bg.jpg) right center no-repeat #eaeceb; background-size: auto 100%;}
.cart .category-title  { background: url(/img/title_bg_cart.jpg) right center no-repeat #eaeceb; background-size: auto 100%;}

.category-title:after{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(234,236,235,0.85);
  content: "";
  transition: all 0.5s ease;
  opacity: 0;
}

.category-title em{
  position: relative;
  margin: auto;
  padding: 0 0;
  width: 96%;
  max-width: 104rem;
  display: block;
  font-size: 3rem;
  text-shadow: 0.2rem 0.2rem 0 #eaeceb, 0.2rem 0.2rem 0 #eaeceb, 0.2rem 0.2rem 0 #eaeceb, 0.2rem 0.2rem 0 #eaeceb, 0 0 0.3rem #eaeceb, 0 0 0.3rem #eaeceb, 0 0 0.3rem #eaeceb, 0 0 0.3rem #eaeceb;
  z-index: 100;
}

.category-title em .en{
  margin: 0;
  padding: 0;
  display: block;  
  font-size: 1.4rem;
  letter-spacing: -0.04em;
  line-height: 1.4;
}


@media screen and (max-width: 600px) {

.category-title em{
  width: 94%;
  font-size: 2.8rem;
  letter-spacing: inherit;
}

.category-title em .en{ font-size: 1.2rem;}

}/* max-600 */

@media screen and (max-width: 769px) {

.category-title:after{ opacity: 1;}

}/* min-769 */


/* ===================================================================
 contents
=================================================================== */

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



.contents-title{
  position: relative;
  margin: 0 0 1em;
  padding: 0.4em 0 0.4em 6.5rem;
  background: rgb(238,238,238);
  background: linear-gradient(90deg, rgba(238,238,238,0) 25%, rgba(238,238,238,1) 100%); 
  font-size: 2.6rem;
  font-weight: bold;
}

.contents-title:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 5.5rem;
  height: 5.5rem;
  display: block;
  border-radius: 2em;
  content: "";
}

.contents-title.registration:before{
  background: url(/common/img/icon_registration.svg) center center no-repeat #d1446a;
  background-size: 50% auto;
}
.contents-title.orderhistory:before{
  background: url(/common/img/icon_orderhistory.svg) center center no-repeat #d1446a;
  background-size: 50% auto;
}

body.orderbusiness .contents-title.registration:before{
  background: url(/common/img/icon_registration.svg) center center no-repeat #f1bc0e;
  background-size: 50% auto;
}
body.orderbusiness .contents-title.orderhistory:before{
  background: url(/common/img/icon_orderhistory.svg) center center no-repeat #f1bc0e;
  background-size: 50% auto;
}



.contents{
  position: relative;
  margin: auto;
  padding: 1em 0 2em;
  width: 96%;
  max-width: 104rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contents .contents-body{
  padding: 0;
  width: 100%;
}

.side-menu-on .contents .contents-body{ width: 100%;}

.side-menu-on .contents .side-menu{ display: none;}



@media screen and (max-width: 600px) {


.contents-title{
  padding: 0.4em 0 0.4em 5.5rem;
  font-size: 2.2rem;
}

.contents-title:before{
  width: 4.4rem;
  height: 4.4rem;
  display: block;
}

.contents{ width: 94%;}

}/* max-600 */


@media screen and (min-width: 1000px) {

.side-menu-on .contents .contents-body{
  position: relative;
  margin: 0;
  padding: 0;
  width: calc(100% - 26rem);
}

.side-menu-on .contents .side-menu{
  position: relative;
  margin: 0;
  padding: 0;
  width: 23rem;
  display: block;
  order: -1;
  
  background-color: #eee;
}

.side-menu nav .mypage a{
  position: relative;
  margin: 0;
  padding: 0.5em 0.5em 0.5em 3.4rem;
  display: block;  
  background-color: #d1446a;
  color: #fff;
}
body.orderbusiness .side-menu nav .mypage a { background-color: #f1bc0e; }

.side-menu nav .mypage a:before{
  position: absolute;
  top: 0;
  left: 0.5rem;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  background: url(/common/img/icon_head_user_white.svg) center center no-repeat;
  background-size: contain;
  content: "";
}


.side-menu nav .mypage a:after{
  position: absolute;
  top: 0;
  right: 0.5rem;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: block;
  background: url(/common/img/icon_arrow_white.svg) center center no-repeat;
  background-size: contain;
  content: "";
}

.side-menu nav ul{
  position: relative;
  margin: 0.5rem;
  padding: 1rem 0.5rem;
  display: block;  
  background-color: #fff;
}

.side-menu nav ul a{
  position: relative;
  margin: 0;
  padding: 0.4em 0 0.4em 2.4rem;
  display: block;
}

.side-menu nav .arrow a:after{
  position: absolute;
  top: 0;
  left: 0.5rem;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: url(/common/img/icon_arrow_red.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
body.orderbusiness .side-menu nav .arrow a:after { background: url(/common/img/icon_arrow_orange.svg) center center no-repeat; }

.side-menu nav ul li.history a,
.side-menu nav ul li.logout a,
.side-menu nav ul li.favorite a{ padding: 0.5em 0 0.5em 3.2rem;}


.side-menu nav ul li.history a:before,
.side-menu nav ul li.logout a:before,
.side-menu nav ul li.favorite a:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  content: "";
}

.side-menu nav ul li.history a:before{ background: url(/common/img/icon_head_cart.svg) center center no-repeat; background-size: contain;}
.side-menu nav ul li.logout a:before{ background: url(/common/img/icon_head_login.svg) center center no-repeat; background-size: contain;}
.side-menu nav ul li.favorite a:before{ background: url(/common/img/icon_head_fav.svg) center center no-repeat; background-size: contain;}


}/* min-1000 */





/* section */

.contents-section {
  position: relative;
  margin: 0 auto 3em;
  padding: 0;
  width: 100%;
}
/*
.contents-section.anchor {
  position: relative;
  margin: -10rem auto 3em;
  padding: 10rem 0 0 0;
}
*/

.contents-section.anchor:before {
    display: block;
    height: 10rem;
    margin-top: -10rem;
    content: "";
}



.section-inner{
  position: relative;
  margin: auto;
  padding: 0;
  width: 100%;
  z-index: 100;
}



/* section-title */

.section-title {
  position: relative;
  margin: 1em 0 1em 0;
  padding: 0 0 0.3em 0;
  display: block;
  font-size: 2.2rem;
  text-align: left;
}

.section-title:before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  display: block;
  background-color: #ccc;
  content: '';
  z-index: 1;
}

.section-title:after {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 35%;
  height: 0.2rem;
  display: block;
  background-color: #d1446a;
  content: '';
  z-index: 10;
}
body.orderbusiness .section-title:after { background-color: #f1bc0e; }

.section-title span{ font-size: 1.8rem;}


.section-sub-title {
  position: relative;
  margin: 0 0 1.5em 0;
  padding: 0;
  display: block;
  color: #213c84;
  font-size: 2rem;
  text-align: center;
}



@media screen and (min-width: 780px) {

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

.contents-section.anchor {
  margin: -16rem auto 3em;
  padding: 16rem 0 0 0;
}




/* section TAB */

.section-title { font-size: 2.6rem;}
.section-title span{ font-size: 2rem;}

.section-sub-title { font-size: 2.6rem;}

}/* 780 */



.contents-intro .lead-txt,
.section-inner .lead-txt{
  margin: 0;
  padding: 0 0 1.5em 0;
  font-size: 1.8rem;
  line-height: 1.6;
}

.section-inner .txt {
  padding: 0 0 1.5em 0;
  font-size: 1.6rem;
  line-height: 1.6;
}

.section-inner .list-ul li{
  margin: 0 0 0 2em;
  padding: 0 0 0.5em 0;
  list-style-type: disc;
  font-size: 1.6rem;
  line-height: 1.6;
}

.section-inner .list-ol li{
  margin: 0 0 0 2em;
  padding: 0 0 0.5em 0;
  list-style-type: decimal;
  font-size: 1.6rem;
  line-height: 1.6;
}


/* notice */

.notice-txt,
.notice-list li{
  position: relative;
  margin: 0 0 1em 1.5em;
  padding: 0;
  list-style: none;
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: left;
}

.notice-list li{ margin: 0 0 0.5em 1.5em;}

.notice-txt:before,
.notice-list li:before{
  position: absolute;
  top: 0;
  left: -1.5em;
  padding: 0;
  color: #f30;
  font-size: 1.6rem;
  content: "※";
}

.caution-txt,
.notice-txt.caution,
.notice-list.caution li{ color: #f30;}

/* PDF LIST */

.pdf-list li{
  position: relative;
  margin: 0 0 1em 0;
  padding: 0 0 0 2.5rem;
  list-style: none;
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: left;
}

.pdf-list li:before {
  position: absolute;
  top: 0;
  left: -0.1rem;
  margin: auto;
  width: 2rem;
  height: 2rem;
  display: block;
  background: url(/common/img/icon_pdf.svg) center center no-repeat;
  background-size: contain;
  content: "";
}



/**/
article .section-inner img.lazyload{
  transition: ease-in-out 1.5s;
  transform: scale(0.5);
  opacity: 0;
}

article .section-inner img.lazyloaded{
  transform: scale(1);
  opacity: 1;
}


/* MOVIE */

.movie-block {
  position: relative;
  padding-top: 56.25%;
  width: 100%;
  height: 0;
  overflow: hidden;
  box-shadow: 0 1.5rem 1rem -1rem rgba(0,0,0,0.6);
}

.movie-block .player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popup-iframe{ position: relative; display: block;}

.popup-iframe:before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 8rem;
  height: 8rem;
  background: url(/common/img/youtube.svg) center center no-repeat;
  content: "";
  z-index: 1;
}





/* LINK ARROW */

.arrow,
.pdf{position: relative;}

.arrow-s{ padding-left: 1.6rem;}
.arrow-m{ padding-left: 1.8rem;}
.arrow-l{ padding-left: 2rem;}

.pdf-s{ padding-left: 2rem;}
.pdf-m{ padding-left: 2.4rem;}
.pdf-l{ padding-left: 2.8rem;}

.arrow-s:before,
.arrow-m:before,
.arrow-l:before,
.pdf-s:before,
.pdf-m:before,
.pdf-l:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  display: block;
  content: "";
}

.link-title{display: block;}

.arrow-s:before {
  width: 1.2rem;
  height: 1.2rem;
  background: url(/common/img/icon_arrow.svg) center center no-repeat;
  background-size: contain;
}

.arrow-m:before {
  width: 1.4rem;
  height: 1.4rem;
  background: url(/common/img/icon_arrow.svg) center center no-repeat;
  background-size: contain;
}

.arrow-l:before {
  width: 1.6rem;
  height: 1.6rem;
  background: url(/common/img/icon_arrow.svg) center center no-repeat;
  background-size: contain;
}

.arrow-white:before {
  background: url(/common/img/icon_arrow_w.svg) center center no-repeat;
  background-size: contain;
}


.pdf-s:before {
  width: 1.6rem;
  height: 1.6rem;
  background: url(/common/img/icon_pdf.svg) center center no-repeat;
  background-size: contain;
}

.pdf-m:before {
  width: 2rem;
  height: 2rem;
  background: url(/common/img/icon_pdf.svg) center center no-repeat;
  background-size: contain;
}

.pdf-l:before {
  width: 2.4rem;
  height: 2.4rem;
  background: url(/common/img/icon_pdf.svg) center center no-repeat;
  background-size: contain;
}




.next-arrow-bottom{ margin-bottom: 5em !important; position: relative;}

.next-arrow-bottom:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4em;
  margin: auto;
  width: 4rem;
  height: 4rem;
  display: block;
  background: url(/common/img/icon_arrow.svg) center center no-repeat;
  background-size: contain;
  transform: rotate( 90deg );
  content: "";
}

.biz_member_note   { background: #F3F3F3; border: 1px solid #ccc; padding: 1em 1.5em; }
.biz_member_note li{}
.biz_member_note li a{ position: relative; margin: 0; padding: 0.3em 0 0.3em 1.5rem; display: block; }
.biz_member_note li a:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    padding: 0;
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    background: url(/common/img/icon_arrow_red.svg) center center no-repeat;
    background-size: contain;
    content: "";
}

/******************************************************************** #ANNOUNCE 
*/
#ANNOUNCE    { width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; z-index: 1000; transition: .4s ease; }
#ANNOUNCE.ok{ opacity: 0;  visibility: hidden;  z-index: -1; }

#ANNOUNCE .popup-inner{ max-width: 60rem; width:90%; padding: 20px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color:#fff; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0.8rem;}
#ANNOUNCE .popup-inner::after{ content: ""; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; height: 8px; box-shadow: 0 40px 15px rgba(0, 0, 0, .5); background-color: transparent; border-radius: 80px / 4px; }

#ANNOUNCE .title,
#ANNOUNCE2 .title             { font-size: 2.5rem; margin: 1rem 0 0; /*font-weight: bold;*/ text-align: center; padding: 1rem; color: #d1446a; }
#ANNOUNCE .txt                 { text-align: center; }
#ANNOUNCE .radiobox         { display: flex; justify-content: space-around; text-align: center; padding: 1rem; width: 100%; max-width: 50rem; background: #f1f1f1; border-radius: 0.4em; }
#ANNOUNCE .radiobox li      { display: inline-flex; align-items: center; }
#ANNOUNCE .radiobox label { width: 11rem ; line-height: 1.8; padding-top: 0.2rem; }
#ANNOUNCE .radiobox input { width: 2.3rem; height: 2.3rem; }
#ANNOUNCE .button            { text-align: center; margin: 1.5rem 0 ; }
#ANNOUNCE .button button { border-radius: 0.4em; background: #d1446a; border: none; color: #FFF; width: 25rem; padding: 0.8rem; font-size: 1.7rem; cursor: pointer; }


#ANNOUNCE2.modal-container           { width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; z-index: 1000; transition: .4s ease; overflow: auto; opacity: 0; visibility: hidden; box-sizing: border-box; }
#ANNOUNCE2.modal-container:before{ content: ""; display: inline-block; vertical-align: middle; height: 100%; }
#ANNOUNCE2.modal-container.active { opacity: 1; visibility: visible; }
#ANNOUNCE2 .modal-body                { max-width: 60rem; width:90%; padding: 20px 40px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color:#fff; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0.8rem ;}
#ANNOUNCE2 .modal-body::after       { content: ""; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; height: 8px; box-shadow: 0 40px 15px rgba(0, 0, 0, .5); background-color: transparent; border-radius: 80px / 4px; }
#ANNOUNCE2 ul.list-ul    { position: relative; margin: auto; padding: 0 0 1em 0; text-align: left; overflow: hidden;}
#ANNOUNCE2 ul.list-ul  li { list-style: disc; position: relative; margin: 0 0 0 1.5em; padding: 0 0 0.5em 0; }
#ANNOUNCE2 ul.link-button{ width: 80%; max-width: 45rem; align-items: center; }
#ANNOUNCE2 ul.link-button li{ width: 49%; margin: 0 auto 0.5em; } 
#ANNOUNCE2 ul.link-button button{ border-radius: 0.4em; border: none; color: #FFF; width: 100%; cursor: pointer; }
#ANNOUNCE2 ul.link-button button.btnOK        { background: #d1446a;  padding: 0.8rem; font-size: 1.7rem; }
#ANNOUNCE2 ul.link-button button.btnCANCEL{ background: #999;  padding: 0.5rem 0.8rem; font-size: 1.5rem; }
    
@media screen and (max-width: 780px) {
#ANNOUNCE2 ul.link-button    { display: block; }
#ANNOUNCE2 ul.link-button li { width: auto; max-width: 30rem; }
}

/******************************************************************** 
*/
.mt-1{ margin-top: 1em;}
.mt-2{ margin-top: 2em;}
.mt-3{ margin-top: 3em;}
.mt-4{ margin-top: 4em;}

.mb-1{ margin-bottom: 1em;}
.mb-2{ margin-bottom: 2em;}
.mb-3{ margin-bottom: 3em;}
.mb-4{ margin-bottom: 4em;}

.ml-1{ margin-left: 1em;}
.ml-2{ margin-left: 2em;}
.ml-3{ margin-left: 3em;}
.ml-4{ margin-left: 4em;}

.mr-1{ margin-right: 1em;}
.mr-2{ margin-right: 2em;}
.mr-3{ margin-right: 3em;}
.mr-4{ margin-right: 4em;}

.pt-1{ padding-top: 1em;}
.pt-2{ padding-top: 2em;}
.pt-3{ padding-top: 3em;}
.pt-4{ padding-top: 4em;}

.pb-1{ padding-bottom: 1em;}
.pb-2{ padding-bottom: 2em;}
.pb-3{ padding-bottom: 3em;}
.pb-4{ padding-bottom: 4em;}

.pl-1{ padding-left: 1em;}
.pl-2{ padding-left: 2em;}
.pl-3{ padding-left: 3em;}
.pl-4{ padding-left: 4em;}

.pr-1{ padding-right: 1em;}
.pr-2{ padding-right: 2em;}
.pr-3{ padding-right: 3em;}
.pr-4{ padding-right: 4em;}

.txt_red{ color: #CC0000; }

.button.green  a{ background: #289C47; }

/* IE */
@media all and (-ms-high-contrast: none) {



}/* End IE */