@charset 'utf-8';
/*
Theme Name: 鹿児島リフォーム専科
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal}
a { color: #222; transition: all .2s ease-out; text-decoration: none;}
a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; height: 100%; font-family: 'Noto Sans JP', YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 1.4; color: #222;}
#container { width: 100%; overflow: hidden;}
#loading { z-index: 100000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #FFF url("img/common/loading.svg") center center no-repeat;}
i, time, .deco, .faq dt::before, .faq dd::before { font-family: 'Montserrat', sans-serif; line-height: 1!important;}


/*HEADER*/
/*******************************************************************/
#header { position: absolute; top: 0; left: 0; display: flex; align-items: center; width: 100%; height: 80px; padding: 0 35px; z-index: 10001;}
#logo span { display: block; margin-bottom: 4px; font-size: 1.4rem; font-weight: 400; color: #6E6E6E;}
#logo img { vertical-align: top;}
#nav .btn a { padding: 12px 24px; font-size: 1.6rem; box-shadow: 0 3px 0 rgba(0,0,0,.1);}
#nav .btn a:hover { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.1); opacity: 1;}
@media only screen and (min-width: 1281px){
#nav { display: flex; align-items: center; margin-left: auto; white-space: nowrap;}
#nav > ul { display: flex; align-items: center;}
#nav > ul > li { position: relative; margin-left: 1.6vw; padding: 10px 0;}
#nav ul ul { pointer-events: none; opacity: 0; position: absolute; top: 100%; left: 50%; min-width: 260px; transform: translateX(-50%); transition: .2s ease-out;}
#nav ul ul li:not(:first-child) { border-top: 1px solid rgba(51,51,51,.9);}
#nav ul ul li a { display: block; padding: 12px 24px; background: rgba(0,0,0,.9) url("img/common/right.svg") right 16px center no-repeat; background-size: 8px auto; font-size: 1.5rem; color: #FFF;}
#nav > ul > li:hover ul { pointer-events: auto; opacity: 1;}
#open { display: none;}
}


/*FOOTER*/
/*******************************************************************/
#footer { margin-top: 80px;}
#pack { position: relative; padding: 120px 4.8vw 100px; text-align: center;}
#pack::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 76%; background: url("img/common/pack.jpg") center top no-repeat; background-size: cover; z-index: -1;}
#pack li:not(:first-child) { margin-top: 20px;}
#contactnav { padding: 0 4.8vw 96px; background: #58C46D;}
#contactnav > i { display: block; transform: translateY(-44px); text-align: center; font-size: 15.8rem; color: #3FAC54;}
#contactnav ul { display: flex; max-width: 840px; margin: 0 auto; text-align: center; color: #FFF;}
#contactnav li { width: 45%;}
#contactnav li:not(:first-child) { flex: 1; border-left: 1px solid #D3D3D3;}
#contactnav h3 { font-size: 2.2rem;}
#contactnav figure { margin: 24px;}
#contactnav .tel { font-size: 1.6rem; font-weight: 500;}
#contactnav .tel a { display: inline-block; margin-bottom: 8px; font-size: 3.6rem; font-weight: 700; line-height: 1; color: #FFF;}
#contactnav .btn { margin-top: 0;}
#contactnav .btn a { max-width: 375px; padding: 16px 32px; background: #222;}
#area { position: relative; display: flex; max-width: calc(1200px + 9.6vw); margin: 0 auto; padding: 64px 4.8vw;}
#area::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: rgb(236,253,255); background: linear-gradient(90deg, rgba(236,253,255,1) 0%, rgba(252,254,231,1) 100%); z-inex: -1;}
#area h2 { position: relative; margin-bottom: 16px; font-size: 2.3rem; font-weight: 900; white-space: nowrap; z-index: 1;}
#area h2 i { display: block; font-size: 8.4rem; font-weight: 800; color: #3FAC54; z-index: 1;}
#area > div { position: relative; flex: 1; padding-left: 48px;}
#area h3 { margin-bottom: 16px; font-size: 2rem; color: #FFAA08;}
#area .area { padding-bottom: 1.8em;}
#area li { display: inline-block; font-size: 1.6rem; font-weight: 400; line-height: 1.8;}
#area li:not(:last-child)::after { content: '｜';}
#area p { margin-top: 16px; font-size: 1.2rem; font-weight: 400; color: #6E6E6E;}
#footerlink { position: relative; display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; max-width: calc(1200px + 9.6vw); margin: 0 auto; padding: 64px 4.8vw; color: #FFF;}
#footerlink::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #222; z-inex: -1;}
#footerlink nav { position: relative; flex: 1; text-align: right; z-index: 1;}
#footerlink nav > ul { display: inline-block; columns: 3;  margin-left: 48px; text-align: left;}
#footerlink nav > ul > li { padding: 16px 0;}
#footerlink nav > ul > li a { font-weight: 400; color: #B9B9B9; white-space: nowrap;}
#footerlink address { position: relative; display: block; padding: 16px 0; z-index: 1;}
#footerlink address span { display: block; padding-top: 16px; font-size: 1.2rem; font-weight: 400; font-style: normal; color: #6C6C6C; z-index: 1;}
#footerlink address span > a { display: block; padding-top: 16px; font-size: 1.2rem; font-weight: 400; font-style: normal; color: #6C6C6C; z-index: 1;}


