@charset "utf-8";
:root {
	--main-width: 1200px;
	--bw: 1600;/* ブラウザ幅の想定値（デザインアートボードの横幅） */
	--px: clamp(0.75px, (100vw / var(--bw)), 1px); /* 許容範囲をclampで表現 */
	/* --px: (100vw / var(--bw)); 教養範囲なしバージョン */

	--m: calc(15 * var(--px));
    --m2: calc( var(--m) * 2 );
    --m3: calc( var(--m) * 3 );
    --m4: calc( var(--m) * 4 );
    --m5: calc( var(--m) * 5 );
    --m6: calc( var(--m) * 6 );
    --m7: calc( var(--m) * 7 );
    --m8: calc( var(--m) * 8 );
    --m9: calc( var(--m) * 9 );
    --m10: calc( var(--m) * 10 );
    --ms: calc( var(--m) / 3 * 2 );

	--wrap-padding-inline: var(--m2);
    --header-height: 90px;

	--tagline-size: 45px;
    --subline-size: 21px;
    --label-size: 39px;
	--headline-size: 24px;
    --button-size: 24px;
    --phone-size: 45px;
	--regular-size: 18px;
	--note-size: 15px;
    --small-size: 12px;

    --black: #524028;
    --main: #4fc4c4;
    --sub: #fea181;
    --pale: #e5f7f7;
    --light: #fafffd;
    --action: #46cf6d;
    --marker: #fde67c;

    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
	/*font-feature-settings: "palt";*/

	scroll-snap-type: y proximity;
	scroll-padding-top: var(--m2, 30px);
	scroll-behavior: smooth;
	/*
		上記プロパティを設定すると、フォームバリデーション時にsubmitからバリデーションエラー箇所までスクロールが必要な場合エラーメッセージが表示されない
		-> jsでスムーススクロールを実装
	*/
	
	interpolate-size: allow-keywords;/* width, heightの伸び縮みアニメーションを有効化する */

	--transition: 0.3s 0s ease;
}
:target {
	scroll-margin-block: 2lh;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    :root {
        --main-width: 100%;
        --bw: 375;

        --wrap-padding-inline: var(--m);
        --header-height: calc(70 * var(--px));

        --tagline-size: calc(27 * var(--px));
        --subline-size: calc(18 * var(--px));
        --label-size: calc(24 * var(--px));
        --headline-size: calc(19 * var(--px));
        --button-size: calc(18 * var(--px));
        --phone-size: calc(30 * var(--px));
        --regular-size: calc(16 * var(--px));
        --note-size: calc(13 * var(--px));
        --small-size: calc(11 * var(--px));
        
    }
}




body {
	width: 100svw;

	font-family: "LINE Seed JP",
				 -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
                 'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
                 'Segoe UI',       /* Windowsの欧文 */
				 'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */
                 Meiryo,           /* 游ゴシックが入っていないWindows */
                 sans-serif;
    font-size: var(--regular-size);
    font-weight: 400;
    line-height: 1.75;
    color: var(--black);

	overflow-x: clip;
	position: relative;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}

* {
	box-sizing: border-box;
}
/** 疑似要素   
-------------------------------------------------------------------- */
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}
/** 改行   
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	:is(br, wbr)[sp] {
		display: none;
	}
	:is(br, wbr)[pc] {
		display: revert;
	}
}
@media screen and (max-width: 767px) {
	:is(br, wbr)[pc] {
		display: none;
	}
	:is(br, wbr)[sp] {
		display: revert;
	}
}
/** リンク   
-------------------------------------------------------------------- */
a {
	color: inherit;
    text-decoration: none;
}
a:has(img) {
	display: block;
}
a:not([class]) {
	color: currentColor;
	text-decoration: underline;
	text-underline-offset: 4px;
}
@media (any-hover: hover) {
	a {
        transition: var(--transition);
	}
	a:not([class]) {
		text-decoration: underline;
	}
	a:not([class]):hover {
        color: var(--sub);
		text-decoration: none;
	}
}
@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        pointer-events: none;
    }
}


/** テキスト   
-------------------------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    line-height: 1.5;
}
p + p:not([class]),
li + li {
    margin-top: 1lh;
}
strong {
    font-weight: 700;
}
ul, ol {
	margin-block: 0.75lh;
}
ol {
	list-style: decimal;
	padding-inline-start: 1.5ic;
}
dt {
    font-weight: 400;
}
.small {
	font-size: 75%;
}
.marker {
	background: linear-gradient(to top, var(--marker) , var(--marker));
}
.note {
    display: block;
    font-size: var(--note-size);
	text-indent: -1ic;
	padding-left: 1ic;
}

@media screen and (max-width: 767px) {
	p {
		text-align: justify;
	}
}
/** イメージ   
-------------------------------------------------------------------- */
img,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: top;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}
picture {
	line-height: 0;
	overflow: hidden;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}
