@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700");
@font-face { font-family: 'Times-Sans-Serif'; src: url("../font/Times-Sans-Serif.ttf.woff") format("woff"), url("../font/Times-Sans-Serif.ttf.svg#Times-Sans-Serif") format("svg"), url("../font/Times-Sans-Serif.ttf.eot"), url("../font/Times-Sans-Serif.eot?#iefix") format("embedded-opentype"); font-weight: normal; font-style: normal; }
/* base */
html { font-size: 75%; }
@media (max-width: 768px) { html { font-size: 100%; } }

body { background-color: #fff; }

* { color: #000; font-size: 12px; font: normal 300 1rem/2 "HelveticaNeue", "Helvetica", sans-serif; }

::selection, ::-moz-selection { background: #d0112b; }

a { color: #d0112b; text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { outline: none; }

img { max-width: 100%; height: auto; }

table { width: 100%; }

/* usual */
.grayscale { -webkit-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); filter: grayscale(100%); }

.bgcover { background-position: center; background-repeat: no-repeat; background-size: cover; }

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

.ratio { position: relative; padding-bottom: 100%; padding-top: 0; height: 0; overflow: hidden; }
.ratio .ratioin, .ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; }
.ratio._32 { padding-bottom: 66.666666666667%; }
.ratio._169 { padding-bottom: 56.25%; }
.ratio._34 { padding-bottom: 133.3333333333333%; }

.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }

@media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } }
@media (min-width: 992px) { .col-md-15 { width: 20%; float: left; -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } }
@media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } }
@media (max-width: 1200px) { .hidden-lg { display: none !important; } }
@media (max-width: 992px) { .hidden-md { display: none !important; } }
@media (max-width: 768px) { .hidden-sm { display: none !important; } }
@media (max-width: 576px) { .hidden-xs { display: none !important; } }
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none; }

@media (max-width: 576px) { .visible-xs { display: block; } }
@media (max-width: 768px) { .visible-sm { display: block; } }
@media (max-width: 992px) { .visible-md { display: block; } }
@media (max-width: 1200px) { .visible-lg { display: block; } }
._objectfit img { width: 100%; /*height: 100%;*/ object-fit: cover; object-position: center; font-family: "object-fit: cover; object-position: center;"; }
._objectfit._contain img { object-fit: contain; object-position: center; font-family: "object-fit: contain; object-position: center;"; }
._objectfit.ratio img { position: absolute; }

