/*-------------------------
フォント
-------------------------*/
@font-face {
    font-family: "RyuminPro";
    src: url("../font/A-OTF Ryumin Pro L-KL.otf") format("opentype");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "RyuminPro";
    src: url("../font/A-OTF Ryumin Pro M-KL.otf") format("opentype");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "RyuminPro";
    src: url("../font/A-OTF Ryumin Pro B-KL.otf") format("opentype");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "century";
    src: url("../font/CENTURY.TTF") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "optima";
    src: url("../font/optima.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "shippori";
    src: url("../font/ShipporiMincho-OTF-Medium.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "shippori";
    src: url("../font/ShipporiMincho-OTF-Bold.otf") format("opentype");
    font-weight: 600;
    font-display: swap;
}


/*-------------------------
共通
-------------------------*/
body {
    height: 100%;
    margin: 0;
    background-color: #F2F0EC;
    font-family: 'RyuminPro';
}

body.can-slide {
    touch-action: none;
    /* スワイプによるスクロール無効 */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}

* {
    margin: 0;
    padding: 0;
}

main {
    overflow-x: hidden;
}

body.can-slide main {
    overflow: auto;
    scrollbar-gutter: stable;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

li {
    list-style: none;
    text-decoration: none;
}

a {
    text-decoration: none;
}

.sp-only {
    display: none;
}

.main-container {
    width: 90%;
    margin: auto;
}

.RyuminPro {
    font-family: 'RyuminPro';
}


/*-------------------------
フェードインアニメーション
-------------------------*/
.anime {
    opacity: 0;
    /* 最初は非表示にしておく */
    translate: 0 20px;
    transition: all 1.5s;
    /* 動きを滑らかに */
}

/* フェードイン用のクラス */
.fadeIn {
    opacity: 1;
    translate: 0 0;
}

/*-------------------------
ローディングアニメーション
-------------------------*/
.loading-text {
    position: absolute;
    width: 10%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* フェードイン */
.loading-text.fade-in {
    opacity: 1;
}

/* フェードアウト */
.loading-text.fade-out {
    opacity: 0;
}

.loading {
    width: 100vw;
    height: 100svh;
    position: fixed;
    top: 0;
    left: 0;
    background: #150201;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 1.5s linear;
    z-index: 9999;
}

.loading.loaded {
    opacity: 0;
    visibility: hidden;
}


/*-------------------------
ヘッダー
-------------------------*/
header.main-header {
    width: 95%;
    position: absolute;
    top: 20px;
    left: 2.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
}

.logo-box {
    display: flex;
    align-items: center;
    gap: .5em;
}

header.main-header h1 {
    margin: 0;
    width: max(6.25vw, 80px);
    line-height: 0;
}

header.main-header h1 img {
    width: 100%;
    height: auto;
}

header.main-header p {
    font-family: 'RyuminPro';
    font-size: max(0.63vw, 8px);
    color: #ffffff;
    letter-spacing: 0.1em;
}

.outline-btn-box {
    position: relative;
    width: 40%;
    max-width: 200px;
    overflow: hidden;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

.outline-btn-box a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 15%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 90%);
    transform: skewX(-20deg);
    transition: all 0.5s ease;
    pointer-events: none;
    /* ← ボタン操作の邪魔をしない */
}

@media (hover: hover) {
    .outline-btn-box a:hover::before {
        left: 130%;
        /* ← ホバーで右に流す */
        transition: all 0.75s ease;
    }
}


/*-------------------------
TOP
-------------------------*/
.slides {
    position: relative;
    display: block;
    height: 100svh;
    width: 100%;
    background: #fff;
    transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
}

.is-sliding .slides {
    background: #ededed;
    transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
}

.slide {
    z-index: -1;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100svh;
    transition: z-index 1s ease;
}

.slide.is-active {
    z-index: 19;
    transition: z-index 1s ease;
}

.slide__content {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    top: 0%;
}

.slide__header {
    z-index: 9;
    width: max-content;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.slide__header.slide__header_sub {
    top: auto;
    left: auto;
    bottom: 40px;
    right: 40px;
    translate: 0 0;
}

.slide__title {
    overflow-y: hidden;
}

.slide__header.slide__header_sub .slide__title {
    margin-bottom: 30px;
    text-align: end;
}

.slide__text {
    text-align: end;
    overflow-y: hidden;
}

.slide__title .title-line {
    display: block;
    overflow-y: hidden;
}

.slide__text .title-line {
    display: block;
    overflow-y: hidden;
}

.slide__title .title-line span,
.slide__text .title-line span {
    display: inline-block;
    transform: translate3d(0, 140%, 0);
    opacity: 0;
    transition: transform 1s ease, opacity 0.8s ease;
}

.slide__title .title-line span {
    font-family: 'RyuminPro';
    font-size: 20px;
    font-size: max(1.77vw, 24px);
    font-weight: 500;
    letter-spacing: 0.7em;
    color: #ffffff;
}

.slide__header_sub .slide__title .title-line span {
    font-family: 'century';
    font-size: 16px;
    font-size: max(1.56vw, 18px);
    letter-spacing: 0;
    color: #B89C4F;
}

.slide__header_sub .slide__text .title-line span {
    font-family: 'century';
    font-size: 12px;
    font-size: max(0.94vw, 14px);
    color: #B89C4F;
}

.slide__title .title-line span:nth-child(1),
.slide__text .title-line span:nth-child(1) {
    transition-delay: 0.15s;
}

.slide__title .title-line span:nth-child(2) {
    transition-delay: 0.3s;
}

.is-active .slide__title .title-line span,
.is-active .slide__text .title-line span {
    transform: translate3d(0, 0%, 0);
    opacity: 1;
    transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
}

.is-active .slide__title .title-line:nth-of-type(2n) span {
    transition-delay: 0.2s;
}

p.slide__text {
    margin: 6px 0;
}

.slide__figure {
    z-index: 7;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-sliding .slide__figure {

    transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1);
}

.slide__figure:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: #1c1c1c;
    opacity: .7;
    z-index: 1;
}

.slide__img {
    position: relative;
    display: block;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    -webkit-backface-visibility: hidden;
    height: 100%;
    width: 100vw;
    filter: grayscale(0%);
    opacity: 0;
    transform: translateY(0px);
    transition:
        height 2.5s 1.5s cubic-bezier(0.19, 1, 0.22, 1),
        filter 1.5s ease,
        opacity 3s ease,
        transform 2s ease;
    object-fit: cover;
}

.is-active .slide__img {
    height: 100%;
    opacity: 1;
    transform: translateY(0);
    transition:
        height 2.5s 1s cubic-bezier(0.77, 0, 0.175, 1),
        filter 1.5s ease,
        opacity 3s ease,
        transform 2s ease;
}

.is-sliding .slide__img {
    filter: grayscale(100%);
}

.slide {
    position: absolute;
    width: 100%;
    height: 100svh;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s ease, z-index 0s linear 1.5s;
    /* z-index遅延で自然に下がる */
}

.slide.is-active {
    z-index: 2;
    opacity: 1;
    transition: opacity 1.5s ease;
}

.slide.is-previous {
    z-index: 1;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.slide.slide04 {
    position: relative;
    background-color: #F2F0EC;
}

.slide.slide04 .slide__content {
    width: 90%;
    margin: auto;
}

.slide.slide04:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: #F2F0EC;
}

.slide.slide04 .slide__figure {
    width: 74%;
    height: auto;
    top: 50%;
    left: auto;
    right: 0;
    translate: 0% -50%;
}

.slide.slide04 .slide__figure:before {
    display: none;
}

.slide.slide04 .slide__figure .slide__img {
    filter: grayscale(0%) !important;
    width: 100%;
    height: auto;
    transition: all 4s ease;
    transition-delay: .5s;
}

.slide.slide04 .slide__figure p.ttl-sub-text {
    opacity: 0;
    transition: all 4s ease;
    transition-delay: .5s;
}

.slide.slide04 header.slide__header {
    left: 0;
    translate: 0% -50%;
    margin-left: 30px;
}

.slide.slide04 .slide__title .title-line {
    width: 12.03vw;
}

.slide.slide04 .slide__title .title-line img {
    opacity: 0;
    vertical-align: unset;
    transition: all .5s;
}

.slide.slide04.is-active .slide__title .title-line img {
    opacity: 1;
    transition: all 2s ease;
    transition-delay: 2.5s;
}

.slide.slide04.is-active .slide__figure p.ttl-sub-text {
    opacity: 1;
}

.slide.slide04 h3.slide__title .title-line {
    width: auto;
}

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down {
    position: absolute;
    bottom: 0px;
    left: 2.5%;
    z-index: 10;
}

.scroll_down a {
    position: absolute;
    left: 10px;
    bottom: 50px;
    color: #ffffff;
    font-size: 14px;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: .2em;
    writing-mode: vertical-lr;
    text-decoration: none;
    text-transform: uppercase;
}

.scroll_down:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffffff;
    animation:
        circlemove 1.6s ease-in-out infinite,
        cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove {
    0% {
        bottom: 120px;
    }

    100% {
        bottom: 0px;
    }
}

@keyframes cirlemovehide {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1;
    }

    80% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}

.scroll_down:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2px;
    height: 120px;
    background: #ffffff;
}

.slide__img_box {
    position: relative;
}

p.aerial-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #ffffff;
    text-shadow: 0px 0px 6px rgb(0 0 0 / 60%);
    line-height: 1;
    font-size: max(0.81vw, 9px);
    transform: translateY(0px);
}

