/*
Theme Name: MIMOZA
Theme URI: https://mi-mo-za.com/
Author: 合同会社MIMOZA
Description: 合同会社MIMOZA のコーポレートサイト用テーマ。ページの「テンプレート」を選ぶと、TOP／WORKS／COMPANY／CONTACT の見た目に切り替わります。
Version: 1.0.10
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mimoza
*/

:root{
  --sumi:#231815; --kami:#FFFFFF; --kinari:#FDF8EC; --mimoza:#F0C05A;
  --usuzumi:#7A6E66; --kei:#E4DCCE;
  --min:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --goth:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --head-h:64px;
}
*{box-sizing:border-box}
/* 隠す指定を必ず効かせる（.work の display:flex に負けないように） */
[hidden]{display:none !important}
body{background:var(--kami); color:var(--sumi); font-family:var(--goth); font-size:16px; line-height:2; -webkit-font-smoothing:antialiased; padding-top:var(--head-h)}
a{color:inherit}
:focus-visible{outline:2px solid var(--mimoza); outline-offset:3px}
img{max-width:100%}


.site-head{position:fixed; top:0; left:0; right:0; z-index:50; height:var(--head-h); background:var(--kami); border-bottom:1px solid var(--kei)}
.head-in{max-width:1080px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px}
.wordmark{display:flex; align-items:center; gap:11px; line-height:0; text-decoration:none; background:none; border:0; cursor:pointer; color:inherit; padding:0; flex:none}
.wordmark img{height:46px; width:auto; display:block; flex:none}
.wordmark-text{font-family:var(--min); font-size:14px; letter-spacing:.14em; line-height:1.4; white-space:nowrap}
.gnav ul{list-style:none; margin:0; padding:0; display:flex; gap:30px}
.gnav a{font-family:var(--min); font-size:12.5px; letter-spacing:.22em; text-decoration:none; color:var(--usuzumi); padding-bottom:4px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.gnav a:hover{color:var(--sumi); border-bottom-color:var(--mimoza)}
.gnav a[aria-current="page"]{color:var(--sumi); border-bottom-color:var(--mimoza)}
.burger{display:none; width:40px; height:40px; border:0; background:none; cursor:pointer; padding:0; position:relative}
.burger span{position:absolute; left:9px; right:9px; height:1px; background:var(--sumi); transition:transform .25s, opacity .2s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{position:fixed; inset:0; z-index:55; background:rgba(35,24,21,.35); opacity:0; pointer-events:none; transition:opacity .25s}
.drawer[data-open="true"]{opacity:1; pointer-events:auto}
.drawer-panel{position:absolute; top:0; right:0; bottom:0; width:min(280px,78vw); background:var(--kami); padding:104px 30px 30px; transform:translateX(100%); transition:transform .28s ease}
.drawer[data-open="true"] .drawer-panel{transform:none}
.drawer-panel ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px}
.drawer-panel a{font-family:var(--min); font-size:15px; letter-spacing:.24em; text-decoration:none; display:block; border-bottom:1px solid var(--kei); padding-bottom:10px}

.wrap{max-width:860px; margin:0 auto; padding:0 28px}
.view{display:block}
.view.is-active{display:block}
section{padding:78px 0}
.tinted{background:var(--kinari)}

.sec-head{display:flex; flex-direction:column; gap:13px; margin-bottom:42px}
.sec-head h2{font-family:var(--min); font-weight:600; font-size:23px; letter-spacing:.16em; margin:0; line-height:1.5; text-wrap:balance}
.sec-head .en{font-family:var(--min); font-size:11px; letter-spacing:.3em; color:var(--usuzumi); margin:0}
.rule{width:34px; height:2px; background:var(--mimoza); border:0; margin:0}

.hero{display:flex; justify-content:center; padding:86px 0 70px}
.hero img{width:min(330px,64vw); height:auto; display:block}

.feature{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.feature li{display:grid; grid-template-columns:168px 1fr; gap:0 26px; padding:28px 0; border-top:1px solid var(--kei); align-items:start}
.feature li:last-child{border-bottom:1px solid var(--kei)}
.feature li.no-thumb{grid-template-columns:1fr}
.thumb{aspect-ratio:3/4; background:var(--kami); border:1px solid var(--kei); display:flex; align-items:center; justify-content:center; font-size:10.5px; letter-spacing:.1em; color:var(--usuzumi); text-align:center; line-height:1.7; padding:7px; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:contain; display:block}
.thumb-col{min-width:0}
.credit{margin:6px 0 0; font-size:9.5px; line-height:1.5; letter-spacing:.02em; color:var(--usuzumi); overflow-wrap:anywhere}
.f-body{display:flex; flex-direction:column; gap:7px; min-width:0}
.f-ttl{font-family:var(--min); font-size:17px; line-height:1.7}
.f-role{font-size:12px; letter-spacing:.1em; color:var(--sumi); border:1px solid var(--kei); align-self:flex-start; padding:3px 11px; line-height:1.7}
.f-meta{font-size:12.5px; letter-spacing:.04em; color:var(--usuzumi); line-height:1.9}
.f-meta span{display:block}

.more-wrap{display:flex; justify-content:center; margin-top:44px}
.btn{display:inline-block; background:var(--mimoza); color:var(--sumi); text-decoration:none; font-size:13px; letter-spacing:.18em; text-indent:.18em; padding:14px 44px; border:1px solid var(--mimoza); cursor:pointer; font-family:var(--goth); transition:background .2s, border-color .2s}
.btn:hover{background:var(--kami); border-color:var(--sumi)}
.btn-ghost{background:none; border-color:var(--kei); color:var(--sumi)}
.btn-ghost:hover{background:var(--kinari); border-color:var(--sumi)}

.filter{border:0; margin:0 0 32px; padding:20px 0; border-top:1px solid var(--kei); border-bottom:1px solid var(--kei); display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.filter legend{padding:0; font-size:12px; letter-spacing:.14em; color:var(--usuzumi); float:left; width:100%; margin-bottom:12px; line-height:1.7}
.chip-f{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--kei); padding:6px 13px; font-size:12.5px; letter-spacing:.06em; line-height:1.6; cursor:pointer; background:var(--kami); transition:border-color .15s, background .15s}
.chip-f:hover{border-color:var(--sumi)}
.chip-f:has(input:checked){background:var(--mimoza); border-color:var(--mimoza)}
.chip-f input{accent-color:var(--sumi); margin:0; width:13px; height:13px; cursor:pointer}
.clear-f{margin-left:auto; font-size:12px; letter-spacing:.08em; color:var(--usuzumi); background:none; border:0; border-bottom:1px solid var(--kei); padding:2px 0; cursor:pointer; font-family:inherit}
.clear-f:hover{color:var(--sumi); border-bottom-color:var(--mimoza)}
.no-hit{margin:26px 0 0; font-size:13.5px; color:var(--usuzumi); line-height:1.9}

.yr{border-top:1px solid var(--kei)}
.yr:last-of-type{border-bottom:1px solid var(--kei)}
.yr summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:18px; padding:22px 0}
.yr summary::-webkit-details-marker{display:none}
.year{font-family:var(--min); font-size:20px; letter-spacing:.06em; font-variant-numeric:tabular-nums; line-height:1.5}
.pm{margin-left:auto; align-self:center; width:14px; height:14px; position:relative; flex:none}
.pm::before,.pm::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--sumi)}
.pm::after{transform:rotate(90deg); transition:transform .2s}
.yr[open] .pm::after{transform:rotate(0deg)}
.works{list-style:none; margin:0; padding:0 0 28px 102px; display:flex; flex-direction:column; gap:14px}
.work{display:flex; flex-direction:column; gap:3px}
.work .ttl{font-family:var(--min); font-size:16px; line-height:1.75}
.work .meta{font-size:12px; letter-spacing:.06em; color:var(--usuzumi); display:flex; flex-wrap:wrap; gap:0 12px; line-height:1.8}
.work .meta .role{color:var(--sumi)}
.work .meta .sep{color:var(--kei)}
/* 東京・大阪…と会場が分かれる公演は、都市ごとに1行にする */
.work .meta-multi{flex-direction:column; gap:2px}
.work .meta-multi .leg{display:block}
.work .meta-multi .leg .sep{margin:0 .5em}
.work .meta-multi .city{color:var(--sumi); margin-right:.2em}
.work .meta-multi .role{margin-top:3px}
/* 公式サイトへのリンク */
.work .ttl a,.f-ttl a{color:inherit; text-decoration:none; border-bottom:1px solid var(--kei); padding-bottom:1px; transition:border-color .2s,color .2s}
.work .ttl a:hover,.f-ttl a:hover{color:var(--usuzumi); border-bottom-color:var(--mimoza)}
.work .ttl a::after,.f-ttl a::after{content:""; display:inline-block; width:.52em; height:.52em; margin-left:.45em; vertical-align:.06em; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); opacity:.55}

