@charset "utf-8";


/** ヘッダー   
-------------------------------------------------------------------- */
.header {
    background: rgb( from white r g b / 0.8);
}
:where(body#home) .header {
    background: rgb( from white r g b / 0.5);
}
.header .wrap {
    height: var(--header-height);
}
.header .logo {
    width: calc(255 * var(--px));  
}
.header .external::after {
    margin-top: 0;
}

/** グロナビ（ヘッダー・フッター）   
-------------------------------------------------------------------- */
.global-navigation dl.subnav {
    position: relative;
}

.global-navigation .subnav dt {
    font-weight: 500;
}
.global-navigation .subnav dd {
    width: max-content;
    padding-block: 0.3lh;
    padding-inline: 0.5ic;
    background: rgb( from var(--light-yellow) r g b / 0.9);
    backdrop-filter: blur(3px);

    position: absolute;
    left: 0;
    top: 100%;
    z-index: 10;

    transition: var(--transition);
}
.global-navigation .subnav a {
    width: fit-content;
    padding-block: 0.3lh;
    padding-inline: 1ic;
    border-radius: 6px;
}

.global-navigation .subnav:not(.is_active) dd {
    display: none;
    pointer-events: none;
    opacity: 0;
}
.global-navigation .subnav:is(.is_active) dd {
    display: block;
    pointer-events: all;
    opacity: 1;
}

/** ヘッダーグロナビ
-------------------------------------------------------------------- */

/** フッターグロナビ
-------------------------------------------------------------------- */

    .header .global-navigation > a,
    .header .global-navigation .subnav dt {
        display: flex;
        align-items: center;
	}

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

    /** ヘッダーグロナビ
    -------------------------------------------------------------------- */
    .header .global-navigation {
        height: 100%;
    }
    .header .global-navigation > :is(a, dl.subnav),
    .header .global-navigation .subnav dt {
        height: 100%;
    }
	.header .global-navigation a,
    .header .global-navigation .subnav dt {
		font-size: calc(16 * var(--px));
	}
    .header .global-navigation > a,
    .header .global-navigation .subnav dt {
        padding-inline: 1ic;
    }

    .footer .global-navigation > a,
    .footer .global-navigation .subnav dt {
        padding-block: 0.3lh;
    }
    /** フッターグロナビ
    -------------------------------------------------------------------- */
    .footer .global-navigation .subnav dd {
        display: flex;
        color: var(--black);
        left: -0.5ic;
    }
    .footer .global-navigation .subnav:has([class*="style"]).is_active dd {
        max-width: 500px;
        flex-wrap: wrap;
    }
}
@media (any-hover: hover) {
    .header,
    .global-navigation .subnav dt {
        transition: var(--transition);
    }
    .global-navigation .subnav dt {
        cursor: pointer;
    }
    .footer .global-navigation a,
    .footer .global-navigation .subnav dt {
        transition: none;
    }
    .header:hover {
        background: rgb( from white r g b / 0.95);
    }
    body:has(.header:hover)::before {
        display: block;
        width: 100%;
        height: 100%;
        background: rgb(from black r g b / 0.5);
        position: absolute;
        inset: 0;
        z-index: 10;
    }
    .global-navigation a:hover,
    .global-navigation .subnav dt:hover,
    .global-navigation .subnav.is_active dt {
        background: var(--yellow);
    }
    .footer .global-navigation > a:hover,
    .footer .global-navigation .subnav dt:hover,
    .footer .global-navigation .subnav.is_active dt {
        padding-inline: 0.5ic;
        margin-inline: -0.5ic;
        color: var(--black);
    }
}

@media screen and (max-width: 767px) {
    .header .wrap {
        padding-right: 0;
    }
    .header .logo {
        width: 70%;    
    }


    /** ヘッダーグロナビ
    -------------------------------------------------------------------- */
    .header .global-navigation {
        --bg: rgb( from white r g b / 0.95);
        min-height: calc(100svh - var(--header-height));
        padding-block: 0;
        padding-inline: 0;
        background: var(--bg);
        overflow-x: clip;
        overflow-y: scroll;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .header .global-navigation > :is(a, dl.subnav) {
        width: 100%;
        font-size: 21px;
    }
    .header .global-navigation > a,
    .header .global-navigation > .subnav :is(dt, dd) {
        padding-block: var(--m2);
        padding-inline: var(--m2);
        border-top: 1px solid var(--slate);
    }
    .header .global-navigation .subnav dd {
        width: 100%;
        padding-block: 0;
        padding-inline: 0;
        background: rgb( from var(--light-yellow) r g b / 0.9);

        position: static;
    }
    .header .global-navigation .subnav a {
        width: 100%;
        padding-block: var(--m2);
        padding-inline: calc(var(--m2) + 1ic) var(--m);
    }
    .header .global-navigation .subnav a:not(:first-child) {
        border-top: 1px solid var(--slate);
    }
    .header .global-navigation .subnav a::after {
        display: none;
    }

}



/** CTA
-------------------------------------------------------------------- */
.cta {
    --bg: white;
    padding-block: var(--m5);
}
.hero + .cta {
    padding-top: var(--m10);
}
#kuma-warning + .cta {
    --bg: var(--navy);
    background: var(--bg);
    color: white;
}

.cta .period {
    padding-block: var(--m);
    padding-inline: var(--m);
    border-radius: 6px;
    box-shadow: 0 0 0 3px var(--yellow), 0 0 0 6px var(--bg), 0 0 0 10px var(--yellow);
    background: var(--bg);
    gap: var(--m3);
}
.cta .period .block {
    gap: var(--m);
}
.cta .period .label {
    padding-block: 0.2lh;
    padding-inline: 0.5ic;
    font-weight: 500;
}
.cta .period .date {
    font-size: 54px;
    font-weight: 500;
    letter-spacing: 0;
}
.cta .period p {
    margin-top: 0 !important;
    font-size: 27px;
}