/*CONTENTS*/
/*******************************************************************/
article { position: relative; padding: 80px 4.8vw;}
article header { position: relative; max-width: 1200px; margin: 0 auto 48px; text-align: center;}
article header h2 { position: relative; font-size: 4.2rem; line-height: 1.2;}
article header h2.fst { color: #222222;}
article header i { position: relative; display: block; margin-top: 16px; font-size: 1.8rem; font-weight: 800; color: #58C46D;}
.num { font-size: 1.6rem;}
.num span { display: block; margin-bottom: 8px; font-size: 8rem;}
article header p { margin-top: 40px; font-size: 1.8rem; font-weight: 500;}
section { position: relative; max-width: 1200px; margin: 0 auto;}
section + header, section + section { margin-top: 64px;}
section h2 { margin-bottom: 24px; font-size: 3.0rem;}
section h3 { margin-bottom: 24px; font-size: 2.8rem;}
section h4 { margin-bottom: 20px; font-size: 2.6rem; color: #48BEBE;}
section h5 { margin-bottom: 12px; font-size: 2.0rem; color: #58C46D; padding: 0.1em 0.5em 0.2em 0.5em; line-height: 1.5em; background: transparent; border-left: solid 5px #58C46D;}
section p { line-height: 1.8;}
section p:not(:last-child) { margin-bottom: 12px;}
section p.hoshi { color: #218dd2;}
figure { position: relative;}
.bg { background: #F8FDF9;}
.center { text-align: center!important;}
.right { text-align: right!important;}
.left { text-align: left!important;}
.bottom { vertical-align: bottom!important;}
.row { display: flex; margin: 0 -20px -40px;}
.row + * { margin-top: 40px;}
.row > * { flex: 1; margin: 0 20px 40px;}
.w33 { flex: none; width: calc(33% - 40px);}
.reverse { flex-direction: row-reverse;}
.as-center { align-self: center;}
.btn { text-align: center;}
.btn a { position: relative; display: inline-block; padding: 8px 24px; background: rgb(162,216,89); background: linear-gradient(90deg, rgba(162,216,89,1) 0%, rgba(81,186,106,1) 100%); border-radius: 40px; font-size: 2rem; font-weight: 700; color: #FFF; box-shadow: 0 5px 0 rgba(0,0,0,.1);}
.btn a:hover { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.1); opacity: 1;}
.fs12 { font-size: 1.2rem;}
.fs14 { font-size: 1.4rem;}
.fs16 { font-size: 1.6rem;}
.fs20 { font-size: 2.0rem;}
.fs22 { font-size: 2.2rem;}
.fs24 { font-size: 2.4rem;}
.fs29 { font-size: 2.9rem;}
.fs30 { font-size: 3.0rem;}
.fs32 { font-size: 3.2rem;}
.fs34 { font-size: 3.4rem;}
.fs44 { font-size: 4.4rem;}
.fs46 { font-size: 4.6rem;}
.fs50 { font-size: 5.0rem;}
.fs56 { font-size: 5.6rem;}
.fs60 { font-size: 6.0rem;}
.green { color: #58C46D;}
.olive { color: #9CD65A;}
.red { color: #FF3838;}
.orange { color: #FFAA08;}
.blue { color: #48BEBE;}
.regular { font-weight: 400; font-size: 1.2rem}
.bold { font-weight: 700;}
.black { font-weight: 900;}
.underline { text-decoration: underline;}
.sp { display: none;}
.fit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;';}
.fadeInUp{ animation-name: fadeInUp;}
.mt20 { margin-top: 20px; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);}}
.animated { opacity: 0; animation-duration: 0.7s; animation-delay: 0.2s; animation-fill-mode: both;}


/*TOP*/
#mv { position: relative; height: 100vh; background: url("img/top/mv.jpg") center no-repeat; background-size: cover; overflow: hidden;}
#mv section { max-width: initial}
#mv h1 { padding-top: 8vh;}
#scroll { position: absolute; left: 4.8vw; bottom: 32px;}
#scroll a { display: block; padding: 16px 48px 16px 0; background: url("img/top/scroll.svg") right center no-repeat; font-size: 1.2rem; font-weight: 700;}
#about { padding-bottom: 0; background: url("img/top/about_bg1.svg") center 80px no-repeat;}
#about section { padding-bottom: 80px;}
#about section::before { content: ''; position: absolute; top: 40px; left: calc(50% - 50vw); width: 100vw; height: calc(100% - 40px); background: url("img/top/about_bg2.jpg") center no-repeat; background-size: cover; z-index: -1;}
#about ul { max-width: 1000px; margin: 0 auto;}
#about li { width: calc(100% / 3 - 30px); margin: 0 15px; text-align: center; background: #FFF; box-shadow: 8px 8px 0 rgba(0,0,0,.11);}
#about li h3 { margin-bottom: 0; padding: 24px 16px 0; font-size: 2.6rem; font-weight: 900; color: #FFAA08;}
#about li p { padding: 16px; font-weight: 700;}
#reason::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: rgb(236,253,255); background: linear-gradient(90deg, rgba(236,253,255,1) 0%, rgba(252,254,231,1) 100%); z-inex: -1;}
#reason header i { margin-top: -136px; font-size: 15.8rem;}
#reason ul { max-width: 800px; margin: 0 auto -40px; justify-content: space-around;}
#reason li { flex: none; text-align: center;}
#reason li h3 { margin: 24px 0 0;}
#lineup { padding-top: 186px; background: url("img/top/lineup_bg.jpg") center top no-repeat, linear-gradient(90deg, rgba(236,253,255,1) 0%, rgba(252,254,231,1) 100%);}
#lineup header { flex: none; margin: 0 auto 24px 20px; text-align: left;}
#lineup header i { font-size: 8.4rem;}
#lineup header h2 { font-size: 2.3rem;}
.lineupbox { max-width: 1320px; margin: 0 auto; padding: 60px 60px 80px; background: #FFF;}
.lineupbox .row { flex-wrap: wrap;}
#lineup { padding-bottom: 0;}
#lineup .price { flex: none;}
#lineup .pricebox { min-height: initial;}
.price span { display: inline-block; vertical-align: middle;}
.pricebox { display: inline-block; min-height: 96px; margin: 8px 16px; padding: 16px; vertical-align: middle; background: #FF3838; border-radius: 5px; font-size: 2.9rem; font-weight: 700; color: #FFF;}
.pricebox img { margin: 0 8px; vertical-align: middle;}
.underbar { padding-bottom: 16px; text-align: center; border-bottom: 4px solid #58C46D; font-size: 3.6rem;}
.product { max-width: 1080px; flex-wrap: wrap; margin: 0 auto -30px;}
.product li { flex: none; width: calc(50% - 60px); margin: 30px;}
.product li figure { padding-top: calc(260 / 480 * 100%); background: #F4F4F4;}
.product li figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.product li figure + div { position: relative; margin: -32px 32px 0; padding: 24px; background: #FFF; box-shadow: 8px 8px 0 rgba(0,0,0,.11); z-index: 1;}
.product li h3 { margin-bottom: 1px;}
.maker { font-weight: 400;}
.listprice { font-size: 1.6rem; font-weight: 400; color: #818181;}
.listprice_small { font-size: 1.2rem; font-weight: 400; color: #818181;}
.specialoffer { display: inline-block; margin-right: 20px; padding: 2px 4px; vertical-align: middle; background: #222; font-size: 1.6rem; font-weight: 400; color: #FFF;}
.productprice { display: inline-block; vertical-align: middle; font-size: 2rem; font-weight: 700;}
.productprice i { display: inline-block; vertical-align: baseline; font-size: 4.4rem;}
.tax { display: inline-block; vertical-align: bottom; font-size: 1.6rem; font-weight: 400;}
.loan-label { display: inline-block; margin-right: 20px; padding: 2px 4px; vertical-align: text-bottom; border: 1px solid #222; font-size: 1.6rem; font-weight: 400; }
.loan-price { display: inline-block; font-size: 2.5rem; vertical-align: bottom; }
.loan-price i { display: inline-block; font-size: 3rem; }
.packprice .loan-price { font-size: 4rem; vertical-align: inherit; }
.packprice .loan-price i { font-size: 5rem; }
#lineup .loan-price { font-size: 3rem; vertical-align: bottom;}
#lineup .loan-price i { font-size: 3.5rem; vertical-align: baseline;}

.yen { font-size: 1.7rem; }

/*PAGE*/
#title { margin-top: 80px;}
#titlebox { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 219px; padding: 24px 4.8vw; background: url("img/common/title.jpg") center no-repeat; background-size: cover; z-index: 10;}
#title h1 { font-size: 4.8rem;}
#title i { display: block; margin-top: 16px; font-size: 2.4rem; font-weight: 800; color: #3FAC54;}
#title ul { max-width: calc(1200px + 9.6vw); margin: 0 auto; padding: 24px 4.8vw 0;}
#title li { display: inline-block; font-size: 1.1rem; white-space: nowrap; line-height: 1;}
#title li:not(:first-child)::before { content: ' > ';}
.title { margin-bottom: 24px; padding-bottom: 8px; border-bottom: 2px solid #58C46D; font-size: 2.6rem;}
.whitebox { padding: 24px 40px; background: #FFF; border: 5px solid rgba(88,196,109,.1);}
.orangebox { padding: 24px 40px; background: #FFF; border: 5px solid rgba(255,170,8,.2);}
.service { justify-content: center; margin: 0 -10px; text-align: center;}
.service li { flex: none; margin: 0 10px;}
.service h4 { margin-top: 16px; font-size: 2.4rem;}
.service h5 { margin-top: 10px;}
.total { margin-top: 24px; padding: 24px; text-align: center; background: #EEE; border-radius: 5px;}
.ex li { margin: 16px 0;}

.pack header { margin-bottom: 0; padding: 40px; background: #32b8b8;}
.pack header i { color: #e1f9f9;}
.pack section { padding: 40px; border: 6px solid #32b8b8;}
.pack .product { position: relative; max-width: initial; margin: -20px;}
.pack .product::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 128px; height: 128px; background: url("img/product/greatvalue_pack.svg");}
.pack .product li { width: calc(50% - 40px); margin: 20px; padding: 30px; background: #e1f9f9; position: relative;}
.packtitle { margin-bottom: 16px; text-align: center; font-size: 2.6rem; font-weight: 700; color: #48BEBE;}
.packprice { display: flex; justify-content: center; align-items: center; font-weight: 700;}
.packprice p { margin-left: 32px;}
.packprice .listprice { font-size: 2rem; color: #666;}
.packprice .listprice i { vertical-align: baseline; font-size: 3rem;}
.packprice .productprice { font-size: 3rem;}
.packprice .productprice i { vertical-align: baseline; font-size: 7rem;}
.packprice .tb01 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  padding: 5px;
  background:#faf0ef;
}
#toto.pack header { background: #58c46d;}
#toto.pack header i { color: #e2fbe7;}
#toto.pack section { border-color: #58c46d;}
#toto.pack .product::after { background-image: url("img/product/toto_pack.svg");}
#toto.pack .product li { background: #e2fbe7;}
#toto .packtitle { color: #58C46D;}

#reason01::before { content: ''; position: absolute; top: 80px; right: 130px; display: block; width: 354px; height: 354px; background: url("img/reason/reason01.svg") center no-repeat; background-size: contain;}
#reason02::before { content: ''; position: absolute; top: 80px; right: 130px; display: block; width: 354px; height: 354px; background: url("img/reason/reason02.svg") center no-repeat; background-size: contain;}
#reason03::before { content: ''; position: absolute; top: 80px; right: 130px; display: block; width: 354px; height: 354px; background: url("img/reason/reason03.svg") center no-repeat; background-size: contain;}
#reason01 .reason li h3 { background-color: #48BEBE; background-image: url("img/reason/reason01_mark.svg");}
.reason li { display: flex; align-items: center; margin-top: 30px;}
.reason li h3 { display: flex; justify-content: center; align-items: center; width: 300px; height: 190px; margin: 0; text-align: center; background: #46B475 url("img/reason/reason03_mark.svg") center no-repeat; font-size: 3rem; font-weight: 700; color: #FFF;}
.reason li div { flex: 1; margin-left: 40px;}

.case li { padding: 60px; background: #F8FDF9;}
.case li:not(:first-child) { margin-top: 40px;}
.case li h2 { margin-bottom: 32px; text-align: center; font-size: 3.4rem;}
.beforeafter { display: flex; justify-content: space-between; margin-bottom: 32px;}
.beforeafter figure { width: calc(50% - 40px);}
.beforeafter figure img { border: 4px solid #FFF; box-shadow: 0 0 14px rgba(0,0,0,.08)}
.beforeafter figcaption { position: absolute; top: 0; left: 0; padding: 4px 16px; background: #FFF; font-size: 2rem; font-weight: 700; color: #58C46D;}
.beforeafter .after::before { content: ''; position: absolute; left: -50px; top: calc(50% - 25px); width: 30px; height: 50px; background: url("img/common/right.svg") center no-repeat;}
.beforeafter .after img { border-color: #58C46D;}
.beforeafter .after figcaption { background: #58C46D; color: #FFF;}

#tel { max-width: 1200px; margin: 80px auto 0; padding: 60px; background: #F8FDF9;}
#tel p { text-align: center; color: #58C46D;}
#tel p a { display: inline-block; padding-left: 40px; background: url("img/common/tel.svg") left center no-repeat; font-size: 5rem; font-weight: 700; color: #58C46D; line-height: 1;}
.form { max-width: 900px; margin: 48px auto 0;}
.form dt { clear: both; float: left; width: 28%; padding-top: 16px; text-align: left; font-weight: 700;}
.form dd { padding: 0 0 40px 32%; text-align: left; line-height: 1.5em;}
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="date"] { display: inline-block; width: calc(100% - 8px); margin: 4px; padding: 12px; background: #FFF; border: 1px solid #E0E0E0; border-radius: 5px; vertical-align: middle;}
.form select { margin: 4px; padding: 12px 24px 12px 12px; background: #FFF url("img/case/select.svg") right 16px center no-repeat;  border: 1px solid #E0E0E0; border-radius: 5px;}
.form textarea { width: calc(100% - 8px); min-height: 200px; margin: 4px; padding: 12px; background: #FFF; border: 1px solid #E0E0E0; border-radius: 5px;}
.form label { display: inline-block;}
.form input[type="checkbox"] { display: none;}
.form input[type="checkbox"] + span { position: relative; display: block; padding: 4px 0 4px 24px; line-height: 1;}
.form input[type="checkbox"] + span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 16px; background: #FFF; border: 1px solid #CCC;}
.form input[type="checkbox"]:checked + span::before { background: #EC5312; border: 3px solid #FFF;}
.form input[type="radio"] { display: none;}
.form input[type="radio"] + span { position: relative; display: block; padding: 2px 0 4px 24px; line-height: 1;}
.form input[type="radio"] + span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 16px; background: #FFF; border: 1px solid #CCC; border-radius: 50%;}
.form input[type="radio"]:checked + span::before { background: #EC5312; border: 3px solid #FFF;}
.form input.short { width: 50%;}
.submit { text-align: center;}
.submit input[type='submit'] { position: relative; display: inline-block; width: 100%; max-width: 500px; padding: 16px 24px; background: rgb(162,216,89); background: linear-gradient(90deg, rgba(162,216,89,1) 0%, rgba(81,186,106,1) 100%); border-radius: 40px; font-size: 2rem; font-weight: 700; color: #FFF; box-shadow: 0 5px 0 rgba(0,0,0,.1);}
.submit input[type='submit'].disabled { background: #999;}
.submit input[type='submit']:not(.disabled):hover { opacity: 0.7;}
.submit input[type='button'] { display: inline-block; margin: 0 16px; padding: 24px 80px; background: #999; border-radius: 32px; font-weight: 700; color: #FFF;}
.must { margin-left: 16px; padding: 2px 8px; background: #58C46D; font-size: 1.6rem; font-weight: 700; color: #FFF;}
.form ::-webkit-input-placeholder { font-weight: 400; color: #DBDBDB;}
.form ::-moz-placeholder { font-weight: 400; color: #DBDBDB;}
.form :-ms-input-placeholder { font-weight: 400; color: #DBDBDB;}
.wpcf7-form-control-wrap {}
span.wpcf7-list-item { display: inline-block; padding: 0 8px;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { font-size: 1.6rem;}
.fileselect { border: 2px solid #58C46D;}
.filebtn { position: relative; padding: 16px; text-align: center; background: #F7FCF8; font-size: 1.6rem; font-weight: 700; color: #58C46D; cursor: pointer;}
.filebtn::after { content: ''; position: absolute; top: calc(50% - 4px); right: 24px; width: 12px; height: 8px; background: url("img/common/select.svg") center no-repeat; background-size: 12px auto;}
.filebtn.on::after { transform: rotate(180deg);}
.filebox { display: none; padding: 24px;}
.filebox p { text-align: center; font-weight: 700;}
.filebox li { margin: 8px 0;}

.flow li { position: relative; display: flex; align-items: center; padding: 60px; background: #F8FDF9; border: 5px solid #E8F7EB;}
.flow li:not(:first-child) { margin-top: 60px;}
.flow li:not(:first-child)::before { content: ''; position: absolute; top: -45px; left: calc(50% - 18px); width: 35px; height: 18px; background: url("img/common/down.svg") center no-repeat;}
.flow li div { flex: 1; padding: 40px;}
.flow li figure { width: 37%;}
.step { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 118px; height: 118px; background: #58C46D; border-radius: 50%; font-size: 2rem; font-weight: 700; color: #FFF;}
.step span { display: block; font-size: 5.5rem;}

.flow li .ecp, .flow li.cp { line-height: 1.5; padding: 0.5em;}
.flow li .cp:not(:first-child) { margin-top: 10px;}
.flow li .cp:not(:first-child)::before { background: initial;}

.voice li { padding: 60px; background: #F2FBFB;}
.voice li:not(:first-child) { margin-top: 50px;}
.voice li h2 { margin-bottom: 32px; text-align: center; font-size: 3.4rem; font-weight: 700;}
.voice li .title { border-color: #48BEBE;}

.faq dt { position: relative; margin-top: 20px; font-size: 2.0rem; padding: 20px 40px 20px 70px; background: #F9FCF5 url("img/common/plus.svg") right 20px center no-repeat; border: 3px solid #E6F4D5; font-weight: 700; cursor: pointer; transition: .2s ease-out;}
.faq dt::before { content: 'Q'; position: absolute; top: 20px; left: 24px; font-weight: 800; font-size: 2.4rem; color: #7AAD3F;}
.faq dd { position: relative; display: none; padding: 20px 40px 20px 70px; font-size: 1.8rem; line-height: 1.8;}
.faq dd::before { content: 'A'; position: absolute; top: 24px; left: 24px; font-weight: 800; font-size: 2.4rem; color: #7AAD3F;}
.faq dt.on { background-image: url("img/common/minus.svg");}
.bg .faq dt { background-color: #FFF;}

#productmain { display: flex;}
#content { flex: 1; padding-left: 40px;}
#content h2 { margin-bottom: 16px; font-size: 3rem;}
.komi { margin-bottom: 24px; font-size: 2rem; font-weight: 700;}
.komi ul { display: flex; flex-wrap: wrap; justify-content: center;}
.komi li { display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; margin: 4px; text-align: center;border: 3px solid #58C46D; border-radius: 50%; color: #58C46D;}
.komi p { text-align: center; color: #FF3838; font-size: 2.4rem;}
#content .text h3 { margin-top: 32px; padding-top: 32px; border-top: 1px solid #E0E0E0;}
#text h3 p.star { color: #218dd2;}
#content .text h4 { margin-top: 32px; padding-top: 32px; border-top: 1px solid #E0E0E0; color: #58C46D;}
#content .text h5 { margin-top: 30px; }
#image { width: 55%; overflow: hidden;}
#image .swiper-pagination-thumbs figure { padding-top: 100%; background: #EDEDED;}
#image .swiper-pagination-thumbs figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { width: auto; border: 0;}
.swiper-pagination-thumbs { display: flex; flex-wrap: wrap; margin: 6px -6px;}
.swiper-pagination-thumb { width: calc(100% / 4 - 12px); margin: 6px; cursor: pointer; transition: opacity .2s ease-out;}
.swiper-pagination-thumb:not(.swiper-pagination-thumb-active) { opacity: 0.5;}

#reform { display: flex; padding: 0;}
#reform > * { flex: 1;}
#reform figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#reform section { padding: 60px;}

.company-table { margin: 0 auto; width: 100%; max-width: 900px; text-align: left; border-collapse: separate; border-spacing: 10px;}
.company-table th { padding: 20px 0px 10px; width: 24%; border-bottom: 2px solid #58C46D; vertical-align: bottom;}
.company-table td { padding: 20px 20px 10px; border-bottom: 2px solid #ccc;}
.disc { margin-left: 1.5em; list-style: disc;}
.disc + * { margin-top: 16px;}
.disc li + li { margin-top: 8px;}

.relief li { position: relative; display: flex;}
.relief li:not(:first-child) { margin-top: 32px; padding-top: 32px; border-top: 1px solid #E5E5E5;}
.relief li > div { flex: 1; padding: 24px 0 0 32px;}
.relief li > i { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 81px; height: 81px; background: url("img/flow/heart.svg") center no-repeat; background-size: contain; border-radius: 50%; font-size: 2.8rem; font-weight: 700; color: #FFF;}
.relief li h3 { font-size: 2.2rem; color: #7AAD3F;}
.sma{ display: none;}


@media only screen and (min-width: 1921px){
#lineup { background-size: 100% auto, auto;}
}



@media only screen and (max-width: 1280px){
#header { height: 70px; padding: 0;}
#logo { width: 50%; padding-left: 16px; z-index: 1000;}
#logo span { font-size: 1rem;}
#nav { pointer-events: none; opacity: 0; transform: scale(0.9); position: fixed; top: 0; left: 0; width: 100%; max-width: 100%; height: 100vh; margin: 0; padding: 80px 8vw 160px; background: #FFF; overflow: auto; z-index: 200; -webkit-transition: .8s cubic-bezier(.19,1,.22,1); transition: .8s cubic-bezier(.19,1,.22,1);}
#nav > ul { display: block;}
#nav > ul > li a, #nav > ul > li span { display: block; padding: 25px 15px; font-size: 1.9rem;}
#nav > ul > li:not(:last-of-type) a, #nav > ul > li span { border-bottom: solid 2px #000;}
#nav > ul > li span { position: relative; cursor: pointer;}
#nav > ul > li span::before, #nav > ul > li span::after { content: ''; position: absolute; top: 50%; right: 15px;transform: translateY(-50%); display: block; width: 15px; height: 2px; background-color: #000;}
#nav > ul > li span::after { transform: translateY(-50%) rotate(90deg); transition: .2s ease-out;}
#nav > ul > li span.on::after { transform: translateY(-50%) rotate(0deg);}
#nav ul ul { display: none; margin-left: 30px; text-align: left; vertical-align: top;}
#nav .btn { margin-top: 40px;}
#nav .btn a { display: block; font-size: 1.9rem;}
#nav .sp { display: block;}
#open { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 70px; height: 70px; margin-left: auto; text-align: center; background: rgb(162,216,89); background: linear-gradient(90deg, rgba(162,216,89,1) 0%, rgba(81,186,106,1) 100%); cursor: pointer; z-index: 9999;}
#open i { display: block; margin-top: 8px; font-size: 1.2rem; color: #FFF;}
#open div { position: relative; display: block; width: 40px; height: 18px; transition: .2s linear;}
#open span { position: absolute; left: 0; display: block; width: 40px; height: 2px; background: #FFF; transition: .2s linear;}
#open span:nth-child(1) { top: 0;}
#open span:nth-child(2) { top: 8px;}
#open span:nth-child(3) { top: 16px;}
.open #open span:nth-child(1) { top: 8px; transform: rotate(45deg);}
.open #open span:nth-child(2) { width: 0; left: -26px;}
.open #open span:nth-child(3) { top: 8px; transform: rotate(-45deg);}
.open #nav { pointer-events: auto; opacity: 1; transform: scale(1);}
.open #nav li { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
body.is-fixed { width: 100%; overflow: hidden;}
#footerlink { display: block;}
#footerlink nav { margin: 0 0 40px; text-align: center;}
#footerlink address { text-align: center;}
}





@media only screen and (max-width: 1024px){
body { font-size: 1.6rem;}
#footer { margin-top: 40px;}
#pack { padding: 48px 4.8vw;}
#contactnav { padding: 0 4.8vw 48px;}
#contactnav > i { transform: translateY(-24px); font-size: 5.6rem;}
#contactnav ul { display: block;}
#contactnav li { width: auto;}
#contactnav li:not(:first-child) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #D3D3D3; border-left: none;}
#area { display: block; padding: 48px 4.8vw;}
#area > div { padding-left: 0;}
#footerlink { display: block; padding: 48px 4.8vw;}
#footerlink nav > ul { columns: 2; margin-left: 0;}
#footerlink nav > ul > li { padding: 8px 0; font-size: 1.2rem;}
#footerlink address { text-align: center;}
#footerlink address span { font-size: 1rem;}

article { position: relative; padding: 48px 4.8vw;}
article header { margin-bottom: 32px;}
article header h2 { font-size: 2.6rem;}
section { position: relative;}
section + section { margin-top: 48px;}
section h2 { font-size: 2rem;}
section h3 { font-size: 2rem;}
section h4 {  font-size: 1.8rem;}
figcaption { font-size: 1.1rem;}
.row { display: block; margin: 0;}
.row > * { width: auto!important; margin: 0 0 24px!important;}
.btn a { font-size: 1.5rem;}
.fs12 { font-size: 1rem;}
.fs14 { font-size: 1.2rem;}
.fs16 { font-size: 1.3rem;}
.fs20 { font-size: 1.6rem;}
.fs22 { font-size: 1.7rem;}
.fs24 { font-size: 1.8rem;}
.fs29 { font-size: 2rem;}
.fs30 { font-size: 2.1rem;}
.fs32 { font-size: 2.2rem;}
.fs34 { font-size: 2.2rem;}
.fs44 { font-size: 2.4rem;}
.fs46 { font-size: 2.8rem;}
.fs50 { font-size: 2.8rem;}
.fs56 { font-size: 3.2rem;}
.fs60 { font-size: 3.4rem;}
.sp { display: block;}
.pc { display: none!important;}


/*TOP*/
#mv { height: 67vh; margin-top: 70px; padding-top: 12px; background-image: url("img/top/mv_sp.jpg");}
#mv h1 { width: 64%; max-width: 340px; padding-top: 0;}
#scroll { display: none;}
#reason header i { margin-top: -72px; font-size: 7.2rem;}
#reason ul { margin-bottom: 24px;}
#reason li { display: flex; align-items: center;}
#reason li h3 { margin: 0 0 0 24px;}
#lineup { padding-top: 80px; background-size: 150% auto, auto;}
#lineup header i { font-size: 5.6rem;}
#lineup header h2 { font-size: 2rem;}
.lineupbox { padding: 32px 24px;}
.price { text-align: center;}
.pricebox { display: block!important; min-height: initial; margin: 8px 0; font-size: 2.4rem;}
.pricebox img { margin: 8px;}
.underbar { font-size: 2.4rem;}
.product li figure + div { margin: -32px 16px 0; padding: 16px;}
.product li h3 { font-size: 1.6rem;}
.maker { font-size: 1.2rem;}
.listprice { font-size: 1.2rem;}
.listprice_small { font-size: 0.8rem;}
.specialoffer { margin: 4px 4px 4px 0; font-size: 1.3rem;}
.productprice { font-size: 1.2rem;}
.productprice i { font-size: 3.0rem; margin: 0px 0px 0px 5px; }
.tax { font-size: 1rem;}
.loan-label { margin: 4px 9px 4px 0; font-size: 1.3rem; }
.loan-price { font-size: 2rem; vertical-align: text-bottom; }
.loan-price i { display: inline-block; font-size: 2rem; }
.yen { font-size: 1.2rem; }
.packprice .loan-label { margin: 0; vertical-align: baseline; }
.packprice .loan-price { font-size: 3rem; vertical-align: inherit; }
.packprice .loan-price i { font-size: 3.5rem; }
#lineup .loan-price { font-size: 1.2rem; vertical-align: text-bottom;}
#lineup .loan-price i { font-size: 2.8rem; vertical-align: baseline;}


/*PAGE*/
#titlebox { min-height: initial;}
#title h1 { font-size: 2.8rem;}
#title li { font-size: 1rem;}
.title { font-size: 2rem;}
.whitebox, .orangebox { padding: 24px;}
.service { display: flex; flex-wrap: wrap; justify-content: center;}
.service li { flex: none; width: calc(50% - 10px); margin: 5px!important;}
 
.pack header { padding: 24px;}
.pack section { padding: 20px;}
.pack .product::after { display: none;}
.pack .product li { padding: 24px 10px;}
.pack .product li:not(:last-of-type)::before, .pack .product li:not(:last-of-type)::after { content: ""; width: 30px; height: 5px; background: #48BEBE; position: absolute; top: 102%; left: 0; right: 0; margin: auto;}
.pack .product li:not(:last-of-type)::after{ transform: rotate(90deg); z-index: 1;}
#toto.pack .product li:not(:last-of-type)::before, #toto.pack .product li:not(:last-of-type)::after{ background: #58C46D;}
.packtitle { font-size: 2rem;}
.packprice { display: block; text-align: center;}
.packprice p { margin: 16px 0 0;}
.packprice .listprice { font-size: 1.4rem;}
.packprice .listprice i { font-size: 2rem;}
.packprice .productprice { font-size: 2rem;}
.packprice .productprice i { font-size: 4rem;}

#reason01::before { content: ''; position: absolute; top: 80px; right: 130px; display: block; width: 354px; height: 354px; background: url("img/reason/reason01.svg") center no-repeat; background-size: contain;}
#reason02::before { content: ''; position: absolute; top: 80px; right: 130px; display: block; width: 354px; height: 354px; background: url("img/reason/reason02.svg") center no-repeat; background-size: contain;}
#reason03::before { content: ''; position: absolute; top: 80px; right: 130px; display: block; width: 354px; height: 354px; background: url("img/reason/reason03.svg") center no-repeat; background-size: contain;}
#reason01 .reason li h3 { background-color: #48BEBE; background-image: url("img/reason/reason01_mark.svg");}
.reason li { display: block;}
.reason li h3 { width: auto; height: 160px;}
.reason li div { margin: 16px 0 0;}

.case li { padding: 24px;}
.case li h2 { font-size: 2.4rem;}
.beforeafter { display: block;}
.beforeafter figure { width: auto;}
.beforeafter figcaption { font-size: 1.2rem; }
.beforeafter .after { margin-top: 40px;}
.beforeafter .after::before { left: calc(50% - 15px); top: -45px; transform: rotate(90deg) scale(0.8);}

#tel { margin-top: 48px; padding: 24px;}
#tel p a { font-size: 3.2rem;}
.form dt { float: none; width: auto;}
.form dd { display: block; padding: 24px 0;}
.form input[type='text'] { width: 100%;}
.form input[type='tel'] { width: 100%;}
.form input[type='email'] { width: 100%;}
.submit input[type='submit'] { display: block; width: calc(100% - 32px); max-width: 320px; margin: 8px auto; padding: 24px;}
.submit input[type='button'] { display: block; width: calc(100% - 32px); max-width: 320px; margin: 8px auto; padding: 24px;}

.flow li { display: block; padding: 24px;}
.flow li div { padding: 24px 0;}
.flow li figure { width: auto; text-align: center;}
.step { width: 80px; height: 80px; margin: 0 auto; font-size: 1.4rem;}
.step span { font-size: 3.6rem;}

.voice li { padding: 24px;}
.voice li h2 { font-size: 2.4rem;}

.faq dt { padding: 20px 40px 20px 50px;}
.faq dt::before { left: 16px;}
.faq dd { padding: 20px 0 20px 50px; font-size: 1.8rem;}
.faq dd::before { left: 16px;}

#productmain { display: block;}
#content { padding-left: 0;}
#content h2 { font-size: 2.8rem;}
.komi { font-size: 1.4rem; line-height: 1.2;}
.komi li { width: 60px; height: 60px; margin: 2px;}
#image { width: auto; max-width: 500px; margin: 0 auto 24px;}

#reform { display: block;}
#reform figure { height: 200px;}
#reform section { padding: 24px;}

.company-table th { display: block; width: auto;}
.company-table td { display: block; padding: 10px 0; border-bottom: none;}

.relief li > div { padding: 12px 0 0 16px;}
.relief li > i { width: 56px; height: 56px; font-size: 2rem;}
.sma { display: block;}
}





@media print {
#container { width: 1024px;}
}