/*!
Theme Name: canvas
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: canvas
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

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

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

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

:root{
--clr-blue:#184493;
--clr-sky:#66c3ef;
--clr-pink:#ED7C95;
--clr-neg:#E60012;

--bg-clr01:#E4F4FD;
--bg-clr02:#CCEAFB;

--btn-blue:#184493;
--btn-sky:#4AC1F1;
--btn-grn:#4AA840;
--btn-pink:#ED7C95;
--btn-red:#E60012;
}
:root{
--clr-blue-rgb:24,68,147;
--clr-sky-rgb:102,195,239;
--clr-pink-rgb:237,124,149;
--btn-red-rgb:230,0,18;
--btn-blue-rgb:3,110,184;
--btn-grn-rgb:74,168,64;
--btn-sky-rgb:74,193,241;
--btn-pink-rgb:237,124,149;
}

@media (min-width: 1024px) {
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* common */
.linkBtn{ width: 32%; margin: 4.0rem auto 0 !important;}
.linkBtn a{ display: block; border: solid 1px var(--clr-blue); background: var(--clr-blue); color: #FFF; text-decoration: none; font-weight: 600; line-height: 1.0em; padding: 1.6em 0; text-align: center; border-radius: 8px; position: relative;}
.linkBtn a:hover{ color: var(--clr-blue); background: #FFF;}
.linkBtn a:after{ content: "\f178"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 600; position: absolute; top: 50%; right: 1.6em; transform: translateY(-50%); transition: all 0.3s ease 0s;}
.linkBtn a:hover:after{ right: 0.8em;}

.pcbr{ display: block;}
.spbr{ display: none;}
li.p-left15{ padding-left: 1.5em !important;}
p.p-left15{ padding-left: 1.5em !important;}
li.p-left2{ padding-left: 2.0em !important;}
p.p-left2{ padding-left: 2.0em !important;}

/* english fonts */
.en{ font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal;}
.fontBl{ font-family: "Barlow Condensed", sans-serif; font-style: normal;}

/* wrapper layout */
#container{ width: 100%; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap;}
#container main{ width: 72.5%;}
#container #secondary,
body.archive #container #block-4,
#container #block-6,
#container #block-7,
body.archive #container #block-8{ width: 23.5%;}

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

/* archive / single layout */
body.archive #container,
body.category #container,
body.single-post #container{ width: calc(100% - 20%); max-width: 1200px; margin: 0px auto;}
body.archive #container main,
body.category #container main,
body.single-post #container main{ width: 72.5%; order: 2;}
body.archive #container #secondary,
body.category #container #secondary,
body.single-post #container #secondary{ width: 23.5%; order: 1;}

.js-scrollable{ overflow: visible !important;}

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

body#home main article.contents section h2{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 600;}

.btmLine{ border-bottom: solid 1px var(--clr-sky);}

.sliderWrap.forPc{ display: block;}
.sliderWrap.forSp{ display: none;}

/* Reasons */
.indexReasons{ background: var(--clr-sky);}
.indexReasons h2{ display: flex; justify-content: center; flex-wrap: wrap; align-items: center; background: var(--clr-pink); font-size: 3.2rem; line-height: 1.2em; font-weight: 700; color: #FFF; padding: 0.8em 0;}
.indexReasons h2 span{ font-size: 2.0rem; line-height: 1.2em; margin-right: 1.0em;}
/*
.indexReasons section{ width: calc(100% - 20%); max-width: 1200px; margin: 0px auto; padding: 4.0rem 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
*/
.indexReasons section{ width: 98%; max-width: 1500px; margin: 0px auto; padding: 4.0rem 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.indexReasons section dl{ width: 24%; border: solid 2px #FFF; background: #FFF; border-radius: 16px;}
.indexReasons section dl dt{ text-align: center; padding: 1.2em 0.8em; background: var(--clr-sky); border-radius: 14px 14px 0 0;}
.indexReasons section dl dt span{ display: inline-block; font-size: 2.4rem; line-height: 1.0em; font-weight: 600; color: #FFF; padding-left: 74px; position: relative; text-align: left;}
/*
.indexReasons section dl dt span{ display: inline-block; font-size: 2.4rem; line-height: 1.0em; font-weight: 600; color: #FFF; padding-left: 74px; position: relative; text-align: left;}
.indexReasons section dl dt span:before{ content: ""; width: 64px; height: 64px; display: inline-block; border-radius: 100%; overflow: hidden; position: absolute; bottom: -0.4em; left: 0; z-index: 100;}
*/
.indexReasons section dl dt span{ display: inline-block; font-size: 2.4rem; line-height: 1.0em; font-weight: 600; color: #FFF; padding-left: 64px; position: relative; text-align: left;}
.indexReasons section dl dt span:before{ content: ""; width: 58px; height: 58px; display: inline-block; border-radius: 100%; overflow: hidden; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 100;}
.indexReasons section dl:nth-of-type(1) dt span:before{ background: url("images/home/index_reasons_icon_01.svg") no-repeat; background-size: contain;}
.indexReasons section dl:nth-of-type(2) dt span:before{ background: url("images/home/index_reasons_icon_02.svg") no-repeat; background-size: contain;}
.indexReasons section dl:nth-of-type(3) dt span:before{ background: url("images/home/index_reasons_icon_03.svg") no-repeat; background-size: contain;}
.indexReasons section dl:nth-of-type(4) dt span:before{ background: url("images/home/index_reasons_icon_04.svg") no-repeat; background-size: contain;}
.indexReasons section dl:nth-of-type(2) dt span{ letter-spacing: -0.1em;}
.indexReasons section dl dd{ font-size: 1.4rem; padding: 0.8em;}

/* about compensation */
.contents.indexAbout{ width: 100%; position: relative; padding: 0px !important; overflow: hidden;}
.contents.indexAbout:before{ content: ""; width: 50%; height: 100%; background: url("images/compensation/mainimage_02.webp") no-repeat left center; background-size: 100%; position: absolute; top: 50%; left: 50%; transform: translateY(-50%); z-index: -1;}
.contents.indexAbout:after{ content: ""; width: 50%; height: 100%; background: url("images/compensation/mainimage_01.webp") no-repeat right center; background-size: 100%; position: absolute; top: 50%; right: 50%; transform: translateY(-50%); z-index: -2;}
.contents.indexAbout section{ width: 80%; margin: 0px auto; padding: 8.0rem 0; z-index: 100; background: rgba(255, 255, 255, 0); background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);}
.contents.indexAbout section p{ text-align: center;}
.contents.indexAbout .link{ margin: 2.4em auto 0 !important; text-align: center;}
.contents.indexAbout .link a{ display: inline-block; color: #FFF; text-decoration: none; font-weight: 600; font-size: 2.0rem; line-height: 1.2em; padding: 0.8em 3.2em; border-radius: 100px; background: #E87711; border: solid 1px #E87711; transition: all 0.3s ease 0s; position: relative;}
.contents.indexAbout .link a:hover{ padding: 0.8em 4.8em; color: #E87711; background: #FFF;}
.contents.indexAbout .link a:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.contents.indexAbout .link a:hover:after{ right: 1.2em; opacity: 1.0;}

/* service menu */
.indexComp{ background: var(--clr-sky); padding: 0px !important;}
.indexComp section{ width: calc(100% - 10%); margin: 0px auto; display: flex; justify-content: space-between; flex-wrap: wrap; flex: 1;}
.indexComp section .inner{ width: 20%; padding: 1.6em;}
.indexComp section .inner:nth-child(n+2){ border-left: solid 1px #FFF;}
.indexComp section .inner h3{ text-align: center; font-size: 4.0rem; line-height: 1.0em; color: #FFF;}
.indexComp section .inner h3 span{ display: block; font-size: 2.0rem; line-height: 1.2em; text-align: center; color: #FFF; text-decoration: underline;}
.indexComp section .inner .image{ width: 90%; margin: 0px auto; border-radius: 100%; overflow: hidden;}
.indexComp section .inner .image img{ width: 100%; height: auto;}
.indexComp section .inner h4{ font-weight: 600; color: #FFF; text-align: center; margin-top: 1.0em;}
.indexComp section .inner .link{ margin-top: 1.6em; text-align: center;}
.indexComp section .inner .link a{ display: inline-block; font-size: 1.4rem; line-height: 1.2em; color: #FFF; text-decoration: none; border: solid 1px #FFF; padding: 0.24em 1.6em; position: relative;}
.indexComp section .inner .link a:hover{ color: #333; background: #FFF;}
.indexComp section .inner .link a:after{ content: "\f105"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%);}

/* JAF member */
.contents.jafMember h2 span{ display: inline-block; padding-left: 200px; position: relative;}
.contents.jafMember h2 span:before{ content: ""; width: 191px; padding-bottom: 72px; background: url("images/home/logo_jaf.svg") no-repeat; background-size: contain; display: inline-block; margin-right: 0.8em; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.contents.jafMember .moreBtn{ margin: 2.4em auto 0 !important; text-align: center;}
.contents.jafMember .moreBtn a{ display: inline-block; color: var(--clr-sky); text-decoration: none; font-weight: 600; line-height: 1.2em; padding: 0.8em 1.6em; border-radius: 100px; background: #FFF; border: solid 1px var(--clr-sky); transition: all 0.3s ease 0s; position: relative;}
.contents.jafMember .moreBtn a:hover{ padding: 0.8em 3.2em; color: #FFF; background: var(--clr-sky);}
.contents.jafMember .moreBtn a:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.contents.jafMember .moreBtn a:hover:after{ right: 1.2em; opacity: 1.0;}

/* news list */
.contents.indexNewsList .newsList{ width: 72%; margin: 1.6em auto 0;}
.contents.indexNewsList .newsList li{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 1.2em 0; border-bottom: solid 1px #E4E4E4;}
.contents.indexNewsList .newsList li span{ color: var(--clr-blue); width: 5.5em;}
.contents.indexNewsList .newsList li a{ width: calc(100% - 6.0em); color: #333; text-decoration: none;}
.contents.indexNewsList .newsList li a:hover{ color: rgba(51,51,51,0.72);}
.contents.indexNewsList .moreBtn{ margin: 2.4em auto 0 !important; text-align: center;}
.contents.indexNewsList .moreBtn a{ display: inline-block; color: #FFF; text-decoration: none; font-weight: 600; line-height: 1.2em; padding: 0.8em 1.6em; border-radius: 100px; background: var(--btn-blue); transition: all 0.3s ease 0s; position: relative;}
.contents.indexNewsList .moreBtn a:hover{ padding: 0.8em 3.2em; background: rgba(var(--btn-blue-rgb),0.72);}
.contents.indexNewsList .moreBtn a:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.contents.indexNewsList .moreBtn a:hover:after{ right: 1.2em; opacity: 1.0;}

/* buttons list */
/*
.indexBtnList ul{ width: 70%; min-width: 780px; margin: 1.6em auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
*/
.indexBtnList ul{ width: 70%; min-width: 780px; margin: 1.6em auto 0; display: flex; justify-content: space-around; flex-wrap: wrap;}
.indexBtnList ul li{ width: 31%;}
.indexBtnList ul li a{ background: var(--btn-sky); border-radius: 8px; padding: 1.0em; padding-bottom: 2.4em; color: #FFF; font-weight: 600; line-height: 1.4em; text-decoration: none; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; position: relative;}
.indexBtnList ul li a:hover{ background: rgba(var(--btn-sky-rgb),0.72);}
.indexBtnList ul li a:after{ content: "\f078"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.6rem; position: absolute; bottom: 0.4em; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0s;}
.indexBtnList ul li a:hover:after{ bottom: 0.6em;}
.indexBtnList ul li a em{ display: block; width: 100%; padding: 0 1.6em;}
.indexBtnList ul li a em img{ width: 100%; height: auto;}
.indexBtnList ul li a span{ display: block; margin-top: auto; text-align: center; font-weight: 600;}

/* Gaimu banner */
.indexGaimu{ height: 228px; width: 100%; position: relative; overflow: hidden; padding: 1.4em 0;}
.indexGaimu:before{ content: ""; width: 50%; height: 100%; background: url("images/home/gaimu_bnr.webp") no-repeat center center; background-size: 100%; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); z-index: -1;}
.indexGaimu:after{ content: ""; width: 65%; height: 100%; background: linear-gradient(90deg,rgba(144,200,226,0) 0%, rgba(144,200,226,1) 20%, rgba(144,200,226,1) 100%); position: absolute; top:0; right: 0; z-index: 1; transition: all 0.3s ease 0s;}
.indexGaimu:hover:after{ width: 75%;}
.indexGaimu section{ width: 90%; margin: 0 auto; padding-left: 45vw; position: relative; z-index: 100;}
.indexGaimu section h2{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size:clamp(2.4vw,3.6vw,4.0rem); line-height: 1.2em; color: #FFF; font-feature-settings: "palt";}
.indexGaimu section h2 span.en{ display: block; font-size: 2.4rem; line-height: 1.2em; color: #FFF;}
.indexGaimu section .gaimu-en-img { margin-top: 10px; width: 360px;}
.indexGaimu section .circle{ width: 120px; height: 120px; border: solid 1px #eb6da5; background-color: #eb6da5; border-radius: 100%; position: absolute; top: 45%; right: 52.5%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; font-size: 2.4rem; line-height: 1.2em; letter-spacing: 0.1em; text-align: center; color: #FFF; font-weight: 600;}
.indexGaimu section .link{ margin-top: 1.0em;}
.indexGaimu section .link a{ display: inline-block; font-size: 1.4rem; line-height: 1.2em; color: rgba(144,200,226,1); text-decoration: none; border: solid 1px #FFF; background-color: #fff; padding: 0.24em 1.6em; position: relative; border-radius: 20px; font-weight: bold;}
.indexGaimu section .link a:hover{ color: #fff; background: rgba(144,200,226,1);}
.indexGaimu section .link a:after{ content: "\f105"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%);}
.indexGaimu section .pc-circle { display: none;}
.indexGaimu section .sp-circle { display: flex;}


/* Dairi banner */
.indexDairi{ height: 228px; width: 100%; position: relative; overflow: hidden; padding: 1.4em 0; margin: 40px 0;}
.indexDairi:before{ content: ""; width: 50%; height: 100%; background: url("images/home/dairi_bnr.webp") no-repeat center center; background-size: 100%; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); z-index: -1;}
.indexDairi:after{ content: ""; width: 65%; height: 100%; background: linear-gradient(90deg,rgba(17,67,146,0) 0%, rgba(17,67,146,1) 20%, rgba(17,67,146,1) 100%); position: absolute; top:0; right: 0; z-index: 1; transition: all 0.3s ease 0s;}
.indexDairi:hover:after{ width: 75%;}
.indexDairi section{ width: 90%; margin: 0 auto; padding-left: 45vw; position: relative; z-index: 100;}
.indexDairi section h2{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 1.8rem; line-height: 1.5em; color: #FFF; font-feature-settings: "palt";}
.indexDairi section h2 span.en{ display: block; font-size: 2.4rem; line-height: 1.2em; color: #FFF;}
.indexDairi section .dairi-en-img { margin-bottom: 10px; width: 490px;}
.indexDairi section .circle{ width: 120px; height: 120px; border: solid 1px #FFF; border-radius: 100%; position: absolute; top: 45%; right: 52.5%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; font-size: 2.4rem; line-height: 1.2em; letter-spacing: 0.1em; text-align: center; color: #FFF; font-weight: 600;}
.indexDairi section .link{ margin-top: 1.0em;}
.indexDairi section .link a{ display: inline-block; font-size: 1.4rem; line-height: 1.2em; color: rgba(17,67,146,1); text-decoration: none; border: solid 1px #FFF; background-color: #fff; padding: 0.24em 1.6em; position: relative; border-radius: 20px; font-weight: bold;}
.indexDairi section .link a:hover{ color: #fff; background: rgba(17,67,146,1);}
.indexDairi section .link a:after{ content: "\f105"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%);}
.indexDairi section .pc-circle { display: flex;}
.indexDairi section .sp-circle { display: none;}
/* recruit banner */
.indexRecruit{ height: 228px; width: 100%; position: relative; overflow: hidden; padding: 1.8em 0;}
.indexRecruit:before{ content: ""; width: 50%; height: 100%; background: url("images/home/recruit_bnr.webp") no-repeat center center; background-size: 100%; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); z-index: -1;}
.indexRecruit:after{ content: ""; width: 65%; height: 100%; background: linear-gradient(90deg,rgba(34,172,56,0) 0%, rgba(34,172,56,1) 20%, rgba(34,172,56,1) 100%); position: absolute; top:0; right: 0; z-index: 1; transition: all 0.3s ease 0s;}
.indexRecruit:hover:after{ width: 75%;}
.indexRecruit section{ width: 90%; margin: 0 auto; padding-left: 45vw; position: relative; z-index: 100;}
.indexRecruit section h2{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size:clamp(2.2vw,3.6vw,4.0rem); line-height: 1.2em; color: #FFF; font-feature-settings: "palt";}
.indexRecruit section h2 span.en{ display: block; font-size: 2.4rem; line-height: 1.2em; color: #FFF;}
.indexRecruit section .circle{ width: 120px; height: 120px; border: solid 1px #FFF; border-radius: 100%; position: absolute; top: 45%; right: 52.5%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; font-size: 2.4rem; line-height: 1.2em; letter-spacing: 0.1em; text-align: center; color: #FFF; font-weight: 600; margin-bottom: 10px;}
.indexRecruit section .link{ margin-top: 1.0em;}
.indexRecruit section .link a{ display: inline-block; font-size: 1.4rem; line-height: 1.2em; color: rgba(34,172,56,1); background-color: #fff; text-decoration: none; border: solid 1px #FFF; padding: 0.24em 1.6em; position: relative; border-radius: 20px; font-weight: bold;}
.indexRecruit section .link a:hover{ color: #fff; background: rgba(34,172,56,1);}
.indexRecruit section .link a:after{ content: "\f105"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%);}
.indexRecruit section .pc-circle { display: none;}
.indexRecruit section .sp-circle { display: flex;}


/* bottom banner block */
.indexBtm{ width: 60%; min-width: 800px; margin: 0px auto; padding: 4.0rem 0;}
.indexBtm ul{ display: flex; justify-content: center; flex-wrap: wrap;}
.indexBtm ul li{ width: 31%; font-size: 2.0rem; line-height: 1.2em; margin-right: 3.5%;}
.indexBtm ul li:nth-child(3n),
.indexBtm ul li:last-child{ margin-right: 0;}
.indexBtm ul li a{ display: block; font-weight: 600; color: #FFF; text-decoration: none; text-align: center; padding: 1.2em 0.4em; background: #111;}

/* color */
/*
.indexBtm ul li:nth-child(1) a{ background: #00479C;}
.indexBtm ul li:nth-child(1) a:hover{ background: rgba(0,71,156,0.72);}
.indexBtm ul li:nth-child(2) a{ background: #4BB0E2;}
.indexBtm ul li:nth-child(2) a:hover{ background: rgba(75,176,226,0.72);}
*/
.indexBtm ul li:nth-child(1) a{ background: #C38217;}
.indexBtm ul li:nth-child(1) a:hover{ background: rgba(195,130,23,0.72);}
.indexBtm ul li:nth-child(2) a{ background: #EA5504;}
.indexBtm ul li:nth-child(2) a:hover{ background: rgba(234,85,4,0.72);}

/* other */
/*.indexBtm ul li:nth-child(2) { margin-top: 1.0em;}*/
.indexBtm ul li:nth-child(2) a{ position: relative; padding: 0.4em; height: 100%;}
.indexBtm ul li:nth-child(2) a:before{ content: ""; width: 48px; height: 48px; background: url("images/home/btm_bnr_icon_01.svg") no-repeat; background-size: contain; position: absolute; top: 50%; left: 0.4em; transform: translateY(-50%);}
.indexBtm ul li:nth-child(2) a:after{ content: ""; width: 48px; height: 48px; background: url("images/home/btm_bnr_icon_02.svg") no-repeat; background-size: contain; position: absolute; top: 50%; right: 0.4em; transform: translateY(-50%);}

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

/* common
--------------------------------------------------------------*/
body.page-template-page-posttitle main#primary{ width: 100%;}

main#primary{}
/*
main#primary article.contents{ width: 100%; padding: 6.4rem 0; position: relative;}
*/
main#primary article.contents{ width: 100%; padding: 3.4rem 0; position: relative;}
main#primary article.contents:nth-of-type(1){ padding-top: 12.0rem;}
main#primary article.contents:nth-last-of-type(1){ padding-bottom: 12.0rem;}
article.contents section{ width: calc(100% - 10%); max-width: 1200px; margin: 0px auto;}
article.contents section p{ margin-top: 1.0em;}

/* page title */
h2.pageTitle{ width: 100%; padding: 4.0em 0; text-align: center; position: relative; overflow: hidden;}
h2.pageTitle:before{ content: ""; width: 100%; height: 100%; background: rgba(var(--clr-blue-rgb),0.64); position: absolute; top: 0; left: 0; z-index: -1;}
h2.pageTitle:after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -2;}
h2.pageTitle span{ display: inline-block; font-size: 2.4rem; line-height: 1.2em; color: #FFF; font-weight: 700;}
h2.pageTitle span:before{ content: ""; display: block; margin: 0px auto; text-align: center; font-size: 5.6rem; line-height: 1.2em; color: #FFF;}

/* heading */
h2{}
h3.heading{ background: var(--clr-sky); font-size: 2.4rem; line-height: 1.2em; color: #FFF; font-weight: 600; padding: 0.8em;}
h3.heading img{ max-height: 28px;}
h3.sideHeading,
h4.sideHeading{ font-size: 2.4rem; text-align: left !important; line-height: 1.4em; font-weight: 700; color: var(--clr-blue); margin-bottom: 0.8em;}
h4.sideHeading{ margin-top: 4.0rem;}

/* list style */
ul.list{ margin-top: 1.0em; padding-left: 1.0em;}
ul.list li{ list-style-type: disc; list-style-position: outside; line-height: 1.4em;}

/* number list */
ol.numList{ margin-top: 1.0em; padding-left: 2.4em;}
ol.numList li{ line-height: 1.4em; list-style-position: outside; list-style-type:decimal; padding: 0.16em 0;}
ol.numList li ol{ padding-left: 2.4em;}
ol.numList li ol li{}
ol.numList li ol > li{ counter-increment: cnt; list-style: none;}
ol.numList li ol > li:before { content: "("counter(cnt) ") "; margin-right: 3px;}

/* layout */
.column02{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.column02 .inner{ width: 47%;}

.article{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.5em;}
.article figure{ width: 31%;}
.article figure img{ width: 100%; height: auto;}
.article .inner{ width: 65%;}
.article .inner p:nth-of-type(1){ margin-top: 0;}
.article.left figure{ order: 1;}
.article.right figure{ order: 2;}
.article.left .inner{ order: 2;}
.article.right .inner{ order: 1;}

/* table design */
table.default{ width: 100%; border: solid 1px #DDD; border-collapse: collapse; table-layout: fixed;}
table.default tbody th{ background: #F4F4F4; padding: 1.0em; line-height: 1.4em; text-align: center; width: 25%; border: solid 1px #DDD; border-collapse: collapse;}
table.default tbody td{ background: #FFF; padding: 1.0em; line-height: 1.4em; border: solid 1px #DDD; border-collapse: collapse;}

/* ご契約者さま
--------------------------------------------------------------*/
.member{}
.member h3{ font-size: 2.4rem; line-height: 1.2em; font-weight: 600; color: var(--clr-sky); border: solid 1px var(--clr-sky); padding: 0.4em 4.0em; border-radius: 100px; display: inline-block; position: relative; left: 50%; transform: translateX(-50%);}
.member .box{ background: #F0F0F0; text-align: center;}
.member h4{ font-size: 2.4rem; line-height: 1.2em; font-weight: 700; color: #FFF; background: var(--clr-sky); padding: 0.8em 0; text-align: center; margin-top: 8.0rem;}
.member .box.mt h4{ margin-top: 4.0rem;}
.member .box p{ text-align: center;}
.member .box dl{ display: inline-block; margin-top: 1.0em; padding-bottom: 4.0rem;}
.member .box dl dt{ color: #FFF; line-height: 1.0em; background: var(--clr-pink); padding: 0.8em 0; text-align: center; border-radius: 100px;}
.member .box dl dd{ text-align: center; margin-top: 1.0em;}
.member .box dl dd a{ display: inline-block; color: var(--clr-pink); text-decoration: none; font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 4.0rem; line-height: 1.0em;}
.member .box dl dd a strong{ display: inline-block; font-size: 6.4rem; font-weight: 600;}
.member figure{ position: relative; margin-top: 8.0rem;}
.member figure img{ width: 100%; height: auto;}
.member figure a.button{ display: inline-block; color: #FFF; text-decoration: none; line-height: 1.0em; font-weight: 600; background: var(--clr-sky); padding: 1.6rem 6.4rem; border-radius: 100px; position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%); z-index: 100;}
.member figure a.button:hover{ background: rgba(var(--clr-sky-rgb),0.72); color: #FFF;}
.member figure a.button span{ display: inline-block; padding: 0 1.2em; position: relative;}
.member figure a.button span:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; position: absolute; top: 0; right: 0;}

.member figure.quickNavi a { display: inline-block;}
.member figure.quickNavi a img { max-width: 100%;}
.member figure.quickNavi a.quick-navi-guide-sp { display: none;}
/*
.member figure.quickNavi:before{ content: ""; width: 21%; padding-bottom: 22%; background: url(images/member/tap_icon_02.webp) no-repeat; background-size: contain; position: absolute; top: 49%; left: 78%; z-index: 10;}
*/
.member .linkmenu{ width: 48%; margin: 1.0em auto 0;}
.member .linkmenu li{ font-size: 2.0rem; line-height: 1.0em;}
.member .linkmenu li a{ display: block; padding: 0.8em 0; text-align: center; color: #333; text-decoration: none; border-bottom: solid 1px #333; position: relative;}
.member .linkmenu li a:hover{ color: var(--clr-sky);}
.member .linkmenu li a:before{ content: ""; width: 0; height: 1px; background: var(--clr-sky); position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0s;}
.member .linkmenu li a:hover:before{ width: 100%;}
.member .linkBnr{ margin-top: 1.0em; display: flex; justify-content: center; flex-wrap: wrap;}
.member .linkBnr li{ width: 16%;}
.member .linkBnr li img{ width: 100%; height: auto;}
.member .linkBnr li:nth-child(n+2){ margin-left: 4.0rem;}
.member .linkBnr li a{ display: block; box-shadow: none; border-radius: 4px; overflow: hidden;}
.member .linkBnr li a:hover{ box-shadow: 0 0 16px rgba(0,0,0,0.24);}

.member figure.quickNavi a { display: inline-block;}
/*
.member figure.quickNavi.link a { pointer-events: none;}
*/
.member figure.quickNavi a img { max-width: 100%;}

h3.blue-obi { color: #fff!important; background-color: var(--btn-blue)!important; border: 1px solid var(--btn-blue)!important; border-radius: 0!important; width: 100%; text-align: center; padding: 0.8em 0!important;}

.member02 h3{ font-size: 2.4rem; line-height: 1.2em; font-weight: 700; color: var(--clr-sky); padding: 0.8em 0; text-align: center; margin-top: 8.0rem; border: solid 2px var(--clr-sky);}
.member02 h3:first-child{ margin-top: 0;}
#member02 h3.first-child{ background: var(--btn-blue);}
#member02 .numList li.bFont::marker { font-weight: bold;}
#member02 .numList li.bFont span { font-weight: bold;}
#member02 .border { border: 1px solid #000; padding: 1.0em 2.0em;}
#member02 .compensation02.button {margin-top: 0!important;}
#member02 .compensation02.button a {font-size: 1.8rem;}
.member02 h4{ width: 48%; margin: 4.0rem auto 0; text-align: center; font-size: 2.0rem; line-height: 1.2em; font-weight: 700; color: #FFF; background: var(--clr-pink); padding: 0.8em 0; border-radius: 100px;}
.member02 .newsList{ width: 72%; margin: 1.6em auto 0;}
.member02 .newsList li{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 1.2em 0; border-bottom: solid 1px #E4E4E4;}
.member02 .newsList li span{ color: var(--clr-blue); width: 5.5em;}
.member02 .newsList li a{ width: calc(100% - 6.0em); color: #333; text-decoration: none;}
.member02 .newsList li a:hover{ color: rgba(51,51,51,0.72);}
.member02 .moreBtn{ margin: 2.4em auto 0 !important; text-align: center;}
.member02 .moreBtn a{ display: inline-block; color: #FFF; text-decoration: none; font-weight: 600; line-height: 1.2em; padding: 0.8em 1.6em; border-radius: 100px; background: var(--btn-blue); transition: all 0.3s ease 0s; position: relative;}
.member02 .moreBtn a:hover{ padding: 0.8em 3.2em; background: rgba(var(--btn-blue-rgb),0.72);}
.member02 .moreBtn a:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.member02 .moreBtn a:hover:after{ right: 1.2em; opacity: 1.0;}

.member02.unionoffice p{ font-size: 2.4rem; line-height: 1.4em; margin-top: 0.5em !important;}

.member02 h5{ font-size: 2.4rem; line-height: 1.2em; text-align: center; margin-top: 6.4rem;}

.faqList dt{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600; color: var(--clr-sky); cursor: pointer; position: relative; padding: 0.8em 2.0em 0.8em 3.4rem; border-bottom: solid 1px var(--clr-sky);}
.faqList dt:before{ content: ""; width: 2.4rem; height: 2.4rem; background: url("images/member/q_icon.webp") no-repeat; background-size: contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.faqList dt::after { content: "\f078"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.4rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s ease;}
.faqList dt.active::after { transform: translateY(-50%) rotate(180deg);}

.faqList dd { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding-top 0.4s ease; padding: 0 0 0 3.4rem; position: relative;}
.faqList dd:before{ content: ""; width: 2.4rem; height: 2.4rem; background: url("images/member/a_icon.webp") no-repeat; background-size: contain; position: absolute; top: 1.5em; left: 0;}
.faqList dd.open { max-height: 500px; padding: 1.5em 0 0 3.4rem;}

.member03 h3{ font-size: 2.4rem; line-height: 1.2em; font-weight: 600; color: var(--clr-sky); border: solid 1px var(--clr-sky); padding: 0.4em 4.0em; border-radius: 100px; display: inline-block; position: relative; left: 50%; transform: translateX(-50%);}
.member03 .button.large a{ padding: 0.8em 3.2em;}
.member03 .button.large a:hover{ padding: 0.8em 4.8em;}
.member03 .button{ margin: 2.4em auto 0 !important; text-align: center;}
.member03 .button a{ display: inline-block; color: #FFF; text-decoration: none; font-weight: 600; line-height: 1.2em; padding: 0.8em 1.6em; border-radius: 100px; background: var(--clr-pink); transition: all 0.3s ease 0s; position: relative;}
.member03 .button a:hover{ padding: 0.8em 3.2em; background: rgba(var(--clr-pink-rgb),0.72);}
.member03 .button a:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.member03 .button a:hover:after{ right: 1.2em; opacity: 1.0;}

.pc-content{ display: block;}
.sp-content{ display: none;}

/* 自賠責共済 解約・記載内容の変更・再発行などのお手続き
--------------------------------------------------------------*/
.deployment h4{ display: inline-block; cursor: pointer; font-size: 1.6rem; line-height: 1.2em; font-weight: 700; color: var(--clr-sky); border: solid 2px var(--clr-sky); padding: 0.8em 2.4em; border-radius: 100px; margin-top: 2.4rem; position: relative; transition: background 0.3s ease 0s;}
.deployment h4:hover { background: rgba(var(--clr-sky-rgb),0.16);}
.deployment h4:after{ content: "\2b"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; color: var(--clr-sky); position: absolute; top: 50%; right: 1.0em; transform: translateY(-50%);}
.deployment h4.open{ background: rgba(var(--clr-sky-rgb),0.16);}
.deployment h4.open:after{ content: "\f068";}
.deployment .inner { max-height: 0; overflow: hidden; transition: max-height 0.4s ease;}
.deployment .inner.open { max-height: 2000px;}
.deployment .inner ol.numList ul{ padding-left: 1.5em; margin-top: 0.6em;}
.deployment .inner ol.numList ul li{ list-style-type: disc; list-style-position: outside; padding: 0.4em 0; line-height: 1.4em;}
.deployment .inner ol.numList ul li span{ display: block; font-size: 1.4rem; line-height: 1.4em;}
.deployment .inner h5{ font-weight: 600; color: var(--clr-neg); padding: 0.8em 0; border-bottom: solid 1px #DDD; margin-top: 1.6rem;}

.linkList{ margin-top: 2.0em; border-top: solid 1px #DDD; display: inline-block;}
.linkList li{ border-bottom: solid 1px #DDD;}
.linkList li a{ display: inline-block; padding: 1.0em 1.5em; text-decoration: none; color: #333; position: relative;}
.linkList li a:hover{ color: var(--clr-sky);}
.linkList li a:before{ content: "\f1c1"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; color: var(--clr-blue); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

.coutionBox h3{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600; padding-left: 1.2em; margin-top: 4.0rem; position: relative;}
.coutionBox h3:before{ content: "\f071"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; color: var(--clr-neg); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.coutionBox ul{ padding: 0.6em 0 0 1.0em;}
.coutionBox ul li{ list-style-type: disc; list-style-position: outside; line-height: 1.4em; padding: 0.4em 0;}
.coutionBox ul li span{ display: block; font-size: 1.4rem; line-height: 1.4em;}
.coutionBox table.default{ margin-top: 1.0em;}

h4.head02{ font-size: 2.4rem; line-height: 1.2em; font-weight: 700; color: var(--clr-sky); padding: 0.8em 0; text-align: center; margin-top: 8.0rem; border: solid 2px var(--clr-sky);}
.linkmenu02{ width: 48%; margin: 1.0em auto 0;}
.linkmenu02 li{ font-size: 2.0rem; line-height: 1.0em;}
.linkmenu02 li a{ display: block; padding: 0.8em 0; text-align: center; color: #333; text-decoration: none; border-bottom: solid 1px #333; position: relative;}
.linkmenu02 li a:hover{ color: var(--clr-sky);}
.linkmenu02 li a:before{ content: ""; width: 0; height: 1px; background: var(--clr-sky); position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); transition: all 0.3s ease 0s;}

.memberBtm h5{ font-size: 2.0rem; font-weight: 600; color: var(--clr-blue); margin-top: 2.4rem;}
.memberBtm h5:nth-of-type(n+2){ margin-top: 4.0rem;}
.memberBtm dl dt{ font-size: 1.6rem; line-height: 1.2em; font-weight: 600; cursor: pointer; position: relative; padding: 0.8em 0 0.8em 1.2em; border-bottom: dotted 1px #DDD;}
.memberBtm dl dt:before{ content: "\2b"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; color: var(--clr-sky); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.memberBtm dl dt.active:before{ content: "\f068";}
.memberBtm dl dd { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding-top 0.4s ease, padding-bottom 0.4s ease;}
.memberBtm dl dd a{ display: inline-block; color: #FFF; text-decoration: none; line-height: 1.2em; font-weight: 600; text-decoration: none; background: var(--clr-pink); padding: 0.4em 1.6em; border-radius: 100px; position: relative;}
.memberBtm dl dd a:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 1.0em; transform: translateY(-50%);}
.memberBtm dl dd a:hover{ color: #FFF; background: rgba(var(--clr-pink-rgb),0.72);}
.memberBtm dl dd.open{ max-height: 500px !important; padding: 0.8em 0 0;}
.memberBtm dl .member-last-dt{ cursor: auto;}
.memberBtm dl .member-last-dt:before{ content: none;}

table.member02{}
table.member02{ margin-top: 1.0em;}
table.member02 thead th{ background: #F0F0F0; text-align: center; padding: 1.0em; line-height: 1.4em; border: solid 1px #DDD; border-collapse: collapse;}
table.member02 tbody td ul{ padding-left: 1.0em;}
table.member02 tbody td ul li{ list-style-type: disc; list-style-position: outside;}
table.member02 tbody td ul li:nth-child(n+2){ margin-top: 0.4em;}
table.member02 tbody td ul li span{ display: block; font-size: 1.4rem; line-height: 1.4em;}
table.member02{ width: 100%; border: solid 1px #DDD; border-collapse: collapse; table-layout: fixed;}
table.member02 tbody th{ background: #F4F4F4; padding: 1.0em; line-height: 1.4em; text-align: center; width: 25%; border: solid 1px #DDD; border-collapse: collapse;}
table.member02 tbody td{ background: #FFF; padding: 1.0em; line-height: 1.4em; border: solid 1px #DDD; border-collapse: collapse;}

/* 事故が起こったら(事故受付)
--------------------------------------------------------------*/
/* setting */
body#accident header#postTitle.compensation section:before{ background: url("images/accident/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#considerations header#postTitle.compensation section:before{ background: url("images/accident/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#jiko header#postTitle.compensation section:before{ background: url("images/accident/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}

.accident section > figure{ width: 48%; margin-top: 1.0em;}
.accident section > figure img{ width: 100%; height: auto; border-radius: 8px;}
.accident .merit{ width: 48%; margin-top: 1.0em; display: flex; justify-content: space-between; flex-wrap: wrap;}
.accident .merit li{ width: 31%; background: var(--clr-neg); color: #FFF; font-weight: 600; text-align: center; line-height: 1.0em; padding: 0.8em 0; border-radius: 4px;}
body#accident .contents.entry section{ background: url("images/accident/entry_bg.webp") no-repeat; background-size: 100%;}
.contents.entry.accident section .column .inner{ padding: 2.4em 1.0em;}
.contents.entry.accident section .column .inner h3 span{ display: block; min-height: 3.0em; font-size: 1.6rem; line-height: 1.4em; text-align: center;}

.accident .column{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.0em;}
.accident .column figure{ width: 23.5%; order: 2;}
.accident .column figure img{ width: 100%; height: auto;}
.accident .column .inner{ width: 62.5%; order: 1;}
.accident .column .inner h4{ color: var(--clr-neg);}
.accident .column .inner p { margin-top: 0;}

/* 事故発生時の留意点
--------------------------------------------------------------*/
.considerations{}
.considerations .column{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.considerations .column > figure{ width: 23.5%; order: 2; margin-top: 1.0em;}
.considerations .column > figure img{ width: 100%; height: auto;}
.considerations .column .inner{ width: 72.5%; order: 1;}
.considerations .column .inner h4{ font-size: 2.0rem; line-height: 1.2em; color: var(--clr-blue); font-weight: 700; margin: 1.6rem 0 0 0; padding-bottom: 0.5em; border-bottom: solid 1px #DDD;}
.considerations .column .inner .default{ margin-top: 1.0em;}
.considerations div.coution{ margin-top: 2.0em; border: double 3px var(--clr-neg); padding: 1.0em; display: flex; justify-content: space-between; flex-wrap: wrap;}
.considerations div.coution > figure{ width: 23.5%; order: 2;}
.considerations div.coution > figure img{ width: 100%; height: auto;}
.considerations div.coution dl{ width: 72.5%; order: 1;}
.considerations div.coution dl dt{ font-weight: 700; color: var(--clr-neg);}
.considerations section > figure{ width: 48%; margin-top: 1.0em;}
.considerations section > figure img{ width: 100%; height: auto; border-radius: 8px;}
body#considerations .contents.entry section{ background: url("images/accident/entry_bg.webp") no-repeat; background-size: 100%;}

/* 事故対応の流れ
--------------------------------------------------------------*/
.jiko figure{ margin-top: 1.0em;}
.jiko figure img{ width: 100%; height: auto;}
.jiko figure img.pc-img {}
.jiko figure img.sp-img { display: none;}
.jiko ol{ counter-reset: ol-counter; margin-top: 1.0em;}
.jiko ol li{ counter-increment: ol-counter; position: relative; padding-left: 2.5em;}
.jiko ol li:before{ content:"（"counter(ol-counter)"）"; position: absolute; top: 0; left: 0;}
body#jiko .contents.entry section{ background: url("images/accident/entry_bg.webp") no-repeat; background-size: 100%;}

/* ご加入に際して
--------------------------------------------------------------*/
/*
body#guidance header#postTitle.compensation section:before{ background: url("images/compensation/index_icon_02.webp") no-repeat; background-position: center center; background-size: 120%;}
*/
body#guidance header#postTitle.compensation section:before{ background: url("images/guidance/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}

/* 自動車共済について
--------------------------------------------------------------*/
#postTitle.cateIndex{ width: 100%; padding-bottom: 16%; position: relative; overflow: hidden;}
#postTitle.cateIndex:before{ content: ""; width: 40%; height: 100%; background: url("images/compensation/mainimage_02.webp") no-repeat; background-size: 100%; position: absolute; top: 50%; left: 60%; transform: translateY(-50%); z-index: -1;}
/*
#postTitle.cateIndex:before{ content: ""; width: 30%; height: 100%; background: url("images/compensation/mainimage_02.webp") no-repeat; background-size: 100%; position: absolute; top: 50%; left: 70%; transform: translateY(-50%); z-index: -1;}
*/
#postTitle.cateIndex:after{ content: ""; width: 40%; height: 100%; background: url("images/compensation/mainimage_01.webp") no-repeat; background-size: 100%; position: absolute; top: 50%; right: 60%; transform: translateY(-50%); z-index: -2;}
#postTitle.cateIndex section{ width: 80%; height: 100%; max-width: 1200px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 100; background: rgba(255, 255, 255, 0); background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%); display: flex; justify-content: center; align-items: flex-end;}
/*
#postTitle.cateIndex section{ width: 80%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 100; background: rgba(255, 255, 255, 0); background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%); display: flex; justify-content: center; align-items: flex-end;}
*/
#postTitle.cateIndex section h2{ padding-bottom: 2.4em; text-align: center; font-size: 3.2rem; color: var(--clr-sky); line-height: 1.2em; font-weight: 600;}


.contents.intro{ padding-top: 4.0rem !important;}

.contents.compIndex.clr01 h3{ color: #4ABFEF; border-color: #4ABFEF;}
.contents.compIndex.clr01 .column{ background: #4ABFEF;}
.contents.compIndex.clr02 h3{ color: #7AC288; border-color: #7AC288;}
.contents.compIndex.clr02 h4 em:before{ content: "+"; font-size: 3.2rem; font-weight: 400; margin-right: 0.24em;}
.contents.compIndex.clr02 .column{ background: #7AC288;}
.contents.compIndex.clr03 h3{ color: #E96DA3; border-color: #E96DA3;}

.contents.compIndex h3{ width: 60%; text-align: center; font-size: 2.4rem; line-height: 1.2em; font-weight: 600; display: inline-block; position: relative; left: 50%; transform: translateX(-50%); padding: 0.4em 1.6em; background: #FFF; border-radius: 100px; border: solid 1px #000;}
.contents.compIndex div.column{ width: 100%; background: #000; margin-top: 2.4em; padding: 0 5%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.contents.compIndex div.column .inner{ padding: 1.6em 0.8em; align-items: stretch; gap: 1rem; display: flex; flex-direction: column; justify-content: space-between; flex: 1;}
.contents.compIndex div.column .inner:nth-child(n+2){ border-left: solid 1px #FFF;}
.contents.compIndex div.column .inner h4{ text-align: center;}
.contents.compIndex div.column .inner h4 span{ display: inline-block; font-size: 2.0rem; line-height: 1.2em; font-weight: 600; color: #FFF; position: relative;}
.contents.compIndex div.column .inner h4 span:after{ content: ""; width: 100%; height: 1px; background: #FFF; position: absolute; bottom: 0; left: 0;}
.contents.compIndex div.column .inner h4 em{ display: block; font-size: 4.0rem; line-height: 1.2em; color: #FFF; text-align: center; font-family: "Barlow Condensed", sans-serif; font-style: normal; font-weight: 600;}
.contents.compIndex div.column .inner h4 a{ text-decoration: none;}
.contents.compIndex div.column .inner .image{ width: 72%; margin: 0px auto; border-radius: 100%; overflow: hidden;}
.contents.compIndex div.column .inner .image a{ display: inline-block; text-decoration: none;}
.contents.compIndex div.column .inner .image a img{ transition: transform 0.3s ease; width: 100%; height: auto;}
.contents.compIndex div.column .inner .image a:hover img{ transform: scale(1.1);}
.contents.compIndex div.column .inner dl{ align-items: stretch; gap: 1rem; display: flex; flex-direction: column; justify-content: space-between; flex: 1; margin-top: 1.0em;}

.contents.compIndex div.column .inner dl dt{ text-align: center; line-height: 1.4em; color: #FFF;}
.contents.compIndex div.column .inner dl dt a{ color: #fff; text-decoration: none;}
.contents.compIndex div.column .inner dl dd{ margin-top: auto;}
.contents.compIndex div.column .inner dl dd ul li{ margin-bottom: 0.5em; text-align: center;}
.contents.compIndex div.column .inner dl dd ul li a{ display: inline-block; color: #FFF; text-decoration: underline;}
.contents.compIndex div.column .inner dl dd ul li a:hover{ color: rgba(255,255,255,0.72); text-decoration: none;}
/*
.contents.compIndex div.column .inner .link{ margin-top: 1.6em; text-align: center;}
.contents.compIndex div.column .inner .link a{ display: inline-block; font-size: 1.4rem; line-height: 1.2em; color: #FFF; text-decoration: none; border: solid 1px #FFF; padding: 0.24em 1.6em; position: relative;}
*/
.contents.compIndex div.column .inner .link{ margin-top: 0; text-align: center;}
.contents.compIndex div.column .inner .link a{ width: 100%; display: inline-block; font-size: 1.4rem; line-height: 1.2em; color: #FFF; text-decoration: none; border: solid 1px #FFF; padding: 0.24em 1.6em; position: relative;}
.contents.compIndex div.column .inner .link a:hover{ color: #333; background: #FFF;}
.contents.compIndex div.column .inner .link a:after{ content: "\f105"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%);}

.contents.compIndex ul.column{ width: 50%; margin: 2.4em auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.contents.compIndex ul.column li{ width: 31%; padding-bottom: 31%; border: solid 1px #E96DA3; border-radius: 100%; position: relative;}
.contents.compIndex ul.column li em{ width: 100%; display: block; color: #E96DA3; text-align: center; font-weight: 600; position: absolute; bottom:40%; left: 0;}
.contents.compIndex ul.column li em:before{ content: ""; display: block; width: 180px; height: 100px; margin: 0px auto 0.4em;}
.contents.compIndex ul.column li:nth-child(1) em:before{ background: url("images/compensation/index_icon_06.svg") no-repeat; background-size: contain;}
.contents.compIndex ul.column li:nth-child(2) em:before{ background: url("images/compensation/index_icon_07.svg") no-repeat; background-size: contain;}
.contents.compIndex ul.column li:nth-child(3) em:before{ background: url("images/compensation/index_icon_08.svg") no-repeat; background-size: contain;}
.contents.compIndex ul.column li a{ display: inline-block; position: absolute; top: 65%; left: 50%; transform: translateX(-50%);}
.contents.compIndex ul.column li a{ font-size: 1.4rem; line-height: 1.2em; color: #333; text-decoration: none; border: solid 1px #333;}
.contents.compIndex ul.column li a span{ display: inline-block; padding: 0.24em 1.6em; position: relative;}
.contents.compIndex ul.column li a:hover{ color: #FFF; background: #333;}
.contents.compIndex ul.column li a span:after{ content: "\f105"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%);}

/* 職員採用情報
--------------------------------------------------------------*/
header#postTitle.recruit{ height: 300px; position: relative; overflow: hidden;}
header#postTitle.recruit:before{ content: ""; width: 60%; height: 100%; background: url("images/home/recruit_bnr.webp") no-repeat center left; background-size: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: -1;}
header#postTitle.recruit:after{ content: ""; width: 60%; height: 100%; background-image: linear-gradient(90deg, transparent, #22ac38 30% 100%); position: absolute; top: 0; right: 0; z-index: 0;}
header#postTitle.recruit section{ width: 1200px; height: 100%; padding: 0 8%; margin: 0px auto; display: flex; justify-content: flex-end; align-items: center; position: relative; z-index: 100;}
header#postTitle.recruit section h2{ width: 32%;}
header#postTitle.recruit section h2 img{ width: 100%; height: auto;}

.message{}
.message section{ position: relative;}
.message section h3{ font-family: "Mrs Saint Delafield", cursive; font-weight: 400; font-style: normal; font-size: 20.0rem; opacity: 0.08; position: absolute; bottom: 0; right: -5%; z-index: -1; transform: rotate(-10deg);}
.message section p{ font-size: 1.6rem; line-height: 2.0em;}
.message section p strong{ font-size: 4.0rem; line-height: 1.4em;}
.message section ul{ margin-top: 1.0em;}
.message section ul li{ padding-left: 2.0em; position: relative;}
.message section ul li:before{ content: ""; width: 1.1em; height: 1px; background: rgba(51,51,51,0.24); position: absolute; top: 50%; left: 0;}

table.default td.subHead{ width: 25%; background: #F9F9F9;}

.contactInfo{ width: 80%; margin: 8.0rem auto 0; border: solid 1px #DDD; background: #FFF; box-shadow: 0 4px 0px #F0F0F0; border-radius: 16px; overflow: hidden;}
.contactInfo h5{ background: var(--clr-blue); text-align: center; font-size: 2.0rem; line-height: 1.2em; font-weight: 600; color: #FFF; padding: 0.8em;}
.contactInfo dl{ padding: 1.5em;}
.contactInfo dl dt{ font-weight: 600; text-align: center;}
.contactInfo dl dd{ margin-top: 0.24em; text-align: center;}
.contactInfo dl dd strong{ font-size: 3.2rem; line-height: 1.2em;}

/* 自動車共済
--------------------------------------------------------------*/
header#postTitle.compensation{ background: var(--bg-clr01); overflow: hidden; height: 300px; display: flex; align-items: flex-end;}
header#postTitle.compensation section{ width: calc(100% - 20%); max-width: calc(1200px - 10%); margin: 0px auto; padding-bottom: 1.6rem; padding-left: calc(224px + 2.0em); position: relative;}
header#postTitle.compensation section:before{ content: ""; width:224px; height: 224px; border-radius: 100%; background: #FFF; position: absolute; bottom: -4.0rem; left: 0; z-index: 10;}
header#postTitle.compensation section h2{ font-size: clamp(3.2rem,3.2vw,4.0rem); line-height: 1.2em; font-weight: 600; color: var(--clr-sky);}
header#postTitle.compensation section p{ width: calc(100% - 10%); margin-top: 0.8em;}
h4.coution{ font-size: 2.4rem; line-height: 1.4em; font-weight: 600; color: #ED7C95; border-bottom: solid 1px #ED7C95; padding: 0.8em 0; margin-top: 1.6em;}

/* setting */
body#taibutsu header#postTitle.compensation section:before{ background: url("images/compensation/pict_taibutsu.webp") no-repeat; background-position: center center; background-size: 120%;}
body#syaryo header#postTitle.compensation section:before{ background: url("images/compensation/pict_syaryo.webp") no-repeat; background-position: center center; background-size: 120%;}
body#waribiki header#postTitle.compensation section:before{ background: url("images/waribiki/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#tosho header#postTitle.compensation section:before{ background: url("images/compensation/pict_tosho.webp") no-repeat; background-position: center center; background-size: 120%;}
body#jinsho header#postTitle.compensation section:before{ background: url("images/compensation/pict_jinsho.webp") no-repeat; background-position: center center; background-size: 120%;}
body#taijin header#postTitle.compensation section:before{ background: url("images/compensation/pict_taijin.webp") no-repeat; background-position: center center; background-size: 120%;}
body#fleet header#postTitle.compensation section:before{ background: url("images/fleet/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#nonfleet header#postTitle.compensation section:before{ background: url("images/nonfleet/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}

/* table */
.js-scrollable{}
table.compensation.fixed{ table-layout: fixed;}
table.compensation{ width: 100%; border-collapse: collapse; border: solid 1px #DDD; margin-top: 1.0em;}
table.compensation thead th{ text-align: center; background: #EFEFEF; border: solid 1px #DDD; padding: 0.8em; line-height: 1.4em;}
table.compensation tbody th{ text-align: center; background: #EFEFEF; border: solid 1px #DDD; padding: 0.8em; line-height: 1.4em; width: 25%;}
table.compensation tbody td{ text-align: center; background: #FFF; border: solid 1px #DDD; padding: 0.8em; line-height: 1.4em;}
table.compensation tbody td span.image{ width: 100%; display: block;}
table.compensation tbody td span.image img{ width: 100%; height: auto;}
table.compensation tbody td i{ font-size: 2.4rem; line-height: 1.2em;}

table.compensation.tdLeft td{ text-align: left; width: 75%;}

span.aleat{ display: block; font-size: 1.4rem; line-height: 1.2em; color: var(--clr-neg);}
article.contents section > span.aleat{ margin-top: 1.0em;}

table.compensation.other tbody th{ width: auto;}

/* annotation */
.annotation{ text-align: right; padding-bottom: 0 !important;}
.annotation ul{ display: inline-block; margin: 0px auto;}
.annotation ul li{ color: var(--clr-neg); border: solid 1px var(--clr-neg); border-radius: 4px; padding: 0.5em; line-height: 1.2em;}
.annotation ul li:nth-child(n+2){ margin-top: 0.5em;}

/* option */
.contents.option{ position: relative;}
.contents.option h3{ display: inline-block; width: 60%; background: #FFF; border-radius: 8px; padding: 0.8em;}
.contents.option h3 img{ width: auto; height: 40px;}
.contents.option strong{ color: var(--clr-neg); font-weight: 400;}
.contents.option sup{ display: block; font-size: 1.6rem; line-height: 1.4em;}
.contents.option ul{ margin-top: 1.0em;}
.contents.option ul li{ line-height: 1.4em; padding: 0.5em 0;}
/*
.contents.option h4{ display: flex;align-items: center; font-size: 2.4rem; line-height: 1.4em; font-weight: 600;}
*/
.contents.option h4{ display: flex;align-items: center; font-size: 2.4rem; line-height: 1.4em; font-weight: 600;}
.contents.option h4 img.option-pict{ margin-right: 0.5em; max-height: 35px;}
.contents.option .block{ padding: 4.0rem 0;}
.contents.option .block:last-child{ padding-bottom: 0;}

.contents.option.clr01 h3{ border: solid 1px #7AC389;}
.contents.option.clr01:before{ content: ""; width: 100%; height: calc(100% - 110px); background: #F3F4F0; position: absolute; bottom: 0px; left: 0; z-index: -1;  border: solid 1px #7AC389; border-style: solid none;}
.contents.option.clr01 h4{ color: #7AC389;}
.contents.option.clr01 h4 a { color: #7AC389; text-decoration: none; border-bottom: 2px solid rgba(var(--clr-blue-rgb), 1.0);}
.contents.option.clr01 h4 a:hover { border-bottom: 2px solid rgb(24 68 147 / 0%); opacity: 0.64; transition: .2s;}
.contents.option.clr01 div{ border-bottom: solid 1px #7AC389;}
.contents.option.clr01 div:last-child{ border-bottom: none;}

.contents.option.clr02 h3{ border: solid 1px #EA5514;}
.contents.option.clr02 h4{ color: #F39800;}
.contents.option.clr02 h4 a { color: #F39800; text-decoration: none; border-bottom: 2px solid rgba(var(--clr-blue-rgb), 1.0);}
.contents.option.clr02 h4 a:hover { border-bottom: 2px solid rgb(24 68 147 / 0%); opacity: 0.64; transition: .2s;}

.contents.option.clr02:before{ content: ""; width: 100%; height: calc(100% - 110px); background: #F3F4F0; position: absolute; bottom: 0px; left: 0; z-index: -1;  border: solid 1px #EA5514; border-style: solid none;}

.contents.download{}
.contents.download p{ text-align: center; margin-top: 0;}
.contents.download a{ width: 18.4%; display: block; margin: 1.6em auto 0; background: rgba(var(--btn-sky-rgb),1.0); text-align: center;  padding: 1.6em 0.8em; padding-bottom: 2.4em; border-radius: 8px; color: #FFF; font-weight: 600; line-height: 1.4em; text-decoration: none; position: relative;}
.contents.download a:hover{ background: rgba(var(--btn-sky-rgb),0.72);}
.contents.download a span{ display: inline-block; text-align: center; line-height: 1.4em;}
.contents.download a span:before{ content: ""; width: 60px; height: 60px; background: url("images/compensation/pamphlet.svg") no-repeat; background-size: contain; display: block; margin: 0px auto 0.4em;}
.contents.download a:after{ content: "\f078"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; bottom: 0.4em; left: 50%; transform: translateX(-50%);}

/* 対人賠償共済
--------------------------------------------------------------*/
.block.clm{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.block.clm figure{ width: 15%; order: 2;}
.block.clm figure img{ width: 100%; height: auto;}
.block.clm .inner{ width: 81%;}

/* 搭乗者傷害共済
--------------------------------------------------------------*/
table.compensation.tosho tbody th{ width: 15%;}
table.compensation.tosho td.bgClr{ background: #EFEFEF; width: 20%; text-align: center;}
table.compensation.tosho tbody td{ text-align: left;}

body#tosho .contents.option ul li{ line-height: 1.4em; padding: 0.5em 0; padding-left: 1.5em; position: relative;}

/* 自動車共済の特約
--------------------------------------------------------------*/
.other .sideHeading { display: flex; align-items: center; flex-wrap: wrap}
.other .sideHeading img { max-height: 35px; margin-right: 0.5em;}
body#other header#postTitle.compensation section:before{ background: url("images/common/common_index_icon.webp") no-repeat; background-position: center center; background-size: 120%;}
body#other .block.clm figure { width: 21%;}
body#other .block.clm .inner { width: 75%;}
.other.button { margin: 2.4em auto 0 !important; text-align: center;}
.other.button a {display: inline-block; color: #FFF; text-decoration: none; font-weight: 600; line-height: 1.2em; padding: 0.8em 1.6em; border-radius: 100px; background: var(--clr-pink); transition: all 0.3s ease 0s; position: relative;}
.other.button a:hover { padding: 0.8em 3.2em; background: rgba(var(--clr-pink-rgb),0.72);}
.other.button a:after { content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.other.button a:hover:after { right: 1.2em; opacity: 1.0;}

ul.other{ margin-top: 1.0em;}
ul.other li{ position: relative; line-height: 1.4em; padding: 0.5em 0; padding-left: 3.5em;}
ul.other li span.first-span{ position: absolute; top: 0.5em; left: 0; color: var(--clr-neg);}
ul.other li span.second-span{ color: var(--clr-neg);}
ul.other li figure{ display: inline-block; height: 20px; position: relative; top: 0.5px;}
ul.other li figure img{ width: auto; height: 100%;}
ul.other li ol{ margin-top: 0; padding-left: 1.0em; padding-top: 0.24em;}
ul.other li ol li{ padding: 0.24em 0; margin: 0; list-style-type: decimal; list-style-position: outside;}

/* ノンフリート等級制度
--------------------------------------------------------------*/
.nonfleet{}

.nonfleet h5{ font-weight: 600; margin: 2.0em 0 0.5em;}

p.aleat{ position: relative; padding-left: 3.0em; margin-top: 0 !important;}
p.aleat span{ position: absolute; top: 0; left: 0; color: var(--clr-neg);}

.nonfleet .box{ border: solid 1px #DDD; margin-top: 1.0em; padding: 1.0em;}
.nonfleet .box h6{ font-weight: 600; color: var(--clr-blue); line-height: 1.2em;}
.nonfleet .box.icon{ position: relative;}
.nonfleet .box.icon:before{ content: ""; width: 86px; height: 25px; background: url("images/compensation/icon.png") no-repeat; background-size: contain; position: absolute; top: 1.0em; right: 1.0em;}

.nonfleet ol{ counter-reset: ol-counter; margin-top: 1.0em;}
.nonfleet ol li{ counter-increment: ol-counter; position: relative; padding-left: 2.5em;}
.nonfleet ol li:before{ content:"（"counter(ol-counter)"）"; position: absolute; top: 0; left: 0;}

.nonfleet table{ width: 100%; max-width: 720px; border: solid 1px #DDD; border-collapse: collapse; table-layout: fixed;}
.nonfleet table thead th{ background: #F4F4F4; padding: 1.0em; line-height: 1.4em; text-align: center; border: solid 1px #DDD; border-collapse: collapse;}
.nonfleet table tbody th{ background: #F9F9F9; padding: 1.0em; line-height: 1.4em; text-align: center; width: 25%; border: solid 1px #DDD; border-collapse: collapse; width: 15%;}
.nonfleet table tbody td{ background: #FFF; padding: 1.0em; line-height: 1.4em; text-align: center; border: solid 1px #DDD; border-collapse: collapse;}
.nonfleet table tbody tr td:last-child{ width: 10%;}
.nonfleet figure{ width: 100%; max-width: 720px;}
.nonfleet figure img{ width: 100%; height: auto;}

.nonfleet ul.kanaList{}
.kanaListTopItem { display: flex; align-items: flex-start;}
.kanaMarker { display: inline-block; min-width: 3em; flex-shrink: 0;}
.kanaContent { flex: 1;}
.nonfleet ul.kanaList li ul{ padding-left: 2.0em;}
.nonfleet ul.kanaList li ul li{ list-style-type: lower-alpha; list-style-position: outside;}

.nonfleet dl{ counter-reset: dt-counter; padding-left: 1.0em;}
.nonfleet dl dt{ counter-increment: dt-counter; font-weight: 600; position: relative; margin-top: 1.0em;}
.nonfleet dl dt:before{ content:"（"counter(dt-counter)"）"; margin-right: 0.25em;}
.nonfleet dl dd{ padding-left: 1.0em;}
.nonfleet dl dd > span{ color: var(--clr-neg);}

/* 各種割引・割増
--------------------------------------------------------------*/
table.compensation.waribiki01 td.bgClr{ background: #EFEFEF;}
table.compensation.waribiki01 tbody th{ width: 20%;}
table.compensation.waribiki01 tbody td{ text-align: center;}

.aleatList{ margin-top: 1.0em;}
.aleatList li{ line-height: 1.4em; padding: 0.5em 0; padding-left: 1.5em; position: relative;}
.aleatList li:before{ content: "※"; position: absolute; top: 0.5em; left: 0; color: var(--clr-neg);}

body#waribiki ol.numList li span.aleat{ display: inline-block;}

table.waribiki02{ width: auto; border-collapse: collapse; border: solid 1px #DDD; table-layout: fixed; margin-top: 1.0em;}
table.waribiki02 tbody th{ text-align: center; background: #EFEFEF; border: solid 1px #DDD; padding: 0.8em; line-height: 1.4em;}
table.waribiki02 tbody td{ text-align: center; background: #FFF; border: solid 1px #DDD; padding: 0.8em; line-height: 1.4em;}

/* 人身傷害共済
--------------------------------------------------------------*/
table.compensation.jinsho td.bgClr{ background: #EFEFEF;}
table.compensation.jinsho tbody td strong{ color: var(--clr-neg); font-weight: 400;}
table.compensation.jinsho tbody td img{ width: 100%; height: auto;}

ul.jinsho{ margin-top: 1.0em;}
ul.jinsho li{ position: relative; line-height: 1.4em; padding: 0.5em 0; padding-left: 3.0em;}
ul.jinsho li span{ position: absolute; top: 0.5em; left: 0; color: var(--clr-neg);}
ul.jinsho li figure{ display: inline-block; height: 20px; position: relative; top: 0.5px;}
ul.jinsho li figure img{ width: auto; height: 100%;}
ul.jinsho li ol{ margin-top: 0; padding-left: 1.0em; padding-top: 0.24em;}
ul.jinsho li ol li{ padding: 0.24em 0; margin: 0; list-style-type: decimal; list-style-position: outside;}
ul.jinsho li div{display: flex; justify-content: flex-start; margin-left: 1.0em;}
ul.jinsho li p.num{ display: inline-block; margin-top: 0; flex-shrink: 0;}
ul.jinsho li p.numtext{ display: inline-block; margin-top: 0; flex-shrink: 1;}

/* 自賠責共済
--------------------------------------------------------------*/
/* setting */
body#compensation02 header#postTitle.compensation section:before{ background: url("images/compensation02/pict_compensation02.webp") no-repeat; background-position: center center; background-size: 120%;}

.imgClm02{ width: 72%; margin: 2.4rem auto 0 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.imgClm02 li{ width: 48%;}
.imgClm02 li figure img{ width: 100%; height: auto; display: block; padding: 0 6.4em;}
.imgClm02 li figure figcaption{ display: block; text-align: center; font-weight: 600; padding-top: 0.5em; margin-top: 0.5em; border-top: solid 1px #DDD;}

table.compensation tbody td ul li{ padding-left: 1.0em; position: relative;}
table.compensation tbody td ul li:before{ content: "・"; position: absolute; top: 0; left: 0;}

.compensation02.button { margin: 2.4em auto 0 !important; text-align: center;}
.compensation02.button a { display: inline-block; color: #FFF; text-decoration: none; font-weight: 600; line-height: 1.2em; padding: 0.8em 1.6em; border-radius: 100px; background: var(--clr-pink); transition: all 0.3s ease 0s; position: relative;}
.compensation02.button a:hover { padding: 0.8em 3.2em; background: rgba(var(--clr-pink-rgb),0.72);}
.compensation02.button a:after { content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.compensation02.button a:hover:after { right: 1.2em; opacity: 1.0;}

/* 組合情報
--------------------------------------------------------------*/
/* setting */
body#kumiai header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#enkaku header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#gyoseki header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#unionoffice header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#riskmanagement header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#hansyaka header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#kanyu header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#kojin header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#kyousaikinshiharai header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}
body#shinyou header#postTitle.compensation section:before{ background: url("images/kumiai/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}

.kumiai-map{ width: 64%; margin: 8.0rem auto 0;}
.kumiai-map img{ width: 100%; height: auto;}

.article.kumiai figure { width: 12%;}
.article.kumiai .inner { width: 84%;}

/* リスク管理方針
--------------------------------------------------------------*/
.risk-management{ counter-reset: h3-counter;}
.risk-management h3.sideHeading:nth-of-type(n+2){ margin-top: 4.0rem;}
.risk-management h3.sideHeading.numb{ counter-increment: h3-counter; position: relative;}
.risk-management h3.sideHeading.numb:before{ content: counter(h3-counter, upper-roman)"."; margin-right: 0.5em;}
.risk-management dl{ counter-reset: dt-counter; padding-left: 1.0em;}
.risk-management dl dt{ counter-increment: dt-counter; font-weight: 600; position: relative;}
.risk-management dl dt:nth-of-type(n+2){ margin-top: 1.0em;}
.risk-management dl dt:before{ content: counter(dt-counter)"."; margin-right: 0.25em;}
.risk-management dl dd{ padding-left: 1.0em;}
.risk-management dl dd ol{ counter-reset: ol-counter;}
.risk-management dl dd ol > li{ counter-increment: ol-counter; position: relative;}
.risk-management dl dd ol > li:nth-of-type(n+2){ margin-top: 1.0em;}
.risk-management dl dd ol > li:before{ content:"（"counter(ol-counter)"）"; margin-right: 0.25em;}
.risk-management dl dd ol li ol{ counter-reset: olol-counter; padding-left: 2.75em;}
.risk-management dl dd ol li ol li{ padding-left: 1.5em; counter-increment: olol-counter; position: relative; margin-top: 0;}
.risk-management dl dd ol li ol li:nth-of-type(n+2){ margin-top: 0;}
.risk-management dl dd ol li ol li:before{ content:counter(olol-counter); border: solid 1px #333; border-radius: 50%; height: 1.0em; width: 1.0em; font-size: 1.4rem; line-height: 1; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.risk-management dl dd ol li ul{ padding-left: 2.75em;}
.risk-management section > ol{ padding-left: 1.5em;}
.risk-management section > ol li{ list-style-type: decimal; list-style-position: outside;}
.risk-management section > ol li:nth-of-type(n+2){ margin-top: 0.5em;}

/* 信用リスク
--------------------------------------------------------------*/
.smallBtn{ display: inline-block; margin-top: 4.0rem; color: #FFF; text-decoration: none; font-weight: 600; line-height: 1.2em; background: var(--btn-sky); padding: 0.8em 1.6em; border-radius: 100px;}
.smallBtn:hover{ color: #FFF; background: rgba(var(--btn-sky-rgb),0.72);}

/* 個人情報のお取扱い
--------------------------------------------------------------*/
.kojin{}
body#kojin main#primary article.contents { padding-bottom: 0;}
body#kojin main#primary article.contents.kojin { padding: 0 0 3.0em;}
.kojin{ counter-reset: h4-counter;}
.kojin h4.sideHeading:nth-of-type(n+2){ margin-top: 4.0rem;}
.kojin h4.sideHeading{ counter-increment: h4-counter; position: relative;}
.kojin h4.sideHeading:before{ content: counter(h4-counter)"."; margin-right: 0.5em;}
.kojin section > p{ margin-left: 2.0em;}
.kojin .kojin-info{ display: inline-block; margin: 4.0rem 0 0 2.0em; border: solid 1px #DDD; background: #FFF; box-shadow: 0 4px 0px #F0F0F0;}
.kojin .kojin-info h4{ background: var(--clr-blue); font-size: 2.0rem; line-height: 1.2em; font-weight: 600; color: #FFF; padding: 0.8em;}
.kojin .kojin-info dl{ padding: 1.5em;}
.kojin .kojin-info dl dt{ font-weight: 600;}
.kojin .kojin-info dl dd{ margin-top: 0.24em;}

.kojin ol{ margin-left: 4.0em; counter-reset: ol-counter; margin-top: 1.0em;}
.kojin ol li{ counter-increment: ol-counter; position: relative; padding-left: 2.5em;}
.kojin ol li:before{ content:"（"counter(ol-counter)"）"; position: absolute; top: 0; left: 0;}
.kojin ol li ul{ margin-left: 0; counter-reset: none;}
.kojin ol li ul li{ counter-increment: none; padding-left: 1.0em; position: relative;}
.kojin ol li ul li:before{ content: "・"; position: absolute; top: 0; left: 0;}

.kojin .numDl{ counter-reset: dt-counter; margin-left: 4.0em;}
.kojin .numDl dt{ counter-increment: dt-counter; font-weight: 600; position: relative; margin-top: 1.0em;}
.kojin .numDl dt:before{ content:"("counter(dt-counter)")"; margin-right: 0.25em;}
.kojin .numDl dd{ padding-left: 1.6em;}
.kojin .numDl dd ul{}
.kojin .numDl dd ul li{ padding-left: 1.0em; margin-top: 1.0em; position: relative;}
.kojin .numDl dd ul li:before{ content: "○"; position: absolute; top: 0; left: 0;}

/* 勧誘方針
--------------------------------------------------------------*/
.kanyu{}
.kanyu ol{ padding-left: 1.5em;}
.kanyu ol li{ list-style-type: decimal; list-style-position: outside; line-height: 1.4em;}
.kanyu ol li:nth-child(n+2){ margin-top: 2.0em;}

/* 反社会的勢力による被害防止基本方針
--------------------------------------------------------------*/
.hansyaka{ counter-reset: h3-counter;}
.hansyaka h3.sideHeading:nth-of-type(n+2){ margin-top: 4.0rem;}
.hansyaka h3.sideHeading{ counter-increment: h3-counter; position: relative;}
.hansyaka h3.sideHeading:before{ content: counter(h3-counter)"."; margin-right: 0.5em;}
.hansyaka p{ padding-left: 2.0em;}

/* 組合の沿革
--------------------------------------------------------------*/
.history dl{ display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;}
.history dl:after{ content: ""; width: 4px; height: calc(100% - 3.1em); background: rgba(var(--clr-blue-rgb),0.08); position: absolute; top: 1.55em; left: calc(8px / 2); z-index: -1;}
.history dl dt{ width: 20.0em; color: var(--clr-blue); font-weight: 600; padding: 1.0em 0 1.0em 2.0em; position: relative; border-bottom: solid 1px #E4E4E4;}
.history dl dt:before{ content: ""; width: 8px; height: 8px; border: solid 2px var(--clr-blue); background: #FFF; border-radius: 100%; position: absolute; top: 1.55em; left: 0;}
.history dl dd{ width: calc(100% - 20.0em); padding: 1.0em 0 1.0em 0; border-bottom: solid 1px #E4E4E4;}
.history dl dt:last-of-type,
.history dl dd:last-of-type{ border-bottom: none;}

/* 組合事務所一覧
--------------------------------------------------------------*/
table.office{ width: 100%; border: solid 1px #DDD; border-collapse: collapse;}
table.office thead th{ background: #EEE; padding: 1.0em; line-height: 1.4em; text-align: center; border: solid 1px #DDD; border-collapse: collapse;}
table.office tbody th{ background: #F4F4F4; padding: 1.0em; line-height: 1.4em; text-align: center; border: solid 1px #DDD; border-collapse: collapse;}
table.office tbody td{ background: #FFF; padding: 1.0em; line-height: 1.4em; border: solid 1px #DDD; border-collapse: collapse;}

dl.unionoffice{ margin-top: 2.4rem;}
dl.unionoffice dt{ font-weight: 600;}

.callcenter .box{ width: 72%; margin: 0px auto; margin-top: 4.0rem; background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.16); border-radius: 16px; overflow: hidden;}
.callcenter .box h4{ text-align: center; color: #FFF; background: var(--clr-blue); font-size: 2.4rem; line-height: 1.2em; font-weight: 600; padding: 0.8em 0;}
.callcenter .box .phone{ text-align: center; margin-top: 2.0em;}
.callcenter .box .phone a{ display: inline-block; color: #333; text-decoration: none; font-size: 4.0rem; line-height: 1.2em; padding-left: 1.0em; position: relative;}
.callcenter .box .phone a:before{ content: "\f2a0"; font-size: 3.2rem; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; color:  var(--clr-blue); position: absolute; top: 0; left: 0;}
.callcenter .box .phone a:hover{ color: rgba(51,51,51,0.72);}
.callcenter .box span{ display: block; text-align: center; font-size: 1.4rem;line-height: 1.4em; margin: 1.5em 0;}

/* 代理所専用
--------------------------------------------------------------*/
body#agency-notice main#primary{ width: 90%; max-width: 1200px; margin: 0px auto;}

#postTitle.digital-policy{ text-align: center;}
#postTitle.digital-policy h2{ font-size: 2.4rem; line-height: 1.4em; text-align: center; font-weight: 600; padding: 4.0rem 0;}
#postTitle.digital-policy p{ text-align: center;}

.contents.login{}
.contents.login .input{ background: #EFEFEF; padding: 2.4em;}
.contents.login .input h3{ font-size: 2.4rem; line-height: 1.4em; text-align: center; font-weight: 600; width: 100%;}
.contents.login .input dl{ width: 60%; margin: 2.4rem auto 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.contents.login .input dl dt{ width: 15.0em; padding: 0.4em 0;}
.contents.login .input dl dt sup{ display: block; position: relative; padding-left: 3.0em; font-size: 1.2rem; line-height: 1.2em;}
.contents.login .input dl dt sup:before{ content: "例）"; position: absolute; top: 0; left: 0;}
.contents.login .input dl dd{ width: calc(100% - 15.0em);}
.contents.login .input dl dd input{ width: 100%; border-color: #CCC; padding: 0.8em;}
.contents.login .input p{ text-align: center;}

.contents.login div.button{ background: var(--bg-clr02); padding: 1.6em; text-align: center;}
.contents.login div.button p{ width: 100%; text-align: center;}
.contents.login div.button input[type="submit"]{ padding: 0.8em 6.4em; cursor: pointer; font-weight: 600; line-height: 1.2em; color: #FFF; background-image: linear-gradient(#3979be 50%, #036eb8 50%); border-radius: 8px;}
.contents.login div.button ul{ display: inline-block; margin-top: 0.8em;}
.contents.login div.button ul li{ padding: 0.4em 0; line-height: 1.4em;}
.contents.login div.button ul li:before{ content: "\f0da"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.4rem; margin-right: 0.5em; color: var(--clr-blue);}
.contents.login div.button ul li a{ display: inline-block; color: var(--clr-blue); text-decoration: none;}
.contents.login div.button ul li a:hover{ color: var(--clr-sky);}

ul.agency-list{ margin-top: 1.0em;}
ul.agency-list li{ display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 1.0em 0; line-height: 1.4em; border-bottom: solid 1px #DDD;}
ul.agency-list li span{ width: 7.0em; color: var(--clr-blue);}
ul.agency-list li a{ display: inline-block; color: #333; text-decoration: none;}
ul.agency-list li a:hover{ color: rgba(51,51,51,0.64);}

#modal-content{ text-align: center;}
/*
h2#modal-title{ font-size: 2.4rem; line-height: 1.4em; font-weight: 700;}
#modal-date{ margin-top: 1.0em; padding-top: 1.0em; border-top: solid 1px #DDD;}
*/
h2#modal-title{ font-size: 3.8rem; line-height: 2.0em; font-weight: bold; display: inline-block; border-bottom: 2px dashed #999; margin-bottom: 12px; text-align: center;}
#modal-date{ font-size: 1.5rem; line-height: 2.0em; text-align: center;}
#modal-body{ margin-top: 1.0em;}
#modal-close{ margin-top: 1.0em;}

/* ロードサービス
--------------------------------------------------------------*/
body#roadservice header#postTitle.compensation section:before{ background: url("images/roadservice/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}


.roadservice{}

.roadservice section > h4{ margin-top: 1.0em; font-weight: 700; margin-bottom: -1.0em;}
.roadservice section > h5{ font-weight: 700; margin-top: 1.0em;}
.roadservice .table01{ width: 100%; border: solid 1px #DDD; border-collapse: collapse; table-layout: fixed; margin-top: 0.5em;}
.roadservice .table01 tbody th{ background: #F6F6F6; padding: 1.0em; line-height: 1.4em; text-align: left; width: 28%; border: solid 1px #DDD; border-collapse: collapse;}
.roadservice .table01 tbody td{ background: #FFF; padding: 1.0em; line-height: 1.4em; border: solid 1px #DDD; border-collapse: collapse; text-align: center;}
.roadservice .table01 tbody td img{ width: 100%; height: auto;}
.roadservice .table01 tbody tr td:last-child{ width: 56%; text-align: left;}

.roadservice .clm{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.roadservice .clm figure{ width: 18.4%; order: 2; margin-top: 1.0em;}
.roadservice .clm figure img{ width: 100%; height: auto;}
.roadservice .clm .inner{ width: 66.6%; order: 1;}
.roadservice .clm .inner dl{ margin-top: 0.5em; display: flex; justify-content: space-between; flex-wrap: wrap;}
.roadservice .clm .inner dl dt{ width: 6.0em; padding: 0.5em 0; line-height: 1.4em;}
.roadservice .clm .inner dl dd{ width: calc(100% - 6.0em); padding: 0.5em 0; line-height: 1.4em;}
.roadservice .clm .inner h5{ color: var(--clr-neg); font-weight: 600; margin-top: 1.0em; margin-bottom: -0.5em;}

.roadservice .table02{ width: 100%; border: solid 1px #DDD; border-collapse: collapse; table-layout: fixed; margin-top: 1.0em;}
.roadservice .table02 thead th{ background: #F0F0F0; padding: 1.0em; line-height: 1.4em; text-align: center; border: solid 1px #DDD; border-collapse: collapse;}
.roadservice .table02 tbody th{ background: #F6F6F6; padding: 1.0em; line-height: 1.4em; text-align: left; width: 40%; border: solid 1px #DDD; border-collapse: collapse;}
.roadservice .table02 tbody td{ background: #FFF; padding: 1.0em; line-height: 1.4em; border: solid 1px #DDD; border-collapse: collapse; text-align: center;}
.roadservice .table02 tbody td strong{ display: block; text-align: center; font-size: 3.2rem; font-weight: normal; margin-bottom: 0.16em;}

.roadservice figure { position: relative; margin-top: 2.0rem;}
.roadservice figure img{ width: 100%; height: auto;}
.roadservice figure a.button{ display: inline-block; color: #FFF; text-decoration: none; line-height: 1.0em; font-weight: 600; background: var(--clr-sky); padding: 1.6rem 6.4rem; border-radius: 100px; position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%); z-index: 100;}
.roadservice figure a.button:hover{ background: rgba(var(--clr-sky-rgb),0.72); color: #FFF;}
.roadservice figure a.button span{ display: inline-block; padding: 0 1.2em; position: relative;}
.roadservice figure a.button span:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; position: absolute; top: 0; right: 0;}

.roadservice figure.quickNavi a { display: inline-block;}
/*
.roadservice figure.quickNavi.link a { pointer-events: none;}
*/
.roadservice figure.quickNavi a img { max-width: 100%;}
.roadservice figure.quickNavi a.quick-navi-guide-sp { display: none;}

ul.supList{ margin-top: 1.0em;}
ul.supList li{ line-height: 1.4em; padding: 0.24em 0; padding-left: 2.0em; position: relative;}
ul.supList li span{ position: absolute; top: 0.24em; left: 0;}

figure.jafBnr{ margin-top: 0.5em; width: 20%;}
figure.jafBnr img{ width: 100%; height: auto;}
figure.jafBnr a{ display: block;}
figure.jafBnr a:hover{ opacity: 0.64;}

.circleNum{ margin-top: 1.0em; margin-left: 0; counter-reset: ol-counter;}
.circleNum li{ counter-increment: ol-counter; padding: 0.24em 0 0.24em 1.5em; line-height: 1.2em; position: relative;}
.circleNum li:before{ content:counter(ol-counter); border: solid 1px #333; border-radius: 50%; height: 1.0em; width: 1.0em; font-size: 1.4rem; line-height: 1; display: flex; justify-content: center; align-items: center; position: absolute; top: 0.34em; left: 0;}

figure.customer_desk{ width: 64%; margin-top: 1.5em;}
figure.customer_desk img{ width: 100%; height: auto;}

.roadservice .btmButton{ margin-top: 2.4rem; padding-top: 4.0rem; border-top: solid 1px #EEE; display: flex; justify-content: center; flex-wrap: wrap;}
.roadservice .btmButton li{ width: 21.6%;}
.roadservice .btmButton li:nth-child(n+2){ margin-left: 4.0rem;}
.roadservice .btmButton li a{ display: block; background: rgba(var(--btn-sky-rgb),1.0); text-align: center; padding: 1.6em 0.8em; padding-bottom: 2.4em; border-radius: 8px; color: #FFF; font-weight: 600; line-height: 1.4em; text-decoration: none; position: relative;}
.roadservice .btmButton li a:hover{ background: rgba(var(--btn-sky-rgb),0.72);}
.roadservice .btmButton li a span{ display: inline-block; text-align: center; line-height: 1.4em;}
.roadservice .btmButton li:nth-child(1) a span:before{ content: ""; width: 60px; height: 60px; background: url("images/roadservice/qr.webp") no-repeat; background-size: contain; display: block; margin: 0px auto 0.4em;}
.roadservice .btmButton li:nth-child(2) a span:before{ content: ""; width: 60px; height: 60px; background: url("images/compensation/pamphlet.svg") no-repeat; background-size: contain; display: block; margin: 0px auto 0.4em;}
.roadservice .btmButton li a:after{ content: "\f078"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; bottom: 0.4em; left: 50%; transform: translateX(-50%);}


/* 中途採用情報（お問い合わせ）
--------------------------------------------------------------*/
body#inquiry h2.pageTitle span:before,
body#recruit_form_confirm h2.pageTitle span:before,
body#recruit_form_complete h2.pageTitle span:before{ content: "INQUIRY";}
body#inquiry.page-id-90 h2.pageTitle:after,
body#recruit_form_confirm h2.pageTitle:after,
body#recruit_form_complete h2.pageTitle:after{ background: url("images/recruit/main_image.webp") no-repeat center center; background-size: 100%;}

/* confirm / complete */
#recruit_form_confirm article.contents section > p,
#recruit_form_complete article.contents section > p{ text-align: center;}

/* 外務職員募集
--------------------------------------------------------------*/
body#foreign_staff #postTitle.foreign_staff{ position: relative; padding: 8.0rem 0;}
body#foreign_staff #postTitle.foreign_staff:after{ content: ""; width: 55%; height: 100%; background: url("images/foreign_staff/index_promo.webp") no-repeat center right; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: -1;}
body#foreign_staff #postTitle.foreign_staff:before{ content: ""; width: 60%; height: 100%; background-image: linear-gradient(90deg, #90c9e3 75%, transparent); position: absolute; top: 0; left: 0; z-index: 1;}
body#foreign_staff #postTitle.foreign_staff section{ width: calc(100% - 10%); max-width: 1200px; margin: 0px auto; position: relative; z-index: 10;}
body#foreign_staff #postTitle.foreign_staff section h2{ width: 30%;}
body#foreign_staff #postTitle.foreign_staff section h2 img{ width: 100%; height: auto;}

body#foreign_staff main#primary article.contents:nth-of-type(1){ padding-top: 6.4rem;}
.contents.about{ position: relative; overflow: hidden;}
body#foreign_staff .contents.about:before{ content: ""; width: 50%; height: 100%; background: url("images/foreign_staff/about_bg.webp") no-repeat center center; background-size: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: -1;}
body#foreign_staff .contents.about:after{ content: ""; width: 70%; height: 100%; background-image: linear-gradient(90deg, transparent, #ffffff 25%); position: absolute; top: 0; right: 0; z-index: 1;}
body#foreign_staff .contents.about section{ position: relative; z-index: 10;}
body#foreign_staff .contents.about section .inner{ width: 50%; margin-left: auto;}
.contents.about section h2{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; text-align: center; font-size: 3.2rem; line-height: 1.4em;}

.contents.appeal{ background: url("images/foreign_staff/index_appeal_bg.webp") no-repeat center center; background-size: 100%;}
.contents.appeal:before{ content: ""; width: 100%; height: 100%; background: rgba(255,255,255,0.88); position: absolute; top: 0; left: 0; z-index: 1;}
.contents.appeal section{ width: calc(100% - 30%); max-width: 880px; position: relative; z-index: 100;}
.contents.appeal section h2,
.contents.appeal section dl dt,
.contents.appeal section dl dd{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
.contents.appeal section h2 { font-size: 3.2rem; line-height: 1.4em; text-align: center;}
.contents.appeal section dl{ margin-top: 6.4rem; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; position: relative;}
.contents.appeal section dl dt{ width: 10.0rem; color: var(--clr-sky); font-size: 8.0rem; line-height: 1.0em;}
.contents.appeal section dl dd{ width: calc(100% - 10.0rem); font-size: 2.4rem; line-height: 1.8em;}
.contents.appeal section dl dd:after{ content: ""; width: calc(100% - 10.0rem); height: 1px; background: #333; position: absolute; top: 0.8em; right: 0;}

.contents.voiceList{ background: var(--clr-sky);}
.contents.voiceList section{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.contents.voiceList section h3{ width: 18.4%;}
.contents.voiceList section h3 img{ width: 100%; height: auto;}

/*
.voiceList .column{ display: flex; justify-content: flex-start; flex-wrap: wrap; width: 77.6%;}
*/
.voiceList .column{ display: flex; justify-content: center; flex-wrap: wrap; width: 77.6%;}
.voiceList .column .custom-post{ width: 47%; margin-right: 6%; position: relative;}
.voiceList .column .custom-post:nth-child(n+2){ margin-right: 0;}
.voiceList .column .custom-post .image{ width: 100%; padding-bottom: 66.6%; overflow: hidden; position: relative;}
.voiceList .column .custom-post .image img{ width: 100%; height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.voiceList .column .custom-post h2{ text-align: center; line-height: 1.4em; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 2.4rem; margin-top: 0.4em;}
/*
.voiceList .column .custom-post h2 a{ display: inline-block; color: #FFF; text-decoration: none; padding: 0.4em 0; border-bottom: solid 1px #FFF;}
*/
.voiceList .column .custom-post h2 a{ display: block; color: #FFF; text-decoration: none; padding: 0.4em 0; border-bottom: solid 1px #FFF;}
.voiceList .column .custom-post h2 a:hover{ color: rgba(255,255,255,0.72); text-decoration: none;}
.voiceList .column .custom-post h2 a:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100;}
.voiceList .column .custom-post .kata,
.voiceList .column .custom-post .name{ text-align: center; color: #FFF; line-height: 1.4em;}

body#foreign_staff .voiceList .column .custom-post{ width: 31%; margin-right: 3%; position: relative;}
body#foreign_staff .voiceList .column .custom-post:nth-child(n+3){ margin-right: 0;}
body#foreign_staff .voiceList .column .custom-post .image{ width: 100%; padding-bottom: 100%; overflow: hidden; position: relative;}

body#foreign_staff .contents.entry section{ background: url("images/foreign_staff/entry_bg.webp") no-repeat; background-size: 100%;}
.contents.entry section{ width: 880px; padding-bottom: 586px; position: relative; border-radius: 16px; box-shadow: 0 0 40px rgba(0,0,0,0.16);}
.contents.entry section .column{ width: 100%; position: absolute; bottom: 0; left: 0; z-index: 100; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 3.2em;}
.contents.entry section .column .inner{ width: 47%; background: rgba(255,255,255,0.72); padding: 2.4em 1.6em; border-radius: 16px;}
.contents.entry section .column .inner h3{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 600; line-height: 1.4em;}
.contents.entry section .column .inner .button{ text-align: center; margin-top: 1.6em !important;}
.contents.entry section .column .inner .button a{ display: inline-block; color: #FFF; text-decoration: none; font-weight: 600; font-size: 2.0rem; line-height: 1.2em; padding: 0.4em 2.4em; border-radius: 100px; background: var(--btn-pink); border: solid 1px var(--btn-pink); transition: all 0.3s ease 0s; position: relative;}
.contents.entry section .column .inner .button a:hover{ padding: 0.4em 3.2em; color: var(--btn-pink); background: #FFF;}
.contents.entry section .column .inner .button a:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.contents.entry section .column .inner .button a:hover:after{ right: 1.2em; opacity: 1.0;}

/* 募集要領
--------------------------------------------------------------*/
body#recruit h2.pageTitle span:before{ content: "GUIDELINE";}
body#recruit h4{ text-align: center; font-size: 2.4rem; line-height: 1.4em; font-weight: 700; color: var(--clr-blue);}
body#recruit .button{ width: 31%; margin: 2.4em auto 0 !important;}
body#recruit .button a{ display: block; background: var(--clr-blue); color: #FFF; text-decoration: none; font-weight: 700; text-align: center; padding: 1.6em 0; border-radius: 8px; box-shadow: 0 4px 0 #111; position: relative; top: 0; transform: all 0.3s ease 0s;}
body#recruit .button a span{ display: block; text-align: center; font-size: 2.4rem; font-weight: 700;}
body#recruit .button a:hover{ top: 4px; box-shadow: none;}

/* 外務職員募集（お問い合わせ）
--------------------------------------------------------------*/
body#inquiry h2.pageTitle span:before,
body#foreign_staff_form_confirm h2.pageTitle span:before,
body#foreign_staff_form_complete h2.pageTitle span:before{ content: "INQUIRY";}
body#inquiry.page-id-94 h2.pageTitle:after,
body#foreign_staff_form_confirm h2.pageTitle:after,
body#foreign_staff_form_complete h2.pageTitle:after,
body#recruit h2.pageTitle:after{ background: url("images/foreign_staff/main_image.webp") no-repeat center center; background-size: 100%;}

.policy{ background: #F4F4F4; padding: 1.0em; border-radius: 8px; margin-top: 1.0em;}
.policy h3{ font-weight: 600;}
.policy ul{ margin-top: 0.5em; padding-left: 1.0em;}
.policy ul li{ list-style-type: disc; list-style-position: outside; line-height: 1.4em; margin-top: 0.5em;}


/* confirm / complete */
#foreign_staff_form_confirm article.contents section > p,
#foreign_staff_form_complete article.contents section > p{ text-align: center;}

/* 共済代理店募集
--------------------------------------------------------------*/
body#agency_system #postTitle.foreign_staff{ position: relative; padding: 8.0rem 0;}
body#agency_system #postTitle.foreign_staff:after{ content: ""; width: 100%; height: 100%; background: url("images/agency_system/index_promo.webp") no-repeat center right; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: -1;}
body#agency_system #postTitle.foreign_staff section{ width: calc(100% - 10%); max-width: 1200px; margin: 0px auto; position: relative; z-index: 10;}
body#agency_system #postTitle.foreign_staff section h2{ width: 50%; margin-left: auto;}
body#agency_system #postTitle.foreign_staff section h2 img{ width: 100%; height: auto;}
body#agency_system #postTitle.foreign_staff section h3{ width: 50%; margin: 0.8em 0 0 auto; font-size: 2.0rem; line-height: 1.4em; color: #FFF; text-align: center; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}

body#agency_system .contents.about.left,
body#agency_system .contents.about.right{ min-height: 450px; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
body#agency_system .contents.about.left section,
body#agency_system .contents.about.right section{ position: relative; z-index: 10;}
body#agency_system .contents.about.left section .inner{ width: 50%; margin-left: auto;}
body#agency_system .contents.about.right section .inner{ width: 50%; margin-right: auto;}
body#agency_system .contents.about.left h2,
body#agency_system .contents.about.right h2{ color: var(--clr-blue); text-decoration: underline;}
body#agency_system .contents.about.left:before{ content: ""; width: 50%; height: 100%; background: url("images/agency_system/about_bg_02.webp") no-repeat center center; background-size: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: -1;}
body#agency_system .contents.about.left:after{ content: ""; width: 70%; height: 100%; background-image: linear-gradient(90deg, transparent, #ffffff 25%); position: absolute; top: 0; right: 0; z-index: 1;}
body#agency_system .contents.about.right:before{ content: ""; width: 50%; height: 100%; background: url("images/agency_system/about_bg_01.webp") no-repeat center center; background-size: 100%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: -1;}
body#agency_system .contents.about.right:after{ content: ""; width: 70%; height: 100%; background-image: linear-gradient(270deg, transparent, #ffffff 25%); position: absolute; top: 0; left: 0; z-index: 1;}

.contents.faq{}
.contents.faq h2,
.contents.faq dl dt{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
.contents.faq h2{ font-size: 2.4rem; line-height: 1.4em; text-align: center; color: var(--clr-blue); display: inline-block; position: relative; left: 50%; transform: translateX(-50%); position: relative;}
.contents.faq h2:after{ content: ""; width: 100%; height: 1px; background: var(--clr-blue); position: absolute; bottom: 0; left: 0;}
.contents.faq .column{ display: flex; justify-content: center; flex-wrap: wrap; margin-top: 1.6em;}
.contents.faq .column .inner{ width: 23.5%; margin-right: 2%; padding: 0 2%; position: relative;}
.contents.faq .column .inner:after{ content: ""; width: calc(92% - 8%); height: 1px; background: var(--clr-blue); position: absolute; bottom: 0; left: 8%;}
.contents.faq .column .inner:nth-child(4n),
.contents.faq .column .inner:last-child{ margin-right: 0;}
.contents.faq .column .inner:nth-child(n+5){ margin-top: 1.6em;}
.contents.faq .column .inner dl.question{ width: 100%; padding-bottom: 100%; position: relative; background: var(--clr-blue); border-radius: 100%;}
.contents.faq .column .inner dl.question:after{ content: ""; width: 80px; height: 80px; position: absolute; bottom: 0; left: 80%; z-index: 10;}
.contents.faq .column .inner.sil01 dl.question:after{ background: url("images/agency_system/silhouette_01.svg") no-repeat; background-size: contain;}
.contents.faq .column .inner.sil02 dl.question:after{ background: url("images/agency_system/silhouette_02.svg") no-repeat; background-size: contain;}
.contents.faq .column .inner.sil03 dl.question:after{ background: url("images/agency_system/silhouette_03.svg") no-repeat; background-size: contain;}
.contents.faq .column .inner dl.question dt{ font-size: 4.0rem; line-height: 1.4em; color: #FFF; text-align: center; width: 100%; position: absolute; top: 0.4em; left: 0;}
.contents.faq .column .inner dl.question dd{ width: 100%; position: absolute; top: 5.6em; left: 0; color: #FFF; padding: 0 1.4em; line-height: 1.6em;}
.contents.faq .column .inner dl.answer{ margin-top: 0.8em;}
.contents.faq .column .inner dl.answer dt{ font-size: 4.0rem; line-height: 1.4em; text-align: center; color: var(--clr-blue);}
.contents.faq .column .inner dl.answer dd{ border-top: solid 1px var(--clr-blue); padding: 0.8em 0; margin-top: 0.8em; color: var(--clr-blue);}

body#agency_system .contents.voiceList{ background: var(--clr-blue);}
/*
body#agency_system .voiceList .column .custom-post h2 br{ display: none;}
*/

.contents.Contract{ position: relative; overflow: hidden; padding: 0 !important; margin-bottom: 6.4rem;}
.contents.Contract:before{ content: ""; width: 100%; height: 100%; background: rgba(18,68,146,0.5); position: absolute; top: 0; left: 0; z-index: 2;}
.slide-track{ width: 100%; display: flex; position: relative; left: 0; transition: none; will-change: transform; z-index: 1;}
.slide-track li{ width: 40vw; flex-shrink: 0;}
.slide-track li img{ width: 100%; height: auto; display: block;}
.contents.Contract section{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100;}
.contents.Contract section h2{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; text-align: center; font-size: 4.0rem; line-height: 1.4em; color: #FFF; text-shadow: 0 0 8px rgba(0,0,0,0.4);}
.contents.Contract section .link{ text-align: center;}
.contents.Contract section .link a{ display: inline-block; color: #FFF; text-decoration: none; font-weight: 600; font-size: 2.0rem; line-height: 1.2em; padding: 0.4em 2.4em; border-radius: 100px; background: var(--btn-blue); border: solid 1px var(--btn-blue); transition: all 0.3s ease 0s; position: relative;}
.contents.Contract section .link a:hover{ padding: 0.4em 3.2em; color: var(--btn-blue); background: #FFF;}
.contents.Contract section .link a:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-weight: 900; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); opacity: 0.0; transition: all 0.3s ease 0s;}
.contents.Contract section .link a:hover:after{ right: 1.2em; opacity: 1.0;}

body#agency_system .contents.entry h2{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; color: var(--clr-blue); font-size: 2.4rem; line-height: 1.4em; text-align: center;}
body#agency_system .contents.entry section{ background: url("images/agency_system/entry_bg.webp") no-repeat; background-size: 100%; margin-top: 1.2em;}

/* 共済代理店業務委託契約にあたって
--------------------------------------------------------------*/
#agency_middle{ position: relative;}
#agency_middle ul{ display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;}
#agency_middle ul:before{ content: ""; width: 100%; height: 100%; background: rgba(var(--clr-blue-rgb),0.8); position: absolute; top: 0; left: 0; z-index: 10;}
#agency_middle ul li{ width: 20%;}
#agency_middle ul li img{ width: 100%; height: auto;}
#agency_middle h2{ font-size: 3.2rem; line-height: 1.4em; text-align: center; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; color: #FFF; width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 100;}

.agency-agreement{}
.agency-agreement h3{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 3.2rem; line-height: 1.2em; text-align: center; color: var(--clr-blue); padding-bottom: 0.5em; position: relative;}
.agency-agreement h3:before{ content: ""; width: 300%; height: 1px; background: var(--clr-blue); position: absolute; bottom: 0; left: -100%;}
.agency-agreement .button{ margin-top: 2.0em; text-align: center;}
.agency-agreement .button a{ display: inline-block; color: #FFF; font-weight: 600; line-height: 1.2em; text-decoration: none; background: var(--btn-pink); padding: 0.8em 3.2em; border-radius: 100px; position: relative;}
.agency-agreement .button a:hover{ background: rgba(var(--btn-pink-rgb),0.72); color: #FFF;}
.agency-agreement .button a:after{ content: "\f054"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; position: absolute; top: 50%; right: 1.0em; transform: translateY(-50%);}
.agency-agreement figure{ width: 40%; margin: 2.0em auto 0;}
.agency-agreement figure img{ width: 100%; height: auto;}
.agency-agreement ul{ width: 72%; margin: 4.0rem auto 0;}
.agency-agreement ul li{ border: solid 1px var(--clr-blue); border-radius: 8px; color: var(--clr-blue); font-size: 2.4rem; line-height: 1.0em; font-weight: 600; text-align: center; padding: 0.8em; position: relative;}
.agency-agreement ul li:nth-child(n+2){ margin-top: 4.0rem;}
.agency-agreement ul li:after{ content: "\f0d7"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; position: absolute; color: #CCC; position: absolute; bottom: -1.3em; left: 50%; transform: translateX(-50%);}
.agency-agreement ul li:last-child:after{ content: none;}
.agency-agreement ul li.clr01{ background: var(--clr-blue); color: #FFF;}
.agency-agreement ul li.clr02{ background: var(--clr-pink); color: #FFF; border-color: var(--clr-pink);}

body.page-id-554 .contents.entry h2{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; color: var(--clr-blue); font-size: 2.4rem; line-height: 1.4em; text-align: center;}
body.page-id-554 .contents.entry section{ background: url("images/agency_system/entry_bg.webp") no-repeat; background-size: 100%; margin-top: 1.2em;}

/* 共済代理店募集（お問い合わせ）
--------------------------------------------------------------*/
body#agency_system_inquiry h2.pageTitle span:before,
body#agency_form_confirm h2.pageTitle span:before,
body#agency_form_complete h2.pageTitle span:before{ content: "INQUIRY";}
body#agency_system_inquiry h2.pageTitle:after,
body#agency_form_confirm h2.pageTitle:after,
body#agency_form_complete h2.pageTitle:after{ background: url("images/agency_system/main_image.webp") no-repeat center center; background-size: 100%;}


/* confirm / complete */
#agency_form_confirm article.contents section > p,
#agency_form_complete article.contents section > p{ text-align: center;}

/* 資料請求（お問い合わせ）
--------------------------------------------------------------*/
body#catalog h2.pageTitle span:before,
body#catalog_confirm h2.pageTitle span:before,
body#catalog_complete h2.pageTitle span:before{ content: "REQUEST FOR INFORMATION";}
body#catalog h2.pageTitle:after,
body#catalog_confirm h2.pageTitle:after,
body#catalog_complete h2.pageTitle:after{ background: url("images/catalog/main_image.webp") no-repeat center center; background-size: 100%;}

/* confirm / complete */
#catalog_confirm article.contents section > p,
#catalog_complete article.contents section > p{ text-align: center;}

/* サイト利用案内
--------------------------------------------------------------*/
body#guide header#postTitle.compensation section:before{ background: url("images/common/common_index_icon.webp") no-repeat; background-position: center center; background-size: 120%;}

.guide section > ul,
.guide section > ol{ margin-top: 1.0em; padding-left: 1.5em;}
.guide section ul li{ list-style-type: disc; list-style-position: outside;}
.guide section ol li{ list-style-type: decimal;}
.guide section ol li ol{ counter-reset: ol-counter01;}
.guide section ol li ol li{ list-style-type: none; counter-increment: ol-counter01; position: relative; padding-left: 2.0em;}
.guide section ol li ol li:before{ content:"（"counter(ol-counter01)"）"; position: absolute; top: 0; left: 0;}
.guide section ol li ol li ol{ margin-left: 1.5em; counter-reset: ol-counter02;}
.guide section ol li ol li ol li{ counter-increment: ol-counter02; padding-left: 1.5em; position: relative;}
.guide section ol li ol li ol li:before{ content:counter(ol-counter02); border: solid 1px #333; border-radius: 50%; height: 1.0em; width: 1.0em; font-size: 1.4rem; line-height: 1; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

/* 共済約款・重要事項説明書・総合パンフレット
--------------------------------------------------------------*/
body#download header#postTitle.compensation section:before{ background: url("images/download/index_icon_01.webp") no-repeat; background-position: center center; background-size: 120%;}

.dl .default{ margin-top: 1.0em; table-layout: auto;}
.dl .default thead th{ background: #EEE; text-align: center; padding: 1.0em; line-height: 1.2em; border: solid 1px #DDD; border-collapse: collapse;}
.dl .default tbody th{ width: 23.5% !important;}
.dl .default tbody td a{ padding-left: 1.5em; position: relative;}
.dl .default tbody td a:before{ content: "\f518"; font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"; font-weight: 600; color: var(--clr-blue); position: absolute; top: 0; left: 0;}

/* サイトマップ
--------------------------------------------------------------*/
body#sitemap header#postTitle.compensation section:before{ background: url("images/common/common_index_icon.webp") no-repeat; background-position: center center; background-size: 120%;}

.sitemap h2.wsp-pages-title{ display: none;}
.wsp-container ul{ display: flex; justify-content: flex-start; flex-wrap: wrap;}
.wsp-container ul li{ width: 31%; margin-right: 3.5%;}
.wsp-container ul li:nth-child(n+4){ margin-top: 4.0rem;}
.wsp-container ul li:nth-child(3n),
.wsp-container ul li:last-child{ margin-right: 0;}
.wsp-container ul li a{ display: block; border: solid 1px #DDD; color: #333; text-decoration: none; line-height: 1.2em; padding: 0.8em; border-left: solid 2px var(--clr-blue); position: relative; box-shadow: 0 4px 0 0 rgba(0,0,0,0.04);}
.wsp-container ul li a:hover{ color: var(--clr-blue);}
.wsp-container ul li a:after{ content: "\f0a9"; font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"; font-weight: 600; font-size: 1.2rem; position: absolute; top: 50%; right: 0.8em; transform: translateY(-50%); transition: all 0.3s ease 0s; opacity: 0.5;}
.wsp-container ul li a:hover:after{ opacity: 1.0; right: 0.6em;}
.wsp-container ul li ul{ display: block;}
.wsp-container ul li ul li{ width: 100%; margin-right: 0; margin-top: 0 !important;}
.wsp-container ul li ul li a{ border-style: none none solid none; padding-left: 1.2em; border-color: #EEE; position: relative; box-shadow: none;}
.wsp-container ul li ul li a:before{ content: "\f101"; font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"; font-size: 1.2rem; font-weight: 600; color: var(--clr-sky); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.wsp-container ul li ul li a:after{ content: none;}

/* 各マークの説明ポップアップ
--------------------------------------------------------------*/
.mark-ex-btn {
position: fixed; right: 3%; bottom: 3%; border: 2px solid #20955c; border-radius: 50%; background-color: #fff; text-align: center; cursor: pointer; display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1; width: 70px; font-size: 10px; line-height: 1.4em; opacity: 0.9;}
.mark-ex-sec { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #00000047; overflow-y: scroll; z-index: 1000;}
.mark-ex-sec.on { display: block;}
.mark-ex-outer { position: relative; max-width: 800px; width: 90%; margin: 10rem auto; padding: 4%; border: 2px solid #184493; background-color: #fff; box-sizing: border-box;}
.mark-ex-close { position: absolute; top: 10px; right: 10px; font-size: 35px; cursor: pointer;}
.mark-ex-title { font-size: 1.8rem; font-weight: bold; margin-bottom: 10%; text-align: center;}
.mark-box-single { font-size: 1.5rem; margin-bottom: 2.5em; display: flex; align-items: center;}
.mark-box-single img { margin-right: 1em; max-height: 48px; max-width: 85px;}
.mark-box-single p { margin: 0;}
.mark-box-flex { align-items: flex-start;}
.mark-textindent { text-indent: -3em; margin-left: 3em;}
.text-red { color: #ff0000;}

/* 404 not found
--------------------------------------------------------------*/
body.error404 .entry-content{ width: 1200px; margin: 0px auto; padding: 12.0rem 0;}
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-blue); letter-spacing: 0.05em; font-family: "Nunito Sans", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; position: relative; border-top: solid 1px #DDD;}
body.error404 .entry-header h1:after{ content: ""; width: 2.0em; height: 1px; background: var(--clr-blue); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}

section.error404{}
section.error404 h2{ font-family: "Nunito Sans", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; 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
--------------------------------------------------------------*/

article.category-information{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 4.0em 0; border-bottom: solid 1px #DDD;}
article.category-information:nth-of-type(1){ padding-top: 0;}
article.category-information .entry-meta{ width: 15%; color: rgba(51,51,51,0.64);}
article.category-information .inner{ width: 75%;}
article.category-information .inner .cat-links a{ color: #50ACD1; text-decoration: none;}
article.category-information .inner .entry-header h2.entry-title{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600; padding: 1.0em 0;}
article.category-information .inner .entry-header h2.entry-title a{ color: #333; text-decoration: none;}
article.category-information .inner .entry-header h2.entry-title a:hover{ color: rgba(51,51,51,0.64);}

/* category */
.page-title{ background: var(--bg-clr02); padding: 0.8em; font-size: 2.4rem; line-height: 1.4em; font-weight: 600; color: var(--clr-blue);}
ul.archive-list{ margin-top: 2.4rem;}
/*
ul.archive-list li{ border-bottom: solid 1px #DDD; display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 1.0em 0;}
*/
ul.archive-list li{ border-bottom: solid 1px #DDD; display: flex; justify-content: flex-start; padding: 1.0em 0;}
ul.archive-list li span.post-date{ width: 6.0em; color: var(--clr-blue);}
ul.archive-list li a{ display: inline-block; color: #333; text-decoration: none;}
ul.archive-list li a:hover{ color: rgba(51,51,51,0.64);}

/* single */
.singleContents{}
.singleContents .entry-header{}
.singleContents .entry-header h1.entry-title{ font-size: 2.8rem; line-height: 1.2em; font-weight: 700;}
.singleContents .entry-header .date{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 1.0em; padding-top: 1.0em; border-top: solid 1px #EEE;}
.singleContents .entry-header .date span:nth-child(n+2){ margin-left: 1.0em;}
.singleContents .entry-header .date span a{ color: #50ACD1; text-decoration: none;}
.singleContents .entry-content{ margin-top: 4.0rem;}
.singleContents .entry-content p{ margin-top: 1.8em;}
.singleContents .entry-content p:first-child{ margin-top: 0;}

/* news */
.type-post .entry-header h1.entry-title{ background: var(--bg-clr02); padding: 0.8em; font-size: 2.4rem; line-height: 1.4em; font-weight: 600; color: var(--clr-blue);}
.type-post .entry-header .entry-meta{ padding: 0.4em 0; border-bottom: solid 1px #DDD;}
.type-post .entry-content{}
.type-post .entry-content h2.wp-block-heading{ font-size: 2.4rem; line-height: 1.2em; font-weight: 600; color: var(--clr-blue); margin-top: 4.0rem;}
.type-post .entry-content p{ margin-top: 1.0em;}
.type-post .entry-content ol.wp-block-list{ padding-left: 1.2em;}
.type-post .entry-content ol.wp-block-list li{ list-style-type: decimal; list-style-position: outside; line-height: 1.4em;}
.type-post .entry-content ol.wp-block-list li:nth-child(n+2){ margin-top: 0.5em;}
.type-post .entry-content ul.wp-block-list{ padding-left: 1.2em;}
.type-post .entry-content ul.wp-block-list li{ list-style-type: disc; list-style-position: outside; line-height: 1.4em;}
.type-post .entry-content ul.wp-block-list li:nth-child(n+2){ margin-top: 0.5em;}
.type-post .entry-content .has-fixed-layout{ border-color: #D4D4D4; margin-top: 1.0em;}
.type-post .entry-content .has-fixed-layout th{ background: #F6F6F6;}
.type-post .entry-content .has-fixed-layout th,
.type-post .entry-content .has-fixed-layout td{ border-color: #D4D4D4;}

/* 卒業生の声 */
.voiceHead{ width: 100%; position: relative; font-size: 2.4rem; padding: 2.4em 0; line-height: 1.2em; color: #FFF; font-weight: 700; text-align: center; margin-bottom: 8.0rem;}
.voiceHead span{ display: block; font-size: 5.6rem; line-height: 1.2em; text-align: center; color: #FFF;}
.voiceHead:before{ content: ""; width: 220%; height: 100%; background: rgba(var(--clr-blue-rgb),0.64); position: absolute; top: 0; left: -60%; z-index: -1;}
.voiceHead:after{ content: ""; width: 220%; height: 100%; background: url("images/foreign_staff/main_image.webp") no-repeat center center; background-size: 100%; position: absolute; top: 0; left: -60%; z-index: -2;}
.voiceHead.bg02:after{ content: ""; width: 220%; height: 100%; background: url("images/agency_system/main_image.webp") no-repeat center center; background-size: 100%; position: absolute; top: 0; left: -60%; z-index: -2;}

.site-main.voice{}
.site-main.voice h2{ font-size: 3.2rem; line-height: 1.4em; font-weight: 600; margin-bottom: 1.0em;}
.site-main.voice h3{ text-align: right; font-size: 2.4rem; line-height: 1.4em;}
.site-main.voice .column{ margin-top: 4.0rem; display: flex; justify-content: space-between; flex-wrap: wrap;}
.site-main.voice .column figure.image{ width: 31%; order: 1;}
.site-main.voice .column figure.image img{ width: 100%; height: auto;}
.site-main.voice .column figure.image figcaption{ text-align: center; font-size: 1.4rem; margin-top: 0.5em;}
.site-main.voice .column .inner{ width: 64%; order: 2;}
.site-main.voice .column .inner p{ margin-top: 1.0em;}
.site-main.voice .column .inner p:nth-of-type(1){ margin-top: 0;}
.site-main.voice .column .inner h2.wp-block-heading{ font-size: 2.0rem; line-height: 1.2em; font-weight: 700; margin-top: 1.0em;}
.site-main.voice .column .inner h6.wp-block-heading{ text-align: right; font-size: 1.4rem;}

.backBtn{ width: 31%; margin: 4.0rem auto 0 !important;}
.backBtn a{ display: block; color: #FFF; background: rgba(var(--clr-blue-rgb),1.0); text-decoration: none; line-height: 1.0em; font-weight: 600; padding: 1.6em 0; text-align: center; position: relative; z-index: 10; overflow: hidden; border-radius: 8px;}
.backBtn a:hover{ color: #FFF; background: rgba(var(--clr-blue-rgb),0.72);}
.backBtn a:before{ content: ""; width: 0; height: 100%; background: var(--clr-sec); position: absolute; top: 0; right: 0; transition: all 0.3s ease 0s; z-index: -1;}
.backBtn a:hover:before{ left: 0; width: 100%;}
.backBtn a:after{ content: "\f177"; font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"; font-weight: 600; 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:nth-child(1){ margin-top: 0;}
.widget h2{ background: var(--clr-blue); color: #FFF; font-weight: 600; line-height: 1.2em; padding: 1.2em 0.8em; padding-left: 1.6em; position: relative;}
.widget ul{}
.widget ul li{ border-bottom: solid 1px #DDD; 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: "\f054"; font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"; font-weight: 600; 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);}

/* 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{ width: 100%; margin: 0px auto; padding: 4.0rem 0 0 0;}
.nav-links{ display: flex; justify-content: space-between; flex-wrap: wrap; border-top: double 3px #E4E4E4; padding-top: 2.0rem; margin: 2.0rem 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: "\f053"; font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"; font-weight: 600; color: var(--clr-prim); padding-right: 0.5em;}
.nav-next a:after{ content: "\f054"; font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"; font-weight: 600; color: var(--clr-prim); padding-left: 0.5em;}

/* 目次 */
#toc_container{ background: #FFF; overflow: hidden; margin-top: 40px; box-shadow: 0 0 16px rgba(0,0,0,0.16);}
#toc_container .toc_title{ margin-bottom: 0; font-size: 1.6rem; line-height: 1.2em; font-weight: 600; color: var(--clr-prim); padding: 2.0em 2.0rem; border-bottom: solid 1px #E4E4E4;}
#toc_container .toc_title:before{ content: "\f0c9"; font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"; font-weight: 600; margin-right: 0.5em;}
#toc_container .toc_list{ padding: 2.0rem;}
#toc_container .toc_list li{}
#toc_container .toc_list li a{ display: block; font-size: 1.4rem; line-height: 1.2em; font-weight: 600; color: #333; text-decoration: none; padding: 1.0em 0; border-bottom: solid 1px rgba(0,0,0,0.05);}
#toc_container .toc_list li a:hover{ color: rgba(51,51,51,0.6);}
#toc_container .toc_list > li:last-child a{ border-bottom: none;}
#toc_container .toc_list li ul{ padding-left: 1.5em; position: relative;}
#toc_container .toc_list li ul:before{ content: "\f054"; font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"; font-weight: 600; font-size: 1.0rem; position: absolute; top: 1.0em; left: 0.5em; color: rgba(var(--clr-prim-rgb),0.5);}
#toc_container .toc_list li ul li a{ display: block; font-weight: normal; border-bottom: none;}
#toc_container .toc_list li ul li ul{ margin-top: -0.5em;}

/* contact form
--------------------------------------------------------------*/
article.contents.form{ background: rgba(var(--clr-sky-rgb),0.16);}
.wpcf7{ background: #FFF; box-shadow: 0 0 16px rgba(0,0,0,0.08); border-radius: 16px; padding: 1.0em 2.0em; padding-bottom: 2.0em;}
span.red{ color: #FF0000; font-weight: 600;}
.neg{ color: var(--clr-neg);}

.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 #EEE; display: flex; flex-wrap: wrap; align-items: center;}
.wpcf7-form dl dt .require{ font-size: 1.4rem; line-height: 1.2em; font-weight: 700; color: #FF0000; margin-left: 0.5em;}
.wpcf7-form dl dt em{ display: block; font-size: 1.4rem; line-height: 1.2em; font-style: normal;}
.wpcf7-form dl dd{ width: 68%; padding: 1.6em 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{ border: solid 1px #DDD; background: #F9F9F9; margin: 0.2em 0; padding: 0.64em; 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-spinner{ display: none !important;}
.submit-container{ text-align: center;}
.submit-container input[type="button"]{ background: #EEE; border-color: E4E4E4; font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 2.0em; border-radius: 0; cursor: pointer; border-radius: 8px; margin-right: 2.0em;}
.submit-container input[type="submit"]{ background: var(--clr-blue); color: #FFF; border-color: var(--clr-blue); font-size: 1.6rem; font-weight: 600; line-height: 1.0em; padding: 1.25em 4.0em; border-radius: 0; cursor: pointer; border-radius: 8px;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* header */
header#masthead{ width: 100%; margin: 0px auto; padding: 1.6rem 5%; position: fixed; top: 0; left: 0; z-index: 10000; background: rgba(255,255,255,0.72); backdrop-filter: blur(10px);}
header#masthead section{ width: 100%; margin: 0px auto; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
header#masthead section h1.site-title{ width: 20%; max-width: 280px; min-width: 220px;}
header#masthead section h1.site-title img{ width: 100%; height: auto;}

/* breadcrumb */
.breadcrumb-container{ display: none;}
.breadcrumb-container ol{ width: 1200px; margin: 0px auto; padding: 0.5em 0;}
.breadcrumb-container.theme1 a{ font-size: 1.2rem; line-height: 1.2em; color: rgba(51,51,51,1.0);}
.breadcrumb-container.theme1 a:hover{ color: rgba(51,51,51,0.6);}

/* footer */
footer#colophon{ padding: 8.0rem 0;}
.site-info{ width: 100%; margin: 0px auto;}
.site-info h1.site-title{ width: 20%; max-width: 280px; min-width: 220px; margin: 0px auto;}
.site-info h1.site-title img{ width: 100%; height: auto;}
nav.footerNavi{ width: 100%; margin: 3.2rem auto 0; border: solid 1px var(--clr-blue); border-style: solid none; padding: 0.8em 0;}
nav.footerNavi ul{ display: flex; justify-content: center; flex-wrap: wrap;}
nav.footerNavi ul li{ font-size: 1.4rem; line-height: 1.2em; position: relative;}
nav.footerNavi ul li:nth-child(1):after{ content: ""; width: 1px; height: 40%; background: var(--clr-blue); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
nav.footerNavi ul li:before{ content: ""; width: 1px; height: 40%; background: var(--clr-blue); position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
nav.footerNavi ul li a{ display: inline-block; color: var(--clr-blue); text-decoration: none; padding: 0.4em 0.8em;}
nav.footerNavi ul li a:hover{ color: rgba(var(--clr-blue-rgb),0.72);}
.site-info ul.address{ display: flex; justify-content: center; flex-wrap: wrap; margin-top: 3.2rem;}
.site-info ul.address li{ font-size: 1.4rem; line-height: 1.2em;}
.site-info ul.address li:nth-child(n+2){ margin-left: 2.0em;}
.site-info ul.address li a{ display: inline-block; color: #333; text-decoration: none;}
.site-info ul.address li a:hover{ color: rgba(51,51,51,0.72);}
footer#colophon .copyright{ text-align: center; font-size: 1.2rem; line-height: 1.4em; margin-top: 3.2rem;}

/* fixed bottom button */
#sp-cta{ width: 100%; position: fixed; bottom: 0; left: 0; z-index: 10000;}
#sp-cta ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#sp-cta ul li{ width: calc(100% / 3);}
#sp-cta ul li a{ display: block; text-align: center; padding: 1.0em 0.4em; background: #333; color: #FFF; text-decoration: none; font-weight: 600; line-height: 1.2em;}
#sp-cta ul li a:before{ content: ""; width: 3.0em; padding-bottom: 3.0em; display: block; margin: 0px auto;}
#sp-cta ul li:nth-child(1) a:before{ background: url("images/common/fix_icon_01.webp") no-repeat; background-size: contain;}
#sp-cta ul li:nth-child(2) a:before{ background: url("images/common/fix_icon_02.webp") no-repeat; background-size: contain;}
#sp-cta ul li:nth-child(3) a:before{ background: url("images/common/fix_icon_03.webp") no-repeat; background-size: contain;}
#sp-cta ul li:nth-child(1) a{ background: var(--btn-red);}
#sp-cta ul li:nth-child(2) a{ background: var(--btn-blue);}
#sp-cta ul li:nth-child(3) a{ background: var(--btn-grn);}
#sp-cta ul li:nth-child(1) a:hover{ background: rgba(var(--btn-red-rgb),0.72);}
#sp-cta ul li:nth-child(2) a:hover{ background: rgba(var(--btn-blue-rgb),0.72);}
#sp-cta ul li:nth-child(3) a:hover{ background: rgba(var(--btn-grn-rgb),0.72);}

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

/* Navigation
--------------------------------------------- */
.menu-navigation-container{ display: none;}
#site-navigation{ margin-left: 1.0em; margin-right: auto;}
#primary-menu{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#primary-menu li{ font-size: 1.6rem; line-height: 1.2em; position: relative; z-index: 100;}
#primary-menu li:after{ content: ""; width: 1px; height: 40%; background: var(--clr-blue); position: absolute; top:30%; right: 0;}
#primary-menu li a{ display: block; color: var(--clr-blue); text-decoration: none; padding: 0.8em 1.0em; position: relative; text-align: center; cursor: pointer;}
#primary-menu li a:hover{ color: rgba(var(--clr-blue-rgb),0.72);}
#primary-menu li ul li:after{ content: none;}
#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#menu-item-153 ul{ width: 270%; left: -100%;}
#primary-menu li#menu-item-166 ul{ width: 300%; left: -100%;}
#primary-menu li:hover ul{ top: 100%; margin: 0; opacity: 1; visibility: visible;}
#primary-menu li ul li{ border-bottom: solid 1px #EEE; font-weight: 600;}
#primary-menu li ul li:last-child{ border-bottom: none;}
#primary-menu li ul li a{ display: block; color: var(--clr-blue); padding: 1.0em 0.5em; line-height: 1.4em; position: relative; text-align: center;}
#primary-menu li ul li a:hover{ color: rgba(var(--clr-blue-rgb),0.72); background: rgba(var(--clr-sky-rgb),0.08); text-decoration: none;}
#primary-menu li ul li a:after{ content: none;}

/*  sub button*/
.headerSubNavi{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.headerSubNavi li{ width: 13.0em; font-weight: 600;}
.headerSubNavi li:nth-child(2){ margin-left: 1.0em;}
.headerSubNavi li a{ display: block; position: relative; padding: 1.0em; background: #111; color: #FFF; text-decoration: none;}
.headerSubNavi li a span{ display: inline-block; padding-left: 2.5em; position: relative;}
.headerSubNavi li a:hover{ color: rgba(255,255,255,0.72);}
.headerSubNavi li a:after{ content: "\f105"; font-family: "Font Awesome 6 Free","Font Awesome 6 Brands"; font-size: 1.4rem; font-weight: 900; position: absolute; top: 50%; right: 1.0em; transform: translateY(-50%);}
.headerSubNavi li:nth-child(1) a{ background: var(--btn-red);}
.headerSubNavi li:nth-child(2) a{ background: var(--btn-blue);}
.headerSubNavi li:nth-child(1) a:hover{ background: rgba(var(--btn-red-rgb),0.72);}
.headerSubNavi li:nth-child(2) a:hover{ background: rgba(var(--btn-blue-rgb),0.72);}
.headerSubNavi li:nth-child(1) a span:before{ content: ""; width: 37px; height: 30px; background:url("images/common/icon_traffic_accident.webp") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; z-index: 10;}
.headerSubNavi li:nth-child(2) a span:before{ content: ""; width: 37px; height: 30px; background:url("images/common/icon_road_service.webp") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; z-index: 10;}

.menu-toggle { display: none;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*=============================================================
	reset
=============================================================*/
html { height:100%; font-size:62.5%; scroll-behavior: smooth;}
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;}

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