/*!
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";

:root{
--clr-prim:#D80015;
--clr-brown:#382511;
--clr-gold:#E7B95B;
--clr-prim-rgb:216,0,21;
--clr-brown-rgb:56,37,17;
--clr-gold-rgb:231,185,91;
}
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

@media screen and (min-width: 768px) {
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* fonts */
.en{font-family: "Barlow Condensed", sans-serif; font-weight: 400; font-style: normal;}

h2,h3,h4,h5{ font-family: YakuHanJP, -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, sans-serif; font-optical-sizing: auto; font-style: normal;}

/* web icon */
.googleIcon:before{ content: ""; content: "\e5e1"; font-family: "Material Icons";}

/* layout */
#wrapper{}
/* home */
#toppage{}
/* 固定ページ */
#static{}
/* カテゴリー */
#archive{ width: 90%; max-width: 1200px; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
#archive #archive-list{ width: 72.5%; order: 1; padding: 6.4rem 0 6.4rem 4%;}
#archive #secondary{ width: 23.5%; order: 2; padding: 0 0 8.0rem 0; border-left: solid 1px rgba(0,0,0,0.08);}
/* 記事詳細 */
#single-post{ width: 90%; max-width: 1200px; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
#single-post #detail{ width: 72.5%; order: 1; padding: 6.4rem 0 9.6rem 4%;}
#single-post #secondary{ width: 23.5%; order: 2; padding: 0 0 8.0rem 0; border-left: solid 1px rgba(0,0,0,0.08);}

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

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

/*--------------------------------------------------------------
# top page
--------------------------------------------------------------*/

/* common
--------------------------------------------------------------*/
body#index h1.entry-title{ display: none;}

h2.heading{ font-size: 4.0rem; line-height: 1.2em; text-align: center; color: var(--clr-brown);}
h2.heading span.en{ display: block; font-size: 3.2rem; line-height: 1.0em; letter-spacing: 0.16em; font-weight: 400; color: rgba(var(--clr-brown-rgb),0.48); text-align: center; margin-bottom: 0.5em;}
main h2.heading{ margin-bottom: 4.0rem;}

main article.contents{ width: 100%; padding: 9.6rem 0; position: relative;}
main article.contents section{ width: 90%; max-width: 1200px; margin: 0px auto;}

