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


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

}


/* #page_ttl_wrap
----------------------------------------- */
#page_ttl_wrap {
}
#page_ttl_wrap .inner {
    max-width: none;
    width: 100%;
    position: relative;
    padding-top: 0;
}
#page_ttl_wrap .page_top {
    width: 100%;
    height: calc(100vh - 5.5rem);
    padding-bottom: 6rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
#page_ttl_wrap h1.page_ttl {
    position: absolute;
    z-index: 2;
    top: 8rem;
    left: 50%;
    transform: translateX(-50%);
}
#page_ttl_wrap .page_top .message {
    text-align: center;
    z-index: 2;
}
#page_ttl_wrap .page_top .message span {
    font-size: 2.4rem;
    line-height: calc(33 / 24);
    letter-spacing: 0.19em;
    font-weight: 700;
    background: #FFFFFF;
    padding: 0.2em 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

#page_ttl_wrap .page_top .img_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 5.5rem);
}
#page_ttl_wrap .page_top .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page_ttl_wrap .page_top.is_fixed  .img_wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

@media only screen and (max-width: 768px) {
#page_ttl_wrap h1.page_ttl {
    top: 5rem;
}
    
#page_ttl_wrap .page_top {
    height: calc(100vh - 5.5rem);
    height: calc(calc(var(--vh, 1vh) * 100) - 5.5rem);
    padding-bottom: 4rem;
    align-items: flex-start;
}
    
#page_ttl_wrap .page_top .img_wrap {
    height: calc(100vh - 5.5rem);
    height: calc(calc(var(--vh, 1vh) * 100) - 5.5rem);
}
    
#page_ttl_wrap .page_top .message {
    text-align: left;
    margin-left: 3rem;
}
#page_ttl_wrap .page_top .message span {
    line-height: calc(31 / 24);
}
}


/* .overview
----------------------------------------- */
#overview {
    position: relative;
    z-index: 1;
}
#overview::before {
    content: '';
    display: block;
    width: 100%;
    /*aspect-ratio: 1400 / 1115;*/
    height: 110rem;
    position: absolute;
    z-index: -1;
    top: -15rem;
    left: 0;
    
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 35%);
}
#overview::after {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% - 90rem);
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    
    background: #ffffff;
}

#overview .inner {
    max-width: 65rem;
    padding-top: 33rem;
    padding-bottom: 8rem;
}
#overview .layout {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
#overview .layout h2.ttl {
    text-align: center;
}
#overview .layout h2.ttl span {
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    line-height: calc(47/24);
    font-weight: 700;
}
#overview .layout .txt {
    margin-top: 6rem;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    line-height: calc(31/16);
    font-weight: 700;
}
#overview .layout .map {
    margin-top: 5rem;
    width: 100%;
}
#overview .layout .btn_wrap {
    margin-top: 4rem;
}
#overview .layout .btn_wrap .btn {
    width: 32rem;
}

#overview .carousel {
    overflow: hidden;
    width: 100%;
}

#overview .carousel_wrap {
    display: flex;
    width: max-content;
    animation: carouselLoop 40s linear infinite;
}

#overview .carousel_con {
    flex-shrink: 0;
    width: 30rem;
    height: 30rem;
    margin-right: 1rem;
}

#overview .carousel_con img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes carouselLoop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/*.carousel:hover .carousel_wrap {
    animation-play-state: paused;
}*/


@media only screen and (max-width: 768px) {
#overview .inner {
    padding-top: 22rem;
    padding-bottom: 6rem;
}
#overview .layout h2.ttl span {
    font-size: 1.8rem;
    line-height: calc(31 / 18);
}
#overview .layout .txt {
    margin-top: 5rem;
    font-size: 1.5rem;
    line-height: calc(31 / 15);
}
#overview .layout .map {
    margin-top: 4rem;
}
#overview .layout .btn_wrap {
    margin-top: 2rem;
}
    
#overview .carousel_con {
    width: 31.5rem;
    height: 31.5rem;
    margin-right: 1rem;
}
}

/* .information
----------------------------------------- */
#information {
    background-color: #FFFFFF;
}
#information .inner {
    padding-top: 16rem;
}

#information .main_img {
    margin-top: 4rem;
}

#information .layout {
    width: 100%;
    max-width: 65rem;
    margin: auto;
    margin-top: 5rem;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
}
#information .layout .date {
    font-size: 2.8rem;
    letter-spacing: 0.1em;
    line-height: 1;
    font-weight: 700;
}
#information .layout .place {
    margin-top: 1rem;
    font-size: 1.8rem;
    letter-spacing: 0.03em;
    line-height: calc(26/18);
    font-weight: 700;
}
#information .layout .txt {
    margin-top: 5rem;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    line-height: calc(31/16);
    font-weight: 700;
}