.slide__img_box p.aerial-text {
    opacity: 0;
}

.is-active .slide__img_box p.aerial-text {
    opacity: 1;
    transform: translateY(0);
    transition: all 4s ease;
    transition-delay: .5s;
}

/*-------------------------
タワー名
-------------------------*/
section.ttl-section .main-container {
    margin-top: 60px;
    margin-bottom: 40px;
}

.ttl-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ttl-title-box {
    margin-left: 30px;
    text-align: center;
}

.ttl-title-box h2 {
    display: inline-block;
    line-height: 0;
    width: 12.03vw;
}

.ttl-title-box p {
    font-family: "optima";
    font-size: 1.44vw;
    letter-spacing: 0.15em;
}

.ttl-img {
    width: 74%;
}

p.ttl-sub-text {
    font-family: "century";
    font-size: 9px;
    font-size: max(0.81vw, 9px);
    text-align: end;
    line-height: 1;
    margin-top: 14px;
    color: #B89C4F;
}

/*-------------------------
特徴
-------------------------*/
section.point-section {
    position: relative;
}

ul.point-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    background-color: #B89C4F;
    color: #ffffff;
}

ul.point-list li {
    width: 50%;
    text-align: center;
    padding: 10px 0;
}

p.point-info {
    position: absolute;
    bottom: 0;
    right: 2.5%;
    translate: 0 100%;
    font-family: "century";
    font-size: max(0.81vw, 9px);
    line-height: 1;
    padding-top: 14px;
    color: #333333;
}

