/*--------------------------------------------------------------
Theme Name: Noir Original
File Name: style-casestudy.css
Description: Styles for the Case Study page
Author: Your Name
Last Updated: YYYY-MM-DD
--------------------------------------------------------------*/



/*----------------
Arcive list: archive-casestudy.php
----------------*/

.casestudy-archive-outer-wrapper{
    padding-top:200px;
    margin-bottom:10vw;
}
.casestudy-archive-title{
    margin-bottom:100px;
}

.casestudy-archive-title .casestudy-archive-caption{
    font-size:14px;
    text-align: center;

}
.casestudy-container{
    padding:0 10%;
}

/* casestudy grid */
.archive-case-study-list .case-studies{
    display:grid;
    /*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
    gap:3rem;
}
.archive-case-study-list .case-study-link{
    color:#453d38;
}

.archive-case-study-list .case-study-item{
    border-radius: 8px;
    position:relative; 
}

.archive-case-study-list .case-number {
    position: absolute;
    top:0;
    right:0;
    z-index:2;
    transform: rotate(90deg) translate(110px, -30px); /* 回転 + 移動 */
    transform-origin: top right; /* 回転基準位置 */

}

.archive-case-study-list .thumbnail {
    width: 100%; 
    aspect-ratio: 16 / 9; /* 比率19:6 */
    overflow: hidden; /* ボックス外要素を隠す */
    position: relative;
    border-radius: 8px; 
}

.archive-case-study-list .thumbnail a {
    display: block; 
    width: 100%;
    height: 100%;
}

.archive-case-study-list .thumbnail img {
    width: 100%; 
    height: 100%;
    object-fit: cover; /* 画像比率保ちボックスに収める */
    object-position: center; 
}

.archive-case-study-list .case-study-item-bottom{
    padding:0.5rem 1rem; 
}

.archive-case-study-list .case-study-item-bottom .post-date{
    font-size:12px;
    margin-bottom:0.5rem;
}

.archive-case-study-list .case-study-item-bottom h3{
    font-size:13px;
    font-weight:bold;
}

@media screen and (max-width: 768px){/* 768px以下 */
    .archive-case-study-list .case-study-item-bottom h3{
        font-size:14px;
        font-weight:bold;
    }
	.index-casestudy-title{
		margin-bottom: -1rem !important;
    }
	.casestudy-archive-title{
		margin-bottom: 50px;
	}
	.casestudy-archive-outer-wrapper{
		padding-top: 100px;
	}
}

@media (max-width: 599px) {
    .archive-case-study-list .case-studies {
      grid-template-columns: 1fr;
    }
  }
  
  @media (min-width: 600px) and (max-width: 1023px) {
    .archive-case-study-list .case-studies {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (min-width: 1024px) {
    .archive-case-study-list .case-studies {
      grid-template-columns: repeat(3, 1fr);
    }
  }


/*----------------
Casestudy Post: Single-casestudy.php
----------------*/


body.single-casestudy {
    background-color: #e7e5e4 /* お好きな色 */
}
/*
.casestudy-outer-wrapper{
    padding-top:200px;
    margin-bottom:10vw;   
}
*/
.casestudy-outer-wrapper {
    padding-top: 200px;
    margin-bottom: 10vw;
    max-width: 2000px;
    margin: 0 auto 100px;
}


.casestudy-container-article .casestudy-fv,
/*.casestudy-container-article .casestudy-mokuji,*/
.casestudy-container-article .casestudy-interview,
/*.casestudy-container-article .casestudy-client-info,*/
.casestudy-container-article .casestudy-introduced-products-inner
{
    padding:0 10%;
    max-width:1400px;
    margin:auto;
}

/* fv */

.casestudy-fv-top{
    margin-left:3rem; /* .casestudy-fv-bottom 共通*/
    margin-bottom:1rem;
}
.casestudy-fv-bottom{
    border-radius: 10px;
}

.casestudy-fv-bottom img{
    border-radius: 10px;
	 width:100%;
	
}
/*
.casestudy-fv-bottom p{
    padding:1.5rem 3rem;
}
    */

.casestudy-fv-intro{
    font-weight:bold;
	padding-bottom: 0 !important;
	font-size: 20px;
	margin-bottom: 10px;
}
.casestudy-fv-text{
	padding-top: 0 !important;
}

.casestudy-fx-text-wrapper {
    padding: 1.5rem 3rem;
}

.casestudy-fx-text-wrapper a {
    display: inline-block;
    margin-top: 0.5rem;
    color: #555;
    text-decoration: none;
    font-weight: bold;
}
@media screen and (max-width: 768px){/* 768px以下 */
    .single-casestudy .scrolldown{
        display:none;
    }
    .casestudy-fv-top{
        margin-left:0rem; /* .casestudy-fv-bottom 共通*/
        margin-bottom:1rem;
		margin-top: -2rem; /* ページタイトル下スペース調整 */
    }
    .casestudy-container-article .casestudy-fv, .casestudy-container-article .casestudy-interview, .casestudy-container-article .casestudy-introduced-products-inner {
        padding: 0 5%;
        max-width: 1400px;
        margin: auto;
        padding-top:4rem;
    }
    .casestudy-introduced-products{
        border-radius: 10px;
    }
	#casestudy-fv-spacer{
		padding-top:0;/* ページタイトル下スペース調整 */
	}
    .casestudy-fx-text-wrapper {
        padding: 1.5rem 2rem;
    }
}


/* 目次 */
.casestudy-mokuji-wrapper{
    width:60vw;
    margin:7% auto;
    display:grid;
    grid-template-columns: 1fr 3fr;
    border-bottom:1px solid black;
    border-top:1px solid black;
    padding:1rem;
	max-width: 2000px;
}

.casestudy-mokuji-wrapper .mokuji-title{
    align-self: center;
    justify-self: center;
    
}

.casestudy-mokuji ul{
    padding-left:20px; /* space adjuster: "before triangle" */
}

.casestudy-mokuji li {
    position: relative;
    padding-left: 12px;
}

.casestudy-mokuji li::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 0;
left: -20px;
bottom: 0;
margin: auto;
}

