/*
 Theme Name:   Lightning Child
 Template:     lightning
*/

/** common **/
:root {
  --site-mincho: "ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS PMincho","ＭＳ Ｐ明朝","游明朝体","Yu Mincho","serif";
  --site-color: #00729f;
  --site-shadow: .2rem .2rem .4rem rgba(0, 0, 0, .7);
}
.ltg-slide-text-title, .top-desc h4, .top-company h4 { font-family: var(--site-mincho); }

/* header */
.device-pc .site-header { position: fixed; }
body:not(.header_scrolled) .site-header { box-shadow: none;  }
@media (max-width: 991.98px) { .site-header { background-color: var(--site-color); } .site-header-container { padding-left: 0; } }

.site-header-logo { background-color: var(--site-color); margin: 0; padding: 0 .5rem; width: auto !important; }
.device-pc .site-header-logo { padding: 0 1rem; }
@media (max-width: 991.98px) { .site-header-logo img { margin: unset; } }

#vk-mobile-nav-menu-btn { margin-top: 3px; }
body:not(.header_scrolled) .global-nav--layout--float-right a { color: #fff; }

/* swiper */
.ltg-slide-text-title { line-height: 1.5; text-shadow: var(--site-shadow)!important; }
.device-pc .ltg-slide-text-title { font-size: 3rem; letter-spacing: .1em; margin: 0 2rem; }
@media (max-width: 991.98px) { .ltg-slide-text-title span { font-size: 1.6rem; display: block; } }

/* body */
.site-body { padding: 0; }

/** contents **/

/* latest-post */
.latest-post-area { background-color: #f8f8f8; box-shadow: 0 .1875rem .3125rem rgba(0, 0, 0, .2); padding: .625rem 0; }
.latest-post-area .inner { margin: 0 auto; max-width: 68rem; padding: 0 .625rem; } /* 中央揃え用のコンテナ */
.latest-post { align-items: center; display: flex; flex-wrap: wrap; gap: .625rem; } /* 投稿1件 */
.latest-post-date { font-size: .85em; color: #888; min-width: 5rem; } /* 日付 */
.latest-post-category span { color: #fff; background-color: var(--site-color); border-radius: .4rem; display: inline-block; font-size: .8rem; margin-right: .3rem; padding: .25rem .5rem; } /* カテゴリ（複数もOK） */
.latest-post-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* タイトル */
.latest-post-title a { color: #333; font-size: 1.1rem; font-weight: bold; text-decoration: none; }
.latest-post-title a:hover { text-decoration: underline; }

/** contents common **/

.full-area { margin-left: calc(50% - 50vw); max-width: 100vw; position: relative; width: 100vw; }
@media screen and (max-width:768px) { .top-service-box { .common-box { box-shadow: -.125rem 0 0 rgba(0,0,0,.1), .125rem 0 0 rgba(0,0,0,.1); } } }
.common-btn { display:inline-block; padding:1rem 4rem; background:var(--site-color); color:#fff; text-decoration:none; }
.common-btn:hover { color:#fff; opacity: .7; }

/* common：entry-body on class add */
.top-desc h4, .top-company h4, .top-service h4, .top-news h4
{ font-weight: bold; margin-bottom: 1rem; text-align: center; }
.device-pc .top-content-area h4, .device-pc .top-company h4,.device-pc .top-service h4, .top-news h4
{ font-size: 2rem; line-height: 1.5; letter-spacing: .1em; }
.top-service h4, .top-news h4 { color: var(--site-color); }
.top-service h4 span, .top-news h4 span { color: #333; display: block; font-size: 1rem; }
.top-desc p, .top-company p, .top-service p { font-size: 1rem; text-align: center; }
.common-p-center-txt { font-size: 1rem; text-align: center; }
@media (max-width: 991.98px) { .span-br-none span { display: block; } .span-br-none br { display: none; } }

/** contents **/

/* top-content */
.top-desc { padding: 2rem 0; line-height: 1.6; text-align: center; } .device-pc .top-desc { padding: 3rem 0; }
.top-desc h4 {font-size: 1.4rem; } .device-pc .top-desc h4 {font-size: 1.8rem; }
.device-pc .top-desc img { width: 30%; }
body:not(.device-pc) .top-desc img { width: 80% !important; }

/* top-company */
.top-company { position: relative; overflow: hidden; color:#fff; z-index:0; }

/* 背景レイヤー共通 */
.top-company .bg-layer { background: no-repeat center center / cover; inset:0; opacity:0; position:absolute; transition: opacity 0.8s ease; will-change: opacity; z-index:-1; }
.device-pc .top-company .bg-layer { background-attachment:fixed; }

/* 各レイヤーに画像を割当て（プリセット） */
.top-company .bg-layer.layer-dismantle { background-image: url(/img/top_menu_area03.webp); }
.top-company .bg-layer.layer-install   { background-image: url(/img/top_menu_area04.webp); }
.top-company .bg-layer.layer-other     { background-image: url(/img/top_menu_area.webp); }

/* ラジオのチェックで該当レイヤーだけ表示（opacity:1） */
#tab-dismantle-radio:checked ~ .top-company .bg-layer.layer-dismantle,
#tab-install-radio:checked:checked ~ .top-company .bg-layer.layer-install,
#tab-install-radio:checked ~ .top-company .bg-layer.layer-install,
#tab-other-radio:checked ~ .top-company .bg-layer.layer-other { opacity: 1; }

.top-company-title { padding: 6rem 0; }
.top-company-title h4 { text-shadow: var(--site-shadow); }

/* top-company-tab */
.top-company-tab { display: flex; justify-content: center; margin-top: -2.7rem; position: relative; z-index: 2; }
.device-pc .top-company-tab { margin-top: -3.5rem; }
.tab-list { display: flex; gap: .5rem; list-style: none; font-weight: bold; margin: 0; padding: 0; }
.device-pc .tab-list { gap: 1rem; }
.tab-list .tab { border-radius: .6rem .6rem 0 0; display: inline-block; padding: .6rem 1.2rem; text-decoration: none; transition: all .3s; }
.device-pc .tab-list .tab { padding: 1rem 0; width: 11rem; text-align: center; }
body:not(.device-pc) .tab-list .tab { font-size: .8rem; padding: .72rem 1.2rem; }
/* すべてのタブを非アクティブデザインで初期化 */
.tab-list .tab { background: rgba(247,247,247,.5); color:#fff; cursor:pointer; }

/* ラジオチェックされたタブをアクティブに */
#tab-dismantle-radio:checked ~ .top-company-tab .tab[for="tab-dismantle-radio"],
#tab-install-radio:checked ~ .top-company-tab .tab[for="tab-install-radio"],
#tab-other-radio:checked ~ .top-company-tab .tab[for="tab-other-radio"] { background:#fff; color:var(--site-color); cursor:default; }
/* 非アクティブタブの hover */
.tab-list .tab:hover { background: rgba(247,247,247,.7); }

/* パネル部分 */
.top-company-panel { padding: 2rem 0 3rem; text-align: center; }
.tab-panels { margin: 2rem 0; }
.device-pc .tab-panels { margin: 2rem 8rem; }
.tab-panel { animation: fadeIn .4s ease; background: #fff; display: none; }
.tab-panel-inner { display:flex; flex-wrap:wrap; gap: 2rem; align-items:flex-start; }
.tab-panel-inner img { height:auto; flex-shrink:0; }
.device-pc .tab-panel-inner img { width:45%; }
body:not(.device-pc) .tab-panel-inner img { width: 100% !important; }
.tab-panel-text { flex:1; min-width:18rem; text-align: left; }
@media (min-width: 1024px) { .tab-panel-text p { font-size: 1.1rem !important; } }
@media screen and (max-width:768px) { .tab-panel-inner { flex-direction:column; } .tab-panel-inner img, .tab-panel-text { max-width:100%; min-width:auto; } }

/* ラジオチェックで表示 */
#tab-dismantle-radio:checked ~ .top-company-panel .tab-panels #tab-dismantle,
#tab-install-radio:checked ~ .top-company-panel .tab-panels #tab-install,
#tab-other-radio:checked ~ .top-company-panel .tab-panels #tab-other { display: block; }
/* フェードアニメーション */
@keyframes fadeIn { from { opacity:0; transform:translateY(.5rem); } to { opacity:1; transform:translateY(0); } }

/* top-service */
.top-service { background-color: #f6f6f6; padding: 2rem 0 3rem; text-align: center; }
.top-service-title { margin: 1rem 0 0; }
.top-service-title p { margin: 0; }

/* top-service-box */
.top-service-box { background: url(/img/top_service_box.webp) no-repeat center center / cover; color: #fff; display: grid; grid-template-columns: repeat(4, 1fr); }
@media (min-width: 769px) { .top-service-box { background-attachment: fixed; } }
@media (max-width: 768px) { .top-service-box { background-attachment: scroll; grid-template-columns: 1fr 1fr; } }

.service-item { border-bottom: 1px solid; border-right: 1px solid; overflow: hidden; position: relative; }
.service-item:last-child { border-right: none; }

/* inner 全体を下げる */
.service-inner { background: transparent; box-sizing: border-box; padding: 1.25rem; transform: translateY(100%); transition: transform .5s ease, background-color 1s ease-in-out; }

/* header */
.service-inner-header { z-index: 2; transform: translateY(-170%); }
.service-inner-header h5 { font-size: 1.1rem; margin: 0 0 .25rem 0; }
.service-inner-header span { display: block; font-size: .9rem; margin: 0 0 .6rem 0; }

/* body 初期状態は opacity 0 */
.service-inner-body { opacity: 0; transition: opacity .5s ease; }

/* hover で inner 全体せり上がり + 背景フェードイン */
.service-item:hover .service-inner { background-color: rgba(0, 73, 104, .4); transform: translateY(0); }
.service-item:hover .service-inner-body { opacity: 1; }
.service-item:hover .service-inner-header { transform: translateY(0); }

/* body 内テキスト */
.service-inner-body p, .service-inner-body a { font-size: 1rem; line-height: 1.6; margin-bottom: .6rem; }
.service-inner a { color: #fff; display: inline-block; margin: 1rem 0 0; text-decoration: underline; }
.service-inner a:hover { opacity: .7!important; }

/* top-news */
.top-news { padding: 3rem 0; text-align: center; }
body:not(.device-pc) .top-news { padding: 2rem 0 3rem; }
.post-list .inner { border: 1px solid #ccc; margin: 1rem 0 2rem; }
.post-list .latest-post { border-bottom:1px solid #ccc; padding: 1rem; position: relative; overflow: hidden; transition: color .25s ease; }
.post-list .latest-post::before { content: ""; position: absolute; inset: 0; background: var(--site-color); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.post-list .latest-post:last-child { border-bottom: none; }
.post-list .latest-post > * { position: relative; z-index: 2; }
.post-list .latest-post-date, .post-list .latest-post-title a, .post-list .latest-post-category span { transition: color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease; }
.post-list .latest-post:hover::before { opacity: .7; }
.post-list .latest-post:hover .latest-post-date, .post-list .latest-post:hover .latest-post-title a { color: #fff; }
.post-list .latest-post-category span { border: 1px solid transparent; }
.post-list .latest-post:hover .post-list .latest-post-category span { background-color: transparent; border-color: #004968; color: #fff; opacity: .95; }
.post-list .latest-post-title { text-align: left; }

/* top-work */
.top-work { align-items: start; box-sizing: border-box; display: grid; gap: 1.5rem; grid-auto-rows: auto; grid-template-columns: repeat(2, 1fr); padding: 2rem 0 3rem; }
.top-work > .common-btn { grid-column: 1 / -1; justify-self: center; margin-top: 0.5rem; }
.top-work .work-image-overlay { background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); inset: 0; position: absolute; transition: opacity 0.6s ease-in-out; }
.top-work .work-image-wrap { background-position: center; background-size: 120%; height: 19rem; margin-bottom: 0.5rem; position: relative; transition: background-size 0.6s ease-in-out; width: 100%; }
.top-work .work-item { overflow: hidden; padding: 0; position: relative; }
.top-work .work-item h4 { display: block; font-size: 1.1rem; line-height: 1; margin: 0 0 0.8rem 0; padding: 0 0.5rem; position: relative; }
.top-work .work-item h4 span { display: inline-block; padding-left: 0; padding-top: 0.625rem; position: relative; }
.top-work .work-item h4 span::before { background: #004968; content: ""; height: 0.25rem; left: 0; position: absolute; top: 0; width: 100%; }
.top-work .work-item:hover .work-image-overlay { opacity: 0; }
.top-work .work-item:hover .work-image-wrap { background-size: 100%; cursor: pointer; }
.top-work .work-item p { color: #333; font-size: 0.95rem; margin: 0; padding: 0.5rem 1rem; }
@media(max-width:680px) { .top-work { grid-template-columns: 1fr; } .top-work .work-image-wrap { height: 15.2rem; } .top-work .work-item h4 { font-size: 1rem; } .top-work .work-item p { font-size: 0.8rem; } }

/* footer-banner */
.footer-banner { display: flex; flex-wrap: wrap; gap: 0; }
.footer-item { flex: 1 1 25%; overflow: hidden; position: relative; cursor: pointer; }
.footer-banner a { color: #fff; display: block; position: relative; text-decoration: none; }
.footer-image-wrap { height: 12.5rem; overflow: hidden; width: 100%; }
.footer-image { background-position: center; background-size: cover; height: 100%; transform: scale(1.2); transition: transform 0.8s cubic-bezier(0.4,0,0.2,1); width: 100%; }
.footer-item:hover .footer-image { transform: scale(1); }
.footer-title-area { top: 50%; left: 1.5rem; position: absolute; transform: translateY(-50%); z-index: 2; }
.footer-title { font-size: 1.1rem; font-weight: bold; margin: 0 0 0.25rem 0; padding: 0 0.25rem; }
.footer-sub-title { font-size: 0.9rem; margin: 0; padding: 0 0.25rem; opacity: 0.85; }
.footer-item::before { background: linear-gradient(to right, rgba(9,40,71,0.6) 0%, rgba(9,40,71,0) 100%); content: ""; inset: 0; position: absolute; z-index: 1; }
@media (max-width: 1024px) { .footer-item { flex: 1 1 50%; } }
@media (max-width: 600px) { .footer-item { flex: 1 1 100%; } .footer-image-wrap { height: 11rem; } .footer-title { font-size: 1rem; } .footer-sub-title { font-size: 0.8rem; } }

/* site-footer */
.footer-nav-list { text-align: center; font-size: 1rem; }
@media (min-width: 991.98px) { .footer-nav-list { font-size: .8rem; margin-top: 3rem; } }
.site-footer-copyright { border-top: 1px solid #eee; margin-left: calc(50% - 50vw); max-width: 100vw; position: relative; width: 100vw; }