@charset "UTF-8";

:root{
--clr-ble:#0C318C;
--clr-org:#F0871D;
--clr-grn:#25A53A;
--clr-navy:#1A274C;
}
:root{
--clr-ble-rgb:12,49,140;
--clr-org-rgb:240,135,29;
--clr-grn-rgb:37,165,58;
--clr-navy-rgb:26,39,76;
}
:root {
--font-s: clamp(1.6rem, 2vw, 2.0rem);
--font-m: clamp(2.0rem, 4vw, 2.4rem);
--font-l: clamp(2.4rem, 6vw, 3.2rem);
--font-xl: clamp(2.8rem, 8vw, 4.8rem);
}
:root {
--space-s: clamp(1.6rem, 2vw, 3.2rem);
--space-m: clamp(2.4rem, 4vw, 4.8rem);
--space-l: clamp(3.2rem, 6vw, 7.2rem);
--space-xl: clamp(4.0rem, 8vw, 9.6rem);
}
.en,
.marquee-content span{ font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}

.pcbr{ display: none;}
.spbr{ display: block;}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
main p, main dt, main dd, main li, main td { word-break: auto-phrase;}

/* index */
#toppage{ padding-bottom: var(--space-xl);}

/* static */
#static{ padding-bottom: var(--space-xl);}
#static .contents section > p{ margin-top: var(--space-s);}

/* category / archive / single */
#archive,
#primary,
#single-post{ width: 92%; max-width: 1200px; 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: var(--space-xl);}

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

/* contents layout */
article.contents{ width: 100%; padding: var(--space-xl) 0 0 0;}
article.contents section{ width: 90%; margin: 0 auto; max-width: 1200px; position: relative;}

