@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/



.works-single{
max-width:860px;
margin:0 auto;
padding:24px 16px 56px;
}

.works-main-title{
font-size:24px;
line-height:1.5;
font-weight:700;
margin:0 0 20px;
}

.works-main-image{
text-align:center;
margin:0 0 20px;
}

.works-main-image img{
display:block;
max-width:100%;
width:auto;
height:auto;
margin:0 auto;
border-radius:8px;
}

.works-buttons{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:28px;
}

.works-button{
display:block;
padding:14px 16px;
border-radius:14px;
text-align:center;
text-decoration:none;
font-weight:700;
font-size:15px;
line-height:1.5;
transition:opacity .2s ease, transform .2s ease;
}

.works-button:hover{
opacity:.92;
transform:translateY(-1px);
}

.works-button-primary{
background:#4fb3ff;
color:#fff;
}

.works-button-primary:hover{
background:#3aa0ec;
color:#fff;
}

.works-section-title{
font-size:22px;
line-height:1.4;
font-weight:700;
margin:0 0 16px;
}

.works-summary-section{
padding-top:24px;
margin-bottom:32px;
}

.works-summary-section .works-section-title{
margin:0 0 16px;
}

.works-summary-text{
margin:0;
}

.works-summary-text p{
margin:0 0 14px !important;
font-size:13px !important;
line-height:1.85 !important;
color:#555;
}

.works-summary-text p:last-child{
margin-bottom:0 !important;
}

.works-meta-box{
border:1px solid #e8e8e8;
border-radius:12px;
padding:4px 16px;
margin-bottom:24px;
background:#fff;
}

.works-meta-row{
display:grid;
grid-template-columns:110px 1fr;
gap:12px;
align-items:center;
padding:12px 0;
border-bottom:1px solid #f0f0f0;
}

.works-meta-row:last-child{
border-bottom:none;
}

.works-meta-label{
display:flex;
align-items:center;
height:100%;
font-size:12.5px;
font-weight:600;
color:#666;
}

.works-meta-value{
display:block;
font-size:14px;
line-height:1.65;
color:#222;
word-break:break-word;
min-width:0;
}

.works-rating-stars{
color:#f5b301;
font-size:18px;
letter-spacing:2px;
margin-right:8px;
}

.works-review-text{
color:#666;
font-size:13px;
margin-left:8px;
}

.works-term-links{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-left:-2px;
}

.works-term-links a{
display:inline-block;
padding:6px 10px;
border:1px solid #ddd;
border-radius:999px;
font-size:13px;
text-decoration:none;
color:#222;
line-height:1.4;
background:#fff;
}

.works-term-links a:hover{
background:#f8f8f8;
}

.works-sample-section{
margin:20px 0 24px;
position:relative;
}

.works-sample-note{
margin:0 0 12px;
font-size:13px;
line-height:1.7;
color:#666;
}

.works-sample-scroll{
display:flex;
flex-wrap:nowrap;
gap:10px;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
padding-bottom:6px;
scroll-snap-type:x proximity;
}

.works-sample-scroll::-webkit-scrollbar{
height:6px;
}

.works-sample-scroll::-webkit-scrollbar-thumb{
background:#ccc;
border-radius:10px;
}

.works-sample-item{
flex:0 0 auto;
width:78%;
max-width:none;
scroll-snap-align:start;
}

.works-sample-item img{
display:block;
width:100%;
height:auto;
border-radius:8px;
}



.works-lightbox-trigger{
display:block;
}

.works-lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.9);
display:none;
align-items:center;
justify-content:center;
padding:24px;
z-index:999999;
}

.works-lightbox.is-active{
display:flex;
}

.works-lightbox-image{
display:block;
max-width:100%;
max-height:90vh;
width:auto;
height:auto;
border-radius:8px;
position:relative;
z-index:1;
}

.works-lightbox-close{
position:fixed;
top:80px;
right:20px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:rgba(255,255,255,0.9);
color:#000;
font-size:30px;
line-height:1;
cursor:pointer;
z-index:1000000;
display:flex;
align-items:center;
justify-content:center;
}