.casestudy-mokuji li a {
    color:#3e3a39
}
  
@media screen and (max-width: 768px){/* 768px以下 */
    .casestudy-mokuji-wrapper{
        grid-template-columns: 1fr;
        width: 80vw;
        margin: 60px auto;

    }
    .casestudy-outer-wrapper {
        padding-top: 150px !important;
    }

    .casestudy-mokuji-wrapper .mokuji-title{
        justify-self: start; 
    }
}




/* 導入ユニフォーム　*/

.casestudy-introduced-products{
    padding-top: 30px;
    padding-bottom: 15px;
}




.casestudy-introduced-products-inner h3{
    padding-left:2rem;
    margin-bottom:3%;
    font-size: 20px;
    padding-top: 3rem;
    padding-bottom: 2rem;

}

.casestudy-introduced-products-list-item{/*adjusting image w1dth*/
    max-width:300px;
    margin:auto;
}

.casestudy-introduced-products-list-item img {
    width: 100%;
	/*height: 100%;*/
    height: 70%;
    object-fit: cover;
    border-radius: 10px;
}

/* コンテナにアスペクト比を設定 */
.casestudy-introduced-products-list-item div:first-child {
    position: relative; /* 必須 */
    width: 100%; /* 親要素に合わせる */
    /*aspect-ratio: 3 / 4;*/ /* アスペクト比を指定 */
    overflow: hidden; /* 画像がはみ出さないように */
    border-radius: 10px; /* 角丸を画像と揃える */
}



.casestudy-introduced-products-list{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:3rem;
}

.casestudy-introduced-products-list.grid-two-columns {
    grid-template-columns: repeat(2, 1fr); /* アイテムが4つのときだけ適用 */
}

.casestudy-introduced-products-list-item .introduced-product-item-info .casestudy-viewmore-btn-img{
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
}


#casestudy-viewmore-btn-img{
    width:150px;
    display:block;
    margin:auto;
    margin-top:1rem;

}
.introduced-product-item-info{
    margin-top:1rem;
    padding:0.5rem;
}

.introduced-product-item-info .product-information{
    font-size:14px;
    font-weight:bold;
}

.introduced-product-item-info .product-information a{
    color: #333;
}
.introduced-product-item-info .product-color-information{
    font-size:12px;
    font-weight:normal;
}

@media screen and (max-width: 768px){/* 768px以下 */
	.casestudy-introduced-products-inner h3 {
		margin-bottom: 3vw;
		font-size: 20px;
		padding-top: 0rem;
		padding-bottom: 3rem;
		padding-left: 0;
		text-align: center;
	}
	.casestudy-introduced-products {
		padding-top: 0px;
		padding-bottom: 15px;
	}
	
}



/* Q and A */

.casestudy-interview{
    margin-bottom:100px;
}

.casestudy-interview-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom:100px;
    
}

/*
.casestudy-interview-item {
    display: flex;
    flex-direction: row;
    padding: 1.5rem;
    margin-top:100px;
    column-gap: calc(200px - 5vw);   
}
*/


.casestudy-interview-item {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右を均等に分割 */
    gap: 50px; /* アイテム間のスペース */
    padding: 1.5rem;
    margin-top: 100px;
    align-items: start; 
}

.casestudy-interview-item:nth-child(even) {
    grid-template-areas: 
        "content img"; /* 偶数番目ではコンテンツを左、画像を右に */
}

