@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}

ol, ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote:before, blockquote:after,q:before, q:after{content:"";}
blockquote, q{quotes:"" "";}
a img{border:0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
/* -------------------------------------------------------------- */

body{
    color: #555555;
    font-size: 15px;
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}


/* リンク設定
------------------------------------------------------------*/
a{color:#6caefe;text-decoration:none;}
a:hover{color:#488fdd;}
a:active, a:focus {outline:0;}


/* 全体
------------------------------------------------------------*/
#wrapper{
margin:0 auto;
padding:0 1%;
width:98%;
position:relative;
}

.inner{
margin:0 auto;
width:100%;
}


/*************
/* ヘッダー
*************/
#header{
height:130px;
}

#header h1{
padding:5px 0 10px;
font-size:12px;
font-weight:normal;
}



/*************
/* ロゴ
*************/
.logo{
float:left;
}

.logo a{
    color: #00bfff;
}

.logo p{float:left;}

.logo span{display:block;}

/* --- [修正/追記] フッターロゴのフォントとイタリック設定 --- */
#footer .logo a {
    font-style: italic; /* RocoDriveをイタリックに */
    font-family: "Verdana", Geneva, sans-serif; 
}

#footer .logo span{
    font-style: normal; /* Creative & Communicationの斜体を取り消す */
    font-family: "Verdana", Geneva, sans-serif;
}
/* --- ここまで --- */

/*************
/* 電話番号
*************/
.info{
float:right;
padding-right:20px;
text-align:right;
}

.info .open{font-size:11px;}


/*************
/* ロゴ+電話番号
*************/
.logo,.info .tel{
margin-top:6px;
font-size:20px;
font-weight:bold;
}

.logo span,.info span{
font-size:.6em;
font-weight:normal;
}


/**************************
/* メイン画像(トップページ+サブページ)
**************************/
#mainBanner{
clear:both;
margin:25px auto 40px;
padding:0;
position:relative;
text-align:center;
}
#mainBanner .inner{position:relative;}

#mainBanner img{
max-width:100%;
height:auto;
}