/* layout */
.half{ width: calc(100% -96px); margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.half figure{ width: 47%;}
.half figure img{ width: 100%; height: auto;}
.half .inner{ width: 47%;}
.half.left figure{ order: 1;}
.half.left .inner{ order: 2;}
.half.right figure{ order: 2;}
.half.right .inner{ order: 1;}

.column03{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.column03 .inner{ width: 31%; margin-right: 3.5%;}
.column03 .inner:nth-child(3n),
.column03 .inner:last-child{ margin-right: 0;}
.column03 .inner:nth-child(n+4){ margin-top: 4.0rem;}

/* button */
.linkBtn{ margin: 6.4rem auto 0;}
.linkBtn a{ display: block; width: 23.5%; margin: 0px auto; text-align: center; border: solid 1px #333; color: #333; text-decoration: none; line-height: 1.0em; font-weight: 700; padding: 1.6em 0; position: relative;}
.linkBtn a:hover{ color: rgba(0,0,0,0.8); background: var(--clr-gold); border-color: var(--clr-gold);}
.linkBtn a:after{ content: "\e5e1"; font-family: "Material Icons"; position: absolute; top: 50%; right: 1.6em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.linkBtn a:hover:after{ right: 1.0em; opacity: 1.0;}

/* hero area
--------------------------------------------------------------*/
#hero-area{ width: 100%; padding-bottom: 40.0vw; min-height: 560px; position: relative; overflow: hidden; z-index: 2;}
#hero-area:before{ content: ""; width: 80%; height: 100%; background: url("images/home/hero_img.webp") no-repeat center center; background-size: cover; position: absolute; top: 0; right: 0; z-index: 1;}
#hero-area section{ width: 90%; max-width: 1280px; display: flex; justify-content: flex-end; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10;}
#hero-area section h2,
#hero-area section h3{ writing-mode: vertical-rl; text-orientation: mixed; margin-right: 4.0rem; padding-top: 6.4rem; word-break: keep-all;}
#hero-area section h2{ order: 2; font-size: 4.4rem; font-weight: 700; line-height: 1.0em; color: #FFF; font-weight: 900; background: rgba(var(--clr-brown-rgb),0.72); padding: 0.4em;}
#hero-area section h3{ order: 1;}
#hero-area section h3 span{ display: inline-block; font-size: 2.8rem; color: var(--clr-brown); line-height: 1.0em; font-weight: 700; background: rgba(255,255,255,0.72); padding: 0.4em;}
#hero-area section h3 span:nth-child(n+2){ margin-right: 1.6rem;}

/* CONCEPT
--------------------------------------------------------------*/
.home-concept section{ position: relative; z-index: 10; padding-bottom: 4.0rem;}
.home-concept section:before{ content: ""; width: calc(100% - 1px); height: 74%; background: #FFF; position: absolute; bottom: 0; right: 0; z-index: -1;}
.home-concept h2.heading em{ color: var(--clr-prim); font-style: normal;}
.home-concept p{ text-align: center;}

/* BUSINESS
--------------------------------------------------------------*/
.home-business{ background: #111; position: relative;}
.home-business:before{ content: ""; width: 1px; height: 100%; border-left: solid 1px rgba(255,255,255,0.16); position: absolute; top: 0; left: calc(50% + 600px);}
.home-business:after{ content: ""; width: 1px; height: 100%; border-left: solid 1px rgba(255,255,255,0.16); position: absolute; top: 0; left: calc(50% - 600px);}
.home-business section{ position: relative;}
.home-business section h2.heading{ color: var(--clr-gold);}
.home-business section h2.heading span{ color: rgba(255,255,255,0.48);}
.home-business section > p{ text-align: center; color: #FFF;}
.home-business section .half{ width: 92%; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-top: 8.0rem;}
.home-business section .half figure,
.home-business section .half .inner{ width: 47%;}
.home-business section .half + .half{ margin-top: 4.0rem; padding-top: 4.0rem; border-top: solid 1px rgba(255,255,255,0.16);}
.home-business section .half .inner h3{ font-size: 3.2rem; line-height: 1.2em; color: #FFF;}
.home-business section .half .inner h3 span{ display: block; font-size: 2.4rem; line-height: 1.2em; color: rgba(255,255,255,0.48); margin-bottom: 0.5em;}
.home-business section .half .inner h3 em{ display: inline-block; font-size: 2.0rem; line-height: 1.2em; font-style: normal; margin-left: 1.0em;}
.home-business section .half .inner p{ color: #FFF; margin-top: 1.5em;}
.home-business section .linkBtn a{ color: #FFF; border-color: #FFF;}
.home-business section .linkBtn a:hover{ color: rgba(0,0,0,0.8); background: #FFF;}

/* PROPERTY
--------------------------------------------------------------*/
.home-property{ background: #FFF;}
.home-property .column{ display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0 10%;}
.home-property .column .inner{ width: 100%;}
.home-property .column .inner h3.title{ font-size: 2.4rem; line-height: 1.2em;}
.home-property .column .inner ol{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 0.8em;}
.home-property .column .inner ol li{ width: 47%;}
.home-property .column .inner ol li img{ width: 100%; height: auto;}
.home-property .column .inner figure{}
.home-property .column .inner figure img{ width: 100%; height: auto;}
.home-property .column .inner .address{ margin-top: 1.0em; line-height: 1.4em;}
.home-property .column .inner .address span { display: block; font-size: 1.4rem; line-height: 1.2em; color: rgba(51,51,51,0.48);}
.home-property .column .inner ul{ margin-top: 1.0em; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0.24em 1.0em;}
.home-property .column .inner ul:before{ content: ""; width: 5px; height: 100%; border: solid 1px #CCC; border-right: none; position: absolute; top: 0; left: 0;}
.home-property .column .inner ul:after{ content: ""; width: 5px; height: 100%; border: solid 1px #CCC; border-left: none; position: absolute; top: 0; right: 0;}
.home-property .column .inner li{ width: 30%;}
.home-property .column .inner li span{ display: block; font-size: 1.4rem; line-height: 1.2em; color: rgba(51,51,51,0.48);}
.home-property .column .inner li strong{ display: block; text-align: right; font-weight: normal;}

/* INFORMATION
--------------------------------------------------------------*/
ul.newsList{ width: 72%; margin: 0px auto;}
ul.newsList li{ padding: 0.8em 0; border-bottom: solid 1px rgba(0,0,0,0.08); line-height: 1.4em;}
ul.newsList li span{ display: block; font-size: 1.4rem; line-height: 1.4em; color: rgba(51,51,51,0.48);}
ul.newsList li a{ display: inline-block; color: #333; text-decoration: none;}
ul.newsList li a:hover{ color: rgba(51,51,51,0.64);}

/*--------------------------------------------------------------
# middle page
--------------------------------------------------------------*/

/* common
--------------------------------------------------------------*/

#page-title{ width: 100%; padding-bottom: 16.0vw; min-height: 100px; background: var(--clr-brown); position: relative; overflow: hidden;}
#page-title:before{ content: ""; width: 100%; height: 100%;position: absolute; top: 0; left: calc(50% - 600px); z-index: 1;}
#page-title:after{ content: ""; width: 100%; height: 100%; background: rgba(var(--clr-brown-rgb),0.72); position: absolute; top: 0; left: 0; z-index: 2;}
#page-title h1{ font-size: 4.8rem; line-height: 1.0em; letter-spacing: 0.1em; color: #FFF; position: absolute; top: 50%; left: 4%; transform: translateY(-50%); z-index: 10;}

/* background */
body#business #page-title:before{ background: url("images/common/business_bg.webp") no-repeat center center; background-size: cover;}
body#company #page-title:before{ background: url("images/common/company_bg.webp") no-repeat center center; background-size: cover;}
body#contact #page-title:before{ background: url("images/common/contact_bg.webp") no-repeat center center; background-size: cover;}
body#complete #page-title:before{ background: url("images/common/contact_bg.webp") no-repeat center center; background-size: cover;}
body#privacy #page-title:before{ background: url("images/common/privacy_bg.webp") no-repeat center center; background-size: cover;}

/* breadcrumbs */
.breadcrumb-container{ width: 90%; max-width: 1200px; margin: 0px auto;}
.breadcrumb-container ol{ display: flex; justify-content: flex-start; flex-wrap: wrap; font-size: 1.4rem; line-height: 1.0em; padding: 1.6rem 0;}
.breadcrumb-container.theme1 a{ margin: 0 !important; padding: 0.8rem !important; font-size: 1.4rem !important; line-height: 1.0em !important;}
.breadcrumb-container li .separator:before{ content: "\e5e1"; font-family: "Material Icons"; font-size: 1.2rem; line-height: 1.0em; position: relative; top: 0.05em;}

/* 事業内容
--------------------------------------------------------------*/
.bis section { padding: 0 2%;}
.bis .half.left figure img{ border-radius: 0 64px 0 0;}
.bis .half.right figure img{ border-radius: 64px 0 0 0;}
.bis .half .inner h2{ font-size: 3.2rem; line-height: 1.2em;}
.bis .half .inner h2 span{ display: block; margin-bottom: 1.0em; font-size: 1.6rem; line-height: 1.0em; color: var(--clr-gold); letter-spacing: 0.25em;}
.bis .half .inner h2 em{ display: inline-block; font-size: 2.0rem; font-style: normal; margin-left: 1.5em;}
.bis .half .inner p{ margin-top: 1.5em;}
.bis .column03{ margin-top: 7.2rem;}
.bis .column03 .inner h3{ font-size: 2.4rem; min-height: 3.0em; line-height: 1.2em; padding-bottom: 0.5em;}
.bis .column03 .inner figure img{ width: 100%; height: auto;}
.bis .column03 .inner p{ margin-top: 1.0em;}
.bis.bg{ background: #FFF;}
.bis section .half.mt{ margin-top: 7.2rem;}

/* 物件紹介
--------------------------------------------------------------*/
/* 一覧 */
main#property{ width: 90%; max-width: 1200px; padding: 6.4rem 2.0em; margin: 0px auto;}
.propertyClm{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.propertyClm .inner{ width: 100%;}
.propertyClm .inner h3.title{ font-size: 2.4rem; line-height: 1.2em;}
.propertyClm .inner ol{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 0.8em;}
.propertyClm .inner ol li{ width: 47%;}
.propertyClm .inner figure{}
.propertyClm .inner figure img{ width: 100%; height: auto;}
.propertyClm .inner .address{ margin-top: 1.0em; line-height: 1.4em;}
.propertyClm .inner .address span { display: block; font-size: 1.4rem; line-height: 1.2em; color: rgba(51,51,51,0.48);}
.propertyClm .inner ul{ margin-top: 1.0em; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0.24em 1.0em;}
.propertyClm .inner ul:before{ content: ""; width: 5px; height: 100%; border: solid 1px #CCC; border-right: none; position: absolute; top: 0; left: 0;}
.propertyClm .inner ul:after{ content: ""; width: 5px; height: 100%; border: solid 1px #CCC; border-left: none; position: absolute; top: 0; right: 0;}
.propertyClm .inner li{ width: 31%;}
.propertyClm .inner li span{ display: block; font-size: 1.4rem; line-height: 1.2em; color: rgba(51,51,51,0.48);}
.propertyClm .inner li strong{ display: block; text-align: right; font-weight: normal;}

.other-property{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 8.0rem;}
.other-property li{ width: 23.5%; margin-right: 2%;}
.other-property li a{ display: block; line-height: 1.2em; font-weight: 600; color: #FFF; text-decoration: none; background: #333; padding: 1.2em 1.5em; position: relative;}
.other-property li a:hover{ background: #111; color: #FFF;}
.other-property li a:before{ content: "\e315"; font-family: "Material Icons"; font-size: 1.4rem; color: var(--clr-gold); position: absolute; top: 50%; right: 1.0em; transform: translateY(-50%); transition: all 0.3s ease 0s;}
.other-property li a:hover:before{ right: 1.2em;}

/* 詳細 */
div#detail.property{ width: 80% !important; max-width: 1200px; padding: 6.4rem 2% 9.6rem !important; margin: 0px auto;}
body.single-property h1.entry-title{ font-size: 4.0rem; line-height: 1.2em;}
body.single-property .entry-content{ margin-top: 4.0rem;}

.gallery-slider-wrap { max-width: 900px; margin: 0 auto;}
.slider-for figure { margin: 0;}
.slider-for img { width: 100%; border-radius: 8px;}
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 16px;}
.thumb-grid figure { margin: 0; cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease;}
.thumb-grid img { width: 100%; border-radius: 4px; opacity: 0.7; display: block;}
.thumb-grid figure:hover img { opacity: 1.0;}
.thumb-grid .active-thumb img { opacity: 1; border: 1px solid rgba(0,0,0,0.72); box-shadow: 0 0 8px rgba(0,0,0,0.08);}
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.8); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease; z-index: 10; box-shadow: 0 0　8px rgba(0,0,0,0.2);}
.gallery-arrow:hover { background: rgba(255,255,255,1);}
.gallery-arrow.prev { left: 10px;}
.gallery-arrow.next { right: 10px;}
.gallery-arrow .material-symbols-outlined { font-size: 24px; color: #333; line-height: 1;}
.gallery-arrow.prev .material-symbols-outlined{ position: relative; left: 2px;}

.property-section{ margin-top: 6.4rem;}
.property-section h2{ font-size: 2.4rem; line-height: 1.2em; margin-bottom: 0.32em;}
.property-basic ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.property-basic ul li{ width: 47%; line-height: 1.4em; display: flex; justify-content: flex-start; flex-wrap: wrap; border-bottom: solid 1px rgba(0,0,0,0.08); padding: 1.0em 0;}
.property-basic ul li strong{ width: 6.0em; font-weight: normal; opacity: 0.48;}
.property-facilities ul{}
.property-facilities ul li{ line-height: 1.4em; padding: 1.0em 0; border-bottom: solid 1px rgba(0,0,0,0.08);}
.property-facilities ul li strong{ display: block; width: 10.0em; font-weight: normal; opacity: 0.48;}
.property-fees ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.property-fees ul li{ width: 47%; line-height: 1.4em; display: flex; justify-content: flex-start; flex-wrap: wrap; border-bottom: solid 1px rgba(0,0,0,0.08); padding: 1.0em 0;}
.property-fees ul li strong{ width: 8.0em; font-weight: normal; opacity: 0.48;}

.cta{ margin-top: 6.4rem;}
.cta h3{ text-align: center; font-size: 2.4rem; line-height: 1.2em;}
.cta .linkButton{ width: 64%; margin: 1.0em auto 0;}
.cta .linkButton a{ display: block; font-weight: 600; font-size: 2.0rem; line-height: 1.0em; color: #FFF; text-decoration: none; background: var(--clr-prim); text-align: center; padding: 1.5em 0; border-radius: 4px;}
.cta .linkButton a:hover{ color: var(--clr-prim); background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,0.08);}

/* 会社案内
--------------------------------------------------------------*/
.com section { padding: 0 2%; text-align: center;}
.com .idea{ border: solid 1px rgba(0,0,0,0.16); padding: 2.0em; position: relative;}
.com .idea h2{ font-size: 2.4rem; line-height: 1.0em; padding: 0 1.0em; background: #F2F2F2; position: absolute; top: -0.6em; left: 50%; transform: translateX(-50%); z-index: 10;}
.com .idea p{ text-align: center; font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal; font-size: 3.2rem; line-height: 1.4em; letter-spacing: 0.1em;}
.com section > p{ text-align: center; font-size: 2.0rem; line-height: 1.4em; margin-top: 2.0em;}
.com section ul{ display: inline-block; margin-top: 1.5em;}
.com section ul li{ list-style-position: outside; list-style-type: decimal; font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal; font-size: 2.0rem; line-height: 1.6em;}
.com table{ width: 72%; margin: 0px auto;}
.com table tr{ border-bottom: solid 1px rgba(0,0,0,0.08);}
.com table tr th{ width: 23.5%; padding: 1.5em 0; line-height: 1.4em; color: rgba(51,51,51,0.56);}
.com table tr td{ width: 76.5%; padding: 1.5em 0; line-height: 1.4em; text-align: left;}
.com .googlemap{ width: 100%; padding-bottom: 56.25%; border: solid 8px #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); position: relative;}
.com .googlemap iframe{ width: 100%; height: 100%; position: absolute; top: 0; right: 0;}

/* プライバシーポリシー
--------------------------------------------------------------*/
body#privacy #post-3 .contents.privacy:nth-child(n+2){ padding-top: 0;}

.privacy section{ padding: 0 2%; margin: 0px auto;}
.privacy h2{ font-size: 2.4rem; line-height: 1.2em;}
.privacy p,
.privacy ol,
.privacy ul,
.privacy dl{ margin-top: 1.0em;}
.privacy ol,
.privacy ul{ padding-left: 1.5em;}
.privacy ol li{ list-style-type: decimal; list-style-position: outside;}
.privacy ul li{ list-style-type: disc; list-style-position: outside;}
.privacy dl{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.privacy dl dt{ width: 4.0em;}
.privacy dl dd{ width: calc(100% - 4.0em);}
.privacy a:after{ content: "\e89e"; font-family: "Material Icons"; display: inline-block; margin-left: 0.4em; position: relative; top: 0.2em;}

/* お問い合わせ
--------------------------------------------------------------*/
.contact section{ padding: 0 2%;}
.contact .phone{ text-align: center;}
.contact .phone a{ display: inline-block; font-size: 4.0rem; line-height: 1.0em; text-decoration: none; color: rgba(51,51,51,1.0); padding-left: 1.0em; position: relative;}
.contact .phone a:before{ content: ""; width: 3.2rem; height: 3.2rem; background: url("images/common/icon_phone.webp") no-repeat; background-size: cover; position: absolute; top: 0.15em; left: 0;}
.contact .phone a:hover{ color: rgba(51,51,51,0.64);}
.contact .phone span{ display: block; text-align: center; line-height: 1.4em;}
.contact .announce{ margin-top: 1.0em; padding-top: 1.0em; text-align: center; border-top: solid 1px rgba(0,0,0,0.08);}

/* お問い合わせ完了画面
--------------------------------------------------------------*/
.complete section{ padding: 0 2%;}
.complete h2.heading{ font-size: 2.4rem;}
.complete section > p{ text-align: center;}
.complete .box{ margin-top: 3.2rem; background: #FFF;padding: 1.5em; border-radius: 4px;}
.complete .box p{ text-align: center; color: var(--clr-prim);}

/* 404 not found
--------------------------------------------------------------*/
body.error404 header#masthead{ position: relative;}
body.error404 header#masthead:after{ content: ""; width: 300%; height: 1px; background: rgba(0,0,0,0.08); position: absolute; bottom: 0; left: -150%;}
body.error404 h1.page-title{ display: none;}

body.error404 .entry-content{ width: 90%; max-width: 1200px; margin: 0px auto; padding: 9.6rem 0;}

section.error404{}
section.error404 h2{ font-family: satoshi; 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
--------------------------------------------------------------*/
body.archive header#masthead,
body.single header#masthead{ position: relative;}
body.archive header#masthead:after,
body.single header#masthead:after{ content: ""; width: 300%; height: 1px; background: rgba(0,0,0,0.08); position: absolute; bottom: 0; left: -150%;}
body.archive .page-header{ display: none;}

body.archive .entry-header{ margin-bottom: 1.0em;}
article.type-post{ padding: 5.6rem 0; border-bottom: solid 1px rgba(0,0,0,0.08);}
article.type-post:nth-of-type(1){ padding-top: 0;}
article.type-post .post-thumbnail{ margin-top: 1.0em; padding-bottom: 40%; position: relative; overflow: hidden;}
article.type-post .post-thumbnail img{ width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
article.type-post .entry-header h1.entry-title,
article.type-post .entry-header h2.entry-title{ font-size: 2.4rem; line-height: 1.2em; padding: 1.0em 0; font-family: YakuHanJP, sans-serif; font-optical-sizing: auto; font-style: normal; word-wrap: break-word;}
article.type-post .entry-header h2.entry-title a{ color: #333; text-decoration: none;}
article.type-post .entry-header h2.entry-title a:hover{ color: rgba(51,51,51,0.64);}
article.type-post .entry-header .entry-meta{ display: flex; justify-content: flex-start; flex-wrap: wrap; background: rgba(0,0,0,0.04); padding: 0.5em;}
article.type-post .entry-header .entry-meta span:nth-child(n+2):before{ content: "|"; margin: 0 0.5em;}
article.type-post .entry-header .entry-meta span a{ display: inline-block; color: #333; text-decoration: none;}
article.type-post .entry-header .entry-meta span a:hover{ color: rgba(51,51,51,0.64); text-decoration: underline;}
article.type-post .entry-content p,
article.type-post .entry-content figure{ margin-top: 1.0em;}
article.type-post .entry-content em{ font-style: italic;}
article.type-post .entry-content del{ text-decoration: line-through;}
article.type-post .entry-content ul{ margin-top: 1.0em; padding-left: 1.2em;}
article.type-post .entry-content ul li{ list-style-type: disc; list-style-position: outside; line-height: 1.4em;}
article.type-post .entry-content ol{ margin-top: 1.0em; padding-left: 1.5em;}
article.type-post .entry-content ol li{ list-style-type: decimal; list-style-position: outside; line-height: 1.4em;}
article.type-post .entry-content ol li ol,
article.type-post .entry-content ol li ul,
article.type-post .entry-content ul li ol,
article.type-post .entry-content ul li ul{ margin-top: 0;}
article.type-post .entry-content ol li ul li{ list-style-type: disc; list-style-position: outside;}
article.type-post .entry-content ol li ul li ol{ margin-top: 0; padding-left: 1.5em;}
article.type-post .entry-content ol li ul li ol li{ list-style-type: decimal; list-style-position: outside; line-height: 1.4em;}
article.type-post .entry-content h2{ font-size: 2.4rem; line-height: 1.2em; padding: 0.24em 0; padding-left: 0.5em; margin-top: 4.0rem; position: relative;}
article.type-post .entry-content h2:before{ content: ""; width: 4px; height: 60%; background: rgba(0,0,0,0.24); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
article.type-post .entry-content h3{ font-size: 2.0rem; line-height: 1.2em; padding: 0.5em 0; border-bottom: solid 1px rgba(0,0,0,0.08); margin-top: 4.0rem;}
article.type-post .entry-content pre{ background: rgba(0,0,0,0.04); border: solid 1px rgba(0,0,0,0.04); padding: 1.0em; margin-top: 1.0em; line-height: 1.4em; overflow: hidden;}
article.type-post .entry-content blockquote{ border-left: solid 2px rgba(0,0,0,0.08); padding: 0 0 0 1.0em;}
article.type-post .entry-content table{ width: 100%; border: solid 1px rgba(0,0,0,0.08); border-collapse: collapse; table-layout: fixed; margin-top: 1.0em;}
article.type-post .entry-content table thead th{ background: #FFF; padding: 1.0em; line-height: 1.4em; border: solid 1px rgba(0,0,0,0.08); border-collapse: collapse; text-align: center;}
article.type-post .entry-content table tbody th{ width: 25%; background: rgba(0,0,0,0.04); padding: 1.0em; line-height: 1.4em; border: solid 1px rgba(0,0,0,0.08); border-collapse: collapse;}
article.type-post .entry-content table tbody td{ padding: 1.0em; line-height: 1.4em; border: solid 1px rgba(0,0,0,0.08); border-collapse: collapse;}
article.type-post .entry-content dl{ margin-top: 1.0em;}
article.type-post .entry-content dl dt{}

.posted-on::before { content: none !important;}

.backBtn{ width: 23.5%; margin: 4.0rem auto 0 !important;}
.backBtn a{ display: block; color: #FFF; background: #222; text-decoration: none; line-height: 1.0em; padding: 1.6em 0; text-align: center; position: relative; z-index: 10; overflow: hidden; border-radius: 4px;}
.backBtn a:hover{ color: #FFF; background: #444;}
.backBtn a:after{ content: "\e408"; font-family: "Material Icons"; position: absolute; top: 50%; left: 1.6em; transform: translateY(-50%); transition: all 0.3s ease 0s;}
.backBtn a:hover:after{ left: 0.8em;}
.backBtn a span{ display: inline-block;}

/* pagenation */
.posts-navigation{ display: none;}
.wp-pagenavi{ margin-top: 6.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{}
.widget h2{ background: rgba(0,0,0,0.032); line-height: 1.2em; padding: 1.2em 0.8em; padding-left: 1.6em; position: relative;}
.widget h2:before{ content: ""; width: 1.0em; height: 1px; background: #333; position: absolute; top: 50%; left: -0.2em;}
.widget ul{ padding: 0;}
.widget ul li{ border-bottom: solid 1px rgba(0,0,0,0.08);}
.widget ul li a{ display: block; padding: 1.0em 0.5em; padding-right: 1.5em; position: relative; color: #666; text-decoration: none;}
.widget ul li a:hover{ color: rgba(51,51,51,0.64); background: #FFF;}
.widget ul li a:after{ content: "\e5e1"; font-family: "Material Icons"; color: rgba(51,51,51,0); font-size: 1.0rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); transition: all 0.3s ease 0s;}
.widget ul li a:hover:after{ right: 0.4em; color: rgba(51,51,51,0.64);}

/* not found */
.notFound{ padding: 4.0rem 0;}
.notFound h3,
.notFound p{ color: rgba(51,51,51,0.4);}
.notFound h3{ font-size: 7.2rem; line-height: 1.2em; text-align: center;}
.notFound p{ font-size: 2.4rem; line-height: 1.6em; text-align: center; margin-top: 0.5em;}

/* next back */
.post-navigation{}
.nav-links{ display: flex; justify-content: space-between; flex-wrap: wrap; 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: "\e5e0"; font-family: "Material Icons"; color: var(--clr-prim); padding-right: 0.1em; position: relative; top: 0.15em;}
.nav-next a:after{ content: "\e5e1"; font-family: "Material Icons"; color: var(--clr-prim); padding-left: 0.1em; position: relative; top: 0.15em;}

/* contact form
--------------------------------------------------------------*/
.wpcf7{ margin-top: 6.4rem; padding-top: 6.4rem; border-top: solid 1px rgba(0,0,0,0.08);}
span.red{ color: var(--clr-prim);}
.policy{ text-align: center; padding: 3.2rem 0;}


.wpcf7-form{}
.wpcf7-form dl{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.wpcf7-form dl dt{ width: 32%; padding: 1.6em 0; position: relative; border-bottom: solid 1px rgba(0,0,0,0.04); display: flex; flex-wrap: wrap; align-items: center;}
.wpcf7-form dl dt span{ display: inline-block; position: relative;}
.wpcf7-form dl dt span.req:before{content: "必須"; font-size: 1.2rem; line-height: 1.0em; color: var(--clr-prim); border: solid 1px var(--clr-prim); padding: 0.24em; position: absolute; top: 0.2em; left: calc(100% + 1.0em); word-break: keep-all; border-radius: 2px;}
.wpcf7-form dl dt em{ display: block; font-size: 1.4rem; line-height: 1.2em; font-style: normal;}
.wpcf7-form dl dd{ width: 68%; padding: 1.6em 0; padding-left: 2.0em; border-bottom: solid 1px rgba(0,0,0,0.04);}
.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: #F9F9F9; padding: 0.64em; margin: 0.24em 0; border-radius: 4px; transition: all 0.3s ease 0s;}
.wpcf7-form dl dd.addr input{ margin-left: 0.24em;}
.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 #DDD;}
.wpcf7-form dl dd input.wpcf7-not-valid,
.wpcf7-form dl dd textarea.wpcf7-not-valid{}
.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; color: #FF0000 !important; margin-top: 0.5em;}
.wpcf7-list-item.first{ margin-left: 0;}
.wpcf7-form input::placeholder{ color:#BBB;}

.wpcf7-spinner{ display: none !important;}
.submit{ text-align: center;}
.submit input[type="button"]{ background: #999; border-color: #999; color: #333; font-size: 1.6rem; line-height: 1.0em; padding: 1.25em 2.0em; border-radius: 0; cursor: pointer; border-radius: 4px; margin-right: 2.0em;}
.submit input[type="submit"]{ background: #222; color: #FFF; border-color: #222; font-size: 1.6rem; line-height: 1.0em; padding: 1.5em 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;}
#wrapper:before{ content: ""; width: 1px; height: 100%; background: rgba(0,0,0,0.08); position: absolute; top: 0; left: calc(50% - 600px); z-index: 1;}
#wrapper:after { content: ""; width: 1px; height: 100%; background: rgba(0,0,0,0.08); position: absolute; top: 0; left: calc(50% + 600px); z-index: 1;}

/* header */
header#masthead{ width: 1200px; margin: 0px auto; padding: 4.0rem 2%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
header#masthead .site-branding{ width: 24%;}
header#masthead .site-branding .site-title{ margin: 0; padding: 0;}
header#masthead .site-branding .site-title img{ width: 100%; height: auto;}
header#masthead #site-navigation{ width: 76%;}

/* cta */
#cta{ width: 100%; background: url("images/common/cta_bg.webp") no-repeat; background-size: cover; background-attachment: fixed; background-position: center center; padding: 4.8rem 0; position: relative; overflow: hidden; z-index: 2;}
@media screen and (max-width: 768px) {
/* モバイルでは固定背景が効かないブラウザが多いのでオフにする */
#cta { background-attachment: scroll;}
}
#cta:before{ content: ""; width: 100%; height: 100%; background: rgba(var(--clr-brown-rgb),0.8); position: absolute; top: 0; left: 0; z-index: 3;}
#cta section{ width: 90%; max-width: 1200px; margin: 0px auto; position: relative; z-index: 4;}
#cta section h2.heading{ color: #FFF;}
#cta section h2.heading span{ color: rgba(255,255,255,0.48);}
#cta section p{ text-align: center; margin-top: 1.0em; color: #FFF;}
#cta section ul{ display: flex; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 2.4rem;}
#cta section ul li{}
#cta section ul li.phone{}
#cta section ul li.phone a{ font-size: 4.0rem; line-height: 1.0em; color: #FFF; text-decoration: none; padding-left: 4.0rem; position: relative;}
#cta section ul li.phone a:hover{ color: rgba(255,255,255,0.64);}
#cta section ul li.phone a:before{ content: ""; width: 3.2rem; height: 3.2rem; background: url("images/common/phone_icon.webp") no-repeat; background-size: contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
#cta section ul li.phone span{ display: block; font-size: 1.2rem; color: #FFF; line-height: 1.0em; margin-top: 0.5em; padding-left: 4.2rem;}
#cta section ul li.button{ margin-left: 4.8rem;}
#cta section ul li.button a{ display: inline-block; font-size: 2.0rem; line-height: 1.0em; font-weight: 700; color: #FFF; text-decoration: none; background: var(--clr-prim); padding: 1.0em 2.4em; border-radius: 4px;}
#cta section ul li.button a:hover{ background: #FFF; color: var(--clr-prim);}
#cta section ul li.button a span{}
#cta section{}
#cta section .coution{ margin-top: 2.4rem; padding-top: 2.4rem; border-top: solid 1px rgba(255,255,255,0.16);}

/* footer */
footer#colophon{ width: 100%; background: #222; padding: 6.4rem 0;}
footer#colophon .site-info{ width: 90%; max-width: 1200px; margin: 0px auto;}
footer#colophon .site-info .siteLogo{ width: 24%; margin: 0px auto;}
footer#colophon .site-info .siteLogo img{ width: 100%; height: auto;}
footer#colophon .site-info address{ color: #FFF; text-align: center; margin-top: 2.4rem;}
footer#colophon .site-info .externalLink{ margin-top: 2.4rem; padding-top: 2.4rem; border-top: solid 1px rgba(255,255,255,0.16); display: flex; justify-content: center; flex-wrap: wrap;}
footer#colophon .site-info .externalLink li{ width: 20%; line-height: 1.0em;}
footer#colophon .site-info .externalLink li:nth-child(n+2){ margin-left: 2.4rem;}
footer#colophon .site-info .externalLink li a{ display: block; color: #FFF; background: #333; text-decoration: none; padding: 0.8em 0; text-align: center; border-radius: 100px;}
footer#colophon .site-info .externalLink li a:hover{ background: #DDD; color: #111;}
footer#colophon .site-info .footerNavi{ margin-top: 2.4rem;}
footer#colophon .site-info .footerNavi ul{ display: flex; justify-content: center; flex-wrap: wrap;}
footer#colophon .site-info .footerNavi ul li{ line-height: 1.0em;}
footer#colophon .site-info .footerNavi ul li:nth-child(n+2):before{ content: "｜"; padding: 0 0.5em;}
footer#colophon .site-info .footerNavi ul li a{ display: inline-block; color: #FFF; text-decoration: none;}
footer#colophon .site-info .footerNavi ul li a:hover{ color: rgba(255,255,255,0.64);}
footer#colophon .site-info .copyright{ color: #FFF; text-align: center; margin-top: 4.0rem;}

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

/* Navigation
--------------------------------------------- */
.menu-navigation-container{ display: none;}
#site-navigation{}
#primary-menu{ display: flex; justify-content: flex-end; flex-wrap: wrap;}
#primary-menu li{ font-size: 1.6rem; line-height: 1.0em; font-weight: 700; position: relative; z-index: 100;}
#primary-menu li:nth-child(n+2){ margin-left: 0.5em;}
#primary-menu li a{ display: block; color: #333; text-decoration: none; padding: 0.8em 1.0em; position: relative; text-align: center; cursor: pointer;}
#primary-menu li a:hover{ color: rgba(51,51,51,0.64);}
#primary-menu li ul{ display: block; position: absolute; width: 160%; top: 110%; left: -30%; 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{ border-bottom: solid 1px #EEE;}
#primary-menu li ul li:last-child{ border-bottom: none;}
#primary-menu li ul li a{ display: block; color: #333; padding: 1.0em 0.5em; line-height: 1.4em; position: relative; text-align: center;}
#primary-menu li ul li a:hover{ color: rgba(51,51,51),0.72); background: rgba(51,51,51,0.08); text-decoration: none;}
#primary-menu li ul li a:after{ content: none;}

/* hidden */
#primary-menu li#menu-item-28,
#primary-menu li#menu-item-38{ display: none;}

/* contact button */
#primary-menu li#menu-item-32 { margin-left: 1.0em;}
#primary-menu li#menu-item-32 a{ background: var(--clr-prim); color: #FFF; font-weight: 700; padding: 0.8em 2.4em; border-radius: 100px;}
#primary-menu li#menu-item-32 a:hover{ background: #FFF; color: var(--clr-prim); box-shadow: 0 0 16px rgba(0,0,0,0.08);}

.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.4em 0; font-size: 1.4rem; line-height: 1.4em;}
.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
=============================================================*/
body{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size: 1.6rem;
	line-height: 1.6em;
	font-family: YakuHanJP, "Satoshi", -apple-system, BlinkMacSystemFont, "Helvetica Neue",Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-optical-sizing: auto;
	color: #333;
	background: #F2F2F2;
	-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: 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;}