.cta .headline {
    margin-block: 2lh 0.5lh;
    text-align: center;
    font-size: 30px;
}
.cta .headline + p {
    text-align: center;
    letter-spacing: 0.1ic;
    margin-bottom: var(--m2);
}

.cta .call-numbers {
    gap: var(--m2);
}
.cta .call-numbers .block {
    flex: 1 1 auto;
    padding-block: var(--m2);
    padding-inline: var(--m2);
    border-radius: 6px;
    border: 3px solid var(--area);
    background: var(--bg);
    gap: var(--m);
}
.cta .call-numbers .heading {
    font-size: 18px;
}
.cta .call-numbers .label {
    display: inline-block;
    margin-inline: 0 0.5ic;
    padding-block: 0.1lh;
    padding-inline: 1ic;
    background: var(--area);
    border-radius: 3px;
    color: white;
    font-size: 21px;
}
.cta .call-numbers .nav-tel {
    font-size: 63px;
    letter-spacing: 0;
    color: var(--area);
}
#kuma-warning + .cta .call-numbers .nav-tel {
    color: white;
}
.cta .call-numbers .time {
    font-size: 18px;
	text-align: center;
}
.contractor {
    padding-inline: 0.5ic;
    border-radius: 3px;
    background: rgb( from var(--black) r g b / 0.1);
    font-size: 15px;
    letter-spacing: 0.1ic;
}

.cta .campaign {
    --button-bg: var(--light-yellow);
    --button-color: var(--green);
    margin-top: var(--m3);
    max-width: 800px;
    padding-block: var(--m2);
    padding-inline: var(--m4);
    border-radius: 6px;
    border: 3px solid var(--green);
    background: var(--green);
    color: white;
    flex-wrap: nowrap;
    gap: var(--m3);
}
#kuma-warning + .cta .campaign {
    --button-bg: var(--green);
    --button-color: white;
    background: var(--light-yellow);
    color: var(--black);
}
.cta .campaign .text {
    flex: 0 1 auto;
}
.cta .campaign .headline {
    margin-block: 0 0.5lh;
	width: max-content;
    text-align: left;
}
.cta .campaign .headline + p {
	text-align: left;
}
#kuma-warning + .cta .campaign .headline {
    color: var(--green);
}
.cta .campaign .image {
    flex: 0 1 auto;
    max-width: 234px; 
}
.cta .campaign .button {
    margin-top: var(--m2);
}


/** クマ注意喚起
-------------------------------------------------------------------- */
#kuma-warning {
    --ellipse-color: var(--light-yellow);
    padding-block: var(--m10) var(--m5);
}
#kuma-warning::after {
    top: 0;
}
#kuma-warning .wrap {
    max-width: 800px;
}
#kuma-warning .frame {
    --border: var(--gold);
    --bg: transparent;
    padding-block: var(--m4);
    padding-inline: var(--m4);
}
#kuma-warning li {
    padding-left: 1.25ic;
    letter-spacing: 0.1ic;
    position: relative;
}
#kuma-warning li::before {
    --size: 0.75ic;
    display: block;
    width: var(--size);
    height: var(--size);
    border-radius: 3px;
    background: currentColor;
    position: absolute;
    left: 0;
    top: calc((1lh - var(--size)) / 2);
}
#kuma-warning .container {
    margin-top: var(--m3);
    flex-wrap: nowrap;
    gap: var(--m2);
}
#kuma-warning .block {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 10px;
}
#kuma-warning .block::after {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 3px solid var(--navy);
    border-right: 3px solid var(--navy);
    rotate: 45deg;
    order: 2;
}
#kuma-warning .block h3 {
    order: 1;
}
#kuma-warning .block .nav-text {
    --button-bg: var(--green);
    --button-color: white;
    --icon-position: 1ic;
    margin-top: var(--m);
    font-size: 13px;
    letter-spacing: 0.1ic;
    padding-inline: 1.5ic 2.5ic;
}
#kuma-warning .block .nav-qr {
    order: 3;
    max-width: 120px;
    border: 3px solid white;
}
@media (any-hover: hover) {
    #kuma-warning .block .nav-qr {
        transition: var(--transition);
    }
    #kuma-warning .block .nav-qr:hover {
        border-color: var(--yellow);
    }
}


/** フッター
-------------------------------------------------------------------- */
.footer {
    background: var(--black);

    color: white;
}
.footer .wrap {
    padding-block: var(--m5);
}
.footer .logo img {
    width: calc(360 * var(--px));    
}
.footer .global-navigation {
    margin-top: var(--m2);
    border-top: 1px solid var(--gray);
    padding-top: var(--m2);
    max-width: 660px;
    flex: 1 0 auto;
    gap: var(--m) 2ic;
}
.footer .contact .title {
    margin-bottom: 0.5lh;
    font-size: 13px;
    color: var(--light);
    display: flex;
    align-items: center;
    gap: 0.5ic;
}
.footer .contact .title::after {
    display: block;
    flex: 1 0 auto;
    height: 1px;
    background: var(--gray);
}
.footer .contact p {
    font-size: 13px;
    font-weight: 500;
}
.footer .contact p + .title {
    margin-top: var(--m2);
}

.footer .copyright {
    padding-block: 1.5lh;
    background: white;
    font-size: calc(12 * var(--px));
    color: var(--black);
    text-align: center;
}