.prose p{margin:0 0 22px; font-size:15px; line-height:2.2; max-width:42em; text-wrap:pretty}
.facts{width:100%; border-collapse:collapse; font-size:14px}
.facts th,.facts td{text-align:left; vertical-align:top; padding:15px 0; border-bottom:1px solid var(--kei); line-height:1.9}
.facts th{width:118px; font-weight:400; letter-spacing:.12em; color:var(--usuzumi); font-size:12.5px; padding-right:16px}

.cta{display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center}
.cta .sec-head{align-items:center; margin-bottom:0}
.cta p{margin:0; font-size:14.5px; line-height:2.1; color:var(--usuzumi); max-width:32em}
.cta .fine{font-size:12px}
.form-list{list-style:none; margin:34px 0 0; padding:26px 0 0; border-top:1px solid var(--kei); width:100%; max-width:30em; display:flex; flex-direction:column; gap:12px; text-align:left}
.form-list li{font-size:13.5px; line-height:1.9; display:flex; justify-content:space-between; gap:16px; border-bottom:1px dotted var(--kei); padding-bottom:10px}
.form-list .req{font-size:11px; letter-spacing:.1em; color:var(--usuzumi); white-space:nowrap}

footer{border-top:1px solid var(--kei); padding:38px 0 60px}
footer .inner{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center}
footer .mark{line-height:0}
footer .mark img{width:104px; height:auto; display:block}
footer small{font-size:11px; letter-spacing:.1em; color:var(--usuzumi); line-height:1.8}
footer .links a{font-size:11px; letter-spacing:.1em; color:var(--usuzumi); text-decoration:none; border-bottom:1px solid var(--kei)}
footer .links a:hover{border-bottom-color:var(--mimoza)}

