@charset "UTF-8";

/* =============================================================================
   トップページ専用CSS（ページID: 69）
   ============================================================================= */


/* =============================================================================
   ベースレイアウト
   ============================================================================= */

.top #content.l-content {
    margin: 0 auto;
    padding-top: 0;
}

/* 明朝体フォント（トップページの見出し等で使用） */
main .entry-content .mincho,
.post_content .mincho {
    font-family: "Zen Old Mincho", serif;
    line-height: 2em;
    font-weight: 900;
    font-size: 18px !important;
}

@media screen and (min-width: 960px) {
    .post_content .mincho {
        font-size: 32px !important;
    }
}

/* ヘッダー背景（トップページは薄青、他ページは白 → global.css で定義） */
.l-header {
    background-color: #EAF1F5;
}


/* =============================================================================
   ロゴスライダー（Infinite Logo Carousel プラグイン）
   ============================================================================= */

.wp-block-infinite-logo-carousel-block-carousel {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* dbw スライダー（右方向） */
.dbw-slider-wrapper {
    transform: scaleX(-1);
}

.dbw-slider-wrapper img {
    transform: scaleX(-1);
}

/* slider2 / slider3（右スクロール） */
.slider-wrapper {
    display: flex;
    margin-bottom: 1em;
}

.slider2,
.slider3 {
    animation: scroll-right_sp 50s infinite linear 0.5s both;
    display: flex;
}

.slider2 li,
.slider3 li {
    list-style: none;
    gap: 8px;
}

.slide2,
.slide3 {
    display: grid;
    place-items: center;
    width: 100px;
    flex-shrink: 0;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.slide2 img,
.slide3 img {
    display: block;
    width: 100px;
    height: 40px;
    object-fit: contain;
}

@media screen and (min-width: 960px) {
    .slide2,
    .slide3 {
        width: 200px;
    }

    .slide2 img,
    .slide3 img {
        width: 200px;
        height: 80px;
    }

    .slider2,
    .slider3 {
        animation: scroll-right_pc 50s infinite linear 0.5s both;
    }
}

@keyframes scroll-right_pc {
    from { transform: translateX(-1400px); }
    to   { transform: translateX(0%); }
}

@keyframes scroll-right_sp {
    from { transform: translateX(-700px); }
    to   { transform: translateX(0%); }
}


/* =============================================================================
   実績スライダー（left_loop — 左流れ）
   ============================================================================= */

div.left_loop ul {
    width: fit-content;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    transform: translateZ(0);
    height: 176px;
    animation: left-scroll 50s linear infinite;
}

@media screen and (min-width: 960px) {
    div.left_loop ul {
        height: 325px;
    }
}

div.left_loop ul li {
    flex: 0 0 256px;
    height: 182px;
    background-color: #ffffff;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-left: 16px;
    list-style: none;
}

@media screen and (min-width: 960px) {
    div.left_loop ul li {
        flex: 0 0 464px;
        height: 320px;
        margin-left: 32px;
    }
}

div.left_loop ul li > img {
    width: 100%;
    height: 144px;
    object-fit: cover;
}

@media screen and (min-width: 960px) {
    div.left_loop ul li > img {
        height: 260px;
    }
}

div.left_loop ul li p {
    height: 32px;
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 960px) {
    div.left_loop ul li p {
        height: 56px;
        font-size: 18px;
    }
}

div.left_loop ul li p img {
    height: 32px;
    max-width: 150px;
    object-fit: contain;
}

@media screen and (min-width: 960px) {
    div.left_loop ul li p img {
        height: 52px;
        max-width: 180px;
    }
}

@keyframes left-scroll {
    0%   { transform: translateX(-25%); }
    100% { transform: translateX(-75%); }
}


/* =============================================================================
   NEWSセクション
   ============================================================================= */

.swell-block-tab.top_news .p-postList__title {
    margin-top: 24px !important;
}

@media screen and (max-width: 959px) {
    .swell-block-tab.top_news .p-postList__title {
        margin-top: 8px !important;
    }
}

@media screen and (min-width: 600px) {
    .top_news .c-tabBody {
        padding: 2em 0;
    }
}

.top_news_btn {
    height: 50px;
}

.top_news_btn_sp a {
    border-radius: 24px !important;
}

.swell-block-tab.top_news > ul.c-tabList {
    border-bottom: 0.5px solid #CFE9F5;
    width: 100%;
}

/* NEWS一覧：各アイテムに下線（最後を除く） */
.swell-block-tab.top_news .p-postList > .p-postList__item {
    border-bottom: 0.5px solid #CFE9F5;
    padding-bottom: 20px;
}

.swell-block-tab.top_news .p-postList > .p-postList__item:last-child {
    border-bottom: none;
}

/* カテゴリ別バッジカラー */
[data-cat-id="10"] { background-color: #D79E3B; } /* 能楽堂 */
[data-cat-id="8"]  { background-color: #3BA6D7; } /* econowa */
[data-cat-id="9"]  { background-color: #126CB1; } /* news */

/* SP：NEWSセクション */
@media screen and (max-width: 959px) {
    .post_content .is-style-section_ttl.h2_news {
        margin: 0 auto;
        width: fit-content;
        font-size: 40px;
    }

    .post_content .is-style-section_ttl.h2_news::before {
        left: auto !important;
        right: -5px;
        top: 18px;
        height: 16px;
        width: fit-content;
    }

    .top_news.swell-block-tab {
        margin-bottom: 0;
    }

    /* SP では非表示 */
    .top_news .c-tabList,
    .top_news .p-postList__cat,
    .top_news .p-postList__excerpt,
    .news .swell-block-tab::after {
        display: none;
    }

    .top_news.is-style-default .c-tabBody {
        border: none;
        padding: 0;
    }

    /* SP では3件まで表示 */
    .top_news .p-postList__item:nth-of-type(4),
    .top_news .p-postList__item:nth-of-type(5) {
        display: none;
    }

    .top_news .p-postList .p-postList__item {
        border-bottom: 0.5px solid #ddd;
    }

    .top_news .p-postList .p-postList__item:nth-of-type(3) {
        border: none;
    }

    .top_news_btn_sp {
        margin-top: 30px;
    }

    .spbtn {
        width: 200px;
        height: 1.1rem;
    }
}


/* =============================================================================
   Companyセクション
   ============================================================================= */

.company .swell-block-fullWide__inner,
.company .swell-block-columns,
.company .swell-block-columns__inner {
    height: 100%;
}

.company h3 {
    font-weight: normal;
    letter-spacing: 1.12;
    font-size: 28px;
    line-height: 2em;
}

.company p {
    letter-spacing: 1.12;
    line-height: 2em;
}

.company .btn_frame_anime_white a,
.company_sp_btn a {
    font-size: 11px;
    width: fit-content;
}

.company video,
.company_video video {
    border-radius: 25px;
}

.top_company_btn a,
.company_sp_btn a {
    background-color: #fff;
    color: #3BA6D7;
    border-radius: 24px;
}

/* PC：背景画像あり */
.swell-block-fullWide.has-bg-img.company {
    background-size: 100% !important;
    height: 45vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swell-block-fullWide.has-bg-img.company .swell-block-fullWide__inner {
    transform: translateY(-15%);
}

/* SP：背景画像あり */
.swell-block-fullWide.has-bg-img.company_sp {
    background-size: contain;
    min-height: 100vw;
    margin-top: 50px;
    display: flex;
    align-items: center;
    transform: translateY(120px);
}

.swell-block-fullWide.company_sp .swell-block-fullWide__inner {
    transform: translateY(-40px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 70vw;
    width: 100%;
}

.swell-block-fullWide.has-bg-img.sp_only video {
    width: calc(100% - 20px);
    max-width: 400px;
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
}

.post_content .company_sp figure {
    margin-bottom: 22px;
}

.post_content .company_sp h3 {
    margin: 0 0 12px;
    font-size: 18px !important;
    line-height: 2em;
    letter-spacing: 0.12em;
    font-weight: normal;
}

.post_content .company_sp p {
    margin: 0 0 21px;
    font-size: 12px !important;
    line-height: 2em;
    letter-spacing: 0.12em;
    font-weight: normal;
}


/* =============================================================================
   Serviceセクション
   ============================================================================= */

@media screen and (max-width: 959px) {
    .service.swell-block-fullWide {
        margin-top: 0;
    }

    .post_content .is-style-section_ttl.h2_service {
        margin: 0 auto;
        width: fit-content;
        font-size: 40px;
        margin-top: 60px !important;
    }

    .post_content .is-style-section_ttl.h2_service::before {
        left: auto !important;
        right: 8px;
        top: 18px;
        height: 16px;
        width: 78px;
    }

    .post_content .service h3.is-style-section_ttl {
        text-align: center;
    }

    .post_content .service h3.is-style-section_ttl span {
        font-size: 20px !important;
    }

    .service p {
        word-break: normal;
        line-break: strict;
    }
}


/* =============================================================================
   SNSセクション
   ============================================================================= */

/* 横マーキー（SNSタイトル） */
.sns_loop {
    display: flex;
    animation: marquee 15s linear infinite;
}

.sns_loop img {
    margin-left: 15px;
}

@keyframes marquee {
    from { transform: translateX(-25%); }
    to   { transform: translateX(-125%); }
}

.sns_wrapper .swell-block-columns__inner {
    justify-content: space-around;
    align-items: center;
    padding-top: 50px;
}

.sns_wrapper .swell-block-columns__inner .top_ig {
    width: 340px;
}

.sns_wrapper .swell-block-columns__inner .top_yt {
    width: 390px;
}

/* SNSセクション背景 */
.sns.swell-block-fullWide {
    position: relative;
    overflow: hidden; /* visible→hidden：::before(height:500vw/100vw)による下余白を防ぐ */
}

/* NOTE: 本番公開時は URL を rocksss.xsrv.jp/kani/... に変更してください */
.sns.swell-block-fullWide::before {
    content: "";
    background-image: url("http://localhost:8888/tiplushd/wp-content/uploads/2025/10/page-company_bg_sp-1.svg");
    width: 100%;
    height: 500vw;
    position: absolute;
    background-position: 0% 0%;
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (min-width: 960px) {
    .sns.swell-block-fullWide::before {
        background-image: url("http://localhost:8888/tiplushd/wp-content/uploads/2025/10/sns_bg.svg");
        height: 100vw;
    }
}

/* Instagramウィジェット */
.sns_wrapper .sbi {
    background-color: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 8px 20px !important;
    position: relative;
}

/* NOTE: 本番公開時は URL を変更してください */
.sns_wrapper .sbi::before {
    content: url("http://localhost:8888/tiplushd/wp-content/uploads/2025/10/IG_logo.png");
    position: absolute;
    width: 150px;
    height: 30px;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width: 960px) {
    .sns_wrapper .sbi::before {
        left: 4px;
        transform: translateX(0);
    }
}

/* YouTubeウィジェット */
.sns_wrapper .sns_yt {
    position: relative;
}

/* NOTE: 本番公開時は URL を変更してください */
.sns_wrapper .sns_yt::before {
    content: url("http://localhost:8888/tiplushd/wp-content/uploads/2025/10/YT_logo.png");
    position: absolute;
    width: 94px;
    height: 20px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width: 960px) {
    .sns_wrapper .sns_yt::before {
        left: 4px;
        transform: translateX(0);
    }
}

.sns_icons3 {
    justify-content: center;
    align-items: center;
    margin-top: 36px !important;
}

.sns_icons3 > figure.wp-block-image {
    margin: 0 1em;
}

/* SNS見出し（SP専用） */
.sns_h2.sp_only {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.5em;
    color: #d9d9d9;
    text-align: left;
    margin-top: 0;
}

.sns_h2.sp_only span {
    color: #126CB1;
}

/* SP：SNS背景 */
@media screen and (max-width: 959px) {
    /* NOTE: 本番公開時は URL を変更してください */
    .swell-block-fullWide.has-bg-img.sns {
        background-image: url("http://localhost:8888/tiplushd/wp-content/uploads/2025/11/背景とロゴ.png") !important;
        background-size: contain !important;
        background-position-y: 0% !important;
        background-repeat: no-repeat !important;
    }

    .sns .sns_icons3 figure {
        margin: 0 12px;
    }

    .sns .sns_icons3 img {
        width: 24px !important;
    }
}


/* =============================================================================
   フッター直前エリア
   ============================================================================= */

.footer_before_left {
    max-width: 400px;
}

.footer_before > .swell-block-columns__inner {
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 960px) {
    .footer_before_right .swell-block-column,
    .footer_before_right .swell-block-column p {
        width: fit-content;
    }
}