/** ボタン   
-------------------------------------------------------------------- */
.button {
    display: block;
    width: fit-content;
	padding-block: 0.3lh;
    padding-inline: 1ic;
	border-radius: 10px;
    background: var(--action);
	box-shadow: 9px 9px 0 0 rgb(0 0 0 / 0.05);

	font-size: var(--button-size, inherit);
    color: white;
	line-height: 1.5;
	font-weight: 700;
    text-align: center;
    letter-spacing: 0.05ic;
}
.button::after {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    rotate: 45deg;
    translate: 0 -1px;
    margin-left: 1.5ic;
}
@media (any-hover: hover) {
	.button {
		transition: var(--transition);
	}
	.button:hover {
		background: var(--sub);
	}
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    .button {
        padding-block: 0.5lh;
        letter-spacing: 0;
    }
    .button::after {
        width: 10px;
        height: 10px;
        margin-left: 0.3ic;
    }
}




/** ラッパー   
-------------------------------------------------------------------- */
.wrap {
	width: auto;
	max-width: var(--wrap-width, var(--main-width));
	padding-inline: var(--wrap-padding-inline);
	margin-inline: auto;

	position: relative;
	z-index: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** セクション   
-------------------------------------------------------------------- */
main.content {
    padding-top: var(--header-height);
}
main > section {
    padding-block: var(--m6);
	position: relative;
	z-index: 0;
}
main > section h2 {
    font-size: var(--label-size);
    letter-spacing: 0.18ic;
    text-align: center;
}
section h2 {
	margin-bottom: var(--m2);
}
section h2 + p,
section h2 + p + p {
	text-align: center;
    margin-inline: var(--m8);
}
section h2 + p:not(:has(+ p)) {
    margin-bottom: var(--m2);
}

section section {
	margin-top: var(--m4);
}
section section h3 {
    font-size: var(--label-size);
    text-align: center;
    letter-spacing: 0.18ic;
    margin-bottom: 0.5lh;
}
section section h3 + p {
    text-align: center;
    margin-bottom: var(--m2);
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    main > section {
        padding-block: var(--m4);
    }
    section h2 + p,
    section h2 + p + p {
        margin-inline: var(--m);
        text-align: justify;
    }
}


section.lead .container {
    margin-top: var(--m6);
    align-items: center;
}
section.lead .text {
    flex: 1;
    font-size: var(--headline-size);
    font-weight: 700;
}
section.lead .nav-more {
    margin-top: var(--m6);
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    section.lead .container {
        margin-top: var(--m4);
        padding-inline: var(--m2);
    }
    section.lead .text + img {
        width: 100%;
        margin-top: var(--m2);
    }
    section.lead .nav-more {
        margin-top: var(--m2);
        font-size: var(--regular-size);
    }
}
.panel {
    max-width: 960px;
    margin-inline: auto;
    background: var(--light);
    border-radius: 36px;
    padding-block: var(--m4);
    padding-inline: var(--m8);
}
.panel .nav-more {
    margin-top: var(--m6);
    margin-inline: auto;
}

@media screen and (max-width: 767px) {
    .panel {
        padding-block: var(--m3) var(--m2);
        padding-inline: var(--m2);
        border-radius: 24px;
    }
    .panel .nav-more {
        margin-top: var(--m2);
        font-size: var(--regular-size);
    }
}




/** コンテナ・ブロック   
-------------------------------------------------------------------- */
.container:where(.row, .row-wrap) {
    display: flex;
}
.container.row {
    flex-flow: row nowrap;
}
.container.row-wrap {
    flex-flow: row wrap;
}
.container:where(.row, .row-wrap) > .block {
    flex-grow: 1;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    .container.row {
        flex-wrap: wrap;
    }
    .container:where(.row, .row-wrap) > .block {
        flex-basis: 100%;
    }
}


/** フレーム  
-------------------------------------------------------------------- */
.frame {
    background: white;
    border-radius: 12px;
    box-shadow: 12px 12px 0 0 rgb(from var(--black) r g b / 0.1);
    position: relative;
}
.frame::after {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--frame-border-color, var(--black));
    position: absolute;
    left: -6px;
    top: -6px;
    z-index: 5;
    pointer-events: none;
}
.frame:has(> img) {
    width: fit-content;
}
.frame > img {
    border-radius: 12px;
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}





/** ロゴ・グロナビ  
-------------------------------------------------------------------- */
a.logo {
    display: block;
    width: fit-content;
}
:where(#header, #footer) img[src*="logo-horizontal"] {
    width: calc(200 * var(--px));
    aspect-ratio: 200 / 47;
}
:where(#header, #footer) nav.global {
    display: flex;
    align-items: center;
    gap: 2ic;
    font-weight: 700;
}
@media (any-hover: hover) {
    :where(#header, #footer) nav.global a:hover {
        color: var(--sub);
    }
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** ヘッダー  
-------------------------------------------------------------------- */
#header {
	width: 100%;
    background: rgb(255 255 255 / 0.95);
    backdrop-filter: blur(2px);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

#header .wrap {
	height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    #header img[src*="logo-horizontal"] {
        width: 50%;
    }
}

