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

body {
    line-height: 1.8;
  	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  	box-sizing: border-box;
}

body.is-open{
    overflow: hidden;
}

.min{
    font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
}

.bold{
    font-weight: bold;
}

.green{
    color: #005952;
}

.yellow{
    color: #bb9967;
}

.under-line{
    border-bottom: 1px solid #005952;
}

.center{
    text-align: center;
}

.font-s{
    font-size: 0.7rem;
}

.font-l{
    font-size: 1.3rem;
}

.sep{
    display: inline-block;
}

a{
	color: #000;
	text-decoration:none;
}

a.fade,
button.fade,
.ecbn-selection-page-wrapper a.ecbn-selection-more-btn{
    transition: opacity .3s;
}

a.fade:hover,
button.fade:hover{
    opacity: .7;
}

h2 {
	font-size: clamp(1.7rem, 1.594rem + 0.451vw, 2rem);
	font-weight: bold;
}

h3{
    font-weight: bold;
    margin-bottom: 8px;
    font-size: clamp(1.7rem, 1.489rem + 0.901vw, 2.3rem);
    text-align: center;
    display: grid;
    place-items: center;
    line-height: 1.2;
    letter-spacing: 0.25em;
    gap: 8px;
}

h3::after{
    content: "";
    background: url("../img/ribon.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 105px;
    height: 18px;
}

.movie-area h4{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: clamp(1rem, 0.894rem + 0.451vw, 1.3rem);
    margin-bottom: 15px;
    letter-spacing: 0.15rem;
}

.movie-area h4::before,
.movie-area h4::after{
    content: "";
    flex-grow: 1;
    height: 1px;
    border-bottom: 7px double #005952;
}

.sub-head{
    margin-bottom: 50px;
    color: #bb9967;
    font-size: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);
    font-weight: bold;
    text-align: center;
}

#sec4 .sub-head{
    margin-bottom: 0;
}

.wrapper {
  	width: 100%;
  	padding: 0 50px;
  	margin: 0 auto;
  	max-width: 1100px;
}

.wrapper2 {
  	width: 100%;
  	padding: 0 20px;
  	margin: 0 auto;
  	max-width: 1140px;
}

footer {
    position: relative;
    background: #005952;
    padding: 30px 0;
}

header {
    background: #fff;
    padding: 15px 20px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    border-bottom: 1px solid #759e9b;
}

#content{
    position: relative;
}

.respb{
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.f-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.f-container.f-logo{
    gap: 50px;
    justify-content: space-between;
    align-items: flex-start;
}

.f-container.f-logo .f-items{
    width: calc(50% - 25px);
}

.f-container.f-message{
    gap: 50px;
    justify-content: space-between;
    align-items: flex-start;
}

.message1{
    padding-bottom: 50px;
    border-bottom: 1px solid #000;
    margin-bottom: 50px;
}

.message1 .f-items:last-of-type,
.message2 .f-items:first-of-type{
    width: 230px;
}

.message1 .f-items:first-of-type,
.message2 .f-items:last-of-type{
    width: calc(100% - 280px);
}

.f-container.global .f-items.logo{
    width: 25%;
}

.f-container.global .f-items.menu{
    width: 75%;
    gap: 30px;
    align-items: flex-start;
    justify-content:flex-end;
}

header .f-items{
    margin-left: 15px;
}

header .f-items:first-of-type{
    margin-left: 0;
}

header .menu .f-items{
    line-height: 1;
}

.sp {
    display: none;
}

.line {
    width: 30px;
    height: 24px;
    position: relative;
}

.line span::before, 
.line span::after{
    content: "";
    display: block;
}

.line span, 
.line span::before, 
.line span::after{
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    transition: .3s;
}

.line span::before {
    top: 12px;
}

.line span::after {
    top: 24px;
}

#navBtn{
    z-index: 999;
    cursor: pointer;
    margin-left: auto;
}

.line.open span, 
.line.open span::before, 
.line.open span::after{
    background: #fff;
}

.line.open span{
    transform: rotate(45deg);
    top: 15px;
}

.line.open span::before{
    opacity: 0;
}

.line.open span::after {
    transform: rotate(90deg);
    top: 0;
}

#navContent{
    position: fixed;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    backdrop-filter: blur(0.5rem);
}

