@charset "utf-8";
/* CSS Document */

/* ==================================================
   共通
================================================== */

.case-study {
    margin-bottom: 120px;
}

.case-study img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #fff;
}

.case-study__text {
    flex: 1;
}

.case-study__text h2:first-child {
    margin-top: 0;
}






/* ==================================================
   10：PCサムネイル / SPドット＋スワイプ
================================================== */

.case-study-hybrid-slider {
    width: 100%;
}


/* ========================================
   メイン画像
======================================== */

.case-study-hybrid-slider__viewport {
    width: 70%;
    max-width: 800px;

    margin: 0 ;

    overflow: hidden;

    touch-action: pan-y;
}


.case-study-hybrid-slider__track {
    display: flex;

    transition:
        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);

    will-change: transform;
}


.case-study-hybrid-slider__slide {
    flex: 0 0 100%;
    aspect-ratio: 1 / 1;

    background-color: #fff;

    border: 2px solid  #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
}


.case-study-hybrid-slider__slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ========================================
   PC：サムネイル
======================================== */

.case-study-hybrid-slider__thumbs {
    display: flex;

    justify-content:flex-start;

    gap: 12px;

    margin-top: 25px;
}


.case-study-hybrid-slider__thumb {
    width: 88px;

    aspect-ratio: 1 / 1;

    padding: 2px;

    border: 2px solid transparent;

    box-sizing: border-box;

    background-color: #fff;

    cursor: pointer;

    opacity: 0.55;

    transition:
        opacity 0.2s ease,
        border-color 0.2s ease;
}


.case-study-hybrid-slider__thumb:hover {
    opacity: 0.85;
}


.case-study-hybrid-slider__thumb.is-active {
    opacity: 1;

    border-color: #168da3;
}


.case-study-hybrid-slider__thumb img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ========================================
   ドット
   PCでは非表示
======================================== */

.case-study-hybrid-slider__dots {
    display: none;
}



/* ========================================
   10：画像ごとの説明文
======================================== */

.case-study-hybrid-slider__text {
    display: none;

    max-width: 680px;

    margin: 35px 0 0;

    padding: 0 10px;
}


/* 選択中だけ表示 */
.case-study-hybrid-slider__text.is-active {
    display: block;
}


/* 10：説明文内の余白を詰める */
.case-study-hybrid-slider__text h2 {
    margin-top: 12px;
    margin-bottom: 5px;
}

.case-study-hybrid-slider__text h2:first-child {
    margin-top: 0;
}

.case-study-hybrid-slider__text p {
    margin-top: 0;
    margin-bottom: 5px;
}




/* ==================================================
   スマートフォン
================================================== */

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

    .case-study {
        margin-bottom: 80px;
        padding: 20px;
        box-sizing: border-box;   }

	
	

/* --------------------------------
   10：PCサムネイル / SPドット＋スワイプ
-------------------------------- */

.case-study-hybrid-slider__viewport {
    width: 95%;
    max-width: none;
	 margin: 0 auto;
}


/* PC用サムネイルを消す */
.case-study-hybrid-slider__thumbs {
    display: none;
}


/* スマホはドット表示 */
.case-study-hybrid-slider__dots {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 7px;

    margin-top: 12px;
}


.case-study-hybrid-slider__dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background-color: #aaa;

    opacity: 0.55;
}


.case-study-hybrid-slider__dot.is-active {
    opacity: 1;

    background-color: #777;
}


/* 説明文 */
.case-study-hybrid-slider__text {
    max-width: none;

    margin-top: 25px;

    padding: 0;
}


/* media 閉じ */
}