@charset "UTF-8";

/* ----------------------------------
renovation LP / sp css
---------------------------------- */

html{
overflow-x : hidden;
overflow-y : auto;
}

.sp {display: none !important; }


@media screen and (max-width: 1099px), screen and (orientation: landscape) and (max-width: 1100px) {

.pc {display: none !important;}
.sp {display: block !important;}

body {font-size:1.5rem;}



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

#sidebar {
display:block;
position: fixed;
right: -300px;
top: 0;
height: 100%;
width: 300px;
color: #fff;
transition: .35s ease-in-out;
overflow-y:auto;
}

#nav_sp {margin:0 0 100px 0;}

/* nav-toggle */
#nav-toggle {position: fixed;top: 0;right: 0;height: 28px;cursor:pointer;padding:14px;}
#nav-toggle > div {position: relative;width: 30px;}
#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: 12px;}
#nav-toggle span:nth-child(3) {top: 24px;}

/* サブメニューは開けない */
#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(-300px,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;}




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

header {width:100%;}
header ul.headbtn {display:none;}

.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:70%;height:115px;padding:20px 0 0 20px;background:none;position:absolute;top:0;left:0;transition: .3s;z-index:10;}
.swiper-container h1 img {width:100%;max-width:500px;}
.swiper-container .text {display:block;width:90%;max-width:800px;margin:auto;position:absolute;top:110px;left:0;right: 0;
z-index:10;}

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

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

