/*!
Theme Name: canvas
Theme URI: http://underscores.me/
Author: 株式会社 キャンバス
Author URI: https://canvas-web.jp/
Description: キャンバスは京都・舞鶴を拠点にWeb・デザインを手がける制作会社です。
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";

@media screen and (max-width: 767px) {
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* index */
#toppage{}

/* static */
#static{}

/* category / archive / single */
#archive,
#primary,
#single-post{ width: 90%; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
#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: 8.0rem; padding-bottom: 8.0rem;}

/* 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;}

/* fonts aset */
.num,
.choice-label strong{ font-family: "Barlow Condensed", sans-serif; font-weight: 400; font-style: normal;}
.en{ font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;}
.mincho,
h2#result-title,
.widget h2.widget-title,
#single-post h1.entry-title,
#archive-list h2.entry-title{ font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal;}

/* common */
.pcbr{ display: block;}
.spbr{ display: none;}

/* fade-up の移動距離を控えめに（20px） */
[data-aos="fade-up"] { transform: translateY(20px);}
[data-aos="fade-up"].aos-animate { transform: translateY(0);}

/*--------------------------------------------------------------
# top page
--------------------------------------------------------------*/
#opening-mask { pointer-events: none;}
#page-black-overlay { position: fixed; inset: 0; background: #000; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.8s ease;}
#page-black-overlay.active { opacity: 1; pointer-events: auto;}
#page-black-overlay.fade-out { opacity: 0; pointer-events: none; transition: opacity 1s ease;}

body.home .entry-header{ display: none;}

main#toppage article.contents{ width: 100%; margin: 0px auto; padding: 4.0rem 0;}
main#toppage article.contents:nth-of-type(1){ padding-top: 8.0rem;}
main#toppage article.contents:last-of-type{ padding-bottom: 8.0rem;}
main#toppage article.contents section{ width: 90%; margin: 0px auto; position: relative;}
main#toppage article.contents p{ margin-top: 1.0em;}