.to-top{position:fixed; right:22px; bottom:22px; z-index:40; width:46px; height:46px; border:1px solid var(--kei); background:var(--kami); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .25s, border-color .2s}
.to-top[data-show="true"]{opacity:1; pointer-events:auto}
.to-top:hover{border-color:var(--sumi)}
.to-top::before{content:""; position:absolute; left:50%; top:52%; width:9px; height:9px; border-left:1px solid var(--sumi); border-top:1px solid var(--sumi); transform:translate(-50%,-30%) rotate(45deg)}

.reveal{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
.reveal.is-hidden{opacity:0; transform:translateY(14px)}

@media (max-width:760px){
  :root{--head-h:58px}
  .gnav{display:none}
  .burger{display:block}
  .wordmark{gap:9px}
  .wordmark img{height:40px}
  .wordmark-text{font-size:12.5px; letter-spacing:.1em}
  footer .mark img{width:92px}
  .hero{padding:60px 0 50px}
  section{padding:56px 0}
  .feature li{grid-template-columns:116px 1fr; gap:0 16px}
  .works{padding-left:0}
  .yr summary{padding:18px 0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .reveal.is-hidden{opacity:1; transform:none}
}

/* ===== WordPress 用の追加 ===== */
/* 管理バーが出ているとき、固定ヘッダーが隠れないように下げる */
body.admin-bar{padding-top:calc(var(--head-h) + 32px)}
body.admin-bar .site-head{top:32px}
@media screen and (max-width:782px){
  body.admin-bar{padding-top:calc(var(--head-h) + 46px)}
  body.admin-bar .site-head{top:46px}
}
/* 固定ページの本文（投稿エディターで書いた中身）の見た目 */
.entry-content{font-size:15.5px; line-height:2.1}
.entry-content > *:first-child{margin-top:0}
.entry-content > *:last-child{margin-bottom:0}
.entry-content p{margin:0 0 22px; font-size:15px; line-height:2.2; max-width:42em; text-wrap:pretty}
.entry-content h2{font-family:var(--min); font-size:19px; line-height:1.8; margin:2.6em 0 1em; font-weight:400; letter-spacing:.14em}
.entry-content h3{font-family:var(--min); font-size:16.5px; line-height:1.8; margin:2.2em 0 .7em; font-weight:400; letter-spacing:.1em}
.entry-content ul,.entry-content ol{margin:0 0 1.4em; padding-left:1.4em}
.entry-content li{margin:0 0 .3em}
.entry-content a{color:var(--sumi); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--kei)}
.entry-content a:hover{text-decoration-color:var(--mimoza)}
.entry-content table{width:100%; border-collapse:collapse; font-size:14px}
.entry-content .wp-block-table{margin:0}
.entry-content .wp-block-table td,.entry-content .wp-block-table th{border:0; border-bottom:1px solid var(--kei)}
.entry-content th,.entry-content td{text-align:left; vertical-align:top; padding:15px 0; border-bottom:1px solid var(--kei); line-height:1.9}
.entry-content th{width:118px; font-weight:400; letter-spacing:.12em; color:var(--usuzumi); font-size:12.5px; padding-right:16px; white-space:nowrap}
.entry-content img{height:auto}
.entry-content .wp-block-image{margin:0 0 1.4em}
/* お問い合わせフォーム（プラグインを入れたときの見た目） */
.wpcf7-form{margin-top:34px; text-align:left; width:100%; max-width:34em}
.wpcf7-form p{margin:0 0 20px; font-size:14px; letter-spacing:.06em}
.wpcf7-form label{display:block}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],
.wpcf7-form select,.wpcf7-form textarea{width:100%; font:inherit; font-size:15px; color:var(--sumi); background:var(--kami); border:1px solid var(--kei); padding:11px 13px; margin-top:7px; border-radius:0; -webkit-appearance:none}
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{outline:2px solid var(--mimoza); outline-offset:1px}
.wpcf7-form textarea{min-height:11em; line-height:1.9}
.wpcf7-form input[type=submit]{font:inherit; font-size:13px; letter-spacing:.16em; background:var(--sumi); color:var(--kami); border:0; padding:15px 46px; cursor:pointer; transition:opacity .2s}
.wpcf7-form input[type=submit]:hover{opacity:.78}
/* 投稿一覧・検索結果など、用意していないページの最低限の見た目 */
.simple-list{list-style:none; margin:0; padding:0}
.simple-list li{border-top:1px solid var(--kei); padding:20px 0}
.simple-list li:last-child{border-bottom:1px solid var(--kei)}
.simple-list a{font-family:var(--min); font-size:16px; text-decoration:none}
.simple-date{display:block; font-size:12px; letter-spacing:.06em; color:var(--usuzumi)}
/* 読み上げソフト用の「本文へ移動」リンク（ふだんは見えない） */
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.skip-link:focus{position:fixed; top:10px; left:10px; z-index:100; width:auto; height:auto; clip:auto; background:var(--kami); border:1px solid var(--sumi); padding:10px 16px; font-size:13px}