p.point-info.anime {
    translate: 0 calc(100% + 20px);
}

p.point-info.anime.fadeIn {
    translate: 0 100%;
}

/*-------------------------
歴史
-------------------------*/
section.history-section {
    position: relative;
    overflow: hidden;
}

.history-deco {
    position: absolute;
    left: 0px;
    bottom: 0;
    width: 50%;
    height: 102%;
    text-align: end;
}

.history-deco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom right;
}

p.history-deco-sub {
    position: absolute;
    color: #5a5a5a;
    bottom: 0;
    left: 0;
    translate: 20px -50%;
    font-size: 90%;
}

section.history-section .main-container {
    padding: 110px 0;
}

.history-container {
    width: 50%;
    margin-left: auto;
}

.history-text {
    font-family: "RyuminPro";
    position: relative;
    writing-mode: vertical-rl;
    margin-left: 20px;
}

.history-text p {
    font-size: 16px;
    letter-spacing: 0.3em;
    line-height: 2;
    margin: 0;
    padding: 130px 0 100px;
}

.history-text p:last-child {
    margin-right: 20px;
}

.history-text h3 {
    position: relative;
    font-size: 40px;
    padding: 130px 20px 100px;
}

.history-text h3::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    display: block;
    width: 1px;
    height: 100%;
    background-color: #000;
}

.history-deco.anime {
    translate: 0 0;
    transition-delay: 1s;
}

/*-------------------------
コンセプト
-------------------------*/
section.concept-section .main-container {
    margin: 30px auto 40px;
}

.concept-title {
    text-align: center;
}

img.imperial-icon {
    width: 60px;
}

.concept-title h2 {
    height: fit-content;
    line-height: 0;
    font-size: 80px;
    letter-spacing: .05em;
    margin: 20px 0 16px;
}

.concept-title h2 img {
    width: 3.6em;
}

.concept-title p {
    font-family: YakuHanJP, "RyuminPro";
    font-size: 16px;
    letter-spacing: 0.25em;
}

