@charset "UTF-8";
/* default sp
	----------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { padding: 0; margin: 0; font: inherit; word-wrap: break-word; border: 0; vertical-align: baseline; outline: none; }
body { padding: 0; margin: 0; color: #000; font-size: 3.6vw; font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; -webkit-text-size-adjust: 100%; font-style: normal; line-height: 1; }
article, aside, canvas, details, figcaption, figure, header, footer, hgroup, main, menu, nav, section, summary { display: block; }
blockquote, q { quotes: none; }
strong, b { font-weight: bold; }
ul, ol, li { list-style: none; }
table { border-spacing: 0; border-collapse: collapse; }
img, video, object { height: auto; border: none; display: block; }
ins { background: none; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
hr { height: 1px; padding: 0; margin: 1em 0; border: 0; border-top: 1px solid #ccc; display: block; }
*:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); }
a { color: #000; text-decoration: none; display: block; -moz-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1); }
a:hover { opacity: 0.6; }
.clearfix:after { content: ''; display: block; clear: both; }
.pc { display: none; }
.sp { display: block; }
img {max-width: 1200px;width: 100%;margin: 0 auto;}

.top-greeting-crown-items .fade-bottom:nth-child(2) { -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.top-greeting-crown-items .fade-bottom:nth-child(3) { -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }



/* fade
----------------------------------------------- */
.fade { opacity: 0; -moz-transition: 1.2s; -o-transition: 1.2s; -webkit-transition: 1.2s; transition: 1.2s; }
.fade-left { -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.fade-right { -moz-transform: translateX(10px); -ms-transform: translateX(10px); -webkit-transform: translateX(10px); transform: translateX(10px); }
.fade-bottom { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); }
.fade-active { opacity: 1; -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); }


/* root
----------------------------------------------- */
:root {
--gothic: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 
--mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif; 
}


/* cv
----------------------------------------------- */
.cv{width: 80%; margin: 0 auto;}


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

