/*
Theme Name: HK Group
Theme URI: https://handk-group.co.jp/
Author: H&K Group
Description: 株式会社H&K Group コーポレートサイト用オリジナルテーマ（営業代行・映像制作・飲食店経営）
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hk-group
*/

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --teal:#0f9aac; --teal-d:#0b7d8c; --teal-bg:#ecfbfc; --teal-bd:#95e6ec;
  --navy:#3a5087; --ink:#444; --text:#5a5f66; --line:#dddddd; --gray-bg:#f4f6f7;
}
html{scroll-behavior:smooth;}
body{color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.8;}
img{max-width:100%;display:block;}
a{color:var(--teal);text-decoration:none;transition:.2s color;}
a:hover{color:var(--teal-d);}
.wrap{max-width:1200px;margin:0 auto;padding:64px 30px;}
.ttl{font-size:40px;font-weight:300;line-height:1;text-align:center;color:var(--ink);letter-spacing:.06em;margin-bottom:14px;}
.ttl-sub{text-align:center;font-size:13px;letter-spacing:.16em;color:var(--teal);margin-bottom:40px;}
.btn{display:inline-block;margin-top:22px;padding:15px 26px;background:var(--teal-bg);border:1px solid var(--teal-bd);color:var(--teal);font-size:12px;letter-spacing:2px;transition:.2s all;}
.btn:hover{border-color:var(--teal);background:var(--teal);color:#fff;}
.btn-fill{display:inline-block;padding:15px 26px;border:1px solid var(--teal);background:var(--teal);color:#fff;font-size:12px;letter-spacing:2px;transition:.2s all;}
.btn-fill:hover{background:var(--teal-d);color:#fff;}

to{opacity:1;transform:none;}}
.ph{position:relative;width:100%;background:repeating-linear-gradient(135deg,#e7eef2 0 14px,#eef3f6 14px 28px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.ph::after{content:attr(data-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9bb0bd;background:rgba(255,255,255,.65);border:1px solid #cfdde6;padding:4px 12px;}
.r43{aspect-ratio:4/3;} .r32{aspect-ratio:3/2;} .r169{aspect-ratio:16/9;} .r11{aspect-ratio:1/1;}
.bizimg{display:block;width:100%;object-fit:cover;border:1px solid var(--line);}
.services-item .bizimg{aspect-ratio:3/2;}
.slist-img .bizimg{aspect-ratio:4/3;}
.topbar{border-bottom:1px solid var(--line);font-size:12px;color:#777;}
.topbar-in{max-width:1200px;margin:0 auto;padding:9px 30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;}
.topbar i{color:var(--teal);font-style:normal;margin-right:5px;}
.headnav{max-width:1200px;margin:auto;padding:24px 30px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{height:38px;width:auto;display:block;}
.logo-lockup{height:50px;width:auto;display:block;}
.logo-text{font-weight:700;font-size:19px;letter-spacing:.06em;color:var(--navy);font-family:Georgia,"Times New Roman",serif;}
.logo-text .amp{color:var(--teal);font-style:italic;font-weight:400;padding:0 .12em;}
.logo-text small{display:block;font-family:-apple-system,sans-serif;font-size:9px;letter-spacing:.16em;color:#9aa3b2;font-weight:400;margin-top:2px;}
.gnav{display:flex;align-items:center;gap:30px;}
.gnav a{color:#8a8f96;font-weight:700;font-size:14px;}
.gnav a:hover{color:var(--ink);}
.gnav a.current{color:var(--teal);}
.navbtn{display:none;width:42px;height:42px;border:1px solid var(--line);background:none;border-radius:3px;position:relative;cursor:pointer;}
.navbtn span,.navbtn span::before,.navbtn span::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--ink);transform:translate(-50%,-50%);transition:.3s;}
.navbtn span::before{transform:translate(-50%,-6px);} .navbtn span::after{transform:translate(-50%,6px);}
.nav-open .navbtn span{background:transparent;}
.nav-open .navbtn span::before{transform:translate(-50%,0) rotate(45deg);}
.nav-open .navbtn span::after{transform:translate(-50%,0) rotate(-45deg);}
.eyecatch{position:relative;width:100%;height:520px;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;}
.eyecatch-bg{position:absolute;inset:0;background:linear-gradient(rgba(16,26,46,.30),rgba(16,26,46,.42)),url(img/hero.jpg) center/cover;}

.eyecatch-msg{position:relative;width:58%;min-width:560px;margin:auto 60px;}
.eyecatch-1{display:inline-block;padding:20px 22px;background:rgba(15,154,172,.82);color:#fff;font-size:44px;font-weight:400;line-height:1.5;}
.eyecatch-1 b{font-weight:700;}
.eyecatch-2{display:inline-block;margin-top:14px;padding:14px 18px;background:rgba(15,154,172,.82);color:#fff;font-size:15px;line-height:1.7;max-width:36em;}
.ourmission{display:flex;justify-content:space-between;align-items:center;gap:50px;}
.ourmission-img{width:48%;}
.ourmission-collage{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
.ourmission-collage .ph.big{grid-column:1/3;grid-row:span 1;}
.ourmission-text{width:48%;}
.ourmission-text h2{font-size:30px;font-weight:300;letter-spacing:.08em;color:var(--ink);margin-bottom:6px;}
.ourmission-text .jp{font-size:20px;font-weight:500;color:var(--navy);margin-bottom:18px;line-height:1.5;}
.ourmission-text p{margin-top:14px;font-size:15px;}
.services{background:var(--gray-bg);}
.services-list{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1140px;margin:auto;}
.services-item{text-align:center;}
.services-item-cap{margin-top:14px;font-size:19px;color:var(--ink);font-weight:600;}
.services-item-text{margin-top:6px;font-size:14px;line-height:1.7;}
.info-list{max-width:860px;margin:0 auto;}
.info-list li{display:flex;gap:24px;padding:16px 4px;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap;}
.info-list li:first-child{border-top:1px solid var(--line);}
.info-date{color:#999;min-width:90px;}
.info-tag{display:inline-block;font-size:11px;color:#fff;background:var(--navy);padding:1px 10px;border-radius:2px;letter-spacing:.05em;}
.info-more{text-align:center;margin-top:30px;}
.pagettl{padding:34px 0;background:var(--gray-bg);border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);}
.pagettl-in{max-width:1200px;margin:auto;padding:0 30px;}
.pagettl-en{font-size:40px;font-weight:300;color:var(--ink);letter-spacing:.06em;line-height:1;}
.pagettl-jp{font-size:13px;letter-spacing:.16em;color:var(--teal);margin-top:10px;}
.secttl{border-bottom:1px solid var(--line);padding-bottom:.4em;margin-bottom:1.2em;color:var(--ink);font-size:30px;font-weight:300;letter-spacing:.04em;}
.slist-box{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:40px;}
.slist-box+.slist-box{margin-top:70px;}
.slist-text{width:48%;}
.slist-img{width:46%;}
.slist-ttl{font-size:30px;font-weight:600;color:var(--ink);margin-bottom:6px;line-height:1.3;}
.slist-ttl span{display:block;font-size:13px;letter-spacing:.18em;color:var(--teal);font-weight:400;margin-bottom:8px;}
.slist-text p{font-size:15px;}
.slist-points{margin-top:16px;}
.slist-points li{position:relative;padding-left:18px;font-size:14px;margin:5px 0;}
.slist-points li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:2px;background:var(--teal);}
.policy{text-align:center;margin-bottom:60px;}
.policy-en{font-size:13px;letter-spacing:.2em;color:var(--teal);}
.policy-title{font-size:40px;font-weight:700;color:#222;margin:12px 0 24px;line-height:1.4;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;}
.policy p{max-width:620px;margin:10px auto 0;font-size:15px;}
.companyinfo{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);}
.companyinfo dt{width:220px;padding:16px 12px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);font-size:14px;}
.companyinfo dd{width:calc(100% - 220px);padding:16px 12px;border-bottom:1px solid var(--line);font-size:14px;}
.companyinfo dd ol{list-style:decimal;padding-left:1.5em;line-height:1.9;margin:0;}
.accessmap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-top:50px;}
.accessmap-text{width:48%;}
.accessmap-text h3{font-size:24px;font-weight:400;color:var(--ink);margin-bottom:14px;}
.accessmap-map{width:48%;}
.contact-lead{font-size:15px;margin-bottom:30px;}
.mailform{width:100%;}
.mailform tr{display:block;border-bottom:1px solid #eee;padding:14px 0;}
.mailform th{display:block;text-align:left;font-size:14px;color:var(--ink);font-weight:600;margin-bottom:8px;}
.mailform td{display:block;}
.req,.opt{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:2px;font-size:11px;letter-spacing:1px;vertical-align:middle;}
.req{color:#fff;background:var(--teal);} .opt{background:#e3e7ea;color:#777;}
.mailform input,.mailform select,.mailform textarea{width:100%;padding:11px;border:1px solid var(--line);font-size:16px;font-family:inherit;background:#fff;}
.mailform input:focus,.mailform select:focus,.mailform textarea:focus{outline:1px solid var(--teal);background:var(--teal-bg);}
.mailform textarea{min-height:150px;resize:vertical;}
.consent{display:flex;gap:8px;align-items:flex-start;margin:24px 0;font-size:14px;}
.consent input{width:18px;height:18px;margin-top:5px;accent-color:var(--teal);}
.form-send{text-align:center;margin-top:8px;}
.form-send button{padding:14px 44px;border:none;background:var(--teal);color:#fff;font-size:15px;letter-spacing:.1em;cursor:pointer;border-radius:4px;transition:.2s;}
.form-send button:hover{background:var(--teal-d);}
.contact-direct{display:flex;gap:40px;flex-wrap:wrap;margin-top:46px;padding-top:30px;border-top:1px solid var(--line);}
.contact-direct .lb{font-size:12px;letter-spacing:.14em;color:#999;}
.contact-direct .vl{font-size:22px;color:var(--ink);font-weight:600;}
.thanks{text-align:center;padding:30px 0;}
.thanks .mk{width:60px;height:60px;border-radius:50%;background:var(--teal);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
.thanks h2{font-size:26px;color:var(--ink);font-weight:600;margin-bottom:14px;}
.thanks p{font-size:15px;margin-bottom:26px;}
footer{border-top:1px solid var(--line);}
.company{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;}
.company-info{flex-basis:34%;font-size:14px;}
.company-info .logo{margin-bottom:18px;}
.company-info p{font-size:13px;line-height:1.7;color:#777;}
.company-info-links{margin-top:14px;}
.company-info-links a{display:block;font-size:13px;margin:4px 0;}
.company-adress{flex-basis:60%;font-size:14px;}
.company-adress .area{font-size:20px;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.company-adress .area i{color:var(--teal);font-style:normal;}
.company-adress p{font-size:13px;line-height:1.7;color:#777;}
.footerlink{background:#eee;padding:26px 0;}
.footerlink-list{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;font-size:13px;}
.footerlink-list a{color:#666;}
.footerlink-list a:hover{color:var(--teal);}
.copyright{max-width:1200px;margin:auto;padding:22px 30px;font-size:12px;color:#999;display:flex;justify-content:space-between;}

@media(max-width:880px){
  .gnav{position:fixed;inset:auto 0 auto 0;top:0;margin-top:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:78px 0 14px;transform:translateY(-120%);transition:.35s;z-index:40;}
  .nav-open .gnav{transform:none;}
  .gnav a{width:100%;padding:14px 30px;border-top:1px solid var(--line);}
  .navbtn{display:block;z-index:50;}
  .headnav{position:relative;z-index:50;background:#fff;}
  .eyecatch{height:380px;}
  .eyecatch-msg{width:100%;min-width:auto;margin:auto 18px;}
  .eyecatch-1{font-size:26px;}
  .ourmission{flex-wrap:wrap;} .ourmission-img,.ourmission-text{width:100%;}
  .ourmission-text{margin-top:30px;}
  .services-list{grid-template-columns:1fr;}
  .slist-text,.slist-img{width:100%;}
  .slist-img{margin-bottom:20px;}
  .companyinfo dt,.companyinfo dd{width:100%;padding:10px 6px;}
  .companyinfo dt{border-bottom:none;padding-bottom:0;}
  .accessmap-text,.accessmap-map{width:100%;}
  .company-info,.company-adress{flex-basis:100%;}
  .copyright{flex-direction:column;gap:8px;}
}

/* ===== WordPress additions ===== */
.info-list li a{color:inherit;}
.info-list li a:hover{color:var(--teal);}
.news-body{max-width:860px;margin:0 auto;font-size:15px;}
.news-body h2{font-size:22px;color:var(--ink);margin:1.6em 0 .6em;border-left:4px solid var(--teal);padding-left:.6em;}
.news-body h3{font-size:18px;color:var(--ink);margin:1.4em 0 .5em;}
.news-body p{margin:1em 0;}
.news-body ul,.news-body ol{margin:1em 0 1em 1.6em;}
.news-body img{height:auto;margin:1em 0;}
.news-meta{max-width:860px;margin:0 auto 18px;color:#999;font-size:13px;display:flex;gap:14px;align-items:center;}
.pagenav{max-width:860px;margin:40px auto 0;display:flex;justify-content:space-between;font-size:14px;}
.wpcf7 .mailform input,.wpcf7 .mailform select,.wpcf7 .mailform textarea{width:100%;}
.wpcf7-not-valid-tip{color:#c0392b;font-size:12px;margin-top:4px;display:block;}
.wpcf7 form .wpcf7-response-output{margin:20px 0 0;padding:12px 16px;border:1px solid var(--teal);color:var(--teal-d);font-size:14px;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}