@media screen and (max-width: 767px) {
	.footer .global-navigation {
		justify-content: center;
	}
	.footer .contact {
		margin-top: var(--m3);
		width: 100%;
	}
	.footer .contact .title {
		justify-content: center;
	}
	.footer .contact .title::before {
		display: block;
		flex: 1 0 auto;
		height: 1px;
		background: var(--gray);
	}
	footer .contact .title + p {
		margin-top: var(--m);
		margin-inline: var(--m2);
	}
}


/** ヒーローエリア
-------------------------------------------------------------------- */
section.hero .wrap {
    width: 100%;
    height: 100%;
    padding-top: var(--m4);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0;

    color: white;
}
@media screen and (min-width: 1200px) {
    section.hero .wrap {
        width: var(--main-width);
    }
}
section.hero .category {
    width: fit-content;
    padding-block: 0.3lh;
    padding-inline: 1ic;
    border: 2px solid currentColor;
    margin-bottom: 0.75lh;

    font-size: 21px;
}
section.hero .tagline {
    font-size: 48px;
}
section.hero .person {
    pointer-events: none;
}
section.hero .billboard {
	min-height: 450px;
	object-fit: cover;
}





/** ホーム＞ヒーローエリア
-------------------------------------------------------------------- */
body#home section.hero {
    height: auto;
	max-height: 880px;
}
body#home section.hero :is(.wrap, .billboard) {
	height: 100%;
}
body#home section.hero .wrap {
	position: static;
	translate: 0;
	padding-block: var(--m10);
	flex-direction: column;
    justify-content: center;
}
body#home section.hero .wrap > *,
body#home section.hero .billboard {
    transition: 0.7s 0s ease;
}
body#home section.hero .tagline {
	width: 70%;
    margin-left: -5%;
}
body#home section.hero .tagline + p {
    font-size: calc(20 * var(--px));
    transform: skewX(-5deg);
    rotate: -5deg;
}
body#home section.hero .points {
    margin-top: var(--m3);
	width: 60%;
}

body#home section.hero :is(.taxi, .person) {
    position: absolute;
}
body#home section.hero .taxi {
	width: 29%;
    left: 72%;
    top: 30%;
}
body#home section.hero .person {
    width: 100%;
	max-width: 1600px;
    left: 50%;
    bottom: calc(-60 * var(--px));
	translate: -50% 0;
}
body#home section.hero .billboard {
    width: 100%;
    object-fit: cover;
    object-position: center bottom;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}


@media screen and (max-width: 1350px) {
    body#home section.hero .tagline {
        margin-left: 0;
    }
    body#home section.hero .tagline + p {
        margin-left: var(--wrap-padding-inline);
    }
    body#home section.hero .points {
        margin-left: var(--wrap-padding-inline);
    }
}




/** ホーム＞サービス概要
-------------------------------------------------------------------- */
section#service {
    --ellipse-color: var(--light-green);
    --ellipse-size: 150%;
    --ellipse-position: 50%;
}
section#service,
section#service .wrap {
    position: relative;
}
section#service .text {
    width: 50%;
    position: absolute;
    left: var(--wrap-padding-inline);
    top: 35%;
    z-index: 1;
    translate: 0 -50%;
}
section#service .headline {
    font-size: calc(33 * var(--px));
    margin-bottom: 0.5lh;
}
section#service .headline + p {
    letter-spacing: 0;
}
section#service .image {
    width: 75%;
    margin-left: auto;
}





/** ホーム＞メリット
-------------------------------------------------------------------- */
section#merit {
    margin-top: var(--m6);
}
section#merit .label {
    font-size: 27px;
}
section#merit .container {
    container-type: inline-size;
    margin-top: var(--m3);
    flex-wrap: nowrap;
    gap: 1cqw;
}
section#merit .block {
    --size: 33cqw;
    flex: 0 0 auto;
    width: var(--size);
    height: var(--size);
    padding-bottom: var(--m);
    
    color: white;
    text-align: center;

	display: flex;
	flex-direction: column;
	justify-content: center;

    position: relative;
}
section#merit .block::after {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--size);
    background: var(--bg, black);

    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    translate: -50% -50%;
}
section#merit .block:nth-child(1) {
    --bg: var(--red);
}
section#merit .block:nth-child(2) {
    --bg: var(--green);
    margin-top: var(--m6);
}
section#merit .block:nth-child(3) {
    --bg: var(--blue);
}
section#merit .block .icon {
    width: calc(45 * var(--px));
    margin-inline: auto;
    margin-bottom: 0.5lh;
}
section#merit .block .label {
    padding-block: 0.1lh;
    padding-inline: 0.5ic;
    background: white;
    color: var(--bg);
    font-size: calc(24 * var(--px));
}
section#merit .block .headline {
    padding-block: 0.3lh;
    font-size: calc(18 * var(--px));
}
section#merit .block .headline::after {
    display: block;
    width: 1.5ic;
    height: 3px;
    background: currentColor;
    margin-inline: auto;
    margin-top: 0.3lh;
}
section#merit .block .headline + p {
    margin-inline: var(--m3);
    font-size: calc(15 * var(--px));
	letter-spacing: 0.05ic;
}
section#merit .block .image {
    pointer-events: none;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
section#merit .block:nth-child(2) .image {
    top: calc(-89 * var(--px));
}