#information .layout .list_wrap {
    margin-top: 4rem;
    width: 100%;
    border: 2px solid #E20000;
    border-radius: 1.2rem;
    padding: 6rem;
}
#information .layout .list_wrap .list {
    display: table;
}
#information .layout .list_wrap .list li {
    display: table-row;
}
#information .layout .list_wrap .list li h3.ttl {
    display: table-cell;
    font-size: 2rem;
    letter-spacing: 0.03em;
    line-height: calc(26/20);
    font-weight: 700;
    padding-right: 4rem;
}
#information .layout .list_wrap .list li:not(:first-child) h3.ttl {
    padding-top: 4rem;
}
#information .layout .list_wrap .list li .txt {
    display: table-cell;
    font-size: 2.2rem;
    letter-spacing: 0.03em;
    line-height: calc(26/22);
    font-weight: 700;
    margin: 0;
}
#information .layout .list_wrap .list li .txt .fAbc {
    font-size: 2.6rem;
    font-weight: normal;
}
#information .layout .list_wrap .list li .txt .address {
    font-size: 1.8rem;
    margin-left: -0.5em;
}


@media only screen and (max-width: 768px) {
#information .inner {
    padding-top: 12rem;
}
#information .main_img {
    width: 100vw;
    margin-top: 4rem;
    margin-left: -3rem;
}
#information .layout {
    margin-top: 3rem;
}
#information .layout .date {
    font-size: 2.1rem;
}
#information .layout .place {
    margin-top: 1rem;
    font-size: 1.5rem;
}

#information .layout .txt {
    margin-top: 3rem;
    font-size: 1.5rem;
    line-height: calc(31 / 15);
}
    
#information .layout .list_wrap {
    margin-top: 6rem;
    width: 100%;
    border: none;
    padding: 0;
}
#information .layout .list_wrap .list li:not(:first-child) h3.ttl {
    padding-top: 2rem;
}
#information .layout .list_wrap .list li h3.ttl {
    font-size: 1.5rem;
    padding-right: 1rem;
}
#information .layout .list_wrap .list li .txt {
    font-size: 1.5rem;
}
#information .layout .list_wrap .list li .txt .info_area {
    letter-spacing: 0;
}
#information .layout .list_wrap .list li .txt .address {
    font-size: 1.3rem;
    margin-left: -0.5em;
}
#information .layout .list_wrap .list li .txt .info_place {
    display: block;
    font-size: 1.3rem;
}
#information .layout .list_wrap .list li .txt .fAbc {
    font-size: 2.2rem;
}
}


/* .story
----------------------------------------- */
#story {
    background-color: #FFFFFF;
}
#story .inner {
    max-width: 120rem;
    padding-top: 16rem;
    padding-bottom: 12rem;
}

#story .layout {
    width: calc(1000/1200*100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
#story .layout .img_wrap {
    width: calc(500/1000*100%);
    padding: 0 4rem;
}
#story .layout .txt_wrap {
    width: calc(500/1000*100%);
    padding: 0 4rem;
}
#story .layout .ttl {
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    line-height: calc(36/24);
    font-weight: 700;
}
#story .layout .txt {
    margin-top: 2rem;
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    line-height: calc(28/16);
    font-weight: 700;
}

#story .slider_wrap {
    margin-top: 3rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#story .story_slider {
    overflow: visible;
    /*width: 100%;
    overflow: hidden;*/
}

#story .story_slider .swiper-slide {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 510;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../images/story_bg.svg") no-repeat center center / contain;
}


/* -------------------
   矢印ボタン
------------------- */
#story .story_slider .swiper-button-prev,
#story .story_slider .swiper-button-next {
    width: 4.5rem;
    height: 4.5rem;
    margin-top: 0;
    top: 48%;
    transform: translateY(-50%);
}

#story .story_slider .swiper-button-prev {
    left: 3rem;
}

#story .story_slider .swiper-button-next {
    right: 3rem;
}

#story .story_slider .swiper-button-prev:after,
#story .story_slider .swiper-button-next:after {
    display: none;
}

#prev_svg .cls-1,
#prev_svg .cls-2 {
    transition: all .6s;
}
#next_svg .cls-1,
#next_svg .cls-2 {
    transition: all .6s;
}

#story .swiper-button-next.swiper-button-disabled, 
#story .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

@media (hover: hover) {
#story .story_slider .swiper-button-next:hover #next_svg .cls-2,
#story .story_slider .swiper-button-prev:hover #prev_svg .cls-2 {
    fill: #E20000;
}
#story .story_slider .swiper-button-next:hover #next_svg .cls-1,
#story .story_slider .swiper-button-prev:hover #prev_svg .cls-1 {
    fill: #E20000;
}
#story .story_slider .swiper-button-next:hover #next_svg #arrow .cls-1,
#story .story_slider .swiper-button-prev:hover #prev_svg #arrow .cls-1 {
    fill: #FFFFFF;
}
}

@media only screen and (max-width: 768px) {
#story .inner {
    width: 32.5rem;
    padding-top: 16rem;
    padding-bottom: 12rem;
}
    
#story .layout {
    width: 100%;
    flex-flow: column;
    gap: 2rem;
    padding: 2rem 0 3rem;
}
#story .layout .img_wrap {
    width: 100%;
    padding: 0;
}
#story .layout .txt_wrap {
    width: 100%;
    padding: 0 1.8rem;
}
#story .layout .ttl {
    font-size: 1.6rem;
}
#story .layout .txt {
    margin-top: 1rem;
    font-size: 1.3rem;
}

