@charset "utf-8";
/* CSS Document */



/* ========================================

mousecursor

======================================== */
.cursor_01{
	/* position */
    position: fixed;
    top: 0;
    left: 0;
	/* display */
    opacity: 0;
    z-index: 400;
	/* box */
    width: 100px;
    height: 100px;
	/* font */
    color: #fff;
	/* border */
    border-radius: 50%;
	/* background */
    background-color: rgba( 76, 145, 199, 0.5 );
	/* animation */
    transition: .1s;
	/* etc */
    pointer-events: none;
}
.cursor_02{
	/* position */
    position: fixed;
    top: 0;
    left: 0;
	/* display */
    opacity: 0;
    z-index: 400;
	/* box */
    width: 140px;
    height: 140px;
	/* font */
    color: #000;
	/* border */
    border-radius: 50%;
    border: solid 1px #fff;
	/* background */
    background-color: rgba( 255, 255, 255, 0.5);
	/* animation */
    transition: .1s;
	/* etc */
    pointer-events: none;
    mix-blend-mode: screen;
}
.mouse__txt{
	/* position */
    position: absolute;
    top: 50%;
    left: 50%;
	/* display */
    transform: translate(-50%, -50%);
	/* box */
    width: 100%;
	/* font */
    font-family: "Murecho", sans-serif;
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
	/* border */
	/* background */
	/* animation */
	/* etc */
}
.cursor_01.show {
    opacity: 1;
}
.cursor_02.show {
    opacity: 1;
}





/* ========================================

sticky_container

======================================== */
.sticky_container {
	/* position */
    position: relative;
	/* display */
    z-index: 100;
	/* box */
    width: 100%;
    margin: 0 0 40px 0;
    padding: 0;
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .sticky_container {
    }
}





/* ========================================

main_visual

======================================== */
.main_visual {
	/* position */
    position: sticky;
    top: 0;
	/* display */
    z-index: 100;
	/* box */
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
	/* font */
	/* border */
	/* background */
    background-image: url( '../img/index/bg__main_visual-pc.webp' );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_visual {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        background-image: url( '../img/index/bg__main_visual-sp.webp' );
        /* animation */
        /* etc */
    }
}



