/*!
Theme Name: re-japan
Theme URI: http://underscores.me/
Author: 合同会社リーリーリー
Author URI: http://www.re-japan.jp/
Description: 誰にでも簡単に依頼ができるサイト制作。寄り添うサイト制作。
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: canvas
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

canvas is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@charset "UTF-8";

:root{
--clr-blue:#004098;
--clr-red:#f42b36;
--clr-navy:#00275b;
--clr-yellow:#fae42c;
--clr-ftc:#252f3f;
--clr-head:#3e4c59;
--clr-bgc:#f0f9ff;
}
:root{
--clr-blue-rgb:0,64,152;
--clr-red-rgb:244,43,5;
--clr-bgc-rgb:240,249,255;
}
:root{
--font-catchcopy:clamp( 3.2rem,4.8vw,6.4rem);
--font-large:clamp( 2.4rem,3.2vw,4.0rem);
--font-middle:clamp( 2.0rem,2.7vw,3.2rem);
--font-small:clamp( 1.6rem,2.0vw,2.4rem);
--font-sup:clamp( 1.6rem,1.8vw,2.0rem);
}

h1, h2, h3, h4, h5, h6, th, legend, summary, caption, figcaption { text-wrap: balance;}
p, li, dt, dd, td, blockquote, address, label { text-wrap: pretty;}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* index */
#toppage{}
#toppage article.contents{ padding-block: 4.8rem; position: relative;}
#toppage article.contents section{ width: 90%; margin: 0px auto;}
#toppage article.contents section > p:nth-of-type(n+2){ margin-top: 1.0em;}

/* static */
#static{}
#static article.contents{ padding-block: 4.8rem; position: relative;}
#static article.contents section{ width: 90%; margin: 0px auto;}
#static article.contents section > p:nth-of-type(n+2){ margin-top: 1.0em;}

/* page layout */
body.page-template-default header.entry-header{ display: none;}
body.page-template-default #container main{ width: 100%; margin: 0px auto;}
body.page-template-default #container #secondary{ display: none;}

