@charset "utf-8";
/**************************************** カラーパレット（温かみ・伴走） ****************************************/
:root{
	--cream:#FBF8F2;        /* ベース背景（クリーム） */
	--cream2:#F4EDE1;       /* 一段濃いベージュ */
	--ink:#4A4036;          /* 本文（温かいブラウン） */
	--ink-soft:#6F6457;     /* 補助テキスト */
	--terra:#D98C5F;        /* メインアクセント（テラコッタ） */
	--terra-dark:#C5764A;   /* アクセント濃 */
	--sage:#8A9A6B;         /* サブアクセント（セージグリーン） */
	--sage-dark:#71814F;
	--brown:#4A3F35;        /* 濃色（フッター・ヒーロー） */
	--line:#06C755;         /* LINEグリーン */
	--line-dark:#05a648;
	--border:#E6DCCB;       /* やわらかい境界線 */
}

/**************************************** コンテンツ設定 ****************************************/
html,body {font-size:0.9vw;margin:0;padding:0;background:var(--cream);}
body {font-family:"Noto Sans JP","Helvetica Neue","Helvetica","Arial",sans-serif;color:var(--ink);line-height:1.9;letter-spacing:0.02em;-webkit-font-smoothing:antialiased;}
div,h1,h2,h3,h4,ul,li,dl,dt,dd,img {margin:0px; padding: 0px;}
h1,h2,h3,h4 {font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;line-height:1.5;letter-spacing:0.03em;}
ul {list-style: none; margin: 0px; padding:0px;}
p {margin: 0px; padding: 0px;}
a,a:visited {color:var(--ink); text-decoration: none;}
a:hover {color:var(--terra-dark); text-decoration: underline;}
a img {border-style:none;}
img {max-width:100%;}
input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
* {box-sizing:border-box;}
.text-right {text-align:right;}
.text-center {text-align:center;}
/*SP*/
@media (max-width: 896px){
	html,body {font-size:3.5vw;}
}

/*共通*/
@media (max-width: 896px){ .pc {display:none !important;} }
@media (min-width: 897px){ .sp {display:none !important;} }

/*パソコン設定*/
@media (min-width: 897px){
.col {}
.collist {display:flex; flex-wrap:wrap;}
.collist.reverse {flex-direction:row-reverse;}
.collist .inner {justify-content:space-between;}
.col .inner {float:left;}
.col .inner.right {float:right;}
.col2 .inner {width:50%;} .col3 .inner {width:33.3%;} .col4 .inner {width:25%;} .col5 .inner {width:20%;}
.col6 .inner {width:16.6%;} .col7 .inner {width:14.2%;} .col8 .inner {width:12.5%;} .col9 .inner {width:11.1%;} .col10 .inner {width:10%;}
}
section {}
.contentarea {padding:8vw 5vw;}
.content {width:62vw;max-width:100%;margin:0px auto;}
.content.wide {width:88vw;}
.contentarea h2 {font-size:2.8rem;margin-bottom:0.8em;color:var(--ink);}
.contentarea p {font-size:1.25rem;line-height:2.0em;color:var(--ink);}
.contentarea p a {font-size:1.2rem;}
/*SP*/
@media (max-width: 896px){
	.contentarea {padding:7vh 7vw;}
	.content {width:100%;}
	.contentarea h2 {font-size:1.9rem;}
	.contentarea p {font-size:1.15rem;}
	.contentarea p a {font-size:1.1rem;}
}

/*ボタン*/
a.btn, span.btn {font-size:1.05rem;font-weight:700;padding:1em 2.6em;border-radius:3rem;
	display:inline-block;text-decoration:none;background:#fff;border:solid var(--terra) 2px;color:var(--terra-dark);cursor:pointer;
	transition:0.3s;box-shadow:0 6px 16px rgba(193,118,74,0.15);margin:0.4rem 0.3rem;}
