@charset "UTF-8";
/* CSS Document */

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {font-family: 'Rubik', sans-serif; line-height: 1.2;}
.mincho {font-family: 'Noto Serif JP', serif;}

#wrapper {width: 100%; overflow-x: hidden;}
.line {display: flex; height: 100%; position: absolute; width: calc(100% - 40px); max-width: 1507px; margin: 0 auto; left: 0; right: 0; border-left: 1px solid #EEE; z-index: -1;}
.line span {border-right: 1px solid #EEE; height: 100%; width: calc(100%/3);}
@media screen and (max-width: 568px) {
  .line span:nth-last-of-type(4),.line span:nth-last-of-type(5),.line span:nth-last-of-type(6) {display: none;}
}

.bgWH {background-color: #FFF;}
.bgBK {background-color: #222;}
.bgGD {background-image: linear-gradient(120deg, rgba(5, 0, 45, 1), rgba(255, 255, 255, 0)), linear-gradient(185deg, rgba(176, 0, 51, 1), rgba(255, 255, 255, 0)), linear-gradient(340deg, rgba(0, 193, 137, 1), rgba(255, 255, 255, 0));}
.txtWH {color: #FFF;}
.txtGRY {color: #999;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratio1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratio2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratio3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratio4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

#header {position: relative; width: 100%;}

footer {padding: 40px 0; text-align: center;}
footer small {font-size: 14px;}
#ftNavi {display: none;}
@media screen and (max-width: 896px) {
	footer {margin-bottom: 50px; padding: 40px 0;}
	#ftNavi {display: block; background: #222; letter-spacing: -.4em; position: fixed; z-index: 5; bottom: 0; border-top: 1px solid #FFF; width: 100%;}
	#ftNavi ul {text-align: center; font-size: 10px; font-weight: bold;}
	#ftNavi li {letter-spacing: normal; display: inline-block; width: 50%;}
	#ftNavi li a {display: block; padding: 5px 0; color: #FFF; border-left: 1px solid #333; border-right: 1px solid #111;}
	#ftNavi li:first-child a {border-left: none;}
	#ftNavi li:last-child a {border-right: none;}
	#ftNavi li span {width: 24px; margin: 0 auto 5px; display: block;}
}

.w1000 {width: calc(100% - 42px); max-width: 1003px; padding-left: 0; padding-right: 0;}
.w1500 {width: calc(100% - 40px); max-width: 1507px; padding-left: 0; padding-right: 0;}
.mlr,.w1000,.w1500 {margin-left: auto; margin-right: auto;}
.w100 {width: 100%;}
.w50 {width: 50%;}
.w650 {max-width: 646px; width: 100%; position: relative; z-index: 1;}
.w460 {max-width: 460px; width: 100%;}
.bdrGRY {border-bottom: 1px solid #EEE;}
.txt70 {font-size: 70px;}
.txt70 span {font-size: 57.15%;}
.ttlSidebar {position: relative; padding: 0 115px; display: inline-block; line-height: 1.4;}
.ttlSidebar::before,.ttlSidebar::after {position: absolute; content: ''; width: 100px; height: 5px; background: #222; top: 50%; transform: translateY(-50%);}
.ttlSidebar::before {left: 0;}
.ttlSidebar::after {right: 0;}
.ttlSide {position: relative; margin: 0 50px; z-index: 1;}
.ttlSide span {padding: 0 20px;}
.ttlSide::before {position: absolute; content: ''; width: 100%; height: 1px; background: #222; top: 50%; left: 0; z-index: -1;}
.ttlBdr {border-bottom: 5px solid #FFF; padding-bottom: 20px; margin-bottom: 20px;}
.ttlBtm {max-width: 400px; width: 100%; padding-bottom: 20px; margin: 0 auto 20px; border-bottom: 1px solid #222; }
.box5-25 {padding: 5px 25px; border-radius: 5px; display: inline-block;}
.movieInner {width: 100%; position: relative; padding-top: 56.25%;}
.movieInner iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.btnBK {display: block; width: 100%; padding: 25px 10px; text-align: center; line-height: 1.5; border: 1px solid #222; background: #222; color: #FFF!important; position: relative;}
.btnBK:hover {background: #FFF; color: #222!important;}
.btnBK::after,.btnBK::before {position: absolute; content: ''; background: #222;}
.btnBK::after {width: 1px; height: 100%; right: -5px; top: 5px;}
.btnBK::before {width: 100%; height: 1px; bottom: -5px; left: 5px;}
.btnPDF,.btnNote,.btnWin {display: block; width: 100%; border: 1px solid #222; padding: 20px; text-align: center; background: #FFF; color: #222!important;}
.btnPDF:hover,.btnNote:hover,.btnWin:hover {background: #222; color: #FFF!important;}
.btnPDF span,.btnNote span,.btnWin span {padding: 0 0 0 10px; position: relative;}
.btnPDF span::before,.btnNote span::before,.btnWin span::before {position: absolute; content: ''; width: 24px; height: 24px; background-size: cover; background-repeat: no-repeat; top: 50%; transform: translateY(-50%);}
.btnPDF span::before {background-image: url("../img/icon_pdf.svg");}
.btnPDF:hover span::before {background-image: url("../img/icon_pdf_wh.svg");}
.btnNote span::before {background-image: url("../img/icon_note.svg");}
.btnNote:hover span::before {background-image: url("../img/icon_note_wh.svg");}
.btnWin span::before {background-image: url("../img/icon_window.svg");}
.btnWin:hover span::before {background-image: url("../img/icon_window_wh.svg");}
@media screen and (max-width: 896px) {
  .ttlSide {margin: 0;}
  .btnBK,.btnPDF,.btnNote,.btnWin {padding: 15px 10px;}
}
@media screen and (max-width: 568px) {
  .w50 {width: 100%;}
  .ttlSidebar {padding: 0 75px;}
  .ttlSidebar::before,.ttlSidebar::after {width: 60px;}
}

.slideInup {opacity: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px);}
.slideInup.appear {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
.fadeIn {opacity: 0; transition: all 1s;}
.fadeIn.appear {opacity: 1;}
.delay01 {transition-delay: .2s;}
.delay02 {transition-delay: .4s;}
.delay03 {transition-delay: .6s;}
.delay04 {transition-delay: .8s;}
.delay05 {transition-delay: 1s;}

#top01 .txt70 {margin: 0 20px; line-height: 1.2;}
#top01 .mvPrice {position: absolute; bottom: 0; z-index: 1; width: 100%;}
#top01 .slideItem .bgImg01,#top01 .slideItem .bgImg02,#top01 .slideItem .txt {position: absolute;}
#top01 .slideItem .bgImg01 {top: 0; left: 0; mix-blend-mode: multiply;}
#top01 .slideItem .bgImg02 {bottom: 0; right: 0; mix-blend-mode: multiply;}
#top01 .slideItem:first-of-type .bgImg01 {max-width: 489px; width: 40%;}
#top01 .slideItem:first-of-type .bgImg02 {max-width: 425px; width: 35%;}
#top01 .slideItem:nth-of-type(2) .bgImg01 {max-width: 366px; width: 31%;}
#top01 .slideItem:nth-of-type(2) .bgImg02 {max-width: 365px; width: 31%;}
#top01 .slideItem:nth-of-type(3) .bgImg01 {max-width: 366px; width: 31%;}
#top01 .slideItem:nth-of-type(3) .bgImg02 {max-width: 365px; width: 31%;}
#top01 .slideItem .txt {width: 100%; z-index: 1; top: 60px;}
#top01 .slideItem .mvImg img {width: 100%;}
#top01 .spbr2 {display: none;}
#top02 .w100 {position: absolute; top: 0;}
#top02 .box {width: calc(100%/3 - 33.333px);}
#top02 .box:first-child {margin-top: 60px;}
#top02 .box:nth-child(2) {margin-top: 120px;}
#top02 .box .bgWH {display: inline-block; margin-top: -34px;}
#top02 .movie {max-width: 902px; width: 100%;}
#top03 .box,#top04 .box {width: calc(100%/3 - 0.6666px);}
#top03 .box .ratioBox {z-index: 1;}
#top03 .box h3,#top03 .box p {width: calc(100% - 100px); left: 50px;}
#top03 .box h3 {position: absolute; top: 50px;}
#top03 .box p {position: absolute; text-align: right; bottom: 50px;}
#top03 .subImg {width: 100%; height: 100%; position: absolute; top: 0;}
#top04 .date {background: #222; position: absolute; padding: 10px 0; width: 150px; text-align: center; font-weight: 700;}
#top04 .date::before,#top04 .date::after {position: absolute; content: ''; width: 25px; height: 25px; background-size: cover; background: url("../img/04-09.svg") no-repeat;}
#top04 .date::before {left: 0; bottom: 0;}
#top04 .date::after {right: 0; top: 0;}
#top04 .box .bgWH {display: inline-block; margin-top: -34px;}
#top05 .bgImg01,#top05 .bgImg02,#top06 .bgImg01,#top06 .bgImg02,#top06 .product_info .bgImg,#top08 .bgImg01,#top08 .bgImg02 {position: absolute; z-index: -1;}
#top05 .bgImg01 {top: 0; left: 0; max-width: 517px; width: 40%;}
#top05 .bgImg02 {top: 0; right: 0; max-width: 353px; width: 41%;}
.product .btn {width: 320px; position: relative; border: 1px solid #222; margin-left: 20px; margin-right: 20px;}
.product .btn::before {position: absolute; content: ''; width: 40px; height: 40px; background: url("../img/arrow.svg") no-repeat; bottom: 0; right: 0;}
.product .btn a {display: block; width: 100%; padding: 10px 40px; position: relative; transition: .3s;}
.product .btn a:hover {transition: .3s;}
.product .btn a:hover::after {position: absolute; content: ''; width: 100%; height: 100%; border: 3px solid #222; top: 0; left: 0;}
.product_desc .w650,.product_feature .box,.price,#contact .box {padding: 30px; box-shadow: 0 0 4px rgba(0,0,0,.3); background: #FFF;}
.product_feature .box {width: calc(100%/3 - 27px);}
.product_info .itemImg {width: 295px; margin-right: 60px;}
.product_info .txt {width: calc(100% - 355px);}
.info dt,.info dd {padding: 15px 0; border-bottom: 1px solid #222;}
.info dt {width: 160px;}
.info dd {width: calc(100% - 160px);}
.price {max-width: 501px; width: 100%; margin-top: 50px; position: relative; z-index: 1;}
.price .txt40 span {font-size: 60%;}
.price .limit {margin-right: 20px;}
.sell span {padding-left: 20px; margin-left: 20px; border-left: 1px solid #222;}
.product_link .btn {max-width: 421px; width: 80%;}
#top05 .logo {max-width: 303px; width: 80%;}
#top05 .product_desc .bgImg {position: absolute; bottom: -50px; right: 0; width: 39%; max-width: 485px; z-index: -1;}
#top05 .product_info .bgImg {position: absolute; bottom: 30px; left: 0; width: 40%; max-width: 517px;z-index: -1;}
#top06 .logo {max-width: 336px; width: 80%;}
#top06 .bgImg01 {top: -50px; right: 0; max-width: 338px; width: 30%;}
#top06 .bgImg02 {bottom: -50px; left: 0; max-width: 369px; width: 32%;}
#top06 .product_info .bgImg {bottom: 140px; right: 0; max-width: 369px; width: 32%;}
#top07 {background: url("../img/07-01.jpg") no-repeat center; background-size: cover; padding: 100px 0;}
#top07_bottom {padding: 80px 0;}
#top07_bottom .top07_inbox {display: flex; align-items: center; justify-content: center; margin-bottom: 50px;}
#top07_bottom .top07_inbox img {min-width: 0; width: 430px; height: auto; margin-right: 20px;}
#top07_bottom .top07_inbox2 {display: flex; align-items: center; justify-content: center; flex-direction: column;}
#top07_bottom .top07_inbox2 div:first-of-type{display: flex;}
#top07_bottom .top07_inbox2 img {min-width: 0; width: 331px; height: auto; margin: 0 1% 20px;}

#contact .box {padding: 50px;}
#top08 .bgImg01 {top: 0; left: 0; max-width: 491px; width: 39%;}
#top08 .bgImg02 {bottom: 0; right: 0; max-width: 369px; width: 32%;}
.faq {position: relative; z-index: 1;}
.faq dt {position: relative; padding: 25px 0 20px 60px; font-size: 18px; font-weight: 700;}
.faq dt::before {position: absolute; content: 'Q'; font-size: 30px; font-weight: 700; font-family: 'Rubik', sans-serif; line-height: 40px; width: 40px; text-align: center; background: #222; color: #FFF; top: 20px; left: 0;}
.faq dd {border-bottom: 1px solid #222; padding: 0 0 20px 60px;}
#thanks {padding: 100px 20px;}
#top09 .telsp,#thanks .telsp {max-width: 276px; width: 80%;}
#top09 .btn,#thanks .btn {max-width: 500px; width: 100%;}
@media screen and (max-width: 1510px) {
  #top01 .slideItem .txt {top: 30px;}
  #top01 .slideItem .mvImg {padding: 60px 0;}
}
@media screen and (max-width: 1300px) {
  #top03 .box .ratio1-1::before {padding-top: 120%;}
  #top03 .box h3,#top03 .box p {width: calc(100% - 60px); left: 30px;}
  #top03 .box h3 {top: 30px;}
  #top03 .box p {bottom: 30px;}
}
@media screen and (max-width: 1024px) {
  #top02 .jcSb {padding-top: 40px;}
  #top03 .box h3,#top03 .box p {width: calc(100% - 40px); left: 20px;}
  #top03 .box h3 {top: 20px;}
  #top03 .box p {bottom: 20px;}
  .product_desc .w650,.product_feature .box,.price,#contact .box {padding: 20px;}
}
@media screen and (max-width: 896px) {
  #top01 .txt70 {font-size: 35px; margin: 0 10px;}
  #top01 .slideItem .txt {top: 30px; position: relative;}
  #top01 .slideItem .mvImg {padding: 0; margin-top: -50px;}
  #top02 .jcSb {padding-top: 30px;}
  #top02 .box {width: calc(100%/3 - 20px);}
  #top02 .box:first-child {margin-top: 30px;}
  #top02 .box:nth-child(2) {margin-top: 60px;}
  #top03 .box .ratio1-1::before {padding-top: 220%;}
  .product_info .itemImg {max-width: 295px; width: 80%; margin-right: auto; margin-left: auto; margin-bottom: 30px;}
  .product_info .txt {width: 100%;}
  #top06 .bgImg01 {top: -30px;}
  #top07 {padding: 50px 0;}
  #top07_bottom {padding: 50px 0;}
}
@media screen and (max-width: 715px) {
  #top02 .w100 {position: relative;}
  #top02 .jcSb {padding-top: 0;}
  #top02 .box {width: calc(100%/3 - 15px);}
  #top02 .box:first-child {margin-top: 0;}
  #top02 .box:nth-child(2) {margin-top: 30px;}
  #top07_bottom .top07_inbox {flex-direction: column;}
  #top07_bottom .top07_inbox img {margin: 0 auto 15px; width: 95%;}
  .product_link .w50 {width: 100%;}
}
@media screen and (max-width: 568px) {
  #top01 {padding-bottom: 30px;}
  #top01 .slideItem .txt {top: 20px; margin: 0 15px; width: calc(100% - 30px);}
  #top01 .slideItem .mvImg {margin-top: -20px;}
  #top01 .slideItem .bgImg02 {bottom: -30px; right: 0;}
  #top01 .slideItem:first-of-type .bgImg01 {max-width: 45%; width: 45%;}
  #top01 .slideItem:first-of-type .bgImg02 {max-width: 45%; width: 45%;}
  #top01 .slideItem:nth-of-type(2) .bgImg01 {max-width: 45%; width: 45%;}
  #top01 .slideItem:nth-of-type(2) .bgImg02 {max-width: 45%; width: 45%;}
  #top01 .slideItem:nth-of-type(3) .bgImg01 {max-width: 45%; width: 45%;}
  #top01 .slideItem:nth-of-type(3) .bgImg02 {max-width: 45%; width: 45%;}
  #top01 .txt70 {font-size: 26px;}
  #top01 .txt40 {font-size: 20px; margin-bottom: 5px;}
  #top01 .txt18 {font-size: 14px;}
  #top01 .spbr2 {display: block;}
  #top02 .box {width: 100%;}
  #top02 .box:nth-child(2) {margin-top: 0;}
  #top03 .box,#top04 .box {width: 100%;}
  #top03 .box .ratio1-1::before {padding-top: 80%;}
  .product_feature .box {width: 100%;}
  .product_feature .box .ttlBtm {text-align: center;}
  #top06 .product_feature .box img {width: 60%; margin: 0 20%;}
  .faq dt {padding: 23px 0 20px 40px; font-size: 16px;}
  .faq dt::before {font-size: 20px; line-height: 30px; width: 30px; top: 20px; left: 0;}
  .faq dd {padding: 0 0 20px 0;}
  #top07_bottom .top07_inbox2 div:first-of-type{display: flex;flex-direction: column;}
  #top07_bottom .top07_inbox2 img {min-width: 0; width: 95%; height: auto; margin: 0 auto 10px;}

  #top09 {padding: 0 20px;}
  #thanks {padding: 50px 20px;}
  #top09 .btn,#thanks .btn {font-size: 14px;}
}