.casestudy-interview-item:nth-child(odd) {
    grid-template-areas: 
        "img content"; /* 奇数番目では画像を左、コンテンツを右に */
}

.casestudy-interview-item-img {
    grid-area: img; /* グリッドエリア img に配置 */
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 のアスペクト比 */
    position: relative;
    overflow: hidden; /* クロップ */
}

.casestudy-interview-item-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をクロップ */
    border-radius: 10px;
}

.casestudy-interview-item-right-content {
    grid-area: content; /* グリッドエリア content に配置 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.casestudy-interview-item > div {  /* これが子要素だと仮定 */
    flex: 1; /* 各子要素を均等に広げる */
}

.casestudy-interview-item-right-content{
    display:grid;
    grid-template-columns: 70px 1fr;
}

.casestudy-interview-item-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
	/* 20250319追記分：ACF（WYSIWYG）スマホ時幅制御 */
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
}

.casestudy-interview-item-content .casestudy-interview-item-content-bottom {
    margin-top: auto; /* 下に寄せる */
    width: 100%; /* 幅を100%に設定 */
    display: grid;
    grid-template-columns: 3fr 2fr;
    margin-top: 2rem;
    flex-grow: 1; /* 下に伸びるように調整 */
}


.casestudy-interview-item .q-number{
    font-size:2rem;
    font-weight:bold;
    text-align: center;
    padding-right: 1rem;
    
}

.casestudy-interview-item:nth-child(even) {/* 偶数アイテムだけ順序逆*/
    flex-direction: row-reverse;
}

/*
.casestudy-interview-item div:first-child {
    margin-bottom: 1rem;
}

*/

.casestudy-interview-item-img {
    width: 100%;
    height: auto;
    overflow: hidden; /* クロップ:;オーバーフローを隠す */
    display: block;
    aspect-ratio: 1 / 1; /* アスペクト比 */
}

.casestudy-interview-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像比率を保ちながらクロップ */
    border-radius: 10px; /* 角を丸くしたい場合 */
    
}


.casestudy-interview-item h4 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    color: #333;
}

.casestudy-interview-item p {
    margin: 0.5rem 0;
    font-size: 1.0rem;
    color: #555;
}

.casestudy-interview-item a {
    display: inline-block;
    margin-top: 0.5rem;
    color: #555;
    text-decoration: none;
    font-weight: bold;
}

.casestudy-interview-item a:hover {
    text-decoration: underline;
}

.casestudy-interview-item-content-bottom .casestudy-interview-item-content-bottom-color{
    font-size:13px;
    color: #555;
    font-weight: lighter;
    margin-top:-0.5rem;
    margin-bottom:0;
}

.casestudy-interview-item-content-bottom .casestudy-interview-item-content-bottom-name,
.casestudy-interview-item-content-bottom .casestudy-interview-item-content-bottom-price{
    font-weight: bold;
}
.casestudy-interview-item-content-product{
    align-self: flex-end; /* 子要素を下端に揃える */

}
.casestudy-interview-item-content-link{
    align-self: flex-end; /* 子要素を下端に揃える */
}

.casestudy-interview-item-content-link a{
    font-weight: lighter;
}


@media screen and (max-width: 1100px){/* 768px以下 */
   
    .casestudy-interview-item-img{
        margin-top:2rem;
    }

    .casestudy-interview-item-content .casestudy-interview-item-content-bottom {
        margin-top: auto; /* 下に寄せる */
        width: 100%; /* 幅を100%に設定 */
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 2rem;
        flex-grow: 1; /* 下に伸びるように調整 */
    }
    .casestudy-interview-item-content-link{
        margin-top:1rem;
    }

    .casestudy-interview-item-right-content{
        position:relative;
        display:grid;
        grid-template-columns: 1fr;
    }

    .casestudy-interview-item .q-number{
        font-size:1.2rem;
        position:absolute;
        top:0;
        left:-2.5rem;
        
    }

    .casestudy-interview-item h4{
        font-size:1rem;
    }


    .casestudy-interview-item {
        display: grid;
        grid-template-columns: 1fr; /* 左右を均等に分割 */
        gap:10px;
        padding: 1.5rem;
        margin-top: 0px;
        align-items: center; /* アイテムを縦方向で中央揃え */
    }
    
    /* すべて縦並びの順序に統一 */
    .casestudy-interview-item:nth-child(even),
    .casestudy-interview-item:nth-child(odd) {
        grid-template-areas: 
        "content"    
        "img"
            ; /* コンテンツが画像が上、画像が下に来るようにしている */
    }

    .casestudy-interview-item-img {
        align-self: baseline; /* 縦方向ベースライン揃え */
    }

    .casestudy-interview-item-content-link{
        justify-self: center;
    }
    
    
}

