@charset "UTF-8";
/*! =========================
  foundation
========================= */
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,500,700");
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}

ol, ul {
  list-style: none;
}

button, input, select, textarea {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, * :before, * :after {
  box-sizing: inherit;
}

img, embed, iframe, object, audio, video {
  max-width: 100%;
}

img {
  vertical-align: bottom;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: 0;
  font-weight: normal;
  text-align: left;
}

sub, sup {
  vertical-align: top;
  font-size: 1rem;
}

html {
  background: #fff;
  font-size: 62.5%;
}

@media screen and (max-width: 768px) {
  html {
    font-size: calc(100vw / 40);
  }
}

body {
  color: #333;
  font-weight: 500;
  font-size: 1.8rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  line-height: 1.5;
}

@media screen and (min-width: 769px) and (max-width: 1340px) {
  main {
    min-width: 1340px;
  }
}

a {
  color: #333;
  text-decoration: none;
  transition: .3s;
}

a:hover {
  opacity: 0.8;
  transition: .3s;
}

.only-pc {
  display: block;
}

@media screen and (max-width: 768px) {
  .only-pc {
    display: none !important;
  }
}

.only-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .only-sp {
    display: block !important;
  }
}

input[type="search"] {
  line-height: 1;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

input::-ms-clear {
  visibility: hidden;
}

/*! =========================
  layout
========================= */
.header {
  position: relative;
  z-index: 100;
  height: 80px;
  background: #fff;
  font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
  .header {
    height: 16vw;
  }
}

.header__container {
  display: flex;
  position: relative;
  width: 1340px;
  height: 80px;
  margin: 0 auto;
  padding: 0 30px;
  align-items: center;
  justify-content: center;
}

.header__container _:-ms-fullscreen, :root .header__container {
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .header__container {
    width: 100%;
    height: 16vw;
    padding: 2.5vw 5vw;
  }
}

.header__logo {
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .header__logo {
    line-height: 1;
  }
}

.header__logo.is-hidden {
  display: none;
}

@media screen and (max-width: 768px) {
  .header-nav {
    display: none;
  }
}

.header-nav.is-hidden {
  display: none;
}

.header-nav-list {
  display: flex;
}

.header-nav-list__item + .header-nav-list__item {
  margin-left: 20px;
}

.header-nav-list__link {
  display: block;
  position: relative;
  width: 100%;
  padding: 32px 5px;
  line-height: 1;
}

.header-nav-list__link:hover {
  color: #164095;
}

.header-nav-list__link::after {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #164095;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .4s;
  content: "";
}

.header-nav-list__link:hover::after {
  transform-origin: right top;
  transform: scale(1, 1);
}

.header-search {
  display: flex;
  margin: 0 20px;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .header-search {
    margin: 0 10px;
  }
}

.header-search-button, .header-search-button__open {
  position: relative;
  border: 0;
  background: transparent;
  transition: .3s;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.header-search-button::after, .header-search-button__open::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: url(/assets/images/common/header-search.svg) no-repeat;
  content: "";
}

.header-search-button__open {
  width: 32px;
  height: 32px;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.header-search-button__trigger {
  display: inline-block;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #164095;
  color: #fff;
  transition: .4s;
  display: none;
  width: 146px;
  height: 44px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.44px;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
}

.header-search-button__trigger::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transform-origin: right top;
  transform: skewX(-30deg) scale(0, 1);
  width: 130%;
  height: 100%;
  background: #4a74dc;
  content: "";
  transition: transform .4s;
}

.header-search-button__trigger:hover {
  color: #fff;
}

.header-search-button__trigger:hover::after {
  transform-origin: left top;
  transform: skewX(-30deg) scale(1, 1);
}

.header-search-button__trigger.is-open {
  display: block;
}

.header-search-button__cancel {
  display: none;
  width: 20vw;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4a74dc;
  font-weight: 500;
  font-size: 1.4rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  line-height: 1;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.header-search-button__cancel.is-open {
  display: block;
}

.header-search-input {
  display: none;
  width: 380px;
  height: 44px;
  margin: 0 20px 0 10px;
  padding: 0 8px;
  border: 0;
  background: #fff;
  font-size: 1.6rem;
  outline: none;
}

.header-search-input:placeholder-shown {
  color: #80889e;
}

.header-search-input::-webkit-input-placeholder {
  color: #80889e;
}

.header-search-input:-ms-input-placeholder {
  color: #80889e;
}

@media screen and (max-width: 768px) {
  .header-search-input {
    width: 59vw;
    margin: 0 5vw 0 2.5vw;
  }
}

.header-search-input.is-open {
  display: block;
}

.header-search-overlay.is-triggered {
  position: fixed;
  opacity: .6;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.header-english {
  display: inline-block;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: transparent;
  color: #fff;
  transition: .4s;
  border-radius: 16px;
}

.header-english::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transform-origin: right top;
  transform: skewX(-30deg) scale(0, 1);
  width: 130%;
  height: 100%;
  background: #4a74dc;
  content: "";
  transition: transform .4s;
}

.header-english:hover {
  color: #fff;
}

.header-english:hover::after {
  transform-origin: left top;
  transform: skewX(-30deg) scale(1, 1);
}

.header-english.is-hidden {
  display: none;
}

@media screen and (max-width: 768px) {
  .header-english--members {
    width: 22vw;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .header-english--members .header-english__link {
    padding: 1.25vw 0;
  }
}

.header-english__link {
  display: block;
  width: 100%;
  padding: 2px 20px;
  border: 1px solid #4a74dc;
  border-radius: 16px;
  color: #4a74dc;
  font-weight: 500;
  font-size: 1.4rem;
  transition: .3s;
}

@media screen and (max-width: 768px) {
  .header-english__link {
    padding: 1.25vw 5vw;
  }
}

.header-english__link:hover {
  opacity: 1;
  color: #fff;
  transition: .3s;
}

.header-mascot {
  position: relative;
  width: 63px;
  height: 54px;
  margin-left: 6px;
  background: url(/assets/images/common/mascot.png) no-repeat center/cover;
}

@media screen and (max-width: 768px) {
  .header-mascot {
    width: 11.025vw;
    height: 9.45vw;
    margin-left: 2.5vw;
  }
}

.header-mascot.is-hidden {
  display: none;
}

.header-partnership {
  position: absolute;
  top: 140%;
  left: 72px;
  width: 230px;
}

@media screen and (max-width: 768px) {
  .header-partnership {
    width: 35vw;
    left: 50%;
    transform: translateX(-50%);
  }
}

.header-partnership__link {
  display: block;
}

.header-dropbox {
  display: none;
  position: absolute;
  z-index: 100;
  width: 100%;
  background: #164095;
}

.header-dropbox.is-open {
  display: block;
}

.header-dropbox__container {
  padding: 40px 0;
}

.header-dropbox-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.header-dropbox-list__item {
  max-width: 23.61%;
  flex-basis: 23.61%;
}

.header-dropbox-list__item:not(:nth-of-type(4n)) {
  margin-right: 1.85%;
}

.header-dropbox-list__item:nth-of-type(n+5) {
  margin-top: 20px;
}

.header-dropbox-list__link {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  transition: .3s;
}

.header-dropbox-list__link:hover {
  opacity: 1;
  background: #fff;
  color: #164095;
  transition: .3s;
}

.header-dropbox--members .header-dropbox-list__item {
  max-width: 32.22%;
  flex-basis: 32.22%;
  margin-right: 0;
}

.header-dropbox--members .header-dropbox-list__item:not(:nth-of-type(3n)) {
  margin-right: 1.388%;
}

.header-dropbox--members .header-dropbox-list__item:nth-of-type(n+4) {
  margin-top: 20px;
}

.header-smartmenu-opener {
  display: none;
}

@media screen and (max-width: 768px) {
  .header-smartmenu-opener {
    display: block;
    position: fixed;
    bottom: 15vw;
    right: 0;
    width: 18vw;
    height: 18vw;
    border-radius: 4px 0 0 4px;
    background: #4a74dc;
  }
}

@media screen and (max-width: 768px) {
  .header-smartmenu-opener.is-hidden {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .header-smartmenu-opener-trigger {
    position: relative;
    top: 4.5vw;
    left: 50%;
    width: 6vw;
    height: 4.5vw;
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 768px) {
  .header-smartmenu-opener-trigger__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: .3s;
  }
  .header-smartmenu-opener-trigger__line:nth-of-type(1) {
    top: 0;
  }
  .header-smartmenu-opener-trigger__line:nth-of-type(2) {
    top: 50%;
    margin-top: -1px;
  }
  .header-smartmenu-opener-trigger__line:nth-of-type(3) {
    bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .header-smartmenu-opener__text {
    position: absolute;
    bottom: 3vw;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.2px;
    text-align: center;
  }
}

@media screen and (min-width: 769px) {
  .header-smartmenu {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .header-smartmenu {
    overflow-y: auto;
    position: fixed;
    z-index: 101;
    top: 0;
    right: 0;
    width: 70vw;
    height: 100vh;
    background: #164095;
    transform: translateX(70vw);
    transition: .3s;
  }
}

.header-smartmenu.is-open {
  transform: translateX(0);
  transition: .3s;
}

.header-smartmenu-list {
  padding: 11.25vw 10vw 17.5vw;
}

.header-smartmenu-list > li + li {
  border-top: 1px solid #304885;
}

.header-smartmenu-category li:nth-of-type(n+2) {
  border-bottom: 1px solid #304885;
}

.header-smartmenu-category li:nth-of-type(n+2) a {
  font-size: 1.4rem;
}

.header-smartmenu-category li:last-of-type {
  border-bottom: 0;
}

.header-smartmenu-category li + li {
  display: none;
}

.header-smartmenu-category__link {
  display: block;
  width: 100%;
  padding: 2.5vw 0;
  color: #fff;
}

.header-smartmenu-category__trigger {
  position: relative;
}

.header-smartmenu-category__trigger::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 2.5vw;
  height: 2.5vw;
  margin-top: -3px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(135deg);
  transition: .3s;
  content: "";
}

.header-smartmenu-category__trigger.is-triggered::after {
  margin-top: 3px;
  transform: translateY(-50%) rotate(-45deg);
  transition: .3s;
}

.header-smartmenu-others li:first-of-type .header-smartmenu-others__link {
  padding-top: 5vw;
}

.header-smartmenu-others__link {
  display: block;
  width: 100%;
  padding: 1.25vw 0;
  color: #fff;
  font-size: 1.4rem;
}

@media screen and (max-width: 768px) {
  .header-smartmenu-overlay.is-triggered {
    position: fixed;
    opacity: .6;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
  }
}

.footer {
  padding: 30px 0 10px;
  background: #eff2f9;
  font-weight: bold;
}

@media screen and (min-width: 769px) and (max-width: 1340px) {
  .footer {
    min-width: 1340px;
  }
}

@media screen and (max-width: 768px) {
  .footer {
    padding: 10vw 0;
  }
}

@media screen and (max-width: 768px) {
  .footer .c-inner, .footer .c-inner--small {
    padding: 0;
  }
}

.footer a, .footer span {
  color: #333;
}

.footer-linkarea-upper {
  display: flex;
  line-height: 1.5;
  letter-spacing: 0.64px;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .footer-linkarea-upper {
    display: none;
  }
}

.footer-linkarea-upper--en {
  justify-content: flex-start;
}

.footer-linkarea-upper--en .footer-linkarea-upper__item + .footer-linkarea-upper__item {
  margin-left: 80px;
}

.footer-linkarea-upper__item:last-of-type {
  margin-right: 30px;
}

.footer-linkarea-upper__item:last-of-type li {
  font-weight: bold !important;
  font-size: 1.8rem !important;
}

.footer-linkarea-upper__item li:not(:first-of-type) {
  margin-top: 10px;
  font-weight: 500;
  font-size: 1.6rem;
}

.footer-linkarea-lower {
  display: flex;
  margin-top: 30px;
  padding-top: 10px;
  border-top: 1px solid #dcdfe6;
  font-size: 1.4rem;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .footer-linkarea-lower {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

.footer-linkarea-lower__copyright {
  max-width: 22.685%;
  flex-basis: 22.685%;
  font-weight: 500;
  order: 1;
}

@media screen and (max-width: 768px) {
  .footer-linkarea-lower__copyright {
    max-width: 100%;
    flex-basis: 100%;
    font-size: 1.2rem;
    letter-spacing: 0.48px;
    text-align: center;
  }
}

.footer-linkarea-lower-others {
  display: flex;
  max-width: 33.333%;
  flex-basis: 33.333%;
  font-weight: 500;
  justify-content: space-between;
  order: 2;
}

@media screen and (max-width: 768px) {
  .footer-linkarea-lower-others {
    display: none;
  }
}

.footer-linkarea-lower-others--en {
  max-width: 27.778%;
  flex-basis: 27.778%;
  letter-spacing: 0.56px;
}

/*
---
name: 全体共通 下層ページ キービジュアル
category:
  - all
  - all/lower
tag:
  - keyvisual
---

`--wp-a`　モディファイアでWPテンプレートaの背景画像を適用。各projectのscssでオーバーライドする。

```html
<div class="lower-keyvisual--wp-a">
  <h1>ページタイトルが入ります</h1>
</div>
```
*/
.lower-keyvisual, .lower-keyvisual--wp-a, .lower-keyvisual--wp-b, .lower-keyvisual--contact {
  position: relative;
  z-index: 99;
  width: 100%;
  padding: 87px 0 88px;
  line-height: 1.33;
}

@media screen and (min-width: 769px) and (max-width: 1340px) {
  .lower-keyvisual, .lower-keyvisual--wp-a, .lower-keyvisual--wp-b, .lower-keyvisual--contact {
    min-width: 1340px;
  }
}

@media screen and (max-width: 768px) {
  .lower-keyvisual, .lower-keyvisual--wp-a, .lower-keyvisual--wp-b, .lower-keyvisual--contact {
    padding: 25.5vw 0;
  }
}

.lower-keyvisual::after, .lower-keyvisual--wp-a::after, .lower-keyvisual--wp-b::after, .lower-keyvisual--contact::after {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: #4a74dc;
  content: "";
}

@media screen and (max-width: 768px) {
  .lower-keyvisual::after, .lower-keyvisual--wp-a::after, .lower-keyvisual--wp-b::after, .lower-keyvisual--contact::after {
    bottom: -7.5vw;
    height: 15vw;
  }
}

.lower-keyvisual--wp-a._sky {
  background: url(/assets/images/lower-keyvisual-sky.jpg) no-repeat center center/cover !important;
}

.lower-keyvisual--wp-a._leaf {
  background: url(/assets/images/lower-keyvisual-leaf.jpg) no-repeat center center/cover !important;
}

.lower-keyvisual--wp-a._water {
  background: url(/assets/images/lower-keyvisual-water.jpg) no-repeat center center/cover !important;
}

.lower-keyvisual--wp-a._rainbow {
  background: url(/assets/images/lower-keyvisual-rainbow.jpg) no-repeat center center/cover !important;
}

.lower-keyvisual--wp-b._sky {
  background: url(/assets/images/lower-keyvisual-sky.jpg) no-repeat center center/cover !important;
}

.lower-keyvisual--wp-b._leaf {
  background: url(/assets/images/lower-keyvisual-leaf.jpg) no-repeat center center/cover !important;
}

.lower-keyvisual--wp-b._water {
  background: url(/assets/images/lower-keyvisual-water.jpg) no-repeat center center/cover !important;
}

.lower-keyvisual--wp-b._rainbow {
  background: url(/assets/images/lower-keyvisual-rainbow.jpg) no-repeat center center/cover !important;
}

.lower-keyvisual--contact {
  background: url(/assets/images/contact/contact-keyvisual.jpg) no-repeat center center/cover;
}

@media screen and (max-width: 768px) {
  .lower-keyvisual--contact {
    background: url(/assets/images/contact/contact-keyvisual-sp.jpg) no-repeat center center/cover;
  }
}

.lower-keyvisual > h1, .lower-keyvisual--wp-a > h1, .lower-keyvisual--wp-b > h1, .lower-keyvisual--contact > h1 {
  color: #fff;
  font-weight: 500;
  font-size: 4.2rem;
  text-align: center;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

@media screen and (max-width: 768px) {
  .lower-keyvisual > h1, .lower-keyvisual--wp-a > h1, .lower-keyvisual--wp-b > h1, .lower-keyvisual--contact > h1 {
    width: 90%;
    margin: 0 auto;
    font-size: 2.7rem;
    line-height: 1.47;
    text-align: center;
  }
}

/*! =========================
  component
========================= */
.c-button-pagetop {
  display: none;
  position: relative;
  z-index: 98;
  right: 0;
  bottom: 0;
}

@media screen and (min-width: 769px) and (max-width: 1340px) {
  .c-button-pagetop {
    min-width: 1340px;
  }
}

.c-button-pagetop__trigger {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #164095;
}

.c-button-pagetop__trigger::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 24px;
  transform: translate(-50%, -50%);
  background: url(/assets/images/common/pagetop-arrow.svg) no-repeat;
  content: "";
}

.c-button-pagetop__trigger::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: top;
  transform: scale(1, 0);
  width: 100%;
  height: 100%;
  background: #4a74dc;
  transition: transform .3s;
  content: "";
}

.c-button-pagetop__trigger:hover::after {
  transform-origin: bottom;
  transform: scale(1, 1);
}

/*
---
name: 全体共通 inner
category:
  - all
  - all/inner
tag:
  - inner
---

```html
<div class="c-inner">
  <div class="wp-c-a-textarea">
    <p>ダミーテキストです。</p>
    </div>
</div>
```
*/
.c-inner, .c-inner--small {
  width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
}

@media screen and (max-width: 768px) {
  .c-inner, .c-inner--small {
    width: 100%;
    padding: 0 5vw;
  }
}

.c-inner--small {
  width: 880px;
}

@media screen and (max-width: 768px) {
  .c-inner--small {
    width: 100%;
  }
}

/*!
	Modaal - accessible modals - v0.4.4
	by Humaan, for all humans.
	http://humaan.com
 */
.modaal-noscroll {
  overflow: hidden;
}

.modaal-accessible-hide {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0;
}

.modaal-wrapper {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: auto;
  opacity: 1;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  transition: all 0.3s ease-in-out;
}

.modaal-wrapper * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
}

.modaal-wrapper .modaal-close {
  border: none;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
}

.modaal-wrapper.modaal-start_none {
  display: none;
  opacity: 1;
}

.modaal-wrapper.modaal-start_fade {
  opacity: 0;
}

.modaal-wrapper *[tabindex="0"] {
  outline: none !important;
}

.modaal-wrapper.modaal-fullscreen {
  overflow: hidden;
}

.modaal-outer-wrapper {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
}

.modaal-fullscreen .modaal-outer-wrapper {
  display: block;
}

.modaal-inner-wrapper {
  display: table-cell;
  width: 100%;
  height: 100%;
  position: relative;
  vertical-align: middle;
  text-align: center;
  padding: 80px 25px;
}

@media screen and (max-width: 768px) {
  .modaal-inner-wrapper {
    padding: 5.33vw !important;
  }
}

.modaal-fullscreen .modaal-inner-wrapper {
  padding: 0;
  display: block;
  vertical-align: top;
}

.modaal-container {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: auto;
  text-align: left;
  color: #000;
  max-width: 1000px;
  border-radius: 0px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: auto;
}

.modaal-container.is_loading {
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.modaal-fullscreen .modaal-container {
  max-width: none;
  height: 100%;
  overflow: auto;
}

.modaal-close {
  position: fixed;
  right: 20px;
  top: 20px;
  color: #fff;
  cursor: pointer;
  opacity: 1;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border-radius: 100%;
  transition: all 0.2s ease-in-out;
}

.modaal-close:focus, .modaal-close:hover {
  outline: none;
  background: #fff;
}

.modaal-close:focus:before, .modaal-close:focus:after, .modaal-close:hover:before, .modaal-close:hover:after {
  background: #b93d0c;
}

.modaal-close span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-close:before, .modaal-close:after {
  display: block;
  content: " ";
  position: absolute;
  top: 14px;
  left: 23px;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: #fff;
  transition: background 0.2s ease-in-out;
}

.modaal-close:before {
  transform: rotate(-45deg);
}

.modaal-close:after {
  transform: rotate(45deg);
}

.modaal-fullscreen .modaal-close {
  background: #afb7bc;
  right: 10px;
  top: 10px;
}

.modaal-content-container {
  padding: 0;
}

.modaal-confirm-wrap {
  padding: 30px 0 0;
  text-align: center;
  font-size: 0;
}

.modaal-confirm-btn {
  font-size: 14px;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  background: transparent;
}

.modaal-confirm-btn.modaal-ok {
  padding: 10px 15px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  transition: background 0.2s ease-in-out;
}

.modaal-confirm-btn.modaal-ok:hover {
  background: #2f2f2f;
}

.modaal-confirm-btn.modaal-cancel {
  text-decoration: underline;
}

.modaal-confirm-btn.modaal-cancel:hover {
  text-decoration: none;
  color: #2f2f2f;
}

@keyframes instaReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.modaal-instagram .modaal-container {
  width: auto;
  background: transparent;
  box-shadow: none !important;
}

.modaal-instagram .modaal-content-container {
  padding: 0;
  background: transparent;
}

.modaal-instagram .modaal-content-container > blockquote {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.modaal-instagram iframe {
  opacity: 0;
  margin: -6px !important;
  border-radius: 0 !important;
  width: 1000px !important;
  max-width: 800px !important;
  box-shadow: none !important;
  animation: instaReveal 1s linear forwards;
}

.modaal-image .modaal-inner-wrapper {
  padding-left: 140px;
  padding-right: 140px;
}

.modaal-image .modaal-container {
  width: auto;
  max-width: 100%;
}

.modaal-gallery-wrap {
  position: relative;
  color: #fff;
}

.modaal-gallery-item {
  display: none;
}

.modaal-gallery-item img {
  display: block;
}

.modaal-gallery-item.is_active {
  display: block;
}

.modaal-gallery-label {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 20px 0 0;
  font-size: 18px;
  text-align: center;
  color: #fff;
}

.modaal-gallery-label:focus {
  outline: none;
}

.modaal-gallery-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  cursor: pointer;
  color: #fff;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 100%;
  transition: all 0.2s ease-in-out;
}

.modaal-gallery-control.is_hidden {
  opacity: 0;
  cursor: default;
}

.modaal-gallery-control:focus, .modaal-gallery-control:hover {
  outline: none;
  background: #fff;
}

.modaal-gallery-control:focus:before, .modaal-gallery-control:focus:after, .modaal-gallery-control:hover:before, .modaal-gallery-control:hover:after {
  background: #afb7bc;
}

.modaal-gallery-control span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-gallery-control:before, .modaal-gallery-control:after {
  display: block;
  content: " ";
  position: absolute;
  top: 16px;
  left: 25px;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  transition: background 0.2s ease-in-out;
}

.modaal-gallery-control:before {
  margin: -5px 0 0;
  transform: rotate(-45deg);
}

.modaal-gallery-control:after {
  margin: 5px 0 0;
  transform: rotate(45deg);
}

.modaal-gallery-next-inner {
  left: 100%;
  margin-left: 40px;
}

.modaal-gallery-next-outer {
  right: 45px;
}

.modaal-gallery-prev:before, .modaal-gallery-prev:after {
  left: 22px;
}

.modaal-gallery-prev:before {
  margin: 5px 0 0;
  transform: rotate(-45deg);
}

.modaal-gallery-prev:after {
  margin: -5px 0 0;
  transform: rotate(45deg);
}

.modaal-gallery-prev-inner {
  right: 100%;
  margin-right: 40px;
}

.modaal-gallery-prev-outer {
  left: 45px;
}

.modaal-video-wrap {
  margin: auto 50px;
  position: relative;
}

.modaal-video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background: #000;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.modaal-video-container iframe,
.modaal-video-container object,
.modaal-video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modaal-iframe .modaal-content {
  width: 100%;
  height: 100%;
}

.modaal-iframe-elem {
  width: 100%;
  height: 100%;
  display: block;
}

@media only screen and (min-width: 1400px) {
  .modaal-video-container {
    padding-bottom: 0;
    height: 731px;
  }
}

@media only screen and (max-width: 1140px) {
  .modaal-image .modaal-inner-wrapper {
    padding-left: 25px;
    padding-right: 25px;
  }
  .modaal-gallery-control {
    top: auto;
    bottom: 20px;
    transform: none;
    background: rgba(0, 0, 0, 0.7);
  }
  .modaal-gallery-control:before, .modaal-gallery-control:after {
    background: #fff;
  }
  .modaal-gallery-next {
    left: auto;
    right: 20px;
  }
  .modaal-gallery-prev {
    left: 20px;
    right: auto;
  }
}

@media screen and (max-width: 900px) {
  .modaal-instagram iframe {
    width: 500px !important;
  }
}

@media screen and (max-height: 1100px) {
  .modaal-instagram iframe {
    width: 700px !important;
  }
}

@media screen and (max-height: 1000px) {
  .modaal-inner-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .modaal-instagram iframe {
    width: 600px !important;
  }
}

@media screen and (max-height: 900px) {
  .modaal-instagram iframe {
    width: 500px !important;
  }
  .modaal-video-container {
    max-width: 900px;
    max-height: 510px;
  }
}

@media only screen and (max-width: 600px) {
  .modaal-instagram iframe {
    width: 280px !important;
  }
}

@media only screen and (max-height: 820px) {
  .modaal-gallery-label {
    display: none;
  }
}

.modaal-loading-spinner {
  background: none;
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  transform: scale(0.25);
}

@keyframes modaal-loading-spinner {
  0% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: .1;
    transform: scale(1);
  }
}

.modaal-loading-spinner > div {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  margin-top: 4px;
  position: absolute;
}

.modaal-loading-spinner > div > div {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #fff;
}

.modaal-loading-spinner > div:nth-of-type(1) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: 0s;
}

.modaal-loading-spinner > div:nth-of-type(2) > div, .modaal-loading-spinner > div:nth-of-type(3) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(1) {
  transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(2) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: .12s;
}

.modaal-loading-spinner > div:nth-of-type(2) {
  transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(3) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: .25s;
}

.modaal-loading-spinner > div:nth-of-type(4) > div, .modaal-loading-spinner > div:nth-of-type(5) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(3) {
  transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(4) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: .37s;
}

.modaal-loading-spinner > div:nth-of-type(4) {
  transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(5) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: .5s;
}

.modaal-loading-spinner > div:nth-of-type(6) > div, .modaal-loading-spinner > div:nth-of-type(7) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(5) {
  transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(6) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: .62s;
}

.modaal-loading-spinner > div:nth-of-type(6) {
  transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(7) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: .75s;
}

.modaal-loading-spinner > div:nth-of-type(7) {
  transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(8) > div {
  animation: modaal-loading-spinner 1s linear infinite;
  animation-delay: .87s;
}

.modaal-loading-spinner > div:nth-of-type(8) {
  transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Arrows */
.slick-prev,
.slick-next {
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0px;
  outline: none;
  cursor: pointer;
}

.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  background: transparent;
  color: transparent;
  outline: none;
}

.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  opacity: 0.75;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  font-family: "slick";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

.slick-prev:before {
  content: "←";
}

.slick-next {
  right: -25px;
}

.slick-next:before {
  content: "→";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  display: block;
  position: absolute;
  bottom: -25px;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.slick-dots li {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  outline: none;
  cursor: pointer;
}

.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  position: absolute;
  opacity: 0.25;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  color: black;
  font-size: 6px;
  line-height: 20px;
  font-family: "slick";
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "•";
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: black;
}

/* Slider */
.slick-slider {
  display: block;
  position: relative;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

.slick-list {
  display: block;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}

.slick-track:before, .slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
  font-size: 0;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*! =========================
  project
========================= */
.p-access-address {
  line-height: 2.13;
  letter-spacing: 0.64px;
}

.p-access-address__icon {
  position: relative;
  padding-left: 24px;
}

@media screen and (max-width: 768px) {
  .p-access-address__icon {
    display: block;
    padding-left: 6vw;
  }
}

.p-access-address__icon::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 21px;
  background: url(/assets/images/common/pin.svg) no-repeat 100%/contain;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-access-address__icon::before {
    top: 2.5vw;
    transform: none;
    width: 4vw;
    height: 5.25vw;
  }
}

.p-access-way {
  display: flex;
  margin-top: 6px;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .p-access-way {
    margin-top: 5vw;
    font-size: 1.4rem;
  }
}

.p-access-way__car {
  margin-left: 40px;
}

@media screen and (max-width: 768px) {
  .p-access-way__car {
    margin-left: 7.5vw;
  }
}

.p-access-way__icon, .p-access-way__icon--dots, .p-access-way__icon--bar {
  position: relative;
  padding-left: 37px;
}

@media screen and (max-width: 768px) {
  .p-access-way__icon, .p-access-way__icon--dots, .p-access-way__icon--bar {
    padding-left: 9.25vw;
  }
}

.p-access-way__icon::before, .p-access-way__icon--dots::before, .p-access-way__icon--bar::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 27px;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-access-way__icon::before, .p-access-way__icon--dots::before, .p-access-way__icon--bar::before {
    width: 6.75vw;
  }
}

.p-access-way__icon--dots::before {
  height: 5px;
  background: url(/assets/images/intro/access/access-dots.svg) no-repeat 100%/contain;
}

.p-access-way__icon--bar::before {
  height: 3px;
  background: url(/assets/images/intro/access/access-bar.svg) no-repeat 100%/contain;
}

.p-access__map {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .p-access__map {
    margin-top: 5vw;
  }
}

.p-access-box {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .p-access-box {
    display: block;
    margin-top: 5vw;
  }
}

.p-access-box__item {
  max-width: 42.592%;
  flex-basis: 42.592%;
  padding: 20px 0;
  border: 1px solid #e0e4ec;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-access-box__item {
    max-width: 100%;
    flex-basis: 100%;
    padding: 7.5vw 0;
  }
}

.p-access-box__item + .p-access-box__item {
  margin-left: 3.7%;
}

@media screen and (max-width: 768px) {
  .p-access-box__item + .p-access-box__item {
    margin-top: 5vw;
    margin-left: 0;
  }
}

.p-access-box__title {
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .p-access-box__title {
    font-size: 2rem;
  }
}

.p-access-box__icon, .p-access-box__icon--train, .p-access-box__icon--car {
  position: relative;
  padding: 6px 0 7px 48px;
}

@media screen and (max-width: 768px) {
  .p-access-box__icon, .p-access-box__icon--train, .p-access-box__icon--car {
    padding: 6px 0 7px 12vw;
  }
}

.p-access-box__icon::before, .p-access-box__icon--train::before, .p-access-box__icon--car::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-access-box__icon::before, .p-access-box__icon--train::before, .p-access-box__icon--car::before {
    width: 10vw;
    height: 10vw;
  }
}

.p-access-box__icon--train::before {
  background: url(/assets/images/intro/access/access-train.svg) no-repeat 100%/contain;
}

.p-access-box__icon--car::before {
  background: url(/assets/images/intro/access/access-car.svg) no-repeat 100%/contain;
}

.p-access-box__text {
  margin-top: 12px;
}

@media screen and (max-width: 768px) {
  .p-access-box__text {
    margin-top: 5vw;
    font-size: 1.6rem;
    line-height: 2.13;
  }
}

.p-access-button {
  width: 244px;
  margin: 30px auto 0;
}

@media screen and (max-width: 768px) {
  .p-access-button {
    width: 55vw;
    margin: 7.5vw auto 0;
  }
}

.p-access-button__link {
  display: block;
  width: 100%;
  padding: 14px 0 15px;
  border-radius: 28px;
  background: #164095;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-access-button__link {
    padding: 3.5vw 0;
    border-radius: 7vw;
  }
}

.p-anniversary__image {
  width: 335px;
  max-width: revert !important;
  flex-basis: revert !important;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-anniversary__image {
    width: 60%;
  }
}

.p-anniversary__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.p-anniversary__video {
  aspect-ratio: 16 / 9;
}

.p-anniversary__video iframe {
  width: 100%;
  height: 100%;
}

.p-contact {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .p-contact {
    margin-top: 20vw;
  }
}

@media screen and (max-width: 768px) {
  .p-contact-head__text {
    padding-left: 3.75vw;
    text-indent: -3.75vw;
    font-size: 1.6rem;
    line-height: 2.13;
  }
}

.p-contact-head__text + .p-contact-head__text {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .p-contact-head__text + .p-contact-head__text {
    margin-top: 0;
  }
}

.p-contact-head__dot {
  position: relative;
  padding-left: 15px;
}

@media screen and (max-width: 768px) {
  .p-contact-head__dot {
    padding-left: 3.75vw;
  }
}

.p-contact-head__dot::before {
  position: absolute;
  top: 12px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a74dc;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-contact-head__dot::before {
    top: 3vw;
    width: 1.5vw;
    height: 1.5vw;
  }
}

.p-contact-form {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .p-contact-form {
    margin-top: 7.5vw;
  }
}

.p-contact-form-table + .p-contact-form-table {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .p-contact-form-table + .p-contact-form-table {
    margin-top: 10vw;
  }
}

.p-contact-form-table__name {
  display: flex;
  font-weight: bold;
  justify-content: flex-start;
  align-items: center;
}

.p-contact-form-table__data {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .p-contact-form-table__data {
    margin-top: 2.5vw;
  }
}

.p-contact-form-table__data input {
  width: 100%;
  height: 70px;
  padding: 0 20px;
  border: 1px solid #e0e4ec;
  background: #fff;
  font-size: 1.8rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.p-contact-form-table__data input:placeholder-shown {
  color: #b3b7c5;
}

.p-contact-form-table__data input::-webkit-input-placeholder {
  color: #b3b7c5;
}

.p-contact-form-table__data input:-ms-input-placeholder {
  color: #b3b7c5;
}

@media screen and (max-width: 768px) {
  .p-contact-form-table__data input {
    height: 16.5vw;
    padding: 0 5vw;
    font-size: 1.6rem;
  }
}

.p-contact-form-table__data textarea {
  width: 100%;
  height: 280px;
  padding: 20px;
  border: 1px solid #e0e4ec;
  font-size: 1.8rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.p-contact-form-table__data textarea:placeholder-shown {
  color: #b3b7c5;
}

.p-contact-form-table__data textarea::-webkit-input-placeholder {
  color: #b3b7c5;
}

.p-contact-form-table__data textarea:-ms-input-placeholder {
  color: #b3b7c5;
}

@media screen and (max-width: 768px) {
  .p-contact-form-table__data textarea {
    height: 70vw;
    padding: 5vw;
    font-size: 1.6rem;
  }
}

.p-contact-form-table__label {
  width: 6.25%;
  margin-left: 15px;
  padding: 3px 0 4px;
  border: 1px solid #f85050;
  color: #f85050;
  font-weight: 500;
  font-size: 1.4rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-contact-form-table__label {
    width: 12.5vw;
    margin-left: 3.75vw;
  }
}

.p-contact-form-table__label--english {
  width: 9.25%;
}

@media screen and (max-width: 768px) {
  .p-contact-form-table__label--english {
    width: 18.5vw !important;
  }
}

.p-contact-form-table__error {
  margin-top: 10px;
  color: #f85050;
}

@media screen and (max-width: 768px) {
  .p-contact-form-table__error {
    margin-top: 5vw;
  }
}

.p-contact-form-buttonArea {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .p-contact-form-buttonArea {
    margin-top: 15vw;
  }
}

.p-contact-form-buttonArea--single .p-contact-form-buttonArea__button {
  margin: 0 auto;
}

.p-contact-form-buttonArea--double {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .p-contact-form-buttonArea--double .p-contact-form-buttonArea__button {
    width: 42.5vw !important;
    padding: 2.5vw 0 !important;
  }
}

.p-contact-form-buttonArea__button {
  display: block;
  width: 244px;
  padding: 14px 0 15px;
  border: 0;
  border-radius: 28px;
  background: #164095;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  text-align: center;
  transition: .3s;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .p-contact-form-buttonArea__button {
    width: 61vw;
    padding: 4vw 0;
    border-radius: 7vw;
    font-size: 1.6rem;
  }
}

.p-contact-form-buttonArea__button:hover {
  opacity: 0.8;
  transition: .3s;
}

.p-contact-form-buttonArea__button--back {
  margin-right: 40px;
  border: 1px solid #164095;
  background: #fff;
  color: #164095;
}

@media screen and (max-width: 768px) {
  .p-contact-form-buttonArea__button--back {
    margin-right: 5vw;
  }
}

.p-contact-form-finish {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .p-contact-form-finish {
    margin-top: 0;
  }
}

.p-contact-form-finish__heading {
  color: #4a74dc;
  font-weight: bold;
  font-size: 2.8rem;
  letter-spacing: 1.12px;
}

@media screen and (max-width: 768px) {
  .p-contact-form-finish__heading {
    font-size: 2rem;
  }
}

.p-contact-form-finish__text {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .p-contact-form-finish__text {
    margin-top: 5vw;
    font-size: 1.6rem;
    line-height: 2.13;
  }
}

.p-contact-form-finish-button {
  width: 244px;
  margin: 30px auto 0;
}

@media screen and (max-width: 768px) {
  .p-contact-form-finish-button {
    width: 61vw;
    margin: 15vw auto 0;
  }
}

.p-contact-form-finish-button__link {
  display: block;
  width: 100%;
  padding: 14px 0 15px;
  border-radius: 28px;
  background: #164095;
  color: #fff;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-contact-form-finish-button__link {
    padding: 3.25vw 0;
    border-radius: 7vw;
    font-size: 1.6rem;
  }
}

.p-council__container {
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .p-council__container {
    margin-top: 10vw;
  }
}

.p-council-map {
  position: relative;
  padding: 55px 305px 195px 263px;
  font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
  .p-council-map {
    padding: 0;
  }
}

.p-council-map__image {
  width: 512px;
}

@media screen and (max-width: 768px) {
  .p-council-map__image {
    width: 84vw;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .p-council-map__image img {
    width: 100%;
  }
}

.p-council-map-category {
  width: 204px;
  padding: 20px 18px 36px;
  border: 2px solid #e0e4ec;
  border-radius: 8px;
}

@media screen and (min-width: 769px) {
  .p-council-map-category {
    position: absolute;
  }
}

@media screen and (max-width: 768px) {
  .p-council-map-category {
    width: 100% !important;
    padding: 3.6vw;
  }
}

@media screen and (max-width: 768px) {
  .p-council-map-category + .p-council-map-category {
    margin-top: 6vw;
  }
}

.p-council-map-category--broad {
  width: 221px;
}

@media screen and (min-width: 769px) {
  .p-council-map-category--hokkaido {
    top: 20px;
    right: 54px;
  }
}

@media screen and (max-width: 768px) {
  .p-council-map-category--hokkaido {
    margin-top: 10vw;
  }
}

@media screen and (min-width: 769px) {
  .p-council-map-category--kanto {
    top: 271px;
    right: 106px;
  }
}

@media screen and (min-width: 769px) {
  .p-council-map-category--hokushinetsu {
    top: 68px;
    left: 405px;
  }
}

@media screen and (min-width: 769px) {
  .p-council-map-category--tokai {
    right: 199px;
    bottom: 8px;
  }
}

@media screen and (min-width: 769px) {
  .p-council-map-category--kinki {
    bottom: 28px;
    left: 426px;
  }
}

@media screen and (min-width: 769px) {
  .p-council-map-category--tyugoku {
    top: 40px;
    left: 172px;
  }
}

@media screen and (min-width: 769px) {
  .p-council-map-category--shikoku {
    bottom: 3px;
    left: 194px;
  }
}

@media screen and (min-width: 769px) {
  .p-council-map-category--kyusyu {
    top: 267px;
    left: 10px;
  }
}

.p-council-map-category__prefecture {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.8;
  letter-spacing: 0.96px;
  text-align: center;
}

.p-council-map-category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .p-council-map-category-list {
    margin-top: 2vw;
    justify-content: flex-start;
  }
}

.p-council-map-category-list--fiveFour .p-council-map-category-list__item:nth-of-type(odd) {
  max-width: 49.12%;
  flex-basis: 49.12%;
}

@media screen and (max-width: 768px) {
  .p-council-map-category-list--fiveFour .p-council-map-category-list__item:nth-of-type(odd) {
    max-width: 26.4375%;
    flex-basis: 26.4375%;
  }
}

.p-council-map-category-list--fiveFour .p-council-map-category-list__item:nth-of-type(even) {
  max-width: 39.054%;
  flex-basis: 39.054%;
}

@media screen and (max-width: 768px) {
  .p-council-map-category-list--fiveFour .p-council-map-category-list__item:nth-of-type(even) {
    max-width: 26.4375%;
    flex-basis: 26.4375%;
  }
}

.p-council-map-category-list--fourFive .p-council-map-category-list__item:nth-of-type(odd) {
  max-width: 39.054%;
  flex-basis: 39.054%;
}

@media screen and (max-width: 768px) {
  .p-council-map-category-list--fourFive .p-council-map-category-list__item:nth-of-type(odd) {
    max-width: 26.4375%;
    flex-basis: 26.4375%;
  }
}

.p-council-map-category-list--fourFive .p-council-map-category-list__item:nth-of-type(even) {
  max-width: 49.12%;
  flex-basis: 49.12%;
}

@media screen and (max-width: 768px) {
  .p-council-map-category-list--fourFive .p-council-map-category-list__item:nth-of-type(even) {
    max-width: 26.4375%;
    flex-basis: 26.4375%;
  }
}

.p-council-map-category-list__item {
  max-width: 43.43%;
  flex-basis: 43.43%;
}

@media screen and (max-width: 768px) {
  .p-council-map-category-list__item {
    max-width: 26.4375%;
    flex-basis: 26.4375%;
  }
}

@media screen and (min-width: 769px) {
  .p-council-map-category-list__item:nth-of-type(odd) {
    margin-right: 20px;
  }
}

@media screen and (max-width: 768px) {
  .p-council-map-category-list__item {
    margin-right: 7.5vw;
  }
}

@media screen and (max-width: 768px) {
  .p-council-map-category-list__item:nth-of-type(3n) {
    margin-right: 0;
  }
}

.p-council-map-category-list__link {
  color: #4a74dc;
  line-height: 2.13;
  letter-spacing: 0.64px;
}

.p-en-jaw-list {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .p-en-jaw-list {
    margin-top: 10vw;
  }
}

.p-en-jaw-list__item {
  width: 520px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-en-jaw-list__item {
    width: 90vw;
  }
}

.p-en-jaw-list__item + .p-en-jaw-list__item {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .p-en-jaw-list__item + .p-en-jaw-list__item {
    margin-top: 5vw;
  }
}

.p-en-jaw-list__link {
  display: block;
  width: 100%;
  padding: 19px 0;
  border-radius: 32px;
  background: #164095;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 9vw;
}

@media screen and (max-width: 768px) {
  .p-en-jaw-list__link {
    padding: 5.5vw 0;
  }
}

@media screen and (max-width: 768px) {
  .p-en-jaw-list__link--broad {
    padding: 2.5vw 0;
  }
}

.p-en-updates {
  margin-top: 30px;
  padding-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .p-en-updates {
    margin-top: 10vw;
    padding-bottom: 10vw;
  }
}

.p-en-updates-table {
  display: flex;
  padding: 20px 0;
  border-top: 1px solid #e0e4ec;
}

@media screen and (max-width: 768px) {
  .p-en-updates-table {
    display: block;
    padding: 5vw 0;
  }
}

.p-en-updates-table--last {
  border-bottom: 1px solid #e0e4ec;
}

.p-en-updates-table__date {
  max-width: 9.722%;
  flex-basis: 9.722%;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .p-en-updates-table__date {
    max-width: 100%;
    flex-basis: 100%;
  }
}

.p-en-updates-table__data {
  max-width: 90.278%;
  flex-basis: 90.278%;
  padding: 0 20px;
}

@media screen and (max-width: 768px) {
  .p-en-updates-table__data {
    max-width: 100%;
    flex-basis: 100%;
    padding: 0;
  }
}

.p-en-updates-button {
  width: 244px;
  margin: 30px auto 0;
}

@media screen and (max-width: 768px) {
  .p-en-updates-button {
    width: 55vw;
    margin: 10vw auto 0;
  }
}

.p-en-updates-button__link {
  display: block;
  width: 100%;
  padding: 15px 0;
  border-radius: 28px;
  background: #164095;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-en-updates-button__link {
    padding: 2.5vw 0;
    border-radius: 9vw;
    font-size: 1.6rem;
  }
}

.p-en-pickup__background {
  padding: 30px 0;
  background: url(/assets/images/en/pickup-background.jpg) no-repeat 100%/cover;
}

@media screen and (max-width: 768px) {
  .p-en-pickup__background {
    margin-bottom: 15vw;
    padding: 10vw 0;
    background: url(/assets/images/en/pickup-background-sp.jpg) no-repeat 100%/cover;
  }
}

.p-en-pickup-card__icon--01::before {
  background: url(/assets/images/en/pickup-01.png) no-repeat 100%/contain;
}

.p-en-pickup-card__icon--02::before {
  background: url(/assets/images/en/pickup-02.png) no-repeat 100%/contain;
}

.p-hazard__mascot {
  display: inline-block;
  position: relative;
  padding-right: 84px;
}

@media screen and (max-width: 768px) {
  .p-hazard__mascot {
    padding-right: 16.8vw;
  }
}

.p-hazard__mascot::after {
  position: absolute;
  right: 0;
  width: 76px;
  height: 100px;
  background: url(/assets/images/members/saigai/mascot.png) no-repeat 100%/contain;
  content: "";
}

@media screen and (min-width: 769px) {
  .p-hazard__mascot::after {
    top: 50%;
    transform: translateY(-50%);
  }
}

@media screen and (max-width: 768px) {
  .p-hazard__mascot::after {
    bottom: 0;
    width: 14.62vw;
    height: 19.29vw;
  }
}

.p-hazard-list {
  border-top: 1px solid #e0e4ec;
}

.p-hazard-list__line {
  padding: 20px 0;
  border-bottom: 1px solid #e0e4ec;
}

@media screen and (max-width: 768px) {
  .p-hazard-list__line {
    padding: 2.67vw 0;
  }
}

.p-hazard-list__line._hidden {
  display: none;
}

.p-hazard-list__link {
  display: block;
}

.p-hazard-list__notfound {
  padding: 20px 0;
}

@media screen and (max-width: 768px) {
  .p-hazard-list__notfound {
    padding: 2.67vw 0;
  }
}

.p-hazard-line {
  display: grid;
  grid-template-columns: 110px auto;
}

@media screen and (max-width: 768px) {
  .p-hazard-line {
    grid-template-columns: 30% auto;
  }
}

.p-hazard-line__term {
  font-weight: bold;
  letter-spacing: 0.035em;
}

.p-hazard-line__desc {
  position: relative;
  padding: 0 1.852%;
}

.p-hazard-line__desc ._pdf {
  display: inline-block;
  width: 17px;
  height: 21px;
  margin-top: -4px;
  margin-left: 14px;
  background: url("/assets/images/common/pdf.svg") no-repeat center/contain;
  vertical-align: middle;
}

.p-hazard-table {
  border: 1px solid #c6cad4;
  border-top: none;
}

@media screen and (max-width: 768px) {
  .p-hazard-table {
    border: 0;
  }
}

.p-hazard-table--fixed {
  padding-right: 16px;
  background: #164095;
}

@media screen and (max-width: 768px) {
  .p-hazard-table--fixed {
    position: sticky;
    top: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 769px) {
  .p-hazard-table--scrollable {
    overflow-y: scroll;
  }
}

@media screen and (max-width: 768px) {
  .p-hazard-table--scrollable .p-hazard-table__line {
    width: 168.75vw;
  }
}

@media screen and (max-width: 768px) {
  .p-hazard-table__wrapper {
    overflow-x: scroll;
    border: 1px solid #c6cad4;
    border-top: 0;
  }
}

.p-hazard-table__line {
  display: grid;
  text-align: center;
  grid-template-columns: 1fr 1.125fr 1.5fr 1.5fr 1.5fr;
}

@media screen and (max-width: 768px) {
  .p-hazard-table__line {
    grid-template-columns: 30vw 33.75vw 35vw 35vw 35vw;
  }
}

.p-hazard-table__line:nth-of-type(n+2) {
  border-top: 1px solid #c6cad4;
}

.p-hazard-table__term {
  padding: 10px 8px;
  background: #164095;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .p-hazard-table__term {
    padding: 3vw 2vw;
  }
}

.p-hazard-table__term:nth-of-type(n+2) {
  border-left: 1px solid #fff;
}

.p-hazard-table__desc {
  display: flex;
  height: 100%;
  padding: 13px 10px;
  background: #fff;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .p-hazard-table__desc {
    padding: 3vw 2vw;
  }
}