/* トップページ用のスローガン */
.slogan{
color:#fff;
font-weight:bold;
position:absolute;
max-width:100%;
height:auto;
bottom:42%; /* 位置調整 */
left:40px;
padding:5px 10px;
line-height:1.4;
text-align:left;
opacity: 0;
animation-name: slideInFadeIn;
animation-duration: 1.5s;
animation-delay: 0.3s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

.slogan h2 {
    font-size: 22px; 
    line-height: 1.4;
}

.slogan p {
    font-size: 20px; 
    font-weight: normal; 
    margin: 0;
    white-space: nowrap; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* message.html専用のスローガン */
.slogan-message {
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 50%; /* 垂直方向の中央 */
    left: 40px; /* 左端から40px */
    transform: translateY(-50%); /* 中央寄せの調整をアニメーション開始時と分けて定義 */
    padding: 10px;
    line-height: 1.4;
    text-align: left;
    font-size: 24px; /* 大きめのフォントサイズ */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    
    opacity: 0;
    animation-name: slideDownFadeIn; /* 新しいアニメーションを適用 */
    animation-duration: 1.5s;
    animation-delay: 0.5s; /* 遅延時間 */
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}


/* about-rd.html用スローガン(右から中央へスライドインアニメーション) */
.slogan-about {
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 50%; /* 垂直方向の中央 */
    left: 50%; /* 水平方向の中央 */
    transform: translate(-50%, -50%); /* 中央寄せの調整 */
    padding: 10px 20px;
    line-height: 1.4;
    text-align: center;
    font-size: 22px; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    
    opacity: 0;
    animation-name: slideInFromRight;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* works.html用スローガン(右から中央へスライドインアニメーション) */
.slogan-works {
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 50%; /* 垂直方向の中央 */
    left: 50%; /* 水平方向の中央 */
    transform: translate(-50%, -50%); /* 中央寄せの調整 */
    padding: 10px 20px;
    line-height: 1.4;
    text-align: center;
    font-size: 22px; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    
    opacity: 0;
    animation-name: slideInFromRight;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* contact.html用 画像のズームインフェード */
.contact-banner-img {
    opacity: 0;
    animation-name: zoomInFadeIn;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* RocoDriveの特別なスタイル設定 */
.slogan h2 .logo-text {
    font-size: 2.5em; 
    font-family: "Verdana", Geneva, sans-serif;
    font-weight: bold;
    font-style: italic;
}


/**************************
/* グリッド
**************************/
.gridWrapper{
clear:both;
padding-bottom:20px;
overflow:hidden;
}

* html .gridWrapper{height:1%;}
    
.grid{
overflow:hidden; /* ホバーアニメーションで画像が飛び出さないようにクリッピング */
}

.box{
padding:10px;
}

.box img{
max-width:100%;
height:auto;
}

.box h3{
font-size:16px;
padding:10px 0 15px;
}

.box h3, .box p{text-align:left;}

.box p.readmore{
padding:10px 5px 5px;
text-align:right;
}

.box p.readmore a{
padding:3px 7px;
border-radius:3px;
}


/*************
メイン コンテンツ
*************/
section.content article{
padding:30px 0 20px 0;
margin-bottom:10px;
overflow:hidden;
}

section.toppage article,section.content .archive{border:0;}


/* アーカイブページ */
section.content .archive{
padding:0;
border-bottom:1px dotted #ccc;
}

section.content p{margin-bottom:5px;}

h3.heading{
font-size:16px;
font-weight:normal;
padding:15px 0;
margin-bottom:5px;
border-top:2px solid #ebebeb;
border-bottom:2px solid #ebebeb;
}

section.content img{
max-width:90%;
height:auto;
}

.alignleft{
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright{
float:right;
clear:right;
margin:3px 0 10px 10px;
}


/*************
/* サイドバー
*************/
/* サイドバーを削除したため、このブロックはPC表示では機能しませんが、念のため残しておきます。 */
#sidebar article{
clear:both;
margin-bottom:20px;
}

#sidebar ul{padding:15px 0;}

#sidebar li{
margin-bottom:10px;
padding-bottom:10px;
list-style:none;
border-bottom:1px dashed #ebebeb;
}

#sidebar li:last-child{
border:0;
margin-bottom:0px;
}

#sidebar li a{
color:#555;
font-size:12px;
display:block;
}

#sidebar li a:hover{
color:#999;
font-size:12px;
display:block;
}


/*************
/* フッター
*************/
#footer{
clear:both;
}

#footer a{
color:#555;
}

#footer a:hover{
color:#999;
}

#footer .inner{
padding:40px 0;
overflow:hidden;
}

#footer .grid{
margin:0;
}

#footer #info{float:left;}

#footer #info .info{float:none;}

#footer #info .info{
clear:both;
padding:5px 0 0;
text-align:left;
}

#footer .logo{
    font-size:18px;
    font-family: "Verdana", Geneva, sans-serif;
}

#footer .info .tel,#footer .info .tel span,#footer #info .open{
font-size:12px;
}

ul.footnav{
float:right;
width:620px;
padding:10px 0;
}
ul.footnav ul{display:none;}

ul.footnav li{
float:left;
margin:10px 0 10px 0;
padding:0 7px 0 8px;
border-right:1px solid #ebebeb;
}

#copyright{
clear:both;
padding:20px 0 10px 0;
text-align:center;
font-style:normal;
font-size:10px;
color:#555;
}


/* page navigation
------------------------------------------------------------*/
.pagenav{
clear:both;
width:100%;
height:30px;
margin:5px 0 20px;
}

.prev{float:left}
.next{float:right;}

#pageLinks{
clear:both;
text-align:center;
}