.concept-text {
    font-family: "RyuminPro";
    position: relative;
    left: 50%;
    translate: -50% 0;
    writing-mode: vertical-rl;
    margin-top: 40px;
}

h3.concept-title-text {
    font-size: 40px;
    letter-spacing: 0.15em;
}

h3.concept-title-text span {
    margin-bottom: 6px;
    margin-top: -4px;
}

.tategaki {
    text-combine-upright: all;
}

p.concept-sub-text {
    font-size: 20px;
    letter-spacing: 0.3em;
    line-height: 2.5;
    margin: 0 30px 0 25px;
}

.concept-detail-text p {
    font-family: YakuHanJP, "RyuminPro";
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2.5;
}

.concept-map {
    position: relative;
    margin: auto;
    margin-top: 60px;
    width: 90%;
    overflow: hidden;
}

.light {
    opacity: 0;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    width: 0;
    height: 0;
    left: 47.5%;
    top: 3.5%;
    background-color: transparent;
    background-image: radial-gradient(#ffffff 10%, #ffffff00 70%);
    transform: scale(1);
}

.maps-icon {
    opacity: 0;
    position: absolute;
    z-index: 1;
}

.maps-icon.map-mark01 {
    top: 29.5%;
    left: 4%;
    width: 10%;
}

.maps-icon.map-mark02 {
    top: 66%;
    left: 35.5%;
    width: 10%;
}

.maps-icon.map-mark03 {
    top: 35.5%;
    left: 42.2%;
    width: 10%;
}

.maps-icon.map-mark04 {
    top: 13.5%;
    left: 36%;
    width: 23.2%;
    transition: all 1.5s ease-in;
}

/* .concept-map.activeでアニメーションを適用 */
.concept-map.active .maps-icon {
    opacity: 1;
    transition: all 1s ease-in;
}

.concept-map.active .maps-icon.map-mark01 {
    transition-delay: 0s;
}

.concept-map.active .maps-icon.map-mark02 {
    transition-delay: 1s;
}

.concept-map.active .maps-icon.map-mark03 {
    transition-delay: 2s;
}

.concept-map.active .maps-icon.map-mark04 {
    transition-delay: 4s;
}

.concept-map.active .light {
    opacity: 1;
    animation: light 2.5s ease-out forwards;
    animation-delay: 3s;
}

@keyframes light {
    0% {
        width: 18vw;
        height: 18vw;
        transform: scale(0.2);
        opacity: 1;
    }

    40% {
        transform: scale(2.5);
        opacity: 1;
    }

    100% {
        width: 18vw;
        height: 18vw;
        transform: scale(1);
        opacity: 1;
    }
}

.concept-ttl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
}

p.ttl-sub-text.concept-info {
    color: #333333;
}

/*-------------------------
会員募集ボタン
-------------------------*/
.members-btn-container {
    background-color: #937049;
    background-image: url(../img/members-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding: 50px 0;
}

a.members-btn {
    position: relative;
    display: inline-block;
    padding: 16px 0;
    width: 35%;
    min-width: 400px;
    color: #ffffff;
    border: 1.25px solid #ffffff;
    font-family: "shippori";
    font-size: max(1.98vw, 22px);
    font-weight: 400;
    letter-spacing: 0.1em;
    background-image: url(../img/members-bg.jpg);
    background-position: center;
    background-size: 250% auto;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

a.members-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 15%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 90%);
    transform: skewX(-20deg);
    transition: all 0.5s ease;
    pointer-events: none;
    /* ← ボタン操作の邪魔をしない */
}

@media (hover: hover) {
    a.members-btn:hover::before {
        left: 130%;
        /* ← ホバーで右に流す */
        transition: all 0.75s ease;
    }
}

@keyframes shine {
    0% {
        background-position-x: 400%;
    }

    50% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: -400%;
    }
}

a.members-btn span {
    display: inline-block;
    font-size: 18px;
    font-size: max(1.62vw, 18px);
    padding-top: 10px;
}

p.members-btn-detail {
    font-family: "shippori";
    font-weight: 400;
    letter-spacing: 0.1em;
    font-size: 13px;
    font-size: max(1.17vw, 13px);
    line-height: 1.6;
    color: #ffffff;
    margin-top: 30px;
}

