/*--------------------------TOP　CSS----------------------------*/

@charset "UTF-8";

.page-thxdia {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.page-thxdia .container {
    box-sizing: border-box;
    width: 1099px;
    max-width: 100%;
}

.page-thxdia .slide-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;

}

.pages.page-thxdia h1 {
    margin-top: 8%;
    margin-bottom: 6%;
}

.pages.page-thxdia h1 span{
    max-width: 480px;
    margin: 0 auto;
}

.pages.page-thxdia h1 img{
	width: 100%;
}


@media screen and (max-width: 1099px) and (min-width: 768px){
   .page-thxdia .container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

}

.pages.page-thxdia .pc{
    display: block;
}

.pages.page-thxdia .sp{
    display: none;
}

/*---------------------------Aタイプ 高さ----------------------------*/
.pages.page-thxdia .a-type > .thxdia-ttl {
    display: flex;
    align-items: center;
    margin-top: 100px;
}

.pages.page-thxdia .a-type > .thxdia-ttl:first-of-type{
    margin-top: 0;
}



/*---------------------------TD_link.html----------------------------*/
.pages.page-thxdia .slideshow {
    display: flex;
    align-items: stretch;
}

.pages .thxdia-ttl.slideshow > div:first-child {
    padding-left: 0px;
}

.pages.page-thxdia .slideshow_img {
    width: 46%;
}



/*---------------------------ふわっと切り替え----------------------------*/
.pages.page-thxdia .slideshow_img {
    position: relative;
}

.pages.page-thxdia .slideshow_img .design_img {
    display: block;
    width: 100%;
    opacity: 0;
    animation: fadeAnimation var(--slide-time) infinite;
}

.pages.page-thxdia .slideshow_img .design_img:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
}


@keyframes fadeAnimation {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    65% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}



/*---------------------------Bタイプ----------------------------*/
.pages.page-thxdia .b-type .thxdia-ttl.slideshow {
        display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 50px;
}

.page-thxdia .b-type .link_area{
    margin-top: 20%;
    padding: 0 20px;
}

.page-thxdia .b-type .link_area:last-of-type{
    margin-bottom: 30%;
}



/*--------------------------- Bタイプ：左画像----------------------------*/
.pages.page-thxdia .b-type .b-type-left {
    width: 46%;
    padding-left: 0;
}

.pages.page-thxdia .b-type .b-type-left img {
    display: block;
    width: 100%;
    height: auto;
}



/*---------------------------Bタイプ：右スライド----------------------------*/
.pages.page-thxdia .b-type .link-slideshow {
    position: relative;
    width: 36.5%;
    padding-left: 0;
}

.pages.page-thxdia .b-type .link-slideshow .design_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pages.page-thxdia .b-type .link-slideshow .design_img:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
}


/*---------------------------スライド----------------------------*/
.pages.page-thxdia .slideshow_img {
    position: relative;
}

.pages.page-thxdia .slideshow_img .design_img {
    display: block;
    width: 100%;
    opacity: 0;
    animation: fadeAnimation var(--slide-time) infinite;
}

.pages.page-thxdia .slideshow_img .design_img:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
}


@keyframes fadeAnimation {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


.pages.page-thxdia .b-type h3{
    text-align: center;
    font-size: 22px;
    margin-top: 3%;
    color: #2c2d65;  
    margin-bottom: 22px;  
}

.pages.page-thxdia .b-type p{
    text-align: center;
    font-size: 14px;
    font-family: "Noto Serif JP";
    line-height: 2;
    color: #4d4d4d;
    margin: 14px 0;
}


.pages.page-thxdia .thxdia-ttl h2{
    font-size: 24px;
    text-align: left;
    color: #2c2d65;
    line-height: 1.5;
    margin-bottom: 5%;
    margin-top: 80px;
}

.pages.page-thxdia .thxdia-ttl p{
    font-family: "Noto Serif JP";
    font-size: 14px;
    line-height: 24px;
    color: #2c2d65;
    width: 98%;
    margin-bottom: 0;
}



/*---------------------------流し続いている画像----------------------------*/
.page-thxdia .thxdia_link_btn h3{
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 20%;
    color: #777777;
    text-decoration: underline;
}

.image-carousel {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* iPhone / Safari対策 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
}

.image-carousel::-webkit-scrollbar {
    display: none;
}

.image-carousel-inner {
    display: flex;
    gap: 20px;
    width: max-content;
    will-change: transform;
}

/* PC */
.image-carousel-inner a {
    display: block;
    flex: 0 0 calc((100vw - 60px) / 4);
}

.image-carousel-inner img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================
   SP
========================= */

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

    .image-carousel-inner {
        gap: 10px;
    }

    .image-carousel-inner a {
    display: block;
    flex: 0 0 calc((100vw - 10px) / 1.5);
    -webkit-user-drag: none;
}

.image-carousel-inner img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
}