.p-hazard-table__desc:first-of-type {
  background: #eff2f9;
}

.p-hazard-table__desc:nth-of-type(n+2) {
  border-left: 1px solid #c6cad4;
}

.p-hazard-table__desc:nth-of-type(n+3) {
  padding: 0;
}

.p-hazard-table__desc ._pdf {
  display: inline-block;
  width: 39px;
  height: 48px;
  background: url("/assets/images/members/saigai/pdf-download.svg") no-repeat center/contain;
}

@media screen and (max-width: 768px) {
  .p-hazard-table__desc ._pdf {
    width: 8vw;
    height: 9.6vw;
  }
}

.p-hazard-table__link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 13px 8px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-hazard-table__link {
    padding: 3vw 2vw;
  }
}

.p-hazard-filter {
  margin-top: 48px;
}

@media screen and (max-width: 768px) {
  .p-hazard-filter {
    margin-top: 10vw;
  }
}

.p-hazard-filter__box {
  padding: 30px;
  border: 1px solid #c6cad4;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .p-hazard-filter__box {
    padding: 4vw;
  }
}

.p-hazard-filter__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  row-gap: 12px;
}

@media screen and (max-width: 768px) {
  .p-hazard-filter__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
  }
}

.p-hazard-filter__item {
  position: relative;
}