a.outline-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    width: 35%;
    min-width: 400px;
    color: #231815;
    font-family: "shippori";
    font-size: max(1.17vw, 13px);
    font-weight: 400;
    letter-spacing: 0.1em;
    background-image: linear-gradient(90deg, rgba(154, 133, 101, 1), rgba(221, 210, 166, 1) 50%, rgba(154, 133, 101, 1));
    text-align: center;
    overflow: hidden;
    margin-top: 30px;
}

a.outline-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 15%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 90%);
    transform: skewX(-20deg);
    transition: all 0.5s ease;
    pointer-events: none;
    /* ← ボタン操作の邪魔をしない */
}

@media (hover: hover) {
    a.outline-btn:hover::before {
        left: 130%;
        /* ← ホバーで右に流す */
        transition: all 0.75s ease;
    }
}

.triangle {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: .5em solid transparent;
    border-bottom: .5em solid transparent;
    border-left: .8em solid #231815;
    border-right: 0;
}

/*-------------------------
footer
-------------------------*/

.footer {
    padding: 100px 0 0;
    position: relative;
    z-index: 3;
    background-color: #fff;
}

.footer_about {
    display: block;
    width: 95%;
    max-width: 780px;
    margin: 0 auto 150px;
    color: #5d6164;
}

.footer_about h6 {
    text-align: center;
    color: #5d6164;
    font-family: YakuHanJP, "RyuminPro";
    font-size: 16px;
    margin: 0 auto 10px;
}

.footer_about-tel {
    font-family: "RyuminPro";
    display: block;
    text-align: center;
    font-size: 50px;
    margin: 0 0 20px;
    color: #5d6164;
}

.footer_about-tel i {
    display: inline-block;
    margin: 0 10px 0 0;
    width: 70px;
}

.footer_about p {
    font-family: "RyuminPro";
    text-align: center;
    line-height: 1.5;
    font-size: 14px;
    margin: 0 0 40px;
}

.footer_about-bnr {
    display: block;
    width: 90%;
    margin: 50px auto 0;
}

.footer_about-bnr a {
    -webkit-transition: .3s;
    transition: .3s;
}

@media (hover: hover) {
    .footer_about-bnr a:hover {
        opacity: .5;
    }
}

.t_inner {
    width: 95%;
    max-width: 1100px;
    margin: 0 auto;
    display: block;
}

.footer_company {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 0 100px;
}

