/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/*clearfix*/
.cf:after {content: ""; display: block; clear: both; visibility: hidden;}

.fade {animation: fade_cont 1s ease forwards;}

@keyframes fade_cont {0% {visibility: hidden; opacity: 0;} 100% {visibility: visible; transform: scale(1); opacity: 1;}}

/*--------------------------------------------------------------------------
部品
--------------------------------------------------------------------------*/
/*------------------------------------
汎用TOP見出し
------------------------------------*/
.g-h-top {text-align: center;}
.g-h-top a {display: inline-block;}
.g-h-top a:hover {opacity: .6;}
.g-h-top span {display: block; font-weight: 700; line-height: 1; text-align: center;}
.g-h-top .big {letter-spacing: 5px; text-transform: uppercase;}

.g-h-top.tax .small {letter-spacing: 3px;}

/*------------------------------------
汎用TOP見出し(アーカイブ用)
------------------------------------*/
.g-h-arc {text-align: center;}
.g-h-arc span {display: block; font-weight: 700; line-height: 1; text-align: center;}
.g-h-arc .big {text-transform: uppercase;}

/*------------------------------------
汎用TOP見出し(一部固定ページ用)
------------------------------------*/
.page-heading {position: relative;}
.page-heading .img {position: relative; width: 100%; height: 100%; z-index: 1;}
.page-heading .img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'}
.page-heading h1 {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; z-index: 2;}
.page-heading h1 span {display: block; color: #fff; line-height: 1; text-align: center;}
.page-heading h1 .big {font-weight: 700;}

/*------------------------------------
アンダーライン
------------------------------------*/
.u-l {position: relative; display: inline-block;}
.u-l:hover {opacity: 1;}
.u-l:after {content: ""; position: absolute; bottom: -6px; left: auto; right: 0; width: 0; height: 5px; background: #2b798b; transition: .3s ease;}
.u-l:hover:after {width: 100%; left: 0; right: auto;}

.lower .u-l:after {background: #000;}

/*------------------------------------
COMMING SOON
------------------------------------*/
.comingsoon {margin: 80px 0;}
.comingsoon h2 {margin-bottom: 0;}
.comingsoon p {font-weight: 700; text-align: center;}

/*------------------------------------
SNS・お問い合わせアイコン
------------------------------------*/
.sns-list {line-height: 1;}
.sns-list a {align-items: center; margin-bottom: 10px;}
.sns-list a:last-child {margin-bottom: 0;}
.sns-list .icon {display: block; margin: 0; transition: .3s ease;}
.sns-list .icon.mail {width: 20px; height: 14px;}
.sns-list .icon.doc {width: 20px; height: 15px;}
.sns-list .txt {display: flex; align-items: center; font-weight: 700; letter-spacing: 1px; margin-left: 16px;}
.sns-list .txt.id span {font-weight: 700; letter-spacing: 1px;}

.sns-list .icon path,
.sns-list .icon circle,
.form-list .icon path,
.form-list .icon circle {fill: #fff;}

.lower .sns-list .icon path,
.lower .sns-list .icon circle,
.sns-list.black .icon path,
.sns-list.black .icon circle,
.lower .form-list .icon path,
.lower .form-list .icon circle,
.form-list.black .icon path,
.form-list.black .icon circle {fill: #000;}

/*------------------------------------
ENTRY
------------------------------------*/
.entry {display: block;}
.entry .img {position: relative; overflow: hidden; transition: .5s ease;}
.entry .img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'}
.entry:hover {opacity: 1;}
.entry:hover .img {opacity: .7;}

/*------------------------------------
inginity
------------------------------------*/
.scroller-status {display: none;}
.scroller-status p {text-align: center; margin: 0 auto 40px;}
.scroller-status .loader,
.scroller-status .loader:after {border-radius: 50%; width: 4em; height: 4em;}
.scroller-status .loader {margin: 0 auto 80px; position: relative; text-indent: -9999em; border-top: .44em solid rgba(0,0,0, 0.2); border-right: .44em solid rgba(0,0,0, 0.2); border-bottom: .44em solid rgba(0,0,0, 0.2); border-left: .44em solid #000; transform: translateZ(0); animation: load-cycle 1.1s infinite linear;}
@keyframes load-cycle {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}

/*------------------------------------
カバー
------------------------------------*/
.img-cover {position: relative; display: block; overflow: hidden;}
.img-cover:before {content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 4; background: #211c19; transition: transform cubic-bezier(0.8,0,0.2,1) 1.3s;}
.img-cover.active:before {transform: translate3d(101%, 0, 0);}

/*------------------------------------
MORE
------------------------------------*/
.more {position: relative; display: flex; width: 200px; height: 56px; background: #000; margin: 0 auto; opacity: 1;}
.more:hover {opacity: 1;}

.more:before,
.more:after {content: ''; position: absolute; width: 0; height: 0; width: 100%; height: 100%; border: 2px solid transparent; z-index: 2;}
.more:before {top: -2px; left: -2px; border-bottom-color: #000; border-left-color: #000; transition: height .3s, width .3s .3s;}
.more:after {bottom: -2px; right: -2px; border-top-color: #000; border-right-color: #000; transition: height .3s, width .3s .3s;}

.more span {color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1; letter-spacing: 0; transition: .3s ease;}
.more > span {position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 200px; height: 56px; z-index: 3;}
.more > span:after {position: absolute; content: ''; display: block; bottom: 0; left: auto; right: 0; width: 0; height: 100%; background: #fff; z-index: -1; transition: .5s ease;}
.more:hover span {color: #000;}
.more:hover > span:before {border-color: #000;}
.more:hover > span:after {left: 0; right: auto; width: 100%; transition: .3s ease;}

.more.wide span.avenir {letter-spacing: 1.5px;}

.more.white {background: #fff;}
.more.white span {color: #2b798b;}
.more.white:before {border: none;}
.more.white:after {border: none;}

.more.white > span:before {border-color: #2b798b;}
.more.white > span:after {background: #000;}
.more.white:hover span {color: #fff;}
.more.white:hover > span:before {border-color: #fff;}

/*フォームへのリンク用*/
.more.form-link > span {flex-direction: row; font-weight: 700; letter-spacing: 1px; transition: .5s ease;}
.more.form-link > span:before {display: none;}
.more.form-link:hover > span:after {transition: .5s ease;}
.more.form-link > span .icon {}
.more.form-link > span .icon .st0 {fill: #000; transition: .2s ease;}
.more.form-link > span .icon .st1 {fill: #fff; stroke :#000; transition: .2s ease;}

.more.form-link:hover > span .icon .st0 {fill: #fff;}
.more.form-link:hover > span .icon .st1 {fill: #000; stroke: #fff;}

/*------------------------------------
スクロールを促す
------------------------------------*/
.scroll-bar {left: 50%; bottom: 0; transform: translate(-50%, 50%);}
.scroll-bar .bar {display: block; content: ""; position: relative; width: 1px; background: transparent; margin: 20px auto 4px; overflow: hidden;}
.scroll-bar .bar:before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #fff; animation: scrollLine 3.5s ease infinite; animation-fill-mode: forwards}
.scroll-bar span {display: block; color: #fff; line-height: 1;}

@keyframes scrollLine {
	0% {transform:translateY(-100%) scaleY(1); transform-origin: left;}
	100% {transform:translateY(100%) scaleY(.8); transform-origin: left;}
}

/*------------------------------------
TOPスクロール
------------------------------------*/
#scroll {position: absolute; display: block; z-index: 100;}
#scroll img {width: 100%;}

/*------------------------------------
グローバルナビ
------------------------------------*/
.g-navi {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.g-navi * {color: #fff; text-align: center;}
.g-navi .about h3,
.g-navi .about p {font-weight: 700;}
.g-navi .g-menu li:last-child {margin-bottom: 0;}
.g-navi .g-menu li a {display: inline-block; font-weight: 700; line-height: 1;}
.g-navi .associated h3 {font-weight: 700;}

/*------------------------------------
改行用 inline-block
------------------------------------*/
.i-b {display: inline-block; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit;}

/*--------------------------------------------------------------------------
body
--------------------------------------------------------------------------*/
body {background: #efede6;}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
.page.home header {position: fixed; top: 0; width: 100%; transition: .3s all ease; z-index: 100;}
.page:not(.home) header.fixed {position: fixed; top: 0; width: 100%; transition: .3s all ease; z-index: 100;}

header.hide {transform: translateY(-200%);}
header.filter {background-color: rgb(0 0 0 / 40%);}
header #h-navi {justify-content: space-between; align-items: center; box-sizing: border-box; z-index: 1000;}
header #h-navi * {font-weight: 700; line-height: 1;}
header #h-navi .logo {display: block;}
header #h-navi .tel {letter-spacing: 1px; white-space: nowrap;}
.page.home header.filter {background-color: rgb(0 0 0 / 40%);}
.page:not(.home) header {background-color: #efede6;}
.page:not(.home) header.filter {background-color: rgb(239 237 230 / 95%);}
.page:not(.home) header #h-navi * {color: #000;}
.page.home header #h-navi * {color: #fff;}
.page:not(.home) header #h-navi path, .page:not(.home) header #h-navi .logo path, .page:not(.home) header #h-navi .sns-list path {fill: #000;}

header #full-navi {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; background: #211c19; transform-origin: center; visibility: hidden; overflow-y: auto; z-index: 1000; opacity: 0; transform: scale(.95); transition: .3s ease-in-out;}

header #h-navi .menu a.current {pointer-events: none;}
header #h-navi .menu a.u-l.current:after {width: 100%; left: 0; right: auto;}


/*--------------------------------------------------------------------------
main
--------------------------------------------------------------------------*/
main {position: relative; display: block; background: #fff;}

/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer {position: relative; margin-top: auto; padding: 50px 0 24px; background: #000; z-index: 10;}
footer .g-navi {width: 100%;}
footer .g-navi .logo {width: 230px; height: auto; margin-bottom: 46px; display: block;}
footer .g-navi ul {margin-bottom: 16px;}
footer .g-navi ul li:not(:last-child) {margin-bottom: 6px;}
footer .g-navi .tel {font-size: 25px; margin-bottom: 27px; letter-spacing: 1px;}
footer .g-navi .sns-list {width: 100%; max-width: 84px; margin-bottom: 46px; justify-content: space-between;}
footer .g-navi .link-area {width: 100%; max-width: 490px; margin: 0 auto 42px; display: flex; justify-content: space-around;}
footer .copyright {color: #fff; font-size: 11px; letter-spacing: 3px; text-align: center;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
#front * {transition: .3s ease;}
#front img {pointer-events: none;}
#front .contents-wrap {position: relative; z-index: 6;}

/*------------------------------------
HERO HEADER
------------------------------------*/
#front .hero {position: relative; width: 100%;}
#front .hero * {color: #fff;}
#front .hero > * {position: absolute; z-index: 3;}

#front .hero .copy {position: absolute; font-weight: 700; z-index: 3;}
#front .hero .main-img {position: absolute; width: 100%; height: 100%; z-index: 1;}
#front .hero .main-img img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'}

.sec-title {margin-bottom: 60px;}
.sec-title span {width: 100%; display: block; text-align: center;}
.sec-title .en {margin-bottom: 20px; font-family: 'arial-narrow',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
 font-size: 30px; font-weight: 700; letter-spacing: 2px;}
.sec-title .en:after {content: ""; display: block; width: 24px; height: 1px; margin: 12px auto 0;}
.sec-title.white span {color: #fff;}
.sec-title.white .en:after {background: #fff;}
.sec-title.black .en:after {background: #000;}
.sec-title .jp {font-size: 15px;}

/*------------------------------------
ABOUT US
------------------------------------*/
#front .about-us {background: #efede6;}
#front .about-us #logo-main.is-fixed {position: fixed; top: 30vh; transition: 0s; z-index: 5;}
#front .about-us #logo-main-area {position: relative;}
#front .about-us #logo-main02 {width: 100%; height: auto; position: relative; z-index: 3;}
#front .about-us #logo-main02 img {width: 100%; height: auto;}
#front .about-us #logo-main-bg {width: 99%; height: auto; position: absolute; top: 0; left: 0; z-index: 2;}
#front .about-us #logo-main-cover {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #efede6; transition: 0s; z-index: 4;}
#front .about-us ul {display: flex; flex-direction: column; justify-content: space-between;}
#front .about-us ul span {display: block;}
#front .about-us ul .en {font-weight: 700; line-height: 1;}
#front .about-us ul .ja {font-weight: 700;}
#front .about-us ul .ja.alloc {letter-spacing: 1em;}

/***************************************************
 * Generated by SVG Artista on 4/2/2021, 3:14:18 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

#front .about-us #logo-main #logo-anime .svg-elem-1{fill:transparent;-webkit-transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 0.8s;transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 0.8s}#front .about-us #logo-main #logo-anime.active .svg-elem-1{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-2{fill:transparent;-webkit-transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 0.8s;transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 0.8s}#front .about-us #logo-main #logo-anime.active .svg-elem-2{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-3{fill:transparent;-webkit-transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 0.8s;transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 0.8s}#front .about-us #logo-main #logo-anime.active .svg-elem-3{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-4{fill:transparent;-webkit-transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 0.8s;transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 0.8s}#front .about-us #logo-main #logo-anime.active .svg-elem-4{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-5{fill:transparent;-webkit-transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 1.4s;transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 1.4s}#front .about-us #logo-main #logo-anime.active .svg-elem-5{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-6{fill:transparent;-webkit-transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 1.5s;transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 1.5s}#front .about-us #logo-main #logo-anime.active .svg-elem-6{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-7{fill:transparent;-webkit-transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 1.6s;transition:fill 0.3s cubic-bezier(0.47,0,0.745,0.715) 1.6s}#front .about-us #logo-main #logo-anime.active .svg-elem-7{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-8{fill:transparent;-webkit-transition:fill 0.5s cubic-bezier(0.47,0,0.745,0.715) 2.0s;transition:fill 0.5s cubic-bezier(0.47,0,0.745,0.715) 2.0s}#front .about-us #logo-main #logo-anime.active .svg-elem-8{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-9{fill:transparent;-webkit-transition:fill 0.5s cubic-bezier(0.47,0,0.745,0.715) 2.1s;transition:fill 0.4s cubic-bezier(0.47,0,0.745,0.715) 2.1s}#front .about-us #logo-main #logo-anime.active .svg-elem-9{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-10{fill:transparent;-webkit-transition:fill 0.5s cubic-bezier(0.47,0,0.745,0.715) 2.2s;transition:fill 0.5s cubic-bezier(0.47,0,0.745,0.715) 2.2s}#front .about-us #logo-main #logo-anime.active .svg-elem-10{fill:rgb(255,255,255)}#front .about-us #logo-main #logo-anime .svg-elem-11{fill:transparent;-webkit-transition:fill 0.5s cubic-bezier(0.47,0,0.745,0.715) 2.3s;transition:fill 0.5s cubic-bezier(0.47,0,0.745,0.715) 2.3s}#front .about-us #logo-main #logo-anime.active .svg-elem-11{fill:rgb(255,255,255)}


/*------------------------------------
INSTAGRAM
------------------------------------*/
#front .instagram .sec-title-ig {width: 100%; flex-direction: column; align-items: center;}
#front .instagram .sec-title-ig img {width: 40px; margin-bottom: 20px}
#front .instagram .sec-title-ig span {font-size: 18px; font-weight: 700;}
#front .instagram .ig-list {flex-wrap: wrap;}
#front .instagram .ig-list li .img-cover {padding-top: 100%;}
#front .instagram .ig-list li .img-cover .frame {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#front .instagram .ig-list li .img-cover .frame img {width: 100%; height: 100%; font-family: 'object-fit: cover;'; object-fit: cover;}

/*------------------------------------
BUSINESS CONTENT
------------------------------------*/
#front .business-content {background: #2b798b;}
#front .business-content .order {color: #5cf7ff; display: flex; justify-content: flex-end; align-items: center; line-height: 1;}
#front .business-content .order:before { content: "content"; border-right: 1px solid #fff; color: #fff;}
#front .business-content .img-cover {position: relative;}
#front .business-content .img-cover span {position: absolute; width: 100%; height: 100%; top: 0; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 700; letter-spacing: 2px;}
#front .business-content .txt {position: relative; background: #fff; box-sizing: border-box;}
#front .business-content .txt .title {font-weight: 700; line-height: 1;}
#front .business-content .txt .details {margin-bottom: 24px; color: #9a9a9a;}
#front .business-content ol li .links a {width: 48%;}
#front .business-content ol li .links a img {width: 100%;}
#front .business-content .txt a.contact {font-weight: bold;}
#front .business-content .txt a.contact * {font-size: inherit; font-weight: inherit; letter-spacing: inherit;}

/*------------------------------------
WARRANTY
------------------------------------*/
#front .warranty {position: relative;}
#front .warranty .inner {width: 100%; height: 100%; box-sizing: border-box; text-align: center;}
#front .warranty strong {display: inline-block; color: #fff;}

/*------------------------------------
SHOP INFORMATION
------------------------------------*/


/*------------------------------------
GOOGLE MAP
------------------------------------*/
#front .google-map {position: relative; width: 100%; height: 600px; max-height: 100vh;}
#front .google-map iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

/*------------------------------------
MESSAGE
------------------------------------*/
#front .message {position: relative;}
#front .message .text {margin-bottom: 2em;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ＆固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

.page-header .inner {position: relative; z-index: 1;}
.page-header .page-title {position: absolute; width: 100%; left: 0; text-align: center; z-index: 2;}
.page-header .page-title .en {display: block; line-height: 1; font-family: 'arial-narrow',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif; font-weight: 700;}
.page-header .page-title .ja {display: inline-flex; justify-content: center; align-items: center; padding: 0 5px; background: #2b798b; border-radius: 30px; box-sizing: border-box; color: #fff;}

/*--------------------------------------------------------------------------
Warranty
--------------------------------------------------------------------------*/
#warranty .relief {background: #efede6; text-align: center;}
#warranty .sec-title-w {display: inline-block; border-bottom: 2px solid #000; font-weight: 700; text-align: center;}
#warranty .relief .strength {margin: 0 auto 60px; padding: 5px 0; background: #fff; border: 3.6302px solid #2b798b; color: #2b798b; font-weight: 700;}

#warranty .repair .inner {margin-bottom: 90px; text-align: center;}
#warranty .repair .inner strong {display: inline-block; margin-bottom: 30px; font-weight: 700; line-height: 1.2;}
#warranty .repair .inner strong span {font-size: inherit; font-weight: inherit; line-height: inherit;}
#warranty .repair .repair-list li {margin-bottom: 60px;}
#warranty .repair .repair-list .title {margin-bottom: 26px; font-weight: 700;}
#warranty .repair .repair-list .title span {font-size: inherit; font-weight: inherit; line-height: inherit;}
#warranty .repair .repair-list p {color: #999;}

#warranty .no-cost {position: relative; background: #efede6; text-align: center;}
#warranty .no-cost .sec-title-black {position: absolute; width: 100%;}
#warranty .no-cost .sec-title-black > span {max-width: calc(100% - 12vw); display: inline-block; background: #000; box-sizing: border-box; color: #fff;}
#warranty .no-cost .h_sample {position: relative; font-weight: 700; line-height: 1.3; letter-spacing: -2px;}
#warranty .no-cost .sample-list {position: relative; margin-bottom: 90px; justify-content: space-between;}
#warranty .no-cost .sample-list:after {content: ""; position: absolute; background: url(../img/icon_triangle.svg) no-repeat; background-size: contain;}
#warranty .no-cost .sample-list li {position: relative; background: #fff; box-sizing: border-box;}
#warranty .no-cost .sample-title {position: absolute; flex-direction: column; justify-content: center; align-items: center; background: #fff; border: 3px solid #2b798b; border-radius: 50%;}
#warranty .no-cost .sample-title * {color: #2b798b; font-weight: 700; line-height: 1.1;}
#warranty .no-cost .sample-list .trouble {flex-direction: column; align-items: center; margin-bottom: 20px; font-weight: 700; letter-spacing: 0px; line-height: 1.4;}
#warranty .no-cost .sample-list .trouble:after {content: ""; margin-top: 15px; background: url(../img/icon_triangle.svg) no-repeat; background-size: contain;}
#warranty .no-cost .sample-list .trouble span {font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit;}
#warranty .no-cost .sample-list .details {color: #2b798b; font-weight: 700; letter-spacing: -3px; line-height: 1.4;}
#warranty .no-cost .sample-list .cost-wrap {background: #efede6;}
#warranty .no-cost .sample-list .cost {display: block; font-weight: 700; letter-spacing: -1px;}
#warranty .no-cost .sample-list .normal {font-weight: 620; letter-spacing: -1px;}
#warranty .no-cost .sample-list .normal span {position: relative; font-weight: inherit;}
#warranty .no-cost .sample-list .normal span:after {content: ""; position: absolute; width: 110%; height: 2px; left: -5%; top: calc(50% - 1px); background: #2b798b;}
#warranty .no-cost .egs-warr {position: relative; justify-content: center; align-items: center; width: 740px; max-width: 100%; margin: 0 auto; background:#2b798b; box-sizing: border-box;}
#warranty .no-cost .egs-warr:before {content: ""; position: absolute; left: 50px; background: url(../img/egs-warr.svg) no-repeat; background-size: contain;}
#warranty .no-cost .egs-warr * {font-weight: 700; line-height: 1;}
#warranty .no-cost .egs-warr .inner {flex-direction: column;}
#warranty .no-cost .egs-warr .upper, #warranty .no-cost .egs-warr .upper * {color: #fff; letter-spacing: 2px;}
#warranty .no-cost .egs-warr .upper span {letter-spacing: -3px;}
#warranty .no-cost .egs-warr .all {color: #8dffff; letter-spacing: -3px;}
#warranty .no-cost .egs-warr .yen {position: relative; top: 8px; left: 4px; color: #8dffff;}
#warranty .no-cost .egs-warr .zero {position: relative; left: 10px; color: #8dffff; transform: scale(1.18, 1);}
#warranty .service .sec-title {margin-bottom: 80px;}
#warranty .service .service-list {margin: 0 auto; flex-wrap: wrap; justify-content: space-between;}
#warranty .service .service-list li {position: relative; margin-bottom: 40px;}
#warranty .service .service-list li:first-child .sevice-img img {width: 40%;}
#warranty .service .service-list li:nth-child(2) .sevice-img img {width: 35.4%;}
#warranty .service .service-list li:nth-child(3) .sevice-img img {width: 34.8%;}
#warranty .service .service-list li:nth-child(4) .sevice-img img {width: 36.1%;}
#warranty .service .service-list li:nth-child(5) .sevice-img img {width: 42.6%;}
#warranty .service .service-list li:nth-child(6) .sevice-img img {width: 62.4%;}
#warranty .service .service-list .frame {position: relative; padding-top: 93%; background: #eaeaea;}
#warranty .service .service-list .sevice-img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center;}
#warranty .service .service-title .en {position: absolute; top: 0; left: 101%; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 12px;
 font-weight: 700;}
#warranty .service .service-title .en .num {display: inline-block; margin-left: 2px;-webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; font-size: 12px;
 font-weight: 700;}
#warranty .service .service-title .ja {display: inline-block; margin-bottom: 26px; font-weight: 700; line-height: 1.2;}
#warranty .service .service-title .ja span {font-size: inherit; font-weight: inherit; line-height: inherit;}
#warranty .service .note {color: #9a9a9a;}

/*--------------------------------------------------------------------------
CONTACT
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
メールフォーム
--------------------------------------------------------------------------*/
#form-page .booking-notice {font-size: 1.2rem; text-align: center; width: 760px; margin: 0 auto; padding: 35px 0; border: 1px solid #000;}
#form-page .contact-info {text-align: center;}
#form-page .contact-info:not(:last-of-type) {border-bottom: 1px solid #000;}
#form-page .contact-info h2 {font-weight: 700; line-height: 1;}
#form-page .contact-info a.tel {display: inline-block; font-family: arial,'arial-narrow',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif; font-weight: 700; line-height: 1;}
#form-page .contact-info .time {font-weight: 700; letter-spacing: 0; line-height: 1;}
#form-page .contact-info .line-account {line-height: 1;}
#form-page form .cat .mwform-checkbox-field {text-align: left;}
#form-page form .auto-input {margin-left: 10px; display: inline-flex; align-items: center; justify-content: center; background: #000; color: #fff;}


/*------------------------------------
フォーム
------------------------------------*/
#form-page .container {padding-bottom: 1px;}
/*基礎*/
#form-page form {margin: 0 auto; overflow-y: visible;}
#form-page .contact-info {margin: 0 auto;}
#form-page form .inner > dl {display: flex; align-items: center; margin-bottom: 30px;}
#form-page form .inner > dl.top {align-items: flex-start;}
#form-page form .inner > dl > dt {width: 210px; text-align: right; padding: 0 20px 0 0;}
#form-page form .inner > dl > dt.middle {margin-top: 13px;}
#form-page form .inner > dl > dd {width: 530px;}
#form-page form .inner dl.sub {margin-top: 15px;}
#form-page form .inner dl.sub dt {margin-bottom: 10px;}
#form-page form .inner dl.sub dd {margin-left: 30px;}
#form-page form dl dd.flex {flex-wrap: wrap; margin-bottom: -15px;}
#form-page form dl dt small {display: block; font-size: .975rem;}
#form-page form dl dd small {display: block; font-size: .975rem; letter-spacing: 0; margin-top: 15px;}

/*インプット＆テキストエリア＆セレクトボックス*/
#form-page form input[type="text"],
#form-page form input[type="email"],
#form-page form input[type="tel"],
#form-page form input[type="date"],
#form-page form input[type="datetime-local"],
#form-page form textarea,
#form-page form select {display: inline-block; width: 100%; background: #f8f8f8; border: 1px solid #000; padding: 9.5px 12px; box-sizing: border-box; resize: vertical; transition: .3s ease;}
#form-page form input[type="datetime-local"] {resize: none;}
#form-page form input[type="datetime-local"]::-webkit-inner-spin-button,
#form-page form input[type="datetime-local"]::-webkit-clear-button {-webkit-appearance: none;}
#form-page form select {border: none;}

#form-page form input[type="text"]:focus,
#form-page form input[type="email"]:focus,
#form-page form input[type="tel"]:focus,
#form-page form textarea:focus,
#form-page form select:focus {background: #fff;}

#form-page form .zip-wrap {display: flex;}
#form-page form label.zip {display: block; position: relative; margin-bottom: 30px;}
#form-page form label.zip:before {content: "\03012"; position: absolute; left: 12px; z-index: 1;}
#form-page form label.zip input {width: 100%; padding-left: 35px;}
#form-page form label.zip input::placeholder {color: transparent;}

#form-page form label.select {position: relative; display: block;}
#form-page form .c-select-wrapper {position: relative; background: #f8f8f8; user-select: none; z-index: 3;}
#form-page form .c-select {position: relative; border: 1px solid #000;}
#form-page form .c-select .c-select-trigger {position: relative; display: inline-block; width: 100%; font-size: 1.075rem; padding: 10px 12px; box-sizing: border-box; cursor: pointer;}
#form-page form .select.opened:before {transform: rotate(40deg);}
#form-page form .select.opened:after {transform: rotate(-40deg);}
/*#form-page form .c-select .c-select-trigger:before,
#form-page form .c-select .c-select-trigger:after {content: ""; display: block; width: 16px; height: 2px; background: #000; position: absolute; top: 23px; transition: .3s ease;}*/
/*#form-page form .c-select .c-select-trigger:before {right: 22px; transform: rotate(-40deg);}
#form-page form .c-select .c-select-trigger:after {right: 34px; transform: rotate(40deg);}*/
#form-page form .c-select .c-options {position: absolute; left: -1px; width: calc(100% + 2px); line-height: 0; border: 1px solid #000; border-top: none; background: #fff; box-sizing: border-box; transform: scale(1,0); transform-origin: top left; transition: .25s ease;}
#form-page form .c-select .c-option {display: block; font-size: 1rem; width: 100%; padding: 10px 12px; cursor: pointer; box-sizing: border-box; overflow: hidden;}
#form-page form .c-select .c-option:hover,
#form-page form .c-select .c-option.selection {background: #f8f8f8;}
/*#form-page form .c-select.opened .c-select-trigger:before {transform: rotate(40deg);}
#form-page form .c-select.opened .c-select-trigger:after {transform: rotate(-40deg);}*/
#form-page form .c-select.opened .c-options {line-height: 1.75; transform: scale(1,1); z-index: 4;}

#form-page form .e-select {width: 100%; position: relative; background: #f8f8f8;}
#form-page form .e-select .esb-displayer {font-size: 1.075rem; padding: 10px 60px 10px 12px; box-sizing: border-box; cursor: pointer; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis;}
#form-page form .e-select .esb-dropdown {position: absolute; top: 48px; left: -1px; display: none; background: #fff; padding: 0 1px; border: 1px solid #000; border-top: none; overflow: auto; z-index: 999;}
#form-page form .e-select .esb-item {font-size: 1rem; width: 100%; padding: 8px 10px; cursor: pointer; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#form-page form .e-select .esb-item:hover {background: #f8f8f8;}
#form-page form .e-select:before,
#form-page form .e-select:after {content: ""; display: block; width: 16px; height: 2px; background: #000; position: absolute; top: 23px; transition: .3s ease;}
#form-page form .e-select:before {right: 22px; transform: rotate(-40deg);}
#form-page form .e-select:after {right: 34px; transform: rotate(40deg);}
#form-page form .e-select option {background: #fff;}
#form-page form .opened.e-select:before {transform: rotate(40deg);}
#form-page form .opened.e-select:after {transform: rotate(-40deg);}

/*セレクトボックス＆ラジオボタン*/
#form-page form input[type="radio"],#form-page form input[type="checkbox"] {display: none;}
#form-page form .mwform-checkbox-field,
#form-page form .mwform-radio-field {display: inline-block; margin: 0 0 0 30px;}
#form-page form .mwform-checkbox-field label,
#form-page form .mwform-radio-field label {display: inline-block; cursor: pointer;}
#form-page form .mwform-checkbox-field-text,
#form-page form .mwform-radio-field-text {display: inline-block; position: relative;}
#form-page form .mwform-checkbox-field-text:before,
#form-page form .mwform-radio-field-text:before {content: ''; position: absolute; left: -30px; top: 2px; width: 20px; height: 20px; border: 1px solid #000;}
#form-page form .mwform-checkbox-field-text:after,
#form-page form .mwform-radio-field-text:after {content: ''; position: absolute; left: -29px; top: 3px; width: 20px; height: 20px; background: #000; transition: all 0.3s ease; opacity: 0;}
#form-page form input[type="checkbox"]:checked + .mwform-checkbox-field-text:after,
#form-page form input[type="radio"]:checked + .mwform-radio-field-text:after {opacity: 1;}

#form-page form dd.flex .mwform-checkbox-field-text,
#form-page form dd.flex .mwform-radio-field-text {letter-spacing: 0;}

/*入力要素のmargin-bottom*/
#form-page form input[type="text"],
#form-page form input[type="email"],
#form-page form input[type="tel"],
#form-page form textarea,
#form-page form select,
#form-page form .mwform-checkbox-field,
#form-page form .mwform-radio-field {margin-bottom: 15px;}
#form-page form input[type="text"]:last-of-type,
#form-page form input[type="email"]:last-of-type,
#form-page form input[type="tel"]:last-of-type,
#form-page form textarea:last-of-type,
#form-page form select:last-of-type,
/*#form-page form .mwform-checkbox-field:last-of-type,*/
#form-page form .mwform-radio-field:last-of-type {margin-bottom: 0; background: #d9d9d9; border-color: transparent;}

/*フィニッシュ*/
#form-page form .inner.finish a.link {display: inline-block; text-decoration: underline;}
#form-page form .inner.finish span.mwform-checkbox-field.horizontal-item {display: block;}
#form-page form label.send,
#form-page form label.send input[type="submit"] {position: relative; display: block; width: 438px; height: 96px; opacity: 1;}
#form-page form label.send {position: relative; display: flex; justify-content: center; align-items: center; margin: 65px auto 0; border: 2px solid #000; z-index: 2;}
#form-page form label.send:after {position: absolute; content: ''; display: block; bottom: 0; left: auto; right: 0; width: 0; height: 100%; background: #000; z-index: -1; transition: .5s ease;}
#form-page form label.send:hover {opacity: 1; cursor: pointer;}
#form-page form label.send:hover:after {left: 0; right: auto; width: 100%; transition: .5s ease;}
#form-page form label.send input[type="submit"] {font-weight: 700; letter-spacing: 2px; transition: .5s ease;}
#form-page form label.send:hover input[type="submit"] {color: #fff;}

/*--------------------------------------------------------------------------
サンクスページ
--------------------------------------------------------------------------*/
#thanks-page .completion {text-align: center;}
#thanks-page .thanks-txt h2 {font-weight: 700;}
#thanks-page .home.more {background: #fff;}
#thanks-page .home.more span {width: 100%; height: 100%;color: #000;}
#thanks-page .home.more > span:before {content: none;}
#thanks-page .home.more > span:after {background: #000;}
#thanks-page .home.more:hover span {color: #fff;}

/*--------------------------------------------------------------------------
PRIVACY POLICY (page-privacy.php)
--------------------------------------------------------------------------*/
#privacy h3 {font-weight: 700;}

/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
#notfound {display: flex; flex-direction: column; justify-content: center; align-items: center;}
#notfound h1 span {display: block; font-weight: 700; text-align: center; line-height: 1.25;}


/*.contents-wrap {position: relative; z-index: 10; background: #fff;}*/