@charset "utf-8";
/*
Theme Name:nestle-d
Description:responsive design
version： 0.0.1
*/
/* ----------------------------------------------------------------------
共通 1rem=16px
---------------------------------------------------------------------- */
:root{ font-size:16px;
--main-color1:#1d5945; --main-color2:#86b59c; --main-color3:#d3dad4; --sub-color1:#493f39; --sub-color2:#966c64; --sub-color3:#dad1cf; --sub-color4:#794f48; --accent-color:#d9594f; --base-color:#f3f3f3; --text-color:#222222; }
@media screen and (min-width:769px) {
:root{ font-size:18px; }
}
body{
font-family:'Noto Sans JP', 'Roboto', sans-serif; font-weight:400; line-height:1.8; color:var(--text-color);
}
h1, h2, h3, h4, h5, h6, .logotext, .title, .catch, .eng{
font-family:'Roboto', 'Noto Sans JP', sans-serif; font-weight:700; line-height:1.3;
}
footer{ z-index:5; }
#main{ flex:1; position:relative; background:var(--base-color); }
.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 */
h1{ font-size:2.5rem; color:var(--main-color1); }
h2, .single #page-header .title{ font-size:1.8rem; color:var(--main-color1); }
h3{ font-size:1.4rem; color:var(--main-color1); }
h4{ font-size:1.1rem; }
h5{ font-size:.9rem; }
h2.heading1{ text-align:center; }
h2.heading1 span{ display:block; color:var(--main-color2); font-size:.6em; letter-spacing:.1rem; }
h2.wp-block-heading{ background-image:linear-gradient(#ddd 50%, var(--main-color2) 50%); background-size:7px 100%; background-repeat:no-repeat; padding-left:1.2rem; margin-top:2em; }
.single h2.wp-block-heading{ position:relative; background:var(--base-color); padding-top:.5rem; padding-bottom:.5rem; padding-left:2rem; margin-top:4rem; }
.single h2.wp-block-heading::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); left:.75rem; width:6px; height:70%; background-image:linear-gradient(#ddd 50%, var(--main-color2) 50%); background-size:6px 100%; background-repeat:no-repeat; }
h3.heading1{ position:relative; text-align:center; padding-bottom:.75rem; }
h3.heading1::before,
h3.heading1::after{ content:""; position:absolute; margin:auto; left:0; bottom:0; width:2.5rem; background-color:#ddd; height:4px; right:2.5rem; }
h3.heading1::before{ background-color:var(--main-color2); left:2.5rem; width:5rem; }
h3.wp-block-heading{ position:relative; border-bottom:2px solid #ddd; padding:.25rem 0 .25rem .75rem; margin-top:2em; }
h3.wp-block-heading::after{ content:""; position:absolute; left:0; bottom:-2px; width:30%;
height:2px; background:var(--main-color2); }
h4.wp-block-heading{ position:relative; color:var(--main-color2); width:fit-content; border-bottom:1px solid #ddd; padding:.25rem 0 .25rem 2rem; margin-top:2em; }
h4.wp-block-heading::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); left:.5rem; width:24px; height:24px; background:url('data:image/svg+xml;utf8,') no-repeat center left; }
.text-c{ text-align:center; }
.text-s{ font-size:.85rem; }
.text-m{ font-size:1.1rem; }
a{ color:var(--sub-color1); text-decoration:none; transition:all .3s ease; }
a.tap{ position:relative; display:block; }
a.tap:active{ transform:scale(.95); }
a.line{ position:relative; display:inline-block; }
a.line::after{ content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--sub-color2); transition:all .3s ease; }
a.line:hover::after{ width:100%; }
@keyframes heartbeat{
0% { transform:scale(1); }
50% { transform:scale(1.05); }
100% { transform: scale(1); }
}
a.pulse svg,
a.pulse img{ display:inline-block; animation:heartbeat 2.5s ease-in-out infinite; transition:transform .3s; }
a.pulse:hover svg,
a.pulse:hover img{ animation-play-state:paused; /* 鼓動を止める */ transform: scale(1.1); }
@keyframes heartbeat2{
0% { transform:scale(1) translateX(-50%); }
50% { transform:scale(1.05) translateX(-50%); }
100% { transform:scale(1) translateX(-50%); }
}
a.pulse-over{ position:relative; }
a.pulse-over::before{ display:inline-block; animation:heartbeat2 2.5s ease-in-out infinite; transition:all .3s; content:""; position:absolute; left:50%; transform:translateX(-50%); width:40px; aspect-ratio:1; border-radius:30px; background:rgba(255,255,255,.15); opacity:0; z-index:0; }
a.pulse-over:hover::before{ opacity:1; }
.article p a{ text-decoration:underline; }
.article p a:hover{ color:var(--sub-color2); }
p + h2, .article p + h2, .article ol + h2, .article ul + h2{ margin-top:4rem; }
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; }
/* フロー1 */
ul.flow-list{ list-style:none; padding-left:0; }
ul.flow-list > li{ position:relative; }
ul.flow-list > li:not(:last-of-type){ margin-bottom:3rem; }
ul.flow-list > li:not(:last-of-type)::before{ content:""; background:#eee; width:2px; height:calc(100% + 1rem); position:absolute; top:2.5rem; left:clamp(20px, 16.429px + 1.116vw, 25px); }
ul.flow-list > li:not(:last-of-type)::after{ content:""; background:var(--main-color2); width:2px; height:0; position:absolute; top:2.5rem; left:clamp(20px, 16.429px + 1.116vw, 25px); z-index:1; transition:height 1s ease-out; }
ul.flow-list > li.is-active::after{ height:calc(100% + 1rem); }
ul.flow-list > li .num{ display:inline-block; position:absolute; top:0; left:0; width:clamp(40px, 32.857px + 2.232vw, 50px); aspect-ratio:1; line-height:clamp(40px, 32.857px + 2.232vw, 50px); text-align:center; border-radius:100vh; background:#ddd; color:#fff; font-size:1.25rem; font-weight:normal; transition:background 0.6s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index:2; }
ul.flow-list > li.is-active .num{ background:var(--main-color2); transform:scale(1.1); }
ul.flow-list > li dl{ margin-left:clamp(50px, 35.714px + 4.464vw, 70px); }
ul.flow-list > li dl h3{ color:var(--main-color1); }
ul.flow-list > li dd{ margin-left:0; }
/* フロー2 調査報告書サンプル */
ul.flow-report-sample{ position:relative; list-style:none; padding-left:0; margin-bottom:clamp(50px, 36.667px + 4.167vw, 90px); }
ul.flow-report-sample::before{ content:""; position:absolute; top:0; left:0; width:1rem; height:100%; display:block; background:#eee; border-radius:20px; }
ul.flow-report-sample > li{ position:relative; }
ul.flow-report-sample > li:not(:last-of-type){ margin-bottom:3rem; }
ul.flow-report-sample > li dl{ padding-left:2rem; position:relative; }
ul.flow-report-sample > li dl::before,
ul.flow-report-sample > li dl::after{ content:""; display:block; position:absolute; top:1.25rem; }
ul.flow-report-sample > li dl::before{ width:.5rem; height:.5rem; margin-top:-.25rem; background:var(--sub-color2); border-radius:50%; left:.25rem; z-index:2; }
ul.flow-report-sample > li dl::after{ width:20px; border-bottom:1px dashed #999;left:.5rem; z-index:1; }
ul.flow-report-sample > li dt{ font-size:1.25rem; color:var(--sub-color2); }
ul.flow-report-sample > li dd{ margin:0; }
ul.flow-report-sample > li dd .images{ margin:1rem 0; }
ul.flow-report-sample > li dd .images img{ width:100%; max-width:420px; margin:1rem auto; }
/* チェックマークリスト */
ul.check, a ul.check{ list-style:none; padding:0; }
ul.check li{ background:url('data:image/svg+xml;utf8,') no-repeat; background-position:center left; padding-left:1.5rem; transition:all .3s ease; }
a:hover ul.check li{ background-image:url('data:image/svg+xml;utf8,'); }
.page-child .uwaki ul.check li,
.page-child .sokou ul.check li,
.page-child .sokou-family ul.check li,
.page-child .hitosagashi ul.check li,
.page-child .kekkon ul.check li,
.page-child .touchouki ul.check li,
.page-child .stalker ul.check li,
.page-child .shigyou ul.check li,
.page-parent ul.check li{ font-size:1.1rem; font-weight:bold; background-position:top 7px left; }
.page-parent .survey-items ul.check li{ font-size:.9rem; font-weight:normal; background-position:center left; }
.uwaki ul.jirei li,
.sokou ul.jirei li,
.sokou-family ul.jirei li,
.hitosagashi ul.jirei li,
.kekkon ul.jirei li,
.touchouki ul.jirei li,
.stalker ul.jirei li,
.shigyou ul.jirei li{ font-size:.85rem; }
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; }
.tate{ -ms-writing-mode:tb-rl; writing-mode:vertical-rl; }
.text-combine{ -webkit-text-combine:horizontal; -ms-text-combine-horizontal:all; text-combine-upright:all; }
.marker strong{ background:linear-gradient(transparent 70%, var(--main-color3) 30%); }
/* ナンバー枠 */
.fukidashi-num{ position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; width:120px; aspect-ratio:1; color:var(--main-color2); border:solid 1px var(--main-color2); border-radius:50%; }
.fukidashi-num span{ display:block; }
.fukidashi-num span:last-of-type{ font-size:3rem; line-height:1; }
.fukidashi-num::before{ content:""; position:absolute; bottom:8px; right:8px; width:18px; height:18px; box-sizing:border-box; background-color:#fff; rotate:135deg; }
.fukidashi-num::after{ content:""; position:absolute; bottom:-10px; right:8px; width:28px; height:28px; box-sizing:border-box; border-top:solid 1px; border-color:var(--main-color2); rotate:45deg; }
.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 #ddd; }
dl.col2 dt:first-of-type{ border-top:1px solid #ddd; }
}
@media screen and (min-width:480px) {
:where(dl.col2 dt, dl.col2 dd):not(:first-of-type){ border-top:1px solid #ddd; }
}
@media screen and (max-width:768px) {
.tate-sp{ -ms-writing-mode:tb-rl; writing-mode:vertical-rl; }
dl.wpcf2 dt{ width:100%; padding:1.25rem 0 0; }
dl.wpcf2 dd{ width:100%; padding:.5rem 0 1.25rem; border-bottom:1px solid #ddd; }
dl.wpcf2 dt:first-of-type{ border-top:1px solid #ddd; }
}
@media screen and (min-width:769px) {
.tate-pc{ -ms-writing-mode:tb-rl; writing-mode:vertical-rl; }
ul.flow-list > li:not(:last-of-type){ margin-bottom:4rem; }
ul.flow-list > li:not(:last-of-type)::before{ height:calc(100% + 2rem); }
ul.flow-list > li.is-active::after{ height:calc(100% + 2rem); }
.pc-visible{ display:block; }
ul.flow-report-sample > li dl{ padding-left:70px; }
ul.flow-report-sample > li dl::after{ width:50px; }
:where(dl.wpcf2 dt, dl.wpcf2 dd):not(:first-of-type){ border-top:1px solid #ddd; }
}
/* フワッと表示 jsとセットで使う */
.scroll-block{ opacity:0; transform:translateY(20px); transition:all 1.5s; }
.scroll-block.blockIn{ opacity:1; transform:translateY(0); }
/* レイアウト */
.inner{ position:relative; padding:clamp(60px, 40px + 6.25vw, 120px) clamp(16px, -12px + 8.75vw, 100px); }
.inner2{ position:relative; max-width:1200px; margin:0 auto; }
.inner.pT0em{ padding-top:0; }
.inner.pB0em{ padding-bottom:0; }
.inner.pLR0em{ padding-right:0; padding-left:0; }
.inner.ra-tl{ border-radius:clamp(75px, 21.429px + 16.741vw, 150px) 0 0 0; }
.inner.ra-tr{ border-radius:0 clamp(75px, 21.429px + 16.741vw, 150px) 0 0; }
.inner.ra-br{ border-radius:0 0 clamp(75px, 21.429px + 16.741vw, 150px) 0; }
.inner.ra-bl{ border-radius:0 0 0 clamp(75px, 21.429px + 16.741vw, 150px); }
.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; }
/* header */
#header{ position:fixed; top:0; left:0; width:100%; height:90px; background:rgba(255,255,255,1); box-shadow:rgba(100, 100, 100, 0.2) 0px 7px 29px 0px; z-index:100; transition:height .3s ease, padding .3s ease; }
#header.scrolled{ height:80px; }
.nav-open #header{ background:rgba(255,255,255,0); box-shadow:none; }
#header.inner{ display:flex; flex-direction:column; padding-left:clamp(16px, 4.667px + 3.542vw, 50px); padding-right:clamp(16px, 4.667px + 3.542vw, 50px); }
#header > div{ position:relative; width:100%; height:100%; }
#header-logo{ position:relative; display:flex; flex-direction:column; justify-content:center; width:calc(100% - 70px); height:100%; }
#header-logo h1, #header-logo p{ margin:0; font-size:1rem; }
#header-logo p.desc{ font-size:.75rem; line-height:1.3; margin-top:.25rem; }
a.logo{ display:block; }
.logo.white{ display:none; }
#header-contact{ display:none; }
.header-button .icon-color,
.header-button img{ width:32px; aspect-ratio:1; margin:0 auto; fill:var(--main-color1); transition:all .3s ease; }
.header-button span{ display:block; line-height:1.3; font-weight:bold; color:var(--main-color1); transition:all .3s ease; }
.header-button:hover span{ color:var(--sub-color2); }
.header-button:hover .icon-color{ fill:var(--sub-color2); }
/* アンカーリンク */
.anchor{ /*padding-top:90px; margin-top:-90px;*/ scroll-margin-top:90px; }
/* table横スクロール（中止） */
.table-wrapper{ margin:2rem 0; }
table{ width:100%; 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) {
.inner.ra-tl{ border-radius:clamp(150px, 57.461px + 12.034vw, 250px) 0 0 0; }
.inner.ra-tr{ border-radius:0 clamp(150px, 57.461px + 12.034vw, 250px) 0 0; }
.inner.ra-br{ border-radius:0 0 clamp(150px, 57.461px + 12.034vw, 250px) 0; }
.inner.ra-bl{ border-radius:0 0 0 clamp(150px, 57.461px + 12.034vw, 250px); }
#header > div{ display:flex; justify-content:space-between; }
#header-logo{ width:240px; }
#header-buttons{ position:relative; height:100%; border-radius:0 0 0 50px; width:fit-content; background:var(--main-color3); margin-right:calc(clamp(16px, 4.667px + 3.542vw, 50px) * -1); }
#header-contact{ position:relative; height:100%; display:flex; justify-content:flex-end; align-items:center; margin:0 calc(clamp(16px, 4.667px + 3.542vw, 50px) + 70px) 0 clamp(16px, 4.667px + 3.542vw, 50px); }
.nav-open #header-contact{ display:none; }
#header-contact .text-area{ font-size:.9rem; margin:0; padding-right:10px; color:var(--main-color1); }
#header-contact .text-area span{ display:block; font-size:.75rem; line-height:1.3; }
.header-button{ display:flex; flex-direction:column; justify-content:center; text-align:center; width:clamp(66px, -60.411px + 16.438vw, 150px); font-size:.9rem; border-left:1px solid #fff; }
.header-button span.pc-visible{ display:none; }
.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; }
}
@media screen and (min-width:769px) and (max-width:1279px) {
#header,
.nav-open #header{ background:none; box-shadow:none; }
.home #header .logo,
.home #header.scrolled .logo.white{ display:none; }
.home #header .logo.white,
.home #header.scrolled .logo{ display:block; }
}
@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; }
.article.point .wp-block-image{ margin:3rem auto 2rem !important; }
}
@media screen and (min-width:1280px) {
#header{ height:160px; }
#header.inner{ padding-left:clamp(50px, -150px + 15.625vw, 100px); padding-right:clamp(50px, -150px + 15.625vw, 100px); }
#header-logo{ height:100px; width:fit-content; }
#header-buttons{ margin-right:calc(clamp(50px, -150px + 15.625vw, 100px) * -1); }
#header.scrolled{ height:130px; }
#header.scrolled #header-logo{ height:80px; }
#header.scrolled #global-menu ul.menu{ height:50px; }
#header-logo p.desc br,
#header-contact p.text-area br:first-of-type{ display:none; }
#header-contact{ margin:0 clamp(0px, -200px + 15.625vw, 50px) 0 50px; }
#header-contact .text-area{ font-size:1rem; padding-right:16px; }
#header-contact .text-area span{ font-size:.85rem; }
.header-button{ max-width:170px; font-size:1rem; }
.header-button span.tab-visible{ display:none; }
.header-button span.pc-visible{ display:block; font-size:1.1rem; }
table.fee td{ text-align:center; }
/* アンカーリンク */
.anchor{ /*padding-top:130px; margin-top:-130px;*/ 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; }
.single .bgwhite{ background:none; }
.single .article .inner2{ background:#fff; border-radius:50px; padding:clamp(60px, 40px + 6.25vw, 120px) clamp(16px, -12px + 8.75vw, 100px); }
.wp-block-columns.is-layout-flex.sticky-item .wp-block-column:first-of-type{ top:190px; }
}
/* nav */
/* drawer */
.hamburger{ position:absolute; top:50%; transform:translateY(-50%); right:0; width:60px; height:60px; border-radius:60px; border:1px solid var(--sub-color1); display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; transition:all .3s ease; z-index:2; }
.hamburger-border{ display:inline-block; width:1.5em; height:2px; background:var(--sub-color1); margin:3px 0; transition:all .3s ease; }
.h-sp-menu{ display:inline-block; text-transform:uppercase; margin:3px 0 0; padding:0; line-height:1; font-size:.75em; transition:all .3s ease; }
.hamburger:hover .hamburger-border{ background:var(--main-color1); }
.hamburger:hover .h-sp-menu{ color:var(--main-color1); }
.nav-open .hamburger-border-top{ transform:translateY(8px) rotate(45deg); }
.nav-open .hamburger-border-center{ width:0; }
.nav-open .hamburger-border-bottom{ transform:translateY(-8px) rotate(-45deg); }
#drawer-menu{ position:fixed; left:-20px; top:0; width:100%; height:100vh; height:calc(var(--vh, 1vh) * 100); transition:all .3s 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:100px; padding:0 clamp(16px, 4.667px + 3.542vw, 50px); transition:opacity .3s .3s ease; opacity:0; z-index:1; }
.black-bg{ position:absolute; left:0; top:0; width:100%; min-height:100%; z-index:-1; opacity:0; visibility:hidden; cursor:pointer; transition:all .3s ease; }
.nav-open .black-bg{ opacity:1; visibility:visible; }
.drawer-contact{ border-radius:30px; padding:2rem 1rem; background:var(--base-color); }
.drawer-contact .text-area{ font-size:1.1rem; margin-top:0; }
.drawer-contact .text-area span{ display:block; font-size:1.25rem; font-weight:bold; }
.drawer-contact > p:last-of-type{ display:flex; }
.drawer-contact .header-button{ width:100%; padding:1rem .25rem; text-align:center; border:none; }
.drawer-contact .header-button:not(:first-of-type){ border-left:1px solid var(--main-color3); }
.drawer-contact .header-button .icon-color,
.drawer-contact .header-button img{ width:40px; aspect-ratio:1; margin:0 auto; fill:var(--main-color1); transition:all .3s ease; }
.drawer-contact .header-button span{ display:block; margin-top:.5rem; }
.drawer-contact .header-button:hover .icon-color{ fill:var(--sub-color2); }
#drawer-menu ul.menu{ width:100%; }
#drawer-menu ul.menu a{ position:relative; display:block; padding:.5rem 0; }
#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(--sub-color2); border-right:2px solid var(--sub-color2); z-index:1; transition:all .3s ease; }
#drawer-menu ul.menu a:hover{ color:var(--main-color1); background:var(--main-color3); padding-left:1rem; }
#drawer-menu ul.menu a:hover::after{ right:.5em; }
#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; }
#global-menu ul.menu{ display:none; }
@media screen and (max-width:1279px) {
.nav-open {
/* ページのスクロールを禁止 */
overflow:hidden; }
.nav-open #drawer-menu{ left:0; opacity:1; visibility:visible; pointer-events:auto; }
.nav-open .drawer-inner{ opacity:1; }
}
@media screen and (min-width:769px) {
.hamburger{ right:clamp(16px, 4.667px + 3.542vw, 50px); }
.drawer-inner{ display:flex; justify-content:space-between; align-items:flex-start; }
.drawer-inner > *{ width:48%; }
}
@media screen and (min-width:1280px) {
.hamburger{ 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:60px; display:flex; align-items:center; margin:0; padding:0; }
#global-menu ul.menu li{ position:relative; width:calc(calc(100% - 240px) / 6); height:100%; }
#global-menu ul.menu > li.menu-item-30,
#global-menu ul.menu > li.menu-item-38{ width:120px; }
#global-menu ul.menu a{ position:relative; height:100%; display:flex; justify-content:center; align-items:center; padding:0 .5rem; font-size:clamp(0.9rem, 0.500rem + 0.5vw, 1rem); font-weight:bold; color:var(--sub-color1); text-decoration:none; transition:all .5s ease; }
#global-menu ul.menu a:hover{ color:var(--main-color1); }
#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:3px; background:var(--main-color2); transition:width .3s ease-out; }
#global-menu ul.menu > li > a:hover::before{ width:100%; }
#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(--sub-color2); border-radius:0 0 4px 4px; 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:var(--sub-color2); font-size:.85rem; color:#fff; padding:.75rem 1rem; }
#global-menu ul.menu li ul.sub-menu a:hover{ background:var(--main-color2); }
#global-menu ul.menu > li > ul.sub-menu{ position:absolute; top:60px; 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; }
/* メガメニュー */
#global-menu ul.menu > li.is-mega-menu > ul.sub-menu{
display:block; width:800px; background:#fff; padding:30px;
display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
#global-menu ul.menu > li.is-mega-menu > ul.sub-menu a{ background:var(--base-color); color:var(--main-color1); justify-content:flex-start; }
#global-menu ul.menu > li.is-mega-menu > ul.sub-menu a::before{ content:""; position:absolute; bottom:0; left:0; width:0; height:3px; background:var(--main-color2); transition:width .3s ease-out; }
#global-menu ul.menu > li.is-mega-menu > ul.sub-menu a:hover::before{ width:100%; }
#global-menu ul.menu > li.is-mega-menu > ul.sub-menu a::after{ content:""; position:absolute; top:50%; right:1rem; transform:translateY(-50%) rotate(45deg); width:.5rem; height:.5rem; border-top:2px solid var(--sub-color2); border-right:2px solid var(--sub-color2); z-index:1; transition:all .3s ease; }
#global-menu ul.menu > li.is-mega-menu > ul.sub-menu a:hover::after{ right:.5rem; }
}
@media screen and (min-width:1600px) {
#global-menu ul.menu li{ width:calc(calc(100% - 280px) / 6); }
#global-menu ul.menu > li.menu-item-30,
#global-menu ul.menu > li.menu-item-38{ width:140px; }
}
/* フッター */
.archive #footer,
.blog #footer{ background:var(--base-color); }
.footer-bottom{ display:flex; flex-direction:column; background:var(--base-color); }
#footer-contact{ position:relative; background:url(img/footer-contact.jpg) no-repeat center center; background-size:cover; overflow:hidden; }
#footer-contact > *{ position:relative; z-index:2; }
#footer-contact .overlay{ position:absolute; inset:0; background:rgba(243,243,243,.9); z-index:1; }
.footer-bottom > div{ width:100%; }
.footer-bottom > div:last-of-type{ margin-top:2rem; }
.footer-menu{ display:flex; flex-wrap:wrap; }
.footer-menu ul.menu,
.footer-menu ul.menu li{ list-style:none; margin:0; padding:0; width:100%; }
.footer-menu ul.menu a{ display:block; position:relative; width:100%; padding:.25rem 0; color:var(--sub-color1); }
.footer-menu ul.menu a::before{ content:""; position:absolute; top:50%; right:1em; transform:translateY(-50%) rotate(45deg); width:.5rem; height:.5rem; border-top:2px solid var(--sub-color2); border-right:2px solid var(--sub-color2); z-index:1; transition:all .3s ease; }
.footer-menu ul.menu a:hover::before{ right:.5em; }
#copyright{ text-align:center; font-size:.7rem; padding:1rem 0; margin:0; border-top:1px solid var(--main-color3); background:var(--base-color); }
/* TOPへ戻るボタン */
#back-to-top{ position:fixed; bottom:53px; right:0; width:52px; aspect-ratio:1; opacity:0; visibility:hidden; border:0; transition:opacity .3s, visibility .3s; background:var(--main-color2); z-index:10; }
#back-to-top.is-active{ opacity:1; visibility:visible; }
@media screen and (min-width:480px) {
#back-to-top{ bottom:0; }
}
@media screen and (min-width:769px) {
.footer-bottom{ display:flex; flex-direction:row; justify-content:space-between; }
.footer-bottom > div{ width:48%; }
.footer-bottom > div:last-of-type{ margin-top:0; }
#back-to-top{ width:60px; }
}
@media screen and (min-width:1280px) {
.single #footer{ background:var(--base-color); }
.footer-menu{ flex-wrap:nowrap; justify-content:space-between; }
.footer-menu ul.menu{ width:48%; }
}
/* アイコン */
.icon-color, button .icon-color{ width:1rem; aspect-ratio:1; fill:var(--sub-color1); }
.video-card .icon-color{ width:4rem; fill:var(--main-color1); }
.modal-close-button .icon-color{ width:3rem; fill:#fff; }
.header-button .icon-color{ width:32px; }
button .icon-color{ width:2rem; fill:#fff; }
.survey-items a .icon-color{ width:72px; fill:var(--main-color2); margin-right:10px; transition:all .3s ease; }
.survey-items a:hover .icon-color{ fill:var(--sub-color2); }
.survey-items a .icon-color.arrow{ display:inline-block; width:40px; margin:0 auto; padding:.25rem; border:1px solid var(--sub-color2); border-radius:100px; fill:var(--sub-color2); }
.survey-items a:hover .icon-color.arrow{ transform:translateX(.2rem); }
.follow-list .icon-color{ width:150px; fill:var(--main-color2); }
.card1.voice .icon-color,
.item-voice .icon-color,
.single-voice #posttitle-area .icon-color{ width:40px; fill:var(--main-color2); }
@media screen and (min-width:769px){
.home .survey-items a .icon-color.arrow{ position:absolute; right:2rem; top:50%; transform:translateY(-50%); }
.home .survey-items a:hover .icon-color.arrow{ transform:translate(.2rem, -50%); }
}
@media screen and (min-width:1280px){
.survey-items a .icon-color.arrow{ position:absolute; right:2rem; top:50%; transform:translateY(-50%); }
.survey-items a:hover .icon-color.arrow{ transform:translate(.2rem, -50%); }
}
/* ボタン */
.linkbutton,
.wp-block-buttons{ position:relative; margin:1rem auto; }
.linkbutton.mT4em{ margin-top:4rem; }
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:all .3s ease; color:#fff; background:var(--sub-color2); overflow:hidden; border:none; border-radius:80px; box-shadow:rgba(165,165,165,.3) 0px 8px 24px; }
.linkbutton a::after{ content:""; position:absolute; top:50%; right:1em; transform:translateY(-50%) rotate(45deg); width:.5rem; height:.5rem; border-top:2px solid #fff; border-right:2px solid #fff; z-index:1; transition:all .3s ease; }
.searchform button.btn{ width:auto; padding:.75rem; line-height:1; background:var(--main-color2); }
.searchform button.btn:hover, .linkbutton a:hover{ background-color:var(--sub-color1); transform:translateY(-.2rem); }
.linkbutton a:hover::after{ right:.5em; }
.article .linkbutton a{ text-decoration:none; }
.article .linkbutton a:hover{ color:#fff; }
a.wp-block-button__link{ position:relative; background:var(--sub-color2); font-weight:bold; padding:.75rem 2rem; box-shadow:rgba(165,165,165,.3) 0px 8px 24px; }
a.wp-block-button__link::after{ content:""; position:absolute; top:50%; right:1em; transform:translateY(-50%) rotate(45deg); width:.5rem; height:.5rem; border-top:2px solid #fff; border-right:2px solid #fff; z-index:1; transition:all .3s ease; }
a.wp-block-button__link:hover{ background-color:var(--sub-color1); transform:translateY(-.2rem); }
a.wp-block-button__link:hover::after{ right:.5em; }
.wpcf7 .wpcf7-submit{ padding:1rem; margin-top:2rem; }
.wpcf7 .wpcf7-submit:hover{ background:var(--sub-color1); transform:translateY(-.125rem); }
/* アウトラインボタン */
.linkbutton.outline a{ background:transparent; border:1px solid var(--sub-color2); color:var(--sub-color2); }
.linkbutton.outline a::after{ border-color:var(--sub-color2); }
.linkbutton.outline a:hover{ color:var(--sub-color1); border-color:var(--sub-color1); }
.linkbutton.outline a:hover::after{ border-color:var(--sub-color1); }
/* 茶色お問い合わせボタン */
.contactbutton{ display:flex; flex-wrap:wrap; color:#fff; border-radius:30px; padding:1rem 1rem 2rem 1rem; background:var(--sub-color1); border:2px solid var(--accent-color); width:100%; max-width:1200px; box-shadow:rgba(165,165,165,.3) 0px 8px 24px; transition:background .3s ease; }
.contactbutton .text-area{ width:100%; }
.contactbutton .text-area span{ display:block; font-size:.85rem; line-height:1.3; }
.contactbutton .header-button{ width:33.33%; padding:0 .5rem; text-align:center; color:#fff; }
.contactbutton .header-button:hover{ color:#ddd; }
.contactbutton .header-button:not(:first-of-type){ border-left:1px solid #fff; }
.contactbutton .header-button .icon-color{ fill:currentColor; /* 親.header-buttonのcolor継承 */ }
.contactbutton .header-button span{ margin-top:.5rem; color:#fff; font-weight:bold; }
.contactbutton:hover{ background:var(--sub-color4); }
@media screen and (max-width:768px) {
.contactbutton .text-area br{ display:none; }
}
@media screen and (min-width:480px) {
.contactbutton .text-area{ padding:0 1rem; }
}
@media screen and (min-width:769px) {
.linkbutton a, .wpcf7 .wpcf7-submit{ max-width:500px; }
.contactbutton{ border-radius:40px; padding:1.5rem 0 1.5rem clamp(1rem, -2.010rem + 6.262vw, 3rem); }
.contactbutton .text-area{ margin:0; padding:0; width:34%; }
.contactbutton .header-button{ width:22%; display:flex; align-content:space-between; }
}
@media screen and (min-width:1280px) {
.contactbutton{ border-radius:70px; margin:0 auto; }
.contactbutton .text-area br:first-of-type{ display:none; }
.contactbutton .text-area{ width:40%; }
.contactbutton .header-button{ width:20%; }
}
/* パンクズ */
.breadcrumb{ position:relative; margin-bottom:1.5rem; z-index:1; }
.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; }
.breadcrumb .icon-color{ fill:var(--sub-color2) !important; }
/* ページネーション */
.pagination{ margin:3rem 0 0; }
ul.page-numbers{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
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(--sub-color3); color:var(--sub-color1); border-radius:4px; }
ul.page-numbers .current{ background:var(--sub-color3); }
ul.page-numbers a:hover{ background:var(--main-color2); border:1px solid var(--main-color2); 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{ width:100%; padding:1em .5em; border:1px solid var(--sub-color2); border-radius:4px; line-height:1.3; }
.wpcf7 select, .wpcf7 input[type=checkbox]{ width:auto; max-width:97%; padding:8px; border:1px solid var(--sub-color2); border-radius:4px; font-size:1rem; }
.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(--main-color2); color:#fff; font-size:.9em; font-weight:bold; padding:.1em .5em 0; margin:0 0 0 .5em; border-radius:4px; }
.wpcf7 input:focus,
.wpcf7 textarea:focus{ border-color:var(--main-color2); outline:1px solid var(--main-color2); }
/* sidemenu */
#sidemenu select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fff; outline:none; border:1px solid var(--sub-color2); border-radius:4px; 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(--sub-color2); border-right:2px solid var(--sub-color2); content:''; }
ul.cat-list a{ display:inline-block; padding:.25rem 0; color:var(--sub-color2); }
ul.cat-list a:hover{ color:var(--main-color1); }
@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; }
.searchform .keyword_text{ width:calc(100% - 70px); }
.searchform input{ width:100%; padding:1rem; border:1px solid #777; border-radius:4px; line-height:1.3; }
.searchform input:focus{ border:1px solid var(--sub-color2); outline:none; }
/* 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; }
/* banner */
.banner{ position:relative; display:block; border-radius:30px; overflow:hidden; height:200px; width:100%; box-shadow:rgba(165,165,165,.2) 0px 8px 24px; }
.banner:hover{ transform:translateY(-.5rem); }
.banner .text-area{ position:absolute; top:50%; left:1em; transform:translateY(-50%); z-index:2; }
.banner h2.heading1{ text-align:left; color:#fff; }
.banner h2.heading1 span{ color:#fff; }
.banner .overlay2{ position:absolute; top:50%; left:-50%; width:100%; aspect-ratio:1; transform:translateY(-50%) rotate(75deg); background:var(--main-color2); transition:all .3s ease; z-index:1; }
.banner:hover .overlay2{ transform:translateY(-50%) rotate(75deg) scale(1.03); }
.banner .overlay1{ position:absolute; inset:0; background:rgba(211,218,212,.3); transition:all .3s ease; z-index:0; }
.banner:hover .overlay1{ background:rgba(211,218,212,.5); }
.banner .bgimage{ position:absolute; width:60%; height:100%; right:0; top:0; background:url(img/banner-media.jpg) no-repeat left center; background-size:cover; z-index:-1; }
@media screen and (min-width:769px) {
.banner{ height:250px; }
.banner h2.heading1 br{ display:none; }
.banner .bgimage{ width:55%; }
}
@media screen and (min-width:1280px) {
.banner{ height:300px; }
}
/* 記事リスト */
.bloglist{ position:relative; }
.item, .item-voice{ position:relative; width:100%; margin:0 0 3rem; }
.item a{ position:relative; display:block; width:100%; height:100%; }
.item-voice a{ position:relative; display:block; width:100%; height:100%; padding:1rem; border-radius:30px; background:#fff; box-shadow:rgba(100, 100, 100, 0.2) 0px 7px 29px 0px; }
.item a:hover{ transform:translateX(.5rem); }
.item-voice a:hover{ transform:translateY(-.5rem); }
.item a:active, .item-voice a:active{ transform:scale(.95); }
.item a .img-cover{ width:100%; max-width:240px; margin:0 auto; aspect-ratio:3 / 2; border-radius:20px; transition:all .3s ease; }
.item a:hover .img-cover{ box-shadow:rgba(100, 100, 100, 0.2) 0px 7px 29px 0px; }
.item a .titlearea{ position:relative; padding:0 2rem 0 0; }
.item a .titlearea::after{ display:block; content:""; position:absolute; top:50%; right:.5rem; transform:translateY(-50%) rotate(45deg); width:.75rem; height:.75rem; border-top:3px solid var(--sub-color2); border-right:3px solid var(--sub-color2); z-index:1; transition:all .3s ease; }
.item a:hover .titlearea::after{ right:.25rem; border-color:var(--main-color1); }
.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:transparent; text-decoration:none; background:linear-gradient(to right, var(--main-color1) 50%, var(--sub-color2) 50%) 100%; background-clip:text; background-size:200% 100%; transition:background-position .5s; }
.item a:hover .titlearea .title{ background-position:0 100%; }
.item a .titlearea .date,
ul.meta-box .date{ color:var(--main-color2); margin:0; }
.item a .titlearea .desc{ display:none; font-size:.95rem; }
ul.meta-box{ list-style:none; padding: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:.5rem; padding-left:.5rem; font-size:.9rem; border:1px solid var(--main-color2); color:var(--main-color2); border-radius:2rem; }
.single ul.meta-box .cat{ border:none; padding-right:0; padding-left:0; }
.single ul.meta-box .cat a{ display:block; color:var(--sub-color2); border:1px solid var(--sub-color2); padding-right:.5rem; padding-left:.5rem; border-radius:2rem; }
.single ul.meta-box .cat a:hover{ color:var(--main-color2); border-color:var(--main-color2); }
.single-tags a{ display:inline-block; }
.single-tags a::before{ content:"#"; }
.single-tags a:not(:last-of-type){ margin-right:.5rem; }
.single-tags a:not(:last-of-type)::after{ content:","; }
.item-voice a .title{ font-size:1.25rem; overflow:hidden; color:transparent; background:linear-gradient(to right, var(--main-color1) 50%, var(--sub-color2) 50%) 100%; background-clip:text; background-size:200% 100%; transition:background-position .5s; }
.item-voice a:hover .title{ background-position:0 100%; }
@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; }
.bloglist.voice{ display:flex; flex-wrap:wrap; }
.item-voice{ width:49%; }
.item-voice:nth-of-type(2n){ margin-left:2%; }
}
@media screen and (min-width:1280px) {
.item a .img-cover{ width:360px; }
.item a .titlearea{ width:calc(100% - 360px); padding-left:2rem; }
.item a .titlearea .desc{ display:block; }
.item-voice{ width:23.5%; }
.item-voice:nth-of-type(2n){ margin-left:0; }
.item-voice:not(:nth-of-type(4n+1)){ margin-left:2%; }
}
/* 前のページ次のページ */
#prev-next{ display:flex; margin-top:clamp(60px, 40px + 6.25vw, 120px); }
#prev-next > div{ position:relative; width:50%; }
#prev-next a{ position:relative; width:100%; padding:1rem 1rem 1rem 1.5rem; display:block; border-bottom:1px solid #ddd; }
#prev-next > div:last-of-type a{ text-align:right; padding:1rem 1.5rem 1rem 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(--sub-color2); border-right:2px solid var(--sub-color2); z-index:1; transition:all .3s ease; }
#prev-next > div:last-of-type a::after{ left:auto; right:.5rem; transform:translateY(-50%) rotate(45deg); }
#prev-next a:hover::after{ left:.25rem; border-color:var(--main-color1); }
#prev-next > div:last-of-type a:hover::after{ left:auto; right:.25rem; }
/* splide */
.splide{ z-index:0; }
.splide__pagination{ font-size:0; }
/* 前へ / 次へボタン */
.splide__arrow--prev, .splide__arrow--next{ display:grid; place-content:center; width:50px; height:50px; margin:0 .125rem; cursor:pointer; background:var(--sub-color1); border-radius:50%; border:none; transition:all .3s ease; }
.splide__arrow--prev:hover, .splide__arrow--next:hover{ background:var(--main-color2); }
.splide__arrow--prev::after, .splide__arrow--next::after{ width:1rem; height:1rem; content:""; border:2px solid #fff; border-width:2px 2px 0 0; }
.splide__arrow--prev::after{ margin-left:.4rem; transform:rotate(-135deg); }
.splide__arrow--next::after{ margin-right:.4rem; transform:rotate(45deg); }
.splide__arrow>svg{ display:none; }
.splide__arrow:disabled{ pointer-events:none; opacity:0; }
.splide__arrow:focus-visible{ outline:3px solid var(--main-color2); outline-offset:3px; z-index:1; transition:none; }
.splide__pagination__page{ border:none; }
.splide__pagination__page:focus-visible{ outline:3px solid var(--main-color2); outline-offset:3px; z-index:1; transition:none; }
.splide__slide:focus-visible{ outline:3px solid var(--main-color2); outline-offset:3px; z-index:1; transition:none; }
/* firefoxちらつき防止（クロームも） */
@-moz-document url-prefix(){
.slide{ outline:1px solid transparent; border:1px solid rgba(255,255,255,.1); }
}
.splide-wrapper{ position:relative; }
.card{ overflow:hidden; }
.card .splide{ position:relative; }
.card .splide .splide__arrows{ position:absolute; top:0; right:0; display:flex; }
.card .splide__track{ overflow:visible; }
.card .splide__slide{ display:block; width:max-content; transition:all .3s ease; }
.card .slide{ overflow:hidden; transition:all .3s ease; }
/* 投稿・固定ページ */
#page-header{ position:relative; width:100%; padding:clamp(20px, 10px + 3.125vw, 50px) clamp(16px, -12px + 8.75vw, 100px); overflow:hidden; margin-top:90px; }
#page-header .title{ position:relative; margin-bottom:0; z-index:1; }
#page-header .eng.pagetitle{ position:absolute; bottom:calc(clamp(1rem, 0.286rem + 3.571vw, 2rem) * -1); right:clamp(16px, -12.000px + 8.75vw, 100px); font-size:clamp(3rem, 0.857rem + 10.714vw, 6rem); margin:0; color:#fff; z-index:0; }
ul.metatop{ display:flex; flex-wrap:wrap; align-items:center; list-style:none; padding:0; margin:0; color:var(--sub-color5); }
ul.metatop li{ margin:5px .5em 5px 0; display:flex; align-items:center; }
ul.metatop li.single-cat a{ display:inline-block; padding:.125em 1em; border:1px solid var(--sub-color2); color:var(--sub-color2); }
ul.metatop li.single-cat a:hover{ border:1px solid var(--main-color2); color:var(--main-color2); }
#posttitle-area .title{ border-bottom:1px solid #ddd; padding-bottom:.83em; }
#posttitle-area .img-cover{ max-width:800px; aspect-ratio:16 / 9; margin:clamp(50px, 36.667px + 4.167vw, 90px) auto; }
.single-voice #posttitle-area{ padding-bottom:2rem; }
.single-voice #posttitle-area .title{ border:none; padding-bottom:0; margin-bottom:0; }
/* 調査と料金 Point */
.pointsnum > div{ position:relative; width:100%; padding:1rem; border-radius:20px; background:var(--main-color3); }
.pointsnum > div:not(:first-of-type){ margin-top:2rem; }
.pointsnum .num{ position:absolute; top:0; left:0; width:80px; height:65px; line-height:1; background:#fff; color:var(--main-color2); border-bottom-right-radius:20px; z-index:1; }
.pointsnum .num::before,
.pointsnum .num::after{ content:""; position:absolute; background:transparent; width:20px; aspect-ratio:1; border-top-left-radius:20px; box-shadow:-4px -4px 0 4px #fff; }
.pointsnum .num::before{ right:-20px; top:0; }
.pointsnum .num::after{ left:0; bottom:-20px; }
.pointsnum .num span{ display:inline-block; font-weight:bold; font-size:3.5rem; }
.pointsnum > div h3.wp-block-heading{ text-align:right; width:auto; border:none; }
.pointsnum > div h3.wp-block-heading::after{ display:none; }
.pointsnum h3.wp-block-heading{ margin-top:.5em; }
.pointsnum .wp-block-image{ width:75%; max-width:360px !important; margin:0 auto !important; }
/* 解決事例・お客様の声 */
.border-box-title-voice{ position:relative; margin:1rem 0; padding:2rem 1rem 1rem; border-radius:20px; border:1px solid var(--main-color2); transition:all .3s ease; }
.border-box-title-voice::before{ position:absolute; top:-1.25rem; left:2rem; content:"選んだ理由"; background:var(--main-color2); padding:.25rem 1rem; color:#fff; font-size:1.25rem; font-weight:bold; border-radius:10px; transition:all .3s ease; }
.border-box-title-voice ul li{ font-size:1.25rem; font-weight:bold; }
.border-box-title-voice + .post-content{ margin-top:60px; }
/* FAQ */
.faq-item{ margin-bottom:2rem; border:1px solid #ddd; border-radius:8px; background:#fff; overflow:hidden; }
.faq-item summary{ padding:1.2rem 3rem 1.2rem 3.5rem; list-style:none; cursor:pointer; font-weight:bold; position:relative; transition:background .3s; }
.faq-item summary::-webkit-details-marker{ display:none; /* Safari用の矢印消し */ }
.faq-item summary::before{ content:'Q'; position:absolute; top:.9rem; left:1.2rem; color:var(--main-color2); font-size:1.2rem; }
.faq-item summary::after{ content:'+'; position:absolute; right:1.5rem; font-size:1.5rem; color:#999; transition:transform 0.3s; }
.faq-content{ padding:0 1.5rem 1.5rem 3.5rem; position:relative; }
.faq-content::before{ content:'A'; position:absolute; left:1.2rem; top:0; color:var(--accent-color); font-size:1.2rem; font-weight:bold; }
.faq-item[open] summary{ background:var(--base-color); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
/* お問い合わせ */
.contact-telline a{ display:flex; align-items:center; padding:0 1.5rem 2rem; }
.contact-telline .icon-color,
.contact-telline img{ width:60px; aspect-ratio:1; margin:0 auto; fill:var(--main-color1); transition:all .3s ease; margin-right:15px; }
.contact-telline span{ display:block; width:calc(100% - 75px); line-height:1.3; font-weight:bold; color:var(--main-color1); transition:all .3s ease; }
.contact-telline:hover span{ color:var(--sub-color2); }
.contact-telline:hover .icon-color{ fill:var(--sub-color2); }
@media screen and (min-width:769px){
#page-header .eng.pagetitle{ bottom:calc(clamp(2rem, 1.248rem + 1.566vw, 2.5rem) * -1); font-size:clamp(6rem, 2.990rem + 6.262vw, 8rem); }
/* 調査と料金 Point */
.pointsnum .num{ width:90px; height:70px; }
/* 解決事例・お客様の声 */
.fukidashi{ position:relative; }
.fukidashi::before{ content:""; position:absolute; top:0; left:0; width:80px; aspect-ratio:1; border-radius:100px; background:var(--main-color3) url('data:image/svg+xml;utf8,') no-repeat center center; }
.man .fukidashi::before{ background-image:url('data:image/svg+xml;utf8,'); }
.fukidashi p{ border:1px solid #ddd; border-radius:20px; padding:1rem; margin-left:100px; }
.fukidashi.isobe::before, .man .fukidashi.isobe::before{ left:auto; right:0; background-image:url(img/icon-isobe.png); }
.fukidashi.isobe p{ margin-left:0; margin-right:100px; background:var(--base-color); }
}
@media screen and (min-width:1280px){
#page-header{ margin-top:160px; }
.pointsnum.col3{ display:flex; justify-content:space-between; }
.pointsnum > div{ width:calc(calc(100% - 4rem) / 3); }
.pointsnum.col3 > div:not(:first-of-type){ margin-top:0; }
.pointsnum > div h3.wp-block-heading{ text-align:right; }
}
/* TOPページ */
.home #page-header{ position:relative; overflow:visible; }
.home #page-header .bg{ position:absolute; inset:0 0 120px; background:var(--base-color); z-index:0; }
.home #page-header .contactbutton{ position:relative; z-index:2; }
.home #page-header > .text-area{ position:relative; z-index:2; }
.home #page-header > .text-area .catch1{ position:relative; display:flex; justify-content:center; align-items:center; padding:clamp(20px, 10px + 3.125vw, 50px) clamp(16px, -12px + 8.75vw, 100px); margin:calc(clamp(20px, 10px + 3.125vw, 50px) * -1) calc(clamp(16px, -12px + 8.75vw, 100px) * -1) 0; border-radius:0 0 50px 0; /* background:url(img/topimage-sp1.jpg) no-repeat center right; background-size:cover; */ }
.home #page-header > .text-area .catch1 .circle{ position:absolute; top:clamp(20px, 10px + 3.125vw, 50px); left:clamp(16px, -12px + 8.75vw, 100px); display:flex; justify-content:center; align-items:center; background:var(--main-color1); color:#fff; font-weight:bold; width:clamp(110px, 81.429px + 8.929vw, 150px); font-size:clamp(1rem, 0.821rem + 0.893vw, 1.25rem); aspect-ratio:1; border-radius:200px; }
.home #page-header > .text-area .catch1 .circle p{ text-align:center; margin:0; line-height:1.2; }
.home #page-header > .text-area .catch1 .circle span{ font-size:2.25em; }
.home #page-header > .text-area .catch1 .tate-sp h2,
.home #page-header > .text-area .catch1 .tate-sp p{ margin:0; font-weight:bold; }
.home #page-header > .text-area .catch1 > div{ position:relative; z-index:1; }
.home #page-header > .text-area .catch1 .overlay-sp{ position:absolute; inset:0; background:linear-gradient(to right, var(--main-color2) 45%, transparent 75%) 100%; z-index:0; }
.home #page-header > .text-area .catch2{ position:relative; display:flex; justify-content:space-between; margin-top:clamp(20px, 10px + 3.125vw, 50px); }
.home #page-header > .text-area .catch2 > div{ position:relative; background:rgba(255,255,255,1); border-radius:30px; width:32%; box-shadow:rgba(165,165,165,.2) 0px 8px 24px; }
.home #page-header > .text-area .catch2 .subtitle{ color:var(--sub-color2); font-weight:bold; text-align:center; line-height:1.2; }
.home #page-header > .text-area .catch2 .subtitle strong{ font-size:2em; }
.home #page-header > .text-area .catch3{ text-align:center; }
/* TOP スライダー */
.home #page-header .bg .mv1,
.home #page-header > .text-area .catch1 .mv1{ position:absolute; inset:0; z-index:-1; }
.home #page-header .bg .mv1{ display:none; }
.splide,
.splide__track,
.splide__list{ position:relative; width:100%; height:100%; }
.mv1 .img-cover{ width:100%; height:100%; }
.mv1 .splide__track--fade .splide__slide{ pointer-events:none; }
.mv1 .splide__track--fade .splide__slide.is-active{ pointer-events:auto; }
.mv1 img{ transition:7s 1s linear; transform:translateX(1%) scale(1.03); }
.mv1 .splide__slide[class*=-active] img{ transition-delay:0s; transform:translateX(0) scale(1); }
/* TOP Point */
#top-point .points,
#top-point .points-photo{ display:flex; flex-wrap:wrap; }
#top-point .points > div{ position:relative; width:100%; padding:1rem; border-radius:20px; background:var(--base-color); }
#top-point .points-photo > div{ position:relative; width:100%; }
#top-point .points > div:not(:first-of-type),
#top-point .points-photo > div:not(:first-of-type){ margin-top:2rem; }
#top-point .points-photo .img-cover{ position:relative; width:100%; aspect-ratio:3 / 2; border-radius:20px 20px 0 20px; }
#top-point .points > div::before{ content:"POINT"; font-family:'Roboto', 'Noto Sans JP', sans-serif; font-size:1.25rem; letter-spacing:.1rem; font-weight:bold; color:var(--main-color3); position:absolute; top:1rem; left:50%; transform:translateX(-50%); }
#top-point .points-photo .img-cover::before{ content:"POINT"; font-family:'Roboto', 'Noto Sans JP', sans-serif; font-size:1.5rem; letter-spacing:.1rem; font-weight:bold; color:rgba(255,255,255,.75); position:absolute; bottom:.25rem; left:1rem; }
#top-point .points .text-area{ padding-top:2.5rem; }
#top-point .points h3,
#top-point .points-photo h3{ font-size:1.125rem; color:var(--main-color1); }
#top-point .points .num{ position:absolute; top:0; right:0; width:80px; height:65px; text-align:right; line-height:1; background:#fff; color:var(--main-color2); border-bottom-left-radius:20px; z-index:1; }
#top-point .points .num::before,
#top-point .points .num::after{ content:""; position:absolute; background:transparent; width:20px; aspect-ratio:1; border-top-right-radius:20px; box-shadow:4px -4px 0 4px #fff; }
#top-point .points .num::before{ left:-20px; top:0; }
#top-point .points .num::after{ right:0; bottom:-20px; }
#top-point .points-photo .num{ position:absolute; bottom:0; right:0; width:80px; height:65px; text-align:right; line-height:1; background:#fff; color:var(--main-color2); border-top-left-radius:20px; z-index:1; }
#top-point .points-photo .num::before,
#top-point .points-photo .num::after{ content:""; position:absolute; background:transparent; width:20px; aspect-ratio:1; border-bottom-right-radius:20px; box-shadow:4px 4px 0 4px #fff; }
#top-point .points-photo .num::before{ right:0; top:-20px; }
#top-point .points-photo .num::after{ left:-20px; bottom:0; }
#top-point .points .num span,
#top-point .points-photo .num span{ display:inline-block; font-weight:bold; font-size:3.5rem; padding-top:.75rem; }
/* TOP Survey Items */
#top-survey{ position:relative; overflow:hidden; }
#top-survey h2, #top-survey .inner2{ position:relative; z-index:2; }
#top-survey .overlay{ position:absolute; inset:0; background:linear-gradient(rgba(243,243,243,.95) 80%, rgba(243,243,243,1)); backdrop-filter:blur(3px); z-index:-1; }
#top-survey .bgimage{ position:absolute; inset:0; background:url(img/bg-ashimoto.jpg) no-repeat center center; background-size:cover; z-index:-2; }
.survey-items{ display:flex; flex-wrap:wrap; justify-content:space-between; }
.survey-items a{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:1rem; border-radius:30px; width:100%; background:var(--main-color3); box-shadow:rgba(165,165,165,.2) 0px 8px 24px; }
.survey-items a:hover{ transform:translateY(-.2rem); background:#dad1cf; }
.survey-items a:not(:first-of-type){ margin-top:2rem; }
.survey-items a h3{ color:var(--main-color1); width:calc(100% - 132px); margin-right:10px; }
.survey-items a:hover h3{ color:var(--sub-color1); }
.survey-items a.small h3{ width:calc(100% - 50px); font-size:1.25rem; }
.survey-items a > ul,
.survey-items a > div{ width:100%; }
/* 調査項目・料金ページ（料金部分追加） */
.survey-items a .border-box-title{ position:relative; margin:1rem 0; padding:1rem 1rem; border-radius:10px; border:2px solid var(--main-color2); transition:all .3s ease; }
.survey-items a .border-box-title::before{ position:absolute; top:-1rem; left:1rem; content:"料金プラン（税別）"; background:var(--main-color3); padding:0 1rem; color:var(--main-color2); font-size:1.125rem; font-weight:bold; transition:all .3s ease; }
.survey-items a .border-box-title .fee-hosoku strong,
.page-child .fee-hosoku strong{ display:inline-block; padding:.125rem 1rem; line-height:1.4; color:#fff; background:var(--main-color2); border-radius:100vh; transition:all .3s ease; }
.survey-items a:hover .border-box-title{ border-color:var(--sub-color2); }
.survey-items a:hover .border-box-title::before{ background:var(--sub-color3); color:var(--sub-color2); }
.survey-items a:hover .border-box-title .fee-hosoku strong{ background:var(--sub-color2); }
/* TOP After Follow */
.follow-list{ display:flex; flex-wrap:wrap; }
.follow-list > div{ width:100%; text-align:center; }
.follow-list > div:not(:first-of-type){ border-top:1px solid #ccc; }
.follow-list h4{ color:var(--main-color1); }
.follow-list > div p{ text-align:left; }
/* TOP Voice */
#top-voice > *{ position:relative; z-index:1; }
#top-voice .overlay{ position:absolute; inset:0 0 35%; background:var(--base-color); z-index:-1; }
.card1{ margin:0 calc(clamp(16px, -12px + 8.75vw, 100px) * -1); }
.card1 .splide__slide{ display:block; position:relative; width:100%; height:100%; margin:1rem 0 1.25rem; padding:1rem; border-radius:30px; background:#fff; box-shadow:rgba(165,165,165,.3) 0px 8px 24px; }
.card1 .splide__slide:hover{ transform:translateY(-.5rem); }
.card1 h3{ color:var(--sub-color2); font-size:1.25rem; }
.card1.voice ul{ font-size:.9rem; }
.voice-reason{ position:relative; text-align:center; }
.voice-reason::before,
.voice-reason::after{ position:absolute; content:""; width:2rem; height:2px; background:var(--main-color2); top:50%; transform:translateY(-50%); left:0; }
.voice-reason::after{ left:auto; right:0; }
.single-voice .voice-reason{ padding:0 4rem; font-size:1.25rem; font-weight:bold; color:var(--main-color2); }
/* TOP Daihyo */
#top-daihyo > .inner2{ display:flex; flex-wrap:wrap; }
#top-daihyo > .inner2 > *{ width:100%; }
#top-daihyo > .inner2 > .img-cover{ width:75%; max-width:360px; aspect-ratio:1; border-radius:100vh; margin:2rem auto 0; border:1px solid #ddd; }
/* TOP Video メッセージ */
#top-video{ background:var(--sub-color4); z-index:2; }
#top-video h2 span{ display:block; line-height:1.2; }
#top-video h2 span:first-of-type{ font-size:.55em; margin-bottom:.5em; }
#top-video > div{ display:flex; flex-wrap:wrap; justify-content:space-between; }
#top-video > div > div{ position:relative; width:100%; }
.video-card{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; max-width:1000px !important; margin:clamp(50px, 36.667px + 4.167vw, 90px) auto !important; z-index:1; cursor:pointer; transition:all .3s ease; }
.video-card:hover{ transform:translateY(-.5em); box-shadow:rgba(100, 100, 100, 0.2) 0px 7px 29px 0px; }
.video-card img{ position:absolute; left:0; top:0; width:100%; height:auto; z-index:-2; }
.video-card .card-title{ position:absolute; left:1em; bottom:0; background:var(--sub-color1); color:#fff; padding:.25em 1em; font-weight:bold; z-index:-1; }
.video-card .icon-color{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:0; }
#top-video blockquote{ margin-inline-start:0; margin-inline-end:0; font-weight:bold; }
@media screen and (max-width:768px) {
.home #page-header > .text-area .catch2 > div p:last-of-type{ display:none; }
#top-video > div > div:first-of-type{ margin:0 0 3em; }
}
@media screen and (min-width:480px) {
/* TOP Survey Items */
.home .survey-items a.small{ width:49%; }
.card1 .splide-wrapper{ width:60%; }
.video-card .card-title{ bottom:1em; }
/* TOP Point */
#top-point .points-photo .img-cover{ max-width:360px; margin-right:auto; margin-left:auto; }
}
@media screen and (min-width:769px) {
.home #page-header{ position:relative; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100); }
.home #page-header .bg{ position:absolute; inset:0 0 60px; border-radius:0 0 clamp(100px, -50.489px + 19.569vw, 200px) 0; overflow:hidden; /* background:url(img/topimage-pc.jpg) no-repeat center center; background-size:cover; */ }
.home #page-header .overlay-pc{ position:absolute; inset:0; background:linear-gradient(to right, var(--main-color2) 45%, transparent 70%) 100%; z-index:1; }
.home #page-header .contactbutton{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:calc(100% - calc(clamp(16px, -12px + 8.75vw, 100px) * 2)); z-index:2; }
.home #page-header .title{ font-size:2rem; }
.home #page-header > .text-area .catch1{ justify-content:flex-start; padding:0; margin:0; background:none; border-radius:0; }
.home #page-header > .text-area .catch1 .circle{ position:static; width:160px; margin-right:1rem; }
.home #page-header > .text-area .catch1 .overlay-sp{ display:none; }
.home #page-header > .text-area .catch2{ flex-direction:column; }
.home #page-header > .text-area .catch2 > div{ width:50%; padding:0 1rem; display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.8); }
.home #page-header > .text-area .catch2 > div:not(:first-of-type){ margin-top:1rem; }
.home #page-header > .text-area .catch2 > div > p{ width:120px; }
.home #page-header > .text-area .catch2 > div p:last-of-type{ width:calc(100% - 130px); font-size:.85rem; line-height:1.4; }
.home #page-header > .text-area .catch3{ display:none; text-align:left; }
/* TOP スライダー */
.home #page-header > .text-area .catch1 .mv1{ display:none; }
.home #page-header .bg .mv1{ display:block; }
/* TOP Point */
#top-point .points,
#top-point .points-photo{ justify-content:center; }
#top-point .points > div,
#top-point .points-photo > div{ width:32%; margin-bottom:2rem; }
#top-point .points-photo > div:not(:nth-of-type(2n+1)){ margin-left:0; }
#top-point .points > div:not(:first-of-type),
#top-point .points-photo > div:not(:first-of-type){ margin-top:0; }
#top-point .points > div:not(:nth-of-type(3n+1)),
#top-point .points-photo > div:not(:nth-of-type(3n+1)){ margin-left:2%; }
#top-point .points .num{ width:90px; height:70px; }
#top-point .points-photo .img-cover{ max-width:none; }
#top-point .points-photo .num span{ font-size:3.2rem; padding-top:.5rem; }
/* TOP Survey Items */
.survey-items a{ padding:2rem; }
.home .survey-items a h3{ width:calc(100% - 82px); margin-right:0; }
.home .survey-items a.small h3{ width:100%; }
/* TOP Flow */
#top-flow .inner2{ padding:clamp(16px, -12px + 8.75vw, 100px); border-radius:50px; background:var(--base-color); }
/* TOP After Follow */
.follow-list > div{ width:33.33%; padding:0 clamp(1rem, -0.505rem + 3.131vw, 2rem); }
.follow-list > div:not(:first-of-type){ border:none; border-left:1px solid #ccc; }
#top-video > div > div{ width:48%; }
/* TOP Daihyo */
#top-daihyo h2.heading1{ text-align:left; }
#top-daihyo > .inner2{ align-items:center; justify-content:space-between; }
#top-daihyo > .inner2 > *{ width:65%; }
#top-daihyo > .inner2 > .img-cover{ width:33%; margin:0 0 0 auto; }
}
@media screen and (min-width:769px) and (max-width:1279px) {
.home #page-header{ margin-top:0; padding-top:90px; }
.home #page-header > .text-area{ padding-top:clamp(20px, 10px + 3.125vw, 50px); }
}
@media screen and (min-width:1280px) {
.home #page-header{ display:flex; align-items:center; min-height:calc(100vh - 160px); min-height:calc(calc(var(--vh, 1vh) * 100) - 160px); margin-top:160px; padding-top:0; }
.home #page-header > .text-area{ width:100%; margin-bottom:120px; }
.home #page-header > .text-area .catch2{ flex-direction:row; justify-content:flex-start; }
.home #page-header > .text-area .catch2 > div{ width:clamp(200px, 0px + 15.625vw, 250px); display:block; }
.home #page-header > .text-area .catch2 > div:not(:first-of-type){ margin:0; margin-left:1rem; }
.home #page-header > .text-area .catch2 .subtitle{ font-size:1.125rem; }
.home #page-header > .text-area .catch2 > div p{ width:auto; }
.home #page-header > .text-area .catch2 > div p:last-of-type{ width:auto; font-size:.9rem; }
.home #page-header > .text-area .catch3{ display:block; position:absolute; top:0; right:0; background:#fff; font-size:1.5rem; font-weight:bold; white-space:nowrap; padding-top:1rem; padding-bottom:1rem; margin:0; }
/* TOP Point */
#top-point .points > div,
#top-point .points-photo > div{ width:23.5%; }
#top-point .points > div:not(:nth-of-type(3n+1)),
#top-point .points-photo > div:not(:nth-of-type(3n+1)){ margin-left:0; }
#top-point .points > div:not(:nth-of-type(4n+1)),
#top-point .points-photo > div:not(:nth-of-type(4n+1)){ margin-left:2%; }
/* TOP Survey Items */
.survey-items a h3{ width:calc(calc(100% - 132px) * 0.34); margin-right:0; }
.survey-items a > div{ width:calc(calc(100% - 132px) * 0.66); margin-right:50px; }
.home .survey-items a h3{ width:calc(calc(calc(100% - 132px) / 2) - 1rem); margin-right:0; }
.survey-items a > ul{ width:calc(calc(calc(100% - 132px) / 2) + 1rem); margin-right:50px; }
.survey-items a.small h3{ width:calc(calc(100% - 50px) * 0.4); }
.survey-items a.small > div{ width:calc(calc(100% - 50px) * 0.6); margin-right:50px; }
.survey-items a.other.small h3{ width:100%; }
}
/* 動画モーダル */
.modal-wrapper{ position:fixed; top:0; left:0; width:100%; height:100%;
display:flex; justify-content:center; align-items:center;
background:rgba(34,34,34,.9); z-index:1000;
/* JSで表示/非表示 */
opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.modal-wrapper.is-active{ opacity:1; visibility:visible; }
.modal-content{ max-width:1280px; width:100%; text-align:right; position:relative; transform:scale(.95); transition:transform .3s; }
.is-active .modal-content{
transform:scale(1); /* 開いたときに少し拡大するアニメーション */
}
.modal-close-button{ width:50px; aspect-ratio:1; border:0; background:none; cursor:pointer; }
.video-container{ cursor:pointer; position:relative; width:100%; padding-top:56.25%; height:0; overflow:hidden; }
.video-container iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }
/* google reCAPTCHA */
.grecaptcha-badge{ visibility:hidden; }
/* お問い合わせページ（contact）の時だけ表示し、少し上にずらす */
.page-id-663 .grecaptcha-badge{ visibility:visible; bottom:100px !important; }
/* 調査報告書fancybox */
/* ダウンロードボタンを強制的に非表示にする */
.f-button[data-fancybox-download] {
display: none !important;
}