/* 共通スタイル */
#swiper .swiper {
    width: 100%;
}

#swiper .swiper-slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    position: relative;
}

#swiper #top .titlebox {
        z-index: 2;
        left: 0;
        color: #fff;
        text-align: center;
}

#swiper .titlebox .tinbox a {
        list-style: none;
        background: #b32c29;
        color: #fff;
        display: inline-block;
        letter-spacing: 0;
        vertical-align: middle;
}

#swiper .swiper-slide img {
    height: auto;
    width: 100%;
}

#swiper .swiper-pagination-bullet {
    background-color: rgb(149, 0, 0);
    height: 8px;
    width: 8px;
}

#swiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
#swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px -0.1vw;
}

    #swiper #news .titlebox,
    #swiper #news .titlebox0 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #2d2d2d;
        float: left;
        z-index: 2;
        display: flex;
        align-items: center;
    }

        #news .titlebox hr,
    #news .titlebox0 hr {
        margin: 0.8em 0;
        border-color: #cdcdcd;
    }

/* PC版スタイル（画面幅750px以上） */

/* トップエリア */
@media screen and (min-width: 750px) {
    #swiper .swiper-slide-active {
        background-repeat: no-repeat;
    }

    #swiper #top .titlebox {
        top: 50%;
        font-size: 2em;
        font-weight: bold;
        letter-spacing: 0.1em;
        line-height: 1.6em;
        margin: -120px 0 0 0;
        width: 100%;
    }
        #swiper .titlebox .tinbox a {
        font-size: 70%;
        margin-top: 50px;
        line-height: 1;
        
        padding: 17px 45px;
}

    #swiper #top .swiper-slide::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(114, 114, 114, 0.3);
        filter: blur(4px);
        z-index: 1;
        transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out;
    }

    #swiper #top .swiper-slide:hover::before {
        background-color: rgba(207, 207, 207, 0);
        filter: blur(0px);
    }

    #swiper #top .titlebox {
        position: absolute;
    }

    #swiper #top .tinbox {
        animation-delay: 0.3s;
        animation-duration: 0.5s;
        animation-fill-mode: both;
        animation-name: fadeIn;
    }

    #swiper #top .swiper {
        height: 600px;
    }

    #top .swiper-button-prev {
        left: 20px;
    }

    #top .swiper-button-next {
        right: 20px;
    }

    #top .swiper-button-prev:after {
        content: '＜';
        font-size: 44px;
        color: #f3f3f3;
        font-weight: bold;
    }

    #top .swiper-button-next:after {
        content: '＞';
        font-size: 44px;
        color: #f3f3f3;
        font-weight: bold;
    }

    /* ニュースエリア */
    #swiper #news {
        margin-top: 110px;
        text-align: center;
        z-index: 0;
    }

    #swiper #news .swiper {
        height: 340px;
    }

    #swiper #news .titlebox {
        width: 60%;
        min-width: 900px;
        max-width: 1600px;
        letter-spacing: 0.1em;
        line-height: 1.4em;
        font-size: 1.4em;
    }

    #swiper #news .titlebox0 {
        width: 60%;
        min-width: 1000px;
        max-width: 1600px;
        letter-spacing: 0.1em;
        line-height: 1.4em;
        font-size: 1.4em;
    }
    #news .my-box {
        padding-left: 40px;
        float: left;
        width: calc(100% - var(--news-thumbnail-width) - 40px);
        height: 100%;
        z-index: -1;
        align-items: center;
        font: inherit;
        font-size: inherit;
        font-family: inherit;
    }

    #swiper #news .news-title {
        font-size: 1.1em;
        text-align: left;
        font-weight: bold;
    }

    #swiper #news .news-desc {
        margin-top: 5px;
        margin-bottom: 10px;
        text-align: left;
        color: inherit;
    }

    #swiper #news .news-desc p {
        font-size: 0.7em;
        text-align: left;
        font-weight: bold;
    }

    /* カスタム */
    body {
        --news-thumbnail1-width: 320px;
        --news-thumbnail2-width: 150px;
        --news-thumbnail3-width: 700px;
        --news-thumbnail5-width: 150px;
        --news-thumbnail6-width: 180px;
        --news-thumbnail7-width: 40px;
        --slide-content-height: 150px;
    }

    #news .news-thumbnail1 {
        width: var(--news-thumbnail1-width) !important;
        height: 100%;
        float: left;
    }

    #news .news-thumbnail2 {
        width: var(--news-thumbnail2-width) !important;
        float: left;
    }

    #news .news-thumbnail3 {
        width: var(--news-thumbnail3-width);
        margin-left: calc(50% - calc(var(--news-thumbnail3-width)/2));
        float: left;
    }

    #news .news-thumbnail5 {
        width: var(--news-thumbnail5-width) !important;
        float: left;
    }

    #news .news-thumbnail6 {
        width: var(--news-thumbnail6-width) !important;
        height: 100%;
        float: left;
    }
    #news .news-thumbnail7 {
        margin: 0 20px;
        width: var(--news-thumbnail7-width) !important;
    }

    #swiper .news-box0 {
        width: 90%;
    }

    #news .news-box1 {
        width: calc(100% - var(--news-thumbnail1-width) - 40px);
    }

    #news .news-box2 {
        width: calc(100% - var(--news-thumbnail2-width) - 40px);
    }

    #news .news-box3 {
        width: 60%;
    }

    #news .news-box5 {
        width: calc(100% - var(--news-thumbnail5-width) - 40px);
    }

    #news .news-box6 {
        width: calc(100% - var(--news-thumbnail6-width) - 40px);
    }

    #news .news-box7 {
        width: calc(100% - var(--news-thumbnail7-width) - 40px);
    }


    #news .center {
        display: flex;
        justify-content: center;
    }

    /* 矢印 */
    #news .swiper-button-prev {
        left: 100px;
    }

    #news .swiper-button-next {
        right: 100px;
    }

    #news .swiper-button-prev:after {
        content: '＜';
        font-size: 28px;
        color: #7c7c7c;
        font-weight: bold;
    }

    #news .swiper-button-next:after {
        content: '＞';
        font-size: 28px;
        color: #7c7c7c;
        font-weight: bold;
    }

        .news-right-arrow {
        padding: 8px 40px 8px 4px !important;
        font-style: normal !important;
        color: #2084d4 !important;
        font-weight: 600 !important;
        font-size: 0.6em !important;
        float: left !important;
        background: url(/takeuchi/images/right_arrow.svg) 93% 50% no-repeat !important;
        background-size: 30px !important;
        margin-top: -5px !important;
    }

        .news-right-arrow1 {
        padding: 10px 40px 8px 4px !important;
        font-style: normal !important;
        color: #2084d4 !important;
        font-weight: 600 !important;
        font-size: 1.1em !important;
    }
}