.p-hazard-filter__item::after {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  margin-top: 1px;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #333 transparent transparent transparent;
  border-radius: 2px;
  content: "";
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .p-hazard-filter__item::after {
    right: 3vw;
    margin-top: 0;
    border-width: 2vw 1.5vw 0 1.5vw;
  }
}

@media screen and (min-width: 769px) {
  .p-hazard-filter__item:hover select {
    padding: 2px 17px 0;
    border: 2px solid #333;
  }
}

.p-hazard-filter__item select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 2px 18px 0;
  border: 1px solid #c6cad4;
  border-radius: 4px;
  color: #80889e;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .p-hazard-filter__item select {
    height: 10vw;
    border-radius: 1vw;
    padding: 2px 3vw 0;
  }
}

.p-hazard-filter__item option {
  color: #333;
}

.p-hazard-filter__button {
  display: block;
  width: 244px;
  height: 56px;
  margin: 20px auto 0;
  border: 0;
  border-radius: 28px;
  background: #164095;
  color: #fff;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  transition: opacity .3s;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .p-hazard-filter__button {
    width: 55vw;
    height: 12vw;
    margin-top: 5vw;
    border-radius: 7vw;
  }
}

@media screen and (min-width: 769px) {
  .p-hazard-filter__button:hover {
    opacity: 0.8;
    transition: opacity .3s;
  }
}

.p-hazard__navi .wp-pagenavi {
  margin-top: 40px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-hazard__navi .wp-pagenavi {
    margin-top: 10vw;
  }
}

.p-hazard__navi .wp-pagenavi a, .p-hazard__navi .wp-pagenavi span {
  display: inline-block;
  width: 30px;
  height: 34px;
  margin: 0 8px;
  border: 1px solid #333;
  line-height: 30px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-hazard__navi .wp-pagenavi a, .p-hazard__navi .wp-pagenavi span {
    width: 7.5vw;
    height: 8.5vw;
    margin: 0 2vw;
    line-height: 7.5vw;
  }
}

.p-hazard__navi .wp-pagenavi .current {
  background: #164095;
  color: #fff;
}

.p-hazard-search {
  width: 248px;
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .p-hazard-search {
    width: 62vw;
    margin-top: 10vw;
  }
}

.p-hazard-search__button {
  display: block;
  width: 100%;
  padding: 18px 0;
  border-radius: 4px;
  background: #4a74dc;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-hazard-search__button {
    padding: 4.5vw 0;
  }
}

.p-hazard-search__icon {
  position: relative;
  padding-right: 46px;
  color: #fff;
}

.p-hazard-search__icon::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url(/assets/images/members/saigai/search-white.svg) no-repeat 100%/contain;
  content: "";
}

@media screen and (min-width: 769px) and (max-width: 1340px) {
  .p-hazard-search-modal .modaal-inner-wrapper {
    min-width: 1340px;
  }
}

.p-hazard-search-modal .modaal-container {
  position: relative;
  max-width: 680px;
  padding: 60px;
  border-radius: 8px;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .p-hazard-search-modal .modaal-container {
    max-width: 90vw;
    padding: 10vw;
  }
}

.p-hazard-search-modal .modaal-container::before {
  position: absolute;
  top: -17px;
  right: -17px;
  width: 34px;
  height: 34px;
  background: url(/assets/images/members/saigai/modal-close.png) no-repeat 100%/contain;
  content: "";
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .p-hazard-search-modal .modaal-container::before {
    top: -11vw;
    right: 0;
    width: 8.5vw;
    height: 8.5vw;
  }
}

.p-hazard-search-modal .modaal-close {
  display: none !important;
}

.p-hazard-search-list__item {
  position: relative;
  padding-left: 30px;
  font-size: 1.8rem;
}

.p-hazard-search-list__item::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 22px;
  height: 22px;
  content: "";
}

.p-hazard-search-list__item + .p-hazard-search-list__item {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .p-hazard-search-list__item + .p-hazard-search-list__item {
    margin-top: 10vw;
  }
}

.p-hazard-search-list__item--01::before {
  background: url(/assets/images/members/saigai/number-01.png) no-repeat 100%/contain;
}

.p-hazard-search-list__item--02::before {
  background: url(/assets/images/members/saigai/number-02.png) no-repeat 100%/contain;
}

.p-hazard-search-list__item--03::before {
  background: url(/assets/images/members/saigai/number-03.png) no-repeat 100%/contain;
}

.p-hazard-search-list__dropIcon {
  position: relative;
}

.p-hazard-search-list__dropIcon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: 17px;
  height: 17px;
  background: url(/assets/images/members/saigai/dropdown.svg) no-repeat 100%/contain;
  content: "";
}

.p-history__container {
  display: flex;
  letter-spacing: 0.72px;
}

@media screen and (max-width: 768px) {
  .p-history__container {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 768px) {
  .p-history-heading::before {
    top: 25% !important;
    transform: none !important;
  }
}

.p-history__souren {
  max-width: 58.241%;
  flex-basis: 58.241%;
}

@media screen and (max-width: 768px) {
  .p-history__souren {
    max-width: 64.723%;
    flex-basis: 64.723%;
  }
}

.p-history-world {
  max-width: 41.759%;
  flex-basis: 41.759%;
}

@media screen and (max-width: 768px) {
  .p-history-world {
    max-width: 35.277%;
    flex-basis: 35.277%;
  }
}

.p-history-table {
  display: flex;
  border-top: 1px solid #c6cad4;
  border-right: 1px solid #c6cad4;
  border-left: 1px solid #c6cad4;
}

.p-history-table--first > * {
  background: #164095 !important;
  color: #fff !important;
}

.p-history-table--last {
  border-bottom: 1px solid #c6cad4;
}

.p-history-table--noBorder {
  border-top: 0 !important;
}

.p-history-table--noBorder > * {
  padding-top: 0 !important;
}

.p-history-table--noBorder .p-history-table__year {
  text-align: right;
}

.p-history-table__year {
  max-width: 27.663%;
  flex-basis: 27.663%;
  padding: 10px 31px 10px 27px;
  background: #eff2f9;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .p-history-table__year {
    max-width: 44.206%;
    flex-basis: 44.206%;
    padding: 1.25vw 2.5vw 1.25vw 2.25vw;
  }
}

.p-history-table__yearFix {
  margin-left: 16px;
}

@media screen and (max-width: 768px) {
  .p-history-table__yearFix {
    margin-left: 2.25vw;
  }
}

@media screen and (min-width: 769px) {
  .p-history-table__yearFix--slightly {
    margin-left: 4px;
  }
}

.p-history-table__event {
  max-width: 72.337%;
  flex-basis: 72.337%;
  padding: 10px 16px;
  border-left: 1px solid #c6cad4;
}

@media screen and (max-width: 768px) {
  .p-history-table__event {
    max-width: 55.794%;
    flex-basis: 55.794%;
    padding: 1.25vw;
  }
}

.p-history-world {
  border-top: 1px solid #c6cad4;
}

.p-history-world__title {
  padding: 10px 16px;
  background: #164095 !important;
  color: #fff !important;
}

@media screen and (max-width: 768px) {
  .p-history-world__title {
    padding: 1.25vw 3.25vw 10.7vw 3.25vw;
  }
}

.p-history-world__list {
  padding: 40px 20px;
  border-top: 1px solid #c6cad4;
  border-right: 1px solid #c6cad4;
  border-bottom: 1px solid #c6cad4;
}

@media screen and (max-width: 768px) {
  .p-history-world__list {
    padding: 5.35vw 1.25vw;
  }
}

.p-history-world__item + .p-history-world__item {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .p-history-world__item + .p-history-world__item {
    margin-top: 2.5vw;
  }
}

@media screen and (min-width: 769px) {
  .p-history-world__item--mt-20 {
    margin-top: 20px !important;
  }
}

@media screen and (min-width: 769px) {
  .p-history-world__item--mt-30 {
    margin-top: 30px !important;
  }
}

@media screen and (min-width: 769px) {
  .p-history-world__item--mt-130 {
    margin-top: 121px !important;
  }
}

.p-members-pickup__background {
  padding: 30px 0;
}

@media screen and (max-width: 768px) {
  .p-members-pickup__background {
    padding: 10vw 0;
  }
}

.p-members-pickup-card__icon--01::before {
  background: url(/assets/images/members/pickup-01.png) no-repeat 100%/contain;
}

.p-members-pickup-card__icon--02::before {
  background: url(/assets/images/members/pickup-02.png) no-repeat 100%/contain;
}

.p-members-pickup-card__icon--03::before {
  background: url(/assets/images/members/pickup-03.png) no-repeat 100%/contain;
}

.p-members-pickup-card__icon--04::before {
  background: url(/assets/images/members/pickup-04.png) no-repeat 100%/contain;
}

.p-notfound__container {
  margin-top: 30px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-notfound__container {
    margin-top: 25vw;
  }
}

.p-notfound__heading {
  color: #164095;
  font-weight: 500;
  font-size: 6.4rem;
  line-height: 1;
  letter-spacing: 5.12px;
}

@media screen and (max-width: 768px) {
  .p-notfound__heading {
    font-size: 4.8rem;
    letter-spacing: 3.84px;
  }
}

.p-notfound__english {
  margin-top: 5px;
  color: #164095;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.42;
  letter-spacing: 0.96px;
}

@media screen and (max-width: 768px) {
  .p-notfound__english {
    margin-top: 0;
    font-size: 1.8rem;
    line-height: 1.89;
    letter-spacing: 0.72px;
  }
}

.p-notfound__text {
  margin-top: 40px;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 1.15px;
}

@media screen and (max-width: 768px) {
  .p-notfound__text {
    margin-top: 10vw;
    font-size: 1.8rem;
    line-height: 2;
    letter-spacing: 0.86px;
  }
}

.p-notfound-button {
  width: 244px;
  margin: 30px auto 0;
}

@media screen and (max-width: 768px) {
  .p-notfound-button {
    width: 55vw;
    margin: 15vw auto 0;
  }
}

.p-notfound-button__link {
  display: block;
  width: 100%;
  padding: 16px 0;
  border-radius: 28px;
  background: #164095;
  color: #fff;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.77px;
}

@media screen and (max-width: 768px) {
  .p-notfound-button__link {
    padding: 2.5vw 0;
  }
}

@media screen and (min-width: 769px) {
  .policy-system {
    padding-bottom: 60px !important;
  }
}

.policy-system a {
  transition: color .3s;
}

.policy-system a:hover {
  color: #4a74dc;
  transition: color .3s;
}

.policy-system__table {
  margin-top: 10px;
  font-size: 2.2rem;
}

.policy-system__table dl {
  padding: 20px 0 !important;
}

@media screen and (min-width: 769px) {
  .policy-system__table dt {
    max-width: 12.037% !important;
    flex-basis: 12.037% !important;
  }
}

@media screen and (min-width: 769px) {
  .policy-system__table dd {
    max-width: 87.963% !important;
    flex-basis: 87.963% !important;
    padding: 0 1.85% !important;
  }
}

p + .policy-system__table {
  margin-top: 32px;
}

.p-top-keyvisual {
  position: relative;
}

@media screen and (min-width: 769px) {
  .p-top-keyvisual _:-ms-fullscreen, :root .p-top-keyvisual {
    overflow-x: hidden;
  }
}

@media screen and (min-width: 769px) and (max-width: 1340px) {
  .p-top-keyvisual _:-ms-fullscreen, :root .p-top-keyvisual {
    min-width: 1340px;
  }
}

.p-top-keyvisual__slideItem {
  height: 660px;
}

@media screen and (max-width: 768px) {
  .p-top-keyvisual__slideItem {
    height: 80vw;
  }
}

.p-top-keyvisual__slideItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.p-top-keyvisual__heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #fff;
  font-weight: bold;
  font-size: 5.2rem;
  font-family: 'Noto Serif JP';
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-top-keyvisual__heading {
    font-size: 2.4rem;
  }
}

.p-top-keyvisual__heading--frontPage {
  text-shadow: 3px 3px 3px #333;
}

@media screen and (max-width: 768px) {
  .p-top-keyvisual__heading--frontPage {
    margin-top: 6.4vw;
  }
}

.p-top-keyvisual__englishText {
  display: block;
  font-size: 5.8rem;
}

@media screen and (max-width: 768px) {
  .p-top-keyvisual__englishText {
    font-size: 2.4rem;
  }
}

.p-top-keyvisual__englishText--small {
  font-size: 3.8rem;
}

@media screen and (max-width: 768px) {
  .p-top-keyvisual__englishText--small {
    font-size: 1.8rem;
  }
}

.p-top-news {
  padding-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .p-top-news {
    padding-bottom: 10vw;
  }
}