/* タイポグラフィ
*****************************************************/
.dateLabel{
margin:0 0 10px;
text-align:right;
font:italic 1em "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.post p{padding-bottom:10px;}

.post ul.work-flow-list {
    margin: 10px 0 20px 10px;
    list-style: none;
}

.post ul.work-flow-list li {
    margin-bottom: 15px;
    padding-left: 20px;
    background: url(images/bullet.png) no-repeat 0 8px !important;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}

/* 最後の項目は区切り線なし */
.post ul.work-flow-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}


/* 一般的なリストスタイルから .work-flow-list を除外 */
.post ul:not(.work-flow-list){margin:0 0 10px 10px;}

.post ul:not(.work-flow-list) li{
margin-bottom:5px;
padding-left:15px;
background:url(images/bullet.png) no-repeat 0 8px;
}

.post ol{margin:0 0 10px 30px;}

.post ol li{list-style:decimal;}

.post h1{
margin:20px 0;
padding:5px 0;
font-size:150%;
color:#000;
border-bottom:3px solid #cf6a88;
}

.post h2{
margin:10px 0;
padding-bottom:2px;
font-size:120%;
font-weight:normal;
color:#333;
border-bottom:2px solid #cf6a88;
}

.post h3{
margin:10px 0 25px 0;
padding:10px 0 10px 0;
font-size:120%;
font-weight:normal;
border-bottom:1px solid #ddd;
}

.post blockquote{
clear:both;
padding:10px 0 10px 15px;
margin:10px 0 25px 30px;
border-left:5px solid #ccc;
}
 
.post blockquote p{padding:5px 0;}

.post table{
border-collapse:collapse;
margin:5px auto 15px auto;
}

.post table td{
border-collapse:collapse;
background-color:#F9F9F9;
text-align:left;
padding:8px;
border:1px solid #D6D6D6;
line-height:20px;
}

.post table th{
background-color:#F5F5F5;
text-align:right;
padding:8px;
white-space:nowrap;
color: #151515;
border-top:1px solid #D4D4D4;
border-right:4px solid #D4D4D4;
border-bottom:1px solid #D4D4D4;
border-left:1px solid #D4D4D4;
font-size:13px;
font-weight:normal;
letter-spacing:0.08em;
background-repeat:repeat-x;
background-position:top;
}


.post dt{font-weight:bold;}

.post dd{padding-bottom:10px;}

/* ワークフロー画像(.post img)の最大幅を調整 */
.post img{max-width:100%;height:auto;}

img.aligncenter{
display:block;
margin:5px auto;
}

img.alignright, img.alignleft{
padding:4px;
margin:0 0 2px 7px;
display:inline;
}

img.alignleft{margin:0 7px 2px 0;}


/* PC用
------------------------------------------------------------*/
@media only screen and (min-width:960px){
    nav div.panel{
    display:block !important;
    float:left;
    }

    a#menu{display:none;}
    
  #mainNav{
    clear:both;
    z-index:200;
    position:relative;
    }

    #mainNav li{
    float:left;
    position:relative;
    }

    #mainNav li a{
    color:#555;
    display: block;
    text-align: center;
    _float:left;
    font-size:13px;
    width:160px;
    height:30px;
    padding:15px 0;
    border-top:2px solid #ebebeb;
    border-bottom:2px solid #ebebeb;
    }

    #mainNav li a span,#mainNav li a strong{display:block;}

    #mainNav li a span{
    color:#bababa;
    font-size:10px;
    }
    
    #mainNav ul ul{width:160px;background:#fff;}
    #mainNav li ul{display:none;}

    #mainNav li:hover ul{
    display:block;
    position:absolute;
    top:64px;
    z-index:500;
    }
    
    #mainNav li li{
    margin:0;
    float:none;
    width:160px;
    border:0;
    }
  #mainNav li li:last-child{border:0;}
    
    #mainNav li li a{
    width:auto;
    height:auto;
    padding:10px;
    font-size:95%;
    text-align:left;
    border:0;
    }

    #mainNav li li span{padding:0 10px;}
    
    #mainNav li.current-menu-item a{
    border-color:#555;
    }

    #mainNav li.current-menu-item a,#mainNav li a:hover,#mainNav li.current-menu-item li a:hover{
    color:#999;
    }

    #header,#wrapper,.inner{
    width:960px;
    padding:0;
    margin:0 auto;
    }
    
    #wrapper{clear:both;padding:20px 0;}
    
    #main{
    float: none;    
    width: 680px;   
    margin: 0 auto; 
    padding:15px 0 0 0;
    }
    
    .logo{width:500px;}
    
    /* グリッド全体 */
    .gridWrapper{
    display:table;
    border-collapse:separate;
    border-spacing:0px;
    }
    
    /* グリッド */
    .grid:not(.works-category-box){ /* 👈 ここを修正しました */
    width:320px;
    display:table-cell;
    }

}


