/*
Theme Name: tiny hands lab
Author: K.U.G.
Description: tiny hands lab original
Version: 1.0
*/
/* ========== Reset ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0}
main{display:block}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:normal;margin:0}
p{letter-spacing: 0.1rem;}
ul,ol{list-style:none;margin:0;padding:0}
img{border-style:none;max-width:100%;height:auto;display:block}
a{background-color:transparent;text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit;margin:0}
button{background:transparent;border:0;padding:0;cursor:pointer}
pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:1em}
b,strong{font-weight:bolder}

/* ========== Base ========== */
:root{--bg:#fefdfc;--text:#3e3a39;--ink:#3e3a39;--line:#e9e3dc;--accent:#ffcc66;--black:#111;--white:#fff;}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"lato","dnp-shuei-mgothic-std","ShueiNijimiMaruGo B",-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic UI','YuGothic','Meiryo',sans-serif;letter-spacing:.02em;line-height:1.8;font-size:16px;font-size: .85rem;;}
.site-header{position:relative;z-index:50;background:#fefdfc;-webkit-transform:translateZ(0);transform:translateZ(0);transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;}
body.is-fixed .site-header{position:fixed;top:0;left:0;right:0;box-shadow:0 4px 12px rgba(0,0,0,.06);}
body.is-fixed.header-enter .site-header{-webkit-transform:translateY(-8px);transform:translateY(-8px);}
body.is-fixed.header-pinned .site-header{-webkit-transform:translateY(0);transform:translateY(0);}
@media (min-width: 769px){
.is-fixed .site-header h1{width:8%;padding-top:20px;}
.is-fixed .site-header_img{width:10%;padding-top:20px;}
}
.is-fixed .site-header h1{width:8%;padding:20px 3% 0 0;}
.is-fixed .site-header_img{width:6%;padding-top:15px;}
.is-fixed .header-inner{width:1200px;margin-inline:auto;padding: 0 35px 10px;;}
.is-fixed .global-nav ul{padding-top: 35px;}
.header-inner{display:flex;align-items:flex-start;}

/* ========== Section Common ========== */
.main_inner{width:1200px;padding:0 35px;margin:auto;position: relative;}
.page-section{padding:60px 0;}
.page-section__title{font-size:24px;font-weight:800;margin:0 0 22px}
.page-section__header{display:flex;align-items:center;gap:32px;margin-bottom:22px;}
.page-section__deco{width:100%;flex-shrink:1;}
section[id],.page-section {scroll-margin-top: var(--header-offset, 30px);}
.page-section { display: flow-root;}
.page-section__header { margin-top: 0;}

.section__title{font-size:4rem;font-weight:bold;}
.deco-line{padding:40px 0;text-align:center;}
.deco-line img{margin-inline:auto;}
.btn{display:inline-block;padding:12px 28px;border:1px solid var(--ink);line-height:1;transition:all .25s ease;letter-spacing:.1rem;width: 250px;text-align: center;text-decoration: none;padding: 10px 20px;}
.btn-invert{background:var(--ink);color:var(--white);border-color:var(--ink);}

/* ========== Header ========== */
.header-inner{width:1200px;margin-inline:auto;padding: 0 35px;}
.site-header h1{width:16%;padding-top:120px;}
.site-header_img{width:20%;padding-top:120px;}
.brand{display:inline-grid;gap:2px}
.brand__line1,.brand__line2,.brand__line3{font-weight:800;line-height:1}
.brand__line1{font-size:22px}
.brand__line2{font-size:22px}
.brand__line3{font-size:22px}
.global-nav{margin-left:auto;}
.global-nav ul{display:flex;gap:20px;align-items:center;padding-top: 45px;}
.global-nav a{padding:6px 4px;border-radius:6px;font-weight:bold;}
.nav-toggle{display:none;flex-direction:column;gap:4px;width:40px;height:32px;align-items:center;justify-content:center}
.nav-toggle__bar{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease, opacity .3s ease;}

/* ===== メニューの下線アニメーション ===== */
.global-nav ul li a { position: relative; display:inline-block; }
.global-nav ul li a::after {content: '';position: absolute;left: 0;bottom: 4px;width: 100%;height: 2px;background: #000;opacity: 0;visibility: hidden;transform: translateY(6px);transition: all 0.3s ease;}
.global-nav ul li a:hover::after,.global-nav ul li a.is-active::after {opacity: 1;visibility: visible;transform: translateY(0);}

.global-nav .lang-switcher a { position: relative;display: inline-block;line-height: 1; padding-bottom: 8px;}
.global-nav .lang-switcher a::after { bottom: 0;}

.lang-switcher span.is-current {font-weight: 700; /* 現在の言語（JPまたはEN）を太字 */}
.lang-switcher a[data-lang="en"]:hover {font-weight: 700; /* EN hoverで太字 */}

/* ▼ 「×」印にするためのスタイルを追加 ▼ */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.is-open .nav-toggle__bar:nth-child(2){opacity:0;}
.nav-toggle.is-open .nav-toggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
/* lang-switcher */
.lang-switcher{padding:6px 12px 0px;border:1px solid var(--ink);line-height:1;}
.lang-switcher .is-current{font-weight:bold;}
.lang-switcher a{padding:0;font-weight:normal;border-radius:0;}
.lang-switcher a:hover{background:none;}


/* ========== KV ========== */
.intro-icons{display:flex;justify-content:space-between;}
.intro-icons img{width:45%;}
.kv{padding:32px 0 16px}
.kv__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;}
.lead{width:min(760px, 92%);font-size:1rem;line-height:1.9;margin:90px 0;}
.pillars{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:24px;margin-top:70px}
.pillar{padding:0 15%;text-align:center}
.pillar img{margin-inline:auto;margin-bottom:12px;width:40%;}
.pillar h3{font-size:18px;font-weight:bold;:0 0 6px}
.pillar p{margin:0;text-align:left;}
.pillar.pillar_x{align-self:center;font-size:2rem;font-weight:bold}

/* ========== Works ========== */
.works__content{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:start;}
.works__description{line-height:1.7;}
.works__description ul{margin-top:1em;}
.works__description li{list-style-type:disc;list-style-position:inside;margin-bottom:0.5em;}
.works__description a:hover{text-decoration:none;}
.work-list{display:grid;grid-template-columns:repeat(2,1fr);}
.work-card__body{display:block;overflow:hidden;border-radius:10px}
.work-card__body img{transition:transform .4s ease}
.work-card__body:hover img{transform:scale(1.04)}
.cta-wrap{margin-top:22px}

/* ========== About ========== */
.btn-invert:hover{background:var(--white);color:var(--ink);}
.about__content{display:flex;}
.about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.about__text p{margin:0 0 14px}
.about__image{margin-left: 15%;}
.about__more{margin-top:18px}
.about__more-content{max-height:0;overflow:hidden;opacity:0;transition:max-height 1.5s ease-out, opacity 0.4s ease-out;}
.about__more-content.is-open{max-height:2000px;opacity:1;}
.about__h3{font-size:1.6rem;font-weight:bold;letter-spacing: 0.1rem; margin-top:2.5em;margin-bottom:1.5em;padding-bottom:0.5em;}
.about__image img{width:66%;}

/* ========== Contact ========== */
.contact__lead{margin:0 0 16px}

/* ========== Footer ========== */
.site-footer{padding:48px 0 64px;}
.footer-inner img{margin: auto;}
.footer-inner img:nth-of-type(1){width: 24%;}
.footer-inner img:nth-of-type(2){width: 20%;}
.copyright{letter-spacing:.12em;margin-top: 55px; text-align: center;}

.side_txt{position:fixed;top:88%;right:35px;font-size:14px;font-weight:400;letter-spacing:0.1em;white-space:nowrap;transform:rotate(90deg);transform-origin:top right;z-index: 100;}

/* ========== Responsive ========== */
@media (max-width: 1024px){.work-list{grid-template-columns:repeat(3,1fr)}.about__grid{grid-template-columns:1fr;gap:24px}}

@media (max-width: 768px){
body{font-size: .8rem;}

/*  Section Common  */
.main_inner{width:100%;padding:0 5%;}
.page-section{overflow: hidden; padding:44px 0}
.page-section__title{font-size:20px}
.section__title{font-size:1.8rem;}

/*  Header  */
.is-fixed .site-header h1{width:13%;padding:0;}
.is-fixed .site-header_img{width:14%;padding-top:0px;}
.is-fixed .header-inner{width:100%;margin:auto;padding: 3% 5%;}
.is-fixed .global-nav ul{padding-top: 6px;}

.site-header h1{width:13%;padding-top:0px;}
.site-header_img{width:14%;padding-top:0px;}
.site-header.is-open .global-nav{transform:translateY(0);opacity:1;pointer-events:auto}
.header-inner{width:100%;margin:auto;padding: 3% 5%;}
/* .global-nav{position:fixed;inset:75px 0 auto 0;background:rgba(254,253,252,.96);border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;} */
.global-nav{position:fixed;inset:74px 0 auto 0;background:rgba(254,253,252,.96);border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;}

.global-nav ul{flex-direction:column;gap:0;padding:6px 8px}
.global-nav li{width:100%}
.global-nav a{display:block;padding:14px 12px}
.nav-toggle{display:flex;margin-left: auto;margin-top: 1%;}
.brand__line1,.brand__line2,.brand__line3{font-size:20px}

/* lang-switcher */
.lang-switcher{padding:0 12px 6px;}
.lang-switcher a{display: inline-block;}
.lang-switcher span.is-current{padding: 14px 12px;}
.global-nav li.lang-switcher{width: auto;}

/*  KV  */
.lead{width:min(760px, 92%);font-size:.85rem;margin:30px 0;}
.kv__grid{grid-template-columns:1fr;gap:12px}
.pillars{grid-template-columns:1fr;gap:14px}
.intro-icons{display: block;}
.intro-icons img{margin: 0 auto 30px; width: 85%;}
/*  Works  */
.works__content{grid-template-columns:1fr;gap:24px;}
.work-list{grid-template-columns:1fr}

/* about */
.about__image{position: absolute;z-index: -1; opacity: .7;}

/* side_txt */
.side_txt{font-size: .55rem; top: 60%;right: 1.25%;}


}