/** ホーム＞活用例
-------------------------------------------------------------------- */
section#case {
    margin-top: var(--m6);
}
section#case #plan01 {
    --color: var(--red);
}
section#case #plan02 {
    --color: var(--green);
}
section#case .block {
    margin-top: var(--m5);
    height: calc(540 * var(--px));
    position: relative;
}
section#case .block .image {
    width: 32vw;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
}
section#case #plan01 .image {
    left: 0;
    object-position: center right;
}
section#case #plan02 .image {
    right: 0;
    object-position: center left;
}
section#case #plan01 .text {
    padding-left: calc(440 * var(--px));
}
section#case #plan02 .text {
    padding-right: calc(440 * var(--px));
}
section#case .block .numbering {
    width: fit-content;
    padding-block: 0.2lh;
    padding-inline: 2.5ic;
    background: var(--color);
    margin-bottom: var(--m);
    color: white;
}
section#case .block .headline {
    font-size: 39px;
    margin-bottom: 0.3lh;
}
section#case .block .headline + p {
    font-size: 18px;
}
section#case .block ol {
    list-style: none;
    counter-reset: number 0;
    padding-left: 0;
}
section#case .block li {
    counter-increment: number;
    padding-left: 2ic;
    position: relative;
}
section#case .block li::before {
    --size: 1.5ic;
    content: counter(number);
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--size);
    height: var(--size);
    background: var(--color);
    border-radius: var(--size);
    color: white;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0;
    position: absolute;
    left: 0;
    top: calc((1lh - var(--size)) / 2);
}







/** ホーム＞サービス展開エリア
-------------------------------------------------------------------- */
section#area {
    margin-top: var(--m6);
}
section#area .heading {
    margin-bottom: var(--m4);
}
section#area .area-map {
    position: relative;
}
section#area .area-map .block {
    width: calc(210 * var(--px));
    position: absolute;
}
section#area #route-tsudurato {
    left: 7%;
    top: 0.6%;
}
section#area #route-nisaka {
    left: 68.91%;
    top: 32.8%;
}
section#area #route-magose {
    left: 73.83%;
    top: 73.2%;
}
section#area #route-matsumoto {
    left: 6.66%;
    top: 57.8%;
}
section#area #extra-matsumoto {
    left: 6.66%;
    bottom: 0;
}
section#area .area-map .label {
    width: 100%;
    padding-inline: 1ic;
    background: var(--area);
    color: white;
    font-size: calc(24 * var(--px));
} 
section#area .area-map :is(dl, p) {
    margin-block: var(--m);
}
section#area .area-map dl {
    text-align: center;
}
section#area .area-map dt {
    width: fit-content;
    padding-inline: 0.5ic;
    background: #e8e8e8;
    margin-inline: auto;
    margin-bottom: var(--m);
    
}
section#area .area-map :is(dd, p) {
    font-size: 13px;
}
section#area .area-map p {
    text-align: left;
}
section#area .area-map .button {
    --button-bg: var(--area);
    --button-color: white;
    width: 100%;
    padding-inline: 1ic;
    letter-spacing: 0.1ic;
}
section#area .area-map .button + .button {
    margin-top: var(--m);
}
section#area .area-map .frame {
    --border: var(--area);
    --bg: white;
    width: max-content;
}
section#area .area-map .frame .headline {
    color: var(--area);
    font-size: 21px;
    margin-bottom: 0.5lh;
}
section#area .area-map .frame .button {
    width: fit-content;
    padding-inline: 1.5ic 2.5ic;
}








/** ホーム＞利用の流れ
-------------------------------------------------------------------- */
section#step {
    margin-top: var(--m6);
}
section#step .block {
    margin-top: var(--m10);
    min-height: calc(640 * var(--px));
    padding-block: var(--m2) var(--m8);
    position: relative;
    overflow: clip;
}
section#step .numbering {
    padding-inline: 1.5ic;
}
section#step .headline {
    font-size: 39px;
    letter-spacing: 0.1ic;
    text-align: center;
}
section#step .headline::after {
    margin-block: 0.5lh;
    display: block;
    width: 2ic;
    height: 3px;
    background: currentColor;
    margin-inline: auto;
}
section#step .headline + p {
    text-align: center;
}
section#step .headline + p span {
    padding-inline: 0.5ic;
    background: rgb( from white r g b / 0.5);
}
section#step :is(.person, .image) {
    width: 100%;
    position: absolute;
    left: 0;
}
section#step .person {
    bottom: var(--m2);;
    z-index: -1;
}
section#step .image {
    bottom: var(--m6);
    z-index: -2;
}
section#step .notice {
    margin-top: var(--m5);
    width: calc(720 * var(--px));
    padding-block: var(--m2);
    padding-inline: var(--m4);
    border-radius: 30px;
    background: rgb( from white r g b / 0.9 );
    margin-inline: auto;
    position: relative;
}
section#step .notice > .label {
    font-size: 15px;
    position: absolute;
    left: 50%;
    bottom: 100%;
    translate: -50% 0;
}
section#step .notice p {
    font-size: 16px;
    text-align: center;
}
section#step .notice p.note {
    font-size: 13px;
}
section#step .notice .frame {
    --border: var(--area);
    margin-top: var(--m2);
    gap: 0.5lh 2ic;
}
section#step .notice .frame .label {
    font-size: 13px;
    background: var(--area);
    color: white;
}
section#step .notice .nav-map {
    border-bottom: 2px solid currentColor;
}
section#step .notice .nav-map::after {
    display: inline-block;
    height: 1ic;
    aspect-ratio: 40 / 16;
    background-image: url('../imgs/common/icon-map.webp');
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 0.2ic;
}
section#step .notice .nav-map::before {
    content: "・";
    display: inline;
}
section#step .notice .nav-tel {
    font-size: 45px;
    letter-spacing: 0;
    color: var(--area);
}
section#step .notice .contractor {
    flex: 0 0 100%;
    font-size: 13px;
}
section#step #step04 .note {
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
}

