@charset "utf-8";
/* ------------------------------------------------------------ common */

body{ width: 100%; min-width: 1200px; font-family: yu-gothic-pr6n,sans-serif; font-weight: 400; font-style: normal; background: #000; }
a{ display: block; text-decoration: none; color: #fff; }
a:hover{ opacity: .8; }

.inner{ width: 1100px; margin: 0 auto; padding: 0 50px; }
.s_inner{ width: 900px; margin: 0 auto; padding: 0 50px; }
.SP{ display: none; }

p,
li{ color: #fff; }

/* font */
.golden{ font-family: goldenbook,serif; font-weight: 300; font-style: normal; }
.yumin{ font-family: yu-mincho-pr6n,sans-serif; font-weight: 400; font-style: normal; }
.din_l{ font-family: din-2014,sans-serif; font-weight: 300; font-style: normal; }
.din_r{ font-family: din-2014,sans-serif; font-weight: 400; font-style: normal; }
.cormorant{ font-family: cormorant-garamond,serif; font-weight: 300; font-style: normal; }


/* header ------------------------------------------------------------ */
header{ position: fixed; top: 0; left: 0; width: 100%; min-width: 1200px; margin: 0 auto; padding: 27px 0; z-index: 200; transition: all .5s; }
header.head_color{ background: #000; transition: all .5s; }

header .head_inner{ width: 94%; margin: 0 auto; }

header h1.head_logo{ float: left; width: 180px; }
header h1.head_logo img{ width: 100%; height: auto; filter: brightness(0) invert(1); }

header .line{ float: right; width: 220px; height: auto; }
header .line img{ width: 20px; height: auto; margin: 0 10px 0 0;}
header .line a{display: flex; align-items: center; border: 1px solid #fff; border-radius: 100px; padding: 13px 26px 13px 20px; font-family: yu-mincho-pr6n,sans-serif; position: relative; font-size: 14px;background: url(../images/common/icn_arrow.png) calc(100% - 20px) center/4px no-repeat}


header nav{ float: right; width: auto; }

header nav li{ float: left; padding: 15px 10px 0 0; font-size: 14px; left: 0.06em; }
header nav li:first-of-type{ width: 60px; }
header nav li:nth-of-type(2){ width: 60px; }
header nav li:nth-of-type(3){ width: 125px; }
header nav li:last-of-type{ padding-right: 0; }

.burger-btn{ display: none;}


/* btn ------------------------------------------------------------ */
.btn{ width: 360px; margin: 0 auto; text-align: center; font-size: 18px; letter-spacing: 0.08em; font-family: goldenbook,serif; font-weight: 300; font-style: normal; }
.btn a{ border: 1px solid #fff; line-height: 380%; background: url(../images/common/icn_arrow.png) calc(100% - 20px) center/6px no-repeat; transition: all .5s; }
.btn a:hover{ color: #000; background: #fff url(../images/common/icn_arrow.png) calc(100% - 20px) center/6px no-repeat; opacity: 1; transition: all .5s; }



/* cta ------------------------------------------------------------ */
.cta{ background: url(../images/common/bg_cta.jpg) center/cover no-repeat; padding: 75px 0; text-align: center; }
.cta p.text_cta{text-align: center; color: #fff; font-size: 26px; padding: 0 0 0; background: url(../images/index/diagonal_1.png) no-repeat left center, url(../images/index/diagonal_2.png) no-repeat right center; background-size: 13px,13px; width: 332px; margin: 0 auto 30px;}
.cta .w_box{ background: #fff; padding: 50px ; }

.cta .cta_ttl{ padding: 0 0 30px 0; border: none; font-size: 40px; letter-spacing: 0.08em; font-family: goldenbook,serif; font-weight: 300; font-style: normal; color: #000; }
.cta p{ font-size: 26px; font-family: yu-mincho-pr6n,sans-serif; font-weight: 400; font-style: normal; color: #000; }

.cta ul{ padding: 38px 0 0;width: 754px; margin: 0 auto;}

.cta li{ float: left; width: 320px; margin: 0 20px 0 0; }
.cta li:first-of-type{ font-size: 15px; letter-spacing: 0.06em; }
.cta li:last-of-type{ margin: 0 0 0 12%;}

.cta li:first-of-type img{ padding: 0 0 15px; }
.cta li img{ padding: 0 10px 0 0; }

.cta li a{ font-weight: 600; box-sizing: border-box; }
.cta li:first-of-type a{ color: #000; }
.cta li:nth-of-type(2) a{ height: 70px; background: #00b800 url(../images/common/icn_arrow.png) calc(100% - 20px) center/4px no-repeat; display: flex; align-items: center; justify-content: center; font-size: 18px;}

.cat_three{display: none;}

/* bread ------------------------------------------------------------ */
#bread ol{ width: 94%; margin: 0 auto; }

#bread li{ display: inline-block; position: relative; padding: 0 30px 0 0; font-size: 10px; color: #bfbfbf; }
#bread li span{ color: #bfbfbf; }
#bread li:last-of-type{ padding: 0; }

#bread li:after{ position: absolute; top: 5px; right: 5px; content: ""; width: 10px; height: 1px; background: #bfbfbf; }
#bread li:last-of-type:after{ content: none; }

#bread li a{ color: #fff; }



/* fotter ------------------------------------------------------------ */
footer{ background: #000; padding: 50px 0 30px; }

footer .logo{ width: 190px; height: auto; margin: 0 auto; }
footer .logo img{ filter: brightness(0) invert(1);}

footer .ul_box{text-align: center;}
footer ul{ margin: 0 auto; padding: 50px 0 60px; display: inline-block;}

footer li{ float: left; font-size: 14px; letter-spacing: 0.06em; font-family: cormorant-garamond,serif; font-weight: 300; font-style: normal; border-left: 1px solid #fff; text-align: center; padding: 0 31px;}
footer li:first-of-type{ border: none; }


footer li a{ padding: 5px 0; }

footer .contact{ text-align: center; padding: 0 0 40px; }
footer .contact a{ display: inline-block; width: 40px; font-family: cormorant-garamond,serif; font-weight: 300; font-style: normal; }
footer .contact a:first-of-type{ padding: 0 15px 0; }
footer .contact a:last-of-type{ display: block; width: 100%; padding: 25px 0 0; font-size: 12px; letter-spacing: 0.06em; color: #bfbfbf; }

footer .contact a img{ width: 100%; height: auto; }

footer small{ display: block; font-size: 14px; letter-spacing: 0.06em; font-family: cormorant-garamond,serif; font-weight: 300; font-style: normal; color: #fff; text-align: center; }



/* ------------------------------------------------------------ 
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

/* ------------------------------------------------------------ common */
body{ min-width: 100%; }

.inner{ width: 90%; padding: 0; }
.s_inner{ width:90%; padding: 0; }

.PC{ display: none; }
.SP{ display: block; }


/* header ------------------------------------------------------------ */
header{ min-width: 100%; padding: 13px 0; }
header h1.head_logo {width: 140px; padding: 3px 0;}
header .line{ width: 45px; height: auto; margin: 0 10px 0 0; }
header .line_sp a { padding: 0; font-size: 14px; background: none; border: none;}
header .line_sp img{width: 45px; height: auto;}

header #navigation{ display: none; opacity: 0; visibility: hidden; transition: all .5s; }
header nav{ float: none;width: 100%; }
header nav img.SP{ width: 90%; height: auto; margin: 60px 0 0 10%; }

header nav ul{ padding: 20px 0 0 25px; }
header nav li:first-of-type {    width: 100%;}
header nav li{ float: none; position: relative; font-size: 18px; line-height: 250%; padding: 25px 0;width: 100%; }
/* header nav li:before{ position: absolute; content: ""; width: 20px; height: 1px; background: #fff; left: 0; bottom: 0; } */
header nav li:before{ display: none;}
header nav li:last-of-type:before{ content: none; }

header .contact{ padding: 25px 0 30px 25px; }
header .contact a{ display: inline-block; width: 30px; font-family: cormorant-garamond,serif; font-weight: 300; font-style: normal; color: #bfbfbf; }
header .contact a:first-of-type{ padding: 0 10px 0 0; }
header .contact a:last-of-type{ display: block; width: 100%; padding: 25px 0 0; font-size: 12px; letter-spacing: 0.06em; color: #bfbfbf; }

header .contact a img{ width: 100%; height: auto; }
header .contact .line a { padding: 11px 20px; font-size: 16px; background: url(../images/common/icn_arrow.png) calc(100% - 20px) center/6px no-repeat; width: 225px;line-height: 160%;}
header .contact .line{width: auto; height: auto; float: none;}
header .contact .line img{width: 30px; height: auto; margin: 0 15px 0 0;}

header p.head_logo{ width: 130px; }


/* ハンバーガー */
.burger-btn{ display: block; position: relative; float: right; width: 45px; height: 45px; }
.burger-btn img{width: 100%;height: auto;}
header .close_modal{ margin: 10px 15px 10px 0; }
header .close_modal span{ position: absolute; display: inline-block; width: 45px; height: 1px; background: #fff; left: 0; top: 20px; }
header .close_modal span:first-of-type{ transform: rotate(45deg); }
header .close_modal span:last-of-type{ transform: rotate(-45deg); }


/* active */
header.active #navigation{ display: block; opacity: 1; visibility: visible; position: fixed; top: 0; left: 0; right: 0; background: #000; overflow-y: scroll; overflow-x: hidden; height: 100%; transition: all .5s; }

header.active .open_modal{ display: none; }
header.active .close_modal{ display: block; }

#top .price .tt {padding: 15px 0 0 !important;}

/* btn ------------------------------------------------------------ */
.btn{ width: 100%; margin: 0 auto; text-align: center; font-size: 14px; letter-spacing: 0.08em; font-family: goldenbook,serif; font-weight: 300; font-style: normal; }
.btn a{ border: 1px solid #fff; line-height: 345%; background: url(../images/common/icn_arrow.png) calc(100% - 20px) center/6px no-repeat; transition: all .5s; }
.btn a:hover{ color: #000; background: #fff url(../images/common/icn_arrow.png) calc(100% - 20px) center/6px no-repeat; opacity: 1; transition: all .5s; }



/* cta ------------------------------------------------------------ */
.cta{ padding: 40px 0; }
.cta .w_box{ padding: 40px 25px;}
.cta_two{margin: 0 0 25px;}
.cta p.text_cta{font-size: 20px; background-size: 10px,10px; width: 250px; margin: 0 auto 15px;}
.cta .cta_ttl{ padding: 0 0 15px 0; font-size: 30px; }
.cta p{ font-size: 18px; line-height: 26px; }

.cta ul{ padding: 30px 0 0; width: auto;}

.cta li{ float: none; width: 100%; margin: 0 0 10px; }
.cta li:first-of-type{ font-size: 12px; margin: 0 0 15px; }

.cta li:first-of-type img{ width: 100%; height: auto; padding: 0 0 9px; }
.cta li:nth-of-type(2) img{ width: 25px; height: auto; }

.cta li:nth-of-type(2) a{ height: 50px; background: #00b800 url(../images/common/icn_arrow.png) calc(100% - 10px) center/4px no-repeat; font-size: 16px;}

.cta li:last-of-type {margin: 0 auto;}

/* bread ------------------------------------------------------------ */
#bread ol{ width: 90%; margin: 0 0 0 10%; }



/* fotter ------------------------------------------------------------ */
footer{ padding: 40px 0 20px; }

footer .logo{ width: 160px; }

footer ul{ width: 100%; padding: 25px 0 15px; }

footer li{ position: relative; float: none; font-size: 18px; text-align: left; border-left: none;width: 100%; padding: 0  }

/* footer li:after{ position: absolute; content: ""; width: 20px; height: 1px; background: #fff; } */
footer li:after{display: none; }

footer li a{ padding: 9px 0; }

footer .contact{ text-align: left; }
footer .contact a{ width: 30px; }
footer .contact a:last-of-type{ display: inline; padding: 0 0 0 15px;}
footer .contact a:first-of-type{ padding: 0 5px 0 0; }

footer small{ font-size: 10px; text-align: left; }


}