.swiper-container .estimateArea .estimate_title {font-size:1.8rem;color:#d3c195;text-align:center;}

.swiper-container .estimateArea .inner .fl {float:left;width:70%}
.swiper-container .estimateArea .inner .box1 {float:none;width:100%;margin:0 0 0 0;}
.swiper-container .estimateArea .inner .box2 {display:none;padding:0;}
.swiper-container .estimateArea .inner .box3 {float:none;width:100%;margin:0 ;}
.swiper-container .estimateArea .inner .box4 {float:right;width:20%;margin:0 ;padding:110px 0 0 0;}
.swiper-container .estimateArea .inner .box5 {padding:0 0 0 0;line-height:1.2;color: #b8a36f;}
.swiper-container .estimateArea .inner .box5 .result {diplay: inline-block;font-size:2rem;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:3.4rem;}
.swiper-container .estimateArea .inner .box5 .result .retry {float:right;display:block;font-size:1.2rem;font-weight:normal;padding:5px 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 10px 0;}
.swiper-container .estimateArea .inner .box5 .note2 {font-size:1.5rem;font-weight:bold;}
.swiper-container .estimateArea .inner .box5 .note2 a {font-size:1.2rem;font-weight:normal;display:inline-block;padding:4px 15px;background:#d3c195;text-decoration:none;color:#000;margin:5px 0 0 0;}

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

.swiper-container .estimateArea .inner .box5 ul.inqbox {width:100%;margin:10px auto 0 auto;list-style:none;display:flex;justify-content: space-between;}
.swiper-container .estimateArea .inner .box5 ul.inqbox li {width:48%;}
.swiper-container .estimateArea .inner .box5 ul.inqbox li a {display:block;width:100%;padding:8px 0;background:#333;text-decoration:none;border:1px solid #ccc;font-size:1.1rem;}

.swiper-container .estimateArea .inner a .go {display:block;width:70px;margin:10px 0 0 0}
.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;}


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

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

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

#flatrate .inner dl {margin:0 0 50px 0;}
#flatrate .inner dl dt h3 {line-height:2;color:#b8a36f;font-size:2.2rem;border-bottom:2px solid #b8a36f;padding:0 0 20px 0;margin:0 0 20px 0;}
#flatrate .inner dl dd {line-height:2;font-size:1.5rem;}
#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:flex;list-style:none;margin:0 auto 40px auto;}
#flatrate .inner ul.btn_contact li {float:none;margin:0 20px 0 0;width:38%;}
#flatrate .inner ul.btn_contact li:nth-child(2) {width:54%;}
#flatrate .inner ul.btn_contact li img { width:100%;}
#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:90%;padding:50px 0 50px 0;margin:auto;}
#lineup .inner h2 {font-size:2rem;color:#fbde96;text-align:center;background:#000;padding:10px ;margin:0 0 30px 0;}
#lineup .inner h3 {font-size:2rem;font-weight:900;}

#lineup .inner .category {margin:0 0 50px 0;display:block;}
#lineup .inner .category div {width:100%;margin:0 0 40px 0;}

#lineup .inner ul.detail {list-style:none;border-left:2px solid;margin:30px 0 0 0;}
#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 {background:url(../img/lineup_line.jpg) 0 45% no-repeat;}



/* 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:90%;padding:40px 0 50px 0;margin:auto;}
#cost .inner h2 {font-size:3rem;color:#dacd8b;text-align:center;margin:0 0 40px 0;}
#cost .inner h3 {font-size:2rem;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.7rem;line-height:1.8;padding:0;margin:0 0 50px 0;}

#cost .inner ul.list {list-style:none;display:block;}
#cost .inner ul.list li {width:100%;font-weight:100;}
#cost .inner ul.list li.plus {width:100%;margin:20px 0 20px 0;text-align:center;}
#cost .inner ul.list li h3 {margin:0 0 20px 0;text-align:center;}

#cost h4 {position: relative;display: inline-block;z-index: 1;width:60%;text-align:right;font-size:2.4rem;padding:7px 80px 10px 0;margin:0 0 10px 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:90%;padding:10px 5% 20px 5%;margin:0 auto 100px auto;background:#121212;border:1px solid #474747;color:#d0d0d0;}
#cost .inner .case2 {float:right;position:relative;width:90%;padding:10px 5% 20px 5%;margin:0 auto 50px auto;background:#121212;border:1px solid #474747;color:#d0d0d0;}

#cost .inner .case1 .pict,
#cost .inner .case2 .pict {position:static;top:0;left:calc(50% - 215px);width:100%;max-width:430px;}
#cost .inner .case1 .title,
#cost .inner .case2 .title{position:absolute;top:170px;left:-20px;}
#cost .inner .case1 table,
#cost .inner .case2 table {margin:60px 0 30px 0;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:flex;list-style:none;margin:0 auto 40px auto;}
#cost .inner ul.btn_contact li {float:none;margin:0 20px 0 0;width:38%;}
#cost .inner ul.btn_contact li:nth-child(2) {width:54%;}
#cost .inner ul.btn_contact li img { width:100%;}
#cost .inner ul.btn_contact::after {content: "";display: block;clear: both;}


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

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

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

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


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


#faq {}
#faq .inner {width:90%;position:relative;padding:50px 5% 50px 5%;margin:auto;}

#faq .inner h2 {font-size:4rem;letter-spacing:4px;color:#fff;padding:0 0 0 0;margin:0 0 40px 0;text-align:center;background:none;}
#faq .inner h2 span {color:#d03b00;}


#faq dl {margin:0 0 5px 0;}
#faq dt {padding: 8px 50px 14px 20px;position: relative;font-size:1.6rem;cursor: pointer;color:#fff;}
#faq dt:before {content:"Q. ";font-size:2rem;font-weight:bold;}
#faq dt:hover {}
#faq dd {padding: 10px 10px 10px 50px;font-size:1.5rem;display: none;background:#fff;}
#faq dd:before {content:"A. ";font-size:2.4rem;font-weight:bold;margin:0 0 0 -1.2em;}



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

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

#slider .inner ul {width:100%;list-style:none;display:flex;justify-content: space-between;flex-wrap: wrap;}
#slider .inner ul li {width:100%;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;}
.slider__inner .slider__item img {}

.swiper-button-next {display:none !important;}
.swiper-button-prev {display:none !important;}



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

footer {background: #000;color:#fff;width: 100%;}
footer .inner .logo {display:block;margin:auto;width: 90%;max-width:500px;}
footer .inner {width: 90%;margin: 0 auto;padding: 50px 0 150px 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:0;width:100%;}
footer .inner dl.company dt {float:none;width:100%;padding:30px 0 20px 0;text-align:center;}
footer .inner dl.company dt .copy {font-size: 1.4rem;letter-spacing:1px;padding:10px 0 0 0;}
footer .inner dl.company dd {float:none;width:100%;padding:0 0 0 0;border-left:none;line-height:2.2;}
footer .inner dl.company::after {content: "";display: block;clear: both;}



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

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


#floating {position:fixed;width:100%;z-index:2;}
#floating .inner {width:90%;margin:auto;padding:20px 5%;}

#floating .inner ul.btn_contact {display:flex;list-style:none;margin:0 auto 0 auto;}
#floating .inner ul.btn_contact li {float:none;margin:0 20px 0 0;width:38%;}
#floating .inner ul.btn_contact li:nth-child(2) {width:54%;}
#floating .inner ul.btn_contact li img { width:100%;}
#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 {width:90% !important;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;}
.modaal-container dl dt img {width:100%;max-width:300px;}



/* END
------------------------------------------------------------- */
}