@media (any-hover: hover) {
    section#step .notice .nav-map::after {
        opacity: 0.5;
        transition: var(--transition);
    }
    section#step .notice .nav-map:hover {
        border-bottom: 2px solid rgb( from currentColor r g b / 0.2);
    }
    section#step .notice .nav-map:hover::after {
        opacity: 1;
    }
}









/** 峠の紹介・峠の周辺情報＞ヒーローエリア
-------------------------------------------------------------------- */
body:is(.pass, .around) section.hero {
    z-index: 1;
}
body:is(.pass, .around) .person,
body:is(.pass, .around) section.hero .location {
    position: absolute;
}
body:is(.pass, .around) section.hero .location {
    width: calc(310 * var(--px));
    left: calc(670 * var(--px));
    bottom: calc(-100 * var(--px));
}
body:is(.pass, .around) section.hero .person {
    width: calc(165 * var(--px));
    right: 0;
    bottom: calc(-60 * var(--px));
}




/** 峠の紹介＞紹介
-------------------------------------------------------------------- */
section#highlights {
    z-index: 0;
}
section#highlights .person[src*="person02"] {
    width: calc(59 * var(--px));
    left: 100%;
    top: calc(-70 * var(--px));
}
section#highlights .person[src*="person03"] {
    width: calc(71 * var(--px));
    right: 100%;
    top: calc(-50 * var(--px));
}




/** 峠の紹介＞コースデータ・峠の周辺情報＞周辺農法リンク
-------------------------------------------------------------------- */
section:is(#data, #index) {
    --border: var(--light);
    --bg: var(--light-yellow);
    margin-top: var(--m10);
    max-width: 900px;
    padding-top: var(--m3);
}
section#data ul {
    gap: 2ic;
}
section#index nav {
    gap: 4ic;
}
section#data li,
section#index a {
    font-size: 18px;
}
section#data img[src*="icon"],
section#index img[src*="icon"] {
    width: calc(30 * var(--px));
    margin-right: 0.5ic;
}
@media (any-hover: hover) {
    section#index a,
    section#index a::after {
        transition: var(--transition);
    }
    section#index a {
        position: relative;
        z-index: 0;
    }
    section#index a::after {
        display: block;
        width: calc(100% + var(--m));
        height: calc(100% + var(--m));
        border-radius: var(--m);
        background: rgb( from var(--yellow) r g b / 0.3 );
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        z-index: -1;
        opacity: 0;
    }
    section#index a:hover {
        opacity: 0.8;
    }
    section#index a:hover::after {
        opacity: 1;
    }
}




/** 峠の紹介＞関連情報リンク
-------------------------------------------------------------------- */
section#related {
    --ellipse-color: var(--light-sky);
    --ellipse-size: calc(100% + var(--main-padding-bottom) * 2 + var(--m4));
    --ellipse-position: calc(-1 * var(--m4));
    margin-top: var(--m10);
}
section#related .person[src*="person04"] {
    width: calc(186 * var(--px));
    right: calc(200 * var(--px));
    top: calc(-80 * var(--px));
}

section#related nav {
    margin-top: var(--m6);
    gap: var(--m2) var(--m3);
}
section#related .button {
    --button-color: white;
    width: calc(390 * var(--px));
    padding-block: 0.75lh;
    border-radius: 2lh;
}
section#related .nav-food {
    --button-bg: var(--marine);
}
section#related .nav-access {
    --button-bg: var(--green);
}
section#related .nav-lodging {
    --button-bg: var(--brown);
}
section#related .nav-parking {
    --button-bg: var(--red);
}
section#related .other-pass {
    --bg: var(--light-yellow);
    margin-top: var(--m10);
    padding-block: var(--m3);
    padding-inline: var(--m3);
}
section#related .other-pass .label {
    font-size: 18px;
}
section#related .other-pass nav {
    margin-top: 0;
}
section#related .other-pass a {
    flex: 0 0 30%;
    flex-wrap: nowrap;
    gap: var(--m);
}
section#related .other-pass .arrow::after {
    --weight: 3px;
}
section#related .other-pass img {
    width: calc(100 * var(--px));
}
section#related .other-pass h3 {
    padding-bottom: 0.3lh;
    border-bottom: 1px solid var(--black);
    margin-bottom: 0.3lh;
    color: var(--area);
    font-size: 21px;
}
section#related .other-pass p {
    letter-spacing: 0;
}
@media (any-hover: hover) {
    section#related .other-pass a,
    section#related .other-pass a::before {
        transition: var(--transition);
    }
    section#related .other-pass a {
        position: relative;
        z-index: 0;
    }
    section#related .other-pass a::before {
        display: block;
        width: calc(100% + var(--m));
        height: calc(100% + var(--m));
        border-radius: var(--m);
        background: rgb( from var(--yellow) r g b / 0.3 );
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        z-index: -1;
        opacity: 0;
    }
    section#related .other-pass a:hover::before {
        opacity: 1;
    }
}