/** ヘッダー/ハンバーガー   
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	header .burger {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	body.is_show_navigation {
		overflow: clip;
	}
	header .burger {
		width: var(--header-height);
		height: var(--header-height);
		position: relative;
	}
	header nav.global {
		width: 100svw;
        height: calc(100svh - var(--header-height));
		padding-block: var(--m2);
		padding-inline: 0;
        background: rgb( from var(--pale) r g b / 0.8);

        flex-direction: column;
        gap: 0.5lh;

		position: absolute;
		left: 0;
		top: var(--header-height);
		bottom: 0;
		z-index: 10;
		transition: var(--transition);
	}
    header nav.global a {
        font-size: var(--button-size);
        text-align: center;
        width: 100%;
        padding-block: var(--m);
        padding-inline: var(--m2);
    }
	body:not(.is_show_navigation) header::after,
	body:not(.is_show_navigation) header nav {
		pointer-events: none;
		opacity: 0;
		z-index: -1;
	}
	body:is(.is_show_navigation) header::after ,
	body:is(.is_show_navigation) header nav {
		pointer-events: all;
		opacity: 1;
	}

	/** ハンバーガー：２本線→バツ */
	header .burger::before,
	header .burger::after {
		display: block;
		width: calc(100% - var(--m2));
		height: 3px;
		border-radius: 3px;
		background: var(--black);

		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;

		transition: var(--transition);
	}
	body:not(.is_show_navigation) header .burger::before {
		margin-top: -5px;
	}
	body:not(.is_show_navigation) header .burger::after {
		margin-top: 5px;
	}
	body:is(.is_show_navigation) header .burger::before {
		rotate: 45deg;
	}
	body:is(.is_show_navigation) header .burger::after {
		rotate: -45deg;
	}
}



/** FV  
-------------------------------------------------------------------- */
section#hero {
    padding-block: 0;
    padding-inline: var(--wrap-padding-inline);
    position: relative;
}
section#hero .wrap {
    min-height: calc(460 * var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
}
section#hero .background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: -1;
}
section#hero .heading {
    text-align: center;
}
section#hero .subline {
    font-size: var(--subline-size);
}
section#hero .tagline {
    font-size: var(--tagline-size);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#hero {
        min-height: calc(270 * var(--px));
    }
}


/** マップ  
-------------------------------------------------------------------- */
section#access iframe {
    width: 100%;
    aspect-ratio: 40 / 19;
}
@media screen and (max-width: 767px) {
    section#access iframe {
        aspect-ratio: 4 / 5;
    }
}





/** CTA  
-------------------------------------------------------------------- */
section.cta {
    background: var(--main);
}
section.cta h2 {
    color: white;
    margin-bottom: var(--m4);
}
section.cta .container {
    padding-block: var(--m3);
    padding-inline: var(--m4);
}
section.cta .frame {
    background: #bdf5f5;
    --frame-border-color: white;
}
section.cta .block {
    flex: 1 1 auto;
    text-align: center;
}
section.cta .nav-tel {
    font-size: var(--phone-size);
    font-weight: 700;
}
section.cta .nav-tel img {
    height: 1ic;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: var(--m);
}
section.cta .nav-contact {
    margin-top: var(--m3);
    margin-inline: auto;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section.cta .container {
        padding-block: var(--m3);
        padding-inline: var(--m);
        display: block;
    }
}



/** フッター  
-------------------------------------------------------------------- */
#footer {
    background: white;
}
#footer .wrap {
    padding-block: var(--m4);
    position: relative;
}
#footer .nav-header {
    width: calc(60 * var(--px));
    height: calc(60 * var(--px));
    background: var(--main);
    border-radius: 3px;
    display: grid;
    place-items: center;
    position: absolute;
    right: 0;
    top: var(--m4);
}
#footer .nav-header::before {
    display: block;
    width: 20%;
    height: 20%;
    border-top: 3px solid white;
    border-right: 3px solid white;
    rotate: -45deg;
    translate: 0 25%;
}
@media (any-hover: hover) {
    #footer .nav-header {
        transition: var(--transition);
    }
    #footer .nav-header:hover {
        background: var(--sub);
    }
}
#footer .logo {
    margin-bottom: var(--m3);
}
#footer .copyright {
    background: var(--black);
    color: white;
    font-size: var(--small-size);
    text-align: center;
    line-height: 5;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    #footer .nav-header {
        width: calc(45 * var(--px));
        height: calc(45 * var(--px));
        right: var(--m);
        top: var(--m);
    }
    #footer .logo  {
        margin-block: var(--m3);
        width: fit-content;
        margin-inline: auto;
    }
    #footer nav.global {
        padding-inline: var(--m2);
        flex-wrap: wrap;
        justify-content: center;
    }
}