@charset "UTF-8";
/* CSS Document */
body { background:#fff; }
#wrapper { position:relative; width:100%; overflow:hidden; }
.inner{ position:relative; width:100%; max-width:1200px; padding: 0 20px; margin:0 auto; }
.bg_black { background:#000; }

a.line { text-decoration:underline; }

/* btn */
/* Shutter Out Vertical */
.btn a {
  position:relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  /*background: #ccc;*/
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding: 15px 60px;
  font-size: 1.2em;
  color: #d20b0f;
  border: 1px solid #d20b0f;
}
.btn a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #d20b0f;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.btn a:hover, .btn a:focus, .btn a:active {
  color: white;
}
.btn a:hover:before, .btn a:focus:before, .btn a:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.btn a:after {
    position: absolute;
    top: 50%;
    right: 15px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent #d20b0f;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn a:hover:after, .btn a:focus:after, .btn a:active:after {
    border-color: transparent transparent transparent #fff;
}

.btn_reverse a:after { left: 15px; border-width: 4px 7px 4px 0; border-color: transparent #d20b0f transparent transparent; }
.btn_reverse a:hover:after { border-color: transparent #fff transparent transparent; }


.submit { margin-top: 30px; width: 80%; max-width: 800px; margin: 0 auto; }
.btn_submit { padding: 12px 33px; color: #fff; font-size: 1.067em; border: none; background: #cc2222; -webkit-transition: all .3s; transition: all .3s; }

/*ドロップダウン*/
.btn_down dt { position:relative; display:block; padding-right: 30px; font-size:18px;cursor:pointer; }
.btn_down dt:after {
		content:""; width:6px; height:6px;
		border-top:2px solid #d20b0f; border-right:2px solid #d20b0f;
		transform: rotate(135deg);
		position:absolute;
		top:50%;
		right:20px;
		-ms-transition:all .5s; transition:all .5s;
		margin-top:-5px
		}
.btn_down dt.active:after { transform: rotate(-45deg); }
.btn_down dd{ display:none; }
.btn_down dd p.ttl { margin-top:20px; color:#c92421; font-size:18px; }
.btn_down p+p { margin-top:1em; }
.btn_down ul { margin-bottom:1em; }



/* slick 共通部分 */
.slick-slide { text-align: center; }
.slick-slide img { display: inline-block!important; }
.slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; width: 35px; height: 35px; cursor: pointer; background-color: #231815; border-radius: 50%; border: none; text-indent: -9999px; }
.slick-prev { position:absolute; left:-50px; }
.slick-next { position:absolute; right:-50px; }
.slick-prev:before,
.slick-next:before { 
content:"";
position:absolute; top:50%; left:50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 5px 8px 5px 0;
border-color: transparent #ffffff transparent transparent;
}
.slick-next:before { 
border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent #ffffff;
}
.slick-dots li button:before { font-size: 50px!important; }

/* --header------------------------ */
header { position: fixed; z-index:100; width:100%; padding:0 10px; background:#fff; border-top:4px solid #d20b0f; border-bottom:1px solid #f0e9de; }
header #logo { width: 30%; padding:13px 0; }

.h_cart_btn { display: none; }

/* --nav------------------------ */
header #nav_area{ width: 70%; text-align:right; font-weight:700!important; } 
#subNav { display:inline-block; font-size: 0.95em; }
#subNav .lan { float:left; margin-right:20px; }
#subNav .h_btn { float:left; }
#subNav .lan li{ float:left; margin-left:15px; }
#subNav .lan li a:after { content:"　|"; }
#subNav .lan li:last-child a:after { content:"" }
#subNav .h_btn li{ float:left; margin-left:10px; }
#subNav .h_btn li a { display:inline-block; padding: 0 15px; color:#fff; border-bottom-left-radius:5px; border-bottom-right-radius:5px; background:#d20010; }
#subNav .h_btn li a:hover { background:#ccc; }

#gnav { float: right; min-width: 710px; padding:5px 0; font-size: 16px; }
#gnav  li { float:left; padding:0 0 0 5%; }
#subNav .lan li a:hover,
#gnav  li a:hover { color:#d20010; }


/* Toggle Button */
#nav-toggle { display:none; }


/* --contents------------------------ */
#contents { margin-top:78px; padding-bottom: 100px; }

#urgency { padding: 20px 0; color:#fff; background:#d20010; }
#urgency dt { text-align: center; font-size:3.5em; line-height: 1.2; }
#urgency .btn { margin:0; }
#urgency .btn a { padding: 4px 32px 2px 17px; font-size: 1.2em; background: #fff; }
#urgency .btn a:before { border-radius:0; }

.link_btn a { position:relative; display:block; padding: 5px 0 4px 35px; font-size: 0.9em; border-bottom:1px solid #bbb; }
.link_btn a:after { position:absolute; top:50%; right:5px; content:""; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent #bbb; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.link_btn .warning a { background:url(../img/icon_attention.png) no-repeat 0 50%; }
.link_btn .composition a { background:url(../img/icon_composition.png) no-repeat 0 50%; }
.link_btn .press a { background:url(../img/icon_press.png) no-repeat 0 50%; }
.link_btn .snspolicy a { background:url(../img/icon_snspolicy.png) no-repeat 0 50%; }
.link_btn .sitepolicy a { background:url(../img/icon_sitepolicy.png) no-repeat 0 50%; }
.link_btn .privacy a { background:url(../img/icon_privacy.png) no-repeat 0 50%; }
.link_btn .link a { background:url(../img/icon_link.png) no-repeat 0 50%; }
.link_btn .sitemap a { background:url(../img/icon_sitemap.png) no-repeat 0 50%; }

.link_btn .cart a { background:url(../img/icon_cart.png) no-repeat 0 50%; }
.link_btn .payment a { background:url(../img/icon_payment.png) no-repeat 0 50%; }
.link_btn .law a { background:url(../img/icon_law.png) no-repeat 0 50%; text-decoration:none; color:#222; }
.link_btn .qa a { background:url(../img/icon_qa.png) no-repeat 0 50%; }

.link_btn a:hover { background-color: #f5f5f5; }


/* --footer------------------------ */
footer { padding-top:20px; background:#ececec; /*border-top:1px solid #d2d2d2;*/ }
footer .tomorrow { padding-left: 20px; margin: 0; font-size: 1.8em; letter-spacing: 8px; }
#flogo { margin: 4px 0 0; text-align:center; }
#fnav { max-width: 940px; margin:20px auto; font-size: .9em; }
#fnav li { width: 20%; }
/*#fnav li { display:inline-block; float:left; margin-right:30px; }
#fnav li:last-child { margin-right:0; }*/
#fnav li a { display:block; font-size:0.9em; }
#fnav li a:before { content:"● "; color:#d20010; }
#fnav li a:hover { color:#d20010; }
#f_link { margin:20px auto; }
#f_link.inner { max-width: 710px; }
#f_link li { width:33%; }
footer .lan { display:none; }

#pagetop { position:fixed; z-index:900; bottom:20px; right:20px; }
footer #copy { margin: 0; padding: 3px 0; color:#fff; font-size: 0.8em; text-align:center; background:#d20010; }
footer #copy a { color:#fff; text-decoration:underline; }


/*1289px 以下 */
@media screen and (max-width: 1289px) {
.slick-prev { left:-20px; }
.slick-next { right:-20px; }

}

/*1079px 以下 */
@media screen and (max-width: 1079px) {

#subNav { display:none }
#gnav { position: absolute; z-index:1;
        /* 開いてないときは画面外に配置 */
        top: 0; right:-320px; min-width: 300px; width: 300px; height: 100vh;
		text-indent:1em; background: rgba(255, 255, 255, 0.97); 
        -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; }
#gnav li { float:none; width:100%; }
#gnav li.dis_none { display:block; }
#gnav li a {
		position:relative;
        width: 80%;
        display: block;
        padding: 9px 0;
		margin-left: 0;
		border-bottom: 1px solid #bbb;
        text-align: left;
    }
	
#gnav li.blog a { width:80%; height:auto; text-indent:inherit; background:none; }	
#gnav li.blog a:hover { background-color:inherit; }

#gnav li a::before { position: absolute; top: 50%; left: 0; content:""; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent #231815; -webkit-transform: translateY(-50%); transform: translateY(-50%);  }
	
#gnav li a:hover::after { opacity: 1; visibility: visible;}
	
/* Toggle Button */
#nav-toggle { display:block; position: absolute; right: 20px; top: 28px; width: 28px; height: 24px; cursor: pointer; z-index: 999; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height: 1px; width: 100%; background: #000; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 11px; }
#nav-toggle span:nth-child(3) { top: 22px; }

    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #gnav スライドアニメーション */
    .open #gnav { -moz-transform: translateX(-250px); -webkit-transform: translateX(-250px); transform: translateX(-250px); }

#store .h_cart_btn { display: block; position: absolute; top: 14px; right: 60px; }

footer .lan { display:block; width:150px; margin:0 auto 10px; }
footer .lan li{ float:left; margin-left:15px; }
footer .lan li a:after { content:"　|"; }
footer .lan li:last-child a:after { content:"" }
	

}

/*899px 以下 */
@media screen and (max-width: 899px) {
#nav-toggle { top:25px; }
    
    #urgency dt { font-size: 2.5em; line-height: 1.8; }


}

/*599px 以下 */
@media screen and (max-width: 599px) {

  .scroll::-webkit-scrollbar{ width:8px; }
  .scroll::-webkit-scrollbar-thumb{ background:#aaa; border-radius:15px; }
  .scroll::-webkit-scrollbar-track-piece:start{ background:#ccc; border-radius:15px; }
  .scroll::-webkit-scrollbar-track-piece:end{ background:#ccc; border-radius:15px; }

.btn a { padding: 15px 20px; width: 100%; }

/*ドロップダウン*/
.urgency_btn_down dt { position:relative; display:block; font-size:18px; cursor:pointer;  }
.urgency_btn_down dt:after {
		content:""; width:6px; height:6px;
		border-top:2px solid #fff; border-right:2px solid #fff;
		transform: rotate(135deg);
		position:absolute;
		top:50%;
		right:0;
		-ms-transition:all .5s; transition:all .5s;
		margin-top:-5px
		}
.urgency_btn_down dt.active:after { transform: rotate(-45deg); }
.urgency_btn_down dd{ display:none; }
.urgency_btn_down dd p.ttl { margin-top:20px; color:#c92421; font-size:18px; }
.urgency_btn_down p+p { margin-top:1em; }
.urgency_btn_down ul { margin-bottom:1em; }
#urgency .btn a { width:auto; }

.inner { padding:0 10px; }
.sec { margin:20px auto; }
#contents { padding-bottom: 50px; }
.conttl { font-size:1.5em; }
.conttl .b_a:before { top: -10px; left: -30px; width: 52px; height: 52px; }

header #logo { width: 40%; }
#nav-toggle { top:17px; right:10px; }
#gnav li a { padding: 7px 0; }

#contents { margin-top: 58px; }

#urgency dt { font-size: 1.2em; text-align: left; }
#urgency .btn a { font-size: 1em; }

footer .tomorrow { font-size:1.2em; letter-spacing: 5px; }
   
#fnav { display:none; }
#f_link { justify-content:center; -webkit-justify-content:center; }
#f_link li { width: 48%; margin: 5px 1% 0; }

#pagetop { width:50px; right:10px; }

}