@charset "utf-8";
:root {
	--bw: 360;
	--px: clamp(0.75px, (100vw / var(--bw)), 1px);

    --m: calc(25 * 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 );

    --green: #036eb8;
    --black: #0c3459;
    --gray: #edf3f7;
    --back: #f9fbfc;

    --jibun: #036ead;
    --shakai: #6a9d36;
    --enjoy: #ff6866;

	--large-size: calc(23 * var(--px));
	--medium-size: calc(18 * var(--px));
	--regular-size: calc(16 * var(--px));
	--small-size: calc(12 * var(--px));

	--transition: 0.3s 0s ease;
}
@media screen and (max-width: 767px) {
    :root {
        --m: calc(15 * var(--px));
        --large-size: calc(21 * var(--px));
        --medium-size: calc(17 * var(--px));
        --regular-size: calc(15 * var(--px));
        --small-size: calc(11 * var(--px));
    }
}
html {
	-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;
}
body {
	width: 100svw;
    background: radial-gradient(var(--gray), var(--back));

    font-family: "Noto Sans 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のヒラギノ */
                 YuGothicM,        /* Windows8.1以上は游ゴシック */
                 YuGothic,         /* Macの游ゴシック */
                 Meiryo,           /* 游ゴシックが入っていないWindows */
                 sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;

	overflow-x: clip;
	position: relative;
}

* {
	box-sizing: border-box;
}
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	br:is([sp], .sp, .sp-only) {
		display: none;
	}
	br:is([pc], .pc, .pc-only) {
		display: revert;
	}
}
@media screen and (max-width: 767px) {
	br:is([pc], .pc, .pc-only) {
		display: none;
	}
	br:is([sp], .sp, .sp-only) {
		display: revert;
	}
}

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;
}

table {
    width: 100%;
    border-spacing: 0;
    color: var(--black);
}
:is(th, td) {
    padding-block: 0.5lh;
    padding-inline: 0.5ic;
}
tr:not(:last-child) :is(th, td) {
    border-bottom: 1px solid currentColor;
}
th {
    width: 6ic;
}

.button {
    display: block;
    width: 100%;
	padding-block: 0.5lh;
    padding-inline: 2ic;
	border-radius: 1lh;
    background: var(--theme-color, var(--button-bg, var(--green)));

    font-size: var(--medium-size);
    color: var(--button-color, white);
	line-height: 1.5;
	font-weight: 700;
    text-align: center;

    position: relative;
}
.button:has(img) {
	display: flex;
	align-items: center;
}
.button img {
    display: block;
    height: 1ic;
}
.button::after {
    display: block;
    width: calc(1ic * 0.6);
    height: calc(1ic * 0.6);
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    rotate: 45deg;

    position: absolute;
    right: 1lh;
    top: 50%;
    translate: 0 -50%;
}
@media (hover: hover) {
	.button {
		transition: var(--transition);
	}
	.button:hover {
		background: rgb(from var(--theme-color, var(--button-bg, var(--green))) r g b / 0.7);
	}
}

[class*="jibun"], .block:has([class*="jibun"]) {--theme-color: var(--jibun)}
[class*="shakai"], .block:has([class*="shakai"]) {--theme-color: var(--shakai)}
[class*="enjoy"], .block:has([class*="enjoy"]) {--theme-color: var(--enjoy)}

.wrap {
    width: auto;
    max-width: 500px;
    margin-inline: auto;
}
.label, .headline {
    line-height: 1.5;
}
.label {
    width: fit-content;
    padding-block: 0.4lh;
    margin-inline: auto;
    margin-bottom: 1.5lh;
    font-weight: bold;
    letter-spacing: 0.1ic;
    position: relative;
}
.label::before,
.label::after {
    display: block;
    position: absolute;
    border-color: currentColor;
}
.label::before {
    width: 100%;
    border-bottom: 2px solid;
    left: 50%;
    top: 100%;
    translate: -50% 0;
}
.label::after {
    width: 1.2ic;
    height: 1lh;
    background: var(--bg, white);
    border-right: 2px solid;
    left: 50%;
    top:  100%;
    translate: -50% -25%;
    transform: skewX(-20deg);
}
.headline {
    margin-bottom: 1lh;
    font-size: var(--large-size);
    font-weight: 700;
    text-align: center;
}

.block + .block {
    margin-top: var(--m3);
}
.block.white {
    border-radius: 6px;
    background: white;
    color: var(--green);
}
.block p {
    margin-block: 0.8lh 1lh;
    color: var(--black);
    font-weight: 700;
}