.p-top-news__heading {
  margin-bottom: 40px !important;
}

@media screen and (max-width: 768px) {
  .p-top-news__heading {
    margin-bottom: 5vw !important;
  }
}

.p-top-news__container {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .p-top-news__container {
    display: block;
  }
}

.p-top-news__content {
  max-width: 68.518%;
  flex-basis: 68.518%;
}

@media screen and (max-width: 768px) {
  .p-top-news__content {
    max-width: 100%;
    flex-basis: 100%;
  }
}

.p-top-news__facebook {
  max-width: 25.926%;
  flex-basis: 25.926%;
  height: 500px;
}

@media screen and (max-width: 768px) {
  .p-top-news__facebook {
    max-width: 100%;
    flex-basis: 100%;
    height: 70vw;
    margin-top: 7.5vw;
  }
}

@media screen and (max-width: 768px) {
  .p-top-news__facebook .fb-page iframe {
    height: 70vw !important;
  }
}

.p-top-news-changer {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .p-top-news-changer {
    flex-wrap: wrap;
  }
}

.p-top-news-changer__tab {
  max-width: 22.973%;
  flex-basis: 22.973%;
}

@media screen and (max-width: 768px) {
  .p-top-news-changer__tab {
    max-width: 47.22%;
    flex-basis: 47.22%;
  }
}

@media screen and (max-width: 768px) {
  .p-top-news-changer__tab:nth-of-type(n+3) {
    margin-top: 5vw;
  }
}

.p-top-news-changer__genre {
  display: block;
  width: 100%;
  padding: 7px 0 8px;
  border-radius: 4px;
  background: #fff;
  font-weight: bold;
  letter-spacing: 0.77px;
  text-align: center;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .p-top-news-changer__genre {
    padding: 2.5vw 0;
    font-size: 1.6rem;
  }
}

.p-top-news-changer__genre _:-ms-fullscreen, :root .p-top-news-changer__genre {
  padding: 11px 0 4px;
}

.p-top-news-changer__genre.is-selected {
  color: #fff;
}

.p-top-news-changer__genre--navy {
  border: 1px solid #164095;
  color: #164095;
}

.p-top-news-changer__genre--navy.is-selected {
  background: #164095;
}

.p-top-news-changer__genre--blue {
  border: 1px solid #4a74dc;
  color: #4a74dc;
}

.p-top-news-changer__genre--blue.is-selected {
  background: #4a74dc;
}

.p-top-news-changer__genre--green {
  border: 1px solid #28afa1;
  color: #28afa1;
}

.p-top-news-changer__genre--green.is-selected {
  background: #28afa1;
}

.p-top-news-changer__genre--yellow {
  border: 1px solid #fba627;
  color: #fba627;
}

.p-top-news-changer__genre--yellow.is-selected {
  background: #fba627;
}

.p-top-news__tableArea {
  margin-top: 40px;
  border-top: 1px solid #e0e4ec;
}

@media screen and (max-width: 768px) {
  .p-top-news__tableArea {
    margin-top: 5vw;
  }
}

.p-top-news-table {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #e0e4ec;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  .p-top-news-table {
    display: block;
    padding: 5vw 0;
  }
}

.p-top-news-table.is-hidden {
  display: none;
}

.p-top-news-table-info {
  display: flex;
  max-width: 32.433%;
  flex-basis: 32.433%;
  font-weight: bold;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .p-top-news-table-info {
    max-width: 100%;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.p-top-news-table-info__date {
  max-width: 43.75%;
  flex-basis: 43.75%;
}

@media screen and (max-width: 768px) {
  .p-top-news-table-info__date {
    max-width: 26.389%;
    flex-basis: 26.389%;
    font-size: 1.6rem;
  }
}

.p-top-news-table-info__label {
  max-width: 56.25%;
  flex-basis: 56.25%;
  padding: 4px 0 5px;
  text-align: center;
}

.p-top-news-table-info__label _:-ms-fullscreen, :root .p-top-news-table-info__label {
  padding: 7px 0 2px;
}

@media screen and (max-width: 768px) {
  .p-top-news-table-info__label {
    max-width: 36.11%;
    flex-basis: 36.11%;
    margin-left: 5vw;
    padding: 1vw;
  }
}

.p-top-news-table-info__label--blue {
  background: #4a74dc;
}

.p-top-news-table-info__label--green {
  background: #28afa1;
}

.p-top-news-table-info__label--yellow {
  background: #fba627;
}

.p-top-news-table-info__link {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 1.3rem;
}

.p-top-news-table__text {
  max-width: 67.567%;
  flex-basis: 67.567%;
  padding: 0 2.7%;
}

@media screen and (max-width: 768px) {
  .p-top-news-table__text {
    max-width: 100%;
    flex-basis: 100%;
    padding: 2.5vw 0 0;
    font-size: 1.6rem;
  }
}

.p-top-news-button {
  width: 244px;
  margin: 40px auto 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-top-news-button {
    width: 55vw;
    margin: 10vw auto 0;
  }
}

.p-top-news-button__link {
  display: block;
  width: 100%;
  padding: 16px 0;
  border-radius: 28px;
  background: #164095;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .p-top-news-button__link {
    padding: 2.5vw 0;
    border-radius: 7vw;
    font-size: 1.6rem;
  }
}

.p-top-pickup__background {
  padding: 30px 0;
  background: url(/assets/images/top/pickup-background.jpg) no-repeat 100%/cover;
}

@media screen and (max-width: 768px) {
  .p-top-pickup__background {
    padding: 10vw 0;
    background: url(/assets/images/top/pickup-background-sp.jpg) no-repeat 100%/cover;
  }
}

.p-top-pickup__heading {
  margin-bottom: 40px !important;
  color: #fff !important;
}

@media screen and (max-width: 768px) {
  .p-top-pickup__heading {
    margin-top: 0 !important;
    margin-bottom: 5vw !important;
  }
}

.p-top-pickup__heading::before {
  background: #fff !important;
}

.p-top-pickup-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card {
    display: block;
  }
}

@media screen and (min-width: 769px) {
  .p-top-pickup-card--members {
    justify-content: center;
  }
}

@media screen and (min-width: 769px) {
  .p-top-pickup-card--members .p-top-pickup-card__item {
    max-width: 39.0625%;
    flex-basis: 39.0625%;
    margin: 0 10px;
    padding: 20px 0;
  }
}

@media screen and (min-width: 769px) {
  .p-top-pickup-card--members .p-top-pickup-card__item:nth-of-type(n+3) {
    margin-top: 20px;
  }
}

@media screen and (min-width: 769px) {
  .p-top-pickup-card--members .p-top-pickup-card__icon {
    padding-top: 70px;
  }
}

@media screen and (min-width: 769px) {
  .p-top-pickup-card--members .p-top-pickup-card-button {
    margin-top: 20px;
  }
}

.p-top-pickup-card__item {
  max-width: 48.148%;
  flex-basis: 48.148%;
  padding: 40px 0;
  border: 1px solid #e0e4ec;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card__item {
    max-width: 100%;
    flex-basis: 100%;
    padding: 7.5vw 10vw;
    border-radius: 2vw;
  }
}

.p-top-pickup-card__item:nth-of-type(n+3) {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card__item + .p-top-pickup-card__item {
    margin-top: 5vw;
  }
}

.p-top-pickup-card__title {
  color: #4a74dc;
  font-weight: bold;
  font-size: 2.8rem;
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card__title {
    font-size: 2.4rem;
  }
}

.p-top-pickup-card__icon {
  display: inline-block;
  position: relative;
  padding-top: 90px;
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card__icon {
    padding-top: 20vw;
  }
}

.p-top-pickup-card__icon::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  content: "";
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card__icon::before {
    width: 15vw;
    height: 15vw;
  }
}

.p-top-pickup-card__text {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card__text {
    margin-top: 5vw;
    font-size: 1.6rem;
    text-align: left;
  }
}

.p-top-pickup-card-button {
  width: 244px;
  margin: 40px auto 0;
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card-button {
    width: 55vw;
    margin: 7.5vw auto 0;
  }
}

.p-top-pickup-card-button__link {
  display: block;
  width: 100%;
  padding: 14px 0 15px;
  border-radius: 50px;
  background: #164095;
  color: #fff;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card-button__link {
    padding: 2.5vw 0;
    font-size: 1.6rem;
  }
}

.p-top-banner__background {
  padding: 30px 0;
  background: #eff2f9;
}

@media screen and (max-width: 768px) {
  .p-top-banner__background {
    margin-bottom: 15vw;
    padding: 7.5vw 0;
  }
}

.p-top-banner-card {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  .p-top-banner-card {
    justify-content: space-between;
  }
}

.p-top-banner-card__item {
  max-width: 23.61%;
  flex-basis: 23.61%;
  margin-right: 1.85%;
  border-radius: 4px;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .p-top-banner-card__item {
    max-width: 47.22%;
    flex-basis: 47.22%;
    margin-right: 0;
  }
}

@media screen and (min-width: 769px) {
  .p-top-banner-card__item:nth-of-type(4n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 769px) {
  .p-top-banner-card__item:nth-of-type(n+5) {
    margin-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .p-top-banner-card__item:nth-of-type(n+3) {
    margin-top: 5vw;
  }
}

.p-top-banner-card__link {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 30px 0;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .p-top-banner-card__link {
    padding: 6.25vw 3.75vw;
  }
}

.p-top-pickup-card__icon--01::before {
  background: url(/assets/images/top/pickup-01.png?change-name=2507) no-repeat 100%/contain;
}

.p-top-pickup-card__icon--02::before {
  background: url(/assets/images/top/pickup-02.png?change-name=2507) no-repeat 100%/contain;
}

.p-top-pickup-card__icon--03::before {
  background: url(/assets/images/top/pickup-03.png?change-name=2507) no-repeat 100%/contain;
}

.p-top-pickup-card__icon--04::before {
  background: url(/assets/images/top/pickup-04.png?change-name=2507) no-repeat 100%/contain;
}

.p-top-pickup-card__icon--05::before {
  background: url(/assets/images/top/pickup-05.png?change-name=2507) no-repeat 100%/contain;
}

.p-top-pickup-card__icon--06::before {
  background: url(/assets/images/top/pickup-06.png?change-name=2507) no-repeat 100%/contain;
}

.p-top-pickup-card__icon--06::before {
  width: 140px;
}

@media screen and (max-width: 768px) {
  .p-top-pickup-card__icon--06::before {
    width: 35vw;
  }
}

/*! =========================
  WordPress
========================= */
/*
---
name: WPテンプレートA テキストエリア
category:
  - wp
  - wp/A
  - wp/A/textarea
---

`:empty`　display: none;

```html
<div class="wp-c-a-textarea">
  <p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
  <p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
</div>
```
*/
.wp-c-a-textarea {
  margin-top: 60px;
}

.wp-c-a-textarea p {
  letter-spacing: 0.64px;
}

.wp-c-a-textarea p:empty {
  display: none;
}

.wp-c-a-textarea p + p {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .wp-c-a-textarea p + p {
    margin-top: 7.5vw;
  }
}

.wp-c-a-textarea a {
  color: #36f;
}

/*
---
name: WPテンプレートA 画像エリア
category:
  - wp
  - wp/A
  - wp/A/photoarea
---

画像が1枚だけの場合、4枚以上の場合も想定し各レイアウトで中央寄せとなるよう構成。

`--only` モディファイアで、単一画像を中央配置し max-width: 1080px; 以内で表示

```html
<div class="wp-c-a-photoarea">
  <figure>
    <img src="/assets/images/_dummy-wp-a-01.png" alt="キャプションです。">
    <figcaption>キャプションです。</figcaption>
  </figure>
  <figure>
    <img src="/assets/images/_dummy-wp-a-01.png" alt="キャプションです。キャプションです。キャプションです。キャプションです。キャプションです。">
    <figcaption>キャプションです。キャプションです。キャプションです。キャプションです。キャプションです。</figcaption>
  </figure>
  <figure>
    <img src="/assets/images/_dummy-wp-a-01.png" alt="キャプションです。">
    <figcaption>キャプションです。</figcaption>
  </figure>
  <figure>
    <img src="/assets/images/_dummy-wp-a-01.png" alt="キャプションです。">
    <figcaption>キャプションです。</figcaption>
  </figure>
  <figure>
    <img src="/assets/images/_dummy-wp-a-01.png" alt="キャプションです。">
    <figcaption>キャプションです。</figcaption>
  </figure>
</div>
<div class="wp-c-a-photoarea--only">
  <figure>
    <img src="http://placehold.jp/50/333333/ffffff/800x500.png?text=800%20x%20500" alt="キャプションです。">
    <figcaption>キャプションです。</figcaption>
  </figure>
</div>
```
*/
.wp-c-a-photoarea, .wp-c-a-photoarea--only {
  display: flex;
  margin-top: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .wp-c-a-photoarea, .wp-c-a-photoarea--only {
    margin-top: 15vw;
  }
}

.wp-c-a-photoarea--only figure {
  max-width: 100% !important;
  flex-basis: 100% !important;
  margin-left: 0;
  text-align: center;
}

.wp-c-a-photoarea figure, .wp-c-a-photoarea--only figure {
  max-width: 31.48%;
  flex-basis: 31.48%;
  margin-left: 2.77%;
}

@media screen and (max-width: 768px) {
  .wp-c-a-photoarea figure, .wp-c-a-photoarea--only figure {
    max-width: 100%;
    flex-basis: 100%;
    margin-top: 7.5vw;
    margin-left: 0;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-a-photoarea figure:first-of-type, .wp-c-a-photoarea--only figure:first-of-type {
    margin-top: 0;
  }
}

.wp-c-a-photoarea figure:only-child, .wp-c-a-photoarea--only figure:only-child, .wp-c-a-photoarea figure:first-of-type, .wp-c-a-photoarea--only figure:first-of-type, .wp-c-a-photoarea figure:nth-of-type(4n), .wp-c-a-photoarea--only figure:nth-of-type(4n) {
  margin-left: 0;
}

.wp-c-a-photoarea figure:nth-of-type(n+4), .wp-c-a-photoarea--only figure:nth-of-type(n+4) {
  margin-top: 30px;
}

.wp-c-a-photoarea figure img, .wp-c-a-photoarea--only figure img {
  border-radius: 4px;
}

.wp-c-a-photoarea figcaption, .wp-c-a-photoarea--only figcaption {
  margin-top: 8px;
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: 0.56px;
}

@media screen and (max-width: 768px) {
  .wp-c-a-photoarea figcaption, .wp-c-a-photoarea--only figcaption {
    margin-top: 2.5vw;
  }
}

/*
---
name: WPテンプレートA 画像と文章が入り混じったエリア
category:
  - wp
  - wp/A
  - wp/A/combo
---

`--photo-first`　モディファイアによって "order" class により制御（画像を左側に表示。SPではhtml上で先に記述されているものが上側に表示される）

`--text-first`　モディファイアによって "order" class により制御（文章を左側に表示。SPではhtml上で先に記述されているものが上側に表示される）

`:empty`　説明文のpタグに付与　display: none;

```html
<div class="wp-c-a-combo--photo-first">
  <figure>
    <img src="/assets/images/_dummy-wp-a-02.png" alt="キャプションです。キャプションです。キャプションです。キャプションです。キャプションです。">
    <figcaption>キャプションです。キャプションです。キャプションです。キャプションです。キャプションです。</figcaption>
  </figure>
  <div>
    <p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
    <p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
  </div>
</div>
<div class="wp-c-a-combo--text-first">
  <figure>
    <img src="/assets/images/_dummy-wp-a-02.png" alt="キャプションです。キャプションです。キャプションです。キャプションです。キャプションです。">
    <figcaption>キャプションです。キャプションです。キャプションです。キャプションです。キャプションです。</figcaption>
  </figure>
  <div>
    <p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
    <p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
  </div>
</div>
```
*/
.wp-c-a-combo, .wp-c-a-combo--photo-first, .wp-c-a-combo--text-first {
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .wp-c-a-combo, .wp-c-a-combo--photo-first, .wp-c-a-combo--text-first {
    display: block;
    margin-top: 15vw;
  }
}

.wp-c-a-combo--photo-first figure {
  order: 1;
}

.wp-c-a-combo--photo-first div {
  order: 2;
}

.wp-c-a-combo--text-first figure {
  order: 2;
}

.wp-c-a-combo--text-first div {
  order: 1;
}

.wp-c-a-combo figure, .wp-c-a-combo--photo-first figure, .wp-c-a-combo--text-first figure {
  max-width: 48.15%;
  flex-basis: 48.15%;
}

@media screen and (max-width: 768px) {
  .wp-c-a-combo figure, .wp-c-a-combo--photo-first figure, .wp-c-a-combo--text-first figure {
    max-width: 100%;
    flex-basis: 100%;
  }
}

.wp-c-a-combo figure img, .wp-c-a-combo--photo-first figure img, .wp-c-a-combo--text-first figure img {
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .wp-c-a-combo figure img, .wp-c-a-combo--photo-first figure img, .wp-c-a-combo--text-first figure img {
    width: 100%;
  }
}

.wp-c-a-combo figcaption, .wp-c-a-combo--photo-first figcaption, .wp-c-a-combo--text-first figcaption {
  margin-top: 8px;
  font-size: 1.6rem;
  letter-spacing: 0.56px;
}

@media screen and (max-width: 768px) {
  .wp-c-a-combo figcaption, .wp-c-a-combo--photo-first figcaption, .wp-c-a-combo--text-first figcaption {
    margin-top: 2.5vw;
  }
}

.wp-c-a-combo div, .wp-c-a-combo--photo-first div, .wp-c-a-combo--text-first div {
  max-width: 48.15%;
  flex-basis: 48.15%;
  letter-spacing: 0.64px;
}

@media screen and (max-width: 768px) {
  .wp-c-a-combo div, .wp-c-a-combo--photo-first div, .wp-c-a-combo--text-first div {
    max-width: 100%;
    flex-basis: 100%;
  }
}

.wp-c-a-combo div p:empty, .wp-c-a-combo--photo-first div p:empty, .wp-c-a-combo--text-first div p:empty {
  display: none;
}

.wp-c-a-combo div p + p, .wp-c-a-combo--photo-first div p + p, .wp-c-a-combo--text-first div p + p {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .wp-c-a-combo div p + p, .wp-c-a-combo--photo-first div p + p, .wp-c-a-combo--text-first div p + p {
    margin-top: 7.5vw;
  }
}

.wp-c-a-combo div p:empty + p, .wp-c-a-combo--photo-first div p:empty + p, .wp-c-a-combo--text-first div p:empty + p {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .wp-c-a-combo figure + div, .wp-c-a-combo--photo-first figure + div, .wp-c-a-combo--text-first figure + div, .wp-c-a-combo div + figure, .wp-c-a-combo--photo-first div + figure, .wp-c-a-combo--text-first div + figure {
    margin-top: 10vw;
  }
}

/*
---
name: WPテンプレートA テーブルレイアウト
category:
  - wp
  - wp/A
  - wp/A/table
tag:
  - table
---

```html
<div class="wp-c-a-table">
  <dl>
    <dt>ダミーテキスト</dt>
    <dd>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</dd>
  </dl>
  <dl>
    <dt>ダミーテキストダミーテキストダミーテキスト</dt>
    <dd>ダミーテキストです。ダミーテキストです。</dd>
  </dl>
</div>
```
*/
.wp-c-a-table {
  margin-top: 30px;
  border: 1px solid #c6cad4;
}

@media screen and (max-width: 768px) {
  .wp-c-a-table {
    margin-top: 15vw;
    border: 1px solid #e0e4ec;
  }
}

.wp-c-a-table dl {
  display: flex;
  border-top: 1px solid #c6cad4;
}

@media screen and (max-width: 768px) {
  .wp-c-a-table dl {
    display: block;
    border-top: 1px solid #e0e4ec;
  }
}

.wp-c-a-table dl:first-of-type {
  border-top: 0;
}

.wp-c-a-table dt {
  max-width: 20%;
  flex-basis: 20%;
  padding: 10px 20px;
  border-right: 1px solid #c6cad4;
  background: #eff2f9;
}

@media screen and (max-width: 768px) {
  .wp-c-a-table dt {
    max-width: 100%;
    flex-basis: 100%;
    padding: 7.5vw;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid #e0e4ec;
  }
}

.wp-c-a-table dd {
  max-width: 80%;
  flex-basis: 80%;
  padding: 10px 20px;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .wp-c-a-table dd {
    max-width: 100%;
    flex-basis: 100%;
    padding: 7.5vw;
  }
}

/*
---
name: WPテンプレートA 2カラムレイアウト
category:
  - wp
  - wp/A
  - wp/A/column
tag:
  - table
---

`wp-c-a-cols-table--lLast` と`wp-c-a-cols-table--lLast` に対してJSを適用することで、左右のカラムの高さが揃うようにしています（該当スクリプトは↓HTMLの下部に記載）。

```html
<div class="js-a-cols wp-c-a-cols">
  <div class="js-a-col-left wp-c-a-cols__col">
    <dl class="wp-c-a-cols-table">
      <dt class="wp-c-a-cols-table__name">ダミーテキストです。</dt>
      <dd class="wp-c-a-cols-table__data">ダミーテキストです。</dd>
    </dl>
    <dl class="wp-c-a-cols-table wp-c-a-cols-table--lLast">
      <dt class="wp-c-a-cols-table__name">ダミーテキストです。ダミーテキストです。</dt>
      <dd class="wp-c-a-cols-table__data">ダミーテキストです。</dd>
    </dl>
  </div>
  <div class="js-a-col-right wp-c-a-cols__col">
    <dl class="wp-c-a-cols-table">
      <dt class="wp-c-a-cols-table__name">ダミーテキストです。</dt>
      <dd class="wp-c-a-cols-table__data">ダミーテキストです。</dd>
    </dl>
    <dl class="wp-c-a-cols-table">
      <dt class="wp-c-a-cols-table__name">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</dt>
      <dd class="wp-c-a-cols-table__data">ダミーテキストです。</dd>
    </dl>
    <dl class="wp-c-a-cols-table wp-c-a-cols-table--rLast">
      <dt class="wp-c-a-cols-table__name">ダミーテキストです。</dt>
      <dd class="wp-c-a-cols-table__data">ダミーテキストです。</dd>
    </dl>
  </div>
</div>
```

適用しているJavaScript
```
$(function() {
  if ($(window).width() > 768) {
    var aCols = $(".js-a-cols");
    var aColLeft = aCols.children(".js-a-col-left");
    var aColRight = aCols.children(".js-a-col-right");

    if (aColLeft.height() > aColRight.height()) {
      var heightDiffA =
        aColLeft.height() -
        aColRight.children(":not(.wp-c-a-cols-table--rLast)").height();
      aColRight
        .children(".wp-c-a-cols-table--rLast")
        .css("height", heightDiffA);
    } else if (aColLeft.height() < aColRight.height()) {
      var heightDiffB =
        aColRight.height() -
        aColLeft.children(":not(.wp-c-a-cols-table--lLast)").height();
      aColLeft.children(".wp-c-a-cols-table--lLast").css("height", heightDiffB);
    } else {
      return;
    }
  }
});
```

*/
.wp-c-a-cols {
  margin-top: 30px;
  border: 1px solid #e0e4ec;
  font-size: 0;
}

@media screen and (max-width: 768px) {
  .wp-c-a-cols {
    margin-top: 10vw;
  }
}

.wp-c-a-cols__col {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}

@media screen and (max-width: 768px) {
  .wp-c-a-cols__col {
    display: block;
    width: 100%;
  }
}

.wp-c-a-cols__col:nth-of-type(2) {
  border-left: 1px solid #e0e4ec;
}

.wp-c-a-cols-table {
  display: flex;
  font-size: 1.8rem;
}

@media screen and (max-width: 768px) {
  .wp-c-a-cols-table {
    display: block;
  }
}

.wp-c-a-cols-table + .wp-c-a-cols-table {
  border-top: 1px solid #e0e4ec;
}

.wp-c-a-cols-table__name, .wp-c-a-cols-table__data {
  max-width: 50%;
  flex-basis: 50%;
  padding: 10px 20px;
}

@media screen and (max-width: 768px) {
  .wp-c-a-cols-table__name, .wp-c-a-cols-table__data {
    max-width: 100%;
    flex-basis: 100%;
    padding: 7.5vw;
  }
}

.wp-c-a-cols-table__name {
  background: #eff2f9;
}

.wp-c-a-cols-table__data {
  border-left: 1px solid #e0e4ec;
}

@media screen and (max-width: 768px) {
  .wp-c-a-cols-table__data {
    border-left: 0;
  }
}

/*
---
name: WPテンプレートA リスト
category:
  - wp
  - wp/A
  - wp/A/list
tag:
  - list
---

```html
<ul class="wp-c-a-list">
  <li>ダミーテキストです。</li>
  <li>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</li>
</ul>
```
*/
.wp-c-a-list {
  margin-top: 30px;
  padding: 20px 20px 20px 32px;
  border: 1px solid #c6cad4;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .wp-c-a-list {
    margin-top: 15vw;
    padding: 7.5vw 7.5vw 7.5vw 12.5vw;
    border: 1px solid #e0e4ec;
  }
}

.wp-c-a-list li {
  position: relative;
}

.wp-c-a-list li::before {
  position: absolute;
  top: -3px;
  left: -21px;
  color: #4a74dc;
  font-size: 2rem;
  content: "・";
}

@media screen and (max-width: 768px) {
  .wp-c-a-list li::before {
    top: -5px;
  }
}

.wp-c-a-list li + li {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .wp-c-a-list li + li {
    margin-top: 2.5vw;
  }
}

/*
---
name: WPテンプレートB 議員紹介
category:
  - wp
  - wp/B
  - wp/B/politician
---

各議員のカードとカードの間は `margin-top: 40px;`

`wp-c-b-politician-profile__label`

　`--blue` モディファイアで青背景色ラベル

`wp-c-b-politician-profile-table__name`

　width が Flex による％指定のため、styleguide では崩れが発生しています。

`wp-c-b-politician-profile-table__data li`　`:empty` display: none;

```html
<ul class="wp-c-b-politician">
  <li>
    <figure>
      <img src="/assets/images/_dummy-wp-b-01.png" alt="_dummy">
    </figure>
    <div class="wp-c-b-politician-profile">
      <span class="wp-c-b-politician-profile__label--blue">衆議院議員</span>
      <p class="wp-c-b-politician-profile__name">
        <span>ふるもと しんいちろう</span>古本 伸一郎
      </p>
      <dl class="wp-c-b-politician-profile-table">
        <dt class="wp-c-b-politician-profile-table__name">生年月日</dt>
        <dd class="wp-c-b-politician-profile-table__data">ダミーテキスト</dd>
      </dl>
      <dl class="wp-c-b-politician-profile-table">
        <dt class="wp-c-b-politician-profile-table__name">政党名</dt>
        <dd class="wp-c-b-politician-profile-table__data">ダミーテキスト</dd>
      </dl>
      <dl class="wp-c-b-politician-profile-table">
        <dt class="wp-c-b-politician-profile-table__name">選挙区</dt>
        <dd class="wp-c-b-politician-profile-table__data">ダミーテキスト</dd>
      </dl>
      <dl class="wp-c-b-politician-profile-table">
        <dt class="wp-c-b-politician-profile-table__name">役職（党内）</dt>
        <dd class="wp-c-b-politician-profile-table__data">
          <ul>
            <li>ダミーテキスト</li>
            <li>ダミーテキスト</li>
          </ul>
        </dd>
      </dl>
      <dl class="wp-c-b-politician-profile-table">
        <dt class="wp-c-b-politician-profile-table__name">役職（国会）</dt>
        <dd class="wp-c-b-politician-profile-table__data">
          <ul>
            <li>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</li>
            <li>ダミーテキストです。</li>
            <li>ダミーテキストです。ダミーテキストです。</li>
          </ul>
        </dd>
      </dl>
      <dl class="wp-c-b-politician-profile-table">
        <dt class="wp-c-b-politician-profile-table__name--website">公式HP</dt>
        <dd class="wp-c-b-politician-profile-table__data">
          <a href="" class="wp-c-b-politician-profile-table__link">_dummy</a>
        </dd>
      </dl>
    </div>
  </li>
</ul>
```
*/
.wp-c-b-politician {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician {
    margin-top: 17.5vw;
  }
}

.wp-c-b-politician > li {
  display: flex;
  padding: 20px;
  border: 1px solid #e0e4ec;
  border-radius: 8px;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician > li {
    display: block;
    padding: 10vw;
    border-radius: 4px;
  }
}

.wp-c-b-politician > li + li {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician > li + li {
    margin-top: 10vw;
  }
}

.wp-c-b-politician figure {
  max-width: 30%;
  flex-basis: 30%;
  margin-right: 3.7%;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician figure {
    max-width: 100%;
    flex-basis: 100%;
    margin-right: 0;
  }
}

.wp-c-b-politician-profile {
  max-width: 66%;
  flex-basis: 66%;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician-profile {
    max-width: 100%;
    flex-basis: 100%;
    margin-top: 5vw;
  }
}

.wp-c-b-politician-profile__label, .wp-c-b-politician-profile__label--blue {
  padding: 5px 15px;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.56px;
}

.wp-c-b-politician-profile__label--blue {
  background: #4a74dc;
}

.wp-c-b-politician-profile__name {
  margin-top: 20px;
  font-weight: bold;
  font-size: 3.6rem;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician-profile__name {
    margin-top: 4.5vw;
    margin-bottom: 6.25vw;
    font-size: 3.2rem;
  }
}

.wp-c-b-politician-profile__name span {
  display: block;
  margin-bottom: 15px;
  color: #80889e;
  font-weight: 500;
  font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician-profile__name span {
    margin-bottom: 2.5vw;
  }
}

.wp-c-b-politician-profile-table {
  display: flex;
  margin-top: 10px;
  font-weight: bold;
  letter-spacing: 0.64px;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician-profile-table {
    display: block;
    margin-top: 2.5vw;
  }
}

.wp-c-b-politician-profile-table__name, .wp-c-b-politician-profile-table__name--website {
  max-width: 17.2%;
  flex-basis: 17.2%;
  margin-right: 6.06%;
  color: #164095;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician-profile-table__name, .wp-c-b-politician-profile-table__name--website {
    max-width: 100%;
    flex-basis: 100%;
    margin-right: 0;
  }
}

.wp-c-b-politician-profile-table__name--website {
  position: relative;
  padding-left: 30px;
}

.wp-c-b-politician-profile-table__name--website::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 19px;
  height: 17px;
  transform: translateY(-40%);
  background: url(/assets/images/common/monitor.svg) no-repeat;
  content: "";
}