/** 峠の周辺情報
-------------------------------------------------------------------- */
section:is(#food, #lodging, #parking, #access) {
    --ellipse-size: 70%;
    --ellipse-position: 30%;
    margin-top: var(--m6);
}
section:is(#food, #lodging, #parking, #access) .label img[src*="icon"] {
    height: 36px;
}
section#food {
    --ellipse-color: var(--light-sky);
}
section#lodging {
    --ellipse-color: var(--light-yellow);
}
section#parking {
    --ellipse-color: var(--light-red);
}
body.around section.hero .map {
    margin-block: var(--m4);
    border-radius: 30px;
}
body.around section.hero .person {
	width: calc(200 * var(--px));
	right: 5%;
}
.cards {
	margin-top: var(--m2);
    width: auto;
    max-width: 1200px;
    padding-inline: var(--m4);
    margin-inline: auto;
    margin-bottom: var(--m3);

    flex-wrap: nowrap;

    position: relative;
}
.cards :is(.swiper-button-next, .swiper-button-prev) {
    position: absolute;
    top: 50%;
}
.cards > .swiper-wrapper {
    align-items: center;
}
.cards > .swiper-wrapper > .swiper-slide {
    --swiper-navigation-color: var(--navy);
    display: flex;
    flex-wrap: nowrap;
    gap: var(--m2);
    padding-block: var(--m4);
    padding-inline: var(--m4);
    background: white;
    border-radius: 30px;
}
.cards .text {
    flex: 1 1 auto;
}
.cards .headline {
    font-size: 21px;
}

.cards dl {
    display: flex;
    padding-block: var(--m);
}
.cards dl + dl {
    border-top: 1px solid currentColor;
}
.cards dt {
    flex: 0 0 var(--m7);
}
.cards dt span {
    display: inline-block;
    padding-inline: 0.5ic;
    background: var(--black);
    border-radius: 3px;
    font-size: 13px;
    color: white;
}

.cards .gallery {
     --swiper-pagination-bullet-size: var(--m);
    --swiper-pagination-bullet-horizontal-gap: var(--m);
    --swiper-pagination-color: var(--yellow);
    --swiper-pagination-bullet-inactive-color: var(--gray);
    flex: 0 0 auto;
    width: calc(540 * var(--px));
    padding-bottom: var(--m3);
}
.cards .gallery img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 6 / 4;
    border-radius: 10px;
}
.cards .swiper-button-next {
    right: 0;
}
.cards .swiper-button-prev {
    left: 0;
}
.thumbnails {
    padding-bottom: var(--m6);
}
.thumbnails .swiper-slide {
    padding-block: var(--m2);
    padding-inline: var(--m2);
    border-radius: 30px;
    background: white;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--m);
}
.thumbnails .swiper-slide-thumb-active {
    box-shadow: inset 0 0 0 6px var(--yellow);
}
.thumbnails img {
    width: 120px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}
.thumbnails .text {
    letter-spacing: 0;
}
.thumbnails .name {
    font-size: 21px;
    padding-bottom: 0.3lh;
    border-bottom: 1px solid currentColor;
    margin-bottom: 0.3lh;
}
.thumbnails .address {
    font-size: 15px;
}

@media (any-hover: hover) {
    .cards :is(.swiper-button-next, .swiper-button-prev) {
        transition: var(--transition);
    }
    .cards :is(.swiper-button-next, .swiper-button-prev):hover {
        --swiper-navigation-color: var(--sky);
    }
}




/** 峠の周辺情報＞駐車場
-------------------------------------------------------------------- */
section#parking .list {
    padding-block: var(--m4);
    padding-inline: var(--m4);
    background: white;
    border-radius: 30px;
    margin-bottom: var(--m8);
}
.list table {
    width: 100%;
}
.list tr + tr {
    border-top: 1px solid currentColor;
}
.list :is(th, td) {
    padding-inline: var(--m);
}
.list th {
    padding-block: 0.3lh;
}
.list td {
    padding-block: 1lh;
}
.list th span {
    display: inline-block;
    padding-inline: 0.5ic;
    background: var(--black);
    border-radius: 3px;
    font-size: 13px;
    color: white;
}
.list td:first-child {
    font-weight: 800;
}




/** 峠の周辺情報＞アクセス
-------------------------------------------------------------------- */
section#access {}
section#access .block {
    margin-top: var(--m8);
}
section#access .chart + .chart {
    margin-top: var(--m6);
}
section#access .chart .heading span {
    display: block;
    width: fit-content;
    padding-block: 0.2lh;
    padding-inline: 1ic;
    background: var(--black);
    color: white;
    font-size: 18px;
}
section#access .chart .heading::before,
section#access .chart .heading::after {
    display: block;
    flex: 1 1 auto;
    height: 1px;
    background: var(--black);
}
section#access .chart .container {
    width: fit-content;
    padding-block: var(--m6) var(--m4);
    align-items: stretch;
    gap: var(--m7) var(--m);
}
section#access .chart :is(.point, .way, .entrance) {
    min-width: 120px;
    padding-block: 0.3lh;
    padding-inline: 1.5ic;
    position: relative;
}
section#access .chart .point {
    border-radius: 3px;
    background: var(--area-base,  var(--slate));
    font-size: 18px;
    color: white;
}
section#access .chart .way {
    background: linear-gradient(to top, var(--area-base, var(--slate)), var(--area-base,  var(--slate)) 4px, transparent 4px, transparent);
    font-size: 15px;
}
section#access .chart .entrance {
    width: max-content;
    border-radius: 3px;
    background: var(--area,  var(--slate));
    color: white;
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--m));
    translate: -50% 0;
}
section#access .chart .entrance::after {
    display: block;
    width: 15px;
    height: 8px;
    background: var(--area);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    left: 50%;
    top: 100%;
    translate: -50% -1px;
}

section#access .chart :is(.northern, .central, .southern) {
    color: var(--black);
    font-weight: 800;
}
section#access .chart .northern {
    --area-base: var(--slate-purple);
    --area: var(--purple);
}
section#access .chart .central {
    --area-base: var(--slate-pink);
    --area: var(--pink);
}
section#access .chart .southern {
    --area-base: var(--slate-sky);
    --area: var(--sky);
}