/* スマートフォン版スタイル（画面幅750px以下） */

/* トップエリア */
@media screen and (max-width: 750px) {

    #swiper #top .titlebox {
        top: 50%;
        font-size: 1.2em;
        font-weight: bold;
        letter-spacing: 0.1em;
        line-height: 1.6em;
        margin: -40px 0 0 0;
        width: 100%;
    }

    #swiper .titlebox .tinbox a {
        font-size: 0.4em;
        margin-top: 20px;
        line-height: 0;
        padding: 15px 10px;
    }

    #swiper #top .swiper-slide::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(114, 114, 114, 0.3);
        filter: blur(4px);
        z-index: 1;
        transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out;
    }

    #swiper #top .swiper-slide:hover::before {
        background-color: rgba(207, 207, 207, 0);
        filter: blur(0px);
    }

    #swiper #top .titlebox {
        position: absolute;
    }

    #swiper #top .tinbox {
        animation-delay: 0.3s;
        animation-duration: 0.5s;
        animation-fill-mode: both;
        animation-name: fadeIn;
    }

    #swiper #top .swiper {
        height: 25em;
        min-height: 280px;
    }

    /* ニュースエリア */
    #swiper #news {
        text-align: center;
        z-index: 0;
    }

    #swiper #news .swiper {
    height: 36vh;
    overflow: hidden;
}

    #swiper #news .titlebox {
        width: 95%;
        min-width: 200px;
        letter-spacing: 0.08em;
        line-height: 1.1em;
        font-size: 1.4em;
    }

    #swiper #news .titlebox0 {
        width: 95%;
        min-width: 200px;
        letter-spacing: 0.1em;
        line-height: 1.4em;
        font-size: 1.4em;
    }

    #news .my-box {
        padding-left: 22px;
        float: left;
        width: calc(100% - var(--news-thumbnail-width) - 10px);
        height: 100%;
        z-index: -1;
        align-items: center;
        font: inherit;
        font-size: inherit;
        font-family: inherit;
    }

    #news .my-box0 {
        padding-left: 0px;
        float: left;
        width: calc(100% - var(--news-thumbnail-width) - 10px);
        height: 100%;
        z-index: -1;
        align-items: center;
        font: inherit;
        font-size: inherit;
        font-family: inherit;
    }

    #swiper #news .news-title {
        font-size: 0.8em;
        text-align: left;
        font-weight: bold;
        padding: 0 5px;
    }

    #swiper #news .news-desc {
        margin-top: 5px;
        margin-bottom: 10px;
        text-align: left;
        color: inherit;
    }

    #swiper #news .news-desc p {
        font-size: 0.5em;
        text-align: left;
        font-weight:normal;
    }

 /* カスタム */
    body {
        --news-thumbnail1-width: 6em;
        --news-thumbnail2-width: 4em;
        --news-thumbnail3-width: 19em;
        --news-thumbnail5-width: 5em;
        --news-thumbnail6-width: 6em;
        --news-thumbnail7-width: 29px;
        --slide-content-height: 6em;
    }

    #news .news-thumbnail1 {
        width: var(--news-thumbnail1-width) !important;
        float: left;
    }

    #news .news-thumbnail2 {
        width: var(--news-thumbnail2-width) !important;
        float: left;
    }

    #news .news-thumbnail3 {
        width: var(--news-thumbnail3-width) !important;
        float: left;
    }

    #news .news-thumbnail5 {
        width: var(--news-thumbnail5-width) !important;
        float: left;
    }

    #news .news-thumbnail6 {
        width: var(--news-thumbnail6-width) !important;
        float: left;
    }
    #news .news-thumbnail7 {
        margin: 0 14px;
        width: var(--news-thumbnail7-width) !important;
        float: left;
    }

    #swiper .news-box0 {
        display: flex;
        justify-content: center;
    }

    #news .news-box1 {
        width: calc(100% - var(--news-thumbnail1-width) - 22px);
    }

    #news .news-box2 {
        width: calc(100% - var(--news-thumbnail2-width) - 22px);
    }

    #news .news-box3 {
        width: 60%;
    }

    #news .news-box5 {
        width: calc(100% - var(--news-thumbnail5-width) - 22px);
    }

    #news .news-box6 {
        width: calc(100% - var(--news-thumbnail6-width) - 22px);
    }

    #news .news-box7 {
        width: calc(100% - var(--news-thumbnail7-width) - 22px);
    }

    #news .center {
        display: flex;
        justify-content: center;
    }

    #swiper .swiper-pagination-bullet {
        background-color: rgb(149, 0, 0);
        height: 6px;
        width: 6px;
    }

    #swiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    #swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 3px -10px;
}
    #news .titlebox hr,
    #news .titlebox0 hr {
        margin: 0.6em 0;
        border-color: #cdcdcd;
    }

        .news-right-arrow {
        padding: 8px 40px 8px 4px !important;
        font-style: normal !important;
        color: #2084d4 !important;
        font-weight: 600 !important;
        font-size: 0.6em !important;
        float: left !important;
        background: url(/takeuchi/images/right_arrow.svg) 93% 50% no-repeat !important;
        background-size: 30px !important;
        margin-top: -5px !important;
    }
      .news-right-arrow1 {
        padding: 10px 40px 8px 4px !important;
        font-style: normal !important;
        color: #2084d4 !important;
        font-weight: 600 !important;
        font-size: 1.1em !important;
      }
}

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

    #swiper #top .titlebox {
        top: 50%;
        font-size: 1.2em;
        font-weight: bold;
        letter-spacing: 0.1em;
        line-height: 1.6em;
        margin: -40px 0 0 0;
        width: 100%;
    }

    #swiper #top .swiper-slide::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(114, 114, 114, 0.3);
        filter: blur(4px);
        z-index: 1;
        transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out;
    }

    #swiper #top .swiper-slide:hover::before {
        background-color: rgba(207, 207, 207, 0);
        filter: blur(0px);
    }

    #swiper #top .titlebox {
        position: absolute;
    }

    #swiper #top .tinbox {
        animation-delay: 0.3s;
        animation-duration: 0.5s;
        animation-fill-mode: both;
        animation-name: fadeIn;
    }

    #swiper #top .swiper {
        height: 25em;
        min-height: 280px;
    }

    /* ニュースエリア */
    #swiper #news {
        text-align: center;
        z-index: 0;
    }

