@charset "UTF-8";
/* Hero */
.hero-bg{background: url(../imgs/hero.webp) no-repeat center center/cover;}
@media screen and (max-width: 768px) {
.hero-bg{background: url(../imgs/hero_sp.webp) no-repeat center center/cover;}
}

.hero .cap{ bottom: 10px; color: #fff; text-shadow: 0px 0px 2px rgba(0, 0, 0, .6), 0px 0px 4px rgba(0, 0, 0, .6), 0px 0px 6px rgba(0, 0, 0, .6), 0px 0px 8px rgba(0, 0, 0, .6), 0px 0px 10px rgba(0, 0, 0, .6), 0px 0px 12px rgba(0, 0, 0, .6);}


/* Position */
.bg-inner{position: relative; z-index: 3;}
.contents {
  margin-bottom: clamp( 60px , 12.3vw, 130px);
}
.txt-large {
  margin-bottom: clamp( 20px , 4.7vw , 50px);
}

/* topics */
.topics .txt-normal {margin-bottom: clamp( 30px , 6.8vw , 70px);line-height: 2;}
.topics .list-img{display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0.952% 0 0;}
.topics .list-img .img{width: 49.524%;position: relative;}
.topics .list-img .img .tit-img{position: absolute;bottom:8px;left:10px;color: rgba(365, 365, 365, 0.8);font-size: clamp( 16px , 4vw , 40px);}

/* area */
.area .list-img2{display: flex;justify-content: space-between;flex-wrap: wrap;}
.area .list-img2 .img{width: 49.048%;position: relative; margin-top: 1.904%;}
.area .list-img2 .img .tit-img{position: absolute;bottom:8px;left:10px;color: #ffffff;font-size: min(2vw , 22px); display: flex; align-items: center; line-height: 1.3;}
.area .list-img2 .img .tit-imgS{margin-right: 0.5em;}
.area .list-img2 .img .tit-imgS span{margin-left: -0.5em; display: block;}
.area .list-img2 .img .tit-imgB{font-size: min( 4.2vw , 48px); line-height: 1; position: relative; top: -0.1em;}
.area .list-img2 .img .tit-imgB span{font-size: 150%; display: inline-block; line-height: 0.8;}

.area .cap-left {
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
  padding-top: 5px;
  max-width: 913px;
  margin: 30px auto 10px;
}
.cap.capOut{text-align: left;position: absolute;}
.area .other-page{max-width: 913px;margin: 20px auto 0;position: relative;overflow: hidden;}
.area .other-page .page-name{color: #ffffff;position: absolute;top: 50%;left: 10%;display: flex;justify-content: space-between;width: 80%;transform: translateY(-50%);align-items: center;line-height: 1;}
.area .other-page .page-name p{letter-spacing: 0.5em;font-size: clamp( 16px ,4.6vw , 46px); font-family: "Castoro", serif; font-weight: 400; line-height: 1;}
.area .other-page a picture img{transition: all 0.3s;}
.area .other-page  a{overflow: hidden;}
.area .other-page  a:hover picture >img{transform: scale(1.2);}
.area .other-page  a .page-name span img{position: relative;right: 0;transition: all 0.3s;}
.area .other-page  a:hover .page-name img{right: -20px;}
@media screen and (max-width: 768px) {
    .area .other-page .page-name span{width: 25px;}
    .area .other-page .photo__capIn {bottom: 2px;}
    .area .list-img2{margin: 0 -20px;}
    .area .list-img2 .img{width: 49.5%; margin-top: 1%;}
    .area .cap-sp{margin-right: -20px;}
}

/* city */
.city .txt-large.txt-brd{position: relative;padding-bottom: 25px;margin-bottom: clamp( 20px , 4.7vw , 25px);}
.city .txt-large.txt-brd::after{position: absolute;content: '';width: 100px;height: 1px;background: #000000;bottom: 0;left: 50%;transform: translateX(-50%);}
.city .txt-normal {margin-bottom: clamp( 30px , 6.8vw , 70px);line-height: 2;}
.city .list-img3{display: flex;justify-content: space-between;flex-wrap: wrap;}
.city .list-img3 .img{width: 100%;position: relative; margin-bottom: 1.904%;}
.city .list-img3 .imgHalf{width: 49.048%;}
.city .list-img3 .num{position: absolute; bottom: 10px; right: 10px; border: 1px solid #ffffff; background: #000000; color: #ffffff; width: 20px; height: 20px; font-size: 18px; line-height: 0.8; text-align: center;}
.city .list-img3 .tit-img{position: absolute;left: 10px;top: 8px;color: rgba(365, 365, 365, 0.8);font-size: clamp( 16px , 4.8vw , 48px);}
.city .list-img3 .img:nth-of-type(3) .tit-img,
.city .list-img3 .img:nth-of-type(4) .tit-img{top: auto; bottom: 8px;}
.city ul.cap{display: flex; flex-wrap: wrap; margin-top: -1em;}
.city ul.cap li:not(:last-of-type){margin-right: 1em;}
.city ul.cap span{background: #000000; color: #ffffff; display: inline-block; width: 14px; height: 14px; line-height: 1; text-align: center; margin-right: 3px;}
@media screen and (max-width: 768px) {
    .city{margin-bottom: 40px;}
    .city .list-img3 .tit-img{top: 5px; left: 5px;}
    .city .list-img3 .img:nth-of-type(3) .tit-img,
    .city .list-img3 .img:nth-of-type(4) .tit-img{bottom: 5px;}
    .city .list-img3 .num{font-size: 12px; width: 14px; height: 14px; bottom: 5px; right: 5px;}
    .city ul.cap{margin-top: 0;}
}

/* history */
.history{background: #ffffff;border: 1px solid #000000;padding: clamp(15px , 5vw ,50px);margin-bottom: clamp(20px , 6.3vw, 40px);;}
.history .his_wrap{max-width: 930px;margin: 0 auto;}
.history .ttl{position: relative;font-size: clamp( 18px , 2.4vw , 24px);text-align: center;margin: 0 0 15px;z-index: 2;}

.history #tab01{margin-bottom: 80px;}
.history #tab01 .tab-inner{display: flex;justify-content: space-between;flex-wrap: wrap;}
.history #tab01 .tab-inner .tab-txt{width: 46.236559%;position: relative;}
.history #tab01 .tab-inner .tab-img{width: 50%;position: relative;}
.history #tab01 .tab-inner .tab-img .caption{position: absolute;left: -215px;bottom: 0;}

.history .tab-txt .txt-bg{position: relative;;text-align: center;color: #ffffff;background: #3b100e;font-size: clamp( 15px , 1.8vw , 18px);padding: 7px 0;margin: 0 0 5px;z-index: 2;}
.history .tab-txt .txt-info{font-size: clamp( 14px , 1.5vw , 16px);line-height: 2;}
.history #tab01 .tab-inner .tab-txt::after{position: absolute;content: '';background: url('../imgs/history_txt.svg') no-repeat center center / 100% 100%;width: 270px;height: 43px;left: 0;top: 10px;}


.history #tab02 .tab-inner{display: flex;justify-content: space-between;flex-wrap: wrap;}
.history #tab02 .tab-inner .tab-txt{width: 46.236559%;position: relative;}
.history #tab02 .photo {margin:30px 0 0 0;}
.history #tab02 .photo .caption{position: absolute;left:5.5%;top: 86%;}

.history #tab02 .tab-inner .tab-txt01 .txt-bg::after{position: absolute;content: '';background: url('../imgs/future_txt.svg') no-repeat center center / 100% 100%;width: 250px;height: 43px;left: 0;top: calc(-100% - 8px);}

@media screen and (max-width: 768px) {
    .history .tab-txt .txt-bg{line-height: 1.5;}

    .history #tab01{margin-bottom: 50px;}
    .history #tab01 .tab-inner .tab-txt{width: 100%;}
    .history #tab01 .tab-inner .tab-txt::after {width: 203px;height: 32px;top: 5px;}
    .history #tab01 .tab-inner .tab-img{width: 100%;margin-top: 15px;}
    .history #tab01 .tab-inner .tab-img img{width: 100%;}
    .history #tab01 .tab-inner .tab-img .caption{left: unset;right: 0;bottom: -20px;}
    .history #tab02{position: relative;}
    .history #tab02 .tab-inner .tab-txt01 .txt-bg::after {display: none;}
    .history #tab02 .tab-inner .tab-txt{width: 100%;}
    .history #tab02 .tab-inner .tab-txt:not(:last-child){margin: 0 0 20px;}

    .history #tab02::after{position: absolute;content: '';background: url('../imgs/future_txt.svg') no-repeat center center / 100% 100%;width: 202px;height: 32px;left: 0;top: 45px;}  
    .history #tab02 .photo{margin: 20px -15px 0;}
    .history #tab02 .photo .caption{position: static; padding: 0 15px; margin-top: -15px;}

}