.wp-c-b-politician-profile-table__data {
  max-width: 73.76%;
  flex-basis: 73.76%;
}

@media screen and (max-width: 768px) {
  .wp-c-b-politician-profile-table__data {
    max-width: 100%;
    flex-basis: 100%;
  }
}

.wp-c-b-politician-profile-table__data li:empty {
  display: none;
}

.wp-c-b-politician-profile-table__link {
  color: #4a74dc;
}

/*
---
name: WP共通 パンくずリスト
category:
  - wp
  - wp/共通
  - wp/共通/breadcrumb
tag:
  - breadcrumb
---

```html
<ol class="wp-c-breadcrumb">
  <li class="wp-c-breadcrumb__item">
    <a href="/" class="wp-c-breadcrumb__link--home"></a>
  </li>
  <li class="wp-c-breadcrumb__item">
    <a href="" class="wp-c-breadcrumb__link">ダミーテキスト</a>
  </li>
  <li class="wp-c-breadcrumb__item">
    <a href="" class="wp-c-breadcrumb__link">ダミーテキスト</a>
  </li>
</ol>
```
*/
.wp-c-breadcrumb {
  display: flex;
  padding: 10px 40px 5px;
  font-size: 1.4rem;
  line-height: 1;
  justify-content: flex-end;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .wp-c-breadcrumb {
    display: none;
  }
}

.wp-c-breadcrumb__item {
  position: relative;
}

.wp-c-breadcrumb__item:not(:first-of-type)::before {
  position: absolute;
  top: 50%;
  left: -21px;
  transform: translateY(-50%);
  width: 16px;
  height: 1px;
  background: #333;
  content: "";
}

.wp-c-breadcrumb__item + .wp-c-breadcrumb__item {
  margin-left: 29px;
}

.wp-c-breadcrumb__link, .wp-c-breadcrumb__link--home {
  display: block;
  position: relative;
  transition: .3s;
}

.wp-c-breadcrumb__link:hover, .wp-c-breadcrumb__link--home:hover {
  color: #4a74dc;
  transition: .3s;
}

.wp-c-breadcrumb__link--home {
  padding: 7px 7px 6px;
}

.wp-c-breadcrumb__link--home::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 12px;
  transform: translateY(-50%);
  background: url(/assets/images/common/breadcrumb.svg) no-repeat center/cover;
  transition: inherit;
  content: "";
}

.wp-c-breadcrumb__link--home:hover::before {
  background: url(/assets/images/common/breadcrumb-blue.svg) no-repeat center/cover;
}

.wp-c-c-note {
  margin-bottom: 10px;
  font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
  .wp-c-c-note {
    margin-bottom: 2.5vw;
  }
}

/*
---
name: WPテンプレートC カード型コンテンツエリア
category:
  - wp
  - wp/C
  - wp/C/cardarea
---

各画像の左上、右上に `border-radius: 8px;`

`wp-c-c-cardarea-info-head__label`　モディファイアによって背景色を変更

　中央委員会　`--navy`: #183377　　大会　`--blue`: #4a74dc

カードをクリックでPDFを別タブで開く。

```html
<div class="wp-c-c-cardarea">
  <ol class="wp-c-c-cardarea-list">
    <li class="wp-c-c-cardarea-list__item">
      <a href="/assets/pdf/_dummy.pdf" target="_blank" class="wp-c-c-cardarea-list__link">
        <figure>
          <img src="/assets/images/_dummy-wp-c-01.png" alt="_dummy">
        </figure>
        <div class="wp-c-c-cardarea-info">
          <div class="wp-c-c-cardarea-info-head">
            <div class="wp-c-c-cardarea-info-head__label--navy">中央委員会</div>
            <time datetime="YYYY.MM.DD" class="wp-c-c-cardarea-info-head__date">2019.10.01</time>
          </div>
          <p class="wp-c-c-cardarea-info__text">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
        </div>
      </a>
    </li>
    <li class="wp-c-c-cardarea-list__item">
      <a href="/assets/pdf/_dummy.pdf" target="_blank" class="wp-c-c-cardarea-list__link">
        <figure>
          <img src="/assets/images/_dummy-wp-c-01.png" alt="_dummy">
        </figure>
        <div class="wp-c-c-cardarea-info">
          <div class="wp-c-c-cardarea-info-head">
            <div class="wp-c-c-cardarea-info-head__label--blue">大会</div>
            <time datetime="YYYY.MM.DD" class="wp-c-c-cardarea-info-head__date">2019.10.01</time>
          </div>
          <p class="wp-c-c-cardarea-info__text">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
        </div>
      </a>
    </li>
    <li class="wp-c-c-cardarea-list__item">
      <a href="/assets/pdf/_dummy.pdf" target="_blank" class="wp-c-c-cardarea-list__link">
        <figure>
          <img src="/assets/images/_dummy-wp-c-01.png" alt="_dummy">
        </figure>
        <div class="wp-c-c-cardarea-info">
          <div class="wp-c-c-cardarea-info-head">
            <div class="wp-c-c-cardarea-info-head__label--navy">中央委員会</div>
            <time datetime="YYYY.MM.DD" class="wp-c-c-cardarea-info-head__date">2019.10.01</time>
          </div>
          <p class="wp-c-c-cardarea-info__text">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
        </div>
      </a>
    </li>
  </ol>
</div>
```
*/
.wp-c-c-cardarea-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .wp-c-c-cardarea-list {
    display: block;
  }
}