/** 峠MAP
-------------------------------------------------------------------- */
body#kumanokodo-iseji section.hero .wrap {
    padding-top: var(--m4);
    align-items: center;
    text-align: center;
}
body#kumanokodo-iseji .tagline {
    margin-bottom: 0.5lh;
}


section#pass-map {
    margin-top: var(--m6);
}
section#pass-map .map {
    margin-block: var(--m4);
}
section#pass-map .container {
    gap: 40px 20px;
}
section#pass-map .block {
    flex: 1 0 20%;
    padding-block: var(--m);
    padding-inline: var(--m);
    border-radius: var(--m);
    box-shadow: inset 0 0 0 1px var(--slate);
    background: white;
    position: relative;
}
section#pass-map .block:nth-child(even) {
    --sub: rgb( from var(--area) r g b / 0.04);
    background: white linear-gradient(var(--sub), var(--sub));
}
section#pass-map .northern {
    --area: var(--dark-purple);
}
section#pass-map .northern.featured {
    --area: var(--purple);
}
section#pass-map .central {
    --area: var(--dark-pink);
}
section#pass-map .central.featured {
    --area: var(--pink);
}
section#pass-map .southern {
    --area: var(--dark-sky);
}
section#pass-map .southern.featured {
    --area: var(--sky);
}

section#pass-map .featured .label {
    width: max-content;
    padding-inline: 1ic;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% -50%;
}
section#pass-map .title {
    font-size: 18px;
    color: var(--area);
    text-align: center;
}
section#pass-map .numbering {
    display: inline-block;
    width: 1lh;
    height: 1lh;
    border-radius: 1lh;
    background: var(--area);
    margin-right: 0.5ic;
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: white;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0;
}
section#pass-map .image {
    margin-block: var(--m);
    width: 100%;
    border-radius: 10px;
}
section#pass-map .level {
    margin-block: calc(-1 * var(--m4)) var(--m);
    width: fit-content;
    padding-block: 0.2lh;
    padding-inline: 1ic;
    border-radius: 10px;
    background: white;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}
section#pass-map .data {
    font-size: 15px;
    letter-spacing: 0;
    gap: 0.5ic;
}
section#pass-map .data img[src*="icon"] {
    width: 18px;
    margin-right: 0.2ic;
}
section#pass-map .button {
    --button-bg: var(--area);
    --button-color: white;
    --icon-position: 0.5lh;
    flex: 0 0 45%;
    padding-inline: 1ic;
    text-align: left;
    letter-spacing: 0.05ic;
}









/** SNSキャンペーン
-------------------------------------------------------------------- */
body#campaign section.hero .tagline {
    width: calc(570 * var(--px));
}
body#campaign section.hero .person {
    width: calc(495 * var(--px));
    position: absolute;
    left: calc(654 * var(--px));
    bottom: calc(-30 * var(--px));
}
body#campaign p > strong {
    color: var(--green);
    font-weight: 800;
}
body#campaign .note {
    font-size: 15px;
}

section#overview .note {
    margin-block: 2lh;
}
section#overview .frame {
    --border: var(--slate);
    --bg: var(--light-yellow);
    max-width: 720px;
}
section#overview .frame .headline {
    font-size: 21px;
    margin-bottom: 0.5lh;
}
section#overview .frame .headline::after {
    display: none;
}
section#overview .frame .headline img[src*="icon"] {
    display: inline-block;
    height: 1lh;
    aspect-ratio: 1 / 1;
    margin-right: 0.5ic;
}


section#period {
    --bg: white;
    margin-top: var(--m6);
    position: relative;
    z-index: 1;
}
section#period .label {
    padding-inline: 1.5ic;
    background: var(--green);
    margin-bottom: var(--m2);
    color: white;
}
section#period .period {
    width: fit-content;
    padding-block: var(--m);
    padding-inline: var(--m3);
    border-radius: 6px;
    box-shadow: 0 0 0 3px var(--green), 0 0 0 6px var(--bg), 0 0 0 10px var(--green);
    background: var(--bg);
    gap: var(--m3);
}
section#period .date {
    color: var(--green);
    font-size: 50px;
    letter-spacing: 0ic;
}
section#period .date span {
    font-size: 21px;
}
section#period .person {
    width: calc(46 * var(--px));
    position: absolute;
    left: calc(50% + 450px);
    bottom: calc(-1 * var(--m3));
}



section#prize {
    --ellipse-color: var(--light-sky);
    --ellipse-size: 185%;
    --ellipse-position: -25%;
    margin-top: var(--m10);
}
section#prize .heading {
    width: fit-content;
    margin-inline: auto;
    margin-bottom: var(--m4);
    position: relative;
}
section#prize .heading::before,
section#prize .heading::after {
    display: block;
    width: 2px;
    height: 100%;
    background: currentColor;
    position: absolute;
    top: 0;
}
section#prize .heading::before {
    left: -1.5ic;
    rotate: -10deg;
}
section#prize .heading::after {
    right: -1.5ic;
    rotate: 10deg;
}
section#prize .headline {
    width: fit-content;
}
section#prize .headline span {
    display: block;
    font-size: 18px;
}