@media only screen and (max-width:959px){
    *{
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
         -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;
    }
    
    #mainNav{
    clear:both;
    width:100%;
    margin:0 auto;
    padding:0;
  border:1px solid #e4e4e4;
    border-left:0;
    border-right:0;
    }

    #mainNav a.menu{
    color:#555;
    width:100%;
    display:block;
    height:40px;
    line-height:40px;
    font-weight: bold;
    text-align:left;
    }

    #mainNav a#menu span{
    padding-left:10px;
    }
    #mainNav a.menu span:before{content:"≡ ";}
    #mainNav a.menuOpen span:before{content:"× ";}

    #mainNav a#menu:hover{cursor:pointer;}

    nav .panel{
    display:none;
    width:100%;
    position:relative;
    right:0;
    top:0;
    z-index:1;
    }
    
    #mainNav ul{margin:0;padding:0;}

  #mainNav li{
    float:none;
    clear:both;
    width:100%;
    height:auto;
    line-height:1.2;
    }

    #mainNav li a,#mainNav li.current-menu-item li a{
    color:#555;
    display: block;
    padding:15px 10px;
    text-align:left;
    border-bottom:1px dashed #ccc;
    }
    
    #mainNav li a span{padding-left:10px;}
    
    
    #mainNav ul > li:last-child a{border:0;}
    #mainNav li li:last-child a{border-bottom:1px dashed #ccc;}
 
    #mainNav li.current-menu-item a,#mainNav li a:hover,#mainNav li.current-menu-item a,#mainNav li a:active, #mainNav li li.current-menu-item a, #mainNav li.current-menu-item li a:hover, #mainNav li.current-menu-item li a:active{
    color:#555;
    }

    #mainNav li li{
    float:left;
    border:0;
    }

    #mainNav li li a, #mainNav li.current-menu-item li a, #mainNav li li.current-menu-item a{
    padding-left:40px;
    background:url(images/sub1.png) no-repeat 20px 18px;
    }

    #mainNav li li.current-menu-item a,#mainNav li li a:hover, #mainNav li.current-menu-item li a:hover{background:url(images/sub1.png) no-repeat 20px -62px;}

    #mainNav li li:last-child a{background:url(images/subLast.png) no-repeat 20px 20px;}
    #mainNav li li:last-child.current-menu-item a,#mainNav li li:last-child a:hover,#mainNav li.current-menu-item li:last-child a:hover{background:url(images/subLast.png) no-repeat 20px -65px;}

    nav div.panel{float:none;}
    
    #header{padding-left:10px;}
    
    #main{padding-top:15px;}
    section.toppage{margin:0;}
    #sidebar{padding-bottom:15px;}
    #sidebar article{padding:7px 8px;}
    
    #footer .grid,#footer ul.footnav{float:none;width:100%;text-align:center;}
    ul.footnav li{float:none;display:inline-block;}
    
    