.wp-c-c-cardarea-list__item {
  max-width: 48.15%;
  flex-basis: 48.15%;
  border: 1px solid #e0e4ec;
  border-radius: 8px;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .wp-c-c-cardarea-list__item {
    max-width: 100%;
    flex-basis: 100%;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-c-cardarea-list__item:nth-of-type(2) {
    margin-top: 10vw;
  }
}

.wp-c-c-cardarea-list__item:nth-of-type(n+3) {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .wp-c-c-cardarea-list__item:nth-of-type(n+3) {
    margin-top: 10vw;
  }
}

.wp-c-c-cardarea-list__item img {
  border-radius: 8px 8px 0 0;
}

.wp-c-c-cardarea-list__link {
  display: block;
  width: 100%;
}

.wp-c-c-cardarea-info {
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .wp-c-c-cardarea-info {
    padding: 7.5vw 5vw 10vw;
  }
}

.wp-c-c-cardarea-info-head {
  display: flex;
  justify-content: space-between;
}

.wp-c-c-cardarea-info-head__label, .wp-c-c-cardarea-info-head__label--navy, .wp-c-c-cardarea-info-head__label--blue {
  width: 105px;
  padding: 3px 0;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.71;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .wp-c-c-cardarea-info-head__label, .wp-c-c-cardarea-info-head__label--navy, .wp-c-c-cardarea-info-head__label--blue {
    width: 26.25vw;
  }
}

.wp-c-c-cardarea-info-head__label--navy {
  background: #164095;
}

.wp-c-c-cardarea-info-head__label--blue {
  background: #4a74dc;
}

.wp-c-c-cardarea-info-head__date {
  color: #80889e;
  line-height: 1.71;
}

.wp-c-c-cardarea-info__text {
  margin-top: 20px;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.4;
  letter-spacing: 1.34px;
}

@media screen and (max-width: 768px) {
  .wp-c-c-cardarea-info__text {
    margin-top: 5vw;
    font-size: 2.4rem;
  }
}

.wp-c-container {
  padding-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .wp-c-container {
    padding-bottom: 15vw;
  }
}

/*
---
name: WPテンプレートD アップロードしたPDFを一覧で表示
category:
  - wp
  - wp/D
  - wp/D/filearea
tag:
  - news
  - list
---

クリックでPDFを別タブで開く。<br>
dd要素に`span`が付与されることでPDFアイコンを表示（`class="no-icon"`によりPDFアイコンを非表示）

```html
<div class="wp-c-d-filearea">
  <a href="/assets/pdf/_dummy.pdf" target="_blank">
    <dl>
      <dt><time datetime="YYYY.MM.DD">2019.10.02</time></dt>
      <dd><span class="no-icon">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</span></dd>
    </dl>
  </a>
  <a href="/assets/pdf/_dummy.pdf" target="_blank">
    <dl>
      <dt><time datetime="YYYY.MM.DD">2019.10.01</time></dt>
      <dd><span>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</span></dd>
    </dl>
  </a>
</div>
```
*/
.wp-c-d-filearea {
  border-top: 1px solid #e0e4ec;
}

.wp-c-d-filearea > a {
  display: block;
  width: 100%;
}

.wp-c-d-filearea dl {
  display: flex;
  padding: 10px 0;
}

@media screen and (max-width: 768px) {
  .wp-c-d-filearea dl {
    display: block;
    padding: 7.5vw 0;
  }
}

.wp-c-d-filearea dl:last-of-type {
  border-bottom: 1px solid #e0e4ec;
}

.wp-c-d-filearea dt {
  display: flex;
  max-width: 10.185%;
  flex-basis: 10.185%;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .wp-c-d-filearea dt {
    max-width: 100%;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.wp-c-d-filearea dt time {
  width: 100%;
  font-weight: bold;
  letter-spacing: 0.64px;
}

.wp-c-d-filearea dd {
  max-width: 89.815%;
  flex-basis: 89.815%;
  padding: 0 1.852%;
}

@media screen and (max-width: 768px) {
  .wp-c-d-filearea dd {
    max-width: 100%;
    flex-basis: 100%;
    margin-top: 2.5vw;
    padding: 0 6.5vw 0 0;
  }
}

.wp-c-d-filearea dd span {
  position: relative;
}

.wp-c-d-filearea dd span::after {
  position: absolute;
  bottom: 1px;
  right: -22px;
  width: 17px;
  height: 21px;
  background: url(/assets/images/common/pdf.svg) no-repeat;
  content: "";
}

.wp-c-d-filearea dd span.no-icon::after {
  display: none;
}

/*
---
name: WPテンプレートD 下部に設置する年度切り替えボタン
category:
  - wp
  - wp/D
  - wp/D/yearchanger
tag:
  - news
  - button
---

各ボタンをモディファイア`--prev`, `--next`により管理。

`--prev`で左側に矢印配置、`--next`で右側に矢印配置になります。

ボタンが1つのみの場合は、左側配置から中央配置に変更になりました。

```html
<div class="wp-c-d-yearchanger">
  <div class="wp-c-d-yearchanger__changer--prev">
    <a href="">2018年度</a>
  </div>
  <div class="wp-c-d-yearchanger__changer--next">
    <a href="">2020年度</a>
  </div>
</div>
```
*/
.wp-c-d-yearchanger {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 769px) {
  .wp-c-d-yearchanger {
    width: 528px;
    margin: 30px auto 0;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-d-yearchanger {
    margin-top: 15vw;
  }
}

.wp-c-d-yearchanger__changer, .wp-c-d-yearchanger__changer--prev, .wp-c-d-yearchanger__changer--next {
  max-width: 46.212%;
  flex-basis: 46.212%;
}

@media screen and (max-width: 768px) {
  .wp-c-d-yearchanger__changer, .wp-c-d-yearchanger__changer--prev, .wp-c-d-yearchanger__changer--next {
    max-width: 53.125%;
    flex-basis: 53.125%;
  }
}

.wp-c-d-yearchanger__changer--prev a::after {
  left: 30px;
  background: url(/assets/images/yearchanger-prev.svg) no-repeat;
}

@media screen and (max-width: 768px) {
  .wp-c-d-yearchanger__changer--prev a::after {
    left: 5vw;
  }
}

.wp-c-d-yearchanger__changer--next a::after {
  right: 30px;
  background: url(/assets/images/yearchanger-next.svg) no-repeat;
}

@media screen and (max-width: 768px) {
  .wp-c-d-yearchanger__changer--next a::after {
    right: 5vw;
  }
}

.wp-c-d-yearchanger__changer + .wp-c-d-yearchanger__changer, .wp-c-d-yearchanger__changer--prev + .wp-c-d-yearchanger__changer, .wp-c-d-yearchanger__changer--next + .wp-c-d-yearchanger__changer, .wp-c-d-yearchanger__changer + .wp-c-d-yearchanger__changer--prev, .wp-c-d-yearchanger__changer--prev + .wp-c-d-yearchanger__changer--prev, .wp-c-d-yearchanger__changer--next + .wp-c-d-yearchanger__changer--prev, .wp-c-d-yearchanger__changer + .wp-c-d-yearchanger__changer--next, .wp-c-d-yearchanger__changer--prev + .wp-c-d-yearchanger__changer--next, .wp-c-d-yearchanger__changer--next + .wp-c-d-yearchanger__changer--next {
  margin-left: 7.576%;
}

@media screen and (max-width: 768px) {
  .wp-c-d-yearchanger__changer + .wp-c-d-yearchanger__changer, .wp-c-d-yearchanger__changer--prev + .wp-c-d-yearchanger__changer, .wp-c-d-yearchanger__changer--next + .wp-c-d-yearchanger__changer, .wp-c-d-yearchanger__changer + .wp-c-d-yearchanger__changer--prev, .wp-c-d-yearchanger__changer--prev + .wp-c-d-yearchanger__changer--prev, .wp-c-d-yearchanger__changer--next + .wp-c-d-yearchanger__changer--prev, .wp-c-d-yearchanger__changer + .wp-c-d-yearchanger__changer--next, .wp-c-d-yearchanger__changer--prev + .wp-c-d-yearchanger__changer--next, .wp-c-d-yearchanger__changer--next + .wp-c-d-yearchanger__changer--next {
    margin-left: 5.55%;
  }
}

.wp-c-d-yearchanger a {
  display: block;
  position: relative;
  width: 100%;
  padding: 12px 0;
  border-radius: 28px;
  color: #fff;
  background: #164095;
  font-weight: bold;
  text-align: center;
  transition: .4s;
}

@media screen and (max-width: 768px) {
  .wp-c-d-yearchanger a {
    padding: 2vw 0;
    border-radius: 23px;
    font-size: 1.4rem;
  }
}

.wp-c-d-yearchanger a::after {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 12px;
  transform: translateY(-50%);
  content: "";
}

/*
---
name: WPテンプレートDD トップページから遷移した際に表示されるニュース一覧
category:
  - wp
  - wp/DD
  - wp/DD/newsarea
tag:
  - news
  - table
---

`wp-c-d-newsarea-table__label`　モディファイアによって背景色を変更
<br>
　自動車総連諸活動　`--blue`: #4a74dc　　春季生活闘争　`--green`: #28afa1　　その他　`--yellow`: #fba627

<br>

`wp-c-d-newsarea-table__text`　子要素に`a`要素または`span`要素が入る。
<br>
　`a`要素クリックでPDFを別タブで開く。`a`要素が入った場合もアイコンはなし。

```html
<div class="wp-c-d-newsarea">
  <dl class="wp-c-d-newsarea-table">
    <dt class="wp-c-d-newsarea-table__info">
      <time datetime="YYYY.MM.DD" class="wp-c-d-newsarea-table__date">2019.10.02</time>
      <div class="wp-c-d-newsarea-table__label wp-c-d-newsarea-table__label--blue">自動車総連諸活動</div>
    </dt>
    <dd class="wp-c-d-newsarea-table__text">
      <a href="/assets/pdf/_dummy.pdf" target="_blank" class="wp-c-d-newsarea-table__link">
        ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
      </a>
    </dd>
  </dl>
  <dl class="wp-c-d-newsarea-table">
    <dt class="wp-c-d-newsarea-table__info">
      <time datetime="YYYY.MM.DD" class="wp-c-d-newsarea-table__date">2019.10.02</time>
      <div class="wp-c-d-newsarea-table__label wp-c-d-newsarea-table__label--green">春季生活闘争</div>
    </dt>
    <dd class="wp-c-d-newsarea-table__text">
      <span>
        ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
      </span>
    </dd>
  </dl>
  <dl class="wp-c-d-newsarea-table">
    <dt class="wp-c-d-newsarea-table__info">
      <time datetime="YYYY.MM.DD" class="wp-c-d-newsarea-table__date">2019.10.02</time>
      <div class="wp-c-d-newsarea-table__label wp-c-d-newsarea-table__label--yellow">その他</div>
    </dt>
    <dd class="wp-c-d-newsarea-table__text">
      <a href="/assets/pdf/_dummy.pdf" target="_blank" class="wp-c-d-newsarea-table__link">
        ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
      </a>
    </dd>
  </dl>
</div>
```
*/
.wp-c-d-newsarea {
  border-top: 1px solid #e0e4ec;
}

.wp-c-d-newsarea-table {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #e0e4ec;
}

@media screen and (max-width: 768px) {
  .wp-c-d-newsarea-table {
    display: block;
    padding: 3.75vw 0;
  }
}

.wp-c-d-newsarea-table__info {
  display: flex;
  max-width: 22.685%;
  flex-basis: 22.685%;
  padding-top: 2px;
  justify-content: space-between;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  .wp-c-d-newsarea-table__info {
    max-width: 100%;
    flex-basis: 100%;
    padding-top: 0;
    justify-content: flex-start;
    align-items: center;
  }
}

.wp-c-d-newsarea-table__date {
  max-width: 42.857%;
  flex-basis: 42.857%;
  font-weight: bold;
  letter-spacing: 0.72px;
}

@media screen and (max-width: 768px) {
  .wp-c-d-newsarea-table__date {
    max-width: 30%;
    flex-basis: 30%;
    margin-right: 3.75vw;
    font-size: 1.6rem;
  }
}

.wp-c-d-newsarea-table__label {
  max-width: 53.061%;
  flex-basis: 53.061%;
  padding: 4px 0 5px;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .wp-c-d-newsarea-table__label {
    max-width: 40%;
    flex-basis: 40%;
    padding: 1vw 0;
  }
}

.wp-c-d-newsarea-table__label--blue {
  background: #4a74dc;
}

.wp-c-d-newsarea-table__label--green {
  background: #28afa1;
}

.wp-c-d-newsarea-table__label--yellow {
  background: #fba627;
}

.wp-c-d-newsarea-table__text {
  max-width: 77.315%;
  flex-basis: 77.315%;
  padding: 0 1.85%;
}

@media screen and (max-width: 768px) {
  .wp-c-d-newsarea-table__text {
    max-width: 100%;
    flex-basis: 100%;
    margin-top: 2.5vw;
    padding: 0;
    font-size: 1.6rem;
  }
}

.wp-c-d-newsarea-table__text a, .wp-c-d-newsarea-table__text span {
  display: block;
  width: 100%;
}

/*
---
name: WPテンプレートE　container および inner
category:
  - wp
  - wp/E
  - wp/E/container
tag:
  - inner
---

inner に `--indented` モディファイア付与で `padding-left: 20px;`

```html
<section class="wp-c-e-container">
  <h3 class="wp-c-heading--secondary">募集期間（積立年金共済・医療共済共通）</h3>
  <div class="wp-c-e-container__inner--indented">
    <p>ダミーテキストです。</p>
  </div>
</section>
```
*/
.wp-c-e-container {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .wp-c-e-container {
    margin-top: 7.5vw;
  }
}

.wp-c-e-container__inner--indented {
  margin-left: 20px;
}

@media screen and (max-width: 768px) {
  .wp-c-e-container__inner--indented {
    margin-left: 0;
  }
}

/*
---
name: WPテンプレートE　青文字タイトル
category:
  - wp
  - wp/E
  - wp/E/heading
tag:
  - heading
---

ダイヤマークを疑似要素として付与

```html
<h4 class="wp-c-e__heading">積立年金共済のポイント・パンフレット</h4>
```
*/
.wp-c-e__heading {
  position: relative;
  margin: 20px 0;
  padding-left: 26px;
  color: #4a74dc;
  font-weight: bold;
  font-size: 2.2rem;
  letter-spacing: 1.34px;
}

@media screen and (max-width: 768px) {
  .wp-c-e__heading {
    margin: 7.5vw 0 5vw;
    padding-left: 6.5vw;
    font-size: 2rem;
  }
}

.wp-c-e__heading::before {
  position: absolute;
  top: 6px;
  left: 3px;
  width: 17px;
  height: 22px;
  background: url(/assets/images/common/diamond.svg) no-repeat 100%/contain;
  content: "";
}

@media screen and (max-width: 768px) {
  .wp-c-e__heading::before {
    top: 5px;
    left: 2px;
    width: 4.25vw;
    height: 5.5vw;
  }
}

/*
---
name: WPテンプレートE　資料ダウンロードエリア
category:
  - wp
  - wp/E
  - wp/E/list
tag:
  - list
---

`wp-c-e-list__icon` にモディファイア付与でアイコンを指定<br>
　`--pdf`：PDFアイコン　`--video`：動画アイコン

```html
<ul class="wp-c-e-list">
  <li class="wp-c-e-list__item">
    <a href="" target="_blank" class="wp-c-e-list__link">
      <span class="wp-c-e-list__icon--pdf">積立年金共済のポイントはこちら</span>
    </a>
  </li>
  <li class="wp-c-e-list__item">
    <a href="" target="_blank" class="wp-c-e-list__link">
      <span class="wp-c-e-list__icon--video">動画はこちら</span>
    </a>
  </li>
</ul>
```
*/
.wp-c-e-list {
  border-top: 1px solid #e0e4ec;
}

.wp-c-e-list__item {
  border-bottom: 1px solid #e0e4ec;
}

.wp-c-e-list__link {
  display: block;
  width: 100%;
  padding: 20px 50px 20px 20px;
}

@media screen and (max-width: 768px) {
  .wp-c-e-list__link {
    padding: 7.5vw 7.5vw 7.5vw 0;
  }
}

.wp-c-e-list__icon, .wp-c-e-list__icon--pdf, .wp-c-e-list__icon--video {
  position: relative;
}

.wp-c-e-list__icon::after, .wp-c-e-list__icon--pdf::after, .wp-c-e-list__icon--video::after {
  position: absolute;
  right: -26px;
  content: "";
}

@media screen and (max-width: 768px) {
  .wp-c-e-list__icon::after, .wp-c-e-list__icon--pdf::after, .wp-c-e-list__icon--video::after {
    right: -6.5vw;
  }
}

.wp-c-e-list__icon--pdf::after {
  bottom: 3px;
  width: 17px;
  height: 21px;
  background: url(/assets/images/common/download-pdf.svg) no-repeat 100%/contain;
}

@media screen and (max-width: 768px) {
  .wp-c-e-list__icon--pdf::after {
    width: 4.25vw;
    height: 5.25vw;
  }
}

.wp-c-e-list__icon--video::after {
  bottom: 4px;
  width: 18px;
  height: 18px;
  background: url(/assets/images/common/download-video.svg) no-repeat 100%/contain;
}

@media screen and (max-width: 768px) {
  .wp-c-e-list__icon--video::after {
    width: 4.5vw;
    height: 4.5vw;
  }
}

/*
---
name: WPテンプレートE　テキスト
category:
  - wp
  - wp/E
  - wp/E/text
---

```html
<p class="wp-c-e__text">
  （注）給付金請求書は加入コースごとに分かれています。各コースに該当する請求書を使用してください。<br>
  ※口座変更依頼書、個人番号（マイナンバー）申告書が必要な場合はお電話でお取り寄せください。
</p>
```
*/
.wp-c-e__text {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .wp-c-e__text {
    margin-top: 7.5vw;
  }
}

/*
---
name: WPテンプレートE　箱型エリア
category:
  - wp
  - wp/E
  - wp/E/box
---

内部のテキストにモディファイア `--bold` を付与で `font-weight: bold;`

```html
<div class="wp-c-e-box">
  <p class="wp-c-e-box__text--bold">＜お問い合わせ先＞</p>
  <p class="wp-c-e-box__text">・フリーダイヤル：0120-827-050</p>
  <p class="wp-c-e-box__text">明治安田生命・自動車総連担当</p>
  <p class="wp-c-e-box__text">（受付時間：9:00～17:00(土・日・祝日を除く)）</p>
</div>
```
*/
.wp-c-e-box {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #c6cad4;
}

@media screen and (max-width: 768px) {
  .wp-c-e-box {
    margin-top: 5vw;
    padding: 5vw;
  }
}

.wp-c-e-box__text, .wp-c-e-box__text--bold {
  letter-spacing: 0.86px;
}

.wp-c-e-box__text--bold {
  font-weight: bold;
}

.wp-c-e-download {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  .wp-c-e-download {
    justify-content: space-between;
  }
}

.wp-c-e-download li {
  max-width: 17.03%;
  flex-basis: 17.03%;
  margin-right: 3.7%;
}

@media screen and (max-width: 768px) {
  .wp-c-e-download li {
    max-width: 47.22%;
    flex-basis: 47.22%;
    margin-right: 0;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-e-download li:nth-of-type(5n) {
    margin-right: 0;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-e-download li:nth-of-type(n+3) {
    margin-top: 7.5vw;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-e-download li:nth-of-type(n+6) {
    margin-top: 40px;
  }
}

.wp-c-e-download li > p:first-of-type {
  margin-top: 5px;
  font-weight: bold;
  line-height: 1.5;
}

.wp-c-e-download li > p:nth-of-type(2) {
  margin-top: 5px;
  font-size: 1.4rem;
  line-height: 1.5;
}

.wp-c-e-download a {
  display: block;
  width: 100%;
  padding: 30px 67px;
  border: 1px solid #e0e4ec;
}

@media screen and (max-width: 768px) {
  .wp-c-e-download a {
    padding: 7.5vw 15vw;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-e-download a img {
    width: 12.5vw;
    height: 15.25vw;
  }
}

.wp-c-f-background {
  background: #eff2f9;
}

/*
---
name: WPテンプレートF 見出し
category:
  - wp
  - wp/F
  - wp/F/heading
tag:
  - heading
---

WP共通 大見出しと類似のものだが、SPにてデザイン・挙動が違うため別個のものとして扱う。

```html
<dt class="wp-c-f-heading">ダミーテキスト</dt>
```
*/
.wp-c-f-heading {
  position: relative;
  margin: 6px 0 12px;
  color: #164095;
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 1.5;
  letter-spacing: 1.92px;
}

@media screen and (max-width: 768px) {
  .wp-c-f-heading {
    margin: 0;
    font-size: 2.4rem;
    letter-spacing: 1.15px;
    line-height: 1.5;
  }
}

.wp-c-f-heading::before {
  position: absolute;
  top: 50%;
  left: -418px;
  transform: translateY(-50%);
  width: 400px;
  height: 1px;
  background: #164095;
  content: "";
}

@media screen and (max-width: 768px) {
  .wp-c-f-heading::before {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-f-heading::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 3vw;
    height: 3vw;
    border-top: 2px solid #4a74dc;
    border-right: 2px solid #4a74dc;
    transform: translateY(-50%) rotate(135deg);
    transition: .3s;
    content: "";
  }
}

/*
---
name: WPテンプレートF 各ジャンルのリンクを内包するコンテナ
category:
  - wp
  - wp/F
  - wp/F/linkarea
---

各コンテナ間の余白は `margin-top: 100px;`

```html
<dl class="wp-c-f-linkarea">
  <dt class="wp-c-f-heading">ダミーテキスト</dt>
  <dd>
    <ul>
      <li><a href="" target="_blank">ダミーテキスト</a></li>
      <li><a href="" target="_blank">ダミーテキストダミーテキストダミーテキストダミーテキスト</a></li>
      <li><a href="" target="_blank">ダミーテキスト</a></li>
      <li><a href="" target="_blank">ダミーテキスト</a></li>
      <li><a href="" target="_blank">ダミーテキスト</a></li>
      <li><a href="" target="_blank">ダミーテキスト</a></li>
      <li><a href="" target="_blank">ダミーテキスト</a></li>
    </ul>
  </dd>
</dl>
```
*/
@media screen and (max-width: 768px) {
  .wp-c-f-linkarea {
    padding: 5vw 0;
    border-bottom: 1px solid #e0e4ec;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-f-linkarea:first-of-type {
    margin-top: 10vw;
  }
}

.wp-c-f-linkarea + .wp-c-f-linkarea {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .wp-c-f-linkarea + .wp-c-f-linkarea {
    margin-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-f-linkarea.is-active .wp-c-f-heading::after {
    transform: translateY(-50%) rotate(-45deg);
    transition: .4s;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-f-linkarea dd {
    display: none;
  }
}

.wp-c-f-linkarea ul {
  display: flex;
  flex-wrap: wrap;
}

.wp-c-f-linkarea li {
  max-width: 32.092%;
  flex-basis: 32.092%;
  margin-right: 1.85%;
  border-radius: 4px;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .wp-c-f-linkarea li {
    max-width: 100%;
    flex-basis: 100%;
    margin-top: 5vw;
    margin-right: 0;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-f-linkarea li:nth-of-type(3n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-f-linkarea li:nth-of-type(n+4) {
    margin-top: 20px;
  }
}

.wp-c-f-linkarea a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px 10px 10px 40px;
  color: #4a74dc;
  line-height: 1.5;
}

.wp-c-f-linkarea a::before {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 19px;
  height: 17px;
  background: url(/assets/images/common/monitor.svg) no-repeat center/cover;
  content: "";
}

@media screen and (max-width: 768px) {
  .wp-c-f-linkarea a::before {
    top: 6.25vw;
    left: 5vw;
    width: 4.75vw;
    height: 4.3vw;
  }
}

/*
---
name: WPテンプレートG セクション
category:
  - wp
  - wp/G
  - wp/G/section
---

セクション間の余白を設定するためのクラス

```html
<section class="wp-c-g-section">
  <p>ダミーテキストです。</p>
</section>
<section class="wp-c-g-section">
  <p>ダミーテキストです。</p>
</section>
```
*/
.wp-c-g-section + .wp-c-g-section {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .wp-c-g-section + .wp-c-g-section {
    margin-top: 10vw;
  }
}

/*
---
name: WPテンプレートG 表形式リスト
category:
  - wp
  - wp/G
  - wp/G/list
---

`wp-c-g-list__link`　モディファイアによってアイコンを変更

　PDF　`--pdf`　　EXCEL　--excel`

リンクをクリックでPDFもしくはEXCELを別タブで開く。

```html
<section class="wp-c-g-section">
  <h2 class="wp-c-heading--secondary">組織基本調査</h2>
  <ol class="wp-c-g-list">
    <li class="wp-c-g-list__item">
      <a href="" target="_blank" class="wp-c-g-list__link--pdf">2019_組合別状況</a>
    </li>
    <li class="wp-c-g-list__item">
      <a href="" target="_blank" class="wp-c-g-list__link--pdf">第25回組織基本調査結果</a>
    </li>
    <li class="wp-c-g-list__item">
      <a href="" target="_blank" class="wp-c-g-list__link--excel">01_全トヨタ労連</a>
    </li>
  </ol>
</section>
```
*/
.wp-c-g-list {
  border-top: 1px solid #e0e4ec;
}

.wp-c-g-list__item {
  padding: 10px 20px;
  border-bottom: 1px solid #e0e4ec;
}

@media screen and (max-width: 768px) {
  .wp-c-g-list__item {
    padding: 7.5vw 0;
  }
}

.wp-c-g-list__link, .wp-c-g-list__link--pdf, .wp-c-g-list__link--excel {
  position: relative;
  padding-right: 30px;
}

@media screen and (max-width: 768px) {
  .wp-c-g-list__link, .wp-c-g-list__link--pdf, .wp-c-g-list__link--excel {
    padding-right: 7.5vw;
    font-size: 1.6rem;
  }
}

.wp-c-g-list__link::after, .wp-c-g-list__link--pdf::after, .wp-c-g-list__link--excel::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 17px;
  height: 21px;
  content: "";
}

@media screen and (max-width: 768px) {
  .wp-c-g-list__link::after, .wp-c-g-list__link--pdf::after, .wp-c-g-list__link--excel::after {
    width: 4.25vw;
    height: 5.25vw;
  }
}

.wp-c-g-list__link--pdf::after {
  background: url(/assets/images/common/download-pdf.svg) no-repeat 100%/contain;
}

.wp-c-g-list__link--excel::after {
  background: url(/assets/images/common/download-excel.svg) no-repeat 100%/contain;
}

/*
---
name: WPテンプレートH 委員会日時などを表示するテーブル
category:
  - wp
  - wp/H
  - wp/H/table
tag:
  - table
  - list
---

```html
<div class="wp-c-h-table"> 
  <dl>
    <dt>日時</dt>
    <dd>2019年 9月 5日（木）</dd>
  </dl>
  <dl>
    <dt>場所</dt>
    <dd>ホテルメルパルク東京</dd>
  </dl>
  <dl>
    <dt>ダミーテキスト</dt>
    <dd>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</dd>
  </dl>
</div>
```
*/
.wp-c-h-table {
  border: 1px solid #e0e4ec;
}

.wp-c-h-table dl {
  display: flex;
}

@media screen and (max-width: 768px) {
  .wp-c-h-table dl {
    display: block;
  }
}

.wp-c-h-table dl + dl {
  border-top: 1px solid #e0e4ec;
}

.wp-c-h-table dt {
  max-width: 10.47%;
  flex-basis: 10.47%;
  padding: 10px;
  border-right: 1px solid #e0e4ec;
  background: #eff2f9;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .wp-c-h-table dt {
    max-width: 100%;
    flex-basis: 100%;
    padding: 5vw 7.5vw;
    text-align: left;
  }
}

.wp-c-h-table dd {
  max-width: 89.5%;
  flex-basis: 89.5%;
  padding: 10px 20px;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .wp-c-h-table dd {
    max-width: 100%;
    flex-basis: 100%;
    padding: 5vw 7.5vw;
  }
}

@media screen and (max-width: 768px) {
  div + .wp-c-h-heading, ul + .wp-c-h-heading, ol + .wp-c-h-heading {
    margin-top: 10vw !important;
  }
}

/*
---
name: WPテンプレートH 資料ダウンロードエリア
category:
  - wp
  - wp/H
  - wp/H/downloadarea
---

余白間や「資料ダウンロード」ボタンの崩れが起こっているが、styleguide内のみ。

```html
<div class="wp-c-h-downloadarea">
  <dl>
    <dt>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</dt>
    <dd><a href="">資料ダウンロード</a></dd>
  </dl>
  <dl>
    <dt>ダミーテキスト</dt>
    <dd><a href="">資料ダウンロード</a></dd>
  </dl>
  <dl>
    <dt>ダミーテキスト</dt>
    <dd><a href="">資料ダウンロード</a></dd>
  </dl>
</div>
```
*/
h1 + .wp-c-h-downloadarea, h2 + .wp-c-h-downloadarea, h3 + .wp-c-h-downloadarea, h4 + .wp-c-h-downloadarea {
  margin-top: 0;
}

.wp-c-h-downloadarea {
  margin-top: 20px;
}

.wp-c-h-downloadarea dl {
  display: flex;
  padding: 10px 0;
  border-top: 1px solid #e0e4ec;
  background: #fff;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .wp-c-h-downloadarea dl {
    display: block;
    padding: 7.5vw 0;
  }
}

.wp-c-h-downloadarea dl:last-of-type {
  border-bottom: 1px solid #e0e4ec;
}

.wp-c-h-downloadarea dt {
  max-width: 81.48%;
  flex-basis: 81.48%;
}

@media screen and (max-width: 768px) {
  .wp-c-h-downloadarea dt {
    max-width: 100%;
    flex-basis: 100%;
  }
}

.wp-c-h-downloadarea dd {
  max-width: 15.83%;
  flex-basis: 15.83%;
}

@media screen and (max-width: 768px) {
  .wp-c-h-downloadarea dd {
    max-width: 100%;
    flex-basis: 100%;
    margin-top: 5vw;
  }
}

.wp-c-h-downloadarea dd a {
  display: block;
  position: relative;
  width: 100%;
  max-width: 171px;
  padding: 3px 20px;
  border-radius: 18px;
  background: #4a74dc;
  color: #fff;
  font-size: 1.4rem;
}

@media screen and (max-width: 768px) {
  .wp-c-h-downloadarea dd a {
    max-width: 42.75vw;
    margin: 0 auto;
    padding: 3px 5vw;
  }
}

.wp-c-h-downloadarea dd a::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 13px;
  transform: translateY(-50%);
  background: url(/assets/images/common/download-arrow.svg) no-repeat;
  content: "";
}

@media screen and (max-width: 768px) {
  .wp-c-h-downloadarea dd a::after {
    right: 5vw;
  }
}

/*
---
name: WP共通 大見出し
category:
  - wp
  - wp/共通
  - wp/共通/heading
tag:
  - heading
---

`::before`　疑似要素として左側に装飾あり。

```html
<h2 class="wp-c-heading--primary">大タイトルが入ります</h2>
```
*/
/*
---
name: WP共通 中見出し
category:
  - wp
  - wp/共通
  - wp/共通/heading
tag:
  - heading
---

```html
<h2 class="wp-c-heading--secondary">中タイトルが入ります</h2>
```
*/
/*
---
name: WP共通 小見出し
category:
  - wp
  - wp/共通
  - wp/共通/heading
tag:
  - heading
---

```html
<h2 class="wp-c-heading--tertiary">小タイトルが入ります</h2>
```
*/
.wp-c-heading + div, .wp-c-heading--primary + div, .p-history-heading + div, .wp-c-heading--secondary + div, .wp-c-h-heading + div, .wp-c-i-contents h3 + div, .wp-c-heading--tertiary + div, .wp-c-heading + ul, .wp-c-heading--primary + ul, .p-history-heading + ul, .wp-c-heading--secondary + ul, .wp-c-h-heading + ul, .wp-c-i-contents h3 + ul, .wp-c-heading--tertiary + ul {
  margin-top: 0 !important;
}

.wp-c-heading--primary, .p-history-heading {
  position: relative;
  margin: 36px 0 10px;
  color: #164095;
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 1.5;
  letter-spacing: 1.92px;
}

@media screen and (max-width: 768px) {
  .wp-c-heading--primary, .p-history-heading {
    margin: 10vw 0 5vw;
    padding-left: 10px;
    font-size: 3rem;
    letter-spacing: 1.28px;
    line-height: 1.47;
  }
}

.wp-c-heading--primary::before, .p-history-heading::before {
  position: absolute;
  top: 50%;
  left: -418px;
  transform: translateY(-50%);
  width: 400px;
  height: 1px;
  background: #164095;
  content: "";
}

@media screen and (max-width: 768px) {
  .wp-c-heading--primary::before, .p-history-heading::before {
    left: -5vw;
    width: 5vw;
  }
}

.wp-c-heading--secondary, .wp-c-h-heading, .wp-c-i-contents h3 {
  margin-bottom: 20px;
  color: #164095;
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 1.67;
  letter-spacing: 1.44px;
}

@media screen and (max-width: 768px) {
  .wp-c-heading--secondary, .wp-c-h-heading, .wp-c-i-contents h3 {
    margin: 10vw 0 5vw;
    font-size: 2.4rem;
    letter-spacing: 1.15px;
    line-height: 1.5;
  }
}

.wp-c-heading--tertiary {
  margin-bottom: 20px;
  color: #4a74dc;
  font-weight: bold;
  font-size: 2.2rem;
  line-height: 1.43;
  letter-spacing: 1.34px;
}

@media screen and (max-width: 768px) {
  .wp-c-heading--tertiary {
    margin: 7.5vw 0 2.5vw;
    font-size: 2rem;
    letter-spacing: 0.96px;
    line-height: 1.8;
  }
}

div + .wp-c-heading--secondary, div + .wp-c-h-heading, .wp-c-i-contents div + h3, div + .wp-c-heading--tertiary, ul + .wp-c-heading--secondary, ul + .wp-c-h-heading, .wp-c-i-contents ul + h3, ul + .wp-c-heading--tertiary, ol + .wp-c-heading--secondary, ol + .wp-c-h-heading, .wp-c-i-contents ol + h3, ol + .wp-c-heading--tertiary {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  div + .wp-c-heading--secondary, div + .wp-c-h-heading, .wp-c-i-contents div + h3, div + .wp-c-heading--tertiary, ul + .wp-c-heading--secondary, ul + .wp-c-h-heading, .wp-c-i-contents ul + h3, ul + .wp-c-heading--tertiary, ol + .wp-c-heading--secondary, ol + .wp-c-h-heading, .wp-c-i-contents ol + h3, ol + .wp-c-heading--tertiary {
    margin-top: 7.5vw;
  }
}

/*
---
name: WPテンプレートI 表示カテゴリー間を移動するリンク群エリア
category:
  - wp
  - wp/I
  - wp/I/categorychanger
---

タブ切り替えではなく、aタグでのリンク。

liタグに `is-active` クラスを付与することで `pointer-events: none;` および文字色変更。

SPでのデザイン仕様により、`c-inner` 内に内包ではなく独立して width を指定。

SPでは現在選択中のものをリストの最初に配置、アコーディオンに切り替わる。

```html
<ul class="wp-c-i-categorychanger">
  <li class="is-active"><a href="">分野別一覧</a></li>
  <li><a href="">発行年順一覧</a></li>
  <li><a href="">ダミーテキスト</a></li>
  <li><a href="">ダミーテキスト</a></li>
</ul>
```
*/
.wp-c-i-categorychanger {
  display: flex;
  position: relative;
  z-index: 99;
  width: 1080px;
  margin: 20px auto;
  padding: 10px 20px;
  border-radius: 4px;
  background: #eff2f9;
}

@media screen and (max-width: 768px) {
  .wp-c-i-categorychanger {
    width: 100%;
    margin: 10vw auto 0;
    padding: 0;
    border-radius: 0;
    flex-wrap: wrap;
  }
}

.wp-c-i-categorychanger li {
  position: relative;
  line-height: 1.73;
}

@media screen and (max-width: 768px) {
  .wp-c-i-categorychanger li {
    width: 100%;
    padding: 5vw;
  }
}

.wp-c-i-categorychanger li a {
  color: #4a74dc;
}

@media screen and (max-width: 768px) {
  .wp-c-i-categorychanger li a {
    color: #333;
  }
}

.wp-c-i-categorychanger li.is-active a {
  color: #cdcdcd;
  cursor: default;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .wp-c-i-categorychanger li.is-active a {
    color: #4a74dc;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-i-categorychanger li:first-of-type::after {
    position: absolute;
    top: 50%;
    right: 5vw;
    width: 3vw;
    height: 3vw;
    border-top: 2px solid #4a74dc;
    border-right: 2px solid #4a74dc;
    transform: translateY(-50%) rotate(135deg);
    transition: .3s;
    content: "";
  }
}

@media screen and (max-width: 768px) {
  .wp-c-i-categorychanger li:first-of-type.is-triggered::after {
    transform: translateY(-50%) rotate(-45deg);
    transition: .4s;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-i-categorychanger li:nth-of-type(n+2) {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #80889e;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-i-categorychanger li:nth-of-type(n+2) {
    display: none;
    border-bottom: 1px solid #e0e4ec;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-i-categorychanger li:last-of-type {
    border-bottom: 0;
  }
}

/*
---
name: WPテンプレートI 各セクションを包括するエリア
category:
  - wp
  - wp/I
  - wp/I/contents
---

タイトル部分は `wp-c-heading--secondary` を`@extend` により流用。

`wp-c-i-contents`, `wp-c-i-contents__item` によって各セクション間の `margin-top` を管理。

```html
<div class="c-inner wp-c-i-contents">
  <h2 class="wp-c-heading--primary">分野別一覧</h2>
  <section class="wp-c-i-contents__item">
    <h3>ダミーテキスト</h3>
    <dl class="wp-c-i-genre">
      <dt>
        <div>ダミーテキスト</div>
        <div></div>
      </dt>
      <dd>
        <ul>
          <li><a href="" target="_blank">ダミーテキストです。</a></li>
        </ul>
      </dd>
    </dl>
  </section>
  <section class="wp-c-i-contents__item">
    <h3>ダミーテキスト</h3>
    <dl class="wp-c-i-genre">
      <dt>
        <div>ダミーテキスト</div>
      </dt>
      <dd>
        <ul>
          <li><a href="" target="_blank">ダミーテキストです。</a></li>
        </ul>
      </dd>
    </dl>
  </section>
</div>
```
*/
.wp-c-i-contents h3 {
  position: relative;
}

@media screen and (max-width: 768px) {
  .wp-c-i-contents h3::after {
    position: absolute;
    top: 50%;
    right: 5vw;
    width: 3vw;
    height: 3vw;
    border-top: 2px solid #4a74dc;
    border-right: 2px solid #4a74dc;
    transform: translateY(-50%) rotate(135deg);
    transition: .3s;
    content: "";
  }
}

@media screen and (max-width: 768px) {
  .wp-c-i-contents h3.is-triggered::after {
    transform: translateY(-50%) rotate(-45deg);
    transition: .4s;
  }
}

.wp-c-i-contents__item + .wp-c-i-contents__item {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .wp-c-i-contents__item + .wp-c-i-contents__item {
    margin-top: 15vw;
  }
}

/*
---
name: WPテンプレートI 各ジャンル別のPDFリンクの一覧表示テーブル
category:
  - wp
  - wp/I
  - wp/I/genre
tag:
  - table
  - list
---

`--double` モディファイアにより 2つめの 小項目（div） を表示。

SPではアコーディオンメニューに変化。

```html
<section class="wp-c-i-contents__item">
  <h3>ダミーテキスト</h3>
  <dl class="wp-c-i-genre">
    <dt>
      <div>ダミーテキスト</div>
      <div></div>
    </dt>
    <dd>
      <ul>
        <li><a href="" target="_blank">ダミーテキストです。</a></li>
        <li><a href="" target="_blank">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</a></li>
        <li><a href="" target="_blank">ダミーテキストです。</a></li>
      </ul>
    </dd>
  </dl>
  <dl class="wp-c-i-genre--double">
    <dt>
      <div>ダミーテキスト</div>
      <div>ダミーテキスト</div>
    </dt>
    <dd>
      <ul>
        <li><a href="" target="_blank">ダミーテキストです。</a></li>
        <li><a href="" target="_blank">ダミーテキストです。</a></li>
      </ul>
    </dd>
  </dl>
</section>
```
*/
.wp-c-i-genre, .wp-c-i-genre--double {
  display: flex;
  border: 1px solid #e0e4ec;
}

@media screen and (max-width: 768px) {
  .wp-c-i-genre, .wp-c-i-genre--double {
    display: none;
  }
}

.wp-c-i-genre + .wp-c-i-genre, .wp-c-i-genre--double + .wp-c-i-genre, .wp-c-i-genre + .wp-c-i-genre--double, .wp-c-i-genre--double + .wp-c-i-genre--double {
  border-top: 0;
}

.wp-c-i-genre dt, .wp-c-i-genre--double dt {
  display: flex;
  max-width: 20%;
  flex-basis: 20%;
}

@media screen and (max-width: 768px) {
  .wp-c-i-genre dt, .wp-c-i-genre--double dt {
    display: block;
    max-width: 100%;
    flex-basis: 100%;
  }
}

.wp-c-i-genre dt div, .wp-c-i-genre--double dt div {
  width: 100%;
  padding: 10px 20px;
  border-right: 1px solid #e0e4ec;
  background: #eff2f9;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .wp-c-i-genre dt div, .wp-c-i-genre--double dt div {
    padding: 5vw 7.5vw;
    border-right: 0;
  }
}

.wp-c-i-genre dt div:empty, .wp-c-i-genre--double dt div:empty {
  display: none;
}

.wp-c-i-genre dd, .wp-c-i-genre--double dd {
  max-width: 80%;
  flex-basis: 80%;
  padding: 10px 20px;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .wp-c-i-genre dd, .wp-c-i-genre--double dd {
    max-width: 100%;
    flex-basis: 100%;
    padding: 5vw 7.5vw;
  }
}

.wp-c-i-genre dd li + li, .wp-c-i-genre--double dd li + li {
  margin-top: 15px;
}

.wp-c-i-genre dd a, .wp-c-i-genre--double dd a {
  color: #4a74dc;
}

.wp-c-i-genre--double dt {
  max-width: 40%;
  flex-basis: 40%;
}

@media screen and (max-width: 768px) {
  .wp-c-i-genre--double dt {
    max-width: 100%;
    flex-basis: 100%;
  }
}

.wp-c-i-genre--double dt div:nth-of-type(2) {
  background: #fff;
}

.wp-c-i-genre--double dd {
  max-width: 60%;
  flex-basis: 60%;
}

@media screen and (max-width: 768px) {
  .wp-c-i-genre--double dd {
    max-width: 100%;
    flex-basis: 100%;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-i-overlay.is-triggered {
    position: fixed;
    opacity: .6;
    z-index: 98;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transition: 0.8s;
  }
}

/*
---
name: WPテンプレートJ 
category:
  - wp
  - wp/J
  - wp/J/section
---
組織内議員ページ各セクションラッパー

```html
  <section class="wp-c-j-section">
  </section>
```
*/
@media screen and (min-width: 769px) {
  .wp-c-j-section + .wp-c-j-section {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-section + .wp-c-j-section {
    margin-top: 10vw;
  }
}

/*
---
name: WPテンプレートJ 
category:
  - wp
  - wp/J
  - wp/J/buttons
---
組織内議員ページ ページ上部青色リンクボタン

```html
  <div class="wp-c-j-buttons">
    <a href="" class="wp-c-j-button">いそざき参議院議員（比例）</a>
    <a href="" class="wp-c-j-button">はまぐち参議院議員（比例）</a>
  </div>
```
*/
@media screen and (min-width: 769px) {
  .wp-c-j-buttons {
    display: flex;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-heading--primary + .wp-c-j-buttons, .p-history-heading + .wp-c-j-buttons {
    margin-top: 30px !important;
  }
}

.wp-c-j-button {
  display: flex;
  align-items: center;
  border-radius: 8px;
  background-color: #4a74dc;
  color: #fff;
}

@media screen and (min-width: 769px) {
  .wp-c-j-button {
    width: 520px;
    padding: 10px 30px;
    min-height: 75px;
    font-size: 18px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-button {
    width: 100%;
    padding: 5vw 7.5vw;
    min-height: 16.25vw;
    font-size: 4vw;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-j-button + .wp-c-j-button {
    margin-left: 40px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-button + .wp-c-j-button {
    margin-top: 2.5vw;
  }
}

/*
---
name: WPテンプレートJ 
category:
  - wp
  - wp/J
  - wp/J/map
---
組織内議員ページ 日本地図エリア

```html
  <div id="jmap" class="wp-c-j-map"></div>
```
*/
.wp-c-j-map {
  margin: 0 auto;
}

@media screen and (min-width: 769px) {
  .wp-c-j-map {
    width: 820px;
    height: 674px;
    font-size: 12px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-map {
    width: 90vw;
    height: 74vw;
    font-size: 1.8vw;
  }
}

/*
---
name: WPテンプレートJ 
category:
  - wp
  - wp/J
  - wp/J/area-list
---
組織内議員ページ 都道府県一覧

```html
  <ul class="wp-c-j-area-list">
    <li class="wp-c-j-area-item">
      <h3 class="wp-c-j-area-item__heading">愛知県</h3>
        <div class="wp-c-j-area-item__child-list">
          <a
            href="/intro/councilors/aichi"
            class="wp-c-j-area-item__child-item is-disable"
          >愛知県</a>
      </div>
    </li>
  </ul>
```
*/
@media screen and (min-width: 769px) {
  .wp-c-j-area-list {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-area-list {
    margin-top: 10vw;
  }
}

.wp-c-j-area-item {
  border: 1px solid #e0e4ec;
  border-radius: 8px;
}

@media screen and (min-width: 769px) {
  .wp-c-j-area-item {
    padding: 24px 40px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-area-item {
    padding: 6vw 8.5vw;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-j-area-item + .wp-c-j-area-item {
    margin-top: 24px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-area-item + .wp-c-j-area-item {
    margin-top: 6vw;
  }
}

.wp-c-j-area-item__heading {
  font-weight: 700;
}

@media screen and (min-width: 769px) {
  .wp-c-j-area-item__heading {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-area-item__heading {
    font-size: 5vw;
    text-align: center;
  }
}

.wp-c-j-area-item__child-list {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 769px) {
  .wp-c-j-area-item__child-list {
    gap: 0 30px;
    margin-top: 16px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-area-item__child-list {
    gap: 4vw 0;
    margin-top: 4vw;
  }
}

.wp-c-j-area-item__child-item {
  color: #4a74dc;
  font-weight: 500;
}

@media screen and (min-width: 769px) {
  .wp-c-j-area-item__child-item {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-area-item__child-item {
    width: 29vw;
    font-size: 4vw;
  }
}

.wp-c-j-area-item__child-item.is-disable {
  color: #c6cad4;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .wp-c-j-area-item__child-item:nth-of-type(3n + 3) {
    width: 12.5vw;
  }
}

/*
---
name: WPテンプレートJ 
category:
  - wp
  - wp/J
  - wp/J/news
---
組織内議員ページ お知らせ

```html
  <ul class="wp-c-j-news">
    <li class="wp-c-j-news-item">
      <time datetime="2024/3/22" class="wp-c-j-news-item__date">2024/3/22</time>
      <a
        href="/"
        class="wp-c-j-news-item__link"
      >自動車総連からのお知らせ</a>
    </li>
  </ul>
```
*/
@media screen and (min-width: 769px) {
  .wp-c-j-news {
    margin-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-news {
    margin-top: 2.5vw;
  }
}

.wp-c-j-news-item {
  display: flex;
  border-top: 1px solid #e0e4ec;
}

@media screen and (min-width: 769px) {
  .wp-c-j-news-item {
    padding: 20px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-news-item {
    padding: 5vw;
  }
}

.wp-c-j-news-item:last-of-type {
  border-bottom: 1px solid #e0e4ec;
}

.wp-c-j-news-item__date {
  font-weight: 500;
}

@media screen and (min-width: 769px) {
  .wp-c-j-news-item__date {
    width: 90px;
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-news-item__date {
    font-size: 4vw;
  }
}

.wp-c-j-news-item__text, .wp-c-j-news-item__link {
  display: inline-block;
  font-weight: 500;
}

@media screen and (min-width: 769px) {
  .wp-c-j-news-item__text, .wp-c-j-news-item__link {
    margin-left: 40px;
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-j-news-item__text, .wp-c-j-news-item__link {
    margin-left: 10vw;
    font-size: 4vw;
  }
}

/*
---
name: WPテンプレートK
category:
  - wp
  - wp/K
  - wp/K/section
---
組織内議員 タクソノミーページ（都道府県個別ページ） 各セクションラッパー

```html
  <section class="wp-c-k-section">
  </section>
```
*/
@media screen and (min-width: 769px) {
  .wp-c-k-section {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-k-section {
    margin-top: 10vw;
  }
}

/*
---
name: WPテンプレートK
category:
  - wp
  - wp/K
  - wp/K/heading
---
組織内議員 タクソノミーページ（都道府県個別ページ）見出し

```html
  <h3 class="wp-c-k-heading">見出し</h3>
```
*/
.wp-c-k-heading {
  color: #164095;
  font-weight: 500;
}

@media screen and (min-width: 769px) {
  .wp-c-k-heading {
    font-size: 36px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-k-heading {
    font-size: 8vw;
  }
}

/*
---
name: WPテンプレートK
category:
  - wp
  - wp/K
  - wp/K/table
---
組織内議員 タクソノミーページ（都道府県個別ページ） 都道府県一覧テーブル

```html
  <table class="wp-c-k-table wp-c-k-table--pc">
    <tr>
      <th>議員氏名</th>
      <th>所属議会</th>
      <th>出身組織</th>
    </tr>
    <tr>
      <td><a href="/" class="table-link">名前</a></td>
      <td><a href="/" class="table-link">所属議会</a></td>
      <td><a href="/" class="table-link">出身組織</a></td>
    </tr>
  </table>
```
*/
.wp-c-k-table {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .wp-c-k-table {
    margin-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-k-table {
    margin-top: 9vw;
    border-bottom: 1px solid #e0e4ec;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-k-table tr:nth-of-type(3n + 1) th, .wp-c-k-table tr:nth-of-type(3n + 1) td {
    background-color: #eff2f9;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-k-table tr:nth-of-type(3n + 2) th, .wp-c-k-table tr:nth-of-type(3n + 2) td {
    padding-bottom: 1.25vw;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-k-table tr:nth-of-type(3n + 3) th, .wp-c-k-table tr:nth-of-type(3n + 3) td {
    padding-top: 1.25vw;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-k-table th, .wp-c-k-table td {
    font-size: 18px;
    vertical-align: middle;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-k-table th, .wp-c-k-table td {
    flex: 1 0 0;
    padding: 5vw;
    font-size: 4vw;
    vertical-align: top;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-k-table th:first-child, .wp-c-k-table td:first-child {
    width: 26.5vw;
  }
}

.wp-c-k-table th {
  font-weight: 700;
}

@media screen and (min-width: 769px) {
  .wp-c-k-table th {
    position: relative;
    width: 270px;
    padding: 20px;
    background-color: #eff2f9;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-k-table th::before {
    position: absolute;
    top: 10px;
    right: 0;
    width: 1px;
    height: 47px;
    background-color: #e0e4ec;
    content: '';
  }
}

@media screen and (min-width: 769px) {
  .wp-c-k-table th:last-of-type {
    width: auto;
  }
}

.wp-c-k-table th:last-of-type::before {
  display: none;
}

.wp-c-k-table td {
  font-weight: 500;
}

@media screen and (min-width: 769px) {
  .wp-c-k-table td {
    border-bottom: 1px solid #e0e4ec;
  }
}

.wp-c-k-table .table-link {
  display: inline-block;
  width: 100%;
}

@media screen and (min-width: 769px) {
  .wp-c-k-table .table-link {
    padding: 20px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-k-table--pc {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-k-table--sp {
    display: none;
  }
}

/*
---
name: WPテンプレートL
category:
  - wp
  - wp/L
  - wp/L/card
---
組織内議員 記事詳細ページ カード

```html
  <section class="wp-c-l-card">
    <img
      src=""
      alt=""
      class="wp-c-l-card-thumbnail"
      width="310"
      height="415"
    >
    <div class="wp-c-l-card-body">
      <div class="wp-c-l-card-pref">岐阜県</div>
      <div class="wp-c-l-card-kana">やまだ　たろう</div>
      <div class="wp-c-l-card-name">山田　太郎</div>
      <dl class="wp-c-l-card-profile">
        <dt class="wp-c-l-card-profile__heading">生年月日</dt>
        <dd class="wp-c-l-card-profile__body">1998年11月9日</dd>
      </dl>
      <dl class="wp-c-l-card-profile">
        <dt class="wp-c-l-card-profile__heading">所属議会</dt>
        <dd class="wp-c-l-card-profile__body">所属</dd>
      </dl>
      <dl class="wp-c-l-card-profile">
        <dt class="wp-c-l-card-profile__heading">出身組織</dt>
        <dd class="wp-c-l-card-profile__body">出身組織</dd>
      </dl>
      <div class="wp-c-l-card-btns">
        <a href="<?=$url?>" target="_blank" class="wp-c-l-card-btn">活動報告ページ</a>
        <button href="" class="wp-c-l-card-btn js-modal-open">HP・SNS</button>
      </div>
    </div>
  </section>
```
*/
.wp-c-l-card {
  border: 1px solid #e0e4ec;
}

@media screen and (min-width: 769px) {
  .wp-c-l-card {
    display: flex;
    margin-top: 30px;
    padding: 20px;
    border-radius: 8px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card {
    margin-top: 5vw;
    padding: 10vw;
    border-radius: 4px;
  }
}

.wp-c-l-card-thumbnail {
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-thumbnail {
    width: 69.5vw;
    height: 92.5vw;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-body {
    display: flex;
    flex-direction: column;
    margin-left: 40px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-body {
    margin-top: 5vw;
  }
}

.wp-c-l-card-pref {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4a74dc;
  color: #fff;
  font-weight: 500;
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-pref {
    width: 104px;
    height: 30px;
    font-size: 14px;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-pref {
    width: 26vw;
    height: 7.5vw;
    font-size: 3.5vw;
    letter-spacing: .5vw;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-kana {
    margin-top: 16px;
    color: #80889e;
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-kana {
    margin-top: 2.5vw;
    font-size: 4vw;
  }
}

.wp-c-l-card-name {
  font-weight: 700;
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-name {
    font-size: 36px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-name {
    font-size: 8vw;
  }
}

.wp-c-l-card-profile {
  font-weight: 700;
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-profile {
    display: flex;
    font-size: 18px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-profile {
    font-size: 4.5vw;
  }
}

.wp-c-l-card-profile__heading {
  color: #164095;
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-profile__heading {
    width: 156px;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-profile__body {
    flex: 1 0 0;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-profile + .wp-c-l-card-profile {
    margin-top: 10px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-profile + .wp-c-l-card-profile {
    margin-top: 2.5vw;
  }
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-profile:first-of-type {
    margin-top: 6px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-profile:first-of-type {
    margin-top: 4.5vw;
  }
}

.wp-c-l-card-btns {
  display: flex;
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-btns {
    gap: 0 14px;
    margin: auto 0 0;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-btns {
    flex-direction: column;
    gap: 2.5vw 0;
    margin-top: 7.5vw;
  }
}

.wp-c-l-card-btn {
  border: 1px solid #e0e4ec;
  border-radius: 8px;
  background-color: #fff;
  color: #4a74dc;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
  .wp-c-l-card-btn {
    width: 332px;
    padding: 24px 30px;
    font-size: 18px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-card-btn {
    display: flex;
    align-items: center;
    height: 16.25vw;
    padding: 0 7.5vw;
    font-size: 4.5vw;
  }
}

/*
---
name: WPテンプレートL
category:
  - wp
  - wp/L
  - wp/L/modal
---
組織内議員 記事詳細ページ モーダルとoverly

```html
  <div class="wp-c-l-overlay js-modal-close"></div>
  <div class="wp-c-l-modal">
    <div class="wp-c-l-modal-item">
      <div class="wp-c-l-modal-item__heading"></div>
      <a href="" class="wp-c-l-modal-item__link"></a>
    </div>
  </div>
```
*/
.wp-c-l-overlay {
  display: none;
  opacity: .47;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: #000;
}

.is-modal-open .wp-c-l-overlay {
  display: block;
}

.wp-c-l-modal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  border-radius: 8px;
  background-color: #fff;
  transition-property: opacity;
  transition-duration: .3s;
}

@media screen and (min-width: 769px) {
  .wp-c-l-modal {
    width: 510px;
    padding: 24px 30px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-modal {
    width: 90vw;
    padding: 6vw;
  }
}

.is-modal-open .wp-c-l-modal {
  visibility: visible;
  opacity: 1;
}

.wp-c-l-modal-item {
  display: flex;
}

@media screen and (min-width: 769px) {
  .wp-c-l-modal-item + .wp-c-l-modal-item {
    margin-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-modal-item + .wp-c-l-modal-item {
    align-items: flex-start;
    margin-top: 2.5vw;
  }
}

.wp-c-l-modal-item__heading {
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 700;
  word-break: break-all;
}

@media screen and (min-width: 769px) {
  .wp-c-l-modal-item__heading {
    max-width: 142px;
    min-width: 142px;
    padding-left: 28px;
    font-size: 18px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-modal-item__heading {
    max-width: 28vw;
    min-width: 28vw;
    padding-left: 7vw;
    font-size: 3.75vw;
  }
}

.wp-c-l-modal-item__heading::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-image: url("/assets/images/common/link-clip.svg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  content: '';
}

@media screen and (min-width: 769px) {
  .wp-c-l-modal-item__heading::before {
    width: 18px;
    height: 18px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-modal-item__heading::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}

.wp-c-l-modal-item__link {
  color: #4a74dc;
  text-align: left;
  word-break: break-all;
}

@media screen and (min-width: 769px) {
  .wp-c-l-modal-item__link {
    margin-left: 30px;
    font-size: 18px;
  }
}

@media screen and (max-width: 768px) {
  .wp-c-l-modal-item__link {
    margin-left: 7vw;
    font-size: 3.75vw;
  }
}

/*
---
name: WP共通 検索結果
category:
  - wp
  - wp/共通
  - wp/共通/result
tag:
  - search
---

テンプレートDを下地にしていますが、ほぼ別のものになっています。<br>
年度選択や日付、PDFアイコン等全てなしで、ひたすらリンクが並びます。<br>
ダミーテキストの部分は、検索結果を表示させやすい方式で大丈夫のようです。

```html
<ul class="wp-c-result">
  <li class="wp-c-result__item">
    <a href="#" class="wp-c-result__link">
      ダミーテキストです。ダミーテキストです。
    </a>
  </li>
  <li class="wp-c-result__item">
    <a href="#" class="wp-c-result__link">
      ダミーテキストです。
    </a>
  </li>
  <li class="wp-c-result__item">
    <a href="#" class="wp-c-result__link">
      ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
    </a>
  </li>
</ul>
```
*/
.wp-c-result {
  border-top: 1px solid #e0e4ec;
}

.wp-c-result__item {
  border-bottom: 1px solid #e0e4ec;
}

.wp-c-result__link {
  display: block;
  width: 100%;
  padding: 10px 0;
}

/*
---
name: WP共通 年度選択 selectbox
category:
  - wp
  - wp/共通
  - wp/共通/selectbox
tag:
  - selector
---

記事の絞り込み処理を行う際に使用する WP共通セレクタ

左側の大タイトルには `wp-c-heading--primary` を使用。

SP時のレイアウトの関係により、PCビューでは flex item に order クラスを付与。

```html
<div class="wp-c-selectbox">
  <h2 class="wp-c-heading--primary">2019年度</h2>
  <div class="wp-c-selectbox-selector">
    <select name="year" onChange="location.href=value;" class="wp-c-selectbox-selector__button">
      <option value="">年度を選択</option>
      <option value="/_styleguide/?2019">2019年度</option>
      <option value="/_styleguide/?2018">2018年度</option>
      <option value="/_styleguide/?2017">2017年度</option>
      <option value="/_styleguide/?2016">2016年度</option>
      <option value="/_styleguide/?2015">2015年度</option>
    </select>
  </div>
</div>
```
*/
.wp-c-selectbox {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .wp-c-selectbox {
    display: block;
    margin-top: 17.5vw;
  }
}

.wp-c-selectbox > h2 {
  order: 1;
}

.wp-c-selectbox-selector {
  position: relative;
  margin-top: 10px;
  margin-left: 40px;
  order: 2;
}

@media screen and (max-width: 768px) {
  .wp-c-selectbox-selector {
    width: 100%;
    margin-left: 0;
  }
}

.wp-c-selectbox-selector::after {
  position: absolute;
  top: 50%;
  right: 21px;
  width: 12px;
  height: 8px;
  transform: translateY(-40%);
  background: url(/assets/images/common/selectbox-arrow.svg) no-repeat;
  content: "";
  pointer-events: none;
}

.wp-c-selectbox-selector__button {
  width: 193px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid #c6cad4;
  border-radius: 4px;
  background: #fff;
  color: #80889e;
  font-weight: 500;
  font-size: 1.6rem;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  -webkit-appearance: none;
  appearance: none;
}

@media screen and (max-width: 768px) {
  .wp-c-selectbox-selector__button {
    width: 100%;
    height: 12vw;
    font-size: 1.8rem;
  }
}

.wp-c-selectbox-selector__button::-ms-expand {
  display: none;
}

.wp-c-selectbox-selector__button option {
  padding: 10px 0;
}

.wp-c-button {
  max-width: 244px;
  margin: 30px auto 0;
}

@media screen and (max-width: 768px) {
  .wp-c-button {
    max-width: 47.22vw;
    margin: 15vw auto 0;
  }
}

.wp-c-button a {
  display: block;
  width: 100%;
  padding: 11px 0;
  border-radius: 28px;
  background: #164095;
  color: #fff;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .wp-c-button a {
    padding: 3vw 0;
    border-radius: 23px;
    font-size: 1.4rem;
  }
}

/*! =========================
  utility
========================= */
.u-block {
  display: block;
}

.u-link-tel {
  cursor: default;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .u-link-tel {
    pointer-events: auto;
  }
}

.u-mt-0 {
  margin-top: 0px !important;
}

.u-mt-5 {
  margin-top: 5px !important;
}

.u-mt-10 {
  margin-top: 10px !important;
}

.u-mt-15 {
  margin-top: 15px !important;
}

.u-mt-20 {
  margin-top: 20px !important;
}

.u-mt-25 {
  margin-top: 25px !important;
}

.u-mt-30 {
  margin-top: 30px !important;
}

.u-mt-35 {
  margin-top: 35px !important;
}

.u-mt-40 {
  margin-top: 40px !important;
}

.u-mt-45 {
  margin-top: 45px !important;
}

.u-mt-50 {
  margin-top: 50px !important;
}

.u-mr-0 {
  margin-right: 0px !important;
}

.u-mr-5 {
  margin-right: 5px !important;
}

.u-mr-10 {
  margin-right: 10px !important;
}

.u-mr-15 {
  margin-right: 15px !important;
}

.u-mr-20 {
  margin-right: 20px !important;
}

.u-mr-25 {
  margin-right: 25px !important;
}

.u-mr-30 {
  margin-right: 30px !important;
}

.u-mr-35 {
  margin-right: 35px !important;
}

.u-mr-40 {
  margin-right: 40px !important;
}

.u-mr-45 {
  margin-right: 45px !important;
}

.u-mr-50 {
  margin-right: 50px !important;
}

.u-mb-0 {
  margin-bottom: 0px !important;
}

.u-mb-5 {
  margin-bottom: 5px !important;
}

.u-mb-10 {
  margin-bottom: 10px !important;
}

.u-mb-15 {
  margin-bottom: 15px !important;
}

.u-mb-20 {
  margin-bottom: 20px !important;
}

.u-mb-25 {
  margin-bottom: 25px !important;
}

.u-mb-30 {
  margin-bottom: 30px !important;
}

.u-mb-35 {
  margin-bottom: 35px !important;
}

.u-mb-40 {
  margin-bottom: 40px !important;
}

.u-mb-45 {
  margin-bottom: 45px !important;
}

.u-mb-50 {
  margin-bottom: 50px !important;
}

.u-ml-0 {
  margin-left: 0px !important;
}

.u-ml-5 {
  margin-left: 5px !important;
}

.u-ml-10 {
  margin-left: 10px !important;
}

.u-ml-15 {
  margin-left: 15px !important;
}

.u-ml-20 {
  margin-left: 20px !important;
}

.u-ml-25 {
  margin-left: 25px !important;
}

.u-ml-30 {
  margin-left: 30px !important;
}

.u-ml-35 {
  margin-left: 35px !important;
}

.u-ml-40 {
  margin-left: 40px !important;
}

.u-ml-45 {
  margin-left: 45px !important;
}

.u-ml-50 {
  margin-left: 50px !important;
}

.u-pt-0 {
  padding-top: 0px !important;
}

.u-pt-5 {
  padding-top: 5px !important;
}

.u-pt-10 {
  padding-top: 10px !important;
}

.u-pt-15 {
  padding-top: 15px !important;
}

.u-pt-20 {
  padding-top: 20px !important;
}

.u-pt-25 {
  padding-top: 25px !important;
}

.u-pt-30 {
  padding-top: 30px !important;
}

.u-pt-35 {
  padding-top: 35px !important;
}

.u-pt-40 {
  padding-top: 40px !important;
}

.u-pt-45 {
  padding-top: 45px !important;
}

.u-pt-50 {
  padding-top: 50px !important;
}

.u-pr-0 {
  padding-right: 0px !important;
}

.u-pr-5 {
  padding-right: 5px !important;
}

.u-pr-10 {
  padding-right: 10px !important;
}

.u-pr-15 {
  padding-right: 15px !important;
}

.u-pr-20 {
  padding-right: 20px !important;
}

.u-pr-25 {
  padding-right: 25px !important;
}

.u-pr-30 {
  padding-right: 30px !important;
}

.u-pr-35 {
  padding-right: 35px !important;
}

.u-pr-40 {
  padding-right: 40px !important;
}

.u-pr-45 {
  padding-right: 45px !important;
}

.u-pr-50 {
  padding-right: 50px !important;
}

.u-pb-0 {
  padding-bottom: 0px !important;
}

.u-pb-5 {
  padding-bottom: 5px !important;
}

.u-pb-10 {
  padding-bottom: 10px !important;
}

.u-pb-15 {
  padding-bottom: 15px !important;
}

.u-pb-20 {
  padding-bottom: 20px !important;
}

.u-pb-25 {
  padding-bottom: 25px !important;
}

.u-pb-30 {
  padding-bottom: 30px !important;
}

.u-pb-35 {
  padding-bottom: 35px !important;
}

.u-pb-40 {
  padding-bottom: 40px !important;
}

.u-pb-45 {
  padding-bottom: 45px !important;
}

.u-pb-50 {
  padding-bottom: 50px !important;
}

.u-pl-0 {
  padding-left: 0px !important;
}

.u-pl-5 {
  padding-left: 5px !important;
}

.u-pl-10 {
  padding-left: 10px !important;
}

.u-pl-15 {
  padding-left: 15px !important;
}

.u-pl-20 {
  padding-left: 20px !important;
}

.u-pl-25 {
  padding-left: 25px !important;
}

.u-pl-30 {
  padding-left: 30px !important;
}

.u-pl-35 {
  padding-left: 35px !important;
}

.u-pl-40 {
  padding-left: 40px !important;
}

.u-pl-45 {
  padding-left: 45px !important;
}

.u-pl-50 {
  padding-left: 50px !important;
}

.u-font-bold {
  font-weight: bold;
}

.u-lh-1 {
  line-height: 1;
}

.u-ta-c {
  text-align: center !important;
}

.u-ta-r {
  text-align: right !important;
}

.u-ta-l {
  text-align: left !important;
}

.u-indentation {
  padding-left: 1em;
  text-indent: -1em;
}

/*# sourceMappingURL=style.css.map */