#navList{
    text-align: center;
    font-size: 1.5rem;
}

#navList div{
    line-height: 1;
    margin-bottom: 15px;
}

#navList a{
    color: #fff;
}

#head .logo .f-container {
    gap: 30px;
}

#head .logo .f-items:first-of-type{
    width: calc(40% - 15px);
    max-width: 110px;
}

#head .logo .f-items:last-of-type{
    width: calc(60% - 15px);
    max-width: 180px;
}

.f-container.store-renewal{
    gap: 50px;
    margin-bottom: 45px;
}

.f-items.renewal-img{
    width: 170px;
}

.f-items.renewal-text{
    width: calc(100% - 220px);
    font-size: clamp(1rem, 0.718rem + 1.202vw, 1.8rem);
}

.company-logo{
    max-width: clamp(95px, 65.070px + 7.981vw, 180px);
    display: inline-block;
}

.u-car-logo{
    max-width: clamp(150px, 109.507px + 10.798vw, 265px);
    display: inline-block;
}

.u-life-logo{
    max-width: clamp(150px, 113.028px + 9.859vw, 255px);
    display: inline-block;
}

.f-container.footer-container{
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.f-container.footer-logo{
    gap: 20px;
    width: 540px;
}

.footer-logo .f-items:first-of-type{
    width: calc(60% - 10px);
}

.footer-logo .f-items:last-of-type{
    width: calc(40% - 10px);
}

.f-container.footer-sns{
    gap: 40px;
    width: fit-content;
}

.f-container.footer-sns .f-items{
    width: 40px;
}

.f-container.news-item{
    gap: 35px;
    justify-content: space-between;
    align-items: flex-end;
}

.f-container.news-item:not(:last-of-type){
    margin-bottom: 40px;
}

.f-items.news-thumbnail,
.f-items.topic-info-thumbnail{
    width: 265px;
}

.f-items.news-info{
    width: calc(100% - 300px);
    padding-bottom: 5px;
    border-bottom: 2px dashed #759e9b;
}

.f-items.topic-info-text{
    width: calc(100% - 300px);
}

.news-title{
    font-size: 1.2rem;
    padding-right: 50px;
    position: relative;
    display: block;
}

.news-title::after{
    content: "";
    display: block;
    position: absolute;
    background: url("../img/btn_arrow_gray.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    bottom: 0;
    right: 0;
}

.f-container.topic-info{
    gap: 20px;
    align-items: flex-start;
}

.news-list{
    padding-bottom: 5px;
    border-bottom: 2px dashed #759e9b;
    margin-bottom: 20px;
}

.f-container.news-info{
    gap: 10px;
    padding-right: 35px;
    position: relative;
}

.f-container.news-info::after{
    content: "";
    display: block;
    position: absolute;
    background: url("../img/btn_arrow_gray.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    bottom: 0;
    right: 0;
}

.f-container.history-subtitle{
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}

.f-items.histori-subtitle-logo{
    width: 255px;
}

.f-items.history-subtitle-text{
    width: fit-content;
    font-size: 2.5rem;
}

.history-top-text{
    font-size: 1.3rem;
    margin-top: 70px;
}

/*グリッド*/
.grid-container{
    display: grid;
}

/*メインビジュアル*/
.main-visual{
    height: calc(var(--vh, 1vh) * 90);
    height: 90svh;
    min-height: 455px;
    width: 100%;
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 90px;
}

.corporate-message{
    width: 100%;
    height: fit-content;
    text-align: center;
}

.main-visual-item1{
    z-index: 4;
    min-height: 0;
    padding: 0 10px;
}

.main-visual-item1 svg{
    width: 100%;
    max-width: 890px;
    height: auto;
}

.main-visual-item2{
    z-index: 3;
    text-align: center;
    color: #fff;
    font-size: clamp(0.95rem, 0.724rem + 0.751vw, 1.4rem);
    padding: 15px 20px;
}

.main-visual-item2 .logo{
    width: 100%;
    max-width: 520px;
    margin-bottom: 30px;
}

.main-visual-item3{
    z-index: 1;
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main-visual-item3::before{
    content: "";
    display: block;
    background: #005952;
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}

.main-visual-item3 .splide{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
    height: fit-content;
}

.main-visual-item3 .splide__slide img {
    width: 100%;
    height: calc(var(--vh, 1vh) * 90);
    height: 90svh;
    min-height: 455px;
    object-fit: cover;
    transition: transform 7s 1s ease-out;
}

.main-visual-item3 .splide__slide.is-active img {
    transition-delay: 0s;
    transform: scale(1.05);
}

.main-visual-item3 .splide__arrows,
.main-visual-item3 .splide__pagination{
    display: none;
}

/*歴史*/
.grid-container.history-grid{
    place-items: center;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-auto-columns: 100%;
    overflow: hidden;
    padding-top: 160px;
}

.main-visual-item1,
.main-visual-item2,
.main-visual-item3,
.history-item1,
.history-item2,
.history-item3{
    grid-area: 1 / 1 / 2 / 2;
}

.history-item1{
    z-index: 3;
    width: 100%;
}

.history-item2{
    z-index: 2;
    justify-self: stretch;
    align-self: stretch;
}

.loop-wrap {
    overflow: hidden;
    width: 100%;
}

.loop-item {
    display: flex;
    width: max-content;
    --speed: 50s;
    animation: scroll var(--speed) linear infinite;
    will-change: transform;
}

.loop-item img {
    display: block;
    flex-shrink: 0;
    width: 110vw;
    height: auto;
}

@keyframes scroll {
    to     { transform: translateX(-50%); }
}

.history-item3{
    z-index: 1;
}

/*タイムライン*/
.hero{
    opacity: 0;
}
/* 全体 */
.timeline__area{
    margin-top: 170px;
    opacity: 0;
    transform: translateY(65px);
}
.timeline {
    position: relative;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    z-index: 2;
}

.timeline__bg{
    position: relative;
}

.timeline__bg.beige{
    background: #f8f6e7;
}

.timeline__bg::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 106px;
    z-index: 1;
}

.timeline__bg:first-of-type::after{
    height: 54px;
}

.timeline__bg.beige::after{
    background: #fff;
}

.timeline__bg.white::after{
    background: #f8f6e7;
}

/* 年の大見出し */
.timeline__year {
    margin-bottom: 10px;
    font-size: 4rem;
    color: #bb9967;
    letter-spacing: 0.3em;
}

/* 縦ライン */
.timeline__list {
    position: relative;
    margin-left: 50px;
    padding-left: 50px;
    padding-bottom: 70px;
}

.timeline__bg:not(:first-of-type) .timeline__list{
    padding-top: 50px;
}

.timeline__list::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #005952;
}

#era01 .timeline__list::before{
    height: calc(100% - 54px);
}

#era08 .timeline__list::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: -48px;
    width: 100px;
    height: 110px;
    background: url(../img/timeline_arrow.gif);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 各項目 */
.timeline__item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 15px;
    margin-bottom: 60px;
    position: relative;
    opacity: 0;
    transform: translateY(60px);
}