.t_flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.footer_company-item {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.footer_company-item:first-child {
    margin: 0 50px 0 0;
}

.footer_company-item p {
    font-size: 13px;
    margin: 0 10px 0 0;
}

.p_escon {
    display: block;
    width: 100%;
    max-width: 200px;
}

.footer_bnr {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 0 80px;
}

.footer_bnr-item {
    display: block;
    width: 32%;
    margin: 0 0 1.5%;
}

.footer_bnr-item a {
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s;
}

@media (hover: hover) {
    li.footer_bnr-item a:hover {
        opacity: .5;
    }
}

.t_caption {
    display: block;
    text-align: left;
    line-height: 1.5;
    width: 95%;
    max-width: 900px;
    margin: 0 auto 200px;
    font-size: 12px;
    color: #5d6164;
}

.footer small {
    display: block;
    text-align: center;
    letter-spacing: .5px;
    padding: 0 0 30px;
    font-size: 10px;
}

@media (max-width: 1024px) {
    .concept-map {
        width: 100%;
    }
}

@media (max-width: 768px) {

    /*-------------------------
    共通
    -------------------------*/
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .main-container {
        width: 95%;
    }


    /*-------------------------
    ローディングアニメーション
    -------------------------*/
    .loading-text {
        width: 35%;
    }


    /*-------------------------
    ヘッダー
    -------------------------*/


    /*-------------------------
    TOP
    -------------------------*/
    .slide__header {
        top: 45%;
    }

    .slide__title .title-line span {
        font-size: 20px;
        letter-spacing: 0.35em;
    }

    .slide__header.slide__header_sub {
        bottom: 2.5vw;
        right: 2.5vw;
    }

    .slide__header.slide__header_sub .slide__title {
        margin-bottom: 10px;
    }

    p.slide__text {
        margin: 0;
    }

    header.main-header h1 {
        width: 21.33vw;
        max-width: 100px;
    }

    header.main-header p {
        font-size: min(2.13vw, 10px);
    }

    .slide__title .title-line span {
        font-size: min(5.33vw, 26px);
    }

    .slide__header_sub .slide__title .title-line span {
        font-size: min(3.73vw, 20px);
    }

    .slide__header_sub .slide__text .title-line span {
        font-size: min(2.67vw, 16px);
    }

    .slide.slide04 .slide__content {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        height: 50%;
    }

    .slide.slide04 .slide__figure p.ttl-sub-text {
        margin-right: 2.5%;
    }

    .slide.slide04 .sp-point-section .slide__figure p.ttl-sub-text {
        margin-right: 0;
    }

    .slide.slide04 .slide__figure {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        translate: unset;
    }

    .slide.slide04 header.slide__header {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        translate: unset;
        margin: auto;
        margin-bottom: 0;
    }

    .slide.slide04 .slide__title .title-line {
        width: 32vw;
        min-width: 100px;
        max-width: 180px;
        margin: auto;
        margin-bottom: 20px;
    }

    .slide.slide04 .sp-point-section .slide__title .title-line {
        width: 100%;
        max-width: unset;
        min-width: unset;
        margin: auto;
    }

    .slide.slide04 .sp-point-section .slide__title .title-line img {
        filter: grayscale(0%) !important;
        max-width: 600px;
        margin: auto;
    }

    .slide.slide04 .sp-point-section header.slide__header {
        margin: auto;
    }

    .scroll_down a {
        font-size: 10px;
    }

    .scroll_down:before {
        left: -3px;
        width: 7px;
        height: 7px;
    }

    .scroll_down:after {
        width: 1px;
        height: 100px;
    }

    @keyframes circlemove {
        0% {
            bottom: 100px;
        }

        100% {
            bottom: 0px;
        }
    }

    .slide__img_box {
        max-width: 600px;
        margin: auto;
    }

    /*-------------------------
    タワー名
    -------------------------*/
    .ttl-container {
        flex-direction: column;
    }

    .ttl-title-box {
        margin: 0px;
        margin-bottom: 10px;
    }

    .ttl-title-box h2 {
        width: 32vw;
        min-width: 100px;
        max-width: 180px;
    }

    .ttl-img {
        width: 100%;
    }

    p.ttl-sub-text {
        font-size: min(2.13vw, 12px);
    }

    p.aerial-text {
        bottom: 5px;
        left: 5px;
        font-size: min(2.13vw, 12px);
        text-shadow: 0px 0px 4px rgb(0 0 0 / 80%);
    }

    /*-------------------------
    特徴
    -------------------------*/
    .slide__title {
        margin-bottom: 14px;
    }

    p.point-info {
        opacity: 0;
        transition: all .5s;
        font-size: min(2.13vw, 12px);
    }

    .slide.slide04 p.point-info {
        padding: 0;
    }

    .slide.slide04.is-active p.point-info {
        opacity: 1;
        transition: all 2s ease;
        transition-delay: 2.5s;
    }

    /*-------------------------
    歴史
    -------------------------*/
    section.history-section .main-container {
        padding: 60px 0 0;
    }

    .history-container {
        width: 100%;
        margin: auto;
    }

    .history-text {
        left: 50%;
        translate: -50% 0;
        margin: 0;
    }

    .history-text p {
        font-size: min(3.73vw, 16px);
        line-height: 2;
        padding: 90px 0 60px;
    }

    .history-text h3 {
        font-size: min(6.4vw, 26px);
        padding: 90px 20px 60px;
    }

    .history-deco {
        position: relative;
        z-index: -1;
        width: 100%;
        height: auto;
        translate: 0 -10%;
    }

    .history-deco img {
        width: 140%;
        object-position: bottom right;
        translate: -30% -10%;
    }

    p.history-deco-sub {
        bottom: 8%;
        translate: 10px 0;
    }

    .history-deco.anime {
        translate: 0 0;
    }

    /*-------------------------
    コンセプト
    -------------------------*/
    section.concept-section .main-container {
        margin: 40px auto 40px;
        width: 100%;
    }

    img.imperial-icon {
        width: min(10%, 60px);
    }

    .concept-title h2 {
        margin: 14px 0 10px;
        font-size: min(18.67vw, 80px);
    }

    .concept-title h2 img {}

    .concept-title p {
        font-size: min(3.73vw, 14px);
    }

    .concept-text {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 60px;
    }

    h3.concept-title-text {
        font-size: min(6.4vw, 26px);
    }

    p.concept-sub-text {
        font-size: 18px;
        line-height: 2;
        margin: 0;
        margin-right: 20px;
        font-size: min(4.8vw, 20px);
        white-space: nowrap;
    }

    .concept-detail-text p {
        font-size: min(3.73vw, 16px);
        line-height: 2;
        white-space: nowrap;
    }

    .concept-map {
        width: 100%;
        margin-top: 50px;
    }

    .maps-icon.map-mark01 {
        top: 14.5%;
        left: 4%;
        width: 16%;
    }

    .maps-icon.map-mark02 {
        top: 60%;
        left: 36.1%;
        width: 16%;
    }

    .maps-icon.map-mark03 {
        top: 35.5%;
        left: 39.2%;
        width: 16%;
    }

    .maps-icon.map-mark04 {
        top: 12.5%;
        left: 31%;
        width: 36%;
    }


    .light {
        left: 48.5%;
        top: 2%;
    }

    .concept-map p.ttl-sub-text {
        margin-right: 2.5%;
    }

    .concept-map.active .maps-icon.map-mark01 {
        transition-delay: 0s;
    }

    .concept-map.active .maps-icon.map-mark02 {
        transition-delay: .5s;
    }

    .concept-map.active .maps-icon.map-mark03 {
        transition-delay: 1.5s;
    }

    .concept-map.active .maps-icon.map-mark04 {
        transition-delay: 3.5s;
    }

    .concept-map.active .light {
        opacity: 1;
        animation: light 2.5s ease-out forwards;
        animation-delay: 2.5s;
    }

    @keyframes light {
        0% {
            width: 36vw;
            height: 36vw;
            transform: scale(0.2);
            opacity: 1;
        }

        40% {
            transform: scale(2);
            opacity: 1;
        }

        100% {
            width: 36vw;
            height: 36vw;
            transform: scale(1);
            opacity: 1;
        }
    }

    .concept-ttl {
        display: flex;
        width: 95%;
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    p.ttl-sub-text.concept-info {
        margin-top: 8px;
    }

    /*-------------------------
    会員募集ボタン
    -------------------------*/
    a.members-btn {
        padding: 1em 0em;
        width: 100%;
        min-width: unset;
        max-width: 450px;
    }

    a.members-btn span {
        font-size: min(3.73vw, 20px);
    }

    .members-btn-container {
        padding: 40px 2.5%;
    }

    p.members-btn-detail {
        width: 90%;
        font-size: min(3.2vw, 14px);
        margin: auto;
        margin-top: 20px;
    }

    a.outline-btn {
        padding: 2em 0em;
        width: 100%;
        min-width: unset;
        max-width: 450px;
        font-size: min(3.2vw, 14px);
    }


    /*-------------------------
    footer
    -------------------------*/
    .footer {
        padding: 40px 0 0;
    }

    .footer_about {
        margin: 0 auto 80px;
    }

    .footer_about h6 {
        font-size: min(3.2vw, 14px);
    }

    a.footer_about-tel {
        font-size: min(9.33vw, 40px);
        margin: 0 0 20px;
    }

    .footer_about-tel i {
        width: 13.33vw;
        min-width: 45px;
        max-width: 60px;
    }

    .footer_about p {
        font-size: min(3.2vw, 14px);
        margin: 0 0 30px;
    }

    .footer_about-bnr {
        width: 88%;
        margin: 30px auto 0;
    }

    .t_inner {
        width: 88%;
    }

    .footer_company {
        display: block;
        margin: 0 0 80px;
    }

    .footer_company-item {
        display: block;
    }

    .footer_company-item:first-child {
        margin: 0 0 40px;
    }

    .footer_company-item p {
        font-size: min(3.73vw, 16px);
        margin: 0 0 15px;
        text-align: center;
    }

    .p_escon {
        width: 234px;
        margin: 0 auto;
    }

    .footer_bnr {
        display: block;
        margin: 0 0 50px;
    }

    .footer_bnr-item {
        display: block;
        width: 90%;
        margin: 0 auto 10px;
    }

    .t_caption {
        font-size: min(3.2vw, 14px);
        width: 88%;
        margin: 0 auto 50px;
    }
}

@media (max-width: 375px) {

    h3.concept-title-text {
        font-size: 6.4vw;
    }

    p.concept-sub-text {
        font-size: 4.8vw;
    }

    .concept-detail-text p {
        font-size: 3.73vw;
    }
}

@media (min-width: 1700px) {

    .history-deco img {}
}