/* =================================
   iPhone シーン別自動スクロール
================================= */

@keyframes iphoneSceneScroll {

    from {
        transform: translateX(var(--carousel-start));
    }

    to {
        transform: translateX(
            calc(
                var(--carousel-start)
                + var(--carousel-distance)
            )
        );
    }

}


.image-carousel.iphone-auto-scroll
.image-carousel-inner {

    animation:
        iphoneSceneScroll
        var(--carousel-duration)
        linear
        infinite;

    will-change: transform;

}

.image-carousel.iphone-auto-scroll {
    overflow: hidden;
    touch-action: pan-y;
}

}




/*---------------------------TD_link.html----------------------------*/
.page-thxdia .thxdia_link{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 90px;
    max-width: 700px;
}

.page-thxdia .thxdia_link > div {
    width: calc((100% - 40px) / 3);
    text-align: center;
}

.page-thxdia .thxdia_link .thxdia_link_btn{
    padding: 18px 10px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    max-width: 224px;
    text-decoration: none;
    color: #2c2d65;
    border: solid 1px #2c2d65;
    border-radius: 2.2px;
    transition: .4s;
    text-align: center;

}

.page-thxdia .thxdia_link .thxdia_link_btn:hover{
    background: #2c2d65;
    color: white;
    opacity: 1;
}

.page-thxdia .link_area .thxdia_link{
    margin-top: 16%;
}

.pages.page-thxdia .slideshow_img {
    position: relative;
}

.pages.page-thxdia .slideshow_img_sec img:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    animation: imageSwitch 9s infinite;
}

.pages.page-thxdia .slideshow_img_sec img:nth-child(1) {
    animation-delay: 0s;
}

.pages.page-thxdia .slideshow_img_sec img:nth-child(2) {
    animation-delay: 3s;
}

.pages.page-thxdia .slideshow_img_sec img:nth-child(3) {
    animation-delay: 6s;
}

@keyframes imageSwitch {
    0% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    33.33% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.page-thxdia .thxdia_link_title h2{
    font-size: 24px;
    color: #2c2d65;
    line-height: 1.5;
    font-family: "Noto Serif JP";
    margin-bottom: 2%;
}

.page-thxdia .tab{
        display: none;
    }

.thxdia_link_title_scene{
    margin-top: 14%;
}


/* ========================================
    タブレット
======================================== */

@media screen and (max-width: 880px){
	.page-thxdia .tab{
        display: block;
    }

}

/* ========================================
    SP
======================================== */

@media screen and (max-width: 767px){
    .page-thxdia .container {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .pages.page-thxdia h1 {
        margin-top: 20%;
    }
    .pages.page-thxdia h1 span{
        max-width: none;
        width:  84%;
    }
	
    .pages.page-thxdia .pc{
        display: none;
    }

    .pages.page-thxdia .sp{
        display: block;
    }

     .pages.page-thxdia .top01{
        margin-top: 14%;
     }

    .pages.page-thxdia .a-type > .thxdia-ttl{
        display: flex;
    }

    .pages .thxdia-ttl.slideshow > div:first-child{
        width: 94%;
        margin: 0 auto;
    }

    .pages .thxdia-ttl.slideshow > div:nth-child(2){
        width: 94%;
        margin: 0 auto;
    }

    .page-thxdia .thxdia_link_title h2{
        margin-top: 24%;
    }

    .page-thxdia .thxdia_link{
        gap: 10px;
        width: 100%;
    }

    .page-thxdia .thxdia_link > div{
            width: 48%;
    }

    .page-thxdia .thxdia_link .thxdia_link_btn{
        max-width: none;
    }

    .pages.page-thxdia .b-type .thxdia-ttl.slideshow{
        display: block;
    }

    .pages.page-thxdia .b-type .b-type-left{
        width: 94%;
        margin: 0 auto;
    }

    .pages.page-thxdia .thxdia-ttl p{
        width: 96%;
        margin: 0 auto;
    }

    .b-type-left_txt{
        margin: 10% 0 12%!important;
    }

    .pages.page-thxdia .b-type .link-slideshow{
        width: 75%;
        margin: 0 auto;
    }

    .page-thxdia .b-type .link_area{
        margin-top: 30%;
        padding: 0;
    }

    .pages.page-thxdia .thxdia-ttl h2{
        margin-top:  6%;
        margin-bottom: 4%;
        font-size: 20px;
        text-align: center;
    }

    .pages.page-thxdia .flex > *, .pages.page-thxdia .flex_ > *{
        margin-bottom: 0;
    }

    .page-thxdia .slide-container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        margin-top: 7%;
    }

    .page-thxdia .thxdia_link_btn h3{
            margin-bottom: 34%;
    }

    .page-thxdia .link_area .thxdia_link{
        margin-top: 32%;
    }

}