.timeline__item:last-of-type{
    margin-bottom: 0;
}

/* ドット */
.timeline__item::before {
    content: "";
    position: absolute;
    left: -56px;
    top: 10px;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #005952;
    border-radius: 50%;
    z-index: 2;
}

.timeline__item::after{
    content: "";
    position: absolute;
    left: -36px;
    top: 17px;
    width: 30px;
    height: 1px;
    border-top: 4px dotted #005952;
    z-index: 1;
}

.timeline__text-year{
    position: relative;
    font-size: 2rem;
    color: #005952;
    line-height: 1.3;
    letter-spacing: 0.1em;
}

/* 画像プレースホルダ */
.timeline__image{
    width: 100%;
    margin-top: 15px;
}

.timeline__image.rect-y{
    max-width: 375px;
}

.timeline__image.rect-y2{
    max-width: 545px;
}

.timeline__image.rect-t{
    max-width: 175px;
}

.timeline__image.squ{
    max-width: 250px;
}

.timeline__content{
    padding-top: 8px;
}

/*セクション*/

section:not(:last-of-type){
    margin-bottom: 70px;
}

section:last-of-type{
    margin-bottom: 80px;
}

section:nth-of-type(2n){
    background-color: #ebf5ec;
    padding-bottom: clamp(80px, -35.211px + 9.39vw, 100px);
    position: relative;
}