#story .slider_wrap {
    margin-top: 3rem;
    padding: 0 0.5rem;
}

#story .story_slider {
    overflow: visible;
    /*width: 100%;
    overflow: hidden;*/
}

#story .story_slider .swiper-slide {
    width: 100%;
    height: auto;
    aspect-ratio: 315 / 339;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../images/story_bg_sp.svg") no-repeat center bottom / contain;
}
    
#story .story_slider .swiper-button-prev {
    left: 0;
}

#story .story_slider .swiper-button-next {
    right: 0;
}

}



/* #change
----------------------------------------- */
#change {
    background-color: #FFDEDE;
    position: relative;
    z-index: 1;
}
#change::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1400 / 130;
    /*height: 13rem;*/
    background: url("../images/change_bg.svg") no-repeat center top / 100%;
    background-color: #FFFFFF;
    margin-bottom: -1px;
}
#change::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1400 / 130;
    /*height: 13rem;*/
    background: url("../images/change_bg.svg") no-repeat center bottom / 100%;
    background-color: #F6FFFF;
    margin-top: -1px;
}
#change .inner {
    max-width: 110rem;
    padding-top: 0;
    padding-bottom: 5rem;
    position: relative;
    z-index: 2;
}

#change .layout {
    width: 100%;
    margin-top: 8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 4rem calc(70/1100*100%);
}
#change .layout .con {
    width: calc(320/1100*100%);
}
#change .layout .con .img_wrap {
    width: 100%;
    aspect-ratio: 300 / 225;
    display: flex;
    align-items: center;
    justify-content: center;
}
#change .layout .con .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#change .layout .con .txt_wrap {
    margin-top: 4rem;
}
#change .layout .con .sub_ttl {
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    line-height: 1;
    font-weight: 700;
    color: #FF0000;
}
#change .layout .con .ttl {
    margin-top: 1rem;
}
#change .layout .con .ttl span {
    font-size: 2.2rem;
    line-height: calc(30 / 22);
    letter-spacing: 0.06em;
    font-weight: 700;
    background: #FFFFFF;
    padding: 0.1em 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
#change .layout .con .txt {
    margin-top: 2rem;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    line-height: calc(26/16);
    font-weight: 700;
}

#change .layout .btn_wrap {
    margin-top: 5rem;
}

@media only screen and (max-width: 768px) {
#change::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 375 / 31;
    /*height: 13rem;*/
    background: url("../images/change_bg_sp.svg") no-repeat center top / 100%;
    background-color: #FFFFFF;
    margin-bottom: -1px;
}
#change::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 375 / 31;
    /*height: 13rem;*/
    background: url("../images/change_bg_sp.svg") no-repeat center bottom / 100%;
    background-color: #F6FFFF;
    margin-top: -1px;
}
#change .inner {
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
    z-index: 2;
}

#change .layout {
    width: 100%;
    margin-top: 4rem;
    flex-flow: column;
    gap: 4rem 0;
}
#change .layout .con {
    width: 100%;
}
#change .layout .con .img_wrap {
    width: 100%;
    aspect-ratio: 300 / 225;
    display: flex;
    align-items: center;
    justify-content: center;
}
#change .layout .con .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#change .layout .con .txt_wrap {
    margin-top: 1rem;
}
#change .layout .con .sub_ttl {
    font-size: 1.2rem;
}
#change .layout .con .ttl {
    margin-top: 1rem;
}
#change .layout .con .ttl span {
    font-size: 2.0rem;
}
#change .layout .con .txt {
    margin-top: 1.5rem;
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    line-height: calc(22/13);
}

#change .layout .btn_wrap {
    margin-top: 2rem;
}
}


/* .future
----------------------------------------- */
#future {
    background-color: #F6FFFF;
}
#future .inner {
    padding-top: 10rem;
    padding-bottom: 17rem;
}

#future .main_img {
    margin-top: 5rem;
}

#future .layout {
    width: 100%;
    max-width: 65rem;
    margin: auto;
    margin-top: 6rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
#future .layout .txt {
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    line-height: calc(31/16);
    font-weight: 700;
    text-align: center;
}

#future .layout .btn_wrap {
    margin-top: 4rem;
}
#future .layout .btn_wrap .btn {
    width: 24rem;
}

@media only screen and (max-width: 768px) {
#future .inner {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

#future .main_img {
    margin-top: 5rem;
}

#future .main_img a {
    width: 63rem;
    margin-left: -15.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#future .main_img a::after {
    content: '';
    display: block;
    width: 11rem;
    height: 11rem;
    background: url("../images/zoom_icon.svg") no-repeat center  center / contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}  

#future .layout {
    margin-top: 4rem;
}
#future .layout .txt {
    font-size: 1.5rem;
    line-height: calc(31/15);
    white-space: nowrap;
}

#future .layout .btn_wrap {
    margin-top: 4rem;
}
#future .layout .btn_wrap .btn {
    width: 24rem;
}
}