.main_visual .content {
	/* position */
    position: relative;
	/* display */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
	/* box */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_visual .content {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}



.main_visual .content p {
	/* position */
    position: relative;
	/* display */
	/* box */
    margin: 0;
    padding: 0;
	/* font */
    font-family: "Murecho", sans-serif;
    font-size: 2.8rem;
    line-height: 2.35;
    letter-spacing: 0.1em;
    color: #fff;
    text-align: center;
	/* border */
	/* background */
	/* animation */
    transition: all 1s;
	/* etc */
    opacity: 0;
}
.main_visual .content p.active {
	/* position */
	/* display */
	/* box */
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
    opacity: 1;
}
@media screen and ( max-width: 768px ){
    .main_visual .content p {
        /* position */
        /* display */
        /* box */
        /* font */
        font-family: "Murecho", sans-serif;
        font-size: 1.8rem;
        line-height: 2;
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}



.main_visual .annotation {
	/* position */
    position: absolute;
    bottom: 10px;
    right: 10px;
	/* display */
	/* box */
    margin: 0;
    padding: 0;
	/* font */
    font-family: "Murecho", sans-serif;
    font-size: 1.2rem;
    line-height: 1.16;
    letter-spacing: 0.04em;
    color: #fff;
    text-align: right;
	/* border */
	/* background */
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_visual .annotation {
    }
}





/* ========================================

main_content

======================================== */
.main_content {
	/* position */
    position: sticky;
    top: 0;
	/* display */
    z-index: 100;
	/* box */
    width: 100%;
    aspect-ratio: 1 / 1.5706;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
	/* font */
	/* border */
	/* background */
    background-image: url( '../img/index/bg__main_content-pc.webp' );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: none;
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_content {
        /* position */
        /* display */
        /* box */
        aspect-ratio: auto;
        /* font */
        /* border */
        /* background */
        background-image: none;
        /* animation */
        /* etc */
    }
}













.main_content .annotation {
	/* position */
    position: absolute;
    bottom: 10px;
    right: 10px;
	/* display */
	/* box */
    margin: 0;
    padding: 0;
	/* font */
    font-family: "Murecho", sans-serif;
    font-size: 1.2rem;
    line-height: 1.16;
    letter-spacing: 0.04em;
    color: #fff;
    text-align: right;
	/* border */
	/* background */
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_content .annotation {
        /* position */
        /* display */
        /* box */
        /* font */
        font-size: 1.0rem;
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}



.main_content .content {
	/* position */
    position: relative;
	/* display */
    z-index: 100;
	/* box */
    width: 50%;
    margin: 0 0 0 50%;
    padding: 260px 0 0 0;
/*
    width: 100%;
    margin: 0;
    padding: 260px 0 0 50%;
    aspect-ratio: 1 / 1.5706;
*/
    width: 100%;
    margin: 0;
    padding: 260px 0 0 50%;
    aspect-ratio: 1 / 1.5706;
	/* font */
	/* border */
	/* background */
        background-image: url( '../img/index/bg__main_content-pc.webp' );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_content .content {
        /* position */
        /* display */
        /* box */
        width: 100%;
        aspect-ratio: 1 / 3.022;
        aspect-ratio: 1 / 3.732;
        margin: 0;
        padding: 60px 0 0 0;
        /* font */
        /* border */
        /* background */
        background-image: url( '../img/index/bg__main_content-sp.webp' );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        /* animation */
        /* etc */
    }
}



.main_content .content .title {
	/* position */
    position: relative;
	/* display */
    z-index: 100;
	/* box */
    margin: 0 0 60px 0;
    padding: 0;
	/* font */
    font-family: "Murecho", sans-serif;
    font-size: 3.2rem;
    line-height: 2;
    letter-spacing: 0.06em;
    color: #fff;
	/* border */
	/* background */
	/* animation */
    transition: all 0.5s;
	/* etc */
    opacity: 0;
    transform: translateY( 100px );
}
.main_content .content .title.active {
	/* position */
	/* display */
	/* box */
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
    opacity: 1;
    transform: translateY( 0 );
}
@media screen and ( max-width: 768px ){
    .main_content .content .title {
        /* position */
        /* display */
        /* box */
        margin: 0 0 30px 0;
        /* font */
        font-size: 2.0rem;
        line-height: 2;
        letter-spacing: 0.075em;
        text-align: center;
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
    .main_content .content .title.active {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}



.main_content .content .lead {
	/* position */
    position: relative;
	/* display */
    z-index: 100;
	/* box */
    width: 100%;
    margin: 0 0 50px 0;
    padding: 0 150px 0 0;
	/* font */
    font-family: "Murecho", sans-serif;
    font-size: 1.6rem;
    line-height: 2.25;
    letter-spacing: 0.075em;
    color: #fff;
	/* border */
	/* background */
	/* animation */
    transition: all 0.5s;
	/* etc */
    opacity: 0;
    transform: translateY( 100px );
}
.main_content .content .lead.active {
	/* position */
	/* display */
	/* box */
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
    opacity: 1;
    transform: translateY( 0 );
}
@media screen and ( max-width: 768px ){
    .main_content .content .lead {
        /* position */
        /* display */
        /* box */
        margin: 0 0 25px 0;
        padding: 0 25px;
        /* font */
        line-height: 1.5;
        letter-spacing: 0.03em;
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
    .main_content .content .lead.active {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}



.main_content .content .conceptual_diagram {
	/* position */
    position: relative;
	/* display */
    z-index: 100;
	/* box */
    width: 100%;
    margin: 0;
    padding: 0 150px 0 0;
	/* font */
	/* border */
	/* background */
	/* animation */
    transition: all 0.5s;
	/* etc */
    opacity: 0;
    transform: translateY( 100px );
}
.main_content .content .conceptual_diagram.active {
	/* position */
	/* display */
	/* box */
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
    opacity: 1;
    transform: translateY( 0 );
}
@media screen and ( max-width: 768px ){
    .main_content .content .conceptual_diagram {
        /* position */
        /* display */
        /* box */
        padding: 0 25px;
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
    .main_content .content .conceptual_diagram.active {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}



.main_content .content .conceptual_diagram .image {
	/* position */
    position: relative;
	/* display */
    z-index: 100;
	/* box */
    width: 100%;
    margin: 0;
    padding: 0;
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
}
.main_content .content .conceptual_diagram .image img {
	/* position */
	/* display */
	/* box */
    width: 100%;
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_content .content .conceptual_diagram .image {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
    .main_content .content .conceptual_diagram .image img {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}



.main_content .content .conceptual_diagram .annotation {
	/* position */
    position: relative;
    bottom: auto;
    right: auto;
	/* display */
    z-index: 100;
	/* box */
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0;
	/* font */
    color: #333;
	/* border */
	/* background */
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_content .content .conceptual_diagram .annotation {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}






/* ========================================

select_district

======================================== */
.main_content .select_district {
	/* position */
/*
    position: absolute;
    bottom: 0;
    left: 0;
*/
/*
    position: relative;
*/
    position: relative;
	/* display */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 100;
	/* box */
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
	/* font */
	/* border */
	/* background */

background-color: #fff;

	/* animation */
	/* etc */
    overflow: hidden;
}
@media screen and ( max-width: 768px ){
    .main_content .select_district {
        /* position */
        position: relative;
/*
        bottom: auto;
        left: auto;
*/
        /* display */
        flex-wrap: wrap;
        /* box */
        /* font */
        /* border */
        /* background */
        background-color: #fff;
        /* animation */
        /* etc */
    }
}



.main_content .select_district .district_box {
	/* position */
    position: relative;
	/* display */
    z-index: 100;
	/* box */
    width: 50%;
    height: 100vh;
    margin: 0;
    padding: 0;
	/* font */
	/* border */
	/* background */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	/* animation */
	/* etc */
}
.main_content .select_district .district_box.district_a {
	/* position */
	/* display */
	/* box */
	/* font */
	/* border */
	/* background */
    background-image: url( '../img/index/bg__main_content__select_district__district_a-pc.webp' );
	/* animation */
    transition: all 0.5s;
	/* etc */
    opacity: 0;
    transform: translateY( -100% );
}
.main_content .select_district .district_box.district_b {
	/* position */
	/* display */
	/* box */
	/* font */
	/* border */
	/* background */
    background-image: url( '../img/index/bg__main_content__select_district__district_b-pc.webp' );
	/* animation */
    transition: all 0.5s;
	/* etc */
    opacity: 0;
    transform: translateY( 100% );
}
.main_content .select_district .district_box.district_a.active, 
.main_content .select_district .district_box.district_b.active {
	/* position */
	/* display */
	/* box */
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
    opacity: 1;
    transform: translateY( 0 );
}
@media screen and ( max-width: 768px ){
    .main_content .select_district .district_box {
        /* position */
        position: relative;
        /* display */
        z-index: 100;
        /* box */
        width: 100%;
        height: 50vh;
        margin: 0;
        padding: 0;
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
    .main_content .select_district .district_box.district_a {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        background-image: url( '../img/index/bg__main_content__select_district__district_a-sp.webp' );
        /* animation */
        /* etc */
        opacity: 1;
        transform: translateY( 0 );
        transform: translateX( -100% );
    }
    .main_content .select_district .district_box.district_b {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        background-image: url( '../img/index/bg__main_content__select_district__district_b-sp.webp' );
        /* animation */
        /* etc */
        opacity: 1;
        transform: translateY( 0 );
        transform: translateX( 100% );
    }
    .main_content .select_district .district_box.district_a.active, 
    .main_content .select_district .district_box.district_b.active {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
        transform: translateX( 0 );
    }
}


.main_content .select_district .district_box a {
	/* position */
    position: relative;
	/* display */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
	/* box */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
	/* font */
	/* border */
	/* background */
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_content .select_district .district_box a {
        /* position */
        /* display */
        /* box */
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}



.main_content .select_district .district_box a .link_text {
	/* position */
    position: relative;
	/* display */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
	/* box */
    width: 100%;
    max-width: 400px;
    height: 120px;
    margin: 0;
    padding: 0;
	/* font */
    font-family: "Murecho", sans-serif;
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-align: center;
    color: #fff;
	/* border */
    border: 1px solid #fff;
	/* background */
    background-color: rgba( 0, 0, 0, 0.7 );
	/* animation */
	/* etc */
}
.main_content .select_district .district_box a .link_text::before {
	/* position */
    position: absolute;
    top: calc( 50% - 0.5px );
    right: -26px;
    content: '';
	/* display */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
	/* box */
    width: 52px;
    height: 1px;
    margin: 0;
    padding: 0;
	/* font */
	/* border */
	/* background */
    background-color: #fff;
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .main_content .select_district .district_box a .link_text {
        /* position */
        /* display */
        /* box */
        max-width: 260px;
        height: 80px;
        /* font */
        font-size: 1.6rem;
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
    .main_content .select_district .district_box a .link_text::before {
        /* position */
        right: -13px;
        /* display */
        /* box */
        width: 26px;
        /* font */
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}





.remark {
	/* position */
    position: relative;
	/* display */
    width: 100%;
    max-width: 1200px;
	/* box */
    margin: 0 auto 100px auto;
    padding: 0;
	/* font */
    font-family: "Murecho", sans-serif;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 0.075em;
    color: #696868;
	/* border */
	/* background */
	/* animation */
	/* etc */
}
@media screen and ( max-width: 768px ){
    .remark {
        /* position */
        /* display */
        max-width: none;
        /* box */
        margin: 0 0 40px 0;
        padding: 0 25px;
        /* font */
        font-size: 1.0rem;
        line-height: 1.5;
        letter-spacing: 0.075em;
        color: #999999;
        /* border */
        /* background */
        /* animation */
        /* etc */
    }
}