h1,
h2,
h3,
.howto .column02 .inner dl dt,
.news-block dl dt a,
.flow .column03 .inner dl dt,
.restoration .column03 .inner dl dt,
.lecture .column03 dl dt,
.qalist dt,
.howto section .tips h4{ font-family: YakuHanJP, "Kosugi Maru", sans-serif; font-style: normal; font-weight: 400;}
.en,
h2.heading span{ font-family: "DM Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}

/* contents layout */
.half{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.half.al-center{ align-items: center;}
.half .inner,
.half figure{ width: 100%;}
.half figure img{ width: 100%; height: auto; border-radius: 8px; overflow: hidden;}
.half .inner{ margin-top: 1.5em;}
.half .inner p:nth-of-type(n+2){ margin-top: 1.0em;}

.article{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.article.al-center{ align-items: center;}
.article.mt{ margin-top: 4.8rem;}
.article figure{ width: 100%;}
.article figure img{ width: 100%; height: auto; border-radius: 8px; overflow: hidden;}
.article .inner{ width: 100%; margin-top: 1.5em;}

.column02{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.column02 .inner{ width: 47%; margin-right: 6%;}
.column02 .inner:nth-child(2n),
.column02 .inner:last-child{ margin-right: 0;}
.column02 .inner:nth-child(n+3){ margin-top: 4.8rem;}

.column03{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.column03 .inner{ width: 100%;}
.column03 .inner:nth-child(n+2){ margin-top: 2.4em;}

.column04{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.column04 .inner{ width: 47%; margin-right: 6%;}
.column04 .inner:nth-of-type(2n),
.column04 .inner:last-child{ margin-right: 0;}
.column04 .inner:nth-of-type(n+3){ margin-top: 2.4rem;}

/*--------------------------------------------------------------
# top page
--------------------------------------------------------------*/
#heroBlock { position: relative; width: calc(100% - 4%); margin: 1.0em auto 0; height: 100vw; border-radius: 24px; overflow: hidden; background-color: #FFF;}
#heroBlock section { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96%; z-index: 10; color: #fff; display: flex; flex-wrap: wrap;}
#heroBlock section h2{ display: inline-block; font-size: 2.0rem; line-height: 1.0em; color: #FFF; background: rgba(var(--clr-blue-rgb),0.8); padding: 0.24em; font-family: YakuHanJP,"Shippori Mincho", serif; font-weight: 400; font-style: normal; text-align: center;}
#heroBlock section h3{ margin-top: 0.64em; text-align: center;}
#heroBlock section h3 span{ display: inline-block; color: #333; background: rgba(255,255,255,0.8); font-size: 2.4rem; line-height: 1.0em; padding: 0.24em; font-family: YakuHanJP,"Shippori Mincho", serif; font-weight: 400; font-style: normal;}
#heroBlock ul { width: 100%; height: 100%; padding: 0; margin: 0; list-style: none;}
#heroBlock li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.0s ease-in-out; z-index: 1;}
#heroBlock li.is-active { opacity: 1; z-index: 2;}
#heroBlock li img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 2.0s linear;}
#heroBlock li.is-active img { transform: scale(1.15); transition: transform 7s linear;}

/* introduction */
.introduction .half:nth-of-type(n+2){ margin-top: 4.8rem;}

/* necessary */
.necessary{ background: var(--clr-bgc);}
.necessary .column04{}
.necessary .column04 .inner{}
.necessary .column04 .inner figure.icon{ width: 72%; background: #FFF; padding: 2.0em; border-radius: 100%; margin: 0px auto; overflow: hidden;}
.necessary .column04 .inner figure.icon img{ width: 100%; height: auto;}
.necessary .column04 .inner h3{ font-size: var(--font-sup); line-height: 1.2em; color: var(--clr-blue); margin: 1.0em 0;}

/* media */
.home-media{}
.home-media .half{ align-items: center;}
.home-media .half .inner .small-button{ margin-top: 1.0em;}
.home-media .half .inner .small-button a{ display: inline-block; color: #FFF; text-decoration: none; font-weight: 600; line-height: 1.0em; background: var(--clr-red); border-radius: 100px; padding: 0.8em 2.4em;}
.home-media .half .inner .small-button a:hover{ color: #FFF; background: rgba(var(--clr-red-rgb),0.64);}

/* technic */
#toppage article.contents.home-technic{ background: var(--clr-bgc); padding-block: 4.8rem;}
.home-technic section{ position: relative; z-index: 10; padding-top: 2.4rem;}
.home-technic section:before{ content: ""; width: calc(100% + 6.4rem); height: calc(100% + 6.4rem); background: #FFF; border-radius: 24px; position: absolute; top: -3.2rem; left: -3.2rem; z-index: -1;}
.home-technic section .article{ align-items: center; position: relative;}
.home-technic section .article:nth-of-type(n+2){ margin-top: 4.0rem;}
.home-technic section .article .inner{ position: relative;}
.home-technic section .article .inner h3{ font-size: var(--font-small); color: var(--clr-blue); line-height: 1.2em;}
.home-technic section .article .inner h3 span{ display: block; font-size: 1.6rem; line-height: 1.2em; font-weight: 400; margin-bottom: 0.24em; opacity: 0.48;}
.home-technic section .article .inner p{ margin-top: 1.0em;}

/* WORKS */
.contents.home-service.first{ position: relative;}
.contents.home-service.first:before{ content: ""; width: calc(100% - 4%); height: 120%; border-radius: 24px; background: var(--clr-bgc); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.contents.home-service.first section{ position: relative;}
.contents.home-service.first section h2{ display: none;}
.contents.home-service.first .column04{ justify-content: space-between;}
.contents.home-service.first .column04 .inner{ width: 47%; margin-top: 0; padding-bottom: 1.5em;}
.contents.home-service.first .column04 .inner:nth-child(n+3){ margin-top: 1.0em;}
.contents.home-service.first .column04 .inner figure img{ border-radius: 8px;}
.contents.home-service.first .column04 .inner h3{ margin-top: 0.5em;}
.contents.home-service.first .column04 .inner p{ display: none;}
.home-works{ border-bottom: solid 1px #DDD;}

/* service */
.home-service{}
.home-service .column04 .inner{ position: relative; padding-bottom: 2.0em; width: 100%; margin-right: 0;}
.home-service .column04 .inner:nth-child(n+2){ margin-top: 1.5em;}
.home-service .column04 .inner figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.home-service .column04 .inner h3{ font-size: var(--font-sup); color: var(--clr-blue); line-height: 1.2em; text-align: center; margin-top: 1.0em;}
.home-service .column04 .inner p{ margin-top: 0.72em; padding: 0 1.0em; line-height: 1.6em;}
.home-service .column04 .inner a span{ display: none;}
.home-service .column04 .inner a:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100;}
.home-service .column04 .inner a:after{ content: "\e313"; font-family: "Material Icons"; color: #333; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0.24em; transition: all 0.3s ease 0s;}
.home-service .column04 .inner a:hover:after{ color: var(--clr-red); opacity: 1.0; bottom: 0.5em;}

/* voice */
.home-voice{ position: relative; z-index: 10;}
.home-voice:before{ content: ""; width: 100%; height: 32.0rem; background: var(--clr-navy); position: absolute; top: 0; left: 0; z-index: -1; border-radius: 40px 40px 0 0;}
.home-voice section h2{ color: #FFF;}
.home-voice section p{ text-align: center; color: #FFF;}
.home-voice section ul{ margin-top: 2.0em; display: flex; justify-content: space-between; flex-wrap: wrap;}
.home-voice section ul li{ width: 18.4%;}
.home-voice section ul li img{ width: 100%; height: auto; border: solid 4px #FFF; border-radius: 8px;}
.home-voice section .review{ margin-top: 2.0em;}
.ti-verified-by{ display: none !important;}

/*--------------------------------------------------------------
# middle page
--------------------------------------------------------------*/
.breadcrumbs{ width: 100%;}
.breadcrumbs ul.breadcrumbs__list{ width: 90%; margin: 0px auto; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.breadcrumbs ul.breadcrumbs__list li{ font-size: 1.2rem; line-height: 1.0em; color: rgba(51,51,51,0.64); position: relative;}
.breadcrumbs ul.breadcrumbs__list li:nth-of-type(n+2){ margin-left: 0.48em;}
.breadcrumbs ul.breadcrumbs__list li:nth-of-type(n+2):before{ content: "/"; padding-right: 0.48em;}
.breadcrumbs ul.breadcrumbs__list li.home{ padding-left: 1.4em; position: relative;}
.breadcrumbs ul.breadcrumbs__list li.home:before{ content: "\e88a"; font-family: "Material Icons"; font-size: 124%; position: absolute; top: 52.5%; left: 0; transform: translateY(-50%);}
.breadcrumbs ul.breadcrumbs__list li a{ display: inline-block; color: #333; text-decoration: none;}
.breadcrumbs ul.breadcrumbs__list li a:hover{ color: rgba(51,51,51,0.64);}

.c-corner-video{ width: 64vw; height: 64vw; position: absolute; top: -32.0vw; right: -10.0vw; z-index: -1; pointer-events: none; display: none; transform: rotate(16deg);}
.c-corner-video video{ width: 100%; height: 100%; object-fit: cover; display: block;}
body.is-lower .c-corner-video{display: block;}

.imgList03{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 2.4rem;}
.imgList03 li{ width: 100%;}
.imgList03 li:nth-child(n+2){ margin-top: 1.0em;}
.imgList03 li figure{ border-radius: 8px; overflow: hidden;}
.imgList03 li img{ width: 100%; height: auto;}

.emphasis{ font-weight: 600; color: var(--clr-red);}

.link-button{ width: 80%; margin: 2.4em auto 0 !important;}
.link-button a{ display: block; background: var(--clr-red); color: #FFF; text-decoration: none; text-align: center; font-weight: 600; line-height: 1.0em; padding: 1.0em 0; border-radius: 8px; position: relative;}
.link-button a:after{ content: "\e5e1"; font-family: "Material Icons"; font-size: 1.2rem; position: absolute; top: 52.5%; right: 1.6em; transform: translateY(-50%);}
.link-button a:hover{ color: #FFF; opacity: 0.64;}

#page-title{ width: 100%;}
#page-title h2{ width: 90%; margin: 0px auto; padding-top: 1.6em;}
#page-title h2 span{ font-size: var(--font-catchcopy); line-height: 1.2em; letter-spacing: 0.08em; background-image: linear-gradient(90deg, #004098, #00275b); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block;}

/* heading */
h2.sideHeading{ font-size: var(--font-middle); color: var(--clr-head); line-height: 1.2em; padding-bottom: 0.64em; margin-bottom: 1.0em; position: relative;}
h2.sideHeading:before{ content: ""; width: 1.0em; height: 2px; background-image: linear-gradient(90deg, #004098, #00275b); position: absolute; bottom: 0; left: 0;}
h2.heading{ font-size: var(--font-middle); color: var(--clr-head); line-height: 1.2em; text-align: center; margin-bottom: 1.0em; position: relative;}
h2.heading span{ display: block; font-size: var(--font-small); line-height: 1.2em; text-align: center; color: var(--clr-blue);}
h2.heading em{ display: block; font-size: 64%; font-style: normal; line-height: 1.4em;}
h3.sideHeading{ font-size: var(--font-sup); color: var(--clr-blue); line-height: 1.2em; margin-bottom: 0.72em;}

/* サービス案内 common
--------------------------------------------------------------*/
br.pcbr{ display: none;}

/* hero area */
#service-hero{ width: 96%; margin: 0px auto; padding-bottom: 72vw; background: #CCC; border-radius: 16px; overflow: hidden; position: relative; margin-top: 1.0em;}
#service-hero section{ width: 96%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10;}
#service-hero section h1{ font-size: var(--font-catchcopy); line-height: 1.0em; display: inline-block; background: rgba(255,255,255,0.88); padding: 0.16em;}
#service-hero section h1 span{ display: inline-block; font-size: 56%;}
#service-hero section p{ margin-top: 1.0em;}
#service-hero section p span{ display: inline-block; font-size: var(--font-small); font-size: 1.4rem; line-height: 1.0em; color: #FFF; background: rgba(var(--clr-blue-rgb),0.72); padding: 0.24em; margin: 0.08em 0;}

body#tokusyuseisou #service-hero{ background: url("images/service/tokusyuseisou/promo.webp") no-repeat center center; background-size: cover;}
body#kasaifukkyu #service-hero{ background: url("images/service/kasaifukkyu/promo.webp") no-repeat center center; background-size: cover;}
body#suigaifukkyu #service-hero{ background: url("images/service/suigaifukkyu/promo.webp") no-repeat center center; background-size: cover;}
body#kabi #service-hero{ background: url("images/service/kabi/promo.webp") no-repeat center center; background-size: cover;}

/* link */
.menu-service{ display: none;}
.menu-service section{ width: 90%; margin: 0px auto;}
.menu-service section h2{ text-align: center;}
.menu-service section h2 span{ display: inline-block; padding: 0 1.0em; font-size: 2.0rem; line-height: 1.0em; color: rgba(51,51,51,0.48); position: relative;}
.menu-service section h2 span:before{ content: ""; width: 1.0em; height: 2px; background: rgba(51,51,51,0.24); position: absolute; left: 100%; top: 50%; transform: translateY(-50%);}
.menu-service section h2 span:after{ content: ""; width: 1.0em; height: 2px; background: rgba(51,51,51,0.24); position: absolute; right: 100%; top: 50%; transform: translateY(-50%);}
.menu-service section nav ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 0.32em;}
.menu-service section nav ul li{ line-height: 1.2em; width: 23.5%; margin-right: 2%; border-bottom: solid 1px #DDD;}
.menu-service section nav ul li:nth-child(4n){ margin-right: 0;}
.menu-service section nav ul li a{ display: inline-block; color: #333; text-decoration: none; padding: 1.0em 0 1.0em 2.4rem; position: relative; line-height: 1.2em;}
.menu-service section nav ul li a:before{ content: "\f181"; font-family: "Material Icons"; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 1.8rem; line-height: 1.0em; color: var(--clr-blue);}
.menu-service section nav ul li a:hover{ color: rgba(51,51,51,0.64);}

/* before & after */
.beefore-after dl{ width: 100%; margin: 2.4rem auto 0; display: flex; flex-wrap: wrap;}
.beefore-after dl:nth-child(1){ margin-top: 0;}
.beefore-after dl dt{ order: 2; font-size: var(--font-sup); line-height: 1.0em; margin-top: 0.48em;}
.beefore-after dl dt span{ display: inline-block; margin-right: 0.48em; color: var(--clr-blue);}
.beefore-after dl dd{}
.beefore-after dl dd ul{ display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;}
.beefore-after dl dd ul:before{ content: "\eaaa"; font-family: "Material Icons"; font-size: 4.0rem; line-height: 1.0em; color: var(--clr-blue); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10;}
.beefore-after dl dd ul:after{ content: ""; width: 3.0rem; height: 3.0rem; border-radius: 100%; background: #FFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9;}
.beefore-after dl dd ul li{ width: calc(50% - 0.2rem);}
.beefore-after dl dd ul li:nth-child(1) figure{ border-radius: 16px 0 0 16px; overflow: hidden;}
.beefore-after dl dd ul li:nth-child(2) figure{ border-radius: 0 16px 16px 0; overflow: hidden;}
.beefore-after dl dd ul li img{ width: 100%; height: auto;}
.beefore-after h3{ font-size: var(--font-small); line-height: 1.2em; text-align: center; color: var(--clr-blue); margin-top: 2.0em;}

/* REMEDIATION */
.remediation{}
.remediation .half{}
.remediation .half ul{ width: 100%; order: 1;}
.remediation .half ul li{}
.remediation .half ul li:nth-child(n+2){ margin-top: 1.0em;}
.remediation .half ul li:nth-child(1) img,
.remediation .half ul li:nth-child(3) img{ width: 100%; height: auto; border-radius: 8px; overflow: hidden;}
.remediation .half ul li:nth-child(2){ width: 64%; margin: 1.0em auto 0;}
.remediation .half ul li:nth-child(2) img{ width: 100%; height: auto;}
.remediation .half ul li:nth-child(3){ width: 80%; margin: 1.0em auto 0;}
.remediation .half .inner{ width: 100%; order: 2; margin-top: 1.5em;}
.remediation .half .inner h3{ font-size: var(--font-sup); line-height: 1.4em; border-bottom: solid 1px rgba(0,0,0,0.08); padding-bottom: 1.0em; margin-bottom: 1.0em;}
.remediation .half .inner h3 span{ display: block; font-size: var(--font-small); line-height: 1.4em;}
.remediation .half .inner h4{ font-size: var(--font-sup); line-height: 1.2em; margin-bottom: 1.0em;}
.remediation .half .inner h4 strong{ color: var(--clr-red); font-weight: normal;}

/* TECHNIC */
body#kabi .technic:before{ content: ""; width: 100%; height: 100%; background: var(--clr-bgc); border-radius: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}

.technic{}
.technic section > h3{ font-size: var(--font-sup); text-align: center; line-height: 1.2em; color: var(--clr-navy);}
.technic section p{ margin-top: 1.0em;}
.technic section .article{ margin-top: 4.8rem; align-items: center;}
.technic section .article .inner h3{ font-size: var(--font-small); line-height: 1.2em; color: var(--clr-blue);}
.technic section .article .inner h3 span{ font-size: 1.4rem; line-height: 1.2em; margin-bottom: 0.24em; display: flex; justify-content: flex-start; align-items: center;}
.technic section .article .inner h3 span strong{ display: inline-block; font-size: 1.6rem; line-height: 1.2em; font-weight: inherit; margin-left: 0.5em;}
.technic section .article .inner p strong{ font-weight: 600; display: block; font-size: 1.2rem; line-height: 1.2em;}

/* howto */
.howto{ position: relative; z-index: 10;}
.howto:before{ content: ""; width: 100%; height: 100%; background: var(--clr-bgc); border-radius: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.howto .column02{ width: 100%; margin: 0px auto;}
.howto .column02 .inner{ width: 100%; background: #FFF; border-radius: 16px; overflow: hidden; box-shadow: 0 0 16px rgba(0,0,0,0.16); margin-right: 0;}
.howto .column02 .inner:nth-child(n+2){ margin-top: 3.2rem;}
.howto .column02 .inner figure img{ width: 100%; height: auto;}
.howto .column02 .inner dl{ padding: 1.0em;}
.howto .column02 .inner dl dt{ font-size: var(--font-sup); line-height: 1.2em; color: var(--clr-blue);}
.howto .column02 .inner dl dd{ margin-top: 0.48em;}
.howto .column02 .inner dl dd strong{ display: block; font-weight: normal; font-size: 1.4rem; line-height: 1.4em; color: var(--clr-red);}
.howto section .tips{ width: 100%; margin: 3.2rem auto 0; border: dotted 2px var(--clr-navy); border-radius: 16px; padding: 1.0em;}
.howto section .tips h4{ text-align: center; font-size: var(--font-sup); line-height: 1.2em; color: var(--clr-navy);}
.howto section .tips p{ margin-top: 1.0em; line-height: 1.4em;}
.howto section .tips ul{ margin-top: 1.0em; padding-left: 1.2em;}
.howto section .tips ul li{ line-height: 1.4em; list-style-type: decimal; list-style-position: outside;}
.howto section .tips ul li:nth-child(n+2){ margin-top: 0.48em;}
.howto section .tips ul li strong{ color: var(--clr-red);}

/* QUALITY */
body#kasaifukkyu .quality:before{ content: none;}
body#tokusyuseisou .quality .article{ margin-top: 4.8rem; align-items: center;}

.quality{}
.quality:before{ content: ""; width: 100%; height: 100%; background: var(--clr-bgc); border-radius: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.quality .article .inner h3{ font-size: var(--font-small); line-height: 1.2em; color: var(--clr-blue);}
.quality .article .inner h3 span{ display: block; font-size: 1.6rem; line-height: 1.2em; margin-bottom: 0.24em;}
.quality .article .inner p{ margin-top: 1.0em;}
.quality .article .inner p:first-child{ margin-top: 0;}
.quality .article .inner .sup{ font-size: 1.4rem; line-height: 1.2em; margin-top: 1.0em;}
.quality .box{ border: dotted 2px var(--clr-red); background: #FFF; padding: 1.5em; border-radius: 16px; margin-top: 4.8rem;}
.quality .box h4{ font-size: var(--font-sup); line-height: 1.2em; text-align: center; color: var(--clr-red);}
.quality .box p{ margin-top: 1.0em;}

/* OPTION */
.option{ border: solid 1px #DDD; border-style: solid none;}
.option section > h3{ font-size: var(--font-sup); color: var(--clr-navy); text-align: center;}
.option .column02{ width: 100%; margin: 2.4rem auto 0;}
.option .column02 .inner{}
.option .column02 .inner figure img{ border-radius: 8px; width: 100%; height: auto; overflow: hidden;}
.option .column02 .inner h3{ text-align: center; font-size: var(--font-sup); line-height: 1.2em; margin-top: 1.0em;}
.option .column02 .inner h3 span{ display: block; text-align: center; font-size: 1.6rem; color: var(--clr-navy); line-height: 1.2em; font-weight: normal;}
.option .column02 .inner p{ margin-top: 1.0em;}
.option .checklist{ width: 100%; margin: 3.2rem auto 0; background: rgba(var(--clr-bgc-rgb),0.64); border-radius: 16px; padding: 1.5em 1.0em;}
.option .checklist h2{ text-align: center;}
.option .checklist h2 span{ font-size: 1.4rem; line-height: 1.2em; color: var(--clr-navy); border-bottom: double 3px var(--clr-navy);}
.option .checklist dl dt{ font-size: var(--font-sup); line-height: 1.2em; font-weight: 600; margin-top: 3.2rem; padding-bottom: 0.48em; border-bottom: solid 1px rgba(0,0,0,0.08);}
.option .checklist dl dd{ margin-top: 0.64em;}
.option .checklist dl dd ul li{ margin-top: 0.64em; line-height: 1.2em; padding-left: 2.4rem; position: relative;}
.option .checklist dl dd ul li:before{ content: ""; width: 1.6rem; height: 1.6rem; border: solid 1px #CCC; background: #FFF; position: absolute; top: 0; left: 0;}

/* SERVICE FLOW */
.flow .column03 .inner{ background: rgba(var(--clr-bgc-rgb),0.64); border-radius: 16px; overflow: hidden;}
.flow .column03 .inner figure img{ width: 100%; height: auto;}
.flow .column03 .inner dl{ padding: 1.0em;}
.flow .column03 .inner dl dt{ font-size: var(--font-sup); line-height: 1.2em; color: var(--clr-blue);}
.flow .column03 .inner dl dt span{ display: inline-block; font-size: 1.6rem;}
.flow .column03 .inner dl dd{ margin-top: 0.48em;}

/* FLOOD RESTORATION */
.restoration .column03 .inner{ background: rgba(var(--clr-bgc-rgb),0.64); border-radius: 16px; overflow: hidden;}
.restoration .column03 .inner figure img{ width: 100%; height: auto;}
.restoration .column03 .inner dl{ padding: 1.0em;}
.restoration .column03 .inner dl dt{ font-size: var(--font-sup); line-height: 1.2em; color: var(--clr-blue);}
.restoration .column03 .inner dl dt span{ display: inline-block; font-size: 1.6rem;}
.restoration .column03 .inner dl dd{ margin-top: 0.48em;}

/* PROCESS */
body#kabi .process{ border-top: solid 1px #DDD;}
.process{}
.process .column04{ width: 100%; margin: 0px auto;}
.process .column04 dl{ width: 31%; margin-right: 3.5%;}
.process .column04 dl:nth-child(3n){ margin-right: 0;}
.process .column04 dl:nth-child(n+4){ margin-top: 3.2rem;}
.process .column04 dl dt{ text-align: center; position: relative;}
.process .column04 dl dt:after{ content: "\e5c8"; font-family: "Material Icons"; color: var(--clr-blue); font-size: 2.4rem; position: absolute; top: 64.0%; right: -14%; transform: translateY(-50%);}
.process .column04 dl:nth-child(3n) dt:after,
.process .column04 dl:last-of-type dt:after{ content: none;}
.process .column04 dl dt span{ display: inline-block; font-weight: 600; font-size: 1.4rem; line-height: 1.0em; color: #FFF; background: #7DA4CF; padding: 0.4rem 1.6rem; border-radius: 4px; margin-bottom: 0.8em;}
.process .column04 dl dt span.progress{ background: var(--clr-blue);}
.process .column04 dl dt figure{ width: 80%; padding-bottom: 80%; margin: 0px auto; border-radius: 100%; position: relative; overflow: hidden;}
.process .column04 dl dt figure img{ width: auto; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.process .column04 dl dd{ min-height: 2lh; text-align: center; font-weight: 600; line-height: 1.2em; margin-top: 0.8em;}
.process .column04 dl dd strong{ display: block; text-align: center; color: var(--clr-red); font-size: 1.4rem;}
.process .box{ margin-top: 4.0rem; border: dotted 2px var(--clr-red); padding: 1.0em; border-radius: 8px; position: relative; text-align: center;}
.process .box h3{ position: absolute; top: -0.8em; left: 50%; transform: translateX(-50%); z-index: 10;}
.process .box h3 span{ display: inline-block; padding: 0 0.48em; background: #FFF; font-size: var(--font-sup); word-break: keep-all; line-height: 1.0em; color: var(--clr-red);}
.process .box ul{ display: inline-block; padding-left: 1.2em; margin-top: 0.24em;}
.process .box ul li{ list-style-type: disc; list-style-position: outside;}

/* WORKS */
.contents.works{}
.contents.works:before{ content: ""; width: 100%; height: 100%; background: var(--clr-bgc); border-radius: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}

/* FEATURES */
.features{}
.features:before{ content: ""; width: 100%; height: 100%; background: var(--clr-bgc); border-radius: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}

.features h3{ text-align: center; font-size: var(--font-small); color: var(--clr-blue); margin: 6.4rem auto 2.4rem;}

.chat01{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; width: 100%; margin: 4.0rem auto 0;}
.chat01 dt{ width: 31%; order: 2;}
.chat01 dt img{ width: 100%; height: auto;}
.chat01 dd{ width: 65%; order: 1; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); padding: 1.0em; border-radius: 16px; border: solid 4px #FFF;}
.chat01 dd strong{ color: var(--clr-blue); display: block;}

.chat02{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; width: 100%; margin: 2.4rem auto 0;}
.chat02 dt{ width: 31%; order: 1;}
.chat02 dt img{ width: 100%; height: auto;}
.chat02 dd{ width: 65%; order: 2; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); padding: 1.0em; border-radius: 16px; border: solid 2px var(--clr-red);}
.chat02 dd strong{ color: var(--clr-red); display: block;}

.scroool{}
.table01{ width: 100%; position: relative;}
.table01:before{ content: ""; width: calc(25% - 6px); height: calc(100% - 8px); border: solid 4px var(--clr-blue); position: absolute; top: 0; left: 25%; z-index: 100;}
.table01 thead th{ background: #E5EBF5; border: solid 4px var(--clr-bgc); border-collapse: collapse; border-bottom: none; line-height: 1.2em; text-align: center; font-weight: 700; padding: 1.0em; color: var(--clr-blue);}
.table01 tbody th{ background: #E5EBF5; border: solid 4px var(--clr-bgc); border-collapse: collapse; line-height: 1.2em; text-align: center; font-weight: 700; padding: 1.0em; color: var(--clr-blue);}
.table01 tbody td{ background: #FFF; border: solid 4px var(--clr-bgc); border-collapse: collapse; line-height: 1.2em; text-align: center; font-weight: 500; padding: 1.0em; width: 25%;}
.table01 tbody td strong{ color: #E7373C; font-weight: 500;}
.table01 thead th.cleanmate{ background: var(--clr-blue); color: #FFF;}
.table01 tbody td.cleanmate{ background: #E5EBF5; color: var(--clr-blue); font-size: var(--font-sup); line-height: 1.2em; font-weight: 700;}

.table02{ width: 100%; margin-top: 8.0rem; position: relative;}
.table02:before{ content: ""; width: calc(100% - 8px); height: calc(50% - 8px); border: solid 4px var(--clr-blue); position: absolute; bottom: 0; left: 0; z-index: 100;}
.table02 tbody th{ background: #E5EBF5; border: solid 4px var(--clr-bgc); border-collapse: collapse; line-height: 1.2em; text-align: center; font-weight: 700; padding: 1.0em; color: var(--stClr);}
.table02 tbody td{ background: #FFF; border: solid 4px var(--clr-bgc); border-collapse: collapse; line-height: 1.2em; text-align: center; font-weight: 500; padding: 1.0em; width: 28%;}
.table02 tbody td strong{ color: #E7373C; font-weight: 500;}
.table02 tbody tr.cleanmate th{ background: var(--clr-blue); border-color: var(--clr-blue); color: #FFF;}
.table02 tbody tr.cleanmate td{ background: #FFF; color: var(--clr-blue); line-height: 1.2em; font-weight: 700;}

/* PRICE */
.priceTable{ border-top: solid 1px #DDD; border-bottom: solid 1px #DDD;}
.priceTable table{ width: 100%; margin: 0px auto; border: solid 1px #DDD; border-collapse: collapse;}
.priceTable table thead th{ color: var(--clr-blue); line-height: 1.2em; text-align: center; padding: 1.0em; background: rgba(var(--clr-blue-rgb),0.08); border: solid 1px #DDD; border-collapse: collapse;}
.priceTable table tbody th{ line-height: 1.2em; padding: 1.0em; background: #F9F9F9; border: solid 1px #DDD; border-collapse: collapse;}
.priceTable table tbody td{ line-height: 1.2em; padding: 1.0em; text-align: right; border: solid 1px #DDD; border-collapse: collapse;}
.priceTable table.row02 thead th{ width: 50%;}
.priceTable table.row04 thead th{ width: 25%;}
.priceTable h3{ width: 100%; margin: 4.0rem auto 0.64em; font-size: var(--font-small); line-height: 1.2em; color: var(--clr-blue);}
.priceTable ul{ width: 100%; margin: 0.72em auto 0;}
.priceTable ul li{ font-size: 1.2rem; line-height: 1.2em;}
.priceTable ul li:nth-child(n+2){ margin-top: 0.4em;}

/* seminar */
.seminar{ border-top: solid 1px #DDD;}

/* LECTURE */
.lecture{ border-top: solid 1px #DDD;}
.lecture .column03{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 4.0rem;}
.lecture .column03 dl{ width: 100%; padding: 1.0em; border-radius: 16px; border: solid 4px var(--clr-navy);}
.lecture .column03 dl:nth-child(n+2){ margin-top: 1.5em;}
.lecture .column03 dl dt{ font-size: var(--font-small); line-height: 1.2em; text-align: center; color: var(--clr-navy); padding-bottom: 0.4em; margin-bottom: 0.4em; border-bottom: solid 1px rgba(0,0,0,0.08);}

/* faq */
.qalist{}
.qalist dt { font-size: var(--font-sup); padding: 0.8em 0; padding-left: 3.2rem; border-bottom: solid 1px rgba(0,0,0,0.08); position: relative; cursor: pointer; transition: background-color 0.3s;}
.qalist dt:before{ content: ""; width: 24px; height: 24px; background: url("images/service/icon_q.svg") no-repeat; background-size: cover; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.qalist dt:hover{ color: var(--clr-navy);}
.qalist dt.is-active{ color: var(--clr-blue);}
.qalist dd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; margin: 0; padding: 0; position: relative;}
.qalist dd.is-open { grid-template-rows: 1fr;}
.qalist dd .qa-inner { overflow: hidden; padding: 0 0 0 3.2rem; position: relative; opacity: 0; transition: opacity 0.3s ease, padding 0.3s ease;}
.qalist dd .qa-inner:before{ content: ""; width: 24px; height: 24px; background: url("images/service/icon_a.svg") no-repeat; background-size: cover; position: absolute; top: 1.1em; left: 0;}
.qalist dd.is-open .qa-inner { padding: 1.0em 0 0 3.2rem; opacity: 1;}

/* 新着情報
--------------------------------------------------------------*/
.news-block{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 2.4rem 0; border-bottom: solid 1px rgba(0,0,0,0.08);}
.news-block figure{ width: 100%; padding-bottom: 60%; overflow: hidden; position: relative; border-radius: 4px;}
.news-block figure img{ width: auto; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.news-block dl{ width: 100%; margin-top: 1.0em;}
.news-block dl dt span.date{ display: block; font-size: 1.4rem; line-height: 1.2em; color: rgba(51,51,51,0.48);}
.news-block dl dt a{ display: inline-block; font-size: var(--font-sup); line-height: 1.2em; margin-top: 0.16em; color: var(--clr-blue); text-decoration: none;}
.news-block dl dt a:hover{ color: rgba(var(--clr-blue-rgb),0.64);}
.news-block dl dd{ line-height: 1.4em; margin-top: 0.5em;}

/* 作業実績
--------------------------------------------------------------*/
.cate-menu{}
.cate-menu ul{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.cate-menu ul li{ width: 48%; margin-right: 4.0%;}
.cate-menu ul li:nth-child(2n){ margin-right: 0;}
.cate-menu ul li:last-child{ margin-right: 0;}
.cate-menu ul li:nth-child(n+3){ margin-top: 1.0em;}
.cate-menu ul li a{ display: block; line-height: 1.2em; border: solid 2px #DDD; color: #333; text-decoration: none; padding: 0.56em 0.72em; border-radius: 100px; position: relative;}
.cate-menu ul li a:hover{ color: #FFF; background: var(--clr-blue); border-color: var(--clr-blue);}
.cate-menu ul li a:after{ content: "\eaaa"; font-family: "Material Icons"; position: absolute; font-size: 2.0rem; top: 52.5%; right: 0.72em; transform: translateY(-50%); color: var(--clr-blue); transition: all 0.3s ease 0s;}
.cate-menu ul li a:hover:after{ color: #FFF;}

/* 一覧 */
#archive-works{ padding-bottom: 4.8rem;}
#archive-works .contents{ padding-block: 4.8rem;}
#archive-works .contents section{ width: 90%; margin: 0px auto;}
#works-list{ width: 90%; margin: 0px auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
#works-list .inner{ width: 100%; position: relative;}
#works-list .inner:nth-child(n+2){ margin-top: 4.8rem;}
#works-list .inner{ border-radius: 16px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.08); transition: all 0.3s ease 0s;}
#works-list .inner:hover{ box-shadow: 0 4px 24px rgba(0,0,0,0.16);}
#works-list .inner figure{}
#works-list .inner figure img{ width: 100%; height: auto;}
#works-list .inner header{ padding: 1.0em; padding-bottom: 0;}
#works-list .inner header .date{ font-size: 1.4rem; line-height: 1.2em; color: rgba(51,51,51,0.48);}
#works-list .inner header h2{ font-size: var(--font-sup); line-height: 1.2em; color: var(--clr-blue); margin-top: 0.16em;}
#works-list .inner .column{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.0em; padding: 1.0em; border-top: solid 1px rgba(0,0,0,0.08);}
#works-list .inner .column dl{ width: 46%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end;}
#works-list .inner .column dl dt{ font-size: 1.2rem; color: rgba(51,51,51,0.48);}
#works-list .inner .column dl:last-of-type dd{ font-weight: 600; color: var(--clr-red);}
#works-list .inner a span{ display: none;}
#works-list .inner a:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100;}

/* 詳細 */
#works-detail{ width: 100%;}
h2.work-title{ font-size: var(--font-middle); line-height: 1.2em; color: var(--clr-navy); margin-bottom: 1.0em;}
ul.main-image{ display: flex; justify-content: space-between; flex-wrap: wrap; border-radius: 4px; overflow: hidden;}
ul.main-image li{ width: 50%; position: relative;}
ul.main-image li img{ width: 100%; height: auto;}
ul.main-image li span{ font-size: 1.4rem; line-height: 1.0em; color: #FFF; background: var(--clr-blue); padding: 0.48em 0.8em; position: absolute; top: 0; left: 0; z-index: 10;}
header.work-meta{ padding: 2.4rem 0; border-bottom: solid 1px rgba(0,0,0,0.08); display: flex; justify-content: space-between; flex-wrap: wrap;}
header.work-meta dl{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-top: 0 !important;}
header.work-meta dl:nth-child(n+2){ margin-top: 0.56em;}
header.work-meta dl dt{ font-size: 1.2rem; line-height: 1.2em; color: rgba(51,51,51,0.48);}
header.work-meta dl dd{ text-align: right; line-height: 1.2em; font-weight: 600;}
header.work-meta dl dd span{ font-size: 1.4rem;}
header.work-meta dl:last-of-type dd strong{ font-size: var(--font-sup); color: var(--clr-red); font-weight: 600;}
#works-detail h2.wp-block-heading{ font-size: var(--font-middle); line-height: 1.2em; padding: 0 0.16em; padding-left: 0.56em; position: relative; margin-top: 6.4rem; margin-bottom: -1.6rem;}
#works-detail h2.wp-block-heading:before{ content: ""; width: 4px; height: 88%; background: var(--clr-blue); border-radius: 2px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
#works-detail h3{ font-size: var(--font-small); line-height: 1.2em; padding: 0.48em 0; border-bottom: solid 1px rgba(var(--clr-blue-rgb),0.24); color: var(--clr-blue); margin-top: 3.2rem;}
#works-detail p,
#works-detail ul,
#works-detail ol,
#works-detail dl{ margin-top: 1.0em;}
#works-detail ul.wp-block-list{ margin-top: 1.6em;}
#works-detail ul.wp-block-list li{ border-bottom: solid 1px rgba(0,0,0,0.08); padding: 0.8em 0; padding-left: 1.6em; position: relative; line-height: 1.2em;}
#works-detail ul.wp-block-list li:before{ content: "\e86c"; font-family: "Material Icons"; color: #62b93f; position: absolute; top: 0.8em; left: 0;}
ul.is-style-tag-list{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
ul.is-style-tag-list li{ background: rgba(var(--clr-bgc-rgb),0.48); border: solid 1px rgba(var(--clr-blue-rgb),0.08); color: var(--clr-blue); line-height: 1.2em; padding: 0.48em 0.64em !important; border-radius: 4px; margin: 0.24em; margin-left: 0; margin-top: 0;}
ul.is-style-tag-list li:before{ content: none !important;}

dl.dl-sticky{ position: relative; border: dotted 2px rgba(var(--clr-blue-rgb),0.32); border-radius: 16px; padding: 1.0em; margin-top: 2.0em !important;}
dl.dl-sticky dt{ color: #FFF; line-height: 1.0em; background: var(--clr-navy); padding: 0.16em 1.0em; border-radius: 100px; position: absolute; top: -0.7em; left: 1.0em; z-index: 10;}
dl.dl-sticky.is-style-summary{ border-color: var(--clr-red); margin-top: 3.0em !important;}
dl.dl-sticky.is-style-summary dt{ background: var(--clr-red);}

.ul-column{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.ul-column ul{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;}
.ul-column ul:nth-child(n+2){ margin-top: 1.0em;}
.ul-column ul:before{ content: "\eaaa"; font-family: "Material Icons"; font-size: 4.0rem; line-height: 1.0em; color: var(--clr-navy); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10;}
.ul-column ul:after{ content: ""; width: 2.8rem; height: 2.8rem; background: #FFF; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9;}
.ul-column ul li{ width: 49%;}
.ul-column ul li img{ width: 100%; height: auto; border-radius: 4px; overflow: hidden;}
.gallery{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.gallery li{ width: 48%; margin-right: 4%;}
.gallery li:nth-child(2n){ margin-right: 0;}
.gallery li:nth-child(n+3){ margin-top: 1.2em;}
.gallery li img{ width: 100%; height: auto; border-radius: 4px; overflow: hidden;}
.back-button{ width: 80%; margin: 1.6em auto 0 !important;}
.back-button a{ display: block; color: #FFF; line-height: 1.0em; font-weight: 600; background: var(--clr-red); text-decoration: none; text-align: center; padding: 1.0em 0; border-radius: 100px;}
.back-button a:hover{ color: #FFF; background: rgba(var(--clr-red-rgb),0.64);}

/* Lightbox用スタイル（アニメーション付き） */
.lightbox-overlay { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2147483647; display: flex; justify-content: center; align-items: center; transition: opacity 0.3s ease, visibility 0.3s ease;}
.lightbox-overlay.active { visibility: visible; opacity: 1;}
.lightbox-content { position: relative; max-width: 90%; max-height: 90%; transform: scale(0.9); opacity: 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;}
.lightbox-overlay.active .lightbox-content { transform: scale(1); opacity: 1; transition-delay: 0.1s;}
.lightbox-content img { max-width: 100%; max-height: 90vh; border: 2px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.5);}
.lightbox-close { position: absolute; top: -35px; right: 0; color: #fff; font-size: 30px; cursor: pointer; line-height: 1; transition: transform 0.2s ease;}
.lightbox-close:hover { transform: scale(1.2);}
.lightbox-trigger { cursor: pointer; display: block;}

/* トップページ・サービスページ */
.works-list-parts{}
.works-list-parts{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.works-list-parts .inner{ width: 100%; position: relative; background: #FFF;}
.works-list-parts .inner:nth-child(n+2){ margin-top: 1.5em;}
.works-list-parts .inner{ border-radius: 16px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.08); transition: all 0.3s ease 0s;}
.works-list-parts .inner:hover{ box-shadow: 0 4px 24px rgba(0,0,0,0.16);}
.works-list-parts .inner figure{}
.works-list-parts .inner figure img{ width: 100%; height: auto;}
.works-list-parts .inner header{ padding: 1.0em; padding-bottom: 0;}
.works-list-parts .inner header .date{ font-size: 1.4rem; line-height: 1.2em; color: rgba(51,51,51,0.48);}
.works-list-parts .inner header h2{ font-size: var(--font-sup); line-height: 1.2em; color: var(--clr-blue); margin-top: 0.16em;}
.works-list-parts .inner .column{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.0em; padding: 1.0em; border-top: solid 1px rgba(0,0,0,0.08);}
.works-list-parts .inner .column dl{ width: 46%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end;}
.works-list-parts .inner .column dl dt{ font-size: 1.2rem; color: rgba(51,51,51,0.48);}
.works-list-parts .inner .column dl:last-of-type dd{ font-weight: 600; color: var(--clr-red);}
.works-list-parts .inner a span{ display: none;}
.works-list-parts .inner a:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100;}
p.no-post{ text-align: center;}

/* 作業料金
--------------------------------------------------------------*/
.pricing{}
.pricing section > figure{ width: 100%; background: var(--clr-bgc); border-radius: 16px; padding: 1.0em; margin: 1.5em auto 0;}
.pricing section > figure img{ width: 100%; height: auto;}
.pricing .column03{ margin-top: 3.2em;}
.pricing .column03 .inner{}
.pricing .column03 .inner figure{ width: 100%; margin-top: 1.0em;}
.pricing .column03 .inner figure img{ width: 100%; height: auto;}
.pricing .column03 .inner p{}
.pricing .column03 .inner ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.0em;}
.pricing .column03 .inner ul li{ width: 31%;}
.pricing .column03 .inner ul li:nth-child(n+4){ margin-top: 0.48em;}
.pricing .column03 .inner ul li img{ width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 4px rgba(0,0,0,0.16);}

/* 安心補償 */
.compensation .article figure{ width: 40%; margin: 0px auto;}
.compensation .article figure img{ border-radius: 0;}
.compensation .article .inner{ width: 100%; margin-top: 1.0em;}

/* サービス別料金案内 */
.tab-list { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.tab { border: solid 1px #DDD; border-radius: 8px; padding: 1.0em; line-height: 1.2em; text-align: center; background: #FFF; width: 49%; margin-right: 1%; cursor: pointer; position: relative; transition: color 0.3s;}
.tab:nth-child(n+3){ margin-top: 0.24em;}
.tab:last-child{ margin-right: 0;}
.tab.active { background: var(--clr-blue); color: #FFF; border-color: var(--clr-blue);}

.content { display: none; padding-top: 2.0em;}
.content.show { display: block; animation: fadeIn 0.5s ease;}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px);}
to { opacity: 1; transform: translateY(0);}
}
.content-area .content table{ width: 100%; border: solid 1px #DDD; border-collapse: collapse;}
.content-area .content table thead th{ color: var(--clr-blue); line-height: 1.2em; text-align: center; padding: 1.0em; background: rgba(var(--clr-blue-rgb),0.08); border: solid 1px #DDD; border-collapse: collapse;}
.content-area .content table tbody th{ line-height: 1.2em; padding: 1.0em; background: #F9F9F9; border: solid 1px #DDD; border-collapse: collapse;}
.content-area .content table tbody td{ line-height: 1.2em; padding: 1.0em; text-align: right; border: solid 1px #DDD; border-collapse: collapse;}
.content-area .content table.row02 thead th{ width: 50%;}
.content-area .content table.row04 thead th{ width: 25%;}
.content-area .content h3{ font-size: var(--font-small); color: var(--clr-blue); line-height: 1.2em; margin: 4.0rem 0 1.6rem;}
.content-area .content ul{ margin-top: 0.72em;}
.content-area .content ul li{ font-size: 1.2rem; line-height: 1.2em;}
.content-area .content ul li:nth-child(n+2){ margin-top: 0.4em;}

/* 会社案内
--------------------------------------------------------------*/
/* link */
.menu-list{ display: none;}
.menu-list section{ width: 90%; margin: 0px auto;}
.menu-list section nav ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; border-bottom: solid 1px #DDD; padding: 0 0 1.0em 0;}
.menu-list section nav ul li{ line-height: 1.2em; padding-right: 4.0em;}
.menu-list section nav ul li a{ display: inline-block; color: #333; text-decoration: none; padding-left: 2.4rem; position: relative; line-height: 1.2em;}
.menu-list section nav ul li a:before{ content: "\eaaa"; font-family: "Material Icons"; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 1.8rem; line-height: 1.0em; color: var(--clr-blue);}
.menu-list section nav ul li a:hover{ color: rgba(51,51,51,0.64);}

/* ごあいさつ */
.greeting{}
.contents.greeting.mtn{ padding: 0 !important;}
.greeting h3{ width: 40%; margin: 2.4rem auto 0 0;}
.greeting h3 img{ width: 100%; height: auto;}

/* 会社概要 */
.outline{}
.outline table{ display: inline-block;}
.outline table tr{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.outline table tr th{ width: 100%; padding: 1.0em 0 0; line-height: 1.2em; color: rgba(51,51,51,0.48);}
.outline table tr td{ width: 100%; padding: 0.32em 0 1.0em; line-height: 1.2em; border-bottom: solid 1px #DDD;}
.outline table tr td ul{ padding-left: 1.2em;}
.outline table tr td ul li{ list-style-type: disc; list-style-position: outside;}
.license-image{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.license-image li{ width: 100%;}
.license-image li:nth-child(n+2){ margin-top: 1.0em;}
.license-image li figure img{ width: 100%; height: auto;}
.license-image li figure figcaption{ display: block; text-align: center; font-size: 1.4rem; line-height: 1.2em; margin-top: 0.8em;}
.eco-activities{ background: var(--clr-bgc);}
.eco-activities section p strong{ color: var(--clr-navy);}
.eco-activities .column03{ margin-top: 3.2rem;}
.eco-activities .column03 .inner{}
.eco-activities .column03 .inner h3{ font-size: var(--font-sup); color: var(--clr-blue); padding-bottom: 0.5em; border-bottom: solid 1px rgba(0,0,0,0.16); margin-bottom: 0.5em;}
.eco-activities .column03 .inner h3 span{ display: inline-block; font-size: var(--font-small); margin-right: 0.5em; position: relative; top: 2px;}
.eco-activities dl{ margin-top: 3.2rem; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); padding: 1.5em; border-radius: 24px;}
.eco-activities dl dt{ text-align: center; font-size: var(--font-small); color: var(--clr-blue); font-weight: 700; padding-bottom: 0.8em; margin-bottom: 0.8em; border-bottom: solid 1px #DDD;}
.eco-activities dl dd{ text-align: center;}
.eco-activities dl dd ol{ padding-left: 1.2em; display: inline-block;}
.eco-activities dl dd ol li{ list-style-type: decimal; list-style-position: outside; line-height: 1.2em;}
.eco-activities dl dd ol li:nth-child(n+2){ margin-top: 0.48em;}
.eco-activities dl dd ol li span{ background: var(--clr-yellow);}
.excellent{}
.excellent h2 span{ color: var(--clr-blue)}
.excellent ul{ margin-top: 3.2rem; display: flex; justify-content: space-between; flex-wrap: wrap;}
.excellent ul li{ width: 100%;}
.excellent ul li:nth-child(n+2){ margin-top: 1.0em;}
.excellent ul li img{ width: 100%; height: auto;}

/* メディア実績 */
.media h2.sideHeading span{ display: block; font-size: var(--font-small); line-height: 1.2em;}
.media .column03 figure img{ width: 100%; height: auto; border-radius: 8px; overflow: hidden;}
.media .column03 h2{ font-size: var(--font-sup); color: var(--clr-head); line-height: 1.2em; margin: 1.0em 0 0.5em;}
.media .column03 h2 span{ display: block; font-size: 1.6rem; line-height: 1.2em; margin-bottom: 0.24em;}

/* SDGsへの取り組み */
.sdgs .image{ width: 100%; margin: 0px auto;}
.sdgs .image img{ width: 100%; height: auto;}
.sdgs .article figure{ width: 64%; margin: 0px auto;}
.sdgs .article .inner{ width: 100%; margin-top: 1.5em;}
.sdgs .article:nth-of-type(n+2){ margin-top: 4.8rem;}
.sdgs .article .inner h3{ font-size: var(--font-small); line-height: 1.2em;}
.sdgs .article .inner dl{ margin-top: 1.0em;}
.sdgs .article .inner dl dt{ padding-bottom: 1.0em; margin-bottom: 1.0em; border-bottom: solid 1px #DDD;}
.sdgs .article .inner dl dd{ font-weight: 700;}
.sdgs .article .inner .box{ margin-top: 2.4rem; border: solid 4px #000; border-radius: 8px; padding: 1.0em; padding-top: 1.2em; position: relative;}
.sdgs .article .inner .box h4{ position: absolute; top: -1.0em; left: 1.0em;}
.sdgs .article .inner .box h4 span{ display: inline-block; font-weight: 600; color: #FFF; background: #000; padding: 0.4em 1.2em; line-height: 1.0em; border-radius: 100px;}
.sdgs .article.goal01 h3,
.sdgs .article.goal01 dl dd{ color: #ec1c2e;}
.sdgs .article.goal01 .box{ border-color: #ec1c2e;}
.sdgs .article.goal01 .box h4 span{ background: #ec1c2e;}
.sdgs .article.goal02 h3,
.sdgs .article.goal02 dl dd{ color: #02add8;}
.sdgs .article.goal02 .box{ border-color: #02add8;}
.sdgs .article.goal02 .box h4 span{ background: #02add8;}
.sdgs .article.goal03 h3,
.sdgs .article.goal03 dl dd{ color: #f99f27;}
.sdgs .article.goal03 .box{ border-color: #f99f27;}
.sdgs .article.goal03 .box h4 span{ background: #f99f27;}
.sdgs .article.goal04 h3,
.sdgs .article.goal04 dl dd{ color: #ce8d28;}
.sdgs .article.goal04 .box{ border-color: #ce8d28;}
.sdgs .article.goal04 .box h4 span{ background: #ce8d28;}
.sdgs .article.goal05 h3,
.sdgs .article.goal05 dl dd{ color: #007dc0;}
.sdgs .article.goal05 .box{ border-color: #007dc0;}
.sdgs .article.goal05 .box h4 span{ background: #007dc0;}

/* スタッフ紹介 */
.qualification .column04{ margin-top: 4.0rem;}
.qualification .column04 figure{}
.qualification .column04 figure img{ width: 100%; height: auto;}
.qualification .column04 figure figcaption{ margin-top: 0.5em; line-height: 1.4em;}
.staff .column04 figure{ width: 80%; margin: 0px auto; border-radius: 100%; overflow: hidden;}
.staff .column04 figure img{ width: 100%; height: auto;}
.staff .column04 h3{ text-align: center; font-weight: 700; line-height: 1.2em; padding: 0.8em 0;}
.staff .column04 p{ color: var(--clr-blue); background: var(--clr-bgc); padding: 0.8em; border-radius: 8px;}

/* 求人募集
--------------------------------------------------------------*/

/* 現在募集をしておりません */
.notrecruiting section{ border: solid 1px #DDD; padding-top: 2.5em;}
.notrecruiting section p.align-center{ padding: 0 1.0em; text-align: left;}
.notrecruiting section .backHome{ background: #F6F6F6; padding: 1.5em 0 1.5em; margin-top: 1.5em; text-align: center;}
.notrecruiting section .backHome a{ display: inline-block; background: #666; color: #FFF; border-radius: 4px; text-decoration: none; line-height: 1.0em; padding: 1.0em 3.0em;}
.notrecruiting section .backHome a:hover{ background: #FFF; color: #555;}

/* 求人募集中 */
.message section{}
.message section figure{ width: 64%; margin: 0px auto;}
.message section figure img{ width: 100%; height: auto;}
.message section .inner{ width: 100%; margin-top: 2.0em;}

.requirements table{ width: 100%; border: solid 1px #DDD; border-style: solid none none solid;}
.requirements table tbody tr{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.requirements table tbody th{ width: 100%; padding: 1.0em; line-height: 1.4em; text-align: center; background: #F6F6F6; border: solid 1px #DDD; border-style: none solid solid none;}
.requirements table tbody td{ width: 100%; padding: 1.0em; line-height: 1.4em; border: solid 1px #DDD; border-style: none solid solid none;}

/* お問い合わせ・お見積り依頼
--------------------------------------------------------------*/
.policy{ margin-top: 2.4rem; background: #F4F4F4; padding: 1.0em; height: 240px; overflow: auto; border-radius: 4px;}
.policy h3{ font-weight: 600; line-height: 1.2em;}
.policy p{ margin-top: 0.48em; line-height: 1.4em;}
.policy dl{ margin-top: 1.5em;}
.policy dl dt{ font-weight: 600; margin-top: 1.0em;}
.policy dl dd{ margin-top: 0.48em; line-height: 1.4em;}

/* 404 not found
--------------------------------------------------------------*/
body.error404 .entry-content{}
body.error404 .entry-header h1{ width: 100%; padding: 1.6em 5% 0.4em; font-size: 3.2rem; line-height: 1.2em; text-align: center !important; color: var(--clr-prim); letter-spacing: 0.05em; position: relative; border-top: solid 1px #DDD;}
body.error404 .entry-header h1:after{ content: ""; width: 2.0em; height: 1px; background: var(--clr-prim); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}

section.error404{}
section.error404 h2{ font-size: 6.5rem; line-height: 1.2em; text-align: center; color: rgba(51,51,51,0.4);}
section.error404 h2 strong{ display: block; text-align: center; font-size: 20.0rem; line-height: 1.0em;}
section.error404 p{ text-align: center; margin-top: 2.0em;}

/* post
--------------------------------------------------------------*/

/* category / archive / single */
#archive,
#primary,
#single-post{ width: 90%; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding-block: 4.8rem;}
#archive #archive-list,
#primary #container,
#single-post #detail{ width: 100%; order: 1;}
#archive #secondary,
#primary #secondary,
#single-post #secondary{ width: 100%; order: 2; margin-top: 4.8rem;}

/*　archive/category　*/

/* single */
h2.entry-title{ font-size: var(--font-middle); line-height: 1.2em; color: var(--clr-navy);}
.entry-meta{ margin-top: 1.0em; padding-top: 1.0em; border-top: solid 1px #DDD; display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 4.0rem;}
.entry-meta span{ margin-right: 1.0em; line-height: 1.2em;}
.entry-meta span a{ color: #333; text-decoration: none;}
.entry-meta span a:hover{ color: rgba(51,51,51,0.64);}
article.type-post img{ width: 100%; height: auto;}
article.type-post .entry-content p{ margin-top: 1.0em;}

/* pagenation */
.posts-navigation{ display: none;}
.wp-pagenavi{ margin-top: 4.8rem; display: flex; justify-content: center; flex-wrap: wrap;}
.wp-pagenavi a,
.wp-pagenavi span{ font-size: 1.6rem; line-height: 2.4rem; min-width: 3.2rem; text-align: center; padding: 0.5em !important; margin: 0 2px !important; border: solid 1px #DDD !important; border-radius: 2px;}
.wp-pagenavi span.current{ border-color: #CCC !important; background: #EEE; font-weight: normal !important;}
.wp-pagenavi a:hover{ background: #999 !important; color: #FFF !important; border-color: #888 !important;}

/* side navigation */
.widget{ margin-top: 4.0rem; padding: 1.0em; padding-top: 0.5em; background: var(--clr-bgc); border-radius: 8px;}
.widget:nth-child(1){ margin-top: 0;}
.widget h2{ line-height: 1.2em; padding: 0.8em 0; border-bottom: solid 1px rgba(0,0,0,0.08); padding-left: 1.4em; position: relative;}
.widget h2:before{ content: "\e241"; font-family: "Material Icons"; color: var(--clr-blue); position: absolute; top: 53%; left: 0; transform: translateY(-50%);}
.widget ul{ margin-top: 0.5em;}
.widget ul li{ border-bottom: solid 1px rgba(0,0,0,0.04); padding: 0.8em 0; padding-right: 1.0em; position: relative;}
.widget ul li:last-child{ border-bottom: none;}
.widget ul li span{ display: block; font-size: 1.2rem; line-height: 1.2em; color: var(--clr-blue); margin-bottom: 0.24em;}
.widget ul li a{ display: block; font-size: 1.4rem; line-height: 1.2em; color: #666; text-decoration: none;}
.widget ul li a:hover{ color: var(--clr-blue);}
.widget ul li:after{ content: "\e5e1"; font-family: "Material Icons"; color: rgba(51,51,51,0); font-size: 1.0rem; position: absolute; top: 50%; right: 0.4em; transform: translateY(-50%); transition: all 0.3s ease 0s;}
.widget ul li:hover:after{ right: 0; color: var(--clr-blue);}

.widget.widget_recent_entries_img ul li{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.widget.widget_recent_entries_img ul li a.thumb-link{ width: 23.5%; padding-bottom: 23.5%; position: relative; overflow: hidden;}
.widget.widget_recent_entries_img ul li a.thumb-link img{ width: auto; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.widget.widget_recent_entries_img ul li .text-box{ width: 72.5%;}

/* next back */
.post-navigation{ width: 100%; margin: 0px auto;}
.nav-links{ display: flex; justify-content: space-between; flex-wrap: wrap; border-top: double 3px #E4E4E4; padding-top: 2.0rem; margin: 0px auto;}
.nav-previous .nav-subtitle,
.nav-next .nav-subtitle{ display: none;}
.nav-previous a,
.nav-next a{ color: #333; text-decoration: none; display: inline-block; position: relative;}
.nav-previous a:hover,
.nav-next a:hover{ color: rgba(51,51,51,0.6);}
.nav-previous a:before{ content: "\e5e1"; font-family: "Material Icons"; color: var(--clr-prim); padding-right: 0.5em;}
.nav-next a:after{ content: "\e5e1"; font-family: "Material Icons"; color: var(--clr-prim); padding-left: 0.5em;}

/* contact form
--------------------------------------------------------------*/
article.contents.form{ background: var(--clr-bgc);}
.wpcf7{ width: 100%; margin: 0px auto;}
span.red{ color: #FF0000; font-weight: 600;}

.wpcf7-form{}
.wpcf7-form dl{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.wpcf7-form dl dt{ width: 100%; padding: 1.2em 0 0; position: relative; display: flex; flex-wrap: wrap; align-items: center;}
.wpcf7-form dl dt .require{ font-size: 1.4rem; line-height: 1.2em; font-weight: 700; color: #FF0000; margin-left: 0.5em;}
.wpcf7-form dl dt span{ display: inline-block; position: relative;}
.wpcf7-form dl dt span:after{ content: "必須"; font-size: 1.0rem; line-height: 1.0em; word-break: keep-all; background: var(--clr-blue); padding: 0.24em; border-radius: 2px; position: absolute; top: 50%; left: calc(100% + 1.0em); transform: translateY(-50%); color: #FFF;}
.wpcf7-form dl dt em{ display: block; font-size: 1.4rem; line-height: 1.2em; font-style: normal;}
.wpcf7-form dl dd{ width: 100%; padding: 0.32em 0 1.2em 0; border-bottom: solid 1px rgba(0,0,0,0.08);}
.wpcf7-form dl dd input[type="tel"],
.wpcf7-form dl dd input[type="text"],
.wpcf7-form dl dd input[type="email"],
.wpcf7-form dl dd textarea{ border: solid 1px #CCC; background: #FFF; padding: 0.64em; border-radius: 2px; transition: all 0.3s ease 0s; width: 100%;}
.wpcf7-form dl dd input[type="tel"]:focus,
.wpcf7-form dl dd input[type="text"]:focus,
.wpcf7-form dl dd input[type="email"]:focus,
.wpcf7-form dl dd textarea:focus{ outline: none; background: #FFF; border: solid 1px #AAA;}
.wpcf7-form dl dd input.wpcf7-not-valid,
.wpcf7-form dl dd textarea.wpcf7-not-valid{}
.wpcf7-form dl dd ul li{ display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.wpcf7-form dl dd ul li:nth-child(n+2){ margin-top: 1.2em;}
.wpcf7-form dl dd ul li span:first-child{ width: 10.0em;}
.wpcf7-form div{ margin-top: 2.0em; text-align: center;}
.wpcf7-form div p{}
.wpcf7-form div span.wpcf7-list-item-label{ display: inline-block; margin-top: 1.0em;}
.wpcf7-form-control.wpcf7-checkbox{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item{ margin-left: 0px; width: 40%;}
.wpcf7-form-control.wpcf7-acceptance.optional .wpcf7-list-item{ margin-left: 0px;}
.wpcf7-not-valid-tip{ font-size: 1.4rem !important; line-height: 1.2em !important; font-weight: 600; color: #FF0000 !important; margin-top: 0.5em;}
.wpcf7-list-item.first{ margin-left: 0;}

span.wpcf7-list-item{ display: block; margin: 0;}

.wpcf7-spinner{ display: none !important;}
.submit-container{ text-align: center; margin-top: 2.0em;}
.submit-container input[type="button"]{ background: #EEE; border-color: #E4E4E4; font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 2.0em; cursor: pointer; border-radius: 8px; margin-right: 2.0em;}
.submit-container input[type="submit"]{ background: var(--clr-red); color: #FFF; border-color: var(--clr-red); font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 4.0em; cursor: pointer; border-radius: 8px;}

.wpcf7-response-output{ text-align: center; background: #FFF;}

/* Forms
========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { overflow: visible;}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { text-transform: none;}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button;}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] { box-sizing: border-box; padding: 0;}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto;}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px;}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
#wrapper{ width: 100%; margin: 0px auto; position: relative; overflow: hidden;}

/* header */
header#masthead{ width: 100%; padding: 1.6rem 2%;}
header#masthead section{}
header#masthead section .site-title{ width: 72%; margin: 0 auto 0 0;}
header#masthead section .site-title img{ width: 100%; height: auto;}
header#masthead section .header-info{ display: none;}

/* footer */
footer#colophon{ background: var(--clr-ftc); padding: 2.4rem 0;}
footer#colophon section{ width: 90%; margin: 0px auto; text-align: center;}
footer#colophon section nav{ display: none;}
footer#colophon section h2{}
footer#colophon section h2 a{ display: block; width: 72%; margin: 0px auto;}
footer#colophon section h2 img{ width: 100%; height: auto;}
footer#colophon section .column{ margin-top: 2.4rem; display: flex; justify-content: space-between; flex-wrap: wrap;}
footer#colophon section .partner-link{ border: solid 1px rgba(255,255,255,0.16); padding: 0.64em; width: 100%;}
footer#colophon section .partner-link dt{ font-weight: 600; font-size: 1.4rem; line-height: 1.0em; color: #FFF; padding-bottom: 0.8em; border-bottom: solid 1px rgba(255,255,255,0.16);}
footer#colophon section .partner-link dd{ font-size: 1.4rem; line-height: 1.6em; margin-top: 1.2em; color: #FFF;}
footer#colophon section .partner-link dd ul{}
footer#colophon section .partner-link dd ul li{ font-size: 1.4rem; line-height: 1.2em;}
footer#colophon section .partner-link dd ul li:nth-child(n+2){ margin-top: 0.8em;}
footer#colophon section .partner-link dd ul li a{ display: inline-block; color: #FFF; text-decoration: none; padding-right: 1.2em; position: relative;}
footer#colophon section .partner-link dd ul li a span{ display: block; font-size: 1.0rem; line-height: 1.2em;}
footer#colophon section .partner-link dd ul li a:hover{ color: rgba(255,255,255,0.72); text-decoration: underline;}
footer#colophon section .partner-link dd ul li a:after{ content: "\e89e"; font-family: "Material Icons"; position: absolute; bottom: 0; right: 0;}
footer#colophon section .ftlicense{ border: solid 1px rgba(255,255,255,0.16); padding: 0.64em; width: 100%; margin-top: 2.4rem;}
footer#colophon section .ftlicense dt{ font-weight: 600; font-size: 1.4rem; line-height: 1.0em; color: #FFF; padding-bottom: 0.8em; border-bottom: solid 1px rgba(255,255,255,0.16);}
footer#colophon section .ftlicense dd{ font-size: 1.4rem; line-height: 1.6em; margin-top: 0.8em; color: #FFF;}
footer#colophon section .inner{ width: 100%; margin-top: 2.4rem;}
footer#colophon section .inner h3{ margin-bottom: 0.8em;}
footer#colophon section .inner h3:nth-of-type(2){ margin-top: 2.4rem;}
footer#colophon section .inner h3 span{ display: inline-block; font-size: 1.2rem; line-height: 1.0em; color: var(--clr-ftc); background: rgba(255,255,255,0.64); padding: 0.24em 0.8em; border-radius: 100px;}
footer#colophon section .inner .credit-list{ display: flex; justify-content: space-between; flex-wrap: wrap;}
footer#colophon section .inner .credit-list li{ width: 15%;}
footer#colophon section .inner .credit-list li img{ width: 100%; height: auto;}
footer#colophon section .inner .security{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
footer#colophon section .inner .security dt{ width: 23.5%;}
footer#colophon section .inner .security dt img{ width: 100%; height: auto;}
footer#colophon section .inner .security dd{ width: calc(100% - 23.5%); padding-left: 1.0em; font-size: 1.4rem; line-height: 1.4em; font-weight: 700; color: #FFF;}
footer#colophon section .inner .security dd strong{ font-size: 2.0rem; font-weight: 700; color: var(--clr-yellow);}
footer#colophon .copyright{ font-size: 1.4rem; line-height: 1.2em; text-align: center; color: #FFF; padding-top: 4.0rem;}

/* ====================================
 フッター固定CTA（外枠の制御）
 ==================================== */
.c-footer-cta { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9000; transform: translateY(100%); transition: transform 0.4s ease; box-shadow: 0 0 8px rgba(0,0,0,0.16);}
.c-footer-cta.is-visible { transform: translateY(0);}

#footer-cta{ background: #FFF; padding: 0;}
#footer-cta section{ width: 100%; margin: 0px auto;}
#footer-cta section dl{ display: none;}
#footer-cta section dl dt{ font-size: var(--font-sup); font-weight: 700; color: var(--clr-blue); line-height: 1.2em;}
#footer-cta section dl dd{ font-weight: 700; line-height: 1.2em; margin-top: 0.24em;}
#footer-cta section ul{ display: none;}
/*#footer-cta section ul li{ width: 50%;}
#footer-cta section ul li.phone{ display: none;}
#footer-cta section ul li.button{}
#footer-cta section ul li.button a{ display: block; text-align: center; color: #FFF; background: #000; text-decoration: none; line-height: 1.2em; padding: 1.0em;}
#footer-cta section ul li.button a:hover{}
#footer-cta section ul li.button a span{ display: block; text-align: center; font-size: 1.2rem; line-height: 1.2em;}
#footer-cta section ul li.button a strong{ padding-left: 1.4em; display: inline-block; color: var(--clr-yellow); font-weight: 700; position: relative;}
#footer-cta section ul li.button.contact a{ background: var(--clr-red);}
#footer-cta section ul li.button.line a{ background: #39ae41;}
#footer-cta section ul li.button.contact a:hover{ background: #C3232C;}
#footer-cta section ul li.button.line a:hover{ background: #2E8B34;}
#footer-cta section ul li.button.contact a strong:before{ content: "\e158"; font-family: "Material Icons"; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
#footer-cta section ul li.button.line a strong:before{ content: "\e0b7"; font-family: "Material Icons"; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}*/
#footer-cta section ol{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#footer-cta section ol li{ width: 25%;}
#footer-cta section ol li.phone{ width: 50%;}
#footer-cta section ol li img{ width: 100%; height: auto;}

/* ====================================
 ハンバーガーボタン
 ==================================== */
.c-hamburger { position: fixed; top: 1.6rem; right: 1.6rem; z-index: 9999; width: 40px; height: 40px; border-radius: 100%; border: none; cursor: pointer; appearance: none; outline: none; background: var(--clr-navy);}
.c-hamburger__line { display: block; position: absolute; left: 12px; width: 16px; height: 1px; background-color: #FFF; transition: all 0.4s; border-radius: 0;}
.c-hamburger__line:nth-of-type(1) { top: 16px;}
.c-hamburger__line::before,
.c-hamburger__line::after { content: ""; display: block; position: absolute; width: 100%; height: 1px; background-color: inherit; transition: inherit;}
.c-hamburger__line::before { top: 4px;}
.c-hamburger__line::after { top: 8px;}
.c-hamburger.is-active .c-hamburger__line { background-color: transparent;}
.c-hamburger.is-active .c-hamburger__line::before { top: 4px; background-color: #fff; transform: rotate(45deg);}
.c-hamburger.is-active .c-hamburger__line::after { top: 4px; background-color: #fff; transform: rotate(-45deg);}
.c-hamburger.is-active .c-hamburger__text { opacity: 0;}

/* ====================================
 全画面ナビゲーション（背景マスク）
 ==================================== */
.p-global-nav { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,39,91,0.96); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; display: flex; align-items: center; justify-content: center;}
.p-global-nav.is-active { opacity: 1; visibility: visible;}

/* ====================================
 メニューリストのデザイン
 ==================================== */
.p-global-nav__inner{ width: 80%; margin: 0px auto;}
.p-global-nav__list {}
.p-global-nav__list li { line-height: 1.0; opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s;}
.p-global-nav__list li:nth-of-type(n+2){ margin-top: 4px;}
.p-global-nav__list li a{ display: block; color: #fff; text-decoration: none; padding: 0.72em 0 0.72em 1.2em; position: relative; border-bottom: solid 1px rgba(255,255,255,0.16);}
.p-global-nav__list li a:hover{ color: rgba(255,255,255,0.72);}
.p-global-nav__list li a:before{ content: "\e315"; font-family: "Material Icons"; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.p-global-nav__list li ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0.8em 0; padding-left: 1.2em;}
.p-global-nav__list li ul li{ width: 100%; font-size: 1.4rem; line-height: 1.0; margin: 0;}
.p-global-nav__list li ul li:nth-child(n+2){ margin-top: 4px;}
.p-global-nav__list li ul li a{ padding: 0.72em 1.2em 0.72em 1.2; position: relative; background: rgba(255,255,255,0.08); border: solid 1px rgba(255,255,255,0.24); border-radius: 100px;}
.p-global-nav__list li ul li a:hover{ background: #FFF; border-color: #FFF; color: var(--clr-navy);}
.p-global-nav__list li ul li a:before{ content: "\e315"; font-family: "Material Icons"; position: absolute; top: 55%; left: auto; right: 1.0em; transform: translateY(-50%);}
.p-global-nav.is-active .p-global-nav__list li{ opacity: 1; transform: translateY(0);}

/* ====================================
 文字サイズ変更機能
 ==================================== */

/* 1. デフォルト（スマホ・タブレット縦 768px未満）の設定 */
.font-size-switcher { display: none;}

/* 2. PC（768px以上）での設定 */
@media screen and (min-width: 768px) { 
.font-size-switcher { display: flex; align-items: center; gap: 5px; margin-right: 20px;}
.font-size-switcher__label { font-size: 1.0rem; font-weight: bold; margin-right: 5px; color: #333;}
.font-size-switcher__btn { background: #fff; border: 1px solid #ccc; padding: 4px 12px; font-size: 1.4rem; cursor: pointer; transition: all 0.3s ease; border-radius: 4px; color: #333;}
.font-size-switcher__btn:hover { background: #f0f0f0;}
.font-size-switcher__btn.is-active { background: #555; color: #fff; border-color: #555; pointer-events: none;}
body.is-text-large main { font-size: 2.0rem; line-height: 1.8em;}
}

/* ====================================
 ページ遷移アニメーション（ロゴ・バー付き）
 ==================================== */

/* 1. 全画面を覆う白い幕 */
.c-transition-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #fff; z-index: 10000; pointer-events: none; opacity: 1; transition: opacity 0.8s ease; display: flex; align-items: center; justify-content: center;}
.c-transition-overlay__content { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%;}
.c-transition-overlay__logo { width: 200px;}
.c-transition-overlay__logo img { width: 100%; height: auto; display: block;}
.c-loading-bar { width: 200px; height: 2px; background-color: #CCC; overflow: hidden; border-radius: 2px;}
.c-loading-bar__progress { width: 100%; height: 100%; background-color: var(--clr-blue); transform-origin: left; transform: scaleX(1);}

/* ====================================
 レスポンシブ設定（PC用）
 ==================================== */
@media screen and (min-width: 768px) {
.c-transition-overlay__logo,
.c-loading-bar { width: 300px;}
}

/* ====================================
 【読み込み完了時】幕を消し、コンテンツを表示（前回から変更なし）
 ==================================== */
body.is-page-loaded .c-transition-overlay { opacity: 0; pointer-events: none;}
body.is-page-loaded #wrapper { filter: blur(0); opacity: 1;}

/* ====================================
 【離脱時（リンククリック時）】のアニメーション制御
 ==================================== */
body.is-page-leaving .c-transition-overlay { opacity: 1; pointer-events: auto;}

/* 離脱時だけ、バーが伸びるアニメーションを適用 */
body.is-page-leaving .c-loading-bar__progress { animation: progressGrow 0.8s linear forwards;}
@keyframes progressGrow {
0% { transform: scaleX(0);}
100% { transform: scaleX(1);}
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.menu-navigation-container{ display: none;}
#site-navigation{}
#primary-menu{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#primary-menu li{position: relative;}
#primary-menu li a{ display: block; position: relative; cursor: pointer;}
#primary-menu li a:hover{}
#primary-menu li ul{ display: block; position: absolute; width: 100%; top: 110%; left: 0; nowhitespace: afterproperty; opacity: 0; transition: all 0.3s ease 0s; visibility: hidden; z-index: 100; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16);}
#primary-menu li:hover ul{ top: 100%; margin: 0; opacity: 1; visibility: visible;}
#primary-menu li ul li{}
#primary-menu li ul li a{ display: block;}
#primary-menu li ul li a:hover{}
.menu-toggle { display: none;}

/* Posts and pages
--------------------------------------------- */
.sticky { display: block;}
.post,
.page {}
.updated:not(.published) { display: none;}
.page-content,
.entry-content,
.entry-summary { margin: 0 auto;}
.entry-content{ padding: 0;}
.page-links { clear: both; margin: 0 0 1.5em;}

/* Comments
--------------------------------------------- */
.comment-content a { word-wrap: break-word;}
.bypostauthor { display: block;}

/* Widgets
--------------------------------------------- */
.widget {}
.widget select { max-width: 100%;}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0;}

/* Make sure logo link wraps around logo image. */
.custom-logo-link { display: inline-block;}

/* Captions
--------------------------------------------- */
.wp-caption { margin-bottom: 1.5em; max-width: 100%;}
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto;}
.wp-caption .wp-caption-text { margin: 0.8075em 0;}
.wp-caption-text { text-align: center;}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none;}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer { display: block;}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;}
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus { outline: 0;}

/* Alignments
--------------------------------------------- */
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em;}
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em;}
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em;}

/* pagination
--------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; margin: 4.0rem 0; position: relative; font-size: 12px;}
.pagination span,
.pagination a { display: block; width: auto; margin: 4px; padding: 8px; border: 1px solid #555; color: #333; text-decoration: none; text-align: center; line-height: 16px; border-radius: 4px;}
.pagination .pager { width: 32px;}
.pagination a:hover,
.pagination .current { color: #fff; border-color: #555; background-color: #555;}
.pagination a.prev { margin-right: 16px;}
.pagination a.next { margin-left: 16px;}
.pagination a.first {}
.pagination a.last {}
.pagination span.page_num { display: none;}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); line-height: 1; padding: 0.6em 1em 0.4em;}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover { border-color: #ccc #bbb #aaa;}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus { border-color: #aaa #bbb #bbb;}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px;}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus { color: #111;}
select { border: 1px solid #ccc;}
textarea { width: 100%;}

/*=============================================================
	common
=============================================================*/
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size: 1.6rem;
	line-height: 1.6em;
	font-family: YakuHanJP, "Helvetica Neue", Arial,"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", sans-serif;
	font-optical-sizing: auto;
	color: #333;
	background: #FFF;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position:relative;
}

a{color: rgba(51,51,51,1.0); text-decoration:underline; transition: all 0.3s ease 0s;}
a:hover{color: rgba(51,51,51,0.64); text-decoration:none;}

/*=============================================================
	reset
=============================================================*/
html { height:100%; font-size:62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,img,p{ margin: 0px; padding: 0px; font-weight: 400;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{ text-align: left; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
caption,th { text-align: left;}
q:before,q:after { content: '';}
img,
object,
embed { vertical-align: top;}
legend{ display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
img,abbr,acronym,fieldset{ border:none;}
li{ list-style-type: none;}
svg{ fill: currentColor;}
input[type="submit"]{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}
figure{ margin-bottom: 0;}

/*---------- align ----------*/
.align-left{ text-align: left;}
.align-right{ text-align: right;}
.align-center{ text-align: center;}

/*----- clearfix -----*/
.container,
.clearfix { zoom:1;}
.container:after,
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}