a.btn:hover, span.btn:hover {background:var(--terra);color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 22px rgba(193,118,74,0.28);}
a.btn.line, span.btn.line {background:var(--line);border-color:var(--line);color:#fff;box-shadow:0 6px 16px rgba(6,199,85,0.22);}
a.btn.line:hover, span.btn.line:hover {background:var(--line-dark);border-color:var(--line-dark);color:#fff;}
a.btn.sage, span.btn.sage {border-color:var(--sage);color:var(--sage-dark);}
a.btn.sage:hover, span.btn.sage:hover {background:var(--sage);color:#fff;}

/*inview設定*/
.inview {opacity:0;transform:translateY(3vw);}
.inview.on {opacity:1;transform:translateY(0px);transition:1.1s cubic-bezier(0.16,1,0.3,1);}
.clear {clear:both; }

/**************************************** ヘッダー ****************************************/
.headerarea {position:fixed;top:0px;left:0px;width:100%;height:10vh;z-index:7000;background:rgba(251,248,242,0.85);
 backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);box-shadow:0 1px 14px rgba(74,63,54,0.08);}

.logoarea {position:absolute;top:0vh;left:2.5vw;display:flex;align-items:center;height:10vh;}
.logoarea img {height:5.5vh;width:auto;max-width:30vw;object-fit:contain;object-position:center left;}

.barwrap {display:none;}

.menu {position:fixed;top:0px;right:0px;width:auto;height:10vh;line-height:10vh;padding:0px;z-index:7100;}
.menu .menulist {display:flex;flex-wrap:wrap;align-items:center;height:10vh;}
.menu .menulist a {font-size:1.0vw;font-weight:500;color:var(--ink);padding:0 1.1rem;display:flex;align-items:center;height:10vh;transition:0.2s;}
.menu .menulist a:hover {text-decoration:none;color:var(--terra-dark);}
.menu .menulist a.attention01 {background:var(--terra);color:#fff;padding:0 1.6rem;margin-left:0.6rem;border-radius:0;height:10vh;}
.menu .menulist a.attention02 {background:var(--line);color:#fff;padding:0 1.6rem;height:10vh;}
.menu .menulist a.attention01:hover {background:var(--terra-dark);color:#fff;}
.menu .menulist a.attention02:hover {background:var(--line-dark);color:#fff;}

/*SP*/
@media (max-width: 896px){
.logoarea {left:5vw;}
.logoarea img {height:5vh;max-width:60vw;}
	.menu {position:fixed;top:0px;left:0px;width:100vw;height:100vh;background:var(--cream);transform:translateX(150vw);}
	.menu.on {transform:translateX(0vw);transition:0.4s;}
	.menu.out {transform:translateX(150vw);transition:0.3s;}
	.menu .menulist {padding:16vh 10vw 10vh 10vw;display:block;height:auto;}
	.menu .menulist a {font-size:1.4rem;line-height:2.4em;height:auto;margin-bottom:1.5rem;display:block;border-bottom:solid var(--border) 1px;padding-bottom:1rem;}
	.menu .menulist a.attention01 {display:block;text-align:center;width:100%;padding:1em 0;margin-top:3rem;margin-bottom:0.6rem;border-radius:3rem;border:none;}
	.menu .menulist a.attention02 {display:block;text-align:center;width:100%;padding:1em 0;border-radius:3rem;border-bottom:none;}

.barwrap {position:fixed;top:1vh;right:1.5vh;display:block;height:8vh;width:8vh;vertical-align:middle;z-index:8000;}
.barwrap.on {transition:1s;}
.barwrap.out {transition:0.3s;}
.barwrap .bar {position:absolute;background:var(--ink);width:5vh;height:2px;border-radius:2px;}
.barwrap .bar.bar01 {top:4vh;left:2vh;}
.barwrap .bar.bar02 {top:5vh;left:2vh;}
.barwrap.on .bar {transition:1s;}
.barwrap.on .bar.bar01 {transform:translateX(-50%) translateY(-50%) rotateZ(45deg);top:50%;left:50%;}
.barwrap.on .bar.bar02 {transform:translateX(-50%) translateY(-50%) rotateZ(-225deg);top:50%;left:50%;}
.barwrap.out .bar {transition:0.5s;}
.barwrap.out .bar.bar01 {transform:translateX(0%) translateY(0%) rotateZ(0deg);top:4vh;left:2vh;}
.barwrap.out .bar.bar02 {transform:translateX(0%) translateY(0%) rotateZ(0deg);top:5vh;left:2vh;}
}

/**************************************** フッター ****************************************/
/* bg_footer.jpg : フッター背景画像 */
.footerarea {padding:7vw 0px 0px 0px;background:var(--brown) url(../img/cmn/bg_footer.jpg) no-repeat center center;background-size:cover;position:relative;}
.footerarea::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(74,63,53,0.82);}
.footerarea > div {position:relative;z-index:2;}

.contactarea {text-align:center;padding:0 5vw 7vw;}
.contactarea h2 {color:#fff;font-size:2.8rem;margin-bottom:0.8em;}
.contactarea p {color:#FBF3E8;font-size:1.25rem;line-height:2.2em;}
.contactarea a.btn {font-size:1.3rem;border-radius:3em;margin-top:1.5rem;}

/*SP*/
@media (max-width: 896px){
	.contactarea {padding:0 8vw 12vh;}
	.contactarea h2 {font-size:1.9rem;margin-bottom:1.2em;}
	.contactarea p {font-size:1.15rem;text-align:left;}
	.contactarea a.btn {font-size:1.15rem;display:block;}
}

.footer {position:relative;padding:5vw 6vw 3vw;text-align:left;border-top:solid rgba(255,255,255,0.15) 1px;}
.footermenu {padding-bottom:2.5rem;}
.footermenu a {font-size:1.0rem;line-height:2em;color:#FBF3E8;display:inline-block;padding-right:1.4rem;}
.footermenu a:hover {color:#fff;text-decoration:underline;}
.copyright {font-size:0.95rem;color:#D8CDBC;}
.copyright p {color:#D8CDBC;font-size:0.95rem;}

/*SP*/
@media (max-width: 896px){
	.footermenu {text-align:left;}
	.footermenu a {display:block;border-bottom:solid rgba(255,255,255,0.12) 1px;padding:12px 0;}
	.footermenu br {display:none;}
}