#swiper #news .swiper {
    height: auto;
    aspect-ratio: 16/19;
    height: 38vh;
    min-width: 340px;
    margin: 10px 0;
    overflow: hidden;
}

#swiper #news .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

    #swiper #news .titlebox {
        width: 95%;
        min-width: 200px;
        letter-spacing: 0.08em;
        line-height: 1.1em;
        font-size: 1.4em;
    }

    #swiper #news .titlebox0 {
        width: 95%;
        min-width: 200px;
        letter-spacing: 0.1em;
        line-height: 1.4em;
        font-size: 1.4em;
    }

    #news .my-box {
        padding-left: 4px;
        float: left;
        width: calc(100% - var(--news-thumbnail-width) - 10px);
        height: 100%;
        z-index: -1;
        align-items: center;
        font: inherit;
        font-size: inherit;
        font-family: inherit;
    }

    #news .my-box0 {
        padding-left: 0px;
        float: left;
        width: calc(100% - var(--news-thumbnail-width) - 10px);
        height: 100%;
        z-index: -1;
        align-items: center;
        font: inherit;
        font-size: inherit;
        font-family: inherit;
    }

    #swiper #news .news-title {
        font-size: 0.6em;
        text-align: left;
        font-weight: bold;
        padding: 0 5px;
    }

    #swiper #news .news-desc {
        margin-top: 5px;
        margin-bottom: 10px;
        text-align: left;
        color: inherit;
    }

    #swiper #news .news-desc p {
        font-size: 0.5em;
        text-align: left;
        font-weight:normal;
    }

    #news .news-box3 {
        width: 60%;
    }

    #news .news-box1,
    #news .news-box2,
    #news .news-box4,
    #news .news-box5,
    #news .news-box6,
    #news .news-box7 {
        width: 100%;
    }

    #news .news-thumbnail3 {
        width: 16em !important;
        float: left;
    }

    #news .center {
        display: flex;
        justify-content: center;
    }

    #swiper .swiper-pagination-bullet {
    background-color: rgb(149, 0, 0);
    height: 5px;
    width: 5px;
}

    #swiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    #swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 3px -10px;
}
    #news .titlebox hr,
    #news .titlebox0 hr {
        margin: 2px 0;
        border-color: #cdcdcd;
    }
        .news-right-arrow {
        padding: 8px 40px 8px 4px !important;
        font-style: normal !important;
        color: #2084d4 !important;
        font-weight: 600 !important;
        font-size: 0.6em !important;
        float: left !important;
        background: url(/takeuchi/images/right_arrow.svg) 93% 50% no-repeat !important;
        background-size: 30px !important;
        margin-top: -5px !important;
    }
    .news-right-arrow1 {
        padding: 10px 40px 8px 4px !important;
        font-style: normal !important;
        color: #2084d4 !important;
        font-weight: 600 !important;
        font-size: 1.1em !important;
    }
    .under390-display-none{
	display:none !important;
    }
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}