.header {position: fixed;top: 0;left: 0;width: 100%;height: 20vw;z-index: 100;background-color: #ffffff;}
.header-content {display: flex;justify-content: space-between;align-items: center;height: 100%;padding: 0 4vw;}
.header .logo p{text-align: center;font-size: 3vw;}
.header-logo {display: flex;align-items: center;width: 35vw;margin-bottom: 1vw;}
.header-logo img {width: 100%;height: auto;}
.header-hamburger {position: relative;width: 18.6vw;height: 10.6vw;background: none;border: none;cursor: pointer;z-index: 110;}
.header-hamburger span {position: absolute;left: 2vw;width: 15vw;height: 1px;background-color: #28282d;transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;}
.header-hamburger span:nth-child(1) { top: 3.5vw; }
.header-hamburger span:nth-child(2) { top: 6.5vw; }
.header-hamburger.is-active span:nth-child(1) {top: 5vw;transform: rotate(25deg);}
.header-hamburger.is-active span:nth-child(2) {top: 5vw;transform: rotate(-25deg);}
.header-navi.sp {position: fixed;top: 0;left: auto;right: 0;width: 77%;height: 100vh;background-color: rgba(255, 255, 255, 0.94);padding: 24vw 8vw 10vw 8vw;box-sizing: border-box;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;z-index: 105;overflow-y: auto;}
.header-navi.sp.is-active {opacity: 1;visibility: visible;}
.header-navi-items {display: flex;flex-direction: column;gap: 0;margin-bottom: 8vw;}
.header-navi-items li a {display: flex;justify-content: space-between;align-items: center;color: #333333;font-size: 4.2vw;font-family: var(--mincho);padding: 5vw 0;text-decoration: none;border-bottom: 1px solid #e0e0e0;}
.header-navi-items li:last-child a{border: none;}
.header-navi-items li a::after {content: '>';color: #8c8680;font-size: 3.5vw;font-family: sans-serif;}
.header-navi-contact {text-align: center;}
.navi-tel {color: #a6813b;font-size: 8.5vw;font-family: "EB Garamond", serif;margin-bottom: 2vw;}
.navi-tel::before {content: '\f095';font-family: 'icon';font-size: 5.2vw;margin: 2vw 2vw 0 0;}
.navi-time {display: inline-block;font-size: 3vw;margin-bottom: 6vw;}
.navi-btn {display: flex;justify-content: center;align-items: center;width: 100%;height: 14vw;color: #ffffff;font-weight: bold;font-size: 4vw;text-decoration: none;border-radius: 100vh;box-shadow: 0 4px 10px rgba(0,0,0,0.15);background: linear-gradient(135deg, #6e4a16 0%, #be9e58 50%, #714d18 100%);}
.header-btn-img {display: flex;align-items: center;width: 100%;height: auto;transition: opacity 0.3s ease;}
.header-btn-img img {width: 100%;height: auto;display: block;}




/* sp
----------------------------------------------- */

.hero{background: url(../images/hero-bg.jpg)no-repeat top center;background-size: cover;padding: 40vw 0 5vw;margin: 20vw 0 10vw 0;}
.hero .intro{position: relative;padding: 0;width: 90%;margin: 0 auto;}
.hero .intro .tit{margin-bottom: 5vw;}
.hero .intro .txt{position: relative;display: block;line-height: 1.6;font-size: 4vw;margin-bottom: 5vw;}
.hero .intro .txt::after{content: "";width: 100px;height: 1px;background: #70716d;display: block;position: absolute;top: 120%;}
.hero .intro .sub{font-family: var(--mincho);font-size: 7.5vw;line-height: 1.4;}
.hero .intro .sub span{color: #b28330;/* font-size: 7.5vw; */}
.hero .intro p{position: absolute;top: 44%;left: 47%;color: #a7893a;font-family: "EB Garamond", serif;line-height: 1.6;font-size: 3vw;letter-spacing: .06em;}
.hero ul{display: flex;gap: 3vw;}
.hero li img{width: 100%;}


.features{margin-bottom: 5vw;}
.features .tit{width: 50%;margin: 0 auto 6vw;}
.features .flex{width: 90%;margin: 0 auto 12vw;}
.features .flex img{width: 100%;margin-bottom: 5vw;}
.features .txt ul{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;margin-bottom: 3vw;}
.features .txt li{color: #fff;background: linear-gradient(45deg, #866e2d 0%,#cfba7b 37%,#b1913b 75%,#866e2d 100%);border-radius: 50px;padding: 1.5vw 3.8vw;font-weight: bold;}
.features .txt .read{font-family: var(--mincho);line-height: 1.4;border-bottom: 1px solid #d4c59e;font-size: 4.8vw;padding-bottom: 4vw;margin-bottom: 4vw;font-feature-settings: "palt";letter-spacing: .08em;}
.features .txt p{font-size: 3.8vw;line-height: 1.8;}
.features .list.sp{width: 90%;margin-bottom: 10vw;}
.features .usage.sp{width: 90%;}


.worry{position: relative;background: #f7f4eb;}
.worry-content.sp{width: 100%;}
.worry .resolution{position: absolute;transform: translate(-50%, 50%);left: 50%;bottom: 0;z-index: 1;}
.worry .resolution.sp{width: 95%;}

.conjunction{position: relative;}
.conjunction .inbox.sp{width: 100%;}
.conjunction a{width: 90%;position: absolute;left: 50%;transform: translateX(-50%);bottom: 10%;}
.conjunction a img{width: 100%;}

.merit{position: relative;margin-bottom: 10vw;}
.merit .tit{position: absolute;width: 50%;left: 50%;transform: translateX(-50%);top: 12vw;}
.merit img.sp{width: 100%;}

.step{margin-bottom: 12vw;}
.step .tit{width: 75%;margin: 0 auto 6vw;}
.step img.sp{width: 90%;}

.reason{margin-bottom: 15vw;}
.reason .tit{margin: 0 auto 6vw;}
.reason img.sp{width: 90%;}

.flow{position: relative;margin-bottom: 10vw;}
.flow img.sp{width: 100%;}
.flow .tit{width: 50%;position: absolute;top: 14vw;left: 5vw;}

.qa-list {width: 90%;margin: 0 auto 10%;}
.qa-list .tit{width: 45%;margin: 0 auto 7vw;}
.qa-list dl {margin: 0 auto 4%;}
.qa-list dt {position: relative;padding: 3% 15% 3% 12%;background: #f9f2ea;font-size: 3.6vw;line-height: 1.6;text-indent: -2em;}
.qa-list dt:before, .qa-list dt:after {content: '';background: #9a7b51;position: absolute;top: 0;right: 0;}
.qa-list dt:before {width: 25px;height: 2px;top: 50%;right: 13px;transform: translateY(-50%);}
.qa-list dt:after {width: 2px;height: 25px;top: 50%;right: 24px;-webkit-transition: 0.3s;transition: 0.3s;transform: translate(0, -50%);}
.qa-list dt.open:after {-moz-transform: rotate(90deg) translate(-620%, 0);-ms-transform: rotate(90deg) translate(-620%, 0);-webkit-transform: rotate(90deg) translate(-620%, 0);transform: rotate(90deg) translate(-620%, 0);}
.qa-list dt p:before{content:"Q.";font-size: 6vw;color: #a7893a;line-height: 1;font-family: "EB Garamond", serif;margin-right: 4%;}
.qa-list dt p {margin-bottom: 0;font-size: 4.2vw;line-height: 1.5;font-family: var(--mincho);}
.qa-list dd {display: none;padding: 2% 0;}
.qa-list dd p {font-size: 4vw;line-height: 1.8;}
.qa-list dd p:last-child {margin-bottom: 0;}
.qa-list dd p .ast{display: block; font-size: 88%;}

.contact{border-width: 1px 0 1px 0;border-style: solid;border-image: linear-gradient(90deg, #7d4b0b 0%, #c1984d 12.5%, #f6f3c7 25%, #e2d098 37.5%, #b99041 50%, #7d4b0b 62.5%, #d2b266 75%, #ffebb0 87.5%, #7d4b0b 100%) 1 0 1 0;padding: 12vw 5vw;background: #fbf7f3;text-align: center;}
.contact .midashi{width: 50%;margin: 0 auto 10vw;}
.contact p{font-size: 4vw;line-height: 1.6;margin-bottom: 6vw;}
.contact ul{padding: 0;}
.contact li{position: relative;margin-bottom: 4vw;padding: 8vw 5vw;background: #fff;z-index: 1;box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);}
.contact li::before{content: '';position: absolute;width: 7.8vw;height: 4vw;top: 0;left: 50%;transform: translateX(-50%);background-color: #e3d5b3;border-radius: 0 0 36px 36px;z-index: 2;}
.contact .tit{font-weight: bold;font-size: 5vw;margin-bottom: 2vw;}
.contact .read{display: inline-block;border: 1px solid #ababab;padding: 0 5vw;margin-bottom: 1vw;}
.contact .tel{line-height: 1;color: #a7893a;font-family: "EB Garamond", serif;margin-bottom: 2vw;font-size: 11.5vw;}
.contact .tel::before{content: '\f095';font-family: 'icon';font-size: 8vw;margin-right: 2vw;}
.contact .txt{padding: 0;margin: 0;line-height: 1;}
.contact li img{width: 100%;}

.fixe .cvitems{width: 100%;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;margin: 0 auto;}
.fixe .cvitems li{width: calc(100% / 3);}
.fixe{position: fixed;z-index: 25;bottom: 0;}
.fixe img{width: 100%;}
.fix{width: 90%;transform: translateX(-50%);left: 50%;opacity: 0;visibility: hidden;-moz-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);-o-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);-webkit-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);}
.fix.active {opacity: 1;visibility: visible;}



.footer {padding: 5vw 0 32vw 0;font-family: var(--mincho);}
.footer-container {width: 100%;padding: 0 5vw;box-sizing: border-box;}
.footer-nav {margin-bottom: 10vw;}
.footer-nav-list {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: stretch;align-items: stretch;gap: 0.5vw;}
.footer-nav-item {width: calc(100% / 3 - 0.5vw);text-align: center;}
.footer-nav-item a {color: #333333;font-size: 3.7vw;letter-spacing: 0.05em;text-decoration: none;display: block;padding: 2vw 0;}
.footer-copyright {text-align: center;width: 100%;}
.footer-copyright small {color: #8c8680;font-size: 2.9vw;letter-spacing: 0.05em;font-family: "EB Garamond", serif;display: block;}


/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) { 
body{font-size: 16px;}
.pc { display: block; }
.sp { display: none; }


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

.header {height: 90px;top: 0;left: 50%;-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, 0%);transform: translate(-50%, 0%);width: 2000px;}
.header-content {max-width: 1200px;margin: 0 auto;padding: 0 30px;gap: 10px;}
.header .logo p{font-size: 12px;}
.header-logo {width: 160px;margin-bottom: 5px;}
.header-global-items {display: flex;align-items: center;gap: 10px;}
.header-global-items li a {color: #333333;font-size: 14px;font-family: var(--mincho);text-decoration: none;letter-spacing: 0.03em;transition: opacity 0.3s;}
.header-global-items li a:hover {opacity: 0.6;}
.header-contact {display: flex;align-items: center;gap: 8px;}
.header-tel {color: #a7893a;font-size: 32px;text-decoration: none;letter-spacing: 0.02em;font-family: "EB Garamond", serif;}
.header-tel::before{content: '\f095';font-family: 'icon';font-size: 20px;margin-right: 5px;}
.header-time {color: #666666;font-size: 12px;transform: scale(0.9);transform-origin: right center;white-space: nowrap;}
.header-btn {display: flex;justify-content: center;align-items: center;width: 180px;height: 48px;color: #ffffff;font-size: 12px;font-weight: bold;text-decoration: none;border-radius: 100vh;box-shadow: 0 3px 6px rgba(0,0,0,0.1);background: linear-gradient(135deg, #6e4a16 0%, #be9e58 50%, #714d18 100%);transition: opacity 0.3s;}
.header-btn:hover {opacity: 0.85;}
.header-btn-img{width: 220px;}



.container{position: relative;top: 0;left: 50%;-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, 0%);transform: translate(-50%, 0%);width: 2000px;}

#top{max-width: 2000px;margin: 0 auto;overflow-x: hidden;}


.hero{background: url(../images/hero-bg-pc.jpg)no-repeat top center;background-size: cover;padding: 100px 0 80px;margin: 90px 0 65px 0;}
.hero .intro{width: clamp(700px, 90%, 1200px);margin: 0 auto;}
.hero .intro .tit{margin-bottom: 10px;}
.hero .intro .txt{font-size: 18px;margin-bottom: 10px;padding: 0;border: none;}
.hero .intro .txt::after{content: "";width: 100px;height: 1px;background: #70716d;display: block;position: absolute;top: 50%;left: 20%;}
.hero .intro .sub{font-size: 43px;}
.hero .intro p{position: relative;top: 0;left: 0;font-size: 16px;margin-bottom: 40px;}

.hero ul{width: 500px;transform: translateX(0);gap: 25px;}

.features{padding: 0;margin-bottom: 90px;}
.features .tit{width: 218px;margin-bottom: 60px;}
.features .midashi{margin-bottom: 60px;}
.features .flex{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;width: 1200px;margin: 0 auto 65px;}
.features .flex img{margin: 0 45px 0 0;width: 52%;}
.features .txt{padding: 0;}
.features .txt ul{margin-bottom: 25px;}
.features .txt li{font-size: 18px;padding: 10px 32px;}
.features .txt .read{font-size: 28px;margin-bottom: 25px;padding-bottom: 25px;}
.features .txt p{font-size: 15px;}
.features .list{margin-bottom: 65px;}

.worry{padding: 490px 0 0;}
.worry-content{position: absolute;width: 1140px;transform: translateX(-50%);bottom: 0;left: calc(50% + 30px);}
.worry .resolution{width: 720px;top: 250px;}

.conjunction{background: url(../images/conjunction-bg-pc.jpg)no-repeat top center;background-size: cover;padding: 190px 0 75px;}
.conjunction .inbox{width: 900px;margin-bottom: 45px;}
.conjunction a{width: 450px;position: relative;}

.merit{background: url(../images/merit-bg-pc.jpg)no-repeat top center;background-size: cover;padding: 115px 0 90px;margin-bottom: 75px;}
.merit .tit{width: 250px;position: relative;top: -45px;}

.step{margin-bottom: 100px;}
.step .tit{width: 315px;margin-bottom: 30px;}

.reason{margin-bottom: 110px;}
.reason .tit{width: 560px;margin-bottom: 30px;}

.flow{background: url(../images/flow-bg-pc.jpg)no-repeat top center;background-size: cover;padding: 140px 0 125px;margin-bottom: 75px;}
.flow .tit{width: 220px;top: 110px;left: 420px;}

.qa-list {width: clamp(700px, 90%, 1200px);margin: 0 auto 120px;}
.qa-list .tit{width: 190px;margin-bottom: 40px;}
.qa-list dl {margin: 0 auto 20px;border: 1px solid var(--silver00);}
.qa-list dt {padding: 20px 50px 20px 60px;font-size: 16px;}
.qa-list dt p {font-size: 20px;}
.qa-list dt p:before{font-size: 35px;margin-right: 20px;}
.qa-list dt:before {right: 15px;width: 38px;}
.qa-list dt:after {right: 33px;top: 50%;height: 38px;}.qa-list dt.open:after {-moz-transform: rotate(90deg) translate(-620%, 0);-ms-transform: rotate(90deg) translate(-620%, 0);-webkit-transform: rotate(90deg) translate(-620%, 0);transform: rotate(90deg) translate(-950%, 0);}
.qa-list dd {padding: 20px 30px;font-size: 14px;}
.qa-list dd p {font-size: 18px;}

.contact{padding: 50px;}
.contact .midashi{margin-bottom: 40px;width: 240px;}
.contact p{margin-bottom: 30px;font-size: 16px;}
.contact ul{width: 1200px;margin: 0 auto;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: stretch;align-items: stretch;}
.contact li{width: 570px;padding: 40px;margin: 0;}
.contact li::before{width: 30px;height: 15px;}
.contact .tit{font-size: 18px;margin-bottom: 20px;}
.contact .read{padding: 0 25px;margin-bottom: 10px;}
.contact .tel{font-size: 45px;line-height: 1;margin-bottom: 5px;}
.contact .tel::before{font-size: 30px;margin-right: 8px;}
.contact .txt{padding: 0;}
.contact li img{padding: 0;}

.footer {padding: 40px 0 40px 0;}
.footer-container {max-width: 1200px;margin: 0 auto;padding: 0 20px;}
.footer-nav {margin-bottom: 40px;}
.footer-nav-list {justify-content: center;gap: 30px;}
.footer-nav-item {width: auto;}
.footer-nav-item a {font-size: 14px;padding: 0;transition: opacity 0.3s ease;}
.footer-nav-item a:hover {opacity: 0.6;}
.footer-copyright small {font-size: 12px;letter-spacing: 0.08em;}
}


/* =============================================
retina-size
================================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
.hero{background-image: url(../images/hero-bg-pc@2x.jpg);}
.conjunction{background-image: url(../images/conjunction-bg-pc@2x.jpg);}
.merit{background-image: url(../images/merit-bg-pc@2x.jpg);}
.flow{background-image: url(../images/flow-bg-pc@2x.jpg);}
}