section:nth-of-type(2n)::after{
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

section:nth-of-type(3),
section:nth-of-type(5){
    position: relative;
}

section:nth-of-type(3)::after,
section:nth-of-type(5)::after{
    content: "";
    display: block;
    width: 100%;
    height: 90px;
    background-color: #ebf5ec;
    position: absolute;
    left: 0;
    top: -70px;
    z-index: 1;
}

section:nth-of-type(2n) .wrapper,
section:nth-of-type(2n) .wrapper2,
section:nth-of-type(3) .wrapper,
section:nth-of-type(5) .wrapper{
    position: relative;
    z-index: 2;
}

#sec3 .f-items span{
    display: inline-block;
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.box {
    background: #f2f2f2;
    padding: 18px 22px;
}

.campain-container {
  container-type: inline-size;
}

.campain-box{
    background: #fff;
    padding: 8px 10px;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

.campain-box .splide__arrow--prev{
    left: -1.5rem;
}

.campain-box .splide__arrow--next{
    right: -1.5rem;
}

.store-box{
    padding: 35px 70px;
    border: 3px solid #005952;
    border-radius: 15px;
}

.topic-content{
    margin: 50px 0 70px;
}

.topic-area,
.list-area{
    margin-top: 50px;
}

.chronology-area{
    margin-top: 120px;
}

.name-img{
    margin-top: 5px;
}

.name-img img{
    max-width: 140px;
}

#topBtn {
    width: 30px;
    display: block;
    margin: 0 auto 50px;
}

.btn-area{
    margin-bottom: 100px;
    position: relative;
}

.btn-area #topBtn {
    position: absolute;
    bottom: -80px;
    right: 8px;
    margin: 0;
}

.btn-viewmore,
.ecbn-selection-page-wrapper a.ecbn-selection-more-btn{
    background: #005952;
    color: #fff;
    text-align: center;
    padding: 15px 60px;
    font-size: clamp(1rem, 0.930rem + 0.3vw, 1.2rem);
    display: inline-block;
    border-radius: 5px;
    position: relative;
    line-height: 1;
    letter-spacing: 0.25em;
}

.btn-viewmore::after,
.ecbn-selection-page-wrapper a.ecbn-selection-more-btn::after{
    content: "";
    display: block;
    position: absolute;
    background: url("../img/btn_arrow.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 25px;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.back-btn-area{
    margin-bottom: 50px;
}

.back-btn{
    border: 1px solid #759e9b;
    padding: 10px 35px 10px 55px;
    border-radius: 5px;
    position: relative;
}

.back-btn::before{
    content: "";
    display: block;
    background: url("../img/btn_arrow_gray.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%) rotateY(180deg);
    width: 25px;
    height: 20px;
    top: 50%;
    left: 10px;
    position: absolute;
}

.btn-saitama{
    background: #ebf5ec;
    color: #005952;
    text-align: center;
    padding: 15px 60px;
    font-size: clamp(1rem, 0.930rem + 0.3vw, 1.2rem);
    display: inline-block;
    border-radius: 5px;
    position: relative;
    line-height: 1;
}

.btn-saitama::after{
    content: "";
    display: block;
    position: absolute;
    background: url("../img/btn_arrow_green.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 25px;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.news_list{
    padding-bottom: 60px;
}

/*ページング*/
#pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

#pagination button {
    padding: 6px 12px;
    cursor: pointer;
    border: none;
    background: #fff;
}

#pagination button.pager-num {
    border: 1px solid #759e9b;
    border-radius: 5px;
    transition: all .3s;
}

#pagination button.current {
    background: #005952;
    color: #fff;
    font-weight: bold;
    pointer-events: none;
}

#pagination button.pager-num:hover {
    border: 1px solid #005952;
    background: #005952;
    color: #fff;
}

#pagination .ellipsis {
    padding: 6px;
}

.kome{
    margin-bottom: 30px;
}

.kome li{
    position: relative;
    padding-left: 15px;
    font-size: 0.8rem;
}

.kome li:before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
}

.pc-images{
    display: block;
}

.sp-images{
    display: none;
}

.movie-area,
section:nth-of-type(3){
    margin-bottom: clamp(70px, 45.352px + 6.573vw, 150px);
}

