@charset "UTF-8";
:root{
/*初期設定*/
--maincolor:#050505;
--subcolor:#999;
--spmeu-color:#000; /*sp時ナビ背景色*/
--sphead-high:50px; /*sp時ヘッダー高さ*/
--linkcolor:#000;
--hovercolor:#FF0000;
--visitedcolor:#FF0000;
/*END 初期設定*/
--s-5: clamp(0.60rem, 0.58rem + 0.10vw, 0.65rem);
--s-4: clamp(0.68rem, 0.66rem + 0.12vw, 0.74rem);
--s-3: clamp(0.76rem, 0.73rem + 0.14vw, 0.83rem);
--s-2: clamp(0.85rem, 0.82rem + 0.16vw, 0.93rem);
--s-1: clamp(0.94rem, 0.92rem + 0.14vw, 1rem);
--s0: clamp(1rem, 1rem + 0vw, 1rem); /*16px*/
--s05: clamp(1.06rem, 1.04rem + 0.10vw, 1.12rem);
--s1: clamp(1.1rem, 1.07rem + 0.14vw, 1.125rem); /* H5 18px */
--s15: clamp(1.18rem, 1.14rem + 0.18vw, 1.25rem);
--s2: clamp(1.22rem, 1.19rem + 0.20vw, 1.25rem); /* H4 20px */
--s3: clamp(1.33rem, 1.28rem + 0.25vw, 1.375rem); /* H3 22px */
--s4: clamp(1.5rem, 1.44rem + 0.30vw, 1.5625rem); /* H2 25px */
--s5: clamp(1.75rem, 1.65rem + 0.45vw, 1.875rem); /* H1 30px */
/* --s1の場合
1vw = 幅の１％
（例）0.32vw＝ ウインドウ幅1200pxの場合 1200px × 0.0032 =3.84px
最小値が1.25rem 推奨値が1.19rem + 3.84px(画面サイズで変化) 最大値 1.41rem
*/
--easeOut: cubic-bezier(.3,1,.7,1);
--easeInOut: cubic-bezier(.7,0,.3,1);
--marginside-auto: auto auto;
--contentWidthMax:61.25rem;/*Max width:980px*/
--arrow-r:url('data:image/svg+xml;utf8,') no-repeat center;
--arrow-r-w:url('data:image/svg+xml;utf8,') no-repeat center;
--arrow-d:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* ===COMMON=== */
/* setup */
:where(*,*::before,*::after){box-sizing:border-box;}
:where(ul,ol){list-style:none;padding:0;}
:where(img,svg,video,canvas,iframe){vertical-align:middle;}
:where(img[height],video[height],picture img){height:auto;}
:where(input,button,textarea,select,small){font:inherit;}
:where(body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd){margin:0;}
:where(img,picture,video,iframe){display:inline-block;}
:where(a){color:inherit;text-decoration:inherit;text-decoration-skip-ink:auto;}
:where(button){appearance:none;}
* {margin: 0;padding: 0;box-sizing: border-box;}
html {overflow-y: scroll;overflow-x: hidden;scroll-behavior: smooth;
/* 必要に応じて調整 scroll-padding-top: 60px;*/
}
body{margin:0;padding:0;-webkit-font-smoothing: antialiased;letter-spacing:calc(var(--s0) * 0.1);line-height:1.5;}
h1{font-size:var(--s5);}
h2{font-size:var(--s4);}
h3{font-size:var(--s3);}
h4{font-size:var(--s2);}
h5{font-size:var(--s1);}
h6{font-size:var(--s0);}
img {max-width: 100%;}
ol, ul, p {margin: 0;padding: 0;}
ul {list-style: none;}
figure img{vertical-align:bottom;}/*Bug*/
/* link */
@media (61.25rem < width) {/*980px以上*/
a[href^="tel:"]:link{pointer-events:none;color:var(--maincolor);}
}
a:link{color:var(--linkcolor);}
a:visited{color:var(--visitedcolor);}
a img{transition:.3s;}
@media (any-hover: hover) {
a:hover{color:var(--hovercolor);text-decoration:underline;}
figure:not(.hover-scale) a:hover img{transform:translate(1px,1px);}
}
/* link arrow */
:is(.arrow-r,.arrow-r-w,.arrow-l,.arrow-l-w) a{text-decoration:none;position:relative;}
.arrow-r-w a{color:#FFF;}
:is(.arrow-r,.arrow-r-w):not(.has-text-align-right) a{padding-left:2rem;padding-right:2rem;transition:.3s;position:relative;overflow:hidden;}
:is(.arrow-l,.arrow-l-w):not(.has-text-align-right) a{padding-left:2.5rem;padding-right:2rem;transition:.3s;position:relative;}
:is(.arrow-r,.arrow-l):not(.has-text-align-right) a::after{background-color:var(--subcolor);}
:is(.arrow-r-w,.arrow-l-w):not(.has-text-align-right) a::after{background-color:#FFF;}
:is(.arrow-r,.arrow-r-w):not(.has-text-align-right) a::after{content:"";mask:var(--arrow-r);mask-size: contain;width:var(--s15);height:var(--s15);margin-left:0.5rem;display:inline-block;transition:.3s;
position:absolute;right:0;top:50%;transform:translateY(-50%);}
:is(.arrow-l,.arrow-l-w):not(.has-text-align-right) a::after{content:"";mask:var(--arrow-r);mask-size: contain;width:var(--s15);height:var(--s15);margin-right:0.5rem;display:inline-block;transition:.3s;position:absolute;left:5%;top:50%;transform:translateY(-50%) scale(-1);}
:is(.arrow-r,.arrow-r-w).has-text-align-right a::after{content:"";mask:var(--arrow-r);mask-size: contain;width:var(--s15);height:var(--s15);margin-left:0.5rem;display:inline-block;transition:.3s;background-color:var(--subcolor);}
.wp-block-button a{transition:.3s;}
@media (any-hover: hover) {
:is(.arrow-r,.arrow-r-w):not(.has-text-align-right) a:hover{background-color:#999;}
:is(.arrow-l,.arrow-l-w) a:hover{background-color:#999;}
.wp-block-button a:hover{text-decoration:none;}
}
:is(.arrow-r,.arrow-l).move-on a{transition:0.5s;}
:is(.arrow-r,.arrow-l).move-on a strong,
:is(.arrow-r-w,.arrow-l-w).move-on a strong{font-size:1.2rem;}
:is(.arrow-r,.arrow-l).move-on a::after,
:is(.arrow-r-w,.arrow-l-w).move-on a::after{transition: all 0.5s ease;}
@media (any-hover: hover) {
:is(.arrow-r,.arrow-l).move-on a:hover,
:is(.arrow-r-w,.arrow-l-w).move-on a:hover{background-color:var(--subcolor);color:#002609;}
:is(.arrow-r,.arrow-r-w).move-on a:hover::after{animation: arrow-mov 0.3s;position:absolute;right:0;top:50%;transform:translateY(-50%);background-color:#002609;}
:is(.arrow-l,.arrow-l-w).move-on a:hover::after{animation: arrow-mov-reverse 0.3s;position:absolute;left:5%;top:50%;transform:translateY(-50%) scale(-1);background-color:#002609;}
}
/* CONTENZT */
section .content-wrap{max-width:980px;width:100%;margin-left:auto;margin-right:auto;}
/* tools */
.text-center {text-align: center;}
.text-right {text-align: right !important;}
table th {white-space: nowrap;}
table td {white-space: pre-wrap;}
.required {background-color: #cf2e2e;border-radius:5px;padding:1px 5px;color:#FFF;}
.no-wrap {white-space: nowrap;}
@media (61.25rem < width) {
.spObj{display:none;}
}
@media (40.063rem < width) and (61.25rem > width){ /*タブレット*/
.pcObj{display:none;}
.spObj:not(.tabObj){display:none;}
}
@media (40rem > width) {
.pcObj{display:none;}
}
.accordion-button {display: flex;justify-content: space-between;opacity: 1;transition: all .4s;}
.accordion-button::after {content: "▼";transition: all .4s;}
.accordion-button.open::after {transform: rotate(180deg);}
@media (any-hover: hover) {
.accordion-button:hover {cursor: pointer;opacity: 0.8;}
}
.accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;padding-top: 0;padding-bottom: 0;}
/* ===END COMMON=== */
/* ===HEADER=== */
.site-header {display: grid;align-items: center;gap: .3em 1em;position: relative;/*max-width: var(--contentWidthMax); */margin-inline: var(--marginside-auto);padding: 0 var(--sidegap);border-image: linear-gradient(white, white) 0 fill / 0 / 0 50vw;}
.site-header a {display: block;}
.site-header .logo {stroke: var(--themecolor);line-height: 1;}
.site-header .nav-list {display: flex;position: relative;font-size: .875rem;line-height: 1.2;font-weight: 700;white-space: nowrap;}
.site-header .nav-list li:has(.nav-sub) > a::after{content:"";mask:var(--arrow-d);mask-size: contain;width:var(--s0);height:var(--s0);margin-left:var(--s-1);display:inline-block;transition:.3s;background-color:#000;}
.site-header .nav-list a {padding: 1em;position:relative;}
/* ドロップダウン用のボタンを追加 */
.site-header .nav-list button {width: 3.2em;padding: 1em 2em 1em .5em;color: inherit;line-height: 0;}
.is-touch .site-header .nav-list button {position: relative;}
.site-header .nav-list button svg {pointer-events: none;width: .5em;height: .5em;fill: none;stroke: currentcolor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}
.site-header .nav-sub {line-height: 1;}
.site-header .nav-sub a::before {content: "";display: inline-block;width: .4em;margin-right: .6em;border-top: 1px solid currentcolor;vertical-align: middle;}
@media (any-hover: hover) {
.site-header .nav-list a {transition: color .4s;}
.site-header .nav-list a:hover {color: #86c0de;transition-duration: .1s;}
}
/*
* ============================================================
* ナビゲーション レイアウト切り替え設定
* ============================================================
* 【パターンA】980px以上でナビをPC横並び表示（デフォルト）
* → このファイル（addstyle.css）をそのまま使用
* → nav-layout-hamburger.css は読み込まない
*
* 【パターンB】全幅でハンバーガーメニュー表示（PCでもハンバーガー）
* → nav-layout-hamburger.css を追加で読み込む
* → index.html の に以下を追加：
*
*
* ブレークポイントを変更する場合は下記 ★BREAKPOINT★ を検索して
* CSS と js/function.js の両方を合わせて変更してください。
* ============================================================
*/
/* ★BREAKPOINT★ PC横並び表示の開始ブレークポイント: 61.313rem (981px) */
@media (61.313rem <= width){/*981px以上*/
.site-header {grid-auto-flow: column;justify-content: space-between;z-index: 1;height: 80px;/*width:100%;*//*max-width:var(--contentWidthMax);*/padding-left:var(--s0);padding-right:var(--s0);box-sizing:content-box;}
.site-header .nav_toggle {display: none;}
.site-header .nav-list li {display: flex;}
.site-header .nav-list > li:last-child {margin-right: -1em;}
.site-header .nav-list > li > a {display: flex;align-items: center;height: 80px;}
.site-header .nav-sub {z-index: -1;position: absolute;top: 100%;clip-path: inset(0 -50vw 100%);padding:var(--s0);background-color:#000;}
.site-header .nav-sub li a{color:#FFF;}
/* カーソルを乗せるとドロップダウンする */
@media (any-hover: hover) {
.site-header .nav-sub {transition: clip-path .4s var(--easeInOut);}
.site-header .nav-list li:hover .nav-sub {pointer-events: auto;clip-path: inset(0 -50vw);}
.site-header .nav-list li:hover svg {color: #86c0de;}
}
/* FOCUS */
.site-header .nav-list li:focus-within .nav-sub {pointer-events: auto;clip-path: inset(0 -50vw);}
/* JavaScript で .is-open を付けてドロップダウンする */
.site-header .nav-sub.is-anim {transition: clip-path .4s var(--easeInOut);}
.site-header .nav-sub.is-open {pointer-events: auto;clip-path: inset(0 -50vw);}
.site-header .nav-list li.is-active svg {color: #86c0de;}
}
/* ★BREAKPOINT★ ハンバーガー表示の開始ブレークポイント: 61.25rem (980px) */
@media (61.25rem >= width) {/*980px以下*/
.site-header {justify-content: center;justify-items: center;padding-block: 1em;}
.site-header .nav {z-index: 2;position: fixed;inset: 0;height: 100%;}
.site-header .nav::before {content: "";z-index: -1;position: fixed;inset: 0;opacity: .1;transition: opacity .4s;}
.site-header .nav-list {flex-direction: column;row-gap: .3em;overflow: auto;position: absolute;top: 0;right: 0;padding: 56px 2em;background: white;height: 100%;clip-path: inset(0);}
/* スクロールバーを消す */
.site-header .nav-list {scrollbar-width: none;scrollbar-color: transparent;-webkit-overflow-scrolling: touch;}
.site-header .nav-list::-webkit-scrollbar {width: 0;height: 0;}
.site-header .nav-list::-webkit-scrollbar-thumb,
.site-header .nav-list::-webkit-scrollbar-track {background: transparent;}
.site-header .nav-list li {display: grid;grid-template-columns: auto auto 1fr;}
/* JavaScript で .is-open を付けてドロワーする */
.site-header .nav-list.is-anim {transition: clip-path .4s var(--easeInOut);}
.site-header .nav:not(.is-open) {pointer-events: none;}
.site-header .nav:not(.is-open)::before {opacity: 0;}
.site-header .nav-list:not(.is-open) {clip-path: inset(0 0 0 100%);}
.site-header .nav-sub {grid-area: 2 / 1 / 3 / 4;overflow: hidden;pointer-events: none;height: 0;padding: 2px;padding-left: 1em;}
.site-header .nav-sub {--openHeight: calc(3em * 2 + 4px);}
/* ===要設定: サブメニューの項目数に合わせて --openHeight を調整=== */
/* calc(3em * 項目数 + 4px) で計算 */
.site-header .nav-list [href="#news"] ~ .nav-sub,
.site-header .nav-list [href="#company"] ~ .nav-sub {--openHeight: calc(3em * 3 + 4px);}
.site-header .nav-list [href="#service"] ~ .nav-sub,
.site-header .nav-list [href="#blog"] ~ .nav-sub {--openHeight: calc(3em * 4 + 4px);}
/* ★ hoverによるサブメニュー展開は削除 → クリック操作のみ（JSの dropdownInit() で制御）★ */
/* .is-open を付けてドロップダウン（クリックのみ） */
.site-header .nav-sub.is-anim {transition: height .4s var(--easeInOut);}
.site-header .nav-sub.is-open {pointer-events: auto;height: var(--openHeight);}
.site-header .nav-list li.is-active svg {color: #86c0de;}
/* ハンバーガーボタン */
.site-header .nav_toggle {pointer-events: auto;display: grid;place-items: center;z-index: 1;position: fixed;top: 8px;right: 8px;width: 48px;height: 48px;color: var(--themecolor);}
.site-header .nav_toggle svg {grid-area: 1 / 1;position: absolute;overflow: visible;fill: none;stroke: currentcolor;stroke-width: 2;stroke-linecap: round;transition: opacity .4s var(--easeInOut), transform .4s var(--easeInOut);}
.site-header .nav_toggle .b1 {transform: translateY(-8px);}
.site-header .nav_toggle .b3 {transform: translateY(8px);}
@media (any-hover: hover) {
.site-header .nav_toggle {transition: color .4s;}
.site-header .nav_toggle:hover {color: #86c0de;transition-duration: .1s;}
.site-header .nav_toggle {cursor: pointer;}
}
/* CLOSE時 */
.site-header .nav_toggle.is-open .b1 {transform: rotate(-45deg);}
.site-header .nav_toggle.is-open .b2 {opacity: 0;transform: rotate(-90deg);}
.site-header .nav_toggle.is-open .b3 {transform: rotate(-135deg);}
}
/* ===END HEADER=== */
main.main{padding-left:var(--s0);padding-right:var(--s0);box-sizing:content-box;}
main.main > *{margin-left:auto;margin-right:auto;box-sizing:border-box;}
main.main > h1{text-align:center;font-size:var(--s3);}
main.main > h1 + *{margin-top:var(--s2)}
/* content */
.content-wrap{max-width:980px;width:100%;margin-left:auto;margin-right:auto;}
.content-wrap .grid{
display: grid;
width:100%;
max-width:61.25rem;/*（980px）*/
/* grid-template-columns: repeat(3, minmax(0, 1fr)); 3カラム*/
grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); /*最小200px レスポンシブ対応*/
grid-gap: var(--s1);
border:2px solid #000;
padding:var(--s1)
}
@media (40rem > width) {/*640px未満*/
.content-wrap .grid{grid-template-columns:100%;}
}
.content-box{padding: var(--s1);border: 1px solid #ff0000;overflow-wrap:break-word;display:flex;flex-direction:column;}
.content-box h2{background-color:#fff084;margin-top:0;padding:0.3rem 0.5rem;font-size:var(--s1);}
.content-box p{margin:0;font-size:var(--s0);}
/* FOOTER */
#page-top {position: fixed;right: 10px;z-index: 2;opacity: 0;transform: translateY(100px);}
#page-top a {display: flex;justify-content: center;align-items: center;background: #942D2F;border-radius: 5px;width: 60px;height: 60px;color: #fff;text-align: center;text-transform: uppercase;text-decoration: none;font-size: 0.6rem;transition: all 0.3s;}
@media (any-hover: hover) {
#page-top a:hover {background: #777;}
}
#page-top.UpMove {
/*上に上がる*/
animation: UpAnime 0.5s forwards;}
#page-top.DownMove {
/*下に下がる*/
animation: DownAnime 0.5s forwards;}
@keyframes UpAnime {
from {opacity: 0;transform: translateY(100px);}
to {opacity: 1;transform: translateY(0);}
}
@keyframes DownAnime {
from {opacity: 1;transform: translateY(0);}
to {opacity: 1;transform: translateY(100px);}
}
/* HOVER アニメーション */
@keyframes arrow-mov {
0% {transform:translateY(-50%) scale3d(1,1,1);transform-origin: 100% 0;}
50% {transform:translateY(-50%) scale3d(0,1,1);transform-origin: 100% 0}
50.1% {transform:translate(-50px,-50%) scale3d(0,1,1);transform-origin: 0 0;background-color:#002609;}
100% {transform:translate(0,-50%) scale3d(1,1,1);transform-origin: 0 0;background-color:#002609;}
}
@keyframes arrow-mov-reverse {
0% {transform: translateY(-50%) scale3d(1,1,1);transform-origin: 0 0;opacity:0;}
50% {transform: translateY(-50%) scale3d(0,1,1);transform-origin: 0 0;opacity:.3;}
50.1% {transform: translate(50px,-50%) scale3d(0,1,1);transform-origin: 100% 0;background-color:#002609;opacity:.3;}
100% {transform: translate(0,-50%) scale3d(1,1,1);transform-origin: 100% 0;background-color:#002609;opacity:1;}
}
@keyframes arrow-mov-button {
0% {transform:translate(-50%,-50%) scale3d(1,1,1);opacity:0;}
50% {transform:translate(-50%,-50%) scale3d(0,1,1);}
50.1% {transform:translate(-50px,-50%) scale3d(0,1,1);background-color:#002609;}
100% {transform:translate(-45%,-50%) scale3d(1,1,1);background-color:#002609;opacity:1;}
}
@media (any-hover: hover) {
}
@media (40.063rem <= width) {/*641px以上*/
}
@media (61.313rem <= width) {/*981px以上*/
}
@media (75.063rem <= width) {/*1201px以上*/
}
@media (75rem >= width) {/*1200px以下*/
}
@media (61.25rem >= width) {/*980px以下*/
}
@media (48.875rem >= width) {/*782px以下*/
}
@media (40.063rem <= width) and (61.25rem >= width){ /*タブレット*/
}
@media (40rem >= width) {/*640px以下*/
}