@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500;700;900&display=swap');

/* ------------------------------------------------
renovation LP / layout css
------------------------------------------------ */

* {margin: 0;padding: 0;}
html {font-size: 62.5%;width: 100%;}

body{
font-size: 1.7rem;
font-family:'Noto Sans JP', sans-serif;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#fff;
color:#000;
line-height:1.7;
width: 100%;
position: relative;
}

.clearfix::after {content: "";display: block;clear: both;}

img {vertical-align:top;}


a:hover img{
opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity:0.7;
}

a {color:#fff;}
a:visited {color:#fff;}


/* header
------------------------------------------------------------- */

header {position: relative;width:100%;transition: .3s;}
header ul.headbtn {position: absolute;top:20px;right: 120px;z-index:10;}
header ul.headbtn li {float:left;margin:0 10px 0 0;list-style:none;}
header ul.headbtn::after {content: "";display: block;clear: both;}

.swiper-container {position: relative;width: 100%;height:100vh;background:#000;}
.swiper-slide {text-align: center;font-size: 18px;background:#000;display: flex;justify-content: center;
align-items: center;position: absolute;top:0;left: 50%;transform: translate(-50%, 0);}
.swiper-slide img {width:100%;}

.swiper-container h1 {width:650px;height:115px;padding:30px 0 0 40px;background:url(../img/h1_bg.png) 0 0 no-repeat;position:absolute;top:0;left:0;transition: .3s;z-index:10;}
.swiper-container .text {width:100%;max-width:1133px;position:absolute;top:calc(50% - 190px);left:calc(50% - 566px);z-index:10;}
.swiper-container picture {width:100vw;height:100vh;}

.swiper-container .estimateArea {position:absolute;bottom:80px;left:0;width:100%;height:190px;color:#fff;background:rgba(0,0,0,0.5);z-index:10;}

.swiper-container .estimateArea .inner {position: relative;width:1100px;margin:auto;padding:20px 0;}
.swiper-container .estimateArea .inner .title {font-size:2.2rem;color:#ede5cb;margin:0 0 10px 0;}
.swiper-container .estimateArea .inner .select_input {-webkit-appearance: none;-moz-appearance: none;appearance: none;text-indent: .01px;text-overflow: "";width: 100%;padding: 7px 0;border: 1px solid #9fa0a0;display: block;border-radius: 4px;font-size: 1.8rem;padding-right: 30px;
background:#fff url(../../img/contact/icon.png) right center no-repeat;color:#000;cursor: pointer;text-align-last: center;margin:0 0 10px 0;}

.swiper-container .estimateArea .inner .box1 {float:left;width:320px;margin:0 0 0 180px;}
.swiper-container .estimateArea .inner .box2 {float:left;width:100px;text-align:center;padding:50px 0 0 0;}
.swiper-container .estimateArea .inner .box3 {float:left;width:320px;font-size:1.5rem;line-height:1.5;}

.swiper-container .estimateArea .inner .box4 {float:left;width:104px;padding:20px 0 0 50px;}
.swiper-container .estimateArea .inner .box5 {padding:0 0 0 180px;line-height:1;color: #b8a36f;}
.swiper-container .estimateArea .inner .box5 .result {diplay: inline-block;font-size:3rem;font-weight:bold;margin:0 auto 10px auto;color:#d3c195;border:1px solid #d3c195;padding:5px 20px 5px 20px;text-align:center;background:rgb(257,257,257,0.1);vertical-align:middle;}
.swiper-container .estimateArea .inner .box5 .result .price {font-size:6rem;}
.swiper-container .estimateArea .inner .box5 .result .retry {float:right;display:block;font-size:1.5rem;font-weight:normal;padding:15px 15px;margin:7px 0 0 0;height:100%;background:#d3c195;text-decoration:none;color:#000;}
.swiper-container .estimateArea .inner .box5 .note {font-size:1.3rem;margin:0 0 5px 0;}
.swiper-container .estimateArea .inner .box5 .note2 {font-size:1.6rem;font-weight:bold;}
.swiper-container .estimateArea .inner .box5 .note2 a {font-size:1.3rem;font-weight:normal;display:inline-block;padding:4px 15px;background:#d3c195;text-decoration:none;color:#000;}

.swiper-container .estimateArea .inner .box5 a:hover {filter: drop-shadow(0 0 0.75rem #dacd8b);}

.swiper-container .estimateArea .inner .box5 ul.inqbox {width:660px;margin:20px auto 0 auto;list-style:none;display:flex;text-align:center;justify-content: space-between;}
.swiper-container .estimateArea .inner .box5 ul.inqbox li a {display:inline-block;width:300px;padding:5px 0;background:#333;text-decoration:none;border:1px solid #ccc;}

.swiper-container .estimateArea .inner .icon {position:absolute;top:-50px;left:-50px;}
.swiper-container .estimateArea .inner a .go:hover {filter: drop-shadow(0 0 0.75rem #dacd8b);}
.swiper-container .estimateArea .inner a:hover .go{opacity: 1;filter: alpha(opacity=100);-moz-opacity:1;}

.swiper-container .mainvisual_foot {position:absolute;bottom:0;left:0;width:100%;height:80px;color:#fff;background:rgba(0,0,0,0.5);z-index:10;text-align:center;}

.swiper-container .estimateArea .inner .box3 label { display: block; font-size: 1.5rem;border-bottom:1px solid #666;}
.swiper-container .estimateArea .inner .box3 label:hover { cursor: pointer; }
.swiper-container .estimateArea .inner .box3 label input { display: none; }
.swiper-container .estimateArea .inner .box3 label input+.dummy {
width: 15px;
height: 15px;
margin:0 5px 1px 0;
border: 1px solid #fff;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
}
.swiper-container .estimateArea .inner .box3 label input:checked+.dummy:after {
content: "";
width: 60%;
height: 60%;
background-color: #fff;
border-radius: 50%;
}


/* flatrate
------------------------------------------------------------- */

#flatrate {background:#000;border-top:1px solid #666;}
#flatrate h2 {background:url(../img/flatrate_title_bg.jpg) 0 0 repeat-x;text-align:center;margin:80px 0 30px 0;}

#flatrate .inner {position:relative;width:1100px;padding:50px 0 100px 0;margin:auto;color:#fff;}
#flatrate .inner .image1 {position:absolute;top:0;left:-740px;}
#flatrate .inner .image2 {position:absolute;top:0;left:580px;}
#flatrate .inner .fr {position:relative;float:right;width:520px;}
#flatrate .inner .fl {position:relative;float:left;width:520px;}

#flatrate .inner dl {margin:0 0 100px 0;}
#flatrate .inner dl dt h3 {line-height:2;color:#b8a36f;font-size:3rem;border-bottom:2px solid #b8a36f;padding:0 0 20px 0;margin:0 0 20px 0;}
#flatrate .inner dl dd {line-height:3;font-size:1.6rem;}
#flatrate .inner dl dd em {font-size:1.4rem;font-style:normal;line-height:2;display:block;margin:20px 0 0 0;}

#flatrate .inner ul.btn_contact {display:table;list-style:none;margin:0 auto 40px auto;}
#flatrate .inner ul.btn_contact li {float:left;margin:0 20px 0 0;}
#flatrate .inner ul.btn_contact::after {content: "";display: block;clear: both;}




/* lineup
------------------------------------------------------------- */

#lineup {background:#fff;position: relative;z-index: 0;}
#lineup::after{content: '';position: absolute;left:0;top: 0;transform: skewY(-2deg);transform-origin: top left;z-index: -1;width:100%;height:100%;background:#fff;}

#lineup .inner {width:1080px;padding:100px 0 100px 0;margin:auto;}
#lineup .inner h2 {font-size:3rem;color:#fbde96;text-align:center;background:#000;padding:10px ;margin:0 0 50px 0;}
#lineup .inner h3 {font-size:2.6rem;font-weight:900;}

#lineup .inner .category {margin:0 0 50px 0;display:flex;justify-content:space-between;flex-wrap: wrap;}
#lineup .inner .category div {width:33%;}

#lineup .inner ul.detail {list-style:none;border-left:2px solid;margin:30px 20px 0 20px;}
#lineup .inner ul.detail li {padding:0 0 15px 55px;color:#000;}
#lineup .inner ul.detail li.text {color:#666;font-size:1.5rem;margin:0 0 20px 0;}
#lineup .inner ul.detail li.brand {width:200px;background:url(../img/lineup_line.jpg) 0 45% no-repeat;}
#lineup .inner ul.detail li.brand img {width:200px;}


/* cost
------------------------------------------------------------- */

#cost {background:#000;color:#fff;position: relative;z-index: 0;}
#cost::after{content: '';position: absolute;left:0;top: 0;transform: skewY(-2deg);transform-origin: top left;z-index: -1;width:100%;height:100%;background:#000;}

#cost .inner {width:1180px;padding:70px 0 100px 0;margin:auto;}
#cost .inner h2 {font-size:5rem;color:#dacd8b;text-align:center;margin:0 0 40px 0;}
#cost .inner h3 {font-size:3rem;font-weight:100;line-height:1;}
#cost .inner h3 span {font-size:5rem;font-weight:100;padding:10px 0 0 0;}

#cost .inner p.lead {font-size:1.8rem;line-height:2.4;padding:0 100px;margin:0 0 50px 0;}

#cost .inner ul.list {list-style:none;display:flex;justify-content: space-between;flex-wrap: wrap;}
#cost .inner ul.list li {width:27%;font-weight:100;}
#cost .inner ul.list li.plus {width:6%;margin:140px 0 0 0;}
#cost .inner ul.list li h3 {margin:0 0 20px 0;}

#cost h4 {position: relative;display: inline-block;z-index: 1;width:40%;text-align:right;font-size:2.4rem;padding:7px 80px 10px 0;margin:0 0 50px 0;}
#cost h4::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;background: #746b55;transform: scaleY(1.3) perspective(.6em) rotateX(2deg);transform-origin: bottom left;}

#cost .inner .case1 {float:left;position:relative;width:420px;padding:0 20px 20px 20px;margin:0 0 50px 50px;background:#121212;border:1px solid #474747;color:#d0d0d0;}
#cost .inner .case2 {float:right;position:relative;width:420px;padding:0 20px 20px 20px;margin:0 50px 50px 0;background:#121212;border:1px solid #474747;color:#d0d0d0;}

#cost .inner .case1 .pict,
#cost .inner .case2 .pict {position:absolute;top:-50px;left:-30px;}
#cost .inner .case1 .title,
#cost .inner .case2 .title{position:absolute;top:150px;left:280px;}
#cost .inner .case1 table,
#cost .inner .case2 table {margin:240px 0 30px 30px;border-collapse: collapse;}
#cost .inner .case1 table th,
#cost .inner .case2 table th {padding:10px;border-right:1px solid #ccc;text-align:right;vertical-align:top;}
#cost .inner .case1 table td,
#cost .inner .case2 table td {padding:10px;}
#cost .inner .case1 .price,
#cost .inner .case2 .price {font-size:2rem;text-align:center;}
#cost .inner .case1 .price span,
#cost .inner .case2 .price span {font-size:3rem;font-weight:500;}

#cost .inner ul.btn_contact {display:table;list-style:none;margin:30px auto 40px auto;}
#cost .inner ul.btn_contact li {float:left;margin:0 20px 0 0;}
#cost .inner ul.btn_contact::after {content: "";display: block;clear: both;}



/* strength
------------------------------------------------------------- */

#strength {background:#fff;}
#strength .inner {width:1140px;padding:70px 0 100px 0;margin:auto;}

#strength .inner h2 {font-size:6rem;padding:70px 0 80px 0;margin:0 0 50px 0;letter-spacing:3px;text-align:center;background:url(../img/strength_title_bg.png) 50% 0 no-repeat;}

#strength .inner .content {display:flex;justify-content: space-between;flex-wrap: wrap;}
#strength .inner .content div {width:30%;}
#strength .inner .content div h3 {font-size:4rem;font-style:italic;margin:0 0 30px 0;padding:10px 0 20px 50px;}
#strength .inner .content div h3.st1 {background:url(../img/strength_1.png) 0 0 no-repeat;}
#strength .inner .content div h3.st2 {background:url(../img/strength_2.png) 0 0 no-repeat;}
#strength .inner .content div h3.st3 {background:url(../img/strength_3.png) 0 0 no-repeat;}
#strength .inner .content div p {height:170px;}




/* faq
------------------------------------------------------------- */


#faq {background:#000;}
#faq .inner {width:1100px;position:relative;padding:80px 0 80px 0;margin:auto;}

#faq .inner h2 {font-size:12rem;letter-spacing:8px;color:#959595;margin:0 0 40px 0;text-align:center;}

#faq dl {margin:0 0 10px 0;}
#faq dt {padding: 4px 20px 12px 20px;position: relative;font-size:2rem;cursor: pointer;color:#fff;background:#212121;}
#faq dt:before {content:"Q. ";font-size:3rem;font-weight:bold;}
#faq dt:hover {background:#666;}
#faq dd {padding: 30px 40px 40px 90px;font-size:1.8rem;display: none;background:#fff;}
#faq dd:before {content:"A. ";font-size:3rem;font-weight:bold;margin:0 0 0 -1.2em;}

#faq dd a {color:#000;}
#faq dd a:hover {color:#cc3300;}



/* slider
------------------------------------------------------------- */

#slider {background:#fff;display: flex;}
#slider .inner {width:1180px;position:relative;padding:50px 0;margin:auto;}

#slider .inner ul {list-style:none;display:flex;justify-content: space-between;}
#slider .inner ul li {width:32%;font-size:1.5rem;text-align:center;}
#slider .inner ul li img {width:100%;margin:0 0 10px 0;}

.slider__inner {display: flex;padding:40px 0;}

.slider__inner:first-child {animation: loop 90s linear infinite;}
.slider__inner:nth-child(2) {animation: loop2 90s -60s linear infinite;}
.slider__inner:last-child {animation: loop3 90s -30s linear infinite;}
 
.slider__inner .slider__item {margin:0 60px 0 0;}
 
@keyframes loop {
  0% {transform: translateX(200%);}
  to {transform: translateX(-100%);}
}
 
@keyframes loop2 {
  0% {transform: translateX(100%);}
  to {transform: translateX(-200%);}
}
 
@keyframes loop3 {
  0% {transform: translateX(0%);}
  to {transform: translateX(-300%);}
}


/* footer
------------------------------------------------------------- */

footer {background: #000;color:#fff;width: 100%;}
footer .inner .logo {display:block;margin:auto;}
footer .inner {width: 1100px;margin: 0 auto;padding: 50px 0 200px 0;font-size:1.4rem;}
footer .inner a {color:#fff;}
footer .inner a:visited {color:#fff;}
footer .inner a:hover {color:#b69955;}

footer .inner dl.company {margin:30px 0 0 200px;;width:830px;}
footer .inner dl.company dt {float:left;width:300px;text-align:left;padding:30px 0 0 0;}
footer .inner dl.company dt .copy {font-size: 1.4rem;letter-spacing:1px;padding:10px 0 0 0;}
footer .inner dl.company dd {float:right;width:470px;padding:0 0 0 50px;border-left:1px solid #ccc;line-height:2.2;}
footer .inner dl.company::after {content: "";display: block;clear: both;}



/* floating
------------------------------------------------------------- */

.pagetop {display: none;position: fixed;bottom: 30px;right: 30px;z-index:100;}
.pagetop a {display: block;}
.pagetop img {width:60px;}

#floating {position:fixed;width:100%;background:#fff;z-index:2;}
#floating .inner {width:1200px;margin:auto;padding:20px 0;}

#floating .inner ul.btn_contact {display:table;list-style:none;margin:0 auto 0 auto;}
#floating .inner ul.btn_contact li {float:left;margin:0 20px 0 0;}
#floating .inner ul.btn_contact::after {content: "";display: block;clear: both;}




/* Modal Window
----------------------------------------------------------------*/

.hide-area{display: none;}

.modaal-close:after, 
.modaal-close:before{background:#ccc;}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{background:#666;}

.modaal-outer-wrapper  {}
.modaal-container {max-width:640px !important;border-radius:10px !important;}
.modaal-video .modaal-inner-wrapper{padding:0;}
#modaal-title{font-size:1.2rem;text-align: center;margin: 0 0 20px 0;}

.modaal-container dl {text-align:center;margin:0 0 20px 0;}
.modaal-container dl dt {margin:0 0 30px 0;}




/* Accoudion
------------------------------------------------ */


.toggle_btn {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: block;
width: 30px;
height: 30px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

}
.toggle_btn:before, .toggle_btn:after {
display: block;
content: '';
background-color: #fff;
position: absolute;
width: 20px;
height: 3px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.toggle_btn:before {
width: 3px;
height: 20px;
}
.toggle_title.selected .toggle_btn:before {
content: normal;
}


/* effect
------------------------------------------------ */

 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 600ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

/* 2つ目の要素に200msのdelayをかける */
.effect > .fadein:nth-of-type(2) {
-moz-transition-delay:200ms;
-webkit-transition-delay:200ms;
-o-transition-delay:200ms;
-ms-transition-delay:200ms;
}
/* 3つ目の要素に400msのdelayをかける */
.effect > .fadein:nth-of-type(3) {
-moz-transition-delay:400ms;
-webkit-transition-delay:400ms;
-o-transition-delay:400ms;
-ms-transition-delay:400ms;
}
/* 4つ目の要素に600msのdelayをかける */
.effect > .fadein:nth-of-type(4) {
-moz-transition-delay:600ms;
-webkit-transition-delay:600ms;
-o-transition-delay:600ms;
-ms-transition-delay:600ms;
}
/* 5つ目の要素に600msのdelayをかける */
.effect > .fadein:nth-of-type(5) {
-moz-transition-delay:800ms;
-webkit-transition-delay:800ms;
-o-transition-delay:800ms;
-ms-transition-delay:800ms;
}



/* sidebar [SP MENU]
------------------------------------------------------------- */

#sidebar {
font-size: 1.7rem;
padding-top: 80px;background: #666;text-align: center;
display:block;
position: fixed;
right: -400px;
top: 0;
height: 100%;
width: 400px;
color: #fff;
transition: .35s ease-in-out;
overflow-y:auto;}

#nav_sp {margin:0 0 100px 0;}
#nav_sp ul {list-style: none;margin-left: 0;}
#nav_sp > ul > li {position: relative;}
#nav_sp a {color: #fff !important;text-decoration: none !important;display: block;padding: 15px 0;border-bottom:1px solid #fff;transition: background-color .3s linear;}
#nav_sp a:hover {text-decoration:none !important;background: #fff;color:#000 !important;}

/* sub-menu */
#nav_sp .sub-menu-nav {
position: fixed;
background: #033560;
color: #fff;
top: 0;
padding-top: 20px;
left: 400px;
width: 0;
height: 100%;
overflow: hidden;
transition: width .2s ease-out;
}
#nav_sp .sub-menu-nav a,
#nav_sp .sub-menu:hover .sub-menu-nav {
width: 400px;
}

/* nav-toggle */
#nav-toggle {position: fixed;top:0;right:0;height: 36px;cursor:pointer;background:#000;padding:20px;}
#nav-toggle > div {position: relative;width: 50px;}
#nav-toggle span {width: 100%;height: 4px;left: 0;display: block;background: #fff;position: absolute;transition: .35s ease-in-out;}

#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 15px;}
#nav-toggle span:nth-child(3) {top: 30px;}

#navi_overlay {display: none;position: fixed;background: rgba(0,0,0,.6);width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;}


/* サブメニューは開けない */
#nav_sp .sub-menu-head:after,
#nav_sp .sub-menu-nav {display: none;}
#nav-toggle {display: block;}

/* nav open */
.open {/*overflow: hidden;*/}
.open #navi_overlay {display: block;}
.open #sidebar  {transform: translate3d(-400px,0,0);}

/* #nav-toggle close */
.open #nav-toggle span:nth-child(1) {top: 11px;transform: rotate(45deg);}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {top: 11px;transform: rotate(-45deg);}

/* z-index */
#navi_overlay {z-index: 2;}
#sidebar {z-index: 300;}
#nav-toggle {z-index: 400;}