@charset "UTF-8";
/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */
/*
 * Normalization
 */
abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

audio:not([controls]) {
  display: none;
}

b,
strong {
  font-weight: bolder;
}

button {
  -webkit-appearance: button;
  overflow: visible;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText;
}

button,
select {
  text-transform: none;
}

details {
  display: block;
}

hr {
  overflow: visible;
}

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

input {
  -webkit-border-radius: 0;
}

input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
}

input[type="number"] {
  width: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
}

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

main {
  display: block;
}

pre {
  overflow: auto;
}

progress {
  display: inline-block;
}

summary {
  display: block;
}

svg:not(:root) {
  overflow: hidden;
}

template {
  display: none;
}

textarea {
  overflow: auto;
}

[hidden] {
  display: none;
}

/*
 * Universal inheritance
 */
*,
::before,
::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

* {
  font-size: inherit;
  line-height: inherit;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}

/*
 * Opinionated defaults
 */
* {
  margin: 0;
  padding: 0;
}

*,
::before,
::after {
  border-style: solid;
  border-width: 0;
}

a,
area,
button,
input,
label,
select,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

svg {
  fill: currentColor;
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled] {
  cursor: default;
}

[hidden][aria-hidden="false"] {
  clip: rect(0 0 0 0);
  display: inherit;
  position: absolute;
}

[hidden][aria-hidden="false"]:focus {
  clip: auto;
}

/*
 * Configurable defaults
 */
* {
  background-repeat: no-repeat;
}

:root {
  background-color: #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #000000;
  cursor: default;
  font: 100%/1.5 sans-serif;
}

