@charset "UTF-8";

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

/* index */
#toppage{}
#toppage article.contents{ width: 100%; padding-block:8.0rem; position: relative;}
#toppage article.contents section{ width: 90%; margin: 0px auto; max-width: 1200px;}

/* static */
#static{ position: relative;}
#static article.contents{ width: 100%; padding-block:8.0rem; position: relative;}
#static article.contents section{ width: 90%; margin: 0px auto; max-width: 1200px;}

/* category / archive / single */
#archive,
#primary,
#single-post{ width: 90%; max-width: 1200px; margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
#archive #archive-list,
#primary #container,
#single-post #detail{ width: 72%; order: 1;}
#archive #secondary,
#primary #secondary,
#single-post #secondary{ width: 24%; order: 2;}

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

/* font-family */
h1,
h2,
h3{ font-family: "Shippori Mincho B1", serif; font-weight: 400; font-style: normal;}

/*--------------------------------------------------------------
# top page
--------------------------------------------------------------*/
body#home #wrapper{ position: relative;}
body#home #wrapper:before{ content: ""; width: 480px; height: 504px; background: url("images/decoration.svg") no-repeat; position: absolute; top: 0; right: 0; z-index: -1;}

#hero-area{ position: relative; width: 96%; height: 42.3vw; min-height: 540px; margin: 0px auto;}
.hero-slider{ margin: 0; padding: 0; list-style: none; width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 24px;}
.hero-slider:before{ content: ""; width: 100%; height: 100%; background: rgba(102,102,102,0.4); position: absolute; top: 0; left: 0; z-index: 3;}
.hero-slide{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: scale(1.0); z-index: 1; transition: opacity 2s ease-in-out, transform 0.1s linear 2s;}
.hero-slide.is-active { opacity: 1; transform: scale(1.15); z-index: 2; transition: opacity 2s ease-in-out, transform 8s linear 0s;}
.slide-1 { background-image: url("images/promo/promo_01.webp"); background-position:  center bottom;}
.slide-2 { background-image: url("images/promo/promo_04.webp"); background-position:  center center;}
.slide-3 { background-image: url("images/promo/promo_03.webp"); background-position:  center center;}
.hero-content { position: absolute; top: 25%; left: 5%; z-index: 10;}
.hero-content h2{ writing-mode: vertical-rl;}
.hero-content h2 span{ display: inline-block; font-size: var(--font-catchcopy); line-height: 1.0em; background: rgba(0,153,68,0.8); padding: 0.48em; color: #FFF; letter-spacing: 0.2em; margin: 0 0.08em;}

/* introduction */
.intro h2{ font-size: var(--font-middle); line-height: 1.2em; text-align: center; position: relative;}
.intro h2:before{ content: ""; width: 2px; height: 1.6em; background: var(--clr-green); position: absolute; bottom: 106%; left: 50%; transform: translateX(-50%);}
.intro p{ text-align: center; margin-top: 1.5em;}

/* business */
.home-bis{ background: #F6F6F6; position: relative;}
.home-bis:before{ content: ""; width: 200px; height: 200px; background: url("images/home/corner_01.svg") no-repeat; background-size: cover; position: absolute; top: 0; right: 0; z-index: 1;}
.home-bis:after{ content: ""; width: 200px; height: 200px; background: url("images/home/corner_02.svg") no-repeat; background-size: cover; position: absolute; bottom: 0; left: 0; z-index: 1;}
.home-bis h2{ font-size: var(--font-middle); text-align: center; line-height: 1.2em; margin-bottom: 0.8em;}
.home-bis h2 span{ display: block; font-size: 1.6rem; line-height: 1.2em; text-align: center; color: var(--clr-green);}
.home-bis .column{ display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 10;}
.home-bis .column .inner{ width: 23.5%;}
.home-bis .column .inner figure img{ width: 100%; height: auto; border-radius: 8px; overflow: hidden;}
.home-bis .column .inner h3{ font-size: var(--font-small); color: var(--clr-green); line-height: 1.2em; margin: 1.0em 0 0.5em; padding-bottom: 0.5em; border-bottom: solid 1px #DDD;}
.home-bis .button{ width: 26%; margin: 2.4rem auto 0;}
.home-bis .button a{ display: block; text-align: center; background: #555; color: #FFF; font-weight: 700; line-height: 1.0em; text-decoration: none; padding: 1.2em 0;}
.home-bis .button a:hover{ color: #333; background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,0.16);}

/* about us */
.home-about section{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.home-about section .detail{ width: 47%;}
.home-about section .detail h2{ font-size: var(--font-middle); line-height: 1.2em; padding-left: 6.3rem; position: relative;}
.home-about section .detail h2:before{ content: ""; width: 55px; height: 55px; background: url("images/home/heading.svg") no-repeat; background-size: cover; position: absolute; top: 0; left: 0;}
.home-about section .detail h2 span{ display: block; font-size: 1.6rem; line-height: 1.2em; color: var(--clr-green);}
.home-about section .detail p{ margin-top: 1.0em;}
.home-about section .detail dl{ margin-top: 3.2rem; padding-top: 3.2rem; border-top: solid 1px #DDD; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;}
.home-about section .detail dl:before{ content: ""; width: 96px; height: 96px; background: url("images/kes- license.png") no-repeat; background-size: cover; position: absolute; bottom: 0; right: 0;}
.home-about section .detail dl dt{ padding: 0.5em 0; width: 9.0em; font-weight: 700;}
.home-about section .detail dl dd{ padding: 0.5em 0; width: calc(100% - 9.0em);}
.home-about section .image{ width: 47%;}
.home-about section .image figure img{ width: 100%; height: auto; border-radius: 8px; overflow: hidden;}
.home-about section .image ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.0em;}
.home-about section .image ul li{ width: 48%; border-bottom: solid 1px #DDD;}
.home-about section .image ul li a{ display: block; color: #333; padding: 1.0em 0; text-decoration: none; line-height: 1.2em; position: relative;}
.home-about section .image ul li a:hover{ color: var(--clr-green);}
.home-about section .image ul li a:after{ content: "\e941"; font-family: "Material Icons"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: var(--clr-green); transition: all 0.3s ease 0s;}
.home-about section .image ul li a:hover:after{ right: 0.32em;}


/*--------------------------------------------------------------
# middle page
--------------------------------------------------------------*/
#page-title{ width: 100%; padding-bottom: 20.0vw; min-height: 240px; position: relative;}
#page-title:before{ content: ""; width: 100%; height: 100%; background: rgba(102,102,102,0.56); position: absolute; top: 0; left: 0; z-index: 1;}
#page-title h1{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10;}
#page-title h1 span{ display: inline-block; font-size: var(--font-large); line-height: 1.0em; color: #FFF;}
#page-title h1 span:before{ content: ""; font-size: 1.6rem; line-height: 1.2em; display: block; text-align: center; font-family: Arial, Helvetica, "sans-serif"; color: var(--clr-green); margin-bottom: 0.24em;}

body#message main:before,
body#business main:before,
body#company main:before{ content: ""; width: 480px; height: 504px; background: url("images/decoration.svg") no-repeat; position: absolute; top: 0; left: calc( 50% + 600px); z-index: -1;}

/* promo */
body#message #page-title h1 span:before{ content: "MESSAGE";}
body#message #page-title{ background: url("images/promo/promo_01.webp") no-repeat center bottom; background-size: cover;}
body#business #page-title h1 span:before{ content: "BUSINESS";}
body#business #page-title{ background: url("images/promo/promo_02.webp") no-repeat center -200px; background-size: cover;}
body#company #page-title h1 span:before{ content: "ABOUT US";}
body#company #page-title{ background: url("images/promo/promo_03.webp") no-repeat center center; background-size: cover;}
body#recruit #page-title h1 span:before{ content: "RECRUIT";}
body#recruit #page-title{ background: url("images/promo/promo_05.webp") no-repeat center -8.0rem; background-size: cover;}
body#completed #page-title h1 span:before{ content: "RECRUIT";}
body#completed #page-title{ background: url("images/promo/promo_05.webp") no-repeat center -8.0rem; background-size: cover;}

/* heading */
h2.heading{ font-size: var(--font-large); line-height: 1.2em; padding-bottom: 0.24em; position: relative; margin-bottom: 0.64em;}
h2.heading:before{ content: ""; width: 1.0em; height: 1px; background: var(--clr-green); position: absolute; bottom: 0; left: 0;}
h3.heading{ font-size: var(--font-middle); line-height: 1.2em; padding: 0.64em 0; border-bottom: solid 1px #DDD; margin: 6.4rem 0 0.64em; position: relative;}
h3.heading:after{ content: ""; width: 1.0em; height: 1px; background: var(--clr-green); position: absolute; bottom: 0; left: 0; z-index: 10;}


/* ごあいさつ
--------------------------------------------------------------*/
.message p{ margin-top: 1.0em;}
.message h3{ width: 260px; margin: 3.2rem 0 0 auto;}
.message h3 img{ width: 100%; height: auto;}

.idea{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.idea dl{ width: 31%;}
.idea dl dt figure img{ width: 100%; height: auto;}
.idea dl dd{ margin-top: 0.72em; text-align: center; line-height: 1.3em; font-weight: 700; font-size: var(--font-sup);}

/* 事業内容
--------------------------------------------------------------*/
.business{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 4.0rem;}
.business .inner{ width: 47%;}
.business .inner:nth-child(n+3){ margin-top: 4.0rem;}
.business .inner figure{ margin-bottom: 0;}
.business .inner figure img{ width: 100%; height: auto; border-radius: 8px; overflow: hidden;}
.business .inner h3{ font-size: var(--font-small); line-height: 1.2em; padding: 0.56em 0; border-bottom: solid 1px #DDD; margin: 0.56em 0; position: relative;}
.business .inner h3:after{ content: ""; width: 1.0em; height: 1px; background: var(--clr-green); position: absolute; bottom: 0; left: 0; z-index: 10;}
.business .inner h4{ font-weight: 700; font-size: var(--font-sup); line-height: 1.2em; margin-bottom: 0.5em;}

div.license{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 4.0rem; padding-top: 4.0rem; border-top: solid 1px #DDD; position: relative;}
div.license:before{ content: ""; width: 126px; height: 126px; background: url("images/kes- license.png") no-repeat; background-size: cover; position: absolute; bottom: 0; left: 0;}
.license dl{ width: 45%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.license dl dt{ width: 8.0em; font-weight: 700; line-height: 1.2em; padding: 0.5em 0;}
.license dl dd{ width: calc(100% - 8.0em); line-height: 1.2em; padding: 0.5em 0;}
.license dl:nth-of-type(2) dt{ width: 11.0em;}
.license dl:nth-of-type(2) dd{ width: calc(100% - 11.0em); text-align: right;}

/* 会社案内
--------------------------------------------------------------*/
.outline{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.outline figure.image{ width: 40%; order: 2;}
.outline figure.image img{ width: 100%; height: auto;}
.outline .inner{ width: 56%; order: 1;}
.outline .inner table{ width: 100%;}
.outline .inner table tr{ border-bottom: solid 1px #EEE;}
.outline .inner table tr:last-child{ border-bottom: none;}
.outline .inner table tr th{ width: 23.5%; padding: 1.0em 0; line-height: 1.4em; font-weight: 700;}
.outline .inner table tr td{ width: calc(100% - 23.5%); padding: 1.0em 0; padding-left: 1.0em; line-height: 1.4em;}
.outline .inner table tr td dl dt{ font-weight: 700;}
.outline .inner table tr td dl dt:nth-of-type(n+2){ margin-top: 1.0em;}
.outline .inner table tr td ul{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.outline .inner table tr td ul li{ padding-right: 1.0em; word-break: keep-all;}
.outline .inner table tr td ul li:before{content: "\e39e"; font-family: "Material Icons"; margin-right: 0.24em; font-size: 1.0rem; position: relative; top: -0.1em; color: var(--clr-green);}

.history{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.history figure.image{ width: 32%; order: 1;}
.history figure.image img{ width: 100%; height: auto;}
.history .inner{ width: 64%; order: 2;}
.history .inner table{ width: 100%;}
.history .inner table tr{ display: flex; justify-content: space-between;}
.history .inner table tr:last-child{}
.history .inner table tr th{ width: 23.5%; padding: 0.64em 0; line-height: 1.4em; font-weight: 700; display: flex; justify-content: flex-start;}
.history .inner table tr th span{ width: 5.0em; text-align: right;}
.history .inner table tr th em{ width: 3.0em; font-style: normal; text-align: right;}
.history .inner table tr td{ width: calc(100% - 23.5%); padding: 0.64em 0; padding-left: 1.0em; line-height: 1.4em;}

/* 採用情報
--------------------------------------------------------------*/
.c-recruit-stopped { padding: 8.0rem 0; background-color: #f9f9f9;}
.c-recruit-stopped section {width: 90%; max-width: 1200px; margin: 0 auto; background: #fff; padding: 4.8rem; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.08);}
.c-recruit-stopped h3 { font-size: var(--font-small); text-align: center;}
.c-recruit-stopped p { text-align: center; margin-top: 1.0em;}
.c-recruit-stopped_btn{ margin: 1.5em auto 0; text-align: center;}
.c-recruit-stopped_btn a { display: inline-block; padding: 12px 40px; background-color: #333; color: #fff; text-decoration: none; border-radius: 4px; transition: opacity 0.3s;}
.c-recruit-stopped_btn a:hover { opacity: 0.7;}

.outline table{ width: 100%; border: solid 1px #DDD; border-collapse: collapse;}
.outline table th{ width: 23.5%; text-align: center; font-weight: 600; line-height: 1.4em; background: #F9F9F9; padding: 1.0em; border: solid 1px #DDD;}
.outline table td{ width: 76.5%; line-height: 1.4em; padding: 1.0em; border: solid 1px #DDD;}

.form{ background: #F9F9F9;}

.completed h2.heading{ font-size: var(--font-small);}

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

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

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

/*　archive/category　*/

/* single */

/* 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{ margin-top: 6.4rem;}
.widget:nth-child(1){ margin-top: 0;}
.widget h2{ background: rgba(0,0,0,0.032); font-weight: 600; 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{ margin-top: 0.5em;}
.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,0); 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.64);}

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

/* contact form
--------------------------------------------------------------*/
.wpcf7-form{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.wpcf7-form dl.clm02{ width: 100%;}
.wpcf7-form dl.clm02 dt{ width: 23.5%;}
.wpcf7-form dl.clm02 dd{ width: 76.5%;}
.wpcf7-form dl{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.wpcf7-form dl dt{ width: 23.5%; padding: 1.0em 0; position: relative; border-bottom: solid 1px #EEE; display: flex; flex-wrap: wrap; align-items: center;}
.wpcf7-form dl dt span { display: inline-block; position: relative;}
.wpcf7-form dl dt span:before{ content: "必須"; font-size: 1.2rem; line-height: 1.0em; font-weight: 700; color: #FFF; background: var(--clr-green); padding: 0.16em; border-radius: 4px; position: absolute; top: 50%; left: calc(100% + 1.0em); transform: translateY(-50%); word-break: keep-all;}
.wpcf7-form dl dt em{ display: block; font-size: 1.4rem; line-height: 1.2em; font-style: normal;}
.wpcf7-form dl dd{ width: 76.5%; padding: 1.0em 0; padding-left: 2.0em; 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{ width: 100%; border: solid 1px #CCC; background: #FFF; padding: 0.72em; border-radius: 4px; transition: all 0.3s ease 0s;}
.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 #999;}
.wpcf7-form dl dd input.wpcf7-not-valid,
.wpcf7-form dl dd textarea.wpcf7-not-valid{}
.wpcf7-form dl dd ul li{ display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.wpcf7-form dl dd ul li:nth-child(n+2){ margin-top: 0.48em;}
.wpcf7-form dl dd ul li span{ width: 8.0em;}
.wpcf7-form dl dd ul li span.wpcf7-form-control-wrap{ width: calc(100% - 8.0em);}
.wpcf7-form dl dd ul li span.wpcf7-not-valid-tip{ width: 100%;}
.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.2rem !important; line-height: 1.2em !important; color: #666 !important; margin-top: 0.5em;}
.wpcf7-list-item.first{ margin-left: 0;}

.wpcf7-form div{ width: 100%; margin-top: 2.0em;}
.wpcf7-form div p{ text-align: center;}
.wpcf7-form div span.wpcf7-list-item{ display: block; text-align: center; margin-top: 1.0em;}

.wpcf7-spinner{ display: none !important;}
.submit-container{ text-align: center; width: 100%; margin-top: 2.0em;}
.submit-container input[type="button"]{ background: #EEE; border-color: E4E4E4; font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 2.0em; border-radius: 0; cursor: pointer; border-radius: 4px; margin-right: 2.0em;}
.submit-container input[type="submit"]{ background: var(--clr-green); color: #FFF; border-color: var(--clr-green); font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 4.0em; 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{ padding: 2.4rem 0;}
header#masthead section{ width: 96%; margin: 0px auto; max-width: 1600px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
header#masthead section .site-branding{}
header#masthead section .site-branding .site-title{ width: 260px;}
header#masthead section .site-branding .site-title img{ width: 100%; height: auto;}

/* breadcrumb */
.breadcrumbs{ background: rgba(0,0,0,0.04); width: 100%; padding: 0.64em 0;}
.breadcrumbs nav{ width: 90%; margin: 0px auto; max-width: 1200px; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.breadcrumbs nav > span{ font-size: 1.4rem; line-height: 1.0em; color: rgba(51,51,51,0.64); padding: 0 0.64em;}
.breadcrumbs nav > span:first-child{ padding-left: 0;}
.breadcrumbs nav > span a{ display: inline-block; color: #333; text-decoration: none;}
.breadcrumbs nav > span a:hover{ color: rgba(51,51,51,0.64);}

/* footer */
footer#colophon{ background: #444; padding: 4.0rem 0; border-bottom: solid 4px var(--clr-green);}
footer#colophon section{ width: 90%; margin: 0px auto; max-width: 1200px;}
footer#colophon section .site-title{ width: 260px; margin: 0px auto;}
footer#colophon section .site-title img{ width: 100%; height: auto;}
footer#colophon section .address{ color: #FFF; text-align: center; line-height: 1.2em; margin-top: 1.0em;}
footer#colophon section .license{ color: #FFF; text-align: center; line-height: 1.2em; margin-top: 0.24em;}
footer#colophon section .site-info{ margin-top: 2.4rem; padding-top: 2.4rem; border-top: solid 1px rgba(255,255,255,0.08);}
footer#colophon section .site-info ul{ display: flex; justify-content: center; flex-wrap: wrap;}
footer#colophon section .site-info ul li{ margin: 0 1.0rem; position: relative;}
footer#colophon section .site-info ul li:nth-of-type(n+2):before{ content: ""; width: 1px; height: 32%; background: #FFF; position: absolute; top: 50%; left: -1.0rem; transform: translateY(-50%);}
footer#colophon section .site-info ul li a{ display: inline-block; color: #FFF; text-decoration: none; padding: 0.4em;}
footer#colophon section .site-info ul li a:hover{ color: rgba(255,255,255,0.64);}
footer#colophon section .copyright{ text-align: center; color: #FFF; line-height: 1.2em; margin-top: 2.4rem;}

#btm-map{ position: relative; width: 100%; margin: 0px auto; padding-bottom: 20vw;}
#btm-map:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
#btm-map iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}

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

/* Navigation
--------------------------------------------- */
.menu-navigation-container{ display: none;}
#site-navigation{}
#primary-menu{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#primary-menu li{ font-size: 1.6rem; line-height: 1.0em; position: relative;}
#primary-menu li:nth-of-type(n+2):before{ content: ""; width: 4px; height: 4px; background: #DDD; border-radius: 4px; position: absolute; top: 50%; left: -2px; transform: translateY(-50%);}
#primary-menu li a{ display: block; color: #333; text-decoration: none; padding: 0.8em 1.6em; position: relative;}
#primary-menu li a:hover{ color: var(--clr-green);}
#primary-menu li a:after{ content: ""; width: 0; height: 1px; background: var(--clr-green); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0s;}
#primary-menu li a:hover:after{ width: 80%;}
#primary-menu li ul{ display: block; position: absolute; width: 100%; top: 110%; left: 0; nowhitespace: afterproperty; opacity: 0; transition: all 0.3s ease 0s; visibility: hidden; z-index: 100; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16);}
#primary-menu li:hover ul{ top: 100%; margin: 0; opacity: 1; visibility: visible;}
.menu-toggle { display: none;}

#primary-menu li#menu-item-52:before{ content: none; font-weight: 700;}
#primary-menu li#menu-item-52 a{ background: var(--clr-green); color: #FFF; border-radius: 4px; padding: 0.8em 2.4em;}
#primary-menu li#menu-item-52 a:hover{ color: #FFF; background: var(--clr-hover);}
#primary-menu li#menu-item-52 a:after{ content: 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%;}