@charset "utf-8";
/*
Theme Name:Rubbersoul2026
Description:responsive design
version： 0.0.1
*/

/* ----------------------------------------------------------------------
 共通 1rem=16px
---------------------------------------------------------------------- */
:root{ font-size:16px;
    --text-color:#222; --text-color1:#000; --text-color2:#f2f2f2;
    --text-sub:#555; --text-light:#888;
    --border-color:#ddd; --base-color:#f7f7f7; --accent-color2:#5d0b0b; }

@media screen and (min-width:769px) {
    :root{ font-size:18px; }
}

body{
    font-family:'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif; font-weight:400; line-height:2; letter-spacing:.05em; color:var(--text-color);
}
h1, h2, h3, h4, h5, h6, .logotext, .title, .catch, .eng{ 
    font-family:'Jost', 'Noto Sans JP', sans-serif; font-weight:700; line-height:1.3;
}
p{ color:var(--text-sub); margin-top:1.8em; margin-bottom:1.8em; }
ul li, ol li{ color:var(--text-sub); }
small, .note{ color:var(--text-light); }
hr, .border { color:var(--border-color); }

footer{ z-index:5; }
#main{ flex:1; position:relative; margin-top:90px; }
.home #main{ background:transparent; }
#container{ position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100); }
img{ display:block; max-width:100%; height:auto; }

/* textdeco */
.js-eng{ will-change:transform; }
/* 画面幅320～1280px */
h1{ font-size:clamp(3rem, 2rem + 4vw, 5rem); letter-spacing:-0.02em; color:var(--text-color1); }
h2, #page-header p.title{ font-size:clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing:-0.01em; color:var(--text-color1); margin-top:4rem; margin-bottom:1rem; }
h3{ font-size:clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); letter-spacing:-0.01em; color:var(--text-color1); margin-top:5rem; margin-bottom:.8rem; }
h4{ font-size:clamp(1.1rem, 1.050rem + 0.25vw, 1.25rem); margin-top:2.5rem; margin-bottom:2.5rem; }
h5{ font-size:clamp(1rem, 0.958rem + 0.208vw, 1.125rem); margin-top:2.5rem; margin-bottom:2.5rem; }
.article h2{ position:relative; }
.article h2::before{ content:""; display:block; width:40px; height:2px; background:var(--text-color); margin-bottom:1rem; }
.article h3::before{ content:""; display:block; width:20px; height:1px; background:var(--text-color1); margin-bottom:.8rem; }
.article .page-links h2::before{ display:none; }
.content-block.is-accent h2{ margin-bottom:2rem; }
/* アニメーション開始前は文字を透明にしておく */
.js-heading-first{ opacity:0; }
/* Splitting実行後はSplittingが振るクラスによって制御 */
.js-heading-first.splitting{ opacity:1; }
.js-heading-first .char{
  display:inline-block; /* アニメーションのために必須 */
  visibility:hidden;    /* 最初は隠しておく */
}
.js-heading[data-splitting] .char{ opacity:0; }
.text-c{ text-align:center; }
.text-s{ font-size:.85rem; }
.text-m{ font-size:1.1rem; }
a{ color:var(--accent-color2);  transition:color .3s cubic-bezier(0.23, 1, 0.32, 1), background-color .3s cubic-bezier(0.23, 1, 0.32, 1); }
a.tap{ position:relative; display:block; transition:transform .3s cubic-bezier(0.23, 1, 0.32, 1); }
a.tap:active{ transform:scale(.95); }
.article p a{ text-decoration:underline; }
p + h2, .article p + h2, .article ol + h2, .article ul + h2, .linkbutton + h2, .linkbutton + h3,
.images + h2{ margin-top:8rem; }
p.sub-title-desc + h2{ margin-top:0; }
p.sub-title-desc{ color:var(--text-light); }
ol, ul{ margin:1rem 0; }
ol.list-pT1em > li:not(:first-of-type),
ul.list-pT1em > li:not(:first-of-type){ margin-top:1rem; }
ol.list-pT75em > li:not(:first-of-type),
ul.list-pT75em > li:not(:first-of-type){ margin-top:.75rem; }
.lead + dl,
.lead + p{ margin-top:6rem; }
dl.col2,
dl.wpcf2{ display:flex; flex-wrap:wrap; width:100%; }
dl.col2 > dt,
dl.wpcf2 > dt{ font-weight:bold; width:33.33%; margin:0; padding:1.25rem 0; display:flex; align-items:center; }
dl.col2 > dd,
dl.wpcf2 > dd{ width:66.67%; margin:0; padding:1.25rem 0; }
dl.wpcf2 > dt label{ display:block; }
dl.col2.subtitle-small > dt,
dd.dt-text{ color:var(--text-light); font-size:.9em; font-weight:400; }
.tate{ -ms-writing-mode:tb-rl; writing-mode:vertical-rl; text-orientation:mixed; }
.text-combine{ -webkit-text-combine:horizontal; -ms-text-combine-horizontal:all; text-combine-upright:all; }
.marker{ background:linear-gradient(transparent 60%, rgba(93,11,11,0.15) 60%); background-repeat:no-repeat; background-size:0% 100%; background-position:left bottom; display:inline; }
.pc-visible{ display:none; }
@media screen and (max-width:479px) {
    dl.col2 > dt{ width:100%; padding:1.25rem 0 0; }
    dl.col2 > dd{ width:100%; padding:.5rem 0 1.25rem; border-bottom:1px solid var(--border-color); }
    dl.col2 > dt:first-of-type{ border-top:1px solid var(--border-color); }
}
@media screen and (min-width:480px) {
    :where(dl.col2 > dt, dl.col2 > dd):not(:first-of-type){ border-top:1px solid var(--border-color); }
    dl.col2 > dt:first-of-type, dl.col2 > dd:first-of-type{ border-top:1px solid var(--border-color); }
    dl.col2 > dt:last-of-type, dl.col2 > dd:last-of-type{ border-bottom:1px solid var(--border-color); }
}
@media screen and (max-width:768px) {
    .tate-sp{ -ms-writing-mode:tb-rl; writing-mode:vertical-rl; text-orientation:mixed; }
    dl.wpcf2 > dt{ width:100%; padding:1.25rem 0 0; }
    dl.wpcf2 > dd{ width:100%; padding:.5rem 0 1.25rem; border-bottom:1px solid var(--border-color); }
    dl.wpcf2 > dt:first-of-type{ border-top:1px solid var(--border-color); }
}
@media screen and (min-width:769px) {
    .tate-pc{ -ms-writing-mode:tb-rl; writing-mode:vertical-rl; text-orientation:mixed; }
    :where(dl.wpcf2 > dt, dl.wpcf2 > dd):not(:first-of-type){ border-top:1px solid var(--border-color); }
    dl.wpcf2 > dt:first-of-type, dl.wpcf2 > dd:first-of-type{ border-top:1px solid var(--border-color); }
    dl.wpcf2 > dt:last-of-type, dl.wpcf2 > dd:last-of-type{ border-bottom:1px solid var(--border-color); }
}