@media screen and (max-width: 768px){/* 768px以下 */
    .casestudy-interview-item .q-number {
        font-size: 2.2rem;
        position: absolute;
        top: -62px;
        left: 0.5rem;
    }
    .casestudy-interview-item {
        padding-top:3rem;
    }
}




/* client-info */
.casestudy-client-info{
    margin-bottom:100px;
}
.casestudy-client-info-inner{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    border-radius: 8px;
    margin-bottom: 175px;
    max-width: 1400px;
    padding: 0 12%
}

.casestudy-client-info-title {
    background: #fff;
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center;
    border-radius: 10px 0 0 10px;
}


.casestudy-client-info-title h3{
    color: #555;
    font-size:18px;
    font-family:"futura-pt", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.casestudy-client-info-title p{
    color: #555;
    font-size:12px;
    
}

.casestudy-client-info-content{
    background: #3e3a39;
    padding:3rem 4rem;
    border-radius: 0 10px 10px 0;
}

.casestudy-client-info-content p{
    margin-bottom:1.2rem;
}

.casestudy-client-info-content p:last-child {
    margin-bottom: 0rem;
}

.casestudy-client-info-content td,
.casestudy-client-info-content a{
    color: #fff;
    font-size:14px;
	/*display: block;
	width: 100%;*/
}

.casestudy-client-info-content .first-td {
    min-width: 100px; /* 必要に応じて調整 */
    white-space: nowrap; /* 折り返しを防ぐ */
    padding-right: 10px; /* 余白を追加 */
    vertical-align: top; /* 上揃えにする */
}



@media screen and (max-width: 900px){/* 768px以下 */
    .casestudy-client-info-inner{
        grid-template-columns: 1fr;
        padding: 0 6%;
    }

    .casestudy-client-info-content p,
    .casestudy-client-info-content a{
        font-size:12px;
    }

    .casestudy-client-info-title {
        padding:1rem;
        border-radius: 10px 10px 0 0;
    }

    .casestudy-client-info-content{
        background: #3e3a39;
        padding:1rem;
        border-radius: 0 0 10px 10px;
    }
}




/* style-for 
casestudies-swiper-02*/

.casestudies-swiper-02 .case-study-item{
    border-radius: 10px;
    position:relateive;
}

.casestudies-swiper-02 .case-number{
    position:absolute;
    top: 40px;
    right: -62px;
    transform: rotate(90deg) translate(100px, -18px);
    font-family: "futura-pt", sans-serif;
    font-weight: 300;
    font-style: normal;
    color:#333;
}

.casestudies-swiper-02 .case-studies{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:3rem;
}
.casestudies-swiper-02 .case-study-link{
    color:#453d38;
}

.casestudies-swiper-02 .case-study-item{
    border-radius: 8px;
    position:relative; 
}

.casestudies-swiper-02 .case-number {
    position: absolute;
    top:0;
    right:0;
    z-index:2;
    border-radius: 10px; /* 回転 + 移動 */
    transform-origin: top right; /* 回転基準位置 */

}

.casestudies-swiper-02 .thumbnail {
    width: 100%; 
    aspect-ratio: 16 / 9; /* 比率19:6 */
    overflow: hidden; /* ボックス外要素を隠す */
    position: relative;
    border-radius: 8px; 
}

.casestudies-swiper-02 .thumbnail a {
    display: block; 
    width: 100%;
    height: 100%;
}

.casestudies-swiper-02 .thumbnail img {
    width: 100%; 
    height: 100%;
    object-fit: cover; /* 画像比率保ちボックスに収める */
    object-position: center; 
}

.casestudies-swiper-02 .case-study-item-bottom{
    padding:0.5rem 1rem; 
}

.casestudies-swiper-02 .case-study-item-bottom .post-date{
    font-size:12px;
}

.casestudies-swiper-02 .case-study-item-bottom h2{
    font-size:12px !important; /* PCのみサイズを小さく */
    font-weight:bold;
/* font-sizeが反映されないため、PHPテンプレートにインラインで指定中 */
}

.casestudies-swiper-02 .swiper-wrapper {
    transition-timing-function: linear;
  }

@media screen and (max-width: 900px){/* 768px以下 */
    .casestudies-swiper-02 .case-study-item{
        width:82vw !important;
    }
	
	.casestudies-swiper-02 .case-study-item-bottom h2{
        font-size:14px;
        font-weight:bold;
    }
        
}

/* タブレット（768px以上）の時だけスライドの動きを一定にする */
@media (min-width: 768px) {
    .casestudies-swiper-02 .swiper-wrapper {
      transition-timing-function: linear;
    }
  }
  
/* ACFのWYSIWYG エディター設定を適用
   2025/02/14追記 */
  .casestudy-interview-item-content p {
    font-size: inherit; /* ACFのエディター設定を適用 */
}