@charset "UTF-8";

/* CSS Document */
/* -------------------------------------------

全体設定

 ---------------------------------------------------*/
html {
   background: #000;
}

body {
   font-family: 'Noto Serif JP', serif !important;
   width: 100%;
   font-size: 13px;
   -webkit-text-size-adjust: 100%;
   line-height: 20px;
   background: #000;
   color: #fff;
}

a {
   text-decoration: none;
   color: #1a1a1a;
   cursor: pointer !important;
}

a:hover {
   opacity: 0.6;
}

img {
   width: 100%;
   vertical-align: bottom;
}

.wrap {
   box-sizing: border-box;
   padding: 0 4%;
   position: relative;
}

.wrap p {
   padding-bottom: 15px;
}

.wrap p:last-child {
   padding-bottom: 0;
}

.pb15 {
   padding-bottom: 15px;
}

.pb20 {
   padding-bottom: 20px;
}

.pb30 {
   padding-bottom: 30px;
}

.pb40 {
   padding-bottom: 40px;
}

.pb50 {
   padding-bottom: 50px;
}

/* ヘッダー -----------------------------*/
header {
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 25px;
   top: 0;
   background: #fff;
   z-index: 9999;
}

header .logo_header {
   display: flex;
   justify-content: flex-start;
   margin-left: 1%;
}

header .logo_header .logo {
   height: 18px;
   margin-right: 7%;
   pointer-events: none;
}

header .logo_header .logo_kasco {
   height: 12px;
	margin-top:3px;
}

@media screen and (max-width: 330px) {
	header .logo_header .logo_kasco {
	   height: 9px;
		margin-top:5px;
	}
}

header .btn_header {
   display: flex;
   align-items: center;
   justify-content: flex-end;
}

header .icon_sns {
   height: 18px;
   margin-left: 4%;
}

header .btn_cart {
   height: 25px;
   margin-left: 1%;
}

header img {
   width: auto;
   height: 100%;
   vertical-align: middle;
}

/* MV -----------------------------*/
.mv {
   padding-top: 25px;
}

/* history -----------------------------*/
#history {
   background: url("../images/history-time.png") no-repeat center top 5%/100% auto, url("../images/history-bg.png") no-repeat center top/cover;
   padding: 50px 0;
   position: relative;
   z-index: 2;
}

#history .box {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

#history .box .photo {
   width: 40%;
}

#history .box .txt {
   width: 51.6%;
   text-align: justify;
   padding-right: 3%;
}

#history .box+.box .txt {
   padding-right: 0;
   padding-left: 3%;
}

#history h3 {
   width: 92%;
   margin: 0 auto;
}

#history .table {
   width: 85%;
   margin: 0 auto;
}

/* point -----------------------------*/
#point {
   padding: 50px 0;
   position: relative;
   z-index: 1;
}

#point:before {
   content: '';
   background-color: #14273d;
   background-image: linear-gradient(to right, #828082, #ffffff, #808080);
   background-blend-mode: multiply;
   position: absolute;
   top: -1%;
   right: 0;
   bottom: -1%;
   left: 0;
   opacity: 0.9;
   z-index: -1;
}

#point .row {
   width: 75%;
   margin: 0 auto 50px;
}

#point .row:last-child {
   margin-bottom: 0;
}

#point .row h3 {
   padding: 0 10% 30px;
}

#point .row .box {
   margin-bottom: 40px;
}

#point .row .box:last-child {
   margin-bottom: 0;
}

#point .row .box dl dd {
   padding-top: 10px;
}

#point .row .box1 {
   margin-bottom: 12%;
   position: relative;
}

#point .row .box1 .photo1 {
   width: 65%;
   position: absolute;
   top: -10%;
   left: -10%;
}

#point .row .box1 dl {
   width: 70%;
   margin-left: auto;
}

#point .row .box2 {
   margin-top: 12%;
   position: relative;
}

#point .row .box2 .photo2 {
   width: 41%;
   position: absolute;
   top: -8%;
   left: -10%;
}

#point .row .box2 dl {
   width: 70%;
   margin-left: auto;
}

#point .row .box3 .photo {
   margin: 0 -17%;
}

/* PRICE -----------------------------*/
#price {
   padding: 30px 0 20px;
   position: relative;
   z-index: 1;
}