.movie-container{
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
}

@container (min-width: 1100px) {
    .campain-box .splide__arrow--prev{
        left: -3rem;
    }

    .campain-box .splide__arrow--next{
        right: -3rem;
    }
}


@media screen and (max-width: 990px) {
    .f-container.global{
        flex-wrap: wrap;
    }

    .f-container.global .f-items.menu{
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
        justify-content: center;
    }

    .f-container.global .f-items.logo{
        width: 100%;
        max-width: 950px;
    }
}

@media screen and (max-width: 768px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .f-container.global .f-items.menu{
        width: 15%;
        margin-top: 0;
    }

    .f-container.global .f-items.logo{
        width: 85%;
    }

    header .f-items {
        margin-left: 0;
    }

    .wrapper{
        padding: 0 20px;
    }

    .f-container.store-renewal{
        flex-direction: column;
    }

    .f-items.renewal-text{
        width: 100%;
    }

    .f-items.news-thumbnail{
        width: calc(40% - 20px);
    }

    .f-items.news-info{
        width: calc(60% - 20px);
    }

    .f-container.f-message{
        gap: 30px;
        align-items: center;
    }

    .message1 .f-items:first-of-type, 
    .message2 .f-items:last-of-type{
        width: calc(70% - 15px);
    }

    .message1 .f-items:last-of-type, 
    .message2 .f-items:first-of-type{
        width: calc(30% - 15px);
    }
}

@media screen and (max-width: 600px) {
    .f-container.topic-info{
        flex-wrap: wrap;
    }

    .f-items.topic-info-text,
    .f-items.topic-info-thumbnail{
        width: 100%;
    }
}

@media screen and (max-width: 428px) {
    h3{
        font-size: 1.7rem;
        letter-spacing: 0.1em;
    }

    h3::after{
        height: 15px;
    }

    .f-items.renewal-text{
        text-align: center;
    }

    .f-container.news-item,
    .f-container.f-logo{
        flex-wrap: wrap;
    }

    .f-container.news-item{
        gap: 15px;
    }

    .f-container.f-logo{
        gap: 30px;
        justify-content: center;
    }

    .f-container.f-message.message1{
        flex-direction: column-reverse;
    }

    .f-container.f-message.message2{
        flex-direction: column;
    }

    .f-items.news-thumbnail,
    .f-items.news-info,
    .f-container.f-logo .f-items,
    .message1 .f-items:first-of-type, 
    .message2 .f-items:last-of-type,
    .message1 .f-items:last-of-type, 
    .message2 .f-items:first-of-type{
        width: 100%;
    }

    .message1 .f-items:last-of-type, 
    .message2 .f-items:first-of-type{
        max-width: 180px;
        text-align: center;
    }

    .f-container.f-logo .f-items:first-of-type{
        max-width: 225px;
    }

    .loop-item{
        --speed: 30s;
    }

    .loop-item img {
        width: 220vw;
        height: 48dvh;
        object-fit: contain;
    }

    .message-prof-img img{
        max-width: 230px;
    }

    .store-box{
        padding: 20px 25px;
    }

    .timeline__year{
        font-size: 2.5rem;
    }

    .timeline__list{
        margin-left: 20px;
    }

    .timeline__item{
        grid-template-columns: 1fr;
    }

    .timeline__bg::after{
        height: 85px;
    }

    .timeline__bg:first-of-type::after{
        height: 35px;
    }

    #era01 .timeline__list::before{
        height: calc(100% - 35px);
    }

    .history-top-text{
        font-size: 1rem;
    }

    #era08 .timeline__list::after{
        width: 65px;
        height: 80px;
        left: -30px;
    }

    .btn-viewmore,
    .ecbn-selection-page-wrapper a.ecbn-selection-more-btn{
        padding: 15px 45px 15px 30px;
    }

    .btn-saitama{
        padding: 15px 45px 15px 20px;
    }

    .btn-area{
        margin-bottom: 120px;
    }

    .btn-area #topBtn {
        bottom: -115px;
    }

    .main-visual-item2 .logo{
        width: 80%;
        margin: 0 auto 30px;
    }

    .pc-images{
        display: none;
    }

    .sp-images{
        display: block;
    }
}