/* WORKSページの実績ボックス(.works-category-box)には3列表示を適用しない */
    .grid:not(.works-category-box){
    float:left;
    width:32%;
    margin:10px 0 0 1%;
    }

    #footer .grid img,#footer .info{float:none;}
    #footer .grid p{display:block;}
    #footer #info .info{float:none;text-align:center;}
    #footer.logo,#footer .info{width:100%;float:none;}
    #footer .logo p{float:none;display:block;   }
    #footer .logo img{float:none;padding:0;}
}


@media only screen and (max-width:640px){
    #header{height:auto;padding-bottom:20px;}
    
    #header h1,.logo,.info{text-align:center;}
    
    .logo,.info{clear:both;width:100%;float:none;}
    
    .logo p{float:none;display:block;}
    .logo img{float:none;padding:0;}
    
    .box img{
    float:left;
    margin-right:5px;
    }
    
    .box h3{padding-top:0;}

  .alignleft,.alignright,img.alignleft,img.alignright{float:none;display:block;margin:0 auto 10px;}

}


@media only screen and (max-width:480px){
    .grid{width:100%;margin:10px 0;}
    .box img{max-width:100px;}
    
    /* トップページのスローガン調整 */
    .slogan {
        left: 10px;
        right: 10px;
        bottom: 20%;
        padding: 8px 12px;
        opacity: 1 !important;
        animation: none !important;
        transform: translateX(0) !important;
    }
    
    .slogan h2 {
        font-size: 16px;
        line-height: 1.4;
    }
    
    .slogan p {
        font-size: 11px;
        white-space: normal !important;
    }
    
    .slogan h2 .logo-text {
        font-size: 1.4em;
    }
    
    /* message.htmlのスローガン調整 */
    .slogan-message {
        font-size: 12px !important;
        left: 10px !important;
        right: 10px !important;
        top: 50% !important;
        padding: 8px 12px !important;
        width: auto !important;
        white-space: normal !important;
        text-align: left !important;
        opacity: 1 !important;
        animation: none !important;
        transform: translateY(-50%) !important;
    }
    
    .slogan-message p {
        white-space: normal !important;
        margin: 0 !important;
    }
    
    /* about-rd.htmlのスローガン調整 */
    .slogan-about {
        font-size: 14px !important;
        padding: 8px 12px !important;
        left: 50% !important;
        top: 50% !important;
        width: auto !important;
        max-width: 90% !important;
        white-space: normal !important;
        opacity: 1 !important;
        animation: none !important;
        transform: translate(-50%, -50%) !important;
    }
    
    /* works.htmlのスローガン調整 */
    .slogan-works {
        font-size: 12px !important;
        padding: 8px 12px !important;
        left: 50% !important;
        top: 50% !important;
        width: auto !important;
        max-width: 90% !important;
        white-space: normal !important;
        text-align: center !important;
        opacity: 1 !important;
        animation: none !important;
        transform: translate(-50%, -50%) !important;
    }
}

.g_map {
position: relative;
padding-top: 75%;
height: 0;
overflow: hidden;
}
.g_map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* おりたたみ
------------------------------------------------------------*/


.cp_actab {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    color: #808080;
}
.cp_actab input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.cp_actab label {
    font-weight: bold;
    line-height: 3;
    position: relative;
    padding: 0 0 0 1em;
    cursor: pointer;
    margin: 0 0 1px 0;
    background: #f5f5f5;
}
.cp_actab .cp_actab-content {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.35s;
    transition: max-height 0.35s;
    color: #333333;
    background: #ffffff;
}
.cp_actab .cp_actab-content p {
    margin: 1em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
    max-height: 20em;
}
/* Icon */
.cp_actab label::after {
    line-height: 3;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 3em;
    height: 3em;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
    content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
    transform: rotate(315deg);
}