/* フワッと表示 jsとセットで使う */
.scroll-block{ opacity:0; transform:translateY(20px); transition:opacity 1.5s, transform 1.5s; }
.scroll-block.blockIn{ opacity:1; transform:translateY(0); }

/* Loaderアニメーション */
#loader{ position:fixed; inset:0; background:var(--text-color); z-index:9999; display:flex; align-items:center; justify-content:center; }
#loader-logo{ font-family:"Times New Roman", "Shippori Mincho", serif; letter-spacing:.2em; font-weight:500; color:#fff; font-size:2rem; font-weight:bold; opacity:0; }

/* レイアウト */
.inner{ position:relative; padding:8rem clamp(16px, -12px + 8.75vw, 100px); }
.inner2{ position:relative; max-width:1000px; margin:0 auto; }
.inner.pT0em{ padding-top:0; }
.inner.pB0em{ padding-bottom:0; }
.inner.pLR0em{ padding-right:0; padding-left:0; }
.bgwhite{ background:#fff; }
.bggray{ background:var(--base-color); }
.chuki{ padding:1rem; border-radius:20px; }
.wp-block-buttons + .chuki{ margin-top:2rem; }
.img-cover, .img-contain{ position:relative; overflow:hidden; z-index:0; }
.img-cover img, .img-contain img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.img-contain img{ object-fit:contain; }
.main section:not(:first-of-type){ border-top:1px solid var(--border-color); }
/* header */
#header{ position:fixed; top:0; left:0; width:100%; height:90px; background:rgba(255,255,255,1); border-bottom:1px solid var(--border-color); z-index:100; }
#header .inner{ display:flex; justify-content:space-between; position:relative; width:100%; height:100%; padding-left:clamp(16px, 4.667px + 3.542vw, 50px); padding-right:clamp(16px, 4.667px + 3.542vw, 50px); }
#header-logo{ position:relative; display:flex; align-items:center; width:calc(100% - 100px); height:100%; }
#header-logo h1, #header-logo p{ position:relative; margin:0; font-size:1rem; }
a.logo,
a.logo .sp{ display:block; }
a.logo .pc{ display:none; }
#header-logo a.logo{ position:relative; }
#header-logo a.logo img{ position:relative; height:60px; width:auto; }
#header-text-pc{ display:none; }
.header-buttons{ display:flex; justify-content:flex-end; align-items:center; }
.sns{ display:flex; align-items:center; width:50px; height:50px; overflow:hidden; position:relative; color:var(--text-color1); text-decoration:none; background-color:var(--base-color); border-radius:50%; }
.sns:hover{ background-color:var(--border-color); }
.sns .icon-circle{ flex-shrink:0; width:50px; height:50px; display:flex; align-items:center; justify-content:center; }
.sns .icon-color{ width:28px; aspect-ratio:1; margin:0 auto; transition:fill .3s ease; }
.sns span{ display:none; }
/* アンカーリンク */
.anchor{ /*padding-top:90px; margin-top:-90px;*/ scroll-margin-top:90px; }
/* table横スクロール */
.table-wrapper{ overflow-x:auto; margin:2rem 0; }
table{ width:100%; min-width:600px; border-collapse:collapse; border:1px solid #777; }
table th, table td{ border:1px solid #777; padding:.5rem 1rem; }
table th{ background:var(--main-color3); }
table th:first-child,
table td:first-child{ position:sticky; left:0; width:33%; min-width:240px; background-color:var(--main-color3); z-index:1; border-right:2px solid #777; }
table.report-sample th:first-child,
table.report-sample td:first-child{ width:25%; min-width:150px; }
/* ブロックエディタ */
:where(.wp-block-columns.is-layout-flex.no-gap){ gap:0; margin-bottom:0; }
:where(.wp-block-columns.is-layout-flex.no-gap):not(:first-of-type){ border-top:1px solid #ddd; }
:where(.wp-block-columns.is-layout-flex.no-gap.padding50){ padding:50px 0; }
:where(.wp-block-columns.is-layout-flex.no-gap.padding50.no-subtitle){ padding:0 0 50px; border-top:none !important; }
:where(.wp-block-columns.is-layout-flex.no-gap.padding50) h2.wp-block-heading{ margin-top:.83em; }
.wp-block-image{ max-width:1000px !important; margin:clamp(50px, 36.667px + 4.167vw, 90px) auto !important; }
.article.point .wp-block-image{ margin:2rem auto 0 !important; }
.article.point .wp-block-image img{ margin:0 auto; }
.wp-block-image.thanks img{ max-height:200px; width:auto; }
.wp-element-caption{ text-align:center; }
.wp-block-separator{ border-top:1px solid #ddd; }
.wp-block-table.table-wrapper table{ border:1px solid #ddd; }
.wp-block-table thead{ border-bottom:2px solid; }
@media screen and (max-width:781px) {
    .wp-block-column .wp-block-image{ width:75%; max-width:360px !important; }
}
@media screen and (max-width:768px) {
    .wp-block-image .alignright{ float:none; margin:.5em auto; }
}
@media screen and (min-width:769px) {
    .wp-block-image.daihyo{ max-width:300px !important; margin:0 0 0 auto !important; }
    table.report-sample th:first-child,
    table.report-sample td:first-child{ width:25%; min-width:180px; }
    .sns{ width:180px; height:50px; border-radius:50px; }
    .sns .icon-circle{ width:50px; height:50px; }
    .sns span{ display:inline-block; font-weight:bold; white-space:nowrap; }
}
@media screen and (min-width:782px) {
    :where(.wp-block-columns.is-layout-flex.no-gap.padding50 .wp-block-column:first-of-type){ padding-right:1rem; }
    :where(.wp-block-columns.is-layout-flex.no-gap.padding50 .wp-block-column:last-of-type){ padding-left:1rem; }
    .wp-block-columns.is-layout-flex.sticky-item{ align-items:flex-start !important; }
    .wp-block-columns.is-layout-flex.sticky-item .wp-block-column:first-of-type{ position:sticky; top:160px; }
}
@media screen and (min-width:1280px) {
    /* アンカーリンク */
    .anchor{ scroll-margin-top:130px; }
    .wp-block-columns.is-layout-flex.no-gap.onecolumn{ flex-wrap:wrap !important; }
    .wp-block-columns.is-layout-flex.no-gap.onecolumn .wp-block-column{ width:100% !important; flex-basis:100% !important; }
    .wp-block-columns.is-layout-flex.sticky-item .wp-block-column:first-of-type{ top:190px; }
}
@media screen and (min-width:1680px) {
    #header-logo{ width:150px; }
}

/* nav */
/* drawer */
.hamburger{ width:50px; height:50px; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; transition:color .3s, background-color .3s, transform .3s; z-index:2; }
.hamburger-border{ display:inline-block; width:1.5rem; height:2px; background-color:var(--text-color1); margin:2px 0; transition:color .3s, background-color .3s, transform .3s; }
.h-sp-menu{ display:inline-block; text-transform:uppercase; margin:2px 0 0; padding:0; line-height:1; font-size:.55rem; color:var(--text-color1); transition:color .3s; }
.hamburger:hover .hamburger-border{ background-color:var(--text-light); }
.hamburger:hover .h-sp-menu{ color:var(--text-light); }
.nav-open .hamburger-border-top{ transform:translateY(6px) rotate(45deg); }
.nav-open .hamburger-border-center{ width:0; }
.nav-open .hamburger-border-bottom{ transform:translateY(-6px) rotate(-45deg); }
#drawer-menu{ position:fixed; left:0; top:0; width:100%; height:100vh; height:calc(var(--vh, 1vh) * 100); transform:translateY(10px); transition:opacity .4s ease, transform .4s ease, visibility .4s ease; z-index:99; overflow-y:auto; -webkit-overflow-scrolling: touch;/* iOSのスクロールを滑らかに */ background:rgba(255,255,255,.95); backdrop-filter:blur(8px); opacity:0; visibility:hidden; pointer-events:none; }
.drawer-inner{ position:relative; width:100%; margin-top:120px; padding:0 clamp(16px, -12px + 8.75vw, 100px); transition:opacity .3s .3s ease; opacity:0; z-index:1; }
.black-bg{ position:fixed; left:0; top:0; width:100%; min-height:100%; z-index:98; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; cursor:pointer; transition:opacity .4s ease, visibility .4s ease; }
#drawer-menu ul.menu{ width:100%; max-width:500px; margin:0 auto; }
#drawer-menu ul.menu a{ position:relative; display:block; padding:.75rem 1rem; color:var(--text-color); text-decoration:none; transition:color .3s cubic-bezier(0.23, 1, 0.32, 1), background-color .3s cubic-bezier(0.23, 1, 0.32, 1), padding-left .3s cubic-bezier(0.23, 1, 0.32, 1); }
#drawer-menu ul.menu a::after{ display:block; content:""; position:absolute; top:50%; right:1em; transform:translateY(-50%) rotate(45deg); width:.5em; height:.5em; border-top:2px solid var(--text-color); border-right:2px solid var(--text-color); z-index:1; transition:border-color .3s cubic-bezier(0.23, 1, 0.32, 1); }
#drawer-menu ul.menu a:hover{ color:var(--accent-color2); background-color:var(--text-color2); padding-left:2rem; }
#drawer-menu ul.menu a:hover::after{ border-color:var(--accent-color2); }
#drawer-menu ul.menu li ul.sub-menu{ margin-left:1rem; }
#drawer-menu ul.menu li ul.sub-menu li a::before{ content:"- "; }
#global-menu{ position:relative; height:100%; }
#global-menu ul.menu{ display:none; }
@media screen and (max-width:1679px) {
    .nav-open {
    /* ページのスクロールを禁止 */
    overflow:hidden; }
    .nav-open #drawer-menu{ left:0; opacity:1; visibility:visible; pointer-events:auto; }
    .nav-open .drawer-inner{ opacity:1; }
    .nav-open .black-bg{ opacity:1; visibility:visible; }
}
@media screen and (min-width:1680px) {
    .hamburger{ display:none; }
    .header-buttons{ display:none; }
    #drawer-menu{ visibility:hidden !important; pointer-events:none !important; right:-100vw !important; opacity:0 !important; }
    /* グロナビ */
    #global-menu ul.menu{ position:relative; width:100%; height:100%; display:flex; align-items:center; margin:0; padding:0; }
    #global-menu ul.menu li{ position:relative; height:100%; display:flex; align-items:center; }
    #global-menu ul.menu a{ position:relative; height:60%; display:flex; justify-content:center; align-items:center; padding:.5rem 1rem; font-size:.9rem; font-weight:bold; color:var(--text-color); text-decoration:none; transition:color .5s cubic-bezier(0.23, 1, 0.32, 1); }
    #global-menu ul.menu a:hover{ color:var(--accent-color2); }
    #global-menu ul.menu .current-menu-item a{ color:var(--accent-color2); }
    #global-menu ul.menu > li > a{ width:100%; }
    #global-menu ul.menu > li > a::before{ content:""; position:absolute; bottom:0; left:0; width:0; height:2px; background-color:var(--text-color); transition:width .3s cubic-bezier(0.23, 1, 0.32, 1), background-color .3s cubic-bezier(0.23, 1, 0.32, 1); }
    #global-menu ul.menu > li > a:hover::before{ width:100%; background-color:var(--accent-color2); }
    #global-menu ul.menu li ul.sub-menu{ visibility:hidden; opacity:0; pointer-events:none; width:260px; z-index:99; text-align:left; overflow:hidden; background:var(--text-light); box-shadow:rgba(100, 100, 100, 0.2) 0px 7px 29px 0px; transition:all .3s ease; }
    #global-menu ul.menu li ul.sub-menu li{ width:100%; }
    #global-menu ul.menu li ul.sub-menu a{ width:100%; background-color:var(--text-light); font-size:.85rem; color:#fff; padding:.75rem 1rem; }
    #global-menu ul.menu li ul.sub-menu a:hover{ background-color:var(--text-color); }
    #global-menu ul.menu > li > ul.sub-menu{ position:absolute; top:72px; left:0; }
    #global-menu ul.menu > li:last-of-type > ul.sub-menu{ left:auto; right:0; }
    #global-menu ul.menu > li:hover > ul.sub-menu, 
    #global-menu ul.menu > li > ul.sub-menu > li:hover > ul.sub-menu{ visibility:visible; opacity:1; pointer-events:auto; }
    #header.scrolled #global-menu ul.menu a{ font-size:.9rem; }
    #header.scrolled #global-menu ul.menu > li > ul.sub-menu{ top:50px; }
}

/* フッター */
#footer{ border-top:1px solid var(--border-color); }
#footer .logo img{ margin:0 auto; }
.footer-menu{ display:flex; flex-wrap:wrap; margin:2rem 0 0; }
.footer-menu ul.menu,
.footer-menu ul.menu li{ list-style:none; margin:0; padding:0; width:100%; text-align:center; }
.footer-menu ul.menu a{ display:inline-block; position:relative; width:fit-content; padding:.25rem 0; color:var(--text-light); font-size:.8rem; text-decoration:underline; }
#copyright{ text-align:center; font-size:.7rem; padding:1rem 0; margin:0; }
/* TOPへ戻るボタン */
#back-to-top{ position:fixed; bottom:0; right:0; width:50px; aspect-ratio:1; opacity:0; visibility:hidden; border:0; transition:opacity .3s, visibility .3s; color:#fff; background:var(--text-light); z-index:10; }
#back-to-top.is-active{ opacity:1; visibility:visible; }

/* アイコン */
.icon-color, button .icon-color{ width:1rem; aspect-ratio:1; fill:currentColor; /* 親.snsのcolor継承 */ }
#back-to-top .icon-color{ width:2rem; }
.page-links .icon-color{ width:2rem; }
.bloglist .icon-color{ width:1.25rem; }

/* ボタン */
.linkbutton,
.wp-block-buttons{ position:relative; margin:1rem auto; z-index:8; }
.linkbutton.mT3em{ margin-top:3rem; }
button.btn, .linkbutton a, .wpcf7 .wpcf7-submit{ cursor:pointer; position:relative; display:block; width:80%; text-align:center; font-weight:bold; padding:.75rem 1.5rem; margin:0 auto; user-select:none; transition:color .5s cubic-bezier(0.23, 1, 0.32, 1), background-color .5s cubic-bezier(0.23, 1, 0.32, 1), transform .5s cubic-bezier(0.23, 1, 0.32, 1), letter-spacing .5s cubic-bezier(0.23, 1, 0.32, 1); color:var(--text-color1); overflow:hidden; border:1px solid var(--text-color1); border-radius:80px; letter-spacing:0; text-decoration:none; z-index:1; }
.wpcf7 .wpcf7-submit{ margin-top:4rem; }
.linkbutton a:hover{ letter-spacing:.05rem; color:#fff; }
.wpcf7 .wpcf7-submit:hover{ letter-spacing:.05rem; border-color:var(--accent-color2); background-color:var(--accent-color2); color:#fff; }
.linkbutton a::before{ content:""; position:absolute; top:50%; transform:translate(0, -50%) scale(1); left:1rem; width:10px; height:10px; border-radius:50%; background-color:var(--text-color1); transition:transform .6s cubic-bezier(0.65, 1, 0.35, 1); z-index:-1; }
.linkbutton a:hover::before{ transform:translate(0, -50%) scale(100); background-color:var(--accent-color2); }
.article .linkbutton a{ text-decoration:none; }
.home section.js-bgblack .linkbutton a{ color:#fff; border-color:#fff; }
.home section.js-bgblack .linkbutton a:hover{ color:var(--text-color); }
.home section.js-bgblack .linkbutton a::before{ background-color:#fff; }
@media screen and (min-width:769px) {
    button.btn, .linkbutton a, .wpcf7 .wpcf7-submit{ max-width:500px; }
}
@media screen and (min-width:1280px) {
    #top-ziflow .linkbutton a{ width:100%; }
}

/* 画像のアニメーション */
.js-fadeup{ position:relative; overflow:hidden; background-color:none; }
/* 覆いかぶさる白い板 */
.js-fadeup::after{ content:""; position:absolute; inset:0; background-color:var(--base-color); z-index:2; transition:transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); transform-origin:top; }
.side-image.js-fadeup::after{ background-color:#333; }
.ziflow-flow .js-fadeup::after{ background-color:#fff; }
/* アニメーション開始後の「板」の動き */
.js-fadeup.js-after::after{ transform:scaleY(0); /* 高さを0にして消す */ }
.js-fadeup img{ width:100%; height:auto; display:block; transform:scale(1.3); opacity:0; transition:transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.0s ease; }
/* アニメーション開始後の「画像」の動き */
.js-fadeup.js-after img{ transform:scale(1); opacity:1; }

/* 線のアニメーション */
.js-line{ position:relative; }
.js-line::after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:var(--border-color); transform:scaleX(0); transform-origin:left; /* 左から右へ伸ばす */ transition:transform 1.5s cubic-bezier(0.23, 1, 0.32, 1); }
.js-line.is-active::after{ transform:scaleX(1); /* 100%に伸びる */ }
.js-line-v::before{ content:""; position:absolute; top:0; left:clamp(16px, -12px + 8.75vw, 100px); width:1px; height:100%; background-color:var(--border-color); transform:scaleY(0); transform-origin:top; /* 上から下へ伸ばす */ transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1); }
.js-line-v.is-active::before{ transform:scaleY(1); /* 100%に伸びる */ }

/* パンクズ */
.breadcrumb{ position:relative; color:var(--text-light); margin-top:1rem; z-index:5; }
.breadcrumb ul{ display:flex; flex-wrap:wrap; align-items:center; list-style:none; margin:0; padding:0; }
.breadcrumb li{ display:flex; align-items:center; font-size:.9em; }
.breadcrumb li a{ display:inline-block; font-size:.75rem; padding:.25rem 0; text-decoration:underline; color:#606060; }
.breadcrumb li a span{ display:flex; align-items:center; }
.breadcrumb li span{ display:inline-block; padding:.25rem 0; }
@media screen and (min-width:769px) {
    .breadcrumb{ margin-top:2rem; }
}

/* ページネーション */
.pagination{ margin:3rem 0 0; }
ul.page-numbers{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:0; }
ul.page-numbers li{ margin:0 .125rem; }
ul.page-numbers a, ul.page-numbers .current{ display:flex; justify-content:center; align-items:center; width:30px; height:30px; border:1px solid var(--text-sub); color:var(--text-color); text-decoration:none; }
ul.page-numbers .current{ background:var(--text-sub); color:#fff; }
ul.page-numbers a:hover{ background:var(--text-color1); border:1px solid var(--text-color1); color:#fff; }
ul.page-numbers a:active{ transform:scale(.95); }
@media screen and (min-width:480px) {
    ul.page-numbers a, ul.page-numbers .current{ width:2.5rem; height:2.5rem; }
}
@media screen and (min-width:769px) {
    ul.page-numbers li{ margin:0 .25em; }
}

/* wpcf7 */
.wpcf7{ position:relative; }
.wpcf7 input, .wpcf7 textarea, .wpcf7 select{ width:100%; padding:1em .5em; border:1px solid var(--text-color); border-radius:4px; line-height:1.3; font-size:1rem; }
.wpcf7 input.p-postal-code{ width:150px; }
.wpcf7 select, .wpcf7 input[type=checkbox]{ width:auto; max-width:97%; padding:8px; border:1px solid var(--text-color); border-radius:4px; }
.wpcf7 input[type=radio]{ margin-right:.5rem; width:1.2rem; height:1.2rem; cursor:pointer; }
.wpcf7 select, .wpcf7 .wpcf7-list-item-label{ line-height:1.3; }
.wpcf7 .wpcf7-list-item{ display:inline-block; margin:0 2rem 0 0; }
.wpcf7 .wpcf7-list-item label{ display:flex; align-items:center; cursor:pointer; padding:.5rem 0; }
.wpcf7 textarea{ height:400px; }
.hissu{ display:inline-block; background:var(--text-color); color:#fff; font-size:.9em; font-weight:bold; padding:0 .5em; margin:0 0 0 .5em; border-radius:4px; }
.wpcf7 input:focus,
.wpcf7 textarea:focus{ border-color:var(--text-light); outline:1px solid var(--text-light); }
.wpcf7 .address2{ display:inline-block; margin-top:1rem; width:100%; }

/* sidemenu */
#sidemenu select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fff; outline:none; border:1px solid var(--text-sub); border-radius:1px; height:50px; padding:.5rem 1rem; font-size:1rem; cursor:pointer; width:100%; }
#sidemenu select::-ms-expand{ display:none; }
.selectbox1{ position:relative; overflow:hidden; }
.selectbox1::after{ position:absolute; content:''; pointer-events:none; top:50%; right:1.4rem; transform:translate(50%, -50%) rotate(45deg); width:.5rem; height:.5rem; border-bottom:2px solid var(--text-light); border-right:1px solid var(--text-light); content:''; }
ul.cat-list a{ display:inline-block; padding:.25rem 0; text-decoration:none; }
@media screen and (min-width:769px) {
    #sidemenu{ display:flex; justify-content:space-between; }
    #sidemenu > *{ width:49%; }
}

/* search */
.searchform{ display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
.searchform .keyword_text{ width:calc(100% - 70px); }
.searchform input{ width:100%; padding:1rem; border:1px solid #777; border-radius:1px; line-height:1.3; }
.searchform input:focus{ border:1px solid var(--text-light); outline:none; }
.searchform button.btn{ width:70px; border-radius:0; padding:1rem 1.5rem; }

/* google Map */
.gmap{ position:relative; width:100%; aspect-ratio:1; margin:1em auto 0; }
.gmap iframe{ position:absolute; width:100%; height:100%; top:0; left:0; z-index:0; }
.gmap + p{ margin-top:4rem; }

/* 記事リスト */
.bloglist{ position:relative; }
.item{ position:relative; width:100%; padding:0 0 6rem; }
.item:not(:first-of-type){ border-top:1px solid var(--border-color); padding-top:6rem; }
.item a{ position:relative; display:block; width:100%; height:100%; text-decoration:none; transition:transform .3s cubic-bezier(0.23, 1, 0.32, 1); }
.item a:hover{ transform:translateX(.5rem); }
.item a:active{ transform:scale(.95); }
.item a .img-cover{ width:100%; max-width:240px; margin:0 auto; aspect-ratio:1; border:1px solid var(--border-color); transition:box-shadow .3s cubic-bezier(0.23, 1, 0.32, 1); }
.item a:hover .img-cover{ box-shadow:rgba(100, 100, 100, 0.2) 0px 7px 29px 0px; }
.item a .titlearea{ position:relative; padding:1rem 2rem 1rem 0; }
.item a .titlearea .title{ font-size:1.125rem !important; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; color:var(--text-color1); margin:0; transition:color .3s cubic-bezier(0.23, 1, 0.32, 1); }
.item a:hover .titlearea .title{ color:var(--accent-color2); }
.item a .titlearea .date,
ul.meta-box .date{ color:var(--text-light); margin:0; font-weight:400; font-size:1rem; }
.item a .titlearea .desc{ display:none; font-size:.95rem; }
.item a .titlearea svg{ position:absolute; top:50%; right:0; transform:translateY(-50%); }
ul.meta-box{ list-style:none; padding:0; margin:.5rem 0; }
.single ul.meta-box{ display:flex; align-items:center; }
ul.meta-box li{ margin:.25rem 0; }
.single ul.meta-box li{ margin:.25rem; }
ul.meta-box .cat{ display:inline-block; padding-right:1rem; padding-left:1rem; font-size:.9rem; border:1px solid var(--text-sub); color:var(--text-sub); }
.single ul.meta-box .cat{ border:none; padding-right:0; padding-left:0; }
.single ul.meta-box .cat a{ display:block; color:var(--text-sub); border:1px solid var(--text-sub); padding-right:1rem; padding-left:1rem; text-decoration:none; }
.single-tags a{ display:inline-block; font-size:.85rem; color:var(--text-light); text-decoration:none; }
.single-tags a::before{ content:"#"; }
.single-tags a:not(:last-of-type){ margin-right:.5rem; }
.single-tags a:not(:last-of-type)::after{ content:","; }
@media screen and (min-width:480px) {
    .item a{ display:flex; align-items:center; }
    .item a .img-cover{ width:150px; max-width:none; }
    .item a .titlearea{ width:calc(100% - 150px); padding-left:1rem; }
}
@media screen and (min-width:769px) {
    .item a .img-cover{ width:240px; }
    .item a .titlearea{ width:calc(100% - 240px); }
    .item a .titlearea::after{ width:.75rem; height:.75rem; }
}
@media screen and (min-width:1280px) {
    .item a .titlearea{ padding-left:2rem; }
    .item a .titlearea .title{ font-size:1.25rem !important; }
    .item a .titlearea .desc{ display:block; }
}

/* 前のページ次のページ */
#prev-next{ display:flex; margin:4rem 0 6rem; }
#prev-next > div{ position:relative; width:50%; }
#prev-next a{ position:relative; width:100%; padding:4rem 1rem 4rem 1.5rem; display:block; border-bottom:1px solid var(--border-color); }
#prev-next > div:last-of-type a{ text-align:right; padding:4rem 1.5rem 4rem 1rem; }
#prev-next a::after{ display:block; content:""; position:absolute; top:50%; left:.5rem; transform:translateY(-50%) rotate(225deg); width:.5rem; height:.5rem; border-top:2px solid var(--text-light); border-right:2px solid var(--text-light); z-index:1; transition:transform .3s ease; }
#prev-next > div:last-of-type a::after{ left:auto; right:.5rem; transform:translateY(-50%) rotate(45deg); }
#prev-next a:hover::after{ transform:translateX(-.25rem) translateY(-50%) rotate(225deg); border-color:var(--text-color); }
#prev-next > div:last-of-type a:hover::after{ transform:translateX(.25rem) translateY(-50%) rotate(45deg); }

/* 投稿ページ */
#posttitle-area .title{ border-bottom:1px solid var(--border-color); padding-bottom:5rem; }
#posttitle-area .img-cover{ max-width:800px; aspect-ratio:16 / 9; margin:10rem auto; }

/* 固定ページ */
section{ position:relative; overflow:hidden; }
section.over-visible{ overflow:visible; }
section > *,
section > div > *{ position:relative; z-index:5; }
section .eng,
section > div > .eng{ position:absolute; bottom:-5vw; right:-20%; font-size:23vw; line-height:1; margin:0; white-space:nowrap; pointer-events:none; opacity:0.06; letter-spacing:.05em; z-index:2; }
#top-infrastructure .eng{ font-size:27vw; }
section.content-block .eng{ bottom:auto; top:-3vw; font-size:20vw; }
section.content-block.num .eng{ right:0; }
/* ページタイトル */
#page-header{ position:relative; width:100%; padding:0 clamp(16px, -12px + 8.75vw, 100px); background-color:#fff; }
#page-header > div{ position:relative; width:100%; padding-top:12rem; padding-bottom:6rem; border-left:1px solid var(--border-color); }
#page-header .title{ position:relative; margin:0; }
/* ページタイトル・TOPページ */
.home #page-header{ display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; min-height:77vh; min-height:calc(var(--vh, 1vh) * 77); padding-bottom:clamp(16px, -8.286px + 7.589vw, 50px); /* 320～768px */ padding-top:12rem; padding-bottom:6rem; border:none; }
.home #page-header .title{ font-size:clamp(2.5rem, 9vw, 3.5rem); word-break:keep-all; overflow-wrap:break-word; text-wrap:balance; }
.home #page-header .desc{ margin-top:1.5rem; font-size:1.1em; }
.home #page-header .eng{ top:5vh; bottom:auto; right:-4%; color:var(--text-color2); opacity:1; }
.home section h2:first-of-type,
#top-contact h2{ margin-top:0; }
/* scrolldown */
.scrolldown a{ text-decoration:none; }
#top-lead .scrolldown{ position:absolute; top:30px; left:50%; transform:translateX(-50%); z-index:50; scroll-margin-top:300px; }
#top-lead .scrolldown::before{ content:""; position:absolute; top:30px; left:50%; transform:translateX(-50%); width:9px; height:9px; border-radius:50%; background:var(--text-color); 
    animation: circlemove 1.6s ease-in-out infinite,
               cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove{
  0%{ top:40px; }
  100%{ top:60px; }
}
@keyframes cirlemovehide{
  0%{ opacity:0 }
  50%{ opacity:1; }
  80%{ opacity:0.9; }
  100%{ opacity:0; }
}
#top-lead.inner,
#top-ziflow.inner{ padding-top:14rem; padding-bottom:6rem; }
#top-lead .scrolldown::after{ content:""; position:absolute; top:40px; left:50%; transform:translateX(-50%); width:1px; height:20px; background:var(--text-color); }
/* Lead */
#top-lead .text-area p{ font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color:var(--text-light); text-align:center; }
/* Ziflow */
.images.ziflow-flow img,
#top-ziflow .sp-images img{ max-width:500px; margin:0 auto; }
.images.ziflow-flow,
#top-ziflow .sp-images{ display:flex; flex-direction:column; align-items:center; }
.images.ziflow-flow .icon-color,
#top-ziflow .sp-images .icon-color{ width:2rem; margin-top:2rem; }
.images.ziflow-flow .sp-visible,
#top-ziflow .sp-images .sp-visible{ display:inline-block; }
.images.ziflow-flow .tab-visible,
#top-ziflow .sp-images .tab-visible{ display:none; }
/* Effect */
.effect-wrapper{ display:flex; flex-wrap:wrap; gap:4rem; }
.effect-wrapper .effect-left{ flex:1; min-width:300px; }
.effect-wrapper .effect-right{ flex:1; min-width:300px; background:#fff; margin-top:3rem; padding:2.5rem 1rem; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,0.05); }
.effect-wrapper .effect-right .text-s{ color:var(--text-light); margin-bottom:1.5rem; border-bottom:1px solid #eee; padding-bottom:.5rem; }
.effect-wrapper .effect-right ul{ list-style:none; padding:0; margin:0; }
.effect-wrapper .effect-right ul li{ display:flex; justify-content:space-between; align-items:baseline; }
.effect-wrapper .effect-right ul li:not(:last-of-type){ margin-bottom:1.2rem; }
.effect-wrapper .effect-right ul li:last-of-type{ border-top:1px dashed #ddd; margin-top:1.5rem; padding-top:1.5rem; }
.effect-wrapper .effect-right ul span:first-of-type{ font-weight:bold; color:var(--text-color); }
.effect-wrapper .effect-right ul span:last-of-type{ font-size:.9rem; letter-spacing:-.05rem; }
.effect-wrapper .effect-right ul span strong{ font-size:2rem; }
/* 制作インフラ会社へ */
#top-infrastructure{ background-color:#333; }
#top-infrastructure h2, #top-infrastructure p{ color:#fff; }
#top-infrastructure .inner{ padding-top:11rem; padding-bottom:15rem; }
#top-infrastructure .side-image img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
/* すべての拠点 */
#top-base.inner{ padding-top:8rem; padding-bottom:12rem; }
/* お問い合わせ */
#top-contact.inner{ padding-top:8rem; padding-bottom:12rem; }
#top-contact .image{ position:absolute; inset:0; background:url('img/bgimage-sky.jpg') no-repeat center/cover; background-attachment:fixed; /* パララックス */ filter:grayscale(80%) brightness(120%); z-index:0; }
#top-contact .overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(248,248,248,.9); z-index:1; backdrop-filter:blur(2px); }
/* 固定ページ */
#main-content{ position:relative; }
.lead{ font-size:1.125em; line-height:2.2; font-weight:bold; position:relative; padding:.5em 1em; margin:0 clamp(16px, -12px + 8.75vw, 100px); color:var(--text-color); background-color:#fff; }
.lead::before,
.lead::after{ display:inline-block; position:absolute; width:10px; height:100%; border:2px solid var(--text-light); box-sizing:border-box; content:''; }
.lead::before{ top:0; left:0; border-right:none; }
.lead::after{ bottom:0; right:0; border-left:none; }
.content-block{ padding-top:3rem; padding-bottom:4rem; border-top:1px solid var(--border-color); }
.content-block:first-of-type{ margin-top:1rem; border-top:none; padding-top:0; }
.content-block.is-accent{ border-left:4px solid var(--accent-color2); padding-top:5rem; padding-bottom:6rem; padding-right:clamp(1rem, 0.667rem + 1.667vw, 2rem); padding-left:clamp(1rem, 0.667rem + 1.667vw, 2rem); background-color:#fff; }
.lead + .content-block.is-accent{ margin-top:5rem; }
.lead + .content-block.num{ padding-top:3rem; }
/* 関連ページ */
.page-links{ margin-top:12rem; margin-bottom:-8rem; border-top:2px solid var(--border-color); border-right:1px solid var(--border-color); }
.page-links.inner{ padding-top:4rem; padding-bottom:4rem; }
/* カードボタン */
.card-wrapper{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
.card-wrapper a{ display:block; position:relative; width:100%; font-weight:bold; padding:2rem 1.5rem; margin:0 auto; transition:background-color .5s cubic-bezier(0.23, 1, 0.32, 1), padding-left .5s cubic-bezier(0.23, 1, 0.32, 1); color:var(--text-color1); border-bottom:1px solid var(--border-color); letter-spacing:0; text-decoration:none; line-height:1.3; z-index:1; }
.card-wrapper a::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:2px; height:30%; background-color:var(--accent-color2); transition:height .5s cubic-bezier(0.23, 1, 0.32, 1); }
.card-wrapper a::after{ content:attr(data-number); position:absolute; right:1rem; bottom:0; font-family:"Times New Roman", serif; font-size:4rem; color:#00000008; z-index:-1; }
.card-wrapper a:hover{ background-color:var(--text-color2); padding-left:2.5rem; }
.card-wrapper a:hover::before{ height:100%; }
/* 拠点体制 */
.office .img-cover, 
.gmap{ position:relative; width:100%; aspect-ratio:16 / 9; }
.gmap iframe{ position:absolute; inset:0; }
@media screen and (max-width:1279px) {
    /* Ziflow */
    #top-ziflow .pc-images{ display:none; }
    /* 制作インフラ会社へ */
    #top-infrastructure .side-image{ display:none; }
}
@media screen and (min-width:480px) {
    /* Effect */
    .effect-wrapper .effect-right{ padding:2.5rem; }
    .effect-wrapper .effect-right ul span:last-of-type{ font-size:1rem; letter-spacing:0; }
}
@media screen and (min-width:769px) {
    /* 固定ページ */
    #main-content > div > p,
    #main-content > div > div,
    #main-content > div .inner-content,
    .content-block > p,
    .content-block .inner-content,
    .content-block > .images{ margin-left:clamp(0px, -406.321px + 52.838vw, 270px); }
    #main-content > div > .lead{ margin:0 clamp(16px, -12px + 8.75vw, 100px); text-align:center; }
    #main-content > .post-content > p,
    #main-content > #prev-next > div{ margin-left:0; }
    #main-content > .post-content,
    #main-content .single-tags{ max-width:1000px; margin:0 auto; }
    #main-content > .inner2 > p,
    #main-content > .inner2 > div,
    #main-content > .inner2 > ul{ margin-left:auto; }
    /* カードボタン */
    .card-wrapper{ grid-template-columns:repeat(3, 1fr); gap:2rem; }
    /* お問い合わせフォームページ */
    .page-id-30 #main-content > div > p,
    .page-id-30 #main-content > div > div{ margin-left:0; }
	.page-id-30 #main-content > div > .lead{ margin:0 clamp(16px, -12px + 8.75vw, 100px); text-align:center; }
    .home #page-header{ min-height:75vh; min-height:calc(var(--vh, 1vh) * 75); }
    .home #page-header .title{ font-size:clamp(3.8rem, 1.994rem + 3.757vw, 5rem); }
    .home #page-header .eng{ top:3vh; }
    /* scrolldown */
    #top-lead .scrolldown,
    #top-lead .scrolldown::before{ top:40px; }
    /* Ziflow */
    .images.ziflow-flow,
    #top-ziflow .sp-images{ display:flex; flex-direction:row; justify-content:space-between; }
    .images.ziflow-flow > div,
    #top-ziflow .sp-images > div{ width:calc(calc(100% - 2rem) / 2); }
    .images.ziflow-flow .sp-visible,
    #top-ziflow .sp-images .sp-visible{ display:none; }
    .images.ziflow-flow .tab-visible,
    #top-ziflow .sp-images .tab-visible{ display:inline-block; }
    /* Effect */
    #top-effect br.sp-visible{ display:none; }
}
@media screen and (min-width:1280px) {
    /* 固定ページ */
    #main-content > div > p,
    #main-content > div > div,
    #main-content > div .inner-content,
    .content-block > p,
    .content-block .inner-content,
    .content-block > .images{ margin-left:33%; }
    .home #page-header .eng{ top:1vh; }
    /* Ziflow */
    #top-ziflow .sp-images{ display:none; }
    #top-ziflow{ display:flex; justify-content:space-between; align-items:flex-start; }
    #top-ziflow .text-area{ width:35%; }
    #top-ziflow .pc-images{ width:59%; position:relative; }
    #top-ziflow .pc-images .icon-color{ width:2rem; margin-top:2rem; }
    .pc-images-sticky-wrapper{ display:flex; justify-content:space-between; width:100%; }
    .pc-images-sticky-wrapper > div{ width:calc(calc(100% - 2rem) / 2); }
    /* 制作インフラ会社へ */
    #top-infrastructure .inner{ width:50%; margin:0 auto; }
    #top-infrastructure .text-area{ position:relative; z-index:5; }
    #top-infrastructure .side-image{ display:block; position:absolute; width:22%; aspect-ratio:2 / 3; filter:grayscale(90%) brightness(50%) contrast(110%); opacity:.8; z-index:3; }
    #top-infrastructure .side-image.left-image{ left:0; top:9rem; }
    #top-infrastructure .side-image.right-image{ right:0; bottom:9rem; }
}
@media screen and (min-width:1400px) {
    #top-infrastructure .inner{ width:45%; }
    #top-infrastructure .side-image{ width:24%; aspect-ratio:1; }
}
@media screen and (min-width:1600px) {
    #top-ziflow .text-area{ width:39%; }
    #top-ziflow .pc-images{ width:55%; }
}

/* google reCAPTCHA */
.grecaptcha-badge{ visibility:hidden; }

/* お問い合わせページ（contact）の時だけ表示し、少し上にずらす */
.page-id-30 .grecaptcha-badge{ visibility:visible; bottom:100px !important; }