.works-related-section{
margin-top:36px;
}

.works-related-list{
display:grid;
grid-template-columns:1fr;
gap:12px;
}

.works-related-card{
display:grid;
grid-template-columns:96px 1fr;
gap:12px;
padding:10px;
border:1px solid #e8e8e8;
border-radius:10px;
text-decoration:none;
color:#222;
background:#fff;
}

.works-related-thumb img{
display:block;
width:100%;
height:auto;
border-radius:6px;
}

.works-related-title{
font-size:15px;
line-height:1.6;
font-weight:700;
margin-bottom:4px;
}

.works-related-circle{
font-size:13px;
color:#666;
}

@media (max-width:767px){
.works-main-title{
font-size:20px;
line-height:1.45;
margin-bottom:16px;
}

.works-buttons{
margin-bottom:32px;
}

.works-button{
font-size:14px;
padding:13px 14px;
border-radius:12px;
}

.works-section-title{
font-size:20px;
margin-bottom:14px;
}

.works-meta-row{
grid-template-columns:92px 1fr;
gap:10px;
padding:10px 0;
}

.works-meta-label{
font-size:12px;
}

.works-meta-value{
font-size:14px;
line-height:1.65;
}

.works-rating-stars{
font-size:16px;
letter-spacing:1px;
}

.works-review-text{
display:inline-block;
margin-left:6px;
font-size:12px;
}

.works-term-links a{
font-size:12px;
padding:5px 9px;
}

.works-sample-note{
font-size:12px;
line-height:1.7;
}

.works-related-card{
grid-template-columns:84px 1fr;
gap:10px;
}
}

@media (min-width:768px){
.works-main-title{
font-size:28px;
}

.works-summary-text p{
font-size:14px !important;
line-height:1.9 !important;
}

.works-sample-item{
width:260px;
}

.works-lightbox-close{
top:130px;
}

.works-related-list{
grid-template-columns:1fr 1fr;
}
}



/* ----------------------------------------
 * works lightbox UI（最適化版）
 *
 * ・PCのみ左右ボタン表示
 * ・スマホでは完全非表示（!important）
 * ・端で無効化
 * ・カウンター表示
 * ---------------------------------------- */
.works-lightbox-prev,
.works-lightbox-next{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:1000001;
width:48px;
height:48px;
border:none;
border-radius:999px;
background:rgba(0,0,0,0.6);
color:#fff;
font-size:32px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.works-lightbox-prev{ left:24px; }
.works-lightbox-next{ right:24px; }

.works-lightbox-prev:disabled,
.works-lightbox-next:disabled{
opacity:.28;
cursor:default;
pointer-events:none;
}

.works-lightbox-counter{
position:fixed;
left:50%;
bottom:24px;
transform:translateX(-50%);
z-index:1000001;
padding:8px 14px;
border-radius:999px;
background:rgba(0,0,0,0.65);
color:#fff;
font-size:13px;
line-height:1;
}

/* スマホでは完全に非表示 */
@media (max-width:767px){
.works-lightbox-prev,
.works-lightbox-next{
display:none !important;
}

.works-lightbox-counter{
bottom:18px;
font-size:12px;
padding:7px 12px;
}
}





/* =========================
 * ヘッダー下・フッター上の余白を調整
 * 上は少し戻して、下は今くらいを維持
 * ========================= */

.l-mainContent{
padding-top:32px !important;
padding-bottom:16px !important;
}

.l-container{
padding-top:0 !important;
padding-bottom:0 !important;
}

section{
margin-bottom:0px !important;
}

@media (max-width:767px){
.l-mainContent{
padding-top:24px !important;
padding-bottom:12px !important;
}
}





/* =========================
 * セクション見出しの上余白
 * ========================= */

.ddi-section-title{
margin-top:36px !important;
}

@media (max-width:767px){
.ddi-section-title{
margin-top:36px !important;
}
}

/* =========================
 * 見出しとリンクの位置を揃える
 * ========================= */

.ddi-section-title{
margin-top:36px;
}

.ddi-section-link{
margin-top:36px;
display:inline-block;
}