section p:not([class]) {
    text-align: justify;
}
section p:not([class]) + p:not([class]) {
    margin-top: 1lh;
}
.notice {
    margin-inline: var(--m);
    padding: var(--m);
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px currentColor;
}
.notice .headline {
    margin-bottom: 0.5lh;
    font-size: var(--medium-size);
}


header {
    padding-block: 0.5lh;
    background: var(--green);
    font-size: 20px;
    line-height: 1;
    text-align: center;
}
header img[src*="series-title"] {
    display: block;
    height: 1lh;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    header img[src*="series-title"] {
        width: 70%;
        height: auto;
    }
}

main {
    min-height: 100svh;
    background: white;
}
main > section {
    padding: var(--m2);
    background: var(--bg, white);
    color: var(--green);
}
section.hero {
    padding-inline: var(--m);
}
section.hero .label {
    margin-top: var(--m);
    font-size: var(--regular-size);
    letter-spacing: 0;
}
section.hero .label span {
    display: block;
    width: fit-content;
    box-sizing: content-box;
    padding-block: 0.2lh;
    padding-inline: 1ic;
    border-radius: 6px;
    background: var(--green);
    margin-inline: auto;
    margin-bottom: 0.5lh;
    color: white;
    font-size: 110%;
}
section.hero nav {
    padding-inline: var(--m);
}
section.hero .button {
    padding-block: 0.7lh;
    border-radius: 2lh;
}
section.hero img[src*="text"] {
    display: block;
    width: fit-content;
    height: calc(21 * var(--px));
    margin-inline: auto;
}
section.hero a + a {
    margin-top: var(--m);
}
section.hero .nav-link {
    display: block;
    width: fit-content;
    margin-inline: auto;
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 0.1lh;
}
section.hero .nav-link::after {
    display: inline-block;
    width: calc(1ic * 0.6);
    height: calc(1ic * 0.6);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    margin-left: 0.5ic;
    rotate: 45deg;
    translate: 0 -25%;
}
@media (any-hover: hover) {
    section.hero .nav-link {
        transition: var(--transition);
    }
    section.hero .nav-link:hover {
        color: var(--green);
    }
}
section:is(.about, .organizer) {
    --bg: var(--green);
    color: white;
}
section.about .block {
    margin-top: var(--m2);
    padding: var(--m);
}
section.about .block p {
    color: currentColor;
}

section.link .container {
    margin-block: var(--m2);
}
section.link .block h3 {
    border-radius: 6px;
    border: 6px solid var(--theme-color);
}
section.link .block h4 {
    margin-block: 1lh 0.5lh;
    color: var(--theme-color);
    font-size: var(--medium-size);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 1.5ic;
}
section.link .block h4::before,
section.link .block h4::after {
    display: block;
    flex: 1 0 auto;
    height: 2px;
    background: currentColor;
}
section.link .block p {
    margin-block: 0;
}
section.link .block .button {
    margin-top: var(--m);
}
section.link .notice strong {
    color: var(--black);
}

section.organizer .block {
    padding: var(--m);
}
section.organizer img[src*="portrait"] {
    border-radius: 3px;
}
section.organizer h3 {
    margin-top: 0.5lh;
    font-size: var(--large-size);
    font-weight: 700;
    text-align: center;
}
section.organizer ul {
    list-style: disc;
    padding-inline-start: 1.5ic;
    margin-bottom: 1lh;
    color: var(--black);
}
section.organizer h4 {
    margin-top: 0.5lh;
    color: var(--black);
    font-size: var(--medium-size);
    text-align: center;
}
section.organizer table {
    margin-top: var(--m);
    border-top: 1px solid var(--black);
}

section.well-being {}

section.contact {
    background: var(--gray);
}
section.contact .notice {
    padding-inline: var(--m2);
}
section.contact a[href] {
    margin-block: var(--m);
    display: block;
    width: fit-content;
    margin-inline: auto;
    text-decoration: underline;
}

footer {
    padding-block: var(--m2) var(--m3);
    background: var(--black);
    color: white;
}
footer .company {
    width: fit-content;
    margin-inline: auto;
}
.company img[src*="logo"] {
    height: 1.2lh;
    margin-bottom: var(--m);
}
.copyright {
    margin-top: var(--m2);
    font-size: 80%;
    text-align: center;
}