section#entry {
    margin-top: var(--m6);
}
section#entry .container {
    align-items: stretch;
}
section#entry .block {
    --border: var(--green);
    --bg: var(--light-yellow);
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    border-radius: var(--m);
}
section#entry .name {
    letter-spacing: 0.1ic;
    gap: var(--m);
    padding-bottom: var(--m2);
    border-bottom: 1px solid var(--green);
    margin-bottom: var(--m2);
}
section#entry .name img[src*="icon"] {
    width: 90px;
}
section#entry .block ol {
    list-style: none;
    padding-left: 0;
    counter-reset: number;
    margin-bottom: var(--m2);
}
section#entry .block li {
    counter-increment: number;
    padding-left: 2ic;
    position: relative;
}
section#entry .block li::before {
    content: counter(number);
    display: block;
    width: 1.5ic;
    height: 1.5ic;
    border-radius: 3px;
    background: var(--green);
    color: white;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0;
    position: absolute;
    left: 0;
    top: 0;
}
section#entry .nav-follow {
    --button-bg: var(--yellow);
    --button-color: var(--black);
    margin-top: auto;
    width: 100%;
    padding-inline: 1.5ic 3.5ic;
    margin-inline: auto;
    letter-spacing: 0;
}

section#entry .notes {
    margin-block: var(--m4);
}
section#entry #application {
    --border: var(--green);
    --bg: white;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
}
section#entry #application .headline {
    font-size: 21px;
}
section#entry #application .headline + p {
    margin-bottom: 1lh;
}



section#winner {
    margin-top: var(--m6);
}
section#winner .label {
    background: var(--green);
    color: white;
    margin-bottom: 0.5lh;
}
section#winner .label + p {
    padding-inline: 5ic;
    margin-bottom: 1lh;
}
section#winner > .note {
    text-align: center;
}
section#winner .notes {
    margin-top: var(--m4);
}
section#winner .notes .headline {
    font-size: 21px;
    color: var(--green);
    margin-bottom: 0.5lh;
}
section#winner .notes .headline::after {
    display: none;
}


section:is(#privacy-policy, #disclaimer) {
    --border: var(--slate-green);
    --bg: white;
    margin-top: var(--m10);
    max-width: 800px;
}
section:is(#privacy-policy, #disclaimer) .label {
    background: var(--slate-green);
    color: var(--black);
    font-size: 21px;
}
section:is(#privacy-policy, #disclaimer) ul {
    list-style: disc;
    padding-left: 1.5ic;
}











/** 体験＆スポット
-------------------------------------------------------------------- */
body.style section.hero .person {
    position: absolute;
    left: calc(800 * var(--px));
    bottom: calc(-30 * var(--px));
}
body#style-history section.hero .person {
    width: calc(260 * var(--px));
    position: absolute;
}
body#style-culture section.hero .person {
    width: calc(182 * var(--px));
}
body#style-healing section.hero .person {
    width: calc(155 * var(--px));
}
body#style-time section.hero .person {
    width: calc(118 * var(--px));
}
body.style section.hero .numbering {
    padding-inline: 0.5ic;
    background: white;
    border-radius: 3px;
    margin-bottom: 0.3lh;
    font-size: 21px;
    color: var(--black);
}
body.style section.hero .tagline strong {
    margin-left: 0.2ic;
    padding-inline: 0.45ic 0.3ic;
    background: var(--yellow);
    border-radius: 10px;
    color: var(--black);
}
body.style section.hero .tags {
    gap: 1ic;
}

section#navigator {
    margin-top: var(--m6);
}
section#navigator .wrap {
    flex-wrap: nowrap;
    gap: var(--m6);
}
section#navigator .image {
    flex: 0 0 auto;
    width: 21%;
}
section#navigator .text {
    flex: 0 0 65%;
    padding-block: var(--m3);
    padding-inline: var(--m4);
    background: var(--light-green);
    border-radius: 30px;
    position: relative;
}
section#navigator .text::after {
    display: block;
    width: 40px;
    height: 40px;
    background: var(--light-green);
    clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 35%);
    position: absolute;
    right: calc(100% - 1px);
    bottom: var(--m3);
}
section#navigator .headline {
    font-size: 30px;
}
section#navigator .headline::after {
    margin-block: 0.5lh;
    display: block;
    width: 2ic;
    height: 6px;
    border-radius: 3px;
    background: var(--yellow);
}
section#navigator .text p {
    font-size: 18px;
}

section#styles {
    margin-top: var(--m6);
}
section#styles .container {
    max-width: 1040px;
}
section#styles .block {
    margin-top: var(--m6);
    flex-wrap: nowrap;
    gap: var(--m4);
}
section#styles .tags {
    gap: 1ic;
}
section#styles .tags li {
    width: fit-content;
    padding-block: 0.1lh;
    padding-inline: 0.5ic;
    border-radius: 3px;
    background: var(--area, var(--yellow));

    font-size: 15px;
    letter-spacing: 0.1ic;
}
section#styles .tags li:is(.northern, .central, .southern) {
    color: white;
}
section#styles .headline {
    margin-bottom: 0.5lh;
    font-size: 40px;
}
section#styles .headline span {
	font-size: 13px;
	vertical-align: top;
}

section#styles .text p {
    font-size: 18px;
}
section#styles nav {
    margin-top: var(--m2);
}
section#styles nav .title {
    padding-bottom: 0.5lh;
    border-bottom: 1px solid currentColor;
    margin-bottom: 0.75lh;
    font-size: 18px;
}
section#styles nav .title img[src*="icon"] {
    display: inline-block;
    height: 1lh;
    margin-right: 0.5ic;
}
section#styles .button {
    --button-bg: var(--green);
    --button-color: white;
    --icon-position: 1ic;
    padding-block: 0.5lh;
    padding-inline: 1.5ic 3.5ic;
}
section#styles .button + .button {
    margin-top: var(--m);
}

section#styles .block .image {
    width: calc(500 * var(--px));
}