/* メインバナーの左スライドインアニメーション定義 (トップページ用) */
@keyframes slideInFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 新規: 右から中央へスライドインするアニメーション (about-rd.html用) */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translate(50%, -50%); /* 右側から開始 */
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%); /* 中央に到達 */
    }
}

/* 新規: contact.html用のズームインフェードアニメーション */
@keyframes zoomInFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 新規: message.html専用の上から降りてくるアニメーション */
@keyframes slideDownFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-70px); /* 上から少し離れた位置から開始 */
    }
    100% {
        opacity: 1;
        transform: translateY(-50%); /* .slogan-messageのtop: 50%;と合わせて中央に固定 */
    }
}

/* グリッドホバーアニメーションとH3カラー設定 */
/* 画像全体をリンクにするための設定(HTML修正済み) */
.grid-link {
    display: block;
    text-decoration: none; 
    color: inherit;       
}

.grid-link p {
    color: #555555; /* 本文の文字色に戻す */
}

.grid img {
    /* アニメーションのなめらか設定 */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; 
    display: block; 
}

.grid-link:hover img {
    /* マウスオーバー時に画像を1.05倍に拡大し、わずかに暗くする */
    transform: scale(1.05);
    filter: brightness(90%);
}

.grid-link:hover h3 {
    /* マウスオーバー時に見出しの色を #28A6A5 に変更 */
    color: #28A6A5; 
}


/* --- WORKSページのための修正と統合 (ここから下をWORKS専用に置き換え) --- */
.works-grid-section {
    clear: both; /* 浮動要素の解除 */
    margin: 20px 0;
}

.works-category-box {
    /* ボックスの境界線(四角で囲む)とシャドウ設定 */
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #EBEBEB; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); 
    background-color: #FFFFFF;
}

.works-category-box h4 {
    /* 大カテゴリの見出し */
    color: #000;
    font-size: 110%;
    padding: 5px 0 5px 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #DDDDDD; /* カテゴリ名の下の線を薄いグレーに */
}

.works-category-box h5 {
    /* 小見出し */
    color: #333;
    font-size: 100%;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
}

.works-category-box ul {
    margin: 0 0 10px 10px;
}

/* --- WORKSページ アイキャッチ画像のスタイル (PC/スマホ共通) --- */
.works-eyecatch-img {
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto 15px auto; /* モバイル時は中央寄せ */
    border: 1px solid #ddd; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}


/* --- WORKSページ テキスト左・画像右のFlexboxレイアウト設定 (モバイルデフォルトは縦積み) --- */
.works-content-flex {
    display: flex; 
    flex-direction: column; /* スマートフォンでは縦並び */
    gap: 15px; 
}


/* PC表示(960px以上)でのレイアウト調整 */
@media only screen and (min-width: 960px) {
    /* 1. カテゴリボックスを2列にする */
    .works-grid-section {
        display: flex; 
        flex-wrap: wrap; 
        justify-content: space-between; /* 均等な配置 */
        gap: 20px; /* ボックス間の隙間 */
    }

    .works-category-box {
        width: calc(50% - 10px); /* 2列表示で隙間を考慮 */
        margin-bottom: 0; /* gapで制御するため! */
        float: none; 
        box-sizing: border-box; /* paddingを含めた幅計算 */
    }

    /* 2. 各カテゴリボックス内でテキスト左・画像を右に配置する */
    .works-content-flex {
        flex-direction: row; /* PCでは横に並べる */
        justify-content: space-between; 
        align-items: flex-start; /* 上揃え */
    }

    .works-text-content {
        /* 実績テキスト: 左側 (広い幅) */
        width: 60%; 
        order: 1; 
    }

    .works-image-content {
        /* 画像: 右側 (狭い幅) */
        width: 35%; 
        order: 2; 
        text-align: right; 
    }
    
    /* 画像が横並びになった際の調整 */
    .works-eyecatch-img {
        max-width: 100%;
        height: auto;
        margin: 0; /* 中央寄せを解除し、右に配置 */
    }
}