.half{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.half figure{ width: 100%;}
.half .inner{ width: 100%; margin-top: 1.5em;}
.half figure img{ width: 100%; height: auto; border-radius: 16px; overflow: hidden;}
.half.left figure{ order: 1;}
.half.right figure{ order: 1;}
.half.right .inner{ order: 2;}
.half.left .inner{ order: 2;}

/* kerning */
.small-kana { font-size: 0.85em; letter-spacing: -0.05em; display: inline-block; transform-origin: center bottom;}
@media screen and (max-width: 768px) {
.small-kana { font-size: 0.85em; letter-spacing: -0.05em;}
}

/*--------------------------------------------------------------
# top page
--------------------------------------------------------------*/
body#home .entry-header{ display: none !important;}

@keyframes marquee { 0% { transform: translateX(0%);} 100% { transform: translateX(-50%);}}
.marquee-container { overflow: hidden; white-space: nowrap; width: 100%;}
.marquee-content { display: inline-block; animation: marquee 20s linear infinite;}
.marquee-content span { display: inline-block; padding-right: 2em; font-size: clamp(8.0rem,14vw,16.0rem); line-height: 1.0em; color: rgba(var(--clr-ble-rgb),0.08); user-select: none;}

.slide-show { overflow: hidden; width: 90%; margin: 0 auto; position: relative; border-radius: 24px; overflow: hidden;}
.slide-list { display: flex; padding: 0; margin: 0; list-style: none; transition: transform 0.8s ease-in-out;}
.slide-list li { width: 100%; flex-shrink: 0; box-sizing: border-box;}
.slide-list img { width: 100%; max-width: 1200px; height: auto; display: block; margin: 0 auto;}
@media (min-width: 768px) { .slide-list li { width: 80%; padding: 0 10px;}}

/* 部品加工のお困りごとご相談ください！ */
.intro{}
.intro h2{ font-size: var(--font-xl); line-height: 1.2em; text-align: center; font-weight: 700; color: var(--clr-navy);}
.intro ul{ width: 72%; margin: var(--space-s) auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.intro ul li{ width: 100%;}
.intro ul li:nth-child(n+2){ margin-top: 1.0em;}
.intro ul li img{ width: 100%; height: auto;}
.intro p{ text-align: center; font-weight: 500; font-size: var(--font-s); line-height: 1.4em; margin-top: var(--space-s);}

/* 京都工業所だからこそできる柔軟な対応 */
.contents.about{ padding: var(--space-xl) 0 calc( var(--space-xl) + 8.0lh) !important; position: relative; margin: var(--space-xl) auto;}
.contents.about:before{ content: ""; width: 100%; height: 100%; background: var(--clr-ble); border-radius: 80px 0 80px 0; position: absolute; top: 0; left: 0; z-index: -1;}
.contents.about section{ position: static;}
.about h2 { text-align: center; font-size: var(--font-xl); line-height: 1.3; color: #FFF; font-weight: 700;}
.about h2 span { display: inline; background-image: linear-gradient(transparent calc(100% - 8px), var(--clr-grn) calc(100% - 8px)); transition: all 0.3s;}
.about .half{ margin-top: var(--space-m);}
.about .half .inner h3{ font-size: 1.4rem; font-weight: 700; line-height: 1.4em; color: #FFF; text-align: center;}
.about .half .inner h3 strong{ font-size: var(--font-s); font-weight: 700; line-height: 1.4em; color: #FFF; margin-bottom: 0.24em;}
.about .half .inner p{ color: #FFF; margin-top: var(--space-s); position: absolute; bottom: var(--space-xl); left: 5%; width: 90%;}
.about .column{ margin-top: var(--space-m); display: flex; justify-content: space-between; flex-wrap: wrap;}
.about .column .inner{ width: 100%;}
.about .column .inner:nth-child(n+2){ margin-top: var(--space-s);}
.about .column .inner h4{ font-size: 1.8rem; line-height: 1.0em; font-weight: 700; color: #FFF; padding: 0.8em 1.6em; position: relative;}
.about .column .inner:nth-child(odd) h4:before { content: ""; width: 106%; height: 100%; background-color: var(--clr-grn); position: absolute; top: 0; left: -6%; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% calc(0%), calc(100% - 30px) 100%, 0 100%);}
.about .column .inner p{ color: #FFF; margin-top: 1.0em;}
.about .column .inner:nth-child(even) h4:before { content: ""; width: 106%; height: 100%; background-color: var(--clr-grn); position: absolute; top: 0; right: -6%; z-index: -1; clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 100%);}
.about .column .inner p{ color: #FFF; margin-top: 1.0em;}

/* お知らせ */
.news-list{}
.news-list h2{ font-size: var(--font-l); line-height: 1.0em; text-align: center; color: var(--clr-navy);}
.news-list h2 span{ display: block; font-size: 1.6rem; line-height: 1.0em; text-align: center; color: var(--clr-grn);}
.information-list { margin: var(--space-s) auto 0; width: 100%;}
.information-list li { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; padding: 1.0em 0; border-bottom: solid 1px #DDD;}
.info-date { width: 6.0em;}
.info-category { min-width: 6.0em; text-align: center; padding: 0.24em 0; border-radius: 100px; font-size: 1.4rem; line-height: 1.0em; background: #EEE; margin-right: 1.0em;}
.info-title {}
.info-title:hover {}

.more-button{ width: 72%; margin: var(--space-s) auto 0;}
.more-button a{ display: block; text-align: center; text-decoration: none; font-weight: 700; line-height: 1.0em; color: #333; padding: 1.6em 0; border-radius: 8px; position: relative; background: #EEE;}
.more-button a:before{ content: ""; width: 1.6rem; height: 1.6rem; background: url(./images/common/icon_arrow.svg) no-repeat; background-size: cover; position: absolute; top: 50%; right: 2.0em; transform: translateY(-50%); transition: all 0.3s ease 0s;}
.more-button a:after{ content: ""; width: 1.6rem; height: 1.6rem; background: url(./images/common/icon_arrow_active.svg) no-repeat; background-size: cover; position: absolute; top: 50%; right: 2.0em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.more-button a:hover{ background: var(--clr-navy); color: #FFF;}
.more-button a:hover:before{ opacity: 0.0;}
.more-button a:hover:after{ opacity: 1.0;}

/*--------------------------------------------------------------
# middle page
--------------------------------------------------------------*/
#page-title{ width: 100%; padding: 3.2em 5%; position: relative; z-index: 10; overflow: hidden;}
#page-title:before{ content: ""; width: 100%; height: 100%; background: var(--clr-ble); border-radius: 40px 0 0 0; position: absolute; top: 0; left: 0; z-index: -2;}
#page-title h1{ font-size: clamp(2.4rem, 7.2vw, 4.8rem); line-height: 1.2em; color: #FFF; position: relative; text-align: center;}
#page-title h1 span{ font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: clamp(2.0rem, 4.8vw, 3.2rem); line-height: 1.0em; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); opacity: 0.24; user-select: none;}

#page-title.company:after{ content: ""; width: 100%; height: 100%; background: url(./images/promo/company.webp) no-repeat center center; background-size: 100%; opacity: 0.24; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: -1; border-radius: 40px 0 0 0;}
#page-title.equipment:after{ content: ""; width: 100%; height: 100%; background: url(./images/promo/equipment.webp) no-repeat center center; background-size: 100%; opacity: 0.24; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: -1; border-radius: 40px 0 0 0;}
#page-title.contact:after,
#page-title.thanks:after{ content: ""; width: 100%; height: 100%; background: url(./images/promo/contact.webp) no-repeat center center; background-size: 100%; opacity: 0.24; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: -1; border-radius: 40px 0 0 0;}
#page-title.news:after,
#page-title.notice:after,
#page-title.recruit:after{ content: ""; width: 100%; height: 100%; background: url(./images/promo/news.webp) no-repeat center center; background-size: 100%; opacity: 0.24; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: -1; border-radius: 40px 0 0 0;}

/* heading */
h2.heading{ font-size: var(--font-l); line-height: 1.2em; color: var(--clr-ble); padding: 0.24em 0; border-bottom: solid 1px #EEE; position: relative;}
h2.heading:after{ content: ""; width: 1.0em; height: 1px; background-color: var(--clr-ble); position: absolute; bottom: -1px; left: 0;}
h3.heading { font-weight: 700; line-height: 1.2em; font-size: var(--font-s); padding: 0.24em 0 0.24em 0.64em; margin-top: var(--space-m); position: relative;}
h3.heading:before{ content: ""; width: 4px; height: 56%; background-color: var(--clr-ble); border-radius: 2px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

/* 01.会社概要
--------------------------------------------------------------*/
.contents.outline section{ max-width: calc(1200px * 0.72);}
.outline table{ width: 100%; margin: 0px auto;}
.outline tr{ border-bottom: solid 1px #EEE; display: flex; justify-content: space-between; flex-wrap: wrap;}
.outline tr th{ width: 100%; padding: 1.5em 0 0; font-weight: 700; color: var(--clr-ble);}
.outline tr td{ width: 100%; padding: 0.24em 0 1.5em;}

.contents.access section{ max-width: calc(1200px * 0.72);}
.accessmap{ margin-top: var(--space-s); width: 100%; padding-bottom: 80%; border-radius: 16px; border: solid 8px #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); position: relative; overflow: hidden;}
.accessmap iframe{ width: 100%; height: 100%; position: absolute; top: 0; right: 0;}
.access .column{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: var(--space-s);}
.access .column .inner{ width: 100%;}
.access .column .inner:nth-child(n+2){ margin-top: var(--space-m);}
.access .column .inner h3.heading{ margin-top: 0;}
.access .column .inner ul{ margin-top: 0.5em;}
.access .column .inner ul li{ line-height: 1.2em; padding-left: 1.2em; position: relative;}
.access .column .inner ul li:nth-child(n+2){ margin-top: 0.48em;}
.access .column .inner ul li:before{ content: "\e570"; font-family: "Material Icons"; color: var(--clr-ble); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.access .column .inner:nth-child(2) ul li:before{ content: "\e531";}
.access .sup{ font-size: 1.4rem; line-height: 1.2em; text-align: right; margin-top: var(--space-s);}

/* 02.主要設備
--------------------------------------------------------------*/
.contents.facilities section{ max-width: calc(1200px * 0.72);}
.facilities table{ width: 100%; margin-top: var(--space-m);}
.facilities table thead th{ border: solid 1px #FFF; border-style: none solid; background: var(--clr-ble); text-align: center; color: #FFF; line-height: 1.2em; padding: 0.72em; font-weight: 700;}
.facilities table tbody tr{ border-bottom: solid 1px #DDD;}
.facilities table tbody th{ width: 50%; vertical-align: text-top; padding: 1.0em 0; color: var(--clr-ble);}
.facilities table tbody td{ width: 50%; padding: 1.0em 0;}
.facilities ul{ width: 100%; margin-top: var(--space-l); position: relative;}
.facilities ul li{ width: 100%;}
.facilities ul li:nth-child(n+2){ margin-top: 1.0em;}
.facilities ul li img{ width: 100%; height: auto; border-radius: 8px; overflow: hidden;}

.contents.case section{ max-width: calc(1200px * 0.72);}
.case ul{ margin-top: var(--space-m); display: flex; justify-content: flex-start; flex-wrap: wrap;}
.case ul li{ width: 47%; margin-right: 6%;}
.case ul li:nth-child(2n),
.case ul li:last-child{ margin-right: 0;}
.case ul li:nth-child(n+3){ margin-top: 1.0em;}
.case ul li img{ width: 100%; height: auto; border-radius: 8px; overflow: hidden;}

/* 03.お問い合わせ
--------------------------------------------------------------*/
.contents.form section{ max-width: calc(1200px * 0.72);}
.contents .tab-menu { display: flex; justify-content: center; flex-wrap: wrap; border-bottom: 2px solid var(--clr-ble); margin-top: var(--space-m);}
.contents .tab-item { width: 48%; border: solid 2px var(--clr-ble); border-bottom: none; border-radius: 8px 8px 0 0; background: #FFF; text-align: center; font-weight: 700; line-height: 1.2em; padding: 1.0em 0; margin: 0 1%; color: var(--clr-ble); cursor: pointer; transition: all 0.3s ease 0s;}
.contents .tab-item.is-active { background: var(--clr-ble); color: #fff;}
.tab-panel { display: none; margin-top: var(--space-s);}
.tab-panel.is-active { display: block;}
.tab-panel .policy{ background-color: #f6f6f6; margin-top: var(--space-m); padding: 1.5em; border-radius: 8px; height: 200px; overflow: auto;}
.tab-panel .policy h3{ font-weight: 700; margin-top: var(--space-m);}
.tab-panel .policy h3:first-child{ margin-top: 0;}
.tab-panel .policy p{ margin-top: 0.5em;}

/*--------------------------------------------------------------
# 404 not found
--------------------------------------------------------------*/
#error .contents{ padding: var(--space-xl) 0;}
#error .contents section{ width: 90%; margin: 0px auto; max-width: 1200px;}
#error .contents section h2{ font-size: 4.0rem; text-align: center; line-height: 1.0em;}
#error .contents section h2 strong{ display: block; text-align: center; font-size: 12.0rem; line-height: 1.0em; font-weight: normal;}
#error .contents section p{ text-align: center; margin-top: 1.0em;}

/*--------------------------------------------------------------
# post
--------------------------------------------------------------*/
/*　archive/category　*/
#archive{ margin: var(--space-xl) auto;}
ul.notelist li{ border-bottom: solid 1px #EEE; display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 1.0em 0;}
ul.notelist li a{ display: block; width: 100%; margin-top: 0.48em; padding-right: 2.0em; color: #333; text-decoration: none; position: relative;}
ul.notelist li a:hover{ color: var(--clr-ble);}
ul.notelist li a:after{ content: "\e5e1"; font-family: "Material Icons"; font-size: 1.4rem; color: #DDD; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s;}
ul.notelist li a:hover:after{ color: var(--clr-ble);}

/* single */
#single-post{ margin: var(--space-xl) auto;}
#single-post .entry-header{}
#single-post .entry-header h2{ font-size: var(--font-m); line-height: 1.2em; font-weight: 700;}
#single-post .entry-header .entry-meta{ margin-top: 1.0em; padding-top: 1.0em; border-top: double 3px #DDD; display: flex; justify-content: flex-start; flex-wrap: wrap;}
#single-post .entry-header .entry-meta span{ margin-right: 1.0em;}
#single-post .entry-content{ margin-top: var(--space-m);}
#single-post .entry-content h3{ font-size: var(--font-m); line-height: 1.2em; font-weight: 700; color: var(--clr-ble); margin-top: var(--space-l);}
#single-post .entry-content h3:first-child{ margin-top: 0;}
#single-post .entry-content h4{ font-size: var(--font-s); line-height: 1.2em; font-weight: 700; pad: 0.24em 0; padding-left: 0.64em; position: relative; margin-top: var(--space-l);}
#single-post .entry-content h4:before{ content: ""; width: 4px; height: 90%; background-color: var(--clr-ble); border-radius: 2px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
#single-post .entry-content p,
#single-post .entry-content ul,
#single-post .entry-content ol,
#single-post .entry-content table{ margin-top: 1.0em;}
#single-post .entry-content table{ width: 100%; border: solid 1px #DDD; border-style: solid none none solid}
#single-post .entry-content table th{ display: block; padding: 1.0em; background: #F6F6F6; border: solid 1px #DDD; border-style: none solid solid none;}
#single-post .entry-content table td{ display: block; padding: 1.0em; border: solid 1px #DDD; border-style: none solid solid none;}
#single-post .entry-content ul{ padding-left: 1.0em;}
#single-post .entry-content ul li{ list-style-type: disc; list-style-position: outside;}
#single-post .entry-content ol{ padding-left: 1.5em;}
#single-post .entry-content ol li{ list-style-type: decimal; list-style-position: outside;}
#single-post .back-button{ width: 72%; margin: var(--space-m) auto 0;}
#single-post .back-button a{ display: block; background: #EEE; color: #333; text-decoration: none; padding: 1.0em 0; text-align: center; border-radius: 4px;}
#single-post .back-button a:hover{ color: #FFF; background: #999;}

/* pagenation */
.posts-navigation{ display: none;}
.wp-pagenavi{ margin-top: var(--space-l); display: flex; justify-content: center; flex-wrap: wrap;}
.wp-pagenavi a,
.wp-pagenavi span{ line-height: 3.2rem; min-width: 3.2rem; text-align: center; padding: 0 0.5em !important; margin: 0 2px !important; border: solid 1px #DDD !important; border-radius: 2px; text-decoration: none;}
.wp-pagenavi span.current{ border-color: #CCC !important; background: rgba(var(--clr-ble-rgb),0.08); color: var(--clr-ble); font-weight: normal !important;}
.wp-pagenavi a:hover{ background: var(--clr-ble) !important; color: #FFF !important; border-color: var(--clr-ble) !important;}

/* side navigation */
.widget{ margin-top: var(--space-l);}
.widget:nth-child(1){ margin-top: 0;}
.widget h2{ line-height: 1.2em; font-weight: 700; position: relative; background: #F6F6F6; padding: 1.0em; padding-left: 2.5em;}
.widget h2:before{ content: "\e241"; font-family: "Material Icons"; color: var(--clr-ble); position: absolute; top: 50%; left: 1.0em; transform: translateY(-50%);}
.widget ul{}
.widget ul li{ border-bottom: solid 1px #EEE; padding-right: 1.2em; position: relative;}
.widget ul li a{ display: block; padding: 1.0em 0; padding-right: 1.2em; 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.16); font-size: 1.0rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s;}
.widget ul li a:hover:after{ right: 0; color: var(--clr-ble);}

/* 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{}
.wpcf7-form dl{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.wpcf7-form dl dt{ width: 100%; padding: 1.0em 0 0; position: relative; display: flex; flex-wrap: wrap; align-items: center;}
.wpcf7-form dl dt span{ display: inline-block; position: relative;}
.wpcf7-form dl dt span:after{ content: "任意"; color: #999; background: #EEE; font-size: 1.4rem; line-height: 1.0em; padding: 0.24em 0.4em; border-radius: 4px; position: absolute; top: 50%; left: calc(100% + 1.0em); transform: translateY(-50%); white-space: nowrap;}
.wpcf7-form dl dt span.required:after{ content: "必須"; color: #FFF; background: var(--clr-grn);}
.wpcf7-form dl dt em{ display: block; font-size: 1.4rem; line-height: 1.2em; font-style: normal;}
.wpcf7-form dl dd{ width: 100%; padding: 0.5em 0 1.0em 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{ width: 100%; border: solid 1px #DDD; background: #F9F9F9; padding: 1.0em; 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 #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; font-weight: 600; color: #FF0000 !important; margin-top: 0.5em;}
.wpcf7-list-item.first{ margin-left: 0;}
.wpcf7-list-item{ display: block; margin-left: 0;}

.wpcf7-spinner{ display: none !important;}
.submit{ text-align: center; margin-top: var(--space-s);}
.agreement{ text-align: center; margin-top: var(--space-s);}
.submit 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 input[type="submit"]{ background: var(--clr-org); color: #FFF; border-color: var(--clr-org); font-size: 1.6rem; font-weight: 700; line-height: 1.0em; padding: 1.25em 6.0em; border-radius: 0; cursor: pointer; border-radius: 4px;}

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

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

/* header */
header#masthead{ width: 100%; margin: 0px auto; padding: 1.6rem 0;}
header#masthead .site-branding{ width: 16.0rem; margin: 0px auto;}
header#masthead .site-branding .site-logo a{ display: block;}
header#masthead .site-branding .site-logo a img{ width: 100%; height: auto;}
header#masthead .site-branding .site-description,
header#masthead .site-branding .site-title{ display: none;}

/* breadcrumb */
.breadcrumbs{ background: #F9F9F9; padding: 0.8em 0;}
.breadcrumbs ul{ width: 90%; margin: 0px auto; max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: flex-start;}
.breadcrumbs ul li{ font-size: 1.4rem; line-height: 1.0em;}
.breadcrumbs ul li:nth-child(2):before{ content: "/"; padding: 0 0.48em;}

/* bottom cta */
#bottom-cta{ width: 100%; background: #F6F6F6; padding: 0; position: relative;}
#bottom-cta::before{ content: ""; width: 100%; height: 50%; background: #F0F0F0; position: absolute; bottom: 0; left: 0%; z-index: 1;}
#bottom-cta section{ width: 90%; margin: 0px auto; max-width: 1200px; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 10;}
#bottom-cta section .inner{ width: 100%; padding: var(--space-m) 5%;}
#bottom-cta section .inner h2{ font-weight: 700; font-size: var(--font-s); line-height: 1.2em; text-align: center;}
#bottom-cta section .inner p{ display: none;}
#bottom-cta section .inner p:nth-of-type(1){ min-height: 4.0lh;}
#bottom-cta section .inner p.button{ display: block; width: 88%; margin: 1.0em auto 0;}
#bottom-cta section .inner p.button a{ display: block; color: #FFF; text-decoration: none; font-weight: 700; background-color: var(--clr-org); padding: 1.0em 0; border-radius: 4px; position: relative; text-align: center;}
#bottom-cta section .inner p.button a:hover{ color: #FFF; background: var(--clr-navy);}
#bottom-cta section .inner p.button a:after{ content: "\e5e1"; font-family: "Material Icons"; position: absolute; top: 50%; right: 2.0em; transform: translateY(-50%); transition: all 0.3s ease 0s; opacity: 0.0;}
#bottom-cta section .inner p.button a:hover:after{ opacity: 1.0; right: 1.6em;}

/* footer */
footer#colophon{ background: var(--clr-navy); padding: 4.8rem 0 0; position: relative; border-bottom: solid 2px var(--clr-grn);}
footer#colophon section .site-info nav{ margin-bottom: 4.8rem;}
footer#colophon section .site-info nav ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
footer#colophon section .site-info nav ul li{ width: 47%; border-top: solid 1px rgba(255,255,255,0.08);}
footer#colophon section .site-info nav ul li:nth-child(5),
footer#colophon section .site-info nav ul li:nth-child(6){ border-bottom: solid 1px rgba(255,255,255,0.08);}
footer#colophon section .site-info nav ul li a{ display: block; padding: 0.8em; padding-left: 1.5em; position: relative; line-height: 1.2em; color: #FFF; text-decoration: none;}
footer#colophon section .site-info nav ul li a:before{ content: "\e5e1"; font-family: "Material Icons"; color: #FFF; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
footer#colophon section .site-info nav ul li a:hover{color: rgba(255,255,255,0.64);}
footer#colophon section{ width: 90%; max-width: 1200px; margin: 0px auto;}
footer#colophon section .site-logo{ width: 160px; margin: 0px auto;}
footer#colophon section .site-logo a{ display: block;}
footer#colophon section .site-logo a img{ width: 100%; height: auto;}
footer#colophon section .address{ text-align: center; color: #FFF; margin-top: 1.0em;}
footer#colophon section .copyright{ text-align: center; color: #FFF; margin-top: 1.6rem; padding-top: 1.6rem; padding-bottom: 1.6rem; border-top: solid 1px rgba(255,255,255,0.16);}

/* Navigation */
.custom #wprmenu_menu_ul{ padding-top: 5.0rem;}

.menu-navigation-container{ display: none;}
#site-navigation{}
#primary-menu{  display: none;}
#primary-menu li{position: relative; padding: 0 0.5em;}
#primary-menu li:nth-child(n+2):before{ content: ""; width: 1px; height: 40%; background-color: rgba(0,0,0,0.16); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
#primary-menu li a{ display: block; position: relative; cursor: pointer; padding: 0.48em 0.5em; text-decoration: none;}
#primary-menu li a:hover{ color: var(--clr-ble);}
#primary-menu li ul{ display: block; position: absolute; width: 150%; top: 110%; left: -25%; 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; padding: 0;}
#primary-menu li ul li:last-child{ border-bottom: none;}
#primary-menu li ul li:before{ content: none !important;}
#primary-menu li ul li a{ display: block; text-align: center; padding: 0.48em 0.5em !important;}
#primary-menu li ul li a:hover{ color: var(--clr-ble); background-color: rgba(var(--clr-ble-rgb),0.04);}
#primary-menu li ul li a:before,
#primary-menu li ul li a:after{ content: none !important;}
.menu-toggle { display: none;}
#primary-menu li#menu-item-33 a,
#primary-menu li#menu-item-34 a{ position: relative; padding-right: 2.4rem;}
#primary-menu li#menu-item-33 a:before,
#primary-menu li#menu-item-34 a:before{ content: ""; width: 1.6rem; height: 1.6rem; background-image: url(images/common/navigation_icon.svg); background-size: cover; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s;}
#primary-menu li#menu-item-33 a:hover:before,
#primary-menu li#menu-item-34 a:hover:before{ opacity: 0.0;}
#primary-menu li#menu-item-33 a:after,
#primary-menu li#menu-item-34 a:after{ content: ""; width: 1.6rem; height: 1.6rem; background-image: url(images/common/navigation_icon_hover.svg); background-size: cover; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease 0s; opacity: 0.0;}
#primary-menu li#menu-item-33 a:hover:after,
#primary-menu li#menu-item-34 a:hover:after{ opacity: 1.0;}
#primary-menu li#menu-item-32:before{ content: none !important;}
#primary-menu li#menu-item-32 a{ background-color: var(--clr-org); color: #FFF; font-weight: 600; padding: 0.48em 2.4em; padding-right: 4.0em; border-radius: 4px; position: relative;}
#primary-menu li#menu-item-32 a:hover{ background-color: var(--clr-navy);}
#primary-menu li#menu-item-32 a:after{ content: "\e158"; font-family: "Material Icons"; position: absolute; top: 50%; right: 1.5em; transform: translateY(-50%);}
#primary-menu li#menu-item-32 a:before{ content: ""; width: 1px; height: 32%; background-color: rgba(255,255,255,0.4); position: absolute; top: 50%; right: 3.2em; transform: translateY(-50%);}

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

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

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

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

/* Widgets
--------------------------------------------- */
.widget {}
.widget select {}

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

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

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

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

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

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

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

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

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

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

main p, main dt, main dd, main li, main td { word-break: auto-phrase;}

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