/* fixed */
.fixed-content { position: relative; }
.fixed-content .fixed-base { position: relative; }
.fixed-content .fixed-parent { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
.fixed-content .fixed-parent .fixed-child { position: absolute; top: 0; width: 100%; }
.fixed-content .fixed-parent .fixed-child .fixed-element { position: relative; }

/* effects */
.opacity { opacity: 1; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.opacity:hover { opacity: 0.65; }

/* header */
#header { position: fixed; top: 0; left: 0; z-index: 99; width: 100%; background-color: #fff; border-bottom: 1px solid #efefef; opacity: 1; }
#header #navi { padding: 20px 0; }
@media (max-width: 768px) { #header #navi { padding: 10px 0; } }
#header #navi ul { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 -10px; }
@media (max-width: 768px) { #header #navi ul { display: block; } }
#header #navi ul li { padding: 0 10px; }
#header #navi ul li a { display: block; font-family: "Quicksand", sans-serif; font-size: 20px; font-weight: 300; color: #000; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
#header #navi ul li a:hover { color: #d0112b; }
#header #navi ul li a img { display: block; }
#header #navi ul li.left { margin-right: auto; }
#header #navi ul li.home { padding-right: 30px; }
#header #navi ul li.home img { width: 110px; height: auto; }
@media (max-width: 768px) { #header #navi ul li li { display: none; }
  #header #navi ul li li.home { display: block; width: 100%; text-align: center; padding: 0 10px; }
  #header #navi ul li li.home img { margin: 0 auto; width: auto; height: 20px; } }
#header #navi ul.sns { margin: 0 -7.5px; }
#header #navi ul.sns li { padding: 0 7.5px; }
#header #navi ul.sns li a img { width: 30px; height: 30px; }

/* footer */
#footer { padding: 55px 0 50px; background-color: #ebebeb; background-position: bottom -50px center; background-repeat: no-repeat; background-image: url(../img/footer_bg.png); display: inline-block; text-align: center; }
@media (max-width: 768px) { #footer { padding: 35px 0 30px; background-size: 105% auto; background-position: bottom -15px center; } }
#footer * { color: #000; }
#footer .vis img { display: inline-block; width: 120px; height: auto; }
@media (max-width: 768px) { #footer .vis img { width: 75px; } }
#footer .navi { margin-top: 45px; }
#footer .navi ul { text-align: center; margin: 0 -15px; }
#footer .navi ul li { display: inline-block; padding: 0 15px; }
#footer .navi ul li a { display: block; color: #000; font-size: 11px; font-weight: 300; line-height: 100%; }
@media (max-width: 768px) { #footer .navi { margin-top: 15px; }
  #footer .navi ul { margin: 0 -7.5px; }
  #footer .navi ul li { padding: 0 7.5px; } }
#footer .sns { margin-top: 45px; }
#footer .sns ul { text-align: center; margin: 0 -10px; }
#footer .sns ul li { display: inline-block; padding: 0 10px; }
#footer .sns ul li a { display: block; }
#footer .sns ul li a img { width: 30px; height: 30px; }
@media (max-width: 768px) { #footer .sns { margin-top: 15px; }
  #footer .sns ul { margin: 0 -7.5px; }
  #footer .sns ul li { padding: 0 7.5px; }
  #footer .sns ul li a img { width: 25px; height: 25px; } }
#footer .copyright { margin: 50px auto 0; border-top: 1px solid #000; padding-top: 30px; width: 600px; }
#footer .copyright .jun { width: 170px; height: auto; display: inline-block; }
#footer .copyright p { font-size: 11px; }
@media (max-width: 768px) { #footer .copyright { margin: 25px auto 0; padding-top: 15px; width: 100%; }
  #footer .copyright .jun { width: 125px; } }

#fixedcontent .onlineshop { margin-top: -36.5px; z-index: 100; position: fixed; right: 10px; top: 50%; }
#fixedcontent .onlineshop a { display: block; width: 52px; height: 73px; background-position: center; background-repeat: no-repeat; background-image: url(../img/fixed_onlineshop.png); background-size: contain; }
#fixedcontent .onlineshop a img { display: none; }
@media (max-width: 768px) { #fixedcontent .onlineshop { margin-top: 0; top: 6px; right: 10px; }
  #fixedcontent .onlineshop a { width: 44px; height: 28px; background-image: url(../img/fixed_onlineshop_xs.png); } }
#fixedcontent .pagetop { margin-left: -25px; z-index: 100; position: fixed; bottom: 7.5px; left: 50%; opacity: 1; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; display: none !important; }
@media (max-width: 768px) { #fixedcontent .pagetop { display: block !important; } }
#fixedcontent .pagetop a { display: block; }
#fixedcontent .pagetop a img { display: block; width: 50px; height: auto; }
#fixedcontent .pagetop.off { opacity: 0; }

.loading .onwrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 999; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.loading .onwrap .oncontent { text-align: center; }
.loading .onwrap .oncontent .logo_h { margin-top: 15px; }
.loading #loadingBar { width: 130px; height: 15px; border: 1px solid #ccc; border-radius: 20px; }
.loading .rotate { -webkit-animation: hoverPlease 3s infinite ease; -moz-animation: hoverPlease 3s infinite ease; animation: hoverPlease 3s infinite ease; }
@keyframes hoverPlease { to { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }
/* common */
#wrapper { min-height: 100vh; display: flex; flex-direction: column; }
#wrapper #contents { flex: 1 auto; margin-top: 82px; padding: 80px 0 80px; }
@media (max-width: 768px) { #wrapper #contents { margin-top: 41px; padding: 40px 0 40px; } }

.headline._cmn { margin-bottom: 50px; text-align: center; font-size: 40px; font-family: "Times-Sans-Serif", sans-serif; font-weight: 300; line-height: 100%; }
.headline._cmn span { margin-top: 10px; display: block; text-align: center; font-size: 14px; }
@media (max-width: 768px) { .headline._cmn { margin-bottom: 40px; font-size: 25px; }
  .headline._cmn span { margin-top: 5px; font-size: 12px; } }

.banner { padding: 75px 0; }
.banner._double { position: relative; }
.banner._double .content { z-index: 1; position: relative; padding: 0 50px; }
.banner._double .content ul { text-align: center; margin: 0 -25px; }
.banner._double .content ul li { display: inline-block; padding: 0 25px; }
.banner._double .content a { display: inline-block; border: 1px solid #000; }
.banner._double .content a img { display: block; }
@media (max-width: 768px) { .banner._double .content ul li { display: block; margin-bottom: 30px; }
  .banner._double .content ul li:last-child { margin-bottom: 0; } }
.banner._double .bg { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (max-width: 768px) { .banner { padding: 60px 0; } }

@media (max-width: 768px) { .column { margin-bottom: 15px; }
  .column:last-child { margin-bottom: 0; } }