.lead-more{ width: 72%; margin: 2.0em auto 0 !important;}
.lead-more a{ display: block; color: #333; text-decoration: none; line-height: 1.0em; font-weight: 600; background: #ededea; padding: 1.3em 0; text-align: center;}
.lead-more a:hover{ background: #FFF; color: #333; box-shadow: 0 0 8px rgba(0,0,0,0.16);}

/* slideshow */
.fade-slider{ position: relative; width: 100%; aspect-ratio: 1000 / 688; overflow: hidden; background: #000;}
.fade-slider:before{ content: ""; width: 100%; height: 50%; background-image: linear-gradient(#000000a3, transparent); position: absolute; top: 0; left: 0; z-index: 1;}
.fade-slider h2{ font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal; font-size: 2.4rem; line-height: 1.0em; color: #FFF; text-shadow: 0 0 8px rgba(0,0,0,0.4); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100; word-break: keep-all; opacity: 0; letter-spacing: 0em; will-change: opacity, transform, letter-spacing; animation: h2-reveal 1.5s ease-out 0.8s both; width: 100%; text-align: center;}
@keyframes h2-reveal{
0%{ opacity: 0; transform: translate(-50%,-50%); letter-spacing: 0em;}
100%{ opacity: 1; transform: translate(-50%,-50%); letter-spacing: 0.2em;}
}
.fade-slides{ list-style: none; margin: 0; padding: 0; position: relative; width: 100%; height: 100%;} 
.fade-slide{ position: absolute; inset: 0; opacity: 0; transition: opacity 1500ms ease;} 
.fade-slide.is-active{ opacity: 1;} 
.fade-slide.is-next{ opacity: 1;} 
.fade-slide.is-leaving{ opacity: 0;} 
.fade-slide img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 8000ms linear; will-change: opacity, transform;}

/* home navigation */
.home-navi{ background: var(--clr-bg); padding: 1.0rem;}
.home-navi ul{ display: flex; gap: clamp(8px, 1.5vw, 16px); width: 100%; margin: 0; padding: 0; list-style: none; flex-wrap: wrap;}
.home-navi li{ flex: 0 0 calc((100% - 8px) / 2); width: calc((100% - 8px) / 2); min-width: 0; transition: flex-grow 0.35s ease; position: relative; background-size: cover; background-position: center;}
.home-navi li a{ min-height: 200px; display: flex; width: 100%; color: #FFF; text-decoration: none; align-items: flex-start; justify-content: center; padding: 0; position: relative;}
.home-navi li a:after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100;}
.home-navi li a span{ font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal; font-size: 1.6rem; display: inline-block; writing-mode: vertical-rl; text-orientation: upright; line-height: 1; letter-spacing: 0.08em; padding: 1.0em 0 0; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; position: relative; z-index: 100; transition: all 0.3s ease 0s;}
.home-navi li:hover a span{ color: #111;}
.home-navi ul:hover li{ flex-grow: 1;}
.home-navi ul:hover li:hover{ flex-grow: 1.4;}
.home-navi ul li:nth-child(1){ background-image: url("images/home/navigation_01.webp");}
.home-navi ul li:nth-child(2){ background-image: url("images/home/navigation_02.webp");}
.home-navi ul li:nth-child(3){ background-image: url("images/home/navigation_03.webp");}
.home-navi ul li:nth-child(4){ background-image: url("images/home/navigation_04.webp");}
.home-navi ul li:nth-child(5){ background-image: url("images/home/navigation_05.webp");}
.home-navi ul li:nth-child(6){ background-image: url("images/home/navigation_06.webp");}
.home-navi ul li:before{content: ""; position: absolute; inset: 0; background: #000; opacity: .45; transition: opacity .35s ease; pointer-events: none; z-index: 1;}
.home-navi ul li:hover:before{ opacity: 0.0;}
.home-navi ul li:after{ content: ""; width: 3.0em; height: 100%; background: rgba(74,71,66,0.64); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; transition: all 0.3s ease 0s;}
.home-navi ul li:hover:after{ background: rgba(255,255,255,0.8);}
.home-navi ul li span:before{ content: ""; width: 24px; height: 24px; display: inline-block; margin-bottom: 0.5em;}
.home-navi ul li:nth-child(1) span:before{ background: url("images/home/icon_01.svg") no-repeat; background-size: cover;}
.home-navi ul li:nth-child(2) span:before{ background: url("images/home/icon_02.svg") no-repeat; background-size: cover;}
.home-navi ul li:nth-child(3) span:before{ background: url("images/home/icon_03.svg") no-repeat; background-size: cover;}
.home-navi ul li:nth-child(4) span:before{ background: url("images/home/icon_04.svg") no-repeat; background-size: cover;}
.home-navi ul li:nth-child(5) span:before{ background: url("images/home/icon_05.svg") no-repeat; background-size: cover;}
.home-navi ul li:nth-child(6) span:before{ background: url("images/home/icon_06.svg") no-repeat; background-size: cover;}

/* 千年翠 箱庭について */
.contents.home-intro h2{ font-size: 2.4rem; line-height: 1.2em; text-align: center;}
.contents.home-intro p{}

.parallax{ display: block; width: 100%; height: 184px; background-image: url("images/home/parallax.webp"); background-size: cover; background-position: center; background-attachment: fixed; overflow: hidden; position: relative; z-index: -1;}
.parallax:before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; z-index: 10;}
.parallax.sec01{ background-image: url("images/home/parallax_02.webp"); background-size: cover; background-position: center; background-attachment: fixed;}
.parallax.sec01{}

/* サービス紹介 */
.home-service .column{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.0em;}
.home-service .column .inner{ width: 100%;}
.home-service .column .inner:nth-child(n+2){ margin-top: 4.0rem;}
.home-service .column .inner figure img{ width: 100%; height: auto; box-shadow: 0 2px 16px rgba(0,0,0,0.16);}
.home-service .column .inner h3{ font-size: 2.0rem; line-height: 1.2em; padding: 0.8em 0 0;}
.home-service .column .inner p{ padding: 0;}
.home-service .column .inner a{ display: inline-block; line-height: 1.2em; margin: 0.5em 0 0; padding: 0.8em 1.2em; padding-right: 2.0em; position: relative; text-decoration: none; background: #ededea; color: #333;}
.home-service .column .inner a:hover{ color: #FFF; background: #333;}
.home-service .column .inner a:after{ content: "\e8e4"; font-family: "Material Icons"; position: absolute; top: 50%; right: 0.5em; transform: translateY(-50%);}

/* banner */
.home-banner{ display: none;}
.home-banner ul{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 72%; margin: 0px auto;}
.home-banner ul li{ width: 100%; position: relative; box-shadow: 0 0 16px rgba(0,0,0,0.16); transition: all 0.6s ease 0s;}
.home-banner ul li:nth-child(n+2){ margin-top: 1.0em;}
.home-banner ul li:nth-child(1){ background: url("images/home/banner_bg_01.webp") no-repeat center center; background-size: 100%;}
.home-banner ul li:nth-child(2){ background: url("images/home/banner_bg_02.webp") no-repeat center center; background-size: 100%;}
.home-banner ul li:nth-child(3){ background: url("images/home/banner_bg_03.webp") no-repeat center center; background-size: 100%;}
.home-banner ul li:nth-child(1):hover,
.home-banner ul li:nth-child(2):hover,
.home-banner ul li:nth-child(3):hover{ background-size: 120%;}
.home-banner ul li a{ display: block; width: 100%; padding-bottom: 100%; background: rgba(255,255,255,0.56);}
.home-banner ul li a:hover{ color: #FFF; background: rgba(0,0,0,0.4);}
.home-banner ul li a span{ width: 100%; display: block; position: absolute; bottom: 0; left: 0;}
.home-banner ul li a span em{ display: block; font-style: normal; text-align: center; font-size: 2.4rem; line-height: 1.0em; padding: 1.5em; position: relative; z-index: 10;}
.home-banner ul li a span em:before{ content: ""; width: 100%; height: 100%; background-image: linear-gradient(transparent, #000); position: absolute; bottom: 0; left: 0; z-index: -1; opacity: 0.0; transition: all 0.3s ease 0s;}
.home-banner ul li a:hover span em:before{ opacity: 1.0;}
.home-banner ul li a span em:after{ content: ""; width: 100%; height: 100%; background-image: linear-gradient(transparent, #ffffff); position: absolute; bottom: 0; left: 0; z-index: -1; transition: all 0.3s ease 0s;}
.home-banner ul li a:hover span em:after{ opacity: 0.0;}

/* 施工事例 */
.contents.home-works .works-list{ padding: 0 !important; margin: 2.4rem auto !important;}

/* コラム・お知らせ */
.home-news{ position: relative;}
.home-news section{ position: relative; z-index: 1;}
.home-news:before{ content: ""; width: 100%; height: 100%; background: rgba(var(--clr-bg-rgb),0.4); border-radius: 40px 0 0 0; position: absolute; top: 0; left: 0; z-index: 0;}
.news-list{ width: 100%; margin: 1.0em auto 0;}
.news-list li{ border-bottom: solid 1px rgba(0,0,0,0.08); padding: 1.0em 0;}
.news-list li span.news-date{ display: inline-block; width: 7.0em; color: rgba(51,51,51,0.48);}
.news-list li span.news-cat{ display: inline-block; font-size: 1.2rem; line-height: 1.0em; background: #EEE; border-radius: 100px; padding: 0.4em 0; min-width: 7.0em; text-align: center;}
.news-list li span.news-cat.category-information,
.news-list li span.news-cat.category-notice{ background: #A0CF89;}
.news-list li span.news-cat.category-column{ background: #E5DD8B;}
.news-list li a{ display: block;}

/*--------------------------------------------------------------
# middle page
--------------------------------------------------------------*/
#page-title{ width: 100%; padding: 12.0rem 0 4.0rem 0; background: #666; position: relative;}
#page-title h2{ width: 90%; margin: 0px auto; font-size: 2.4rem; line-height: 1.0em; color: #FFF; text-shadow: 0 0 8px rgba(0,0,0,0.4); text-align: center; position: relative; z-index: 100; font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal;}
#page-title:before{ content: ""; width: 100%; height: 100%; background-image: linear-gradient(#000000a3, transparent); position: absolute; top: 0; left: 0; z-index: 1;}

body#service #page-title{ background: url("images/promo/service.webp") no-repeat center center; background-size: 100%;}
body#rentalgreen #page-title{ background: url("images/promo/rentalgreen.webp") no-repeat center center; background-size: 100%;}
body#flow #page-title{ background: url("images/promo/flow.webp") no-repeat center center; background-size: 100%;}
body#faq #page-title{ background: url("images/promo/faq.webp") no-repeat center center; background-size: 130%;}
body#interview #page-title{ background: url("images/promo/interview.webp") no-repeat center center; background-size: 100%;}
body#about #page-title{ background: url("images/promo/about.webp") no-repeat center center; background-size: 100%;}
body#contact #page-title,
body#thanks #page-title{ background: url("images/promo/contact.webp") no-repeat center center; background-size: 100%;}
body#works #page-title,
body.works-template-default #page-title,
body.post-type-archive-works #page-title{ background: url("images/promo/works.webp") no-repeat center center; background-size: 100%;}
body.category-information #page-title,
body.single-format-standard #page-title,
body.category-column #page-title,
body.category-notice #page-title{ background: url("images/promo/information.webp") no-repeat center center; background-size: 100%;}

/*----- layout -----*/
.half{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.half.alc{ align-items: center;}
.half.mt{ margin-top: 4.0rem;}
.half figure{ width: 100%;}
.half figure img{ width: 100%; height: auto; box-shadow: 0 2px 16px rgba(0,0,0,0.16);}
.half .inner{ width: 100%; margin-top: 1.0em;}

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

main#static article.contents{ width: 100%; margin: 0px auto; position: relative; padding: 4.0rem 0;}
main#static article.contents:nth-of-type(1){ padding-top: 8.0rem;}
main#static article.contents:last-of-type{ padding-bottom: 8.0rem;}
main#static article.contents section{ width: 90%; margin: 0px auto; position: relative;}
main#static article.contents p{ margin-top: 1.0em;}

/* common
--------------------------------------------------------------*/
h2.heading{ font-size: 2.4rem; line-height: 1.2em; text-align: center;}

article.contents.intro{}
article.contents.intro h2{ font-size: 2.4rem; line-height: 1.2em; text-align: center;}
article.contents.intro p{}

/* サービス紹介
--------------------------------------------------------------*/
.anchor{ display: none;}

.service .half .inner h2{ font-size: 3.2rem; line-height: 1.2em;}
.service .half .inner h3{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600; color: var(--clr-gr); margin-top: 1.6rem;}
.service .column03{ margin-top: 4.0rem; position: relative; z-index: 10;}
.service .column03 .inner h4{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600;}
.service .column03 .inner h4 br{ display: none;}
.service .column03 .inner figure{ margin-top: 1.0em;}
.service .column03 .inner figure img{ width: 100%; height: auto; box-shadow: 0 2px 16px rgba(0,0,0,0.16);}

#garden .column03:after{ content: "Landscape Construction"; font-family: "Square Peg", cursive; font-weight: 400; font-style: normal; font-size: 4.8rem; line-height: 1.0em; transform: rotate(-10deg); position: absolute; bottom: -1.0em; right: -0.1em; opacity: 0.08;}
#landscaping .column03:after{ content: "Site Construction"; font-family: "Square Peg", cursive; font-weight: 400; font-style: normal; font-size: 4.8rem; line-height: 1.0em; transform: rotate(-10deg); position: absolute; bottom: -1.0em; right: -0.1em; opacity: 0.08;}
#exterior .column03:after{ content: "Exterior Design"; font-family: "Square Peg", cursive; font-weight: 400; font-style: normal; font-size: 4.8rem; line-height: 1.0em; transform: rotate(-10deg); position: absolute; bottom: -1.0em; right: -0.1em; opacity: 0.08;}
#pruning .column03:after{ content: "Tree Pruning"; font-family: "Square Peg", cursive; font-weight: 400; font-style: normal; font-size: 4.8rem; line-height: 1.0em; transform: rotate(-10deg); position: absolute; bottom: -1.0em; right: -0.1em; opacity: 0.08;}
#planting .column03:after{ content: "Planting Services"; font-family: "Square Peg", cursive; font-weight: 400; font-style: normal; font-size: 4.8rem; line-height: 1.0em; transform: rotate(-10deg); position: absolute; bottom: -1.0em; right: -0.1em; opacity: 0.08;}

/* レンタルグリーン
--------------------------------------------------------------*/
.rentalgreen .half .inner h2{ font-size: 2.4rem; line-height: 1.2em;}
.rentalgreen .half .inner h2 br,
.rentalgreen .column03 .inner h4 br{ display: none;}

.rentalgreen .column03{ margin-top: 4.0rem;}
.rentalgreen .column03 .inner h4{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600;}
.rentalgreen .column03 .inner figure{ margin-top: 1.0em;}
.rentalgreen .column03 .inner figure img{ width: 100%; height: auto; box-shadow: 0 2px 16px rgba(0,0,0,0.16);}

.flow{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.0em;}
.flow .inner:first-child{ width: 100%;}
.flow .inner:first-child figure{ width: 24%;}
.flow .inner{ width: 48%; margin-top: 1.0em;}
.flow .inner figure{ width: 48%; margin: 0px auto; background: var(--clr-bg); border-radius: 100%; padding: 1.0em; position: relative;}
.flow .inner figure img{ width: 100%; height: auto;}
.flow .inner figure figcaption{ font-family: "Square Peg", cursive; font-weight: 400; font-style: normal; font-size: 2.4rem; line-height: 1.0em; transform: rotate(-10deg); position: absolute; top: 72%; left: 64%; opacity: 0.64;}
.flow .inner dl{ margin-top: 1.0em;}
.flow .inner dl dt{ text-align: center; font-weight: 600; font-size: 2.0rem; color: var(--clr-gd);}
.flow .inner dl dd{ margin-top: 0.5em;}

.safety{ width: 100%; margin: 3.2rem auto 0; background: var(--clr-bg); padding: 0.8em; border-radius: 8px;}
.safety dt{ font-size: 1.6rem; line-height: 1.2em; color: var(--clr-gr); font-weight: 600; text-align: center; margin-top: -1.35em;}
.safety dd{ margin-top: 0.5em;}

.align-center{ text-align: left !important;}

.size{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 4.0rem;}
.size .inner{ width: 100%; background: rgba(var(--clr-bg-rgb),0.48); padding: 1.0em; border-radius: 8px;}
.size .inner h3{ font-size: 2.4rem; line-height: 1.2em; font-weight: 600; text-align: center; color: var(--clr-gr);}
.size .inner p{ line-height: 1.4em;}
.size .inner dl{ border-top: solid 1px rgba(0,0,0,0.08); margin-top: 1.0em; padding-top: 1.0em;}
.size .inner dl dt{ text-align: center; font-size: 1.4rem; line-height: 1.2em; font-weight: 600;}
.size .inner dl dd{ text-align: center; font-weight: 600;}
.size .inner dl dd strong{ font-size: 4.0rem; line-height: 1.0em; font-weight: 600; position: relative; top: 2px;}

.size ul{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.0em;}
.size ul li{ width: 48%;}
.size ul li:nth-child(n+3){ margin-top: 0.5em;}
.size ul li img{ width: 100%; height: auto; box-shadow: 0 4px 8px rgba(0,0,0,0.08);}
.size.sizeM .inner{ background: rgba(var(--clr-bg-rgb),1.0);}

.special figure figcaption{ text-align: right; font-size: 1.2rem; padding-top: 0.48em;}
.special .inner h2{ font-size: 2.4rem; line-height: 1.2em;}
.special .inner h3{ font-size: 2.0rem; line-height: 1.2em; color: var(--clr-gr); font-weight: 600; margin-top: 0.5em;}

/* ご契約の流れ
--------------------------------------------------------------*/
.process-wrap{}
.process-wrap section{ position: relative;}
.process-wrap section:before{ content: ""; width: 3px; height: 90%; border-left: dotted 3px rgba(0,0,0,0.16); position: absolute; top: 0; left: calc(23.5% / 2); z-index: -1;}
.process-wrap .process{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}
.process-wrap section .process + .process{ margin-top: 4.0rem;}
.process-wrap .process figure{ width: 23.5%; padding-bottom: 23.5%; border-radius: 100%; background: var(--clr-bg); position: relative;}
.process-wrap .process figure img{ width: 72%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.process-wrap .process figure figcaption{ font-family: "Square Peg", cursive; font-weight: 400; font-style: normal; font-size: 2.4rem; line-height: 1.0em; transform: rotate(-10deg); position: absolute; top: 80%; right: -4%; opacity: 0.64;}
.process-wrap .process .inner{ width: calc(76.5% - 4%);}
.process-wrap .process .inner h3{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600;}
.process-wrap .process .inner h3 span{ display: block; font-size: 2.0rem; line-height: 1.2em; font-weight: 700; color: var(--clr-gd);}

/* よくあるご質問
--------------------------------------------------------------*/
.faq h3{ font-size: 2.4rem; line-height: 1.2em; font-weight: 600; background: var(--clr-bg); padding: 0.8em; border-radius: 4px; margin-top: 8.0rem;}
.faq section h3:first-of-type{ margin-top: 2.4rem;}
.faq dl{margin-top: 1.0em;} 
.faq dl dt{ line-height: 1.2em; font-weight: 600; padding: 0.8em 0; padding-left: 2.4rem; border-bottom: solid 1px rgba(0,0,0,0.08); position: relative; cursor: pointer; transition: color 0.3s ease;} 
.faq dl dt:before{content: ""; width: 20px; height: 20px; background: url("images/faq/icon_question.webp") no-repeat; background-size: contain; position: absolute; top: 0.8em; left: 0;} 
.faq dl dt.active{color: var(--clr-gr);} 
.faq dl dd{padding: 0 0 0 2.4rem; position: relative; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.4s ease, padding 0.3s ease;} 
.faq dl dd:before{content: ""; width: 20px; height: 20px; background: url("images/faq/icon_answer.webp") no-repeat; background-size: contain; position: absolute; top: 1.0em; left: 0;} 
.faq dl dd.open{max-height: 500px; opacity: 1; padding: 1.0em 0 2.4rem 2.4rem;}

#quiz-container{ margin-top: 4.8rem;}
#quiz-container h2.heading span.en{ display: block; margin-bottom: 1.0em;}
#quiz-container h2.heading span.en strong{ font-weight: normal; background: #E35549; color: #FFF; font-size: 2.4rem; line-height: 1.0em; padding: 0.4em 1.0em; border-radius: 8px; display: inline-block;}

.answers{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 2.4rem;}
.answers input[type="radio"] { display: none;}
.answers label{ width: 48%; border: solid 1px #DDD; padding: 2.4em 1.0em; text-align: center; border-radius: 8px; transition: all 0.3s ease 0s; cursor: pointer;}
.answers label:nth-child(n+3){ margin-top: 1.0em;}
.answers label:nth-child(1):hover{ border-color: #EFC808;}
.answers label:nth-child(2):hover{ border-color: #1EBF7C;}
.answers label:nth-child(3):hover{ border-color: #FF8097;}
.answers label:nth-child(4):hover{ border-color: #1DB5EA;}
.choice-label{ display: block; text-align: center; margin-bottom: 0.5em;}
.choice-label strong{ display: inline-block; font-size: 2.4rem; line-height: 40px; width: 40px; border-radius: 40px; color: #FFF; font-weight: normal;}
.answers label:nth-child(1) .choice-label strong{ background: #EFC808;}
.answers label:nth-child(2) .choice-label strong{ background: #1EBF7C;}
.answers label:nth-child(3) .choice-label strong{ background: #FF8097;}
.answers label:nth-child(4) .choice-label strong{ background: #1DB5EA;}

#result{ display: none; margin-top: 4.8rem; border: solid 4px #f4f4f4; border-radius: 24px; padding: 1.0em;}
#result-style-id{ display: none;}
#result-images{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 2.4rem;}
#result-images li{ width: 48%; margin-right: 4%;}
#result-images li img{ width: 100%; height: auto; box-shadow: 0 0 8px rgba(0,0,0,0.16);}
#result-images li:nth-child(2n),
#result-images li:last-child{ margin-right: 0;}
#result-images li:nth-child(n+3){ margin-top: 0.5em;}
h2#result-title{ font-size: 1.6rem; line-height: 1.2em;}
h2#result-title strong{ display: block; text-align: center; color: #E35549; font-size: 2.4rem; line-height: 1.2em; font-weight: normal;}
#restart-btn{ display: block; width: 80%; margin: 2.4rem auto 0; font-weight: 600; color: #333; background: var(--clr-gd); border-color: var(--clr-gd); padding: 1.0em 0;}

/* 施工事例
--------------------------------------------------------------*/
.breadcrumb-container{ font-size: 1.3rem; display: none !important;}
.breadcrumb-container a{ text-decoration: none;}
.breadcrumb-container.theme1 a{ display: inline-block; margin: 0 5px; padding: 5px 10px;}

main#archive-works article.contents{ width: 100%; margin: 0px auto; padding: 4.0rem 0;}
main#archive-works article.contents section{ width: 90%; margin: 0px auto; position: relative;}

.works-link{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-top: 2.4rem; padding-top: 2.4rem; border-top: solid 1px #DDD;}
.works-link h3{ width: 100%; font-weight: 600; padding-left: 1.0em; position: relative;}
.works-link h3:before{ content: ""; width: 8px; height: 8px; background: var(--clr-gd); border-radius: 4px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.works-link ul{ width: 100%; margin-top: 0.5em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.works-link ul li{ width: 48%; margin-right: 4%; font-size: 1.4rem;}
.works-link ul li:nth-child(2n),
.works-link ul li:last-child{ margin-right: 0;}
.works-link ul li:nth-child(n+3){ margin-top: 0.64em;}
.works-link ul li a{ display: block; text-align: center; line-height: 1.0em; font-weight: 600; padding: 1.0em 0; text-decoration: none; background: #FFF; border: solid 1px #DDD; border-radius: 8px; overflow: hidden; position: relative;}
.works-link ul li.active a{ color: #FFF; background: none; border-color: rgba(0,0,0,0.16); overflow: hidden;}
.works-link ul li.active a:before{ content: ""; width: 100%; height: 100%; background-image: linear-gradient(90deg, #9fc31f, #5a8b34); position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s ease 0s;}
.works-link ul li.active a:hover{ color: #FFF; background: none; border-color: rgba(0,0,0,0.16);}
.works-link ul li.active a:hover:before{ width: 200%; left: -50%}
.works-link ul li a:hover{ color: #111; background: var(--clr-gd); border-color: rgba(0,0,0,0.16);}

.works-list{ width: 90%; margin: 0px auto; padding-bottom: 2.4rem; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.works-list > p{ text-align: center; width: 100%;}
.works-list .works-inner{ width: 100%; border-radius: 8px; overflow: hidden; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); margin-right: 0; position: relative; transition: all 0.3s ease 0s;}
.works-list .works-inner:hover{ box-shadow: 0 10px 24px rgba(0,0,0,0.2);}
.works-list .works-inner:nth-child(2n),
.works-list .works-inner:last-child{ margin-right: 0;}
.works-list .works-inner:nth-child(n+2){ margin-top: 2.4rem;}
.works-list .works-inner figure{}
.works-list .works-inner figure img{ width: 100%; height: auto;}
.works-list .works-inner dl{ padding: 1.0em; display: flex; flex-wrap: wrap;}
.works-list .works-inner dl dt,
.works-list .works-inner dl dd{ width: 100%;}
.works-list .works-inner dl dt{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600; order: 2;}
.works-list .works-inner dl dd{ font-size: 1.4rem; line-height: 1.2em; color: rgba(51,51,51,0.48); margin-bottom: 0.24em;}
.works-list .works-inner a span{ display: none;}
.works-list .works-inner a:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100;}

.wp-pagenavi{width: 90%; margin: 0px auto; padding-bottom: 4.0rem;}

.one-life{ width: 90%; margin: 0 auto 4.0rem;}
.one-life img{ width: 100%; height: auto;}
.one-life a{ display: block; box-shadow: 0 0 16px rgba(0,0,0,0.32); transition: all 0.3s ease 0s;}
.one-life a:hover{ box-shadow: 0 0 24px rgba(0,0,0,0.16);}

#single-works{ padding: 4.8rem 0;}
#single-works #detail{ width: 90%; margin: 0px auto;}
#single-works #detail ul{}
#single-works #detail ul li{}
#single-works #detail ul li:nth-child(n+2){ margin-top: 1.0em;}
#single-works #detail ul li figure{}
#single-works #detail ul li figure img{ width: 100%; height: auto; box-shadow: 0 10px 24px rgba(0,0,0,0.16);}
#single-works #detail dl{ margin-top: 1.0em; display: flex; justify-content: space-between; flex-wrap: wrap;}
#single-works #detail dl dt{ width: 100%; padding: 1.5em 0 0; line-height: 1.2em; color: var(--clr-gr); font-weight: 600;}
#single-works #detail dl dd{ width: 100%; padding: 0.24em 0 1.5em 0; line-height: 1.2em; border-bottom: solid 1px #EEE;}
#single-works #detail dl dt:last-of-type,
#single-works #detail dl dd:last-of-type{ border-bottom: none;}
#single-works #detail .back-button{ width: 72%; margin: 2.4rem auto 0;}
#single-works #detail .back-button a{ display: block; line-height: 1.2em; color: #333; text-decoration: none; background: #FFF; border: solid 1px #DDD; padding: 1.0em 0; text-align: center; border-radius: 4px;}
#single-works #detail .back-button a:hover{ color: #FFF; background: #555; border-color: #555;}

/* 会社案内
--------------------------------------------------------------*/
.greeting section{}
.greeting section h2.heading{}
.greeting section .column{ margin-top: 1.0em;}
.greeting section .column > figure{ width: 48%; margin: 0px auto;}
.greeting section .column > figure img{ width: 100%; height: auto;}
.greeting section .column .inner{ margin-top: 1.0em;}
.greeting section .column .inner p:first-child{ margin-top: 0;}
.greeting section .column .inner p{}
.greeting section .column .inner h3{ width: 48%; margin-top: 1.5em; margin-left: auto;}
.greeting section .column .inner h3 img { width: 100%; height: auto;}

.outline table{ width: 100%; margin: 0px auto; border-top: solid 1px rgba(0,0,0,0.08); margin-top: 2.0em;}
.outline table tr{ border-bottom: solid 1px rgba(0,0,0,0.08); display: flex; justify-content: space-between; flex-wrap: wrap;}
.outline table th{ width: 100%; padding: 1.5em 1.0em 0; color: var(--clr-gr); font-weight: 600;}
.outline table td{ width: 100%; padding: 0.24em 1.0em 1.5em 1.0em;}

.areamap .column{ margin-top: 1.0em;}
.areamap .column figure{ width: 100%;}
.areamap .column figure img{ width: 100%; height: auto;}
.areamap .column .inner{ width: 100%; margin-top: 1.0em;}
.areamap .column .inner h3{ font-size: 2.4rem; line-height: 1.2em; font-weight: 600; color: var(--clr-gr);}
.areamap .column .inner dl{ margin-top: 2.0em;}
.areamap .column .inner dl dt{ font-weight: 600; color: var(--clr-gd); font-size: 2.0rem;}
.areamap .column .inner dl dd{ margin-top: 0.5em;}

/* お客様の声
--------------------------------------------------------------*/
.interview{}
.interview .column{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.interview .column + .column{ margin-top: 4.8rem; padding-top: 4.8rem; border-top: solid 1px rgba(0,0,0,0.08);}
.interview .column .head{ width: 100%;}
.interview .column .head figure{ width: 32%; margin: 0px auto;}
.interview .column .head figure img{ width: 100%; height: auto;}
.interview .column .head dl{ margin-top: 1.0em;}
.interview .column .head dl dt{ font-size: 1.6rem; line-height: 1.0em; text-align: center;}
.interview .column .head dl dd{ font-size: 3.2rem; line-height: 1.2em; text-align: center;}
.interview .column .inner{ width: 100%; margin-top: 1.0em;}
.interview .column .inner h2{ font-size: 2.4rem; line-height: 1.2em; font-weight: 600; color: var(--clr-gr);}
.interview .column .inner h3{ font-weight: 600;}
.interview .column .inner h4{ margin-top: 2.4rem; position: relative;}
.interview .column .inner h4:after{ content: ""; width: 100%; height: 1px; background: rgba(0,0,0,0.08); position: absolute; top: 50%; left: 0; z-index: -1;}
.interview .column .inner h4 span{ display: inline-block; background: #FFF; font-weight: 600; padding-right: 1.0em; position: relative; z-index: 10;}
.interview .column .inner ul{ margin-top: 0.5em; padding-left: 1.5em;}
.interview .column .inner ul li{ list-style-type: disc; list-style-position: outside;}
.interview .column .inner p{ margin-top: 0.5em !important;}

/* お問い合わせ
--------------------------------------------------------------*/
body#contact .contents.intro p{ margin-top: 0 !important;}
.contact-phone{ margin-top: 2.4rem; padding-top: 2.4rem; border-top: solid 1px rgba(0,0,0,0.08); text-align: center;}
.contact-phone h3{ font-size: 2.0rem; font-weight: 600; text-align: center; line-height: 1.2em;}
.contact-phone a{ display: inline-block; color: rgba(var(--clr-gd-rgb),1.0); text-decoration: none; font-size: 4.0rem; line-height: 1.0;}
.contact-phone a span{ display: inline-block; padding-left: 0.8em; position: relative;}
.contact-phone a span:before{ content: ""; width: 26px; height: 32px; background: url("images/common/ft_cta_icon_phone.webp") no-repeat; background-size: contain; position: absolute; top: 52.5%; transform: translateY(-50%); left: 0;}
.contact-phone a:hover{ color: #111;}
.contact-phone em{ display: block; font-style: normal; text-align: center; font-size: 1.4rem; line-height: 1.4em; margin-top: 1.0em;}
.contact-phone > span{ display: block; text-align: center;}

.policy{ margin-top: 1.5em; background: var(--clr-bg); padding: 1.5em 1.0em; border-radius: 8px;}
.policy dt{ text-align: center; font-size: 1.6rem; line-height: 1.2em; font-weight: 600;}
.policy dd{ margin-top: 0.5em;}

.contents.form{ background: var(--clr-bg);}

/* お知らせ一覧
--------------------------------------------------------------*/
#archive-list{ border-top: solid 1px #EEE;}
#archive-list article{ padding: 4.8rem 0; border-bottom: solid 1px #EEE;}
#archive-list h2.entry-title{ font-size: 2.4rem; line-height: 1.2em;}
#archive-list h2.entry-title a{ display: inline-block; color: #333; text-decoration: none;}
#archive-list h2.entry-title a:hover{ color: rgba(51,51,51,0.72);}
#archive-list .entry-meta{ background: #f6f6f6; padding: 0.8em; margin: 1.0em 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
#archive-list .entry-meta span{ margin-right: 1.0em;}

/* お知らせ
--------------------------------------------------------------*/
#single-post h1.entry-title{ font-size: 2.4rem; line-height: 1.2em;}
#single-post .entry-meta{ background: #f6f6f6; padding: 0.8em; margin: 1.0em 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
#single-post .entry-meta span{ margin-right: 1.0em;}
#single-post .entry-content{}
#single-post .entry-content h2.wp-block-heading{ font-size: 2.4rem; line-height: 1.2em; font-weight: 600; color: var(--clr-gr); margin: 4.0rem 0 1.6rem;}
#single-post .entry-content h3{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600; padding: 0.5em 0; border-bottom: solid 1px rgba(0,0,0,0.08); margin: 3.0rem 0 1.6rem 0;}
#single-post .entry-content p{ margin-top: 1.0em;}
#single-post .entry-content em{ font-style: italic;}
#single-post .entry-content ol{ padding-left: 1.2em; margin-top: 1.0em;}
#single-post .entry-content ol li{ list-style-type: decimal; list-style-position: outside; line-height: 1.2em;}
#single-post .entry-content ol li:nth-child(n+2){ margin-top: 0.4em;}
#single-post .entry-content ul{ padding-left: 1.2em; margin-top: 1.0em;}
#single-post .entry-content ul li{ list-style-type: circle; list-style-position: outside; line-height: 1.2em;}
#single-post .entry-content ul li:nth-child(n+2){ margin-top: 0.4em;}
#single-post .entry-content table{ border-color: #DDD;}
#single-post .entry-content table th{ text-align: center; background: #F9F9F9; border-color: #DDD;}
#single-post .entry-content table td{ border-color: #DDD;}
#single-post .post-navigation{ margin-top: 4.0rem;}

/* 404 not found
--------------------------------------------------------------*/
main#error article.contents{ width: 100%; margin: 0px auto; position: relative; padding: 8.0rem 0;}
main#error article.contents:nth-of-type(1){ padding-top: 16.0rem;}
main#error article.contents:last-of-type{ padding-bottom: 16.0rem;}
main#error article.contents section{ width: 90%; margin: 0px auto; position: relative;}
main#error article.contents p{ margin-top: 1.0em;}

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
--------------------------------------------------------------*/
/* archive/category */
main#archive{ padding: 8.0rem 0 0;}
main#single-post{ padding: 8.0rem 0 0;}
/* single */

/* pagenation */
.posts-navigation{ display: none;}
.wp-pagenavi{ margin-top: 2.4rem; 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: 6.4rem;}
.widget:nth-child(1){ margin-top: 0;}
.widget h2.widget-title{ font-size: 2.0rem; line-height: 1.2em; padding-bottom: 0.4em;}
.widget ul{ margin-top: 0.5em; border-top: solid 1px #EEE;}
.widget ul li{ border-bottom: solid 1px #EEE; padding-right: 1.2em;}
.widget ul li a{ display: block; padding: 1.0em 0.5em; padding-right: 1.2em; position: relative; color: #666; text-decoration: none;}
.widget ul li a:hover{ color: rgba(51,51,51,0.64);}
.widget ul li a:after{ content: "\e5e1"; font-family: "Material Icons"; color: rgba(51,51,51,48); font-size: 1.0rem; position: absolute; top: 50%; right: 0.4em; transform: translateY(-50%); transition: all 0.3s ease 0s;}
.widget ul li a:hover:after{ right: 0; color: rgba(51,51,51,0.88);}

/* next back */
.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
--------------------------------------------------------------*/
.wpcf7{ background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.08); border-radius: 16px; padding: 1.0em; padding-bottom: 2.0em;}
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.6em 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 em{ display: block; font-size: 1.4rem; line-height: 1.2em; font-style: normal;}
.wpcf7-form dl dt span.req{ position: relative;}
.wpcf7-form dl dt span.req:before{ content: "必須"; font-size: 1.2rem; line-height: 1.0em; color: #FFF; background: var(--clr-gd); padding: 0.24em 0.8em; border-radius: 2px; position: absolute; top: 50%; left: calc(100% + 1.0em); transform: translateY(-50%); word-break: keep-all;}
.wpcf7-form dl dd{ width: 100%; padding: 0.24em 0 1.6em 0; border-bottom: solid 1px #EEE;}
.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 #DDD; background: #FFF; padding: 0.64em; border-radius: 4px; transition: all 0.3s ease 0s; margin: 0.1em; 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: #f6f6f6; border: solid 1px #CCC;}
.wpcf7-form dl dd input.wpcf7-not-valid,
.wpcf7-form dl dd textarea.wpcf7-not-valid{}
.wpcf7-form .oath{ margin-top: 1.5em;}
.wpcf7-form .oath p{ text-align: left;}

.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; padding-right: 2.0em;}
.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{}

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

.wpcf7-spinner{ display: none !important;}
.submit-container{ text-align: center;}
.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; border-radius: 0; cursor: pointer; border-radius: 8px; margin-right: 2.0em;}
.submit-container input[type="submit"]{ background: #444; color: #FFF; border-color: #444; font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 6.4em; border-radius: 0; cursor: pointer; border-radius: 4px;}

.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: 92%; padding: 1.6rem 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 100;} 
header#masthead .site-title{ width: 40%; margin: 0px auto;}
header#masthead .site-title img{ width: 100%; height: auto;}1

/* breadcrumb */
.breadcrumb-container{ background: var(--clr-bg); display: none !important;}

/* footer fix */
#footerCta{ width: 100%; padding: 2.4rem 0; position: relative; background-image: url("images/common/ft_cta_fix_bg.webp"); background-size: cover; background-position: center; background-attachment: fixed; overflow: hidden;}
#footerCta:before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.48); position: absolute; top: 0; left: 0; z-index: 1;}
#footerCta section{ width: 90%; margin: 0px auto; position: relative; z-index: 10;}
#footerCta section h2{ font-size: 2.4rem; line-height: 1.0em; text-align: center; color: #FFF;}
#footerCta section dl.area{ margin-top: 1.6rem;}
#footerCta section dl.area dt{ text-align: center;}
#footerCta section dl.area dt span{ display: inline-block; color: #FFF; font-weight: 600; line-height: 1.0em; background: rgba(255,255,255,0.24); padding: 0.4em 1.5em; border-radius: 100px;}
#footerCta section dl.area dd{ color: #FFF; text-align: left; margin-top: 0.5em;}
#footerCta section .column{ margin-top: 1.6rem; padding: 1.6rem 0 0 0; border-top: solid 1px rgba(255,255,255,0.16); display: flex; justify-content: space-between; flex-wrap: wrap;}
#footerCta section .column .inner{ width: 100%;}
#footerCta section .column .inner:nth-child(n+2){ margin-top: 2.4rem;}
#footerCta section .column .inner h3{ text-align: center; font-size: 2.0rem; line-height: 1.0em; color: #FFF;}
#footerCta section .column .inner p{ margin-top: 0.5em; text-align: center;}
#footerCta section .column .inner.phone p a{ display: inline-block; font-size: 4.8rem; line-height: 1.0em; color: var(--clr-gd); text-decoration: none; padding-left: 4.0rem; position: relative;}
#footerCta section .column .inner.phone p a:hover{ color: #FFF;}
#footerCta section .column .inner.phone p a:before{ content: ""; width: 26px; height: 32px; background: url("images/common/ft_cta_icon_phone.webp") no-repeat; background-size: contain; position: absolute; top: 52.5%; transform: translateY(-50%); left: 0;}
#footerCta section .column .inner.phone p span{ display: block; text-align: center; font-size: 1.4rem; line-height: 1.2em; color: #FFF; margin-top: 0.25em;}
#footerCta section .column .inner.form p{ margin-top: 0.8em;}
#footerCta section .column .inner.form p a{ display: block; font-weight: 600; color: #111; background: var(--clr-gd); padding: 1.0em 0; border-radius: 8px; text-align: center;}
#footerCta section .column .inner.form p a:hover{ color: #333; background: #FFF;}
#footerCta section .column .inner.form p a span{ display: inline-block; padding-left: 3.0rem; position: relative;}
#footerCta section .column .inner.form p a span:before{ content: ""; width: 20px; height: 16px; background: url("images/common/ft_cta_icon_mail.webp") no-repeat; background-size: contain; position: absolute; top: 52.5%; transform: translateY(-50%); left: 0;}
#footerCta section .caution{ text-align: left; color: #FFF; font-size: 1.4rem; line-height: 1.4em; margin-top: 2.4rem;}

/* footer */
footer#colophon{ background: #111; padding: 2.4rem 0;}
footer#colophon section{ width: 90%; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
footer#colophon section .inner{ width: 100%;}
footer#colophon section .inner.info{}
footer#colophon section .inner.info h2{ width: 40%; margin: 0px auto;}
footer#colophon section .inner.info h2 img{ width: 100%; height: auto;}
footer#colophon section .inner.info .address{ margin-top: 1.0em; color: #FFF; line-height: 1.4em; text-align: center;}
footer#colophon section .inner.info dl{ display: none;}
footer#colophon section .inner.info .instagram{ width: 32px; margin: 1.0em auto 2.0em;}
footer#colophon section .inner.info .instagram a{ display: block; opacity: 1.0;}
footer#colophon section .inner.info .instagram a:hover{ opacity: 0.72;}
footer#colophon section .inner.info .instagram img{ width: 100%; height: auto;}
footer#colophon section .inner.navi{ display: none;}
footer#colophon section .inner.pickup{}
footer#colophon section .inner.pickup figure{ width: 100%; padding-bottom: 50%; border-radius: 8px; overflow: hidden; position: relative;}
footer#colophon section .inner.pickup figure img{ width: 100%; height: auto; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}
footer#colophon section .inner.pickup dl{ margin-top: 1.0em;}
footer#colophon section .inner.pickup dl dt{ display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; font-size: 2.0rem; line-height: 1.2em; position: relative;}
footer#colophon section .inner.pickup dl dt:after{ content: "\e5e1"; font-family: "Material Icons"; font-size: 1.4rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: rgba(255,255,255,0.4); transition: color 0.3s ease 0s;}
footer#colophon section .inner.pickup dl dt:hover:after{ color: rgba(255,255,255,1.0);}
footer#colophon section .inner.pickup dl dt span{ font-size: 1.2rem; line-height: 1.0em; color: rgba(51,51,51,0.8); background: var(--clr-gd); padding: 0.4em 0.8em; border-radius: 4px; margin-right: 0.5em; position: relative; top: -3px;}
footer#colophon section .inner.pickup dl dt a{ color: #FFF; text-decoration: none;}
footer#colophon section .inner.pickup dl dt a:hover{ color: rgba(255,255,255,0.72);}
footer#colophon section .inner.pickup dl dd{ font-size: 1.4rem; line-height: 1.6em; margin-top: 1.0em; color: #FFF;}
footer#colophon .copyright{ width: 90%; margin: 0px auto; border-top: solid 1px rgba(255,255,255,0.16); margin-top: 1.6rem; padding-top: 0.8rem; text-align: center; color: #FFF;}

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

/* Navigation
--------------------------------------------- */
.menu-navigation-container{ display: none;}
#site-navigation{ 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, -apple-system, BlinkMacSystemFont,Hiragino Kaku Gothic ProN, "Helvetica Neue", YuGothic, Arial, 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: color 0.3s ease 0s, background 0.3s ease 0s;}
a:hover{color: rgba(51,51,51,0.64); text-decoration:none;}
}