#price:before {
   content: '';
   background-color: #000;
   position: absolute;
   top: -20px;
   right: 0;
   bottom: -20px;
   left: 0;
   transform: skewY(-3deg);
   z-index: -1;
}

#price .box1 {
   width: 85%;
   margin: 0 auto;
   position: relative;
}

#price .box1 .btn {
   width: 96%;
   position: absolute;
   bottom: 4%;
   left: 2%;
}

#price .arrow {
   width: 55%;
   margin: 0 auto;
   padding: 10px 0 15px;
}

#price .box2 {
   margin: 0 auto;
   position: relative;
}

#price .box2 .btn {
   width: 92%;
   position: absolute;
   bottom: 4%;
   left: 4%;
}

#price .note {
   font-size: 10px;
   line-height: 15px;
   letter-spacing: 0.05em;
   padding: 10px 4%;
}

/* PICKUP -----------------------------*/
#pickup {
   padding-top: 70px;
   position: relative;
   z-index: 0;
}

#pickup:before {
   content: '';
   background-color: #14273d;
   background-image: linear-gradient(to right, #828082, #ffffff, #808080);
   background-blend-mode: multiply;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0.9;
   z-index: -1;
}

#pickup .box1 {
   margin-top: 30px;
   padding: 0 4%;
   position: relative;
}

#pickup .box1 .photo {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

#pickup .box1 .col {
   width: 58%;
   margin-left: auto;
   padding-top: 29%;
}

#pickup .box1 .col .txt {
   padding-top: 10px;
}

#pickup .box2 {
   width: 75%;
   margin: 0 auto;
   padding-top: 50px;
}

#pickup .box2 .txt {
   padding-top: 15px;
}

#pickup .box2 .photo {
   padding-top: 15px;
}

#pickup .box3 {
   width: 75%;
   margin: 0 auto;
   padding-top: 20px;
}

#pickup .box3 h3 {
   padding-bottom: 15px;
}

/* PRO’S COMMENT -----------------------------*/
#pro-commnent {
   padding-top: 50px;
   position: relative;
   z-index: 0;
}

#pro-commnent:before {
   content: '';
   background-color: #14273d;
   background-image: linear-gradient(to right, #828082, #ffffff, #808080);
   background-blend-mode: multiply;
   position: absolute;
   top: -1px;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0.9;
   z-index: -1;
}

#pro-commnent .box {
   background-color: #fff;
   color: #000;
   margin-top: 25px;
}

#pro-commnent .box+.box {
   padding-bottom: 40px;
}

#pro-commnent .box .col {
   width: 82%;
   margin: 0 auto;
   padding: 15px 0 20px;
   text-align: justify;
}

#pro-commnent .box .col h3 {
   padding: 0 5% 15px;
}

/* IMPRESSION -----------------------------*/
#impression {
   padding-top: 70px;
   position: relative;
   z-index: 0;
}

#impression:before {
   content: '';
   background-color: #14273d;
   background-image: linear-gradient(to right, #828082, #ffffff, #808080);
   background-blend-mode: multiply;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0.9;
   z-index: -1;
}

#impression .box {
   margin-top: 30px;
}

#impression .box dl dd {
   padding-top: 10px;
}

#impression .note {
   text-align: right;
   font-size: 10px;
   line-height: 15px;
}

/* SPEC -----------------------------*/
#spec {
   padding: 50px 0 70px;
   position: relative;
   z-index: 0;
}

#spec:before {
   content: '';
   background-color: #14273d;
   background-image: linear-gradient(to right, #828082, #ffffff, #808080);
   background-blend-mode: multiply;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0.9;
   z-index: -1;
}

#spec h2 {
   padding-bottom: 10px;
}

/* TOPへ戻る -----------------------------*/
.pagetop {
   position: fixed;
   bottom: 6%;
   right: 3%;
   z-index: 9999;
}

.pagetop a {
   display: block;
   width: 40px;
   height: 40px;
}

/* フッター -----------------------------*/
footer {
   background: #0d2440;
   padding: 1% 0;
   position: relative;
   z-index: 1;
}

footer small {
   display: block;
   width: 56%;
   margin: 0 auto;
}

footer small img {
   vertical-align: middle;
}

/* -------------------------------------------

clearfix

 ---------------------------------------------------*/
.cf:after {
   content: "";
   clear: both;
   display: block;
}