a {
  text-decoration: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

button,
input,
select,
textarea {
  background-color: transparent;
  color: inherit;
}

button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
  min-height: 1.5em;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

nav ol,
nav ul {
  list-style: none;
}

small {
  font-size: 75%;
}

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

textarea {
  resize: vertical;
}

::-moz-selection {
  background-color: #b3d4fc;
  color: #ffffff;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc;
  color: #ffffff;
  text-shadow: none;
}

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

ul {
  list-style: none;
}

/* This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: http://www.fontshop.com */
@font-face {
  font-family: "DINWebPro-Medium W01 Regular";
  src: url("Fonts/1448152/729cfb6c-09a5-429b-8250-cd6e23455590.eot?#iefix");
  src: url("Fonts/1448152/729cfb6c-09a5-429b-8250-cd6e23455590.eot?#iefix") format("eot"), url("Fonts/1448152/673d0af4-f3a4-4a8b-8d7f-24aa5c8a4a2c.woff2") format("woff2"), url("Fonts/1448152/ac55f8b3-1f99-484b-a876-7314bb62ae8d.woff") format("woff"), url("Fonts/1448152/0171fce7-366e-46f8-a7b6-b74a933a5ae2.ttf") format("truetype");
}

:root {
  font-size: 62.5%;
  background: url("../img/bg.png") repeat 0 0;
}

body {
  color: #333;
  font-size: 1.4rem;
  font-family: Arial, system-ui, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  line-height: 1.6;
  min-width: 320px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

a {
  color: #005c8b;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

::-webkit-input-placeholder {
  line-height: normal;
}

.l-container {
  overflow: hidden;
}

#icons-def {
  display: none;
}

[data-menu-timer] {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

[data-menu-timer][data-menu="open"] {
  -webkit-transform: translateX(-280px);
  transform: translateX(-280px);
}

[data-back-layer] {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20000;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
}

[data-back-layer][data-menu="open"] {
  display: block;
  opacity: 1;
  -webkit-animation: show-back-layer 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  animation: show-back-layer 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

[data-back-layer][data-menu="close"] {
  display: block;
  opacity: 1;
  -webkit-animation: hide-back-layer 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  animation: hide-back-layer 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@-webkit-keyframes show-back-layer {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes show-back-layer {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes hide-back-layer {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hide-back-layer {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

.l-main {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

@media all and (min-width: 768px), print {
  body {
    font-size: 1.6rem;
    min-width: 960px;
    overflow: visible;
  }
}

.l-main {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

@media all and (min-width: 768px), print {
  html {
    height: 100%;
  }
  body {
    display: block;
    min-height: 0;
  }
  .l-main {
    min-height: 100%;
    margin-bottom: -147px;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }
  .l-main:after {
    content: "";
    display: block;
    height: 147px;
  }
  .l-footer-wrapper {
    height: 147px;
  }
}

.l-header {
  padding: 6px 10px 5px;
  border-bottom: solid 1px #c8c8c8;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 10002;
  background-color: #fff;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

@media all and (min-width: 768px), print {
  .l-header {
    padding: 14px 0;
  }
}

@media print {
  .l-header {
    position: static;
  }
}

@media all and (min-width: 768px), print {
  .l-header-inner {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.l-header-logo {
  width: 151px;
  min-height: 29px;
  position: relative;
  z-index: 10;
}

@media all and (min-width: 768px), print {
  .l-header-logo {
    width: 259px;
    min-height: 52px;
  }
}

.l-header-tagline {
  display: none;
}

@media all and (min-width: 768px), print {
  .l-header-tagline {
    margin-left: 80px;
    width: 180px;
    height: 14px;
    display: block;
    position: relative;
    z-index: 10;
  }
  .l-header-tagline img {
    display: block;
  }
}

.l-header-menu {
  margin-top: auto;
  margin-bottom: auto;
  padding: 15px 13px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  color: #888;
  outline: none;
  cursor: pointer;
}

.l-header-menu svg {
  fill: #005c8b;
}

.l-header-menu-icon,
.l-header-menu-label {
  display: block;
  text-align: center;
}

.l-header-menu-icon {
  margin-right: auto;
  margin-left: auto;
  width: 13px;
}

@media all and (min-width: 768px), print {
  .l-header-menu-icon {
    width: 26px;
    height: 20px;
  }
}

.l-header-menu-label {
  padding-top: 3px;
  font-size: 0.9rem;
  line-height: 1;
}

.l-header-nav-wrapper {
  display: none;
}

@media all and (min-width: 768px), print {
  .l-header-nav-wrapper {
    padding: 0;
    display: block;
    position: absolute;
    top: -14px;
    right: 0;
  }
}

@media all and (min-width: 768px), print {
  .l-header-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

@media all and (min-width: 768px), print {
  .l-header-nav-item:not(:first-child) {
    margin-left: 30px;
  }
}

@media all and (min-width: 768px), print {
  .l-header-nav-target {
    padding: 30px 0 30px 17px;
    position: relative;
    display: block;
    background-color: #fff;
    color: #888;
    font-size: 1.6rem;
    line-height: 1;
    -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .l-header-nav-target:hover,
  [data-category="home"] .l-header-nav-target[href="/"],
  [data-category="topics"] .l-header-nav-target[href="/topics/"],
  [data-category="about"] .l-header-nav-target[href="/about/"] {
    color: #005c8b;
  }
  .l-header-nav-target .icon-arrow {
    margin-top: auto;
    margin-bottom: auto;
    width: 6px;
    height: 10px;
    display: block;
    position: absolute;
    top: 3px;
    bottom: 0;
    left: 0;
  }
}

@media all and (min-width: 768px), print {
  .l-header-nav-target-inner {
    display: inline-block;
    position: relative;
    line-height: 1;
  }
}

.l-menu {
  border: solid 1px #c8c8c8;
  width: 280px;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30000;
  background-color: #fff;
  -webkit-transform: translateX(280px);
  transform: translateX(280px);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  outline: none;
}

.l-menu[data-menu="open"] {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

@media all and (min-width: 768px), print {
  .l-menu {
    border-top: none;
    border-bottom: none;
    width: 300px;
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }
}

.l-menu-inner {
  padding-right: 14px;
  padding-left: 14px;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  overflow-y: auto;
}

@media all and (min-width: 768px), print {
  .l-menu-inner {
    padding-right: 28px;
    padding-left: 28px;
  }
}

.l-menu-list {
  margin-bottom: 20px;
  padding-top: 37px;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.l-menu-list:before,
.l-menu-list:after {
  display: table;
  content: " ";
}

.l-menu-list:after {
  clear: both;
}

@media all and (min-width: 768px), print {
  .l-menu-list {
    margin-bottom: 28px;
    padding-top: 80px;
    display: block;
  }
}

.l-menu-list-item {
  border-bottom: solid 1px #c8c8c8;
  float: left;
  width: 50%;
  position: relative;
}

.l-menu-list-item:nth-child(odd) {
  border-left: solid 1px #c8c8c8;
}

.l-menu-list-item:nth-child(even) {
  clear: left;
}

.l-menu-list-item:nth-child(even):last-child {
  width: 100%;
}

.l-menu-list-item:first-child {
  border-top: solid 1px #c8c8c8;
  border-left: none;
  width: 100%;
}

@media all and (min-width: 768px), print {
  .l-menu-list-item {
    float: none;
    width: auto;
  }
  .l-menu-list-item:nth-child(odd) {
    border-left: none;
  }
}

.l-menu-target {
  padding: 18px 22px 18px 27px;
  position: relative;
  display: block;
  background-color: #fff;
  color: #888;
  font-size: 2rem;
  line-height: 1;
  outline: none;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

.l-menu-target .icon-arrow {
  margin-top: auto;
  margin-bottom: auto;
  width: 6px;
  height: 10px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  fill: #005c8b;
}

@media all and (min-width: 768px), print {
  .l-menu-target {
    font-size: 1.6rem;
    -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .l-menu-target:hover {
    color: #005c8b;
  }
}

.l-menu-target-inner {
  position: relative;
  top: -0.1em;
}

@media all and (min-width: 768px), print {
  .l-menu-target-inner {
    top: -0.05em;
  }
}

.l-menu-close {
  padding: 14px;
  width: 39px;
  height: 39px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  outline: none;
  cursor: pointer;
}

.l-menu-close svg {
  display: block;
  fill: #005c8b;
}

@media all and (min-width: 768px), print {
  .l-menu-close {
    padding: 0;
    width: 22px;
    height: 22px;
    top: 30px;
    right: 28px;
  }
  .l-menu-close svg {
    width: 22px;
    height: 22px;
  }
}

.l-menu-sns {
  border-bottom: solid 1px #c8c8c8;
}

.l-menu-sns-hdg {
  margin-bottom: 9px;
  font-size: 1.2rem;
  line-height: 1;
  color: #888;
  text-align: center;
}

@media all and (min-width: 768px), print {
  .l-menu-sns-hdg {
    margin-bottom: 15px;
  }
}

.l-menu-sns-list {
  padding-bottom: 20px;
  /* border-bottom: solid 1px #c8c8c8; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media all and (min-width: 768px), print {
  .l-menu-sns-list {
    padding-bottom: 30px;
  }
}

.l-menu-sns-list-item:not(:first-child) {
  margin-left: 10px;
}

.l-menu-updates {
  padding-top: 24px;
  padding-bottom: 24px;
}

.l-menu-updates .list-updates-item:not(:last-child) {
  margin-bottom: 10px;
}

@media all and (min-width: 768px), print {
  .l-menu-updates .list-updates-item a {
    display: inline-block;
  }
}

@media all and (min-width: 768px), print {
  .l-menu-updates .list-updates-item-date {
    margin-bottom: 3px;
  }
}

.l-menu-updates .list-updates-item-title {
  letter-spacing: -0.04em;
}

.l-header[data-menu="open"],
.l-main[data-menu="open"],
.l-pagetop[data-menu="open"],
.l-footer-wrapper[data-menu="open"] {
  -webkit-transform: translateX(-280px);
  transform: translateX(-280px);
}

@media all and (min-width: 768px), print {
  .l-header[data-menu="open"],
  .l-main[data-menu="open"],
  .l-pagetop[data-menu="open"],
  .l-footer-wrapper[data-menu="open"] {
    -webkit-transform: none;
    transform: none;
  }
}

[data-menu-state="open"] {
  width: 100%;
  position: fixed;
  overflow: visible;
}

@media all and (min-width: 768px), print {
  [data-menu-state="open"] {
    width: auto;
    position: static;
    overflow: visible;
  }
}

[data-menu-overflow="hidden"] {
  overflow: hidden;
}

.l-main {
  padding-top: 41px;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media all and (min-width: 768px), print {
  .l-main {
    padding-top: 81px;
    padding-bottom: 110px;
  }
}

.l-content {
  margin-right: 20px;
  margin-left: 20px;
}

@media all and (min-width: 768px), print {
  .l-content {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
    position: relative;
  }
}

.l-content-body {
  margin-right: -20px;
  margin-left: -20px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 30px;
  background-color: #fff;
}

@media all and (min-width: 768px), print {
  .l-content-body {
    margin-right: 0;
    margin-left: 0;
    padding-right: 40px;
    padding-left: 40px;
    padding-bottom: 40px;
  }
}

.l-pagetop {
  width: 40px;
  height: 40px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10005;
  opacity: 1;
  -webkit-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.l-pagetop[data-pagetop="fade-out"] {
  opacity: 0;
}

.l-pagetop[data-pagetop="hide"] {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

.l-pagetop[data-pagetop-pos="static"] {
  position: static;
  display: none;
}

.l-pagetop[data-pagetop-pos="absolute"] {
  margin-top: -44px;
  position: absolute;
}

[data-updates="open"] .l-pagetop {
  z-index: 9999;
}

@media all and (min-width: 768px), print {
  .l-pagetop {
    right: 50px;
    bottom: 50px;
  }
  .l-pagetop[data-pagetop-pos="absolute"] {
    margin-top: -75px;
  }
}

@media print {
  .l-pagetop {
    display: none;
  }
}

.l-pagetop-target {
  width: 40px;
  height: 40px;
  display: block;
  position: relative;
  background-color: #008b41;
  -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.l-pagetop-target img {
  margin: auto;
  width: 25px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media all and (min-width: 768px), print {
  .l-pagetop-target:hover {
    background-color: #4cae7a;
  }
}

.l-footer-wrapper {
  margin-top: 84px;
  width: 100%;
  border-bottom: solid 1px #c8c8c8;
  position: relative;
  z-index: 10001;
  background-color: #fff;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media all and (min-width: 768px), print {
  .l-footer-wrapper {
    margin-top: 0;
  }
}

.l-footer-updates {
  width: 100%;
  position: absolute;
  bottom: 100%;
  z-index: 10;
}

@media all and (min-width: 768px), print {
  .l-footer-updates-hdg-wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
  }
}

.l-footer-updates-hdg {
  border-top: solid 1px #c8c8c8;
  border-right: solid 1px #c8c8c8;
  border-left: solid 1px #c8c8c8;
  margin-left: 10px;
  background-color: #fff;
  display: inline-block;
  position: relative;
}

@media all and (min-width: 768px), print {
  .l-footer-updates-hdg {
    margin-left: 0;
  }
  .l-footer-updates-hdg,
  .l-footer-updates-hdg .l-footer-updates-hdg-bg {
    -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .l-footer-updates-hdg .l-footer-updates-hdg-btn {
    -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .l-footer-updates-hdg .icon-arrow-path {
    -webkit-transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .l-footer-updates-hdg:hover {
    background-color: #005c8b;
  }
  .l-footer-updates-hdg:hover .l-footer-updates-hdg-bg {
    background-color: #005c8b;
  }
  .l-footer-updates-hdg:hover .l-footer-updates-hdg-btn {
    color: #fff;
  }
  .l-footer-updates-hdg:hover .icon-arrow-path {
    fill: #fff;
  }
}

.l-footer-updates-hdg-text {
  position: relative;
  z-index: 2;
}

.l-footer-updates-hdg-bg {
  border-top: solid 1px #c8c8c8;
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  top: 8px;
  right: -16px;
  z-index: 1;
  background-color: #fff;
  -webkit-transform: rotate(56deg);
  transform: rotate(56deg);
}

.l-footer-updates-hdg-btn {
  padding-right: 20px;
  padding-left: 28px;
  height: 28px;
  line-height: 28px;
  position: relative;
  z-index: 2;
  color: #005c8b;
  font-size: 1.6rem;
  outline: none;
  cursor: pointer;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

.l-footer-updates-hdg-btn .icon-arrow {
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 6px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.l-footer-updates-hdg-btn[aria-expanded="true"] .icon-arrow {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.l-footer-updates-body {
  position: relative;
  z-index: 20;
  background-color: #fff;
  outline: none;
  -webkit-transition: height 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: height 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.l-footer-updates-body[aria-hidden="true"] {
  height: 0;
  overflow: hidden;
}

.l-footer-updates-body[aria-hidden="false"] {
  height: 100%;
}

.l-footer-updates-list-wrapper {
  border-top: solid 1px #c8c8c8;
}

.l-footer-updates .list-updates {
  padding: 20px 11px 25px;
}

@media all and (min-width: 768px), print {
  .l-footer-updates .list-updates {
    margin-right: auto;
    margin-left: auto;
    padding: 20px 0;
    width: 960px;
  }
}

.l-footer {
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 12px;
  border-top: solid 1px #c8c8c8;
  position: relative;
  background-color: #fff;
  z-index: 10002;
}

@media all and (min-width: 768px), print {
  .l-footer {
    padding: 40px 0 54px;
    border-bottom: solid 1px #c8c8c8;
  }
}

@media all and (min-width: 768px), print {
  .l-footer-inner {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
  }
}

.l-footer-nav {
  margin-right: -10px;
  margin-left: -10px;
}

@media all and (min-width: 768px), print {
  .l-footer-nav {
    margin-right: 0;
    margin-left: 0;
  }
}

.l-footer-nav-list {
  margin-bottom: 20px;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.l-footer-nav-list:before,
.l-footer-nav-list:after {
  display: table;
  content: " ";
}

.l-footer-nav-list:after {
  clear: both;
}

@media all and (min-width: 768px), print {
  .l-footer-nav-list {
    margin-bottom: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.l-footer-nav-list-item {
  border-bottom: solid 1px #c8c8c8;
  float: left;
  width: 50%;
  position: relative;
}

.l-footer-nav-list-item:nth-child(odd) {
  border-left: solid 1px #c8c8c8;
}

.l-footer-nav-list-item:nth-child(even) {
  clear: left;
}

.l-footer-nav-list-item:first-child {
  border-left: none;
  width: 100%;
}

@media all and (min-width: 768px), print {
  .l-footer-nav-list-item {
    border-right: solid 1px #888;
    border-bottom: none;
    float: none;
    width: auto;
  }
  .l-footer-nav-list-item:nth-child(odd) {
    border-left: none;
  }
  .l-footer-nav-list-item:first-child {
    border-left: solid 1px #888;
    width: auto;
  }
}

.l-footer-nav-list-target {
  padding: 18px 22px 18px 31px;
  position: relative;
  display: block;
  background-color: #fff;
  color: #888;
  font-size: 2rem;
  line-height: 1;
  outline: none;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

.l-footer-nav-list-target .icon-arrow {
  margin-top: auto;
  margin-bottom: auto;
  width: 6px;
  height: 10px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  fill: #005c8b;
}

@media all and (min-width: 768px), print {
  .l-footer-nav-list-target {
    padding: 0 20px;
    color: #005c8b;
    font-size: 1.4rem;
    -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .l-footer-nav-list-target:hover {
    text-decoration: underline;
  }
  .l-footer-nav-list-target .icon-arrow {
    display: none;
  }
}

@media all and (min-width: 768px), print {
  .l-footer-utility,
  .l-footer-logo {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}

@media all and (min-width: 768px), print {
  .l-footer-utility-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media all and (min-width: 768px), print {
  .l-footer-utility-link {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
}

.l-footer-utility-list {
  padding-bottom: 5px;
  font-size: 1.2rem;
}

.l-footer-utility-list:before,
.l-footer-utility-list:after {
  display: table;
  content: " ";
}

.l-footer-utility-list:after {
  clear: both;
}

@media all and (min-width: 768px), print {
  .l-footer-utility-list {
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.l-footer-utility-list-item {
  margin-bottom: 10px;
  float: left;
  width: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.l-footer-utility-list-item:nth-child(even) {
  padding-left: 10px;
}

.l-footer-utility-list-item > a:hover {
  text-decoration: underline;
}

.l-footer-utility-list-item > a[target="_blank"] {
  padding-right: 16px;
  display: inline-block;
  position: relative;
}

.l-footer-utility-list-item > a[target="_blank"]:after {
  content: "";
  width: 13px;
  height: 13px;
  display: block;
  position: absolute;
  top: 0.15em;
  right: 0;
  background: url("../img/icon-blank.svg") no-repeat 0 0;
  background-size: auto 13px;
}

.l-footer-utility-list-item > a[target="_blank"].is-image {
  padding-right: 0;
}

.l-footer-utility-list-item > a[target="_blank"].is-image:after {
  display: none;
}

@media all and (min-width: 768px), print {
  .l-footer-utility-list-item {
    margin-bottom: 0;
    float: none;
    width: auto;
  }
  .l-footer-utility-list-item:not(:first-child) {
    margin-left: 30px;
  }
  .l-footer-utility-list-item:nth-child(even) {
    padding-left: 0;
  }
}

@media all and (min-width: 768px), print {
  .l-footer-group-list {
    margin-left: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.2rem;
  }
}

.l-footer-group-list-item {
  border: 1px solid #005c8b;
  padding: 4px 10px;
  text-align: center;
}

.l-footer-group-list-item:not(:last-child) {
  margin-bottom: 10px;
}

.l-footer-group-list-item > a:hover {
  text-decoration: underline;
}

.l-footer-group-list-item > a[target="_blank"] {
  padding-right: 16px;
  display: inline-block;
  position: relative;
}

.l-footer-group-list-item > a[target="_blank"]:after {
  content: "";
  width: 13px;
  height: 13px;
  display: block;
  position: absolute;
  top: 0.15em;
  right: 0;
  background: url("../img/icon-blank.svg") no-repeat 0 0;
  background-size: auto 13px;
}

.l-footer-group-list-item > a[target="_blank"].is-image {
  padding-right: 0;
}

.l-footer-group-list-item > a[target="_blank"].is-image:after {
  display: none;
}

@media all and (min-width: 768px), print {
  .l-footer-group-list-item:not(:last-child) {
    margin-bottom: 0;
  }
  .l-footer-group-list-item:not(:first-child) {
    margin-left: 10px;
  }
}

.l-footer-sns {
  margin-top: 20px;
}

@media all and (min-width: 768px), print {
  .l-footer-sns {
    margin-top: 3px;
    margin-left: 40px;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    font-size: 1.2rem;
  }
}

.l-footer-sns-hdg {
  margin-bottom: 9px;
  font-size: 1.2rem;
  line-height: 1;
  color: #888;
  text-align: center;
}

@media all and (min-width: 768px), print {
  .l-footer-sns-hdg {
    margin-bottom: 20px;
  }
}

.l-footer-sns-list {
  padding-bottom: 20px;
  border-bottom: solid 1px #c8c8c8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media all and (min-width: 768px), print {
  .l-footer-sns-list {
    padding-bottom: 40px;
    border-bottom: none;
  }
}

.l-footer-sns-list-item:not(:first-child) {
  margin-left: 10px;
}

.l-footer-sns-list-item-target {
  border: solid 1px #c8c8c8;
  border-radius: 50%;
  width: 50px;
  display: block;
  background-color: #fff;
}

.l-footer-sns-list-item-target svg {
  width: 48px;
  height: 48px;
}

@media all and (min-width: 768px), print {
  .l-footer-sns-list-item-target {
    -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .l-footer-sns-list-item-target:hover {
    background-color: #005c8b;
  }
}

@media all and (min-width: 768px), print {
  .l-footer-sns-list-icon {
    -webkit-transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  a:hover .l-footer-sns-list-icon {
    fill: #fff;
  }
}

.l-footer-copyright {
  margin-top: 10px;
  display: block;
  color: #888;
  font-size: 1.2rem;
  line-height: 1.167;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

@media all and (min-width: 768px), print {
  .l-footer-copyright {
    line-height: 1;
    display: inline-block;
    margin-top: 11px;
  }
}

.l-footer-logo {
  margin-top: 17px;
  text-align: right;
}

.l-footer-logo img {
  width: 149px;
}

@media all and (min-width: 768px), print {
  .l-footer-logo {
    margin-top: 0;
    width: 149px;
    display: inline;
    float: right;
    margin-right: 16px;
  }
}

.top-hero-wrapper {
  background-color: #000;
  color: #fff;
  overflow: hidden;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

.top-hero {
  position: relative;
  -webkit-animation: top-hero-show 1.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  animation: top-hero-show 1.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@-webkit-keyframes top-hero-show {
  0% {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes top-hero-show {
  0% {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}

.top-video-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.top-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

[data-play-video="ready"] .top-video {
  visibility: hidden;
}

[data-play-video="fade-out"] #js-player {
  opacity: 0;
  -webkit-animation: video-fade-out 0.8s ease-in-out;
  animation: video-fade-out 0.8s ease-in-out;
}

@-webkit-keyframes video-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes video-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.top-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.top-hero-target {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.top-hero-title {
  position: absolute;
  right: 20px;
  left: 20px;
  bottom: 30px;
  z-index: 100;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

.top-hero-title[data-hero-title="show"] {
  opacity: 1;
}

@media all and (min-width: 768px), print {
  .top-hero-title {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
    right: 0;
    left: 0;
    bottom: 50px;
  }
}

.top-hero-title-inner {
  padding: 0 5px 3px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.3);
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media all and (min-width: 768px), print {
  .top-hero-title-inner {
    font-size: 1.8rem;
  }
}

@media all and (min-width: 768px), print {
  #js-player {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}

.top-hero-scrolldown {
  display: none;
}

@media all and (min-width: 768px), print {
  .top-hero-scrolldown {
    margin-right: auto;
    margin-left: auto;
    padding: 18px;
    width: 93px;
    height: 67px;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    opacity: 0;
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1), transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1), transform 1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .top-hero-scrolldown img {
    width: 57px;
    height: auto !important;
    visibility: visible !important;
  }
  .top-hero-scrolldown[data-hero-scrolldown="show"] {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.top-hero {
  height: 300px;
}

@media all and (min-width: 768px), print {
  .top-hero {
    height: 550px;
  }
}

@media all and (min-width: 768px), print {
  .top-index-filter-wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
  }
  .top-index-filter-wrapper:before,
  .top-index-filter-wrapper:after {
    display: table;
    content: " ";
  }
  .top-index-filter-wrapper:after {
    clear: both;
  }
}

.top-index-btn-sns {
  margin-bottom: 28px;
}

@media all and (min-width: 768px), print {
  .top-index-btn-sns {
    margin-top: 5px;
    margin-bottom: 0;
    float: right;
  }
}

.top-index {
  position: relative;
}

@media all and (min-width: 768px), print {
  .top-index {
    padding-top: 40px;
  }
  .top-index .btn-sns {
    margin-top: 0;
  }
}

.top-index-filter {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 30px;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

@media all and (min-width: 768px), print {
  .top-index-filter {
    margin-right: 0;
    margin-left: 0;
    float: left;
  }
}

@media all and (min-width: 768px), print {
  .top-index-filter-inner {
    padding: 9px 15px 9px 17px;
    border: solid 1px #c8c8c8;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
  }
}

.top-index-filter-hdg {
  margin-bottom: 10px;
  font-size: 1.6rem;
  line-height: 1;
}

@media all and (min-width: 768px), print {
  .top-index-filter-hdg {
    margin-right: 34px;
    margin-bottom: 0;
  }
}

.top-index-filter-select {
  padding: 10px;
  border: solid 1px #c8c8c8;
  border-radius: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  background-color: #fff;
  color: #005c8b;
  font-size: 1.6rem;
  line-height: 1;
}

@media all and (min-width: 768px), print {
  .top-index-filter-select {
    display: none;
  }
}

.top-index-filter-select-wrapper {
  position: relative;
}

.top-index-filter-select-wrapper:after {
  content: "";
  margin-top: auto;
  margin-bottom: auto;
  width: 6px;
  height: 10px;
  display: block;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  background: url("../img/icon-arrow.svg") no-repeat 0 0;
  background-size: auto 10px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

@media all and (min-width: 768px), print {
  .top-index-filter-select-wrapper:after {
    display: none;
  }
}

.top-index-filter-list {
  display: none;
}

@media all and (min-width: 768px), print {
  .top-index-filter-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media all and (min-width: 768px), print {
  .top-index-filter-list-item:not(:first-child) {
    margin-left: 10px;
  }
}

@media all and (min-width: 768px), print {
  .top-index-filter-list-btn {
    padding: 7px 15px;
    color: #005c8b;
    font-size: 1.8rem;
    line-height: 1;
    outline: none;
    -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .top-index-filter-list-btn:hover,
  .top-index-filter-list-btn[aria-selected="true"] {
    background-color: #005c8b;
    color: #fff;
  }
}

.top-index-list {
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
  outline: none;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

@media all and (min-width: 768px), print {
  .top-index-list {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: -30px;
    width: 960px;
  }
}

@media all and (min-width: 768px), print {
  [data-article-more-container] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

[data-add-content="fade-out"] {
  height: 9999px;
  /* 領域の確保 */
}

.top-index-list-item {
  margin-bottom: 20px;
  position: relative;
}

.top-index-list-item:last-child {
  margin-bottom: 0;
}

@media all and (min-width: 768px), print {
  .top-index-list-item {
    margin-bottom: 30px;
    margin-left: 30px;
    width: 300px;
  }
  .top-index-list-item:nth-child(3n + 1) {
    margin-left: 0;
  }
  .top-index-list-item:last-child {
    margin-bottom: 30px;
  }
}

.top-index-list-item-target {
  display: block;
}

.top-index-list-item-new {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

@media all and (max-width: 767px), print {
  [data-article-type="column"] .top-index-list-item-new,
  [data-article-type="topics"] .top-index-list-item-new {
    right: auto;
    left: 0;
  }
}

.top-index-list-item-image {
  width: 100%;
}

@media all and (min-width: 768px), print {
  .top-index-list-item-image {
    padding-top: 0;
  }
}

[data-article-type="project"] .top-index-list-item-image {
  padding-top: 133.3333%;
}

@media all and (min-width: 768px), print {
  [data-article-type="project"] .top-index-list-item-image {
    padding-top: 0;
    width: 300px;
    height: 400px;
  }
}

@media all and (max-width: 767px), print {
  [data-article-type="column"] .top-index-list-item-image,
  [data-article-type="topics"] .top-index-list-item-image,
  [data-article-type="photo"] .top-index-list-item-image,
  [data-article-type="webpage"] .top-index-list-item-image {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 10px;
    left: 10px;
  }
}

@media all and (min-width: 768px), print {
  [data-article-type="column"] .top-index-list-item-image,
  [data-article-type="topics"] .top-index-list-item-image,
  [data-article-type="photo"] .top-index-list-item-image,
  [data-article-type="webpage"] .top-index-list-item-image {
    width: 278px;
    height: 278px;
  }
}

.top-index-list-item-detail {
  display: none;
}

@media all and (min-width: 768px), print {
  .top-index-list-item-detail {
    padding: 11px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    color: #fff;
    text-align: center;
  }
}

@media all and (min-width: 768px), print {
  .top-index-list-item-detail-bg {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    -webkit-transform: scale(0.95, 0.95);
    transform: scale(0.95, 0.95);
    -webkit-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  [data-transition-item="true"] a:hover .top-index-list-item-detail-bg {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@media all and (min-width: 768px), print {
  .top-index-list-item-detail-inner {
    padding-top: 70px;
    max-width: 100%;
    position: relative;
    opacity: 0;
    -webkit-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  [data-transition-item="true"] a:hover .top-index-list-item-detail-inner {
    opacity: 1;
  }
}

@media all and (min-width: 768px), print {
  .top-index-list-item-detail-icon {
    margin-right: auto;
    margin-left: auto;
    width: 44px;
    height: 44px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: url("../img/icon-logomark-white.svg") no-repeat 0 0;
    background-size: auto 44px;
  }
}

@media all and (min-width: 768px), print {
  .top-index-list-item-detail-desc {
    font-size: 2rem;
    line-height: 1.2;
  }
}

@media all and (min-width: 768px), print {
  .top-index-list-item-detail-more {
    font-size: 2rem;
    line-height: 1;
  }
  .top-index-list-item-detail-desc + .top-index-list-item-detail-more {
    margin-top: 15px;
    font-size: 1.6rem;
  }
}

.top-index-list-item-soon {
  padding: 11px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  background-color: rgba(255, 255, 255, 0.7);
  color: #333;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

[data-article-type="column"] .top-index-list-item-soon {
  padding-bottom: 3.5rem;
}

.top-index-list-item-project-serial {
  padding: 13px 26px 13px 13px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
}

.top-index-list-item-project-serial:before,
.top-index-list-item-project-serial:after {
  display: table;
  content: " ";
}

.top-index-list-item-project-serial:after {
  clear: both;
}

.top-index-list-item-project-serial-icon,
.top-index-list-item-project-serial-text {
  float: left;
}

.top-index-list-item-project-serial-icon,
.top-index-list-item-project-serial-icon img {
  width: 45px;
}

.top-index-list-item-project-serial-text {
  margin-left: 14px;
  padding-left: 14px;
  border-left: solid 1px #c8c8c8;
}

.top-index-list-item-project-serial-label,
.top-index-list-item-project-serial-num {
  display: block;
}

.top-index-list-item-project-title {
  padding: 18px 20px;
  min-width: 90%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: #fff;
  text-align: center;
}

.top-index-list-item-project-title-inner {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: solid 3px #000;
  border-bottom: solid 3px #000;
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.top-index-list-item-project-serial-label {
  margin-bottom: 2px;
  padding-top: 3px;
  width: 57px;
}

.top-index-list-item-project-serial-label > img {
  width: 57px;
  height: 7px;
  display: block;
}

.top-index-list-item-project-serial-num {
  font-size: 3.2rem;
  line-height: 1;
}

[data-article-type="column"] .top-index-list-item-target,
[data-article-type="topics"] .top-index-list-item-target,
[data-article-type="photo"] .top-index-list-item-target,
[data-article-type="webpage"] .top-index-list-item-target {
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  border: solid 1px #c8c8c8;
  background-color: #fff;
}

@media all and (max-width: 767px), print {
  [data-article-type="column"] .top-index-list-item-target,
  [data-article-type="topics"] .top-index-list-item-target,
  [data-article-type="photo"] .top-index-list-item-target,
  [data-article-type="webpage"] .top-index-list-item-target {
    padding-bottom: 10px;
    padding-left: 120px;
  }
  [data-article-type="column"] .top-index-list-item-column-header,
  [data-article-type="topics"] .top-index-list-item-column-header,
  [data-article-type="photo"] .top-index-list-item-column-header,
  [data-article-type="webpage"] .top-index-list-item-column-header {
    min-height: 100px;
  }
}

@media all and (min-width: 768px), print {
  [data-article-type="column"] .top-index-list-item-column-header,
  [data-article-type="topics"] .top-index-list-item-column-header,
  [data-article-type="photo"] .top-index-list-item-column-header,
  [data-article-type="webpage"] .top-index-list-item-column-header {
    margin-top: -25px;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  [data-add-content-category*="column"] [data-article-type="column"],
  [data-add-content-category*="topics"] [data-article-type="column"],
  [data-add-content-category*="column"] [data-article-type="topics"],
  [data-add-content-category*="topics"] [data-article-type="topics"] {
    margin-top: 0;
  }
}

.top-index-list-item-column-header {
  position: absolute;
  right: 9px;
  bottom: 11px;
  left: 11px;
  z-index: 10;
}

@media all and (max-width: 767px), print {
  .top-index-list-item-column-header {
    position: static;
  }
}

.top-index-list-item-column-series {
  margin-bottom: -0.25em;
  padding-right: 12px;
  display: inline-block;
  background-color: #fff;
}

@media all and (min-width: 768px), print {
  .top-index-list-item-column-series {
    padding-top: 8px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}

@media all and (min-width: 768px), print {
  .top-index-list-item-column-series-icon {
    white-space: nowrap;
  }
}

.top-index-list-item-column-series-name {
  display: inline-block;
  margin-left: 6px;
  color: #008b41;
  /* line-height: 1.; */
}

.top-index-list-item-column-title {
  padding: 13px 6px 7px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  color: #333;
  line-height: 1.25;
}

.top-index-list-item-column-title.link {
  color: #008b41;
}

.top-index-list-item-column-series + .top-index-list-item-column-title {
  padding-top: 10px;
}

.top-index-list-item-column-description {
  color: #333;
  padding: 0 10px 7px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.25;
  font-weight: normal;
}

.top-index-more {
  height: 0;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  font-size: 0;
}

.project-hero-wrapper {
  background-color: #000;
  color: #fff;
  overflow: hidden;
}

.project-hero {
  height: 440px;
  -webkit-animation: top-hero-show 1.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  animation: top-hero-show 1.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media all and (min-width: 768px), print {
  .project-hero {
    height: 600px;
  }
}

@-webkit-keyframes project-hero-show {
  0% {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes project-hero-show {
  0% {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}

.project-body {
  margin-bottom: 28px;
}

@media all and (min-width: 768px), print {
  .project-body {
    margin-bottom: 60px;
  }
}

.project-header {
  margin-top: -35px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: show-project-header 2s cubic-bezier(0.645, 0.045, 0.355, 1);
  animation: show-project-header 2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media all and (min-width: 768px), print {
  .project-header {
    margin-top: -184px;
  }
}

@-webkit-keyframes show-project-header {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes show-project-header {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media all and (min-width: 768px), print {
  .project-header-item {
    width: 367px;
  }
}

.project-serial {
  padding: 7px 16px 6px 16px;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: "DINWebPro-Medium W01 Regular", Arial, sans-serif;
}

@media all and (min-width: 768px), print {
  .project-serial {
    padding: 9px 10px 9px 20px;
  }
}

.project-serial-icon {
  margin-top: 3px;
  margin-bottom: 4px;
  margin-right: 14px;
  padding-right: 14px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-right: solid 1px #c8c8c8;
}

.project-serial-icon img {
  width: 43px;
  min-width: 43px;
}

@media all and (min-width: 768px), print {
  .project-serial-icon {
    margin-right: 19px;
    padding-right: 20px;
  }
  .project-serial-icon img {
    width: 62px;
    min-width: 62px;
  }
}

.project-serial-label,
.project-serial-num {
  display: block;
}

.project-serial-label {
  line-height: 0;
}

.project-serial-label img {
  width: 97px;
  min-width: 97px;
}

@media all and (min-width: 768px), print {
  .project-serial-label img {
    width: 127px;
    min-width: 127px;
  }
}

.project-serial-num {
  margin-top: -0.2em;
  margin-left: 15px;
  font-size: 3.8rem;
}

@media all and (min-width: 768px), print {
  .project-serial-num {
    margin-left: 18px;
    font-size: 5rem;
  }
}

.project-title-wrapper {
  margin-top: 10px;
  padding: 20px;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  color: #00a040;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

@media all and (min-width: 768px), print {
  .project-title-wrapper {
    margin-bottom: 43px;
  }
}

.project-title {
  font-size: 3.4rem;
  line-height: 1.2;
}

.project-lead {
  margin-top: 18px;
  padding-top: 18px;
  border-top: solid 2px #333;
  font-size: 1.8rem;
  line-height: 1.222;
}

@media all and (min-width: 768px), print {
  .project-lead {
    font-size: 2.2rem;
    line-height: 1.364;
  }
}

.project-header-sns {
  margin-top: 12px;
  margin-bottom: 12px;
}

.project-header-sns .btn-sns {
  margin: 0;
}

@media all and (min-width: 768px), print {
  .project-header-sns {
    margin: 0;
    display: block;
    position: absolute;
    top: calc(42px + 184px);
    right: 0;
  }
  .project-header-sns .btn-sns {
    padding: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

[data-category="column"] .l-content {
  padding-top: 20px;
}

@media all and (min-width: 768px), print {
  [data-category="column"] .l-content {
    padding-top: 40px;
  }
}

.column-header {
  margin-bottom: 20px;
}

@media all and (min-width: 768px), print {
  .column-header {
    margin-bottom: 0;
    padding: 30px 20px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
  }
}

.column-header-inner {
  padding: 20px;
  background-color: #fff;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

@media all and (min-width: 768px), print {
  .column-header-inner {
    padding: 0;
    background-color: transparent;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}

.column-header-series:before,
.column-header-series:after {
  display: table;
  content: " ";
}

.column-header-series:after {
  clear: both;
}

.column-header-series-icon,
.column-header-series-name {
  vertical-align: top;
}

.column-header-series-icon {
  margin-right: 10px;
  float: left;
  white-space: nowrap;
}

.column-header-series-icon.icon-series {
  position: static;
  font-size: 1.4rem;
}

@media all and (min-width: 768px), print {
  .column-header-series-icon.icon-series {
    font-size: 1.6rem;
  }
}

.column-header-series-name {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #008b41;
  font-size: 1.8rem;
  line-height: 1.25;
}

@media all and (min-width: 768px), print {
  .column-header-series-name {
    font-size: 2rem;
  }
}

.column-hdg {
  margin-bottom: 25px;
  font-size: 2.2rem;
  line-height: 1.4;
}

@media all and (min-width: 768px), print {
  .column-hdg {
    margin-right: auto;
    margin-left: auto;
    margin-top: 60px;
    margin-bottom: 50px;
    width: 600px;
    font-size: 2.8rem;
  }
  .article-lead + .column-hdg {
    margin-top: 55px;
  }
}

.column-hdg-num {
  margin-right: 10px;
  color: #888;
}

@media all and (min-width: 768px), print {
  .column-hdg-num {
    margin-right: 30px;
  }
}

.column-hdg-label {
  margin-top: -5px;
  display: block;
  color: #ccc;
  font-size: 3rem;
  line-height: 1;
}

@media all and (min-width: 768px), print {
  .column-hdg-label {
    font-size: 4rem;
  }
}

.column-header-sns {
  margin-top: 12px;
  margin-bottom: 12px;
}

.column-header-sns .btn-sns {
  margin: 0;
}

@media all and (min-width: 768px), print {
  .column-header-sns {
    margin: 0;
    display: block;
  }
  .column-header-sns .btn-sns {
    margin: 0;
    padding: 0 0 0 30px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}

/* --------------------
  Photo
-------------------- */
/* ----- List ----- */
/* ----- Article ----- */
[data-category="photo"] .l-content {
  padding-top: 20px;
}

@media all and (min-width: 768px), print {
  [data-category="photo"] .l-content {
    padding-top: 40px;
  }
}

.photo-article-header {
  margin-bottom: 20px;
}

@media all and (min-width: 768px), print {
  .photo-article-header {
    margin-bottom: 0;
    padding: 30px 20px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
  }
}

.photo-article-header-inner {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  font-size: 2rem;
}

@media all and (min-width: 768px), print {
  .photo-article-header-inner {
    padding: 0 155px;
    background-color: transparent;
    text-align: center;
  }
}

/* @media all and (min-width: 768px), print {
  .photo-article-header-series {
    margin: 0 0 30px;
  }
} */
.photo-article-header-series-name {
  font-size: 1.8rem;
}

@media all and (min-width: 768px), print {
  .photo-article-header-series-name {
    font-size: 2.6rem;
  }
}

.photo-article-hdg {
  margin-bottom: 25px;
  font-size: 2.2rem;
  line-height: 1.4;
}

@media all and (min-width: 768px), print {
  .photo-article-hdg {
    margin-right: auto;
    margin-left: auto;
    margin-top: 60px;
    margin-bottom: 50px;
    width: 600px;
    font-size: 2.8rem;
  }
  .article-lead + .photo-article-hdg {
    margin-top: 55px;
  }
}

.photo-article-hdg-label {
  margin-top: -5px;
  display: block;
  color: #ccc;
  font-size: 3rem;
  line-height: 1;
}

@media all and (min-width: 768px), print {
  .photo-article-hdg-label {
    font-size: 4rem;
  }
}

.photo-article-header-sns {
  margin-top: 12px;
  margin-bottom: 12px;
}

.photo-article-header-sns .btn-sns {
  margin: 0;
}

@media all and (min-width: 768px), print {
  .photo-article-header-sns {
    margin: 0;
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .photo-article-header-sns .btn-sns {
    /* margin: 0; */
    /* padding: 0 0 0 30px; */
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    /* -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; */
  }
}

[data-category="photo"] .article-hero-wrapper:not(:last-child) {
  margin-bottom: 60px;
}

@media (min-width: 768px), print {
  [data-category="photo"] .article-hero-wrapper:not(:last-child) {
    margin-bottom: 80px;
  }
}

.photo-article-series-head {
  max-width: 700px;
  margin: 0 auto;
}

@media (min-width: 768px), print {
  .photo-article-series-head {
    text-align: center;
  }
}

.photo-article-series-type {
  font-size: 2.2rem;
}

@media (min-width: 768px), print {
  .photo-article-series-type {
    font-size: 3rem;
    padding-right: 1em;
    display: inline;
    border-right: 1px solid #333;
  }
}

.photo-article-series-name-area {
  font-size: 2.2rem;
}

@media (min-width: 768px), print {
  .photo-article-series-name-area {
    font-size: 3rem;
    padding-left: 1em;
    display: inline;
  }
}

.photo-article-series-title {
  font-size: 1.6rem;
  margin-top: 10px;
  margin-bottom: 60px;
}

@media (min-width: 768px), print {
  .photo-article-series-title {
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    vertical-align: middle;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 80px;
    font-size: 1.9rem;
    margin-top: 20px;
  }
  .photo-article-series-title::before,
  .photo-article-series-title::after {
    content: "";
    display: inline-block;
    /* flex-grow: 1; */
    width: 2em;
    height: 1px;
    background: #333;
    margin-top: -0.15em;
  }
  .photo-article-series-title::before {
    margin-right: 1em;
    /* left: -2.5em; */
  }
  .photo-article-series-title::after {
    margin-left: 1em;
    /* right: -2.5em; */
  }
}

[data-category="photo"] .article-lead {
  max-width: 700px;
  width: auto;
  margin: 0 auto;
  padding: 2.5em;
  /* border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  border-right: none;
  border-left: none;
  padding: 2.5em 0;
  font-size: 1.3rem; */
}

@media all and (min-width: 768px), print {
  [data-category="photo"] .article-lead {
    /* font-size: 1.5rem; */
  }
}

[data-category="photo"] .article-lead:not(:last-child) {
  margin-bottom: 60px;
}

@media (min-width: 768px), print {
  [data-category="photo"] .article-lead:not(:last-child) {
    margin-bottom: 80px;
  }
}

[data-category="photo"] .article-lead p {
  margin-top: 2em;
  line-height: 1.9;
}

[data-category="photo"] .article-lead p:first-child {
  margin-top: 0;
}

[data-category="photo"] .article-col-01 {
  max-width: 700px;
  width: auto;
  margin: 0 auto;
}

[data-category="photo"] .article-col-01:not(:last-child) {
  margin-bottom: 60px;
}

@media (min-width: 768px), print {
  [data-category="photo"] .article-col-01:not(:last-child) {
    margin-bottom: 60px;
  }
}

[data-category="photo"] .article-text {
  line-height: 1.9;
}

[data-category="photo"] .article-text:not(:last-child) {
  margin-bottom: 2em;
}

/* .photo-hero-wrapper {
  background-color: #000;
  color: #fff;
  overflow: hidden;
}

.photo-hero {
  height: 440px;
  -webkit-animation: top-hero-show 1.8s cubic-bezier(0.645, 0.045, 0.355, 1);
          animation: top-hero-show 1.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@media all and (min-width: 768px), print {
  .photo-hero {
    height: 800px;
  }
} */
/* --------------------
  Webpage
-------------------- */
/* ----- List ----- */
[data-article-type="webpage"] .top-index-list-item-column-title {
  color: #008b41;
}

[data-category="topics"] .l-content {
  padding-top: 20px;
}

@media all and (min-width: 768px), print {
  [data-category="topics"] .top-index {
    padding-top: 0;
  }
  [data-category="topics"] .l-content {
    padding-top: 40px;
  }
  [data-category="topics"] .hdg-01-wrapper {
    margin-bottom: 0;
  }
}

.topics {
  margin-bottom: 28px;
}

@media all and (min-width: 768px), print {
  .topics {
    margin-bottom: 40px;
  }
}

.topics-header {
  margin-bottom: 20px;
  background-color: #fff;
}

@media all and (min-width: 768px), print {
  .topics-header {
    margin-bottom: 0;
    padding: 30px 20px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.topics-header-inner {
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  padding: 20px;
}

@media all and (min-width: 768px), print {
  .topics-header-inner {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0;
  }
}

.topics-header-series:before,
.topics-header-series:after {
  display: table;
  content: " ";
}

.topics-header-series:after {
  clear: both;
}

.topics-header-series-icon,
.topics-header-series-name {
  vertical-align: top;
}

.topics-header-series-icon {
  margin-right: 10px;
  float: left;
  white-space: nowrap;
}

.topics-header-series-icon.icon-series {
  position: static;
  font-size: 1.4rem;
}

@media all and (min-width: 768px), print {
  .topics-header-series-icon.icon-series {
    font-size: 1.6rem;
  }
}

.topics-header-series-name {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #008b41;
  font-size: 1.8rem;
  line-height: 1.25;
}

@media all and (min-width: 768px), print {
  .topics-header-series-name {
    font-size: 2rem;
  }
}

.topics-hdg {
  margin-bottom: 25px;
  font-size: 2.2rem;
  line-height: 1.4;
}

@media all and (min-width: 768px), print {
  .topics-hdg {
    margin-right: auto;
    margin-left: auto;
    margin-top: 60px;
    margin-bottom: 50px;
    width: 600px;
    font-size: 2.8rem;
  }
  .article-lead + .topics-hdg {
    margin-top: 55px;
  }
}

.topics-hdg-num {
  margin-right: 10px;
  color: #888;
}

@media all and (min-width: 768px), print {
  .topics-hdg-num {
    margin-right: 30px;
  }
}

.topics-hdg-label {
  margin-top: -5px;
  display: block;
  color: #ccc;
  font-size: 3rem;
  line-height: 1;
}

@media all and (min-width: 768px), print {
  .topics-hdg-label {
    font-size: 4rem;
  }
}

.topics-header-sns {
  display: none;
}

@media all and (min-width: 768px), print {
  .topics-header-sns {
    display: block;
  }
  .topics-header-sns .btn-sns {
    margin: 0;
    padding: 0 0 0 30px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}

[data-category="about"] .l-content {
  padding-top: 20px;
}

@media all and (min-width: 768px), print {
  [data-category="about"] .l-content {
    padding-top: 40px;
  }
}

.about {
  opacity: 0;
}

[data-window-load="true"] .about {
  opacity: 1;
  -webkit-animation: show-about 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: show-about 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@-webkit-keyframes show-about {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes show-about {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.about-logo {
  margin: 0 40px 68px;
  padding-top: 37px;
  text-align: center;
}

@media all and (min-width: 768px), print {
  .about-logo {
    margin: 0 auto 41px;
    padding-top: 60px;
    width: 470px;
  }
}

.about-catch {
  margin-bottom: 45px;
  margin-left: -20px;
  padding-left: 20px;
  background-color: rgba(255, 255, 255, 0.8);
}

@media all and (min-width: 768px), print {
  .about-catch {
    margin-bottom: 47px;
    margin-left: 0;
    padding-left: 103px;
    display: table;
  }
  .about-catch > img {
    width: 480px;
  }
}

@media all and (min-width: 768px), print {
  .about-text {
    margin-right: auto;
    margin-left: auto;
    width: 528px;
  }
}

.about-hero {
  margin-right: -20px;
  margin-left: -20px;
  padding-top: 22px;
  padding-bottom: 16px;
  background-color: #fff;
}

.about-hero > img {
  width: 100%;
}

@media all and (min-width: 768px), print {
  .about-hero {
    margin-right: 0;
    margin-left: 0;
    padding-top: 45px;
    padding-bottom: 40px;
  }
}

@media all and (min-width: 768px), print {
  [data-category="about"] .tbl-line {
    margin-top: 53px;
  }
}

[data-category="error"] .l-content {
  padding-top: 20px;
}

@media all and (min-width: 768px), print {
  [data-category="error"] {
    padding-top: 80px;
  }
}

.error {
  padding: 15px 20px 20px;
  background-color: #fff;
}

@media all and (min-width: 768px), print {
  .error {
    padding: 50px 180px 60px;
  }
}

.error-hdg {
  margin-bottom: 10px;
  color: #008b41;
  font-size: 2.4rem;
  line-height: 1.25;
  font-family: "FOT-筑紫オールドゴシック Std B", sans-serif;
}

@media all and (min-width: 768px), print {
  .error-hdg {
    margin-bottom: 35px;
    font-size: 3.4rem;
    line-height: 1.214;
  }
}

.error-desc {
  line-height: 1.857;
}

@media all and (min-width: 768px), print {
  .error-desc {
    line-height: 1.75;
  }
}

.error-link {
  margin-top: 25px;
}

@media all and (min-width: 768px), print {
  .error-link {
    margin-top: 55px;
  }
}

.error-link-item {
  font-size: 1.6rem;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

.error-link-item a {
  padding-left: 17px;
  display: inline-block;
  position: relative;
  color: #888;
}

.error-link-item a:before {
  content: "";
  width: 6px;
  height: 10px;
  display: block;
  position: absolute;
  top: 0.55em;
  left: 0;
  background: url("../img/icon-arrow.svg") no-repeat 0 0;
  background-size: auto 10px;
}

.error-link-item a:hover {
  text-decoration: underline;
}

.article {
  margin-right: -20px;
  margin-left: -20px;
  padding-top: 30px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 30px;
  background-color: #fff;
}

.article a:hover {
  text-decoration: underline;
}

.article a[target="_blank"] {
  padding-right: 24px;
  display: inline-block;
  position: relative;
}

.article a[target="_blank"]:after {
  content: "";
  width: 13px;
  height: 13px;
  display: block;
  position: absolute;
  top: 0.3em;
  right: 8px;
  background: url("../img/icon-blank.svg") no-repeat 0 0;
  background-size: auto 13px;
}

.article a[target="_blank"].is-image {
  padding-right: 0;
}

.article a[target="_blank"].is-image:after {
  display: none;
}

.article .btn-sns a {
  padding-right: inherit;
  display: block;
}

.article .btn-sns a:after {
  display: none;
}

@media all and (min-width: 768px), print {
  .article {
    margin-right: 0;
    margin-left: 0;
    padding-top: 60px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 60px;
  }
}

.article-hero-wrapper {
  margin-right: -20px;
  margin-left: -20px;
}

.article-hero-wrapper:first-child {
  margin-top: -30px;
}

.article-hero-wrapper:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .article-hero-wrapper {
    margin-right: 0;
    margin-left: 0;
  }
  .article-hero-wrapper:first-child {
    margin-top: -60px;
  }
  .article-hero-wrapper:not(:last-child) {
    margin-bottom: 55px;
  }
}

.article-hero {
  width: 100%;
}

.article-hero:before {
  content: "";
  display: block;
  padding-top: 63.333%;
}

.article-hero + figcaption {
  padding-right: 20px;
  padding-left: 20px;
}

@media all and (min-width: 768px), print {
  .article-hero {
    width: 960px;
    height: 608px;
  }
  .article-hero:before {
    display: none;
  }
  .article-hero + figcaption {
    padding-right: 30px;
    padding-left: 30px;
  }
}

.article-video-wrapper:first-child {
  margin-top: -30px;
}

@media all and (min-width: 768px), print {
  .article-video-wrapper:first-child {
    margin-top: -60px;
  }
}

.article-video {
  margin-right: -20px;
  margin-left: -20px;
  position: relative;
  max-width: 960px;
  background-color: #000;
}

.article-video:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.article-video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media all and (min-width: 768px), print {
  .article-video {
    margin-right: 0;
    margin-left: 0;
  }
  .article-video + figcaption {
    padding-right: 30px;
    padding-left: 30px;
  }
  .article-col-01 .article-video + figcaption {
    padding-right: inherit;
    padding-left: inherit;
  }
}

.article-hdg-01 {
  margin-top: 25px;
  margin-bottom: 10px;
  color: #009f40;
  font-size: 1.6rem;
  line-height: 1.5;
}

@media all and (min-width: 768px), print {
  .article-hdg-01 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 2rem;
    line-height: 1.2;
  }
}

.article-text {
  line-height: 1.857;
  text-align: justify;
}

.article-text:not(:last-child) {
  margin-bottom: 1em;
}

@media all and (min-width: 768px), print {
  .article-text {
    line-height: 1.75;
  }
}

.article-media-wrapper:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .article-media-wrapper {
    margin-right: 30px;
    margin-left: 30px;
  }
  .article-media-wrapper .article-media {
    width: 70%;
  }
  .article-media-wrapper:not(:last-child) {
    margin-bottom: 50px;
  }
}

.article-media:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .article-media:not(:last-child) {
    margin-bottom: 55px;
  }
}

.article-media-caption {
  margin-top: 8px;
  font-size: 1.2rem;
}

@media all and (min-width: 768px), print {
  .article-media-caption:not(:last-child) {
    margin-bottom: 55px;
  }
}

.article-link:not(:last-child) {
  margin-bottom: 15px;
}

.article-link a {
  padding-left: 11px;
  display: inline-block;
  position: relative;
}

.article-link a:before {
  content: "";
  width: 6px;
  height: 10px;
  display: block;
  position: absolute;
  top: 0.4em;
  left: 0;
  background: url("../img/icon-arrow.svg") no-repeat 0 0;
  background-size: auto 10px;
}

.article-link a[target="_blank"] {
  padding-left: 0;
}

.article-link a[target="_blank"]:before {
  display: none;
}

.article-link-item:not(:first-child) {
  margin-top: 5px;
}

.article-col-01:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .article-col-01 {
    margin-right: auto;
    margin-left: auto;
    width: 600px;
  }
  .article-col-01:not(:last-child) {
    margin-bottom: 50px;
  }
}

.article-col-02:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .article-col-02:before,
  .article-col-02:after {
    display: table;
    content: " ";
  }
  .article-col-02:after {
    clear: both;
  }
  .article-col-02:not(:last-child) {
    margin-bottom: 50px;
  }
}

.article-col-02-img-left,
.article-col-02-img-right {
  margin-right: auto;
  margin-left: auto;
  display: table;
}

@media all and (min-width: 768px), print {
  .article-col-02-img-left figcaption,
  .article-col-02-img-right figcaption {
    margin-bottom: 10px;
  }
  .article .article-col-02-img-left:not(:last-child),
  .article .article-col-02-img-right:not(:last-child) {
    margin-bottom: 0;
  }
}

@media all and (min-width: 768px), print {
  .article-col-02-img-left {
    margin-right: 30px;
    float: left;
  }
  .article-col-02-img-left figcaption {
    padding-left: 30px;
  }
}

@media all and (min-width: 768px), print {
  .article-col-02-img-right {
    margin-left: 30px;
    float: right;
  }
  .article-col-02-img-right figcaption {
    padding-right: 30px;
  }
}

.article-col-02-img-landscape {
  max-width: 600px;
}

.article-col-02-img-portrait {
  max-width: 400px;
}

@media all and (min-width: 768px), print {
  .article-col-02-text {
    margin-right: 30px;
    margin-left: 30px;
    overflow: hidden;
  }
  .article-col-02-text.is-float {
    overflow: visible;
  }
}

.article-slogan:not(:first-child) {
  margin-top: 20px;
}

.article-slogan:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .article-slogan:not(:first-child) {
    margin-top: 35px;
  }
  .article-slogan:not(:last-child) {
    margin-bottom: 50px;
  }
}

.article-lead {
  margin-top: 30px;
  padding: 12px 15px;
  border: dotted 1px #c8c8c8;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.857;
  text-align: justify;
}

.article-lead:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .article-lead {
    margin-top: 60px;
    margin-right: auto;
    margin-left: auto;
    padding: 16px 19px;
    width: 600px;
    line-height: 1.75;
  }
  .article-lead:not(:last-child) {
    margin-bottom: 50px;
  }
}

.article-box-01 {
  padding: 15px;
  border: dotted 1px #c8c8c8;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.2rem;
}

@media all and (min-width: 768px), print {
  .article-box-01 {
    margin-right: auto;
    margin-left: auto;
    width: 600px;
    font-size: 1.3rem;
  }
}

.article-note {
  font-size: 1.2rem;
}

.article-note:not(:first-child) {
  margin-top: 20px;
}

.article-note:not(:last-child) {
  margin-bottom: 20px;
}

@media all and (min-width: 768px), print {
  .article-note:not(:first-child) {
    margin-top: 35px;
  }
  .article-note:not(:last-child) {
    margin-bottom: 35px;
  }
}

.article-note-item {
  padding-left: 1.5em;
  position: relative;
}

.article-note-item:not(:first-child) {
  margin-top: 0.5em;
}

.article-note-mark {
  position: absolute;
  top: 0;
  left: 0;
}

.article .pc {
  display: none;
}

.article br.pc {
  display: none;
}

@media all and (min-width: 768px), print {
  .article .pc {
    display: block;
  }
  .article .sp {
    display: none;
  }
  .article br.pc {
    display: inline;
  }
  .article br.sp {
    display: none;
  }
}

.article-interview:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .article-interview {
    margin-right: auto;
    margin-left: auto;
    width: 600px;
  }
  .article-interview:not(:last-child) {
    margin-bottom: 50px;
  }
}

.article-interview-q,
.article-interview-a {
  line-height: 1.857;
  text-align: justify;
}

.article-interview-q:not(:last-child),
.article-interview-a:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .article-interview-q,
  .article-interview-a {
    line-height: 1.75;
  }
  .article-interview-q:not(:last-child),
  .article-interview-a:not(:last-child) {
    margin-bottom: 50px;
  }
}

.article-interview-q {
  font-weight: bold;
}

.col-01:not(:last-child) {
  margin-bottom: 30px;
}

@media all and (min-width: 768px), print {
  .col-01 {
    margin-right: auto;
    margin-left: auto;
    width: 600px;
  }
  .col-01:not(:last-child) {
    margin-bottom: 35px;
  }
}

.hdg-01-wrapper {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
}

@media all and (min-width: 768px), print {
  .hdg-01-wrapper {
    margin-bottom: 40px;
  }
}

.hdg-01-transision {
  opacity: 0;
}

[data-window-load="true"] .hdg-01-transision {
  opacity: 1;
  -webkit-animation: show-hdg 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: show-hdg 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@-webkit-keyframes show-hdg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes show-hdg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.hdg-01 {
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

@media all and (min-width: 768px), print {
  .hdg-01 {
    padding-bottom: 15px;
    border-bottom: solid 2px #333;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
}

.hdg-01-category,
.hdg-01-title {
  display: block;
}

.hdg-01-category {
  margin-bottom: 15px;
  color: #ccc;
  font-size: 3rem;
  line-height: 1;
}

@media all and (min-width: 768px), print {
  .hdg-01-category {
    margin-right: 20px;
    margin-bottom: 0;
    font-size: 4rem;
  }
}

.hdg-01-title {
  font-size: 2.2rem;
  line-height: 1.2;
}

@media all and (min-width: 768px), print {
  .hdg-01-title {
    font-size: 2.8rem;
  }
}

.hdg-02 {
  margin-bottom: 10px;
  color: #009f40;
  font-size: 1.6rem;
  line-height: 1.5;
}

@media all and (min-width: 768px), print {
  .hdg-02 {
    margin-bottom: 25px;
    font-size: 2rem;
    line-height: 1.2;
  }
}

.text {
  line-height: 1.857;
  text-align: justify;
}

.text:not(:last-child) {
  margin-bottom: 1em;
}

@media all and (min-width: 768px), print {
  .text {
    line-height: 1.75;
  }
}

.btn-pages {
  margin-bottom: 50px;
  border-top: solid 1px #c8c8c8;
  border-bottom: solid 1px #c8c8c8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "DINWebPro-Medium W01 Regular", Arial, sans-serif;
}

.btn-pages:last-child {
  margin-bottom: 0;
}

[data-category="home"] .btn-pages {
  margin-bottom: 28px;
}

@media all and (min-width: 768px), print {
  .btn-pages {
    display: none;
  }
}

.btn-pages-item {
  width: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.btn-pages-item:not(:first-child) {
  border-left: solid 1px #c8c8c8;
}

.btn-pages-target {
  padding: 11px 20px 13px 32px;
  display: block;
  position: relative;
  background-color: #fff;
  color: #888;
  font-size: 1.6rem;
  line-height: 1;
}

.btn-pages-target .icon-arrow {
  margin-top: auto;
  margin-bottom: auto;
  width: 6px;
  height: 10px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
}

.btn-pages-btm {
  display: none;
}

@media all and (min-width: 768px), print {
  .btn-pages-btm {
    margin-top: -10px;
    margin-right: auto;
    margin-left: auto;
    width: 960px;
    position: static;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  }
  .btn-pages-btm .btn-pages-target {
    padding: 10px 10px 10px 27px;
    height: auto;
    line-height: 1;
  }
  .btn-pages-btm .btn-pages-target .icon-arrow {
    left: 10px;
  }
  .btn-pages-btm .btn-pages-target-inner:after {
    display: none;
  }
}

@media all and (min-width: 768px), print {
  [data-category="philosophy"] .btn-pages-btm {
    margin-top: 0;
    width: 528px;
  }
  [data-category="philosophy"] .btn-pages-btm .btn-pages-target {
    padding: 0 0 0 17px;
  }
  [data-category="philosophy"] .btn-pages-btm .btn-pages-target .icon-arrow {
    left: 0;
  }
}

.btn-sns {
  margin-top: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media all and (min-width: 768px), print {
  .btn-sns {
    margin-top: 60px;
  }
}

.btn-sns-footer {
  margin-bottom: 28px;
}

@media all and (min-width: 768px), print {
  .btn-sns-footer {
    margin-bottom: 0;
  }
}

.btn-sns-item > a {
  width: 35px !important;
  height: 35px !important;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: block;
}

@media all and (min-width: 768px), print {
  .btn-sns-item > a {
    width: 30px !important;
    height: 30px !important;
  }
}

.btn-sns-item-twitter > a {
  background-image: url("../img/icon-sns-twitter.png");
  background-size: 35px auto;
}

.btn-sns-item-twitter:not(:first-child) {
  margin-left: 25px;
}

@media all and (min-width: 768px), print {
  .btn-sns-item-twitter {
    width: 35px;
  }
  .btn-sns-item-twitter > a {
    width: 35px !important;
    background-size: 35px auto;
  }
  .btn-sns-item-twitter:not(:first-child) {
    margin-left: 15px;
  }
}

.btn-sns-item-facebook {
  margin-left: 25px;
}

.btn-sns-item-facebook > a {
  background-image: url("../img/icon-sns-facebook.png");
  background-size: 32px auto;
}

@media all and (min-width: 768px), print {
  .btn-sns-item-facebook {
    margin-left: 15px;
  }
  .btn-sns-item-facebook > a {
    background-size: 27px auto;
  }
}

.btn-sns-item-pinterest {
  margin-left: 26px;
  width: 35px;
  height: 35px;
  overflow: hidden;
}

.btn-sns-item-pinterest > a,
.btn-sns-item-pinterest > span,
.btn-sns-item-pinterest > [data-pin-log] {
  width: 35px !important;
  height: 35px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  display: block;
  background: url("../img/icon-sns-pinterest.png") no-repeat 50% 50% !important;
  background-size: 35px auto !important;
  text-indent: 200% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

@media all and (min-width: 768px), print {
  .btn-sns-item-pinterest {
    margin-left: 15px;
    width: 30px;
    height: 30px;
  }
  .btn-sns-item-pinterest > a,
  .btn-sns-item-pinterest > span,
  .btn-sns-item-pinterest > [data-pin-log] {
    width: 30px !important;
    height: 30px !important;
    background-size: 29px auto !important;
  }
}

.btn-sns-item-line {
  margin-left: 23px;
}

.btn-sns-item-line > a {
  background-image: url("../img/icon-sns-line.png");
  background-size: 33px auto;
}

@media all and (min-width: 768px), print {
  .btn-sns-item-line {
    display: none;
  }
}

.btn-more-wrapper {
  padding: 20px;
  border-bottom: solid 1px #c8c8c8;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  outline: none;
}

@media all and (min-width: 768px), print {
  .btn-more-wrapper {
    padding: 0;
    border-bottom: none;
    clear: both;
  }
}

.btn-more {
  margin-right: auto;
  margin-left: auto;
  padding: 7px 10px 13px;
  border: solid 1px #005c8b;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  color: #005c8b;
  background-color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  outline: none;
  -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media all and (min-width: 768px), print {
  .btn-more {
    max-width: 300px;
  }
  .btn-more:hover {
    background-color: #005c8b;
    color: #fff;
  }
}

[data-more-btn="once"] {
  opacity: 1;
}

[data-more-btn="once"][aria-expanded="true"] {
  opacity: 0;
}

[data-more-btn="open"] {
  opacity: 0;
  display: none;
}

.btn-more-inner {
  padding-left: 18px;
  position: relative;
  display: inline-block;
}

.btn-more-icon {
  content: "";
  margin-top: auto;
  margin-bottom: auto;
  display: block;
  position: absolute;
  top: 3px;
  bottom: 0;
  background-color: #005c8b;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.btn-more-icon:first-child {
  width: 10px;
  height: 2px;
  left: 0;
}

.btn-more-icon + .btn-more-icon {
  width: 2px;
  height: 10px;
  left: 4px;
}

@media all and (min-width: 768px), print {
  .btn-more:hover .btn-more-icon {
    background-color: #fff;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.list-project {
  margin-bottom: 40px;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

.list-project:last-child {
  margin-bottom: 0;
}

@media all and (min-width: 768px), print {
  .list-project:before,
  .list-project:after {
    display: table;
    content: " ";
  }
  .list-project:after {
    clear: both;
  }
}

.list-project-hdg {
  margin-bottom: 20px;
  padding: 10px;
  display: table;
  background-color: #fff;
  color: #008b41;
  font-size: 2.2rem;
  line-height: 1;
}

.list-project-item {
  margin-bottom: 20px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.list-project-item[aria-current]::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: #005c8b;
  opacity: 0.2;
}

@media all and (min-width: 768px), print {
  .list-project-item {
    margin-left: 30px;
    float: left;
    width: 300px;
  }
  .list-project-item:nth-child(3n + 1) {
    margin-left: 0;
    clear: left;
  }
}

.list-project-item-target {
  display: block;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.list-project-item-image {
  padding-top: 107.143%;
  width: 100%;
}

@media all and (min-width: 768px), print {
  .list-project-item-image {
    padding-top: 0;
    width: 300px;
    height: 300px;
    opacity: 1;
    -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  a:hover .list-project-item-image {
    opacity: 0.7;
  }
}

.list-project-item-new {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.list-project-item-serial {
  padding: 13px 23px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
}

.list-project-item-serial:before,
.list-project-item-serial:after {
  display: table;
  content: " ";
}

.list-project-item-serial:after {
  clear: both;
}

.list-project-item-serial-icon,
.list-project-item-serial-text {
  float: left;
}

.list-project-item-serial-icon {
  margin-right: 13px;
  padding-right: 13px;
  border-right: solid 1px #c8c8c8;
}

.list-project-item-serial-icon img {
  width: 100%;
  max-width: 45px;
}

.list-project-item-serial-label {
  margin-bottom: 2px;
  padding-top: 2px;
  width: 76px;
  display: block;
  line-height: 0;
}

.list-project-item-serial-label > img {
  width: 57px;
  height: 7px;
}

.list-project-item-serial-num {
  font-size: 3.2rem;
  line-height: 1;
}

.list-project-item-title {
  padding: 10px 12px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  font-size: 1.6rem;
}

.list-project-more {
  outline: none;
  opacity: 0;
  -webkit-transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.list-project-more[aria-hidden="true"] {
  height: 0;
  overflow: hidden;
}

.list-project-more[aria-hidden="false"] {
  height: auto;
  opacity: 1;
}

.list-column {
  margin-bottom: 40px;
  border-top: solid 1px #c8c8c8;
  border-right: solid 1px #c8c8c8;
  border-left: solid 1px #c8c8c8;
  background-color: #fff;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

.list-column:last-child {
  margin-bottom: 0;
}

@media all and (min-width: 768px), print {
  .list-column {
    margin-right: auto;
    margin-left: auto;
    padding: 25px 20px 20px;
    border-bottom: solid 1px #c8c8c8;
    width: 880px;
    /* height: 493px;*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
  }
}

.list-column-hdg {
  padding: 12px 9px;
  border-bottom: solid 1px #c8c8c8;
  font-size: 2.2rem;
  line-height: 1;
}

@media all and (min-width: 768px), print {
  .list-column-hdg {
    margin-bottom: 20px;
    padding: 0;
    border-bottom: none;
  }
}

@media all and (min-width: 768px), print {
  .list-column-body {
    margin-bottom: -20px;
  }
  .list-column-body:before,
  .list-column-body:after {
    display: table;
    content: " ";
  }
  .list-column-body:after {
    clear: both;
  }
}

.list-column-item {
  border-bottom: solid 1px #c8c8c8;
}

@media all and (min-width: 768px), print {
  .list-column-item {
    margin-left: 20px;
    margin-bottom: 20px;
    border-bottom: none;
    float: left;
    width: 409px;
  }
  .list-column-item:nth-child(2n + 1) {
    margin-left: 0;
    clear: left;
  }
}

.list-column-item-target {
  padding: 10px 9px 10px 120px;
  min-height: 120px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media all and (min-width: 768px), print {
  .list-column-item-target {
    padding: 0 0 0 120px;
    min-height: 100px;
  }
}

.list-column-item-new {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.list-column-item-image-wrapper {
  position: absolute;
  top: 10px;
  left: 9px;
  overflow: hidden;
  background-color: #fff;
}

@media all and (min-width: 768px), print {
  .list-column-item-image-wrapper {
    top: 0;
    left: 0;
  }
}

.list-column-item-image {
  width: 100px;
  height: 100px;
}

@media all and (min-width: 768px), print {
  .list-column-item-image {
    opacity: 1;
    -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  a:hover .list-column-item-image {
    opacity: 0.7;
  }
}

@media all and (min-width: 768px), print {
  .list-column-item-series {
    margin-bottom: 8px;
  }
  .list-column-item-series:before,
  .list-column-item-series:after {
    display: table;
    content: " ";
  }
  .list-column-item-series:after {
    clear: both;
  }
}

@media all and (min-width: 768px), print {
  .list-column-item-series-icon,
  .list-column-item-series-name {
    float: left;
  }
}

.list-column-item-series-icon {
  white-space: nowrap;
}

.list-column-item-series-icon.icon-series {
  position: static;
}

.list-column-item-series-name {
  padding-left: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #008b41;
  font-size: 1.6rem;
  line-height: 1.25;
}

@media all and (min-width: 768px), print {
  .list-column-item-series-name {
    padding-left: 10px;
    width: 83%;
    width: calc(100% - 3em);
  }
}

@media all and (min-width: 768px), print {
  #js-photolist .list-column-item-series-name {
    padding-left: 0;
  }
}

.list-column-item-title,
.list-column-item-description {
  color: #333;
  line-height: 1.286;
}

@media all and (min-width: 768px), print {
  .list-column-item-title,
  .list-column-item-description {
    font-size: 1.4rem;
    line-height: 1.286;
  }
}

@media all and (min-width: 768px), print {
  .list-column-item-description {
    margin-top: 8px;
  }
}

.list-column-more {
  outline: none;
  opacity: 0;
  -webkit-transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.list-column-more[aria-hidden="true"] {
  height: 0;
  overflow: hidden;
}

.list-column-more[aria-hidden="false"] {
  height: auto;
  opacity: 1;
}

.list-profile {
  border-top: solid 1px #c8c8c8;
}

.list-profile:not(:last-child) {
  margin-bottom: 25px;
}

[data-category="photo"] .list-profile:not(:last-child) {
  margin-bottom: 60px;
}

.list-profile:not(:last-child) + .list-credit {
  margin-top: -15px;
}

.btn-sns + .list-profile {
  margin-top: 30px;
}

@media all and (min-width: 768px), print {
  .list-profile {
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 29px;
    border-bottom: solid 1px #c8c8c8;
    width: 600px;
  }
  [data-category="photo"] .list-profile {
    width: auto;
    max-width: 700px;
  }
  .list-profile:not(:last-child) {
    margin-bottom: 50px;
  }
  [data-category="photo"] .list-profile:not(:last-child) {
    margin-bottom: 80px;
  }
  .list-profile:not(:last-child) + .list-credit {
    margin-top: calc(10px - 50px);
  }
  .btn-sns + .list-profile {
    margin-top: 70px;
  }
}

.list-profile-item {
  padding-top: 19px;
  padding-bottom: 19px;
  border-bottom: solid 1px #c8c8c8;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media all and (min-width: 768px), print {
  .list-profile-item {
    padding-top: 29px;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.list-profile-item-has-image {
  padding-left: 90px;
  min-height: 118px;
  position: relative;
}

@media all and (min-width: 768px), print {
  .list-profile-item-has-image {
    padding-left: 140px;
    min-height: 149px;
  }
}

.list-profile-item-image {
  width: 80px;
  position: absolute;
  top: 19px;
  left: 0;
}

@media all and (min-width: 768px), print {
  .list-profile-item-image {
    width: 120px;
    top: 29px;
  }
}

.article figure.list-profile-item-image:not(:last-child) {
  margin-bottom: 0;
}

.list-profile-desc-name {
  margin-bottom: 7px;
  font-size: 1.4rem;
  line-height: 1.1;
}

.list-profile-desc-text {
  font-size: 1.2rem;
  line-height: 1.417;
}

.list-profile-desc-text p:not(:last-child) {
  margin-bottom: 1em;
}

.list-profile-desc-link {
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 1.2;
  word-break: break-all;
}

.list-profile-desc-link a[target="_blank"] {
  padding-right: 17px;
}

.list-profile-desc-link a[target="_blank"]:after {
  top: 0;
  right: 0;
}

@media all and (min-width: 768px), print {
  .list-profile-desc-link {
    margin-top: 15px;
  }
}

.list-credit {
  margin-top: 10px;
  color: #888;
  font-size: 1.2rem;
  line-height: 1.2;
}

.list-credit:before,
.list-credit:after {
  display: table;
  content: " ";
}

.list-credit:after {
  clear: both;
}

.list-credit:not(:last-child) {
  margin-bottom: 25px;
}

@media all and (min-width: 768px), print {
  .list-credit {
    margin-right: auto;
    margin-left: auto;
    padding-left: 5px;
    width: 600px;
  }
  .list-credit:not(:last-child) {
    margin-bottom: 50px;
  }
}

.list-credit-item {
  margin-right: 1em;
  float: left;
  white-space: nowrap;
}

.list-series {
  margin-top: 40px;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

@media all and (min-width: 768px), print {
  .list-series {
    margin-top: 55px;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: auto;
    width: 880px;
  }
  .list-series:before,
  .list-series:after {
    display: table;
    content: " ";
  }
  .list-series:after {
    clear: both;
  }
  .list-series:last-child {
    margin-bottom: -40px;
  }
}

.list-series-hdg {
  margin-bottom: 10px;
  color: #008b41;
  font-size: 2.2rem;
  line-height: 1;
}

@media all and (min-width: 768px), print {
  .list-series-hdg {
    margin-bottom: 20px;
  }
}

.list-series-item {
  position: relative;
}

.list-series-item:not(:last-child) {
  margin-bottom: 10px;
}

.list-series-item[aria-current]::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #005c8b;
  opacity: 0.2;
}

@media all and (min-width: 768px), print {
  .list-series-item {
    margin-bottom: 20px;
    margin-left: 20px;
    float: left;
    width: 430px;
  }
  .list-series-item:nth-child(2n + 1) {
    margin-left: 0;
    clear: left;
  }
  .list-series-item:not(:last-child) {
    margin-bottom: 20px;
  }
}

.list-series-item-target {
  padding: 10px 10px 10px 120px;
  min-height: 120px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  background-color: #f0f0f0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media all and (min-width: 768px), print {
  .list-series-item-target {
    padding: 20px 20px 20px 140px;
    min-height: 140px;
  }
  .article .list-series-item-target:hover {
    text-decoration: none;
  }
}

.list-series-item-title {
  color: #333;
  font-size: 1.4rem;
  line-height: 1.286;
}

.list-series-item-image-wrapper {
  position: absolute;
  top: 10px;
  left: 10px;
  overflow: hidden;
  background-color: #fff;
}

@media all and (min-width: 768px), print {
  .list-series-item-image-wrapper {
    top: 20px;
    left: 20px;
  }
}

.list-series-item-image {
  width: 100px;
  height: 100px;
}

@media all and (min-width: 768px), print {
  .list-series-item-image {
    opacity: 1;
    -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  a:hover .list-series-item-image {
    opacity: 0.7;
  }
}

.list-pictogram {
  margin: 70px auto 50px;
  width: 85.714%;
}

.list-pictogram:before,
.list-pictogram:after {
  display: table;
  content: " ";
}

.list-pictogram:after {
  clear: both;
}

@media all and (min-width: 768px), print {
  .list-pictogram {
    margin-top: 96px;
    margin-bottom: 120px;
    width: 528px;
  }
}

.list-pictogram-item {
  margin-left: 5%;
  margin-bottom: 5%;
  float: left;
  width: 12.5%;
}

.list-pictogram-item:nth-child(6n + 1) {
  margin-left: 0;
  clear: left;
}

.list-pictogram-item img {
  width: 100%;
}

@media all and (min-width: 768px), print {
  .list-pictogram-item {
    margin-left: 13px;
    margin-bottom: 13px;
    width: 32px;
  }
  .list-pictogram-item:nth-child(6n + 1) {
    margin-left: 13px;
    clear: none;
  }
  .list-pictogram-item:nth-child(12n + 1) {
    margin-left: 0;
    clear: left;
  }
}

.list-updates-item:not(:last-child) {
  margin-bottom: 20px;
}

@media all and (min-width: 768px), print {
  .list-updates-item:not(:last-child) {
    margin-bottom: 14px;
  }
  .list-updates-item > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.list-updates-item-date,
.list-updates-item-title {
  display: block;
}

.list-updates-item-date {
  margin-bottom: 7px;
  color: #888;
  font-size: 1.4rem;
  line-height: 1;
}

@media all and (min-width: 768px), print {
  .list-updates-item-date {
    margin-right: 15px;
    margin-bottom: 0;
    line-height: 1.25;
  }
}

.list-updates-item-title {
  color: #005c8b;
  font-size: 1.4rem;
  line-height: 1.25;
}

a:hover .list-updates-item-title {
  text-decoration: underline;
}

[data-category="projects"] .list-topicpath-wrapper {
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
}

@media all and (min-width: 768px), print {
  [data-category="projects"] .list-topicpath-wrapper {
    margin-top: 40px;
    margin-right: auto;
    margin-left: auto;
    width: 960px;
  }
}

.list-topicpath {
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #fff;
  color: #888;
  list-style: none;
  font-size: 1.2rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media all and (min-width: 768px), print {
  .list-topicpath {
    margin-bottom: 15px;
    padding: 10px 20px;
    display: inline-block;
  }
}

.list-topicpath-item {
  display: inline;
}

.list-topicpath-item:last-child {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 0;
}

.list-topicpath-icon {
  padding-right: 2px;
  padding-left: 6px;
}

.list-topicpath-icon .icon-arrow {
  margin-top: -2px;
  width: 5px;
  height: 8px;
  fill: #888;
}

.icon-series {
  padding: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  top: -2px;
  display: inline-block;
  background-color: #002b40;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
}

.icon-loading {
  margin: auto;
  position: absolute;
  bottom: -44px;
  right: 0;
  left: 0;
  z-index: 1000;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.icon-loading[data-loading="true"],
.icon-loading[data-video-loading="true"] {
  opacity: 1;
}

.icon-loading[data-loading-pos="top"] {
  top: 0;
  bottom: auto;
}

.icon-loading[data-video-loading] {
  position: static;
  bottom: auto;
  opacity: 1;
}

[data-video-loading-bg] {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background-color: #000;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

[data-play-video="ready"] [data-video-loading-bg] {
  opacity: 1;
}

[data-play-video-loop="true"] [data-video-loading-bg] {
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

[data-play-video="fade-out"] [data-video-loading-bg] {
  opacity: 1;
}

.icon-loading-image {
  margin-right: auto;
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: block;
  background: url("../img/icon-loading.png") no-repeat 0 0;
  background-size: 44px 44px;
  -webkit-animation: rotate-loading-image 1.5s linear infinite;
  animation: rotate-loading-image 1.5s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@-webkit-keyframes rotate-loading-image {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate-loading-image {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

[data-play-video-loop="true"] .top-hero .icon-loading-image {
  display: none;
}

[data-play-video-loop="true"] .top-hero .top-hero-target {
  z-index: 3000;
}

[data-play-video-loop="true"] .top-hero .top-hero-scrolldown {
  z-index: 3001;
}

.icon-new {
  padding: 5px 7px;
  background-color: #e3770b;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  display: none;
}

.icon-new.is-disp {
  display: block;
}

.icon-sns {
  border: solid 1px #c8c8c8;
  border-radius: 50%;
  width: 50px;
  display: block;
  background-color: #fff;
}

.icon-sns svg {
  width: 48px;
  height: 48px;
}

.icon-sns-facebook svg {
  fill: #3b5998;
}

.icon-sns-twitter svg {
  fill: #55acee;
}

.icon-sns-youtube svg {
  fill: #ff0000;
}

.icon-sns-instagram svg {
  fill: #000;
}

@media all and (min-width: 768px), print {
  .icon-sns {
    -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .icon-sns:hover {
    background-color: #005c8b;
  }
  .icon-sns svg {
    -webkit-transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .icon-sns:hover svg {
    fill: #fff;
  }
}

.tbl {
  border: solid 1px #c8c8c8;
  border-collapse: collapse;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  color: #000;
}

.tbl th,
.tbl td {
  padding: 10px;
  border: solid 1px #c8c8c8;
}

.tbl th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.tbl th:first-of-type {
  border-right-width: 2px;
}

@media all and (min-width: 768px), print {
  .tbl:not(:last-child) {
    margin-bottom: 50px;
  }
  .tbl th,
  .tbl td {
    padding: 20px 10px;
  }
  .tbl th {
    font-size: 2rem;
    line-height: 1.2;
  }
}

@media all and (min-width: 768px), print {
  .tbl-thead-note {
    font-size: 80%;
  }
}

@media all and (min-width: 768px), print {
  .tbl-line th,
  .tbl-line td {
    border-bottom-width: 4px;
    text-align: center;
  }
  .tbl-line th {
    font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  }
  .tbl-line thead th {
    border-bottom-color: #000;
    font-size: 1.8rem;
  }
  .tbl-line tbody th {
    font-size: 1.76rem;
  }
  .tbl-line tbody td {
    padding-right: 5px;
    padding-left: 5px;
  }
  .tbl-line .tbl-line-name {
    font-size: 2.2rem;
  }
}

@media all and (min-width: 768px), print {
  .tbl-line-asakusa th,
  .tbl-line-asakusa td {
    border-bottom-color: #e14131;
  }
  .tbl-line-asakusa .tbl-line-name {
    color: #e14131;
  }
  .tbl-line-mita th,
  .tbl-line-mita td {
    border-bottom-color: #006cb6;
  }
  .tbl-line-mita .tbl-line-name {
    color: #006cb6;
  }
  .tbl-line-shinjuku th,
  .tbl-line-shinjuku td {
    border-bottom-color: #b0c124;
  }
  .tbl-line-shinjuku .tbl-line-name {
    color: #b0c124;
  }
  .tbl-line-oedo th,
  .tbl-line-oedo td {
    border-bottom-color: #c6035d;
  }
  .tbl-line-oedo .tbl-line-name {
    color: #c6035d;
  }
  .tbl-line-toden th,
  .tbl-line-toden td {
    border-bottom-color: #8bc21f;
  }
  .tbl-line-toden .tbl-line-name {
    color: #8bc21f;
  }
  .tbl-line-toneri th,
  .tbl-line-toneri td {
    border-bottom-color: #19681a;
  }
  .tbl-line-toneri .tbl-line-name {
    color: #19681a;
  }
  .tbl-line-bus th,
  .tbl-line-bus td {
    border-bottom-color: #5ead3c;
  }
  .tbl-line-bus .tbl-line-name {
    color: #5ead3c;
  }
  .tbl-line-monorail th,
  .tbl-line-monorail td {
    border-bottom-color: #ff702c;
  }
  .tbl-line-monorail .tbl-line-name {
    color: #ff702c;
  }
}

@media (max-width: 767px) {
  .tbl-line,
  .tbl-line tbody,
  .tbl-line tr,
  .tbl-line th,
  .tbl-line td {
    display: block;
    text-align: left;
  }
  .tbl-line thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .tbl-line,
  .tbl-line th,
  .tbl-line td {
    border: none;
  }
  .tbl-line tbody th {
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    font-size: 1.6rem;
    line-height: 1;
  }
  .tbl-line .tbl-line-name {
    margin-left: 5px;
    font-size: 2rem;
  }
  .tbl-line tbody th:first-of-type {
    border-right-width: 1px;
  }
  .tbl-line tbody td {
    margin-left: 14px;
    border-bottom: solid 1px #c8c8c8;
    position: relative;
  }
  .tbl-line tbody td:last-child {
    padding-bottom: 17px;
    border-bottom: none;
  }
  .tbl-line tbody tr:last-child td:last-child {
    padding-bottom: 0;
  }
  .tbl-line tbody td:before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
  }
  .tbl-line tbody td:after {
    content: "";
    border-radius: 100%;
    width: 4px;
    height: 4px;
    background-color: #000;
    display: block;
    position: absolute;
    top: 1.3em;
    left: -5px;
  }
  .tbl-line .tbl-line-asakusa th {
    border-color: #e14131;
  }
  .tbl-line .tbl-line-asakusa .tbl-line-name {
    color: #e14131;
  }
  .tbl-line .tbl-line-mita th {
    border-color: #006cb6;
  }
  .tbl-line .tbl-line-mita .tbl-line-name {
    color: #006cb6;
  }
  .tbl-line .tbl-line-shinjuku th {
    border-color: #b0c124;
  }
  .tbl-line .tbl-line-shinjuku .tbl-line-name {
    color: #b0c124;
  }
  .tbl-line .tbl-line-oedo th {
    border-color: #c6035d;
  }
  .tbl-line .tbl-line-oedo .tbl-line-name {
    color: #c6035d;
  }
  .tbl-line .tbl-line-toden th {
    border-color: #8bc21f;
  }
  .tbl-line .tbl-line-toden .tbl-line-name {
    color: #8bc21f;
  }
  .tbl-line .tbl-line-toneri th {
    border-color: #19681a;
  }
  .tbl-line .tbl-line-toneri .tbl-line-name {
    color: #19681a;
  }
  .tbl-line .tbl-line-bus th {
    border-color: #5ead3c;
  }
  .tbl-line .tbl-line-bus .tbl-line-name {
    color: #5ead3c;
  }
  .tbl-line .tbl-line-monorail th {
    border-color: #ff702c;
  }
  .tbl-line .tbl-line-monorail .tbl-line-name {
    color: #ff702c;
  }
}

[data-transition-type="translate-x"] {
  opacity: 0;
  -webkit-transform: translate(0, 5%);
  transform: translate(0, 5%);
}

@media all and (min-width: 768px), print {
  [data-transition-type="translate-x"] {
    -webkit-transform: translate(-10%, 0);
    transform: translate(-10%, 0);
  }
}

[data-transition-type="translate-x"][data-transition-item="true"] {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-animation: translate-x-in-narrow 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: translate-x-in-narrow 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media all and (min-width: 768px), print {
  [data-transition-type="translate-x"][data-transition-item="true"] {
    -webkit-animation-name: translate-x-in-medium;
    animation-name: translate-x-in-medium;
  }
}

[data-transition-type="translate-x"][data-transition-item="false"] {
  opacity: 0;
  -webkit-transform: translate(0, 5%);
  transform: translate(0, 5%);
  -webkit-animation: translate-x-out-narrow 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: translate-x-out-narrow 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media all and (min-width: 768px), print {
  [data-transition-type="translate-x"][data-transition-item="false"] {
    -webkit-transform: translate(-10%, 0);
    transform: translate(-10%, 0);
    -webkit-animation-name: translate-x-out-medium;
    animation-name: translate-x-out-medium;
  }
}

@-webkit-keyframes translate-x-in-narrow {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 5%);
    transform: translate(0, 5%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes translate-x-in-narrow {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 5%);
    transform: translate(0, 5%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-webkit-keyframes translate-x-in-medium {
  0% {
    opacity: 0;
    -webkit-transform: translate(-10%, 0);
    transform: translate(-10%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes translate-x-in-medium {
  0% {
    opacity: 0;
    -webkit-transform: translate(-10%, 0);
    transform: translate(-10%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@-webkit-keyframes translate-x-out-narrow {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 5%);
    transform: translate(0, 5%);
  }
}

@keyframes translate-x-out-narrow {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 5%);
    transform: translate(0, 5%);
  }
}

@-webkit-keyframes translate-x-out-medium {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-10%, 0);
    transform: translate(-10%, 0);
  }
}

@keyframes translate-x-out-medium {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-10%, 0);
    transform: translate(-10%, 0);
  }
}

[data-transition-type="scale"] {
  opacity: 0;
  -webkit-transform: scale(0, 0) translateY(75%);
  transform: scale(0, 0) translateY(75%);
}

[data-transition-type="scale"][data-transition-item="true"] {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  -webkit-animation: scale 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: scale 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@-webkit-keyframes scale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0, 0) translateY(75%);
    transform: scale(0, 0) translateY(75%);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes scale {
  0% {
    opacity: 0;
    -webkit-transform: scale(0, 0) translateY(75%);
    transform: scale(0, 0) translateY(75%);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

[data-transition-type="fade"] {
  opacity: 0;
  -webkit-transform: translate(0, 5%);
  transform: translate(0, 5%);
}

@media all and (min-width: 768px), print {
  [data-transition-type="fade"] {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

[data-transition-type="fade"][data-transition-item="true"] {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-animation: translate-x-in-narrow 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: translate-x-in-narrow 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media all and (min-width: 768px), print {
  [data-transition-type="fade"][data-transition-item="true"] {
    -webkit-animation: fade-in 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: fade-in 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
}

[data-transition-type="fade"][data-transition-item="false"] {
  opacity: 0;
  -webkit-transform: translate(0, 5%);
  transform: translate(0, 5%);
  -webkit-animation: translate-x-out-narrow 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: translate-x-out-narrow 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media all and (min-width: 768px), print {
  [data-transition-type="fade"][data-transition-item="false"] {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-animation: fade-out 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: fade-out 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.u-bold {
  font-weight: bold;
  font-style: normal;
}

.u-left {
  text-align: left !important;
}

.u-center {
  text-align: center !important;
}

.u-right {
  text-align: right !important;
}

.u-auto-br {
  display: inline-block;
}

.u-uppercase {
  text-transform: uppercase;
}

@media all and (min-width: 768px), print {
  [data-show-width="narrow"] {
    display: none;
  }
}

[data-show-width="medium"] {
  display: none;
}

@media all and (min-width: 768px), print {
  [data-show-width="medium"] {
    display: block;
  }
}

@media all and (min-width: 768px), print {
  [data-show-width="narrow-inline"] {
    display: none;
  }
}

[data-show-width="medium-inline"] {
  display: none;
}

@media all and (min-width: 768px), print {
  [data-show-width="medium-inline"] {
    display: inline;
  }
}

[data-anchor] {
  margin-top: -41px;
  padding-top: 41px;
}

@media all and (min-width: 768px), print {
  [data-anchor] {
    margin-top: -81px;
    padding-top: 81px;
  }
}

[data-fullscreen] {
  height: calc(100vh - 40px - 216px);
  background-color: #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
  transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
}

@media all and (min-width: 768px), print {
  [data-fullscreen] {
    height: calc(100vh - 81px - 176px);
  }
}

[data-object-fit] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

[data-object-fit] img {
  height: 0;
  visibility: hidden;
}

@media print {
  .project-hero,
  .column-hero {
    height: auto;
  }
  [data-fullscreen] {
    height: auto !important;
  }
  [data-object-fit] {
    background-image: none !important;
  }
  [data-object-fit] img {
    height: auto;
    visibility: visible;
  }
}

.u-object-fit {
  position: relative;
  overflow: hidden;
  page-break-inside: avoid;
}

.u-object-fit-inner {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.u-object-fit img {
  max-width: none;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

[data-mt="0"] {
  margin-top: 0px !important;
}

[data-mt="10"] {
  margin-top: 10px !important;
}

[data-mt="20"] {
  margin-top: 20px !important;
}

[data-mt="30"] {
  margin-top: 30px !important;
}

[data-mt="40"] {
  margin-top: 40px !important;
}

[data-mt="50"] {
  margin-top: 50px !important;
}

[data-mt="60"] {
  margin-top: 60px !important;
}

[data-mt="70"] {
  margin-top: 70px !important;
}

[data-mt="80"] {
  margin-top: 80px !important;
}

[data-mt="90"] {
  margin-top: 90px !important;
}

[data-mt="100"] {
  margin-top: 100px !important;
}

[data-mb="0"] {
  margin-bottom: 0px !important;
}

[data-mb="10"] {
  margin-bottom: 10px !important;
}

[data-mb="20"] {
  margin-bottom: 20px !important;
}

[data-mb="30"] {
  margin-bottom: 30px !important;
}

[data-mb="40"] {
  margin-bottom: 40px !important;
}

[data-mb="50"] {
  margin-bottom: 50px !important;
}

[data-mb="60"] {
  margin-bottom: 60px !important;
}

[data-mb="70"] {
  margin-bottom: 70px !important;
}

[data-mb="80"] {
  margin-bottom: 80px !important;
}

[data-mb="90"] {
  margin-bottom: 90px !important;
}

[data-mb="100"] {
  margin-bottom: 100px !important;
}

@media all and (max-width: 767px) {
  [data-sp-mt="0"] {
    margin-top: 0px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="10"] {
    margin-top: 10px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="20"] {
    margin-top: 20px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="30"] {
    margin-top: 30px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="40"] {
    margin-top: 40px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="50"] {
    margin-top: 50px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="60"] {
    margin-top: 60px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="70"] {
    margin-top: 70px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="80"] {
    margin-top: 80px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="90"] {
    margin-top: 90px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mt="100"] {
    margin-top: 100px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="0"] {
    margin-bottom: 0px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="10"] {
    margin-bottom: 10px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="20"] {
    margin-bottom: 20px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="30"] {
    margin-bottom: 30px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="40"] {
    margin-bottom: 40px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="50"] {
    margin-bottom: 50px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="60"] {
    margin-bottom: 60px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="70"] {
    margin-bottom: 70px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="80"] {
    margin-bottom: 80px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="90"] {
    margin-bottom: 90px !important;
  }
}

@media all and (max-width: 767px) {
  [data-sp-mb="100"] {
    margin-bottom: 100px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="0"] {
    margin-top: 0px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="10"] {
    margin-top: 10px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="20"] {
    margin-top: 20px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="30"] {
    margin-top: 30px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="40"] {
    margin-top: 40px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="50"] {
    margin-top: 50px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="60"] {
    margin-top: 60px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="70"] {
    margin-top: 70px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="80"] {
    margin-top: 80px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="90"] {
    margin-top: 90px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mt="100"] {
    margin-top: 100px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="0"] {
    margin-bottom: 0px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="10"] {
    margin-bottom: 10px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="20"] {
    margin-bottom: 20px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="30"] {
    margin-bottom: 30px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="40"] {
    margin-bottom: 40px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="50"] {
    margin-bottom: 50px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="60"] {
    margin-bottom: 60px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="70"] {
    margin-bottom: 70px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="80"] {
    margin-bottom: 80px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="90"] {
    margin-bottom: 90px !important;
  }
}

@media all and (min-width: 768px), print {
  [data-pc-mb="100"] {
    margin-bottom: 100px !important;
  }
}

.article-link-button a,
.article-link-button a[target="_blank"] {
  display: inline-block;
  border: 1px solid #c8c8c8;
  padding: 1em calc(2em + 13px) 1em 2em;
  background-color: transparent;
}

.article-link-button a:hover {
  text-decoration: none;
}

@media all and (min-width: 768px), print {
  .article-link-button a {
    -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .article-link-button a:hover {
    background-color: #c8c8c8;
  }
}

.article-link-button a[target="_blank"]::after {
  top: 50%;
  right: 1em;
  width: 13px;
  height: 14px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#bread {
  padding: 10px 20px 0;
  background: #fff;
  margin: 0 0 1px;
}

#article-lists #bread {
  background: transparent;
  background: #fff;
  display: inline-block;
  padding: 10px 20px;
  margin: 30px 0 0;
}

#bread .bread-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 10px 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

#article-lists #bread .bread-inner {
  border-bottom: none;
  padding: 0;
}

#bread li {
  font-size: 1.2rem;
  display: inline;
}

#bread li:last-child {
  color: #888;
}

#bread .arrow {
  width: 5px;
  height: 8px;
  fill: #aaa;
  margin: -2px 8px 0;
  vertical-align: middle;
}

@media all and (max-width: 767px), print {
  #bread.single {
    margin-bottom: 20px;
  }
  body[data-category="projects"] #bread {
    margin: 10px -20px 1px;
  }
}

.article-header-sns,
.article-footer-sns {
  background: #fff;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.article-header-sns .share-title-area,
.article-footer-sns .share-title-area {
  margin: 0 5px 0 0;
  padding: 0 20px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-right: 1px solid #ddd;
}

.article-header-sns .share-title-area .share-title,
.article-footer-sns .share-title-area .share-title {
  color: #999;
  font-size: 1.2rem;
  line-height: 1;
  display: block;
  font-family: "DINWebPro-Medium W01 Regular", Arial, sans-serif;
}

.article-header-sns {
  padding: 0 0 15px;
}

.article-header-sns .btn-sns {
  margin: 0;
  padding: 0;
}

.article-footer-sns .btn-sns {
  margin: 0;
}

@media all and (max-width: 767px), print {
  .article-header-sns .btn-sns-item,
  .article-footer-sns .btn-sns-item {
    margin: 0 0 0 15px;
  }
  .article-header-sns .btn-sns-item > a,
  .article-header-sns .btn-sns-item-pinterest,
  .article-header-sns .btn-sns-item-pinterest > span, .article-header-sns .btn-sns-item-pinterest > [data-pin-log],
  .article-footer-sns .btn-sns-item > a,
  .article-footer-sns .btn-sns-item-pinterest,
  .article-footer-sns .btn-sns-item-pinterest > span,
  .article-footer-sns .btn-sns-item-pinterest > [data-pin-log] {
    width: 30px !important;
    height: 30px !important;
    background-size: 100% !important;
  }
  .project-header-sns {
    -webkit-animation: show-project-header 2s cubic-bezier(0.645, 0.045, 0.355, 1);
            animation: show-project-header 2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}

@media all and (min-width: 768px), print {
  .article-header-sns {
    border-left: 1px solid #ddd;
    padding: 10px 0 10px 20px;
    display: block;
  }
  .article-header-sns .share-title-area {
    display: block;
    text-align: center;
    margin: 0 0 8px;
    padding: 0;
    border-right: 0;
  }
  .article-header-sns.project-header-sns {
    border-left: 0;
    padding-right: 20px;
  }
  .article-footer-sns .share-title-area {
    margin-right: 20px;
  }
  .article-footer-sns .btn-sns {
    padding: 5px 0;
  }
}

#article-footer {
  margin: 0 -20px;
}

#article-footer .section {
  padding: 20px;
}

#article-footer .section .pc {
  display: none;
}

#article-footer .section .heading-area {
  font-size: 1.8rem;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

#article-footer .section .more-btn a {
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  display: block;
  background: #008b41;
  color: #fff;
  padding: 0.8em calc(2em + 6px) 0.8em 1.5em;
  text-align: center;
  position: relative;
}

#article-footer .section .more-btn .arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 1em;
  width: 6px;
  height: 10px;
  fill: #fff;
}

#article-footer .section .more-btn.smp {
  margin-top: 10px;
}

#article-footer .section.more-articles {
  background: #efefef;
}

#article-footer .section.other-categories {
  background: #fff;
}

#more-article-list {
  padding: 10px 0 0;
}

#more-article-list li {
  padding: 10px 0;
  border-top: 1px solid #ddd;
}

#more-article-list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

#more-article-list li:first-child {
  border-top: 0;
}

#more-article-list .image-area {
  width: 100px;
  -ms-flex-item-align: start;
      align-self: start;
}

#more-article-list .image-area img {
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}

#more-article-list .text-area {
  width: calc(100% - 130px);
  padding: 0 10px 0 20px;
}

#more-article-list .text-area .categorylabel {
  display: block;
  color: #008b41;
  line-height: 1.4;
}

#more-article-list .text-area .title {
  display: block;
  color: #333;
  font-size: 1.3rem;
  padding-top: 0.3em;
  line-height: 1.4;
}

#more-article-list .arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 10px;
  width: 6px;
  height: 10px;
  fill: #888;
}

#more-article-list .icon-new {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

#more-article-list .icon-series {
  font-size: 1.1rem;
  margin-bottom: 0.2em;
}

#more-article-list[data-category="projects"] li {
  border: 0;
}

#other-category-list li {
  width: 100%;
  margin: 20px 0 0;
}

#other-category-list a {
  position: relative;
  display: block;
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 0;
  padding-top: 100%;
}

#other-category-list a span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  font-size: 2rem;
  background: rgba(0, 0, 0, 0.8);
  padding: 0.5em 1em;
  color: #fff;
  white-space: nowrap;
}

@media all and (min-width: 768px), print {
  #article-footer {
    margin: 0;
  }
  #article-footer .section {
    padding: 30px 30px 10px;
  }
  #article-footer .section .pc {
    display: block;
  }
  #article-footer .section .smp {
    display: none;
  }
  #article-footer .section .heading-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #article-footer .section .heading-area .more-btn {
    margin: 0 0 0 auto;
    font-size: 1.6rem;
  }
  #article-footer .section .heading-area .more-btn a {
    -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  #article-footer .section .heading-area .more-btn a:hover {
    background: #4cae7a;
  }
  #more-article-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #more-article-list li {
    width: calc((100% - 30px) / 2);
    padding: 20px 0;
  }
  #more-article-list li:nth-child(2) {
    border-top: 0;
  }
  #more-article-list a {
    opacity: 1;
    -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  #more-article-list a:hover {
    opacity: 0.8;
  }
  #more-article-list[data-category="projects"] li {
    width: calc((100% - 60px) / 3);
  }
  #other-category-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 20px 0 20px;
  }
  #other-category-list li {
    width: calc((100% - 60px) / 3);
    margin: 0;
  }
  #other-category-list a {
    opacity: 1;
    -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  #other-category-list a:hover {
    opacity: 0.8;
  }
}

#hero-image-wrapper {
  height: 150px;
  position: relative;
  background-color: #000;
}

#hero-image-wrapper .inner {
  padding: 0 30px;
  height: 100%;
  position: relative;
}

#hero-image-wrapper h2 {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 2rem;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  padding: 0.5em 1em;
  -webkit-animation: pagetitle-show 1.8s cubic-bezier(0.645, 0.045, 0.355, 1);
          animation: pagetitle-show 1.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#hero-image {
  width: 100%;
  height: 150px;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-animation: top-hero-show 1.8s cubic-bezier(0.645, 0.045, 0.355, 1);
          animation: top-hero-show 1.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes pagetitle-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pagetitle-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#article-lists {
  padding: 0 30px;
}

#article-lists .pc {
  display: none;
}

#article-lists .heading-area {
  font-size: 2.4rem;
}

#article-lists .heading-area h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #008b41;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#article-lists .heading-area h2 .en {
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  padding-right: 0.5em;
}

#article-lists .heading-area h2 .ja {
  font-size: 1.2rem;
  padding-top: 0.4em;
}

#article-lists .more-btn a {
  display: block;
  background: #008b41;
  color: #fff;
  padding: 0.8em calc(2em + 6px) 0.8em 1.5em;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  text-align: center;
  position: relative;
}

#article-lists .more-btn .arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 1em;
  width: 6px;
  height: 10px;
  fill: #fff;
}

#article-lists .more-btn.smp {
  margin-top: 20px;
}

#article-lists .article-list {
  padding: 30px 0;
}

#article-lists .article-list:last-child {
  padding-bottom: 0;
}

#article-lists .article-list .article-items {
  margin: 10px 0 0;
}

#article-lists .article-list .article-item {
  margin: 20px 0 0;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
}

#article-lists .article-list .article-item:first-child {
  margin-top: 0;
}

#article-lists .article-list .article-block {
  display: block;
  background: #fff;
  position: relative;
}

#article-lists .article-list .article-icon-new {
  position: absolute;
  top: 0;
  right: 0;
  background: #e3770b;
  color: #fff;
  font-size: 1.6rem;
  text-transform: uppercase;
  font-family: "DINWebPro-Medium W01 Regular", Arial, "FOT-筑紫オールドゴシック Std B", sans-serif;
  line-height: 1;
  padding: 5px 7px;
  vertical-align: middle;
  z-index: 10;
}

#article-lists .article-list .article-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 41.27%;
  z-index: 1;
  overflow: hidden;
}

#article-lists .article-list .article-thumb .icon-area {
  position: absolute;
  bottom: 0;
  left: 0;
}

#article-lists .article-list .article-thumb .icon-series {
  font-size: 1.4rem;
  padding: 0.5em 1.5em;
  color: #fff;
  top: 0;
}

#article-lists .article-list .article-thumb img {
  position: absolute;
  width: 100%;
  height: auto;
  max-height: none;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  #article-lists .article-list .article-thumb img {
    max-height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
    -webkit-transform: none;
            transform: none;
  }
}

#article-lists .article-list .article-overview {
  padding: 20px;
  color: #333;
}

#article-lists .article-list .article-overview h3 {
  color: #008b41;
  font-size: 1.6rem;
  line-height: 1.4;
}

#article-lists .article-list .article-overview .icon-series {
  white-space: nowrap;
  display: none;
}

#article-lists .article-list .article-overview .subtitle {
  font-size: 1.4rem;
  margin-top: 5px;
}

#article-lists .article-list .article-detail {
  display: none;
}

#article-lists .article-item.project .article-project-serial {
  padding: 13px 26px 13px 13px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
}

#article-lists .article-item.project .article-project-serial::before, #article-lists .article-item.project .article-project-serial::after {
  display: table;
  content: " ";
}

#article-lists .article-item.project .article-project-serial::after {
  clear: both;
}

#article-lists .article-item.project .article-project-serial .serial-icon,
#article-lists .article-item.project .article-project-serial .serial-text {
  float: left;
}

#article-lists .article-item.project .article-project-serial .serial-icon,
#article-lists .article-item.project .article-project-serial .serial-icon img {
  width: 45px;
}

#article-lists .article-item.project .article-project-serial .serial-text {
  margin-left: 14px;
  padding-left: 14px;
  border-left: solid 1px #c8c8c8;
}

#article-lists .article-item.project .article-project-serial .serial-label,
#article-lists .article-item.project .article-project-serial .serial-num {
  display: block;
}

#article-lists .article-item.project .article-project-serial .serial-label {
  margin-bottom: 2px;
  padding-top: 3px;
  width: 57px;
}

#article-lists .article-item.project .article-project-serial .serial-label > img {
  width: 57px;
  height: 7px;
  display: block;
}

#article-lists .article-item.project .article-project-serial .serial-num {
  font-size: 3.2rem;
  line-height: 1;
}

#article-lists .article-item.project .article-project-title {
  padding: 18px 20px;
  min-width: 90%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: #fff;
  text-align: center;
}

#article-lists .article-item.project .article-project-title .title-inner {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: solid 3px #000;
  border-bottom: solid 3px #000;
  display: block;
  font-size: 2rem;
  line-height: 1;
}

#article-lists .article-item.project .article-thumb {
  padding-top: 133.3333%;
}

#article-lists .article-item.project .article-thumb img {
  max-width: none;
  width: auto;
  height: 100%;
}

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  #article-lists .article-item.project .article-thumb img {
    max-width: 100%;
  }
}

#article-list-pagenate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 30px 0 0;
}

#article-list-pagenate .prev a,
#article-list-pagenate .next a {
  display: block;
  background: #008b41;
  color: #fff;
  text-decoration: none;
  text-align: center;
  position: relative;
}

#article-list-pagenate .prev .arrow,
#article-list-pagenate .next .arrow {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 10px;
  fill: #fff;
}

#article-list-pagenate .prev {
  margin: 0 auto 0 0;
}

#article-list-pagenate .prev a {
  padding: 0.5em 1.5em 0.5em calc(2em + 6px);
}

#article-list-pagenate .prev .arrow {
  -webkit-transform: rotate(180deg) translateY(50%);
          transform: rotate(180deg) translateY(50%);
  left: 1em;
}

#article-list-pagenate .next {
  margin: 0 0 0 auto;
}

#article-list-pagenate .next a {
  padding: 0.5em calc(2em + 6px) 0.5em 1.5em;
}

#article-list-pagenate .next .arrow {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 1em;
}

@media all and (min-width: 768px), print {
  #hero-image-wrapper {
    height: 200px;
  }
  #hero-image-wrapper .inner {
    max-width: 1020px;
    margin: 0 auto;
  }
  #hero-image-wrapper h2 {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 2rem;
    padding: 0.5em 1em;
  }
  #hero-image {
    height: 200px;
  }
  #article-lists {
    margin: 0 auto;
    max-width: 1020px;
  }
  #article-lists .pc {
    display: block;
  }
  #article-lists .smp {
    display: none;
  }
  #article-lists .heading-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 1.6rem;
  }
  #article-lists .heading-area h2 {
    display: block;
    font-size: 2.4rem;
  }
  #article-lists .heading-area h2 .en {
    padding-right: 0;
    display: block;
    color: #008b41;
  }
  #article-lists .heading-area h2 .ja {
    display: block;
    padding-top: 0;
  }
  #article-lists .heading-area .more-btn {
    margin: 0 0 0 auto;
  }
  #article-lists .heading-area .more-btn a {
    -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  #article-lists .heading-area .more-btn a:hover {
    background: #4cae7a;
  }
  #article-lists .article-list {
    padding-bottom: 0;
  }
  #article-lists .article-list .article-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 15px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #article-lists .article-list .article-items:first-child {
    margin-top: 0;
  }
  #article-lists .article-list .article-item {
    margin: 0 0 30px 30px;
    width: calc((100% - 60px) / 3);
  }
  #article-lists .article-list .article-item:nth-child(3n+1) {
    margin-left: 0;
  }
  #article-lists .article-list .article-block {
    border: solid 1px #c8c8c8;
    padding: 10px 10px 15px;
  }
  #article-lists .article-list .article-thumb {
    padding-top: 100%;
  }
  #article-lists .article-list .article-thumb .icon-area {
    display: none;
  }
  #article-lists .article-list .article-thumb img {
    max-width: none;
    width: auto;
    height: 100%;
  }
  @supports ((-o-object-fit: cover) or (object-fit: cover)) {
    #article-lists .article-list .article-thumb img {
      max-width: 100%;
    }
  }
  #article-lists .article-list .article-overview {
    padding: 15px 10px 5px;
    line-height: 1.4;
  }
  #article-lists .article-list .article-overview h3 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  #article-lists .article-list .article-overview .icon-series {
    display: inline-block;
  }
  #article-lists .article-list .article-overview .icon-area + .series-name {
    margin-left: 6px;
    display: inline-block;
  }
  #article-lists .article-list .article-overview .subtitle {
    margin-top: 5px;
  }
  #article-lists .article-list .article-detail {
    padding: 11px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    color: #fff;
    text-align: center;
  }
  #article-lists .article-list .article-detail .bg {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    -webkit-transform: scale(0.95, 0.95);
            transform: scale(0.95, 0.95);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  #article-lists .article-list .article-detail .inner {
    padding-top: 70px;
    max-width: 100%;
    position: relative;
    opacity: 0;
    -webkit-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  #article-lists .article-list .article-detail .icon {
    margin-right: auto;
    margin-left: auto;
    width: 44px;
    height: 44px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: url("../img/icon-logomark-white.svg") no-repeat 0 0;
    background-size: auto 44px;
  }
  #article-lists .article-list .article-detail .desc {
    font-size: 2rem;
    line-height: 1.2;
  }
  #article-lists .article-list .article-detail .more-read {
    font-size: 2rem;
    line-height: 1;
  }
  #article-lists .article-list .article-detail .desc + .more-read {
    margin-top: 15px;
    font-size: 1.6rem;
  }
  #article-lists .article-list a.article-block:hover .article-detail .bg {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  #article-lists .article-list a.article-block:hover .article-detail .inner {
    opacity: 1;
  }
  #article-lists .article-item.project .article-block {
    padding: 0;
  }
  #article-list-pagenate .prev a,
  #article-list-pagenate .next a {
    -webkit-transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  #article-list-pagenate .prev a:hover,
  #article-list-pagenate .next a:hover {
    background: #4cae7a;
  }
}