/* ---------- reset --------- */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
html, body {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

div, p, table, tbody, thead, th, tr, td, form, fieldset, input, textarea, blockquote, header, footer, nav, article, section, dl, dt, dd, ul, ol, li {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-style: normal;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

body {
  line-height: 1;
}

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

caption, th {
  text-align: left;
}

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

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

fieldset, img {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

button, textarea, select, input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  border: none;
  background: transparent;
}

header, footer, section, main, p, div, ul, li, span, a {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

strong {
  font-weight: 500;
}

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

/* ---------- font --------- */
/*
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-1p-medium {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-1p-bold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}

*/
html {
  font-size: 62.5%;
  height: 100%;
}

body {
  font-size: 1.4rem;
  font-family: "M PLUS 1p","Zen Kaku Gothic New", serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-feature-settings: 'palt', auto;
  font-feature-settings: 'palt', auto;
  -webkit-font-kerning: auto;
  font-kerning: auto;
  font-display: swap;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  color: #FFF;
}
@media screen and (max-width: 900px), print {
  body {
    min-width: initial;
  }
}

img.iep {
  object-fit: cover;
  font-family: "object-fit: cover;";
}

.sp {
  display: none !important;
}

a {
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
a:active {
  color: #FFF;
}
a:focus {
  outline: none;
}
a.nolink {
  pointer-events: none;
}

a, input[type=radio], input[type=checkbox], input[type=submit], button, select {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
img.nophoto {
  width: 58% !important;
  height: auto !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: block;
}

@media screen and (max-width: 900px), print {
  body {
    min-width: 100%;
  }

  .sp {
    display: block !important;
  }

  .pc {
    display: none !important;
  }
}
/* =============================================================

Wrapper

* ============================================================= */
.l-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  min-height: 100lvh;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.l-wrapper {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
}

#js-wrapper {
  /*top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  //overflow-y: scroll;
  //-webkit-overflow-scrolling: touch;*/
}

.l-wrapper__inner {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  min-height: 0%;
}

.pace-done .l-wrapper {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  visibility: visible;
}

.l-wrapper.is-resizing * {
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

@media screen and (max-width: 900px), print {
  .l-wrapper {
    min-width: 100%;
  }

  .l-wrapper__inner {
    display: block;
  }
}
/* =============================================================

Pace

* ============================================================= */
.pace {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 15000;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -moz-transition: opacity 0.6s ease;
  -o-transition: opacity 0.6s ease;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  background: #005aa5;
}

.pace.pace-inactive {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

/* =============================================================

  opening setting

* ============================================================= */
@-moz-keyframes bouncefadeIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0, 0);
    transform: scale(0, 0);
  }
  30% {
    -moz-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-webkit-keyframes bouncefadeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }
  30% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes bouncefadeIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }
  30% {
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.pace-done header .logo a,
.pace-done header .update {
  -moz-animation: fadeIn 0.3s ease-in-out 1s forwards;
  -webkit-animation: fadeIn 0.3s ease-in-out 1s forwards;
  animation: fadeIn 0.3s ease-in-out 1s forwards;
}

.pace-done .l-header-hamburger {
  -moz-animation: fadeIn 0.3s ease-in-out 1.5s forwards;
  -webkit-animation: fadeIn 0.3s ease-in-out 1.5s forwards;
  animation: fadeIn 0.3s ease-in-out 1.5s forwards;
}

/* =============================================================

  header

* ============================================================= */
header {
  width: 100%;
}
header .__inner {
  width: 100%;
  position: relative;
}

.home header .logo a {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  z-index: 999;
  position: absolute;
  top: 240px;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
  width: 846px;
  height: 210px;
  background: url(../img/title.svg) no-repeat 0 0;
  background-size: 100% auto;
  text-indent: -9999px;
}
@media screen and (max-width: 900px), print {
  .home header .logo a {
    width: 76.92vw;
    height: 19.23vw;
    top: 27.69vw;
  }
}
.home header .update {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  width: 100%;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  color: #005aa5;
  position: absolute;
  top: 470px;
  z-index: 999;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
@media screen and (max-width: 900px), print {
  .home header .update {
    top: 50vw;
    font-size: 1.0rem;
  }
}

.archive header,
.single header,
.page-thanks header {
  height: 150px;
  background: #FFF url(../img/page-bk.webp) no-repeat bottom center;
  background-size: 3000px auto;
  position: fixed;
  z-index: 999;
}
@media screen and (max-width: 900px), print {
  .archive header,
  .single header,
  .page-thanks header {
    background: #FFF url(../img/page-bk-sp.webp) no-repeat bottom center;
    background-size: 100% auto;
    height: 21vw;
  }
}
.archive header .logo a,
.single header .logo a,
.page-thanks header .logo a {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  z-index: 999;
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
  width: 241px;
  height: 60px;
  background: url(../img/title.svg) no-repeat 0 0;
  background-size: 100% auto;
  text-indent: -9999px;
}
@media screen and (max-width: 900px), print {
  .archive header .logo a,
  .single header .logo a,
  .page-thanks header .logo a {
    top: 2.5vw;
    width: 40vw;
    height: 10vw;
  }
}

footer {
  width: 100%;
  height: 530px;
  background: #2a7dc2 url(../img/co-bk-7.webp) no-repeat bottom center;
  background-size: 3000px auto;
}
@media screen and (max-width: 900px), print {
  footer {
    height: 46vw;
    background: #2a7dc2 url(../img/co-bk-7-sp.webp) no-repeat bottom center;
    background-size: 100% auto;
    margin-top: -1px;
  }
}
footer .__inner {
  width: 100%;
  height: 100%;
  position: relative;
}
footer .copy {
  padding: 500px 0 0;
  font-size: 1.0rem;
  line-height: 1.0;
  text-align: center;
}
@media screen and (max-width: 900px), print {
  footer .copy {
    padding: 39vw 0 0;
  }
}

.archive footer,
.single footer {
  width: 100%;
  height: 530px;
  background: #005aa5 url(../img/co-bk-7.webp) no-repeat bottom center;
  background-size: 3000px auto;
}
@media screen and (max-width: 900px), print {
  .archive footer,
  .single footer {
    height: 46vw;
    background: #005aa5 url(../img/co-bk-7-sp.webp) no-repeat bottom center;
    background-size: 100% auto;
  }
}

.page-thanks footer {
  height: 64px;
  background: #FFF;
}
@media screen and (max-width: 900px), print {
  .page-thanks footer {
    height: 14vw;
  }
}
.page-thanks footer .copy {
  position: static;
  text-align: center;
  color: #005aa5;
  padding: 28px 0 0;
}
@media screen and (max-width: 900px), print {
  .page-thanks footer .copy {
    padding: 6vw 0 0;
  }
}

/* =============================================================

Drawer

* ============================================================= */
.home .drawer-hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}
@media screen and (max-width: 900px), print {
  .home .drawer-hamburger {
    top: 4.1vw;
    right: 4.1vw;
  }
}

.archive .drawer-hamburger,
.single .drawer-hamburger,
.page-thanks .drawer-hamburger {
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 1000;
}
@media screen and (max-width: 900px), print {
  .archive .drawer-hamburger,
  .single .drawer-hamburger,
  .page-thanks .drawer-hamburger {
    top: 3.1vw;
    right: 4.1vw;
  }
}

.l-header-hamburger {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  width: 60px;
  height: 60px;
  background: url(../img/btn-nav-open.svg) no-repeat 0 0;
  background-size: 100% auto;
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 900px), print {
  .l-header-hamburger {
    width: 7.7vw;
    height: 7.7vw;
  }
}
.l-header-hamburger span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 34px;
  height: 36px;
  background: url(../img/btn-nav-open-span.svg) no-repeat 0 0;
  background-size: 100% auto;
}
@media screen and (max-width: 900px), print {
  .l-header-hamburger span {
    width: 4.3vw;
    height: 4.6vw;
  }
}

.is-drawer-open .l-header-hamburger {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background: url(../img/btn-nav-close.svg) no-repeat 0 0;
  background-size: 100% auto;
}
.is-drawer-open .l-header-hamburger span {
  display: none;
}

.navigation-box {
  display: block;
  width: 100%;
  height: 100lvh;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 225, 0.8);
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
@media screen and (max-width: 900px), print {
  .navigation-box {
    width: 100vw;
  }
}

.is-drawer-open .navigation-box {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  visibility: visible;
}

.global-nav {
  position: relative;
  padding: 140px 120px 0 0;
  overflow-y: scroll;
  height: 100%;
}
@media screen and (max-width: 900px), print {
  .global-nav {
    padding: 24vw 4.1vw 0 0;
  }
}
.global-nav .ttl {
  font-size: 1.4rem;
  line-height: 1.0;
  width: 356px;
  margin-left: auto;
  margin-bottom: 50px;
  text-align: right;
}
@media screen and (max-width: 900px), print {
  .global-nav .ttl {
    font-size: 1.2rem;
    width: 50vw;
  }
}
.global-nav ul {
  width: 356px;
  margin-left: auto;
}
@media screen and (max-width: 900px), print {
  .global-nav ul {
    width: 44vw;
  }
}
.global-nav ul li {
  padding: 0 0 10px;
  margin-bottom: 35px;
  width: 100%;
}
@media screen and (max-width: 900px), print {
  .global-nav ul li {
    padding: 0 0 2.5vw;
    margin-bottom: 5vw;
  }
}
.global-nav ul li:not(:last-child) a::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-image: linear-gradient(#ffffff, #ffffff);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 2px;
  -moz-transition: background-size 0.3s;
  -o-transition: background-size 0.3s;
  -webkit-transition: background-size 0.3s;
  transition: background-size 0.3s;
}
@media screen and (max-width: 900px), print {
  .global-nav ul li:not(:last-child) a::after {
    bottom: -2.5vw;
  }
}
.global-nav ul li:not(:last-child) a:hover::after {
  background-position: bottom left;
  background-size: 100% 2px;
}
.global-nav ul li a {
  position: relative;
  height: 73px;
  text-indent: -9999px;
  display: block;
  margin-left: auto;
}
@media screen and (max-width: 900px), print {
  .global-nav ul li a {
    height: 9vw;
  }
}
.global-nav ul li.__menu--1 a {
  width: 283px;
  background: url(../img/menu-1.svg) no-repeat 0 0;
  background-size: 100% auto;
}
@media screen and (max-width: 900px), print {
  .global-nav ul li.__menu--1 a {
    width: 32vw;
  }
}
.global-nav ul li.__menu--2 a {
  width: 280px;
  background: url(../img/menu-2.svg) no-repeat 0 0;
  background-size: 100% auto;
}
@media screen and (max-width: 900px), print {
  .global-nav ul li.__menu--2 a {
    width: 34vw;
  }
}
.global-nav ul li.__menu--3 a {
  width: 330px;
  background: url(../img/menu-3.svg) no-repeat 0 0;
  background-size: 100% auto;
}
@media screen and (max-width: 900px), print {
  .global-nav ul li.__menu--3 a {
    width: 40vw;
  }
}
.global-nav ul li.__menu--4 a {
  width: 100%;
  background: url(../img/menu-4.svg) no-repeat 0 0;
  background-size: 100% auto;
}
.global-nav ul li.__menu--5 a {
  width: 100%;
  background: url(../img/menu-5.svg) no-repeat 0 0;
  background-size: 100% auto;
}
.global-nav ul li.__menu--x a {
  width: 85px;
  height: 80px;
  background: url(../img/x-icon.svg) no-repeat 0 0;
  background-size: 100% auto;
}
@media screen and (max-width: 900px), print {
  .global-nav ul li.__menu--x a {
    width: 11vw;
    height: 10vw;
  }
}
.global-nav ul li.__menu--x a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.fv-box {
  width: 100%;
  height: 1495px;
  position: relative;
  background: url(../img/fv-bk.webp) no-repeat top center;
  background-size: 3000px auto;
}
@media screen and (max-width: 900px), print {
  .fv-box {
    height: 141vw;
    background: url(../img/fv-bk-sp.webp) no-repeat top center;
    background-size: 100% auto;
  }
}
.fv-box .ship {
  width: 291px;
  height: 228px;
  background: url(../img/fv-ship.webp) no-repeat top center;
  background-size: 100% auto;
  position: absolute;
  top: 660px;
  left: calc(50% - 465px);
  z-index: 998;
}
@media screen and (max-width: 900px), print {
  .fv-box .ship {
    width: 23vw;
    height: 18.2vw;
    top: 70vw;
    left: 13.84vw;
  }
}

.top-content-box h2 {
  display: block;
  text-indent: -9999px;
  margin: 0 auto 80px;
  width: 645px;
  height: 188px;
}
@media screen and (max-width: 900px), print {
  .top-content-box h2 {
    width: 71.28vw;
    height: 21vw;
    margin: 0 auto 8.7vw;
  }
}
.top-content-box h2.h2-ttl-1 {
  background: url(../img/h2-ttl-1.svg) no-repeat top center;
  background-size: auto 100%;
}
.top-content-box h2.h2-ttl-2 {
  background: url(../img/h2-ttl-2.svg) no-repeat top center;
  background-size: auto 100%;
}
.top-content-box h2.h2-ttl-3 {
  background: url(../img/h2-ttl-3.svg) no-repeat top center;
  background-size: auto 100%;
}
.top-content-box h2.h2-ttl-4 {
  background: url(../img/h2-ttl-4.svg) no-repeat top center;
  background-size: auto 100%;
}
.top-content-box h2.h2-ttl-5 {
  background: url(../img/h2-ttl-5.svg) no-repeat top center;
  background-size: auto 100%;
}
.top-content-box h2.h2-ttl-6 {
  background: url(../img/h2-ttl-6.svg) no-repeat top center;
  background-size: auto 100%;
}
.top-content-box .__inner {
  padding: 65px 0 135px;
}
@media screen and (max-width: 900px), print {
  .top-content-box .__inner {
    padding: 12.82vw 0 20.51vw;
  }
}

#posts {
  background: #005aa5 url(../img/co-bk-1.webp) no-repeat bottom center;
  background-size: 3000px auto;
  height: 804px;
}
@media screen and (max-width: 900px), print {
  #posts {
    background: #005aa5 url(../img/co-bk-1-sp.webp) no-repeat bottom center;
    background-size: 100% auto;
    height: 100%;
    min-height: 82vw;
    margin-top: -1px;
  }
}
#posts .__inner {
  padding: 110px 0 100px;
}
@media screen and (max-width: 900px), print {
  #posts .__inner {
    padding: 0 0 16vw;
  }
}
#posts h2 {
  margin-bottom: 40px;
}
@media screen and (max-width: 900px), print {
  #posts h2 {
    margin-bottom: 6.4vw;
  }
}

.x-slider-box {
  width: 726px;
  height: 348px;
  margin: 0 auto;
  padding: 40px 60px;
  background: #FFF;
  position: relative;
  overflow: hidden;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
@media screen and (max-width: 900px), print {
  .x-slider-box {
    width: 90vw;
    height: 43.58vw;
    padding: 5.1vw 10vw;
    -moz-border-radius: 1.8vw;
    -webkit-border-radius: 1.8vw;
    border-radius: 1.8vw;
  }
}

.swiper {
  width: 100%;
}

.swiper-wrapper {
  width: 100%;
}

.x-slider .swiper-slide {
  padding: 0 10px;
  width: 280px;
  height: 268px;
}
@media screen and (max-width: 900px), print {
  .x-slider .swiper-slide {
    padding: 0;
    width: 70vw;
    height: 33vw;
  }
}
.x-slider .swiper-slide .co {
  width: 100%;
  height: 100%;
  border: solid 1px #ededed;
  overflow: scroll;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.x-slider .swiper-slide iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.twitter-tweet {
  margin: 0 !important;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute !important;
  top: calc(50% - 14px) !important;
  z-index: 999 !important;
  cursor: pointer !important;
}
@media screen and (max-width: 900px), print {
  .swiper-button-prev,
  .swiper-button-next {
    top: 50% !important;
  }
}
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  width: 38px !important;
  height: 38px !important;
}
@media screen and (max-width: 900px), print {
  .swiper-button-prev,
  .swiper-button-next {
    width: 7vw !important;
    height: 7vw !important;
  }
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.swiper-button-prev {
  left: 20px !important;
  background: url(../img/arrow-l.svg) no-repeat 0 0;
  background-size: 100% auto;
}
@media screen and (max-width: 900px), print {
  .swiper-button-prev {
    left: 2vw !important;
  }
}

.swiper-button-next {
  right: 20px !important;
  background: url(../img/arrow-r.svg) no-repeat 0 0;
  background-size: 100% auto;
}
@media screen and (max-width: 900px), print {
  .swiper-button-next {
    right: 2vw !important;
  }
}

.more-btn.__mb {
  margin-bottom: 85px;
}
@media screen and (max-width: 900px), print {
  .more-btn.__mb {
    margin-bottom: 14vw;
  }
}
.more-btn a {
  display: block;
  width: 309px;
  height: 60px;
  margin: 0 auto;
}
@media screen and (max-width: 900px), print {
  .more-btn a {
    width: 34.35vw;
    height: 6.66vw;
  }
}
.more-btn a img {
  width: auto;
  height: 100%;
}
.more-btn a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

#topics {
  background: #2a7dc2 url(../img/co-bk-2.webp) no-repeat bottom center;
  background-size: 3000px auto;
}
@media screen and (max-width: 900px), print {
  #topics {
    background: #2a7dc2 url(../img/co-bk-2-sp.webp) no-repeat bottom center;
    background-size: 100% auto;
    height: 100%;
    min-height: 125vw;
    margin-top: -1px;
  }
}

.topics-list {
  width: 646px;
  margin: 0 auto;
  padding-bottom: 10px;
}
@media screen and (max-width: 900px), print {
  .topics-list {
    width: 73vw;
    padding-bottom: 1.6vw;
  }
}
.topics-list li {
  margin-bottom: 70px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
@media screen and (max-width: 900px), print {
  .topics-list li {
    margin-bottom: 7.6vw;
  }
}
.topics-list .thum {
  width: 160px;
  height: 90px;
  overflow: hidden;
}
@media screen and (max-width: 900px), print {
  .topics-list .thum {
    width: 17.6vw;
    height: 10vw;
  }
}
.topics-list .thum img {
  width: 100%;
  height: 100%;
}
.topics-list .thum .waku {
  width: 100%;
  height: 100%;
  border: #FFF solid 1px;
}
.topics-list .thum .waku.information {
  background: #FFF url(../img/thum-1.svg) no-repeat center;
  background-size: 83% auto;
}
.topics-list .thum .waku.recruit {
  background: url(../img/thum-2.svg) no-repeat center;
  background-size: 63.75% auto;
}
.topics-list .thum .waku.oa {
  background: #FFF url(../img/thum-3.svg) no-repeat center;
  background-size: 37.5% auto;
}
.topics-list .txt {
  padding-left: 30px;
  flex: 1;
}
@media screen and (max-width: 900px), print {
  .topics-list .txt {
    padding-left: 3.6vw;
  }
}
.topics-list .txt a {
  display: block;
  padding-bottom: 12px;
}
@media screen and (max-width: 900px), print {
  .topics-list .txt a {
    padding-bottom: 1.8vw;
  }
}
.topics-list .txt a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.topics-list .txt h3 {
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 400;
}
@media screen and (max-width: 900px), print {
  .topics-list .txt h3 {
    font-size: 1.4rem;
  }
}
.topics-list .txt .meta {
  width: 100%;
  background-image: linear-gradient(to right, #ffffff 4px, rgba(0, 0, 0, 0) 4px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  padding: 10px 0 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  font-size: 1.5rem;
}
@media screen and (max-width: 900px), print {
  .topics-list .txt .meta {
    padding: 1.8vw 0 0;
    font-size: 1.0rem;
  }
}
.topics-list .txt .meta .date {
  padding-right: 10px;
}
@media screen and (max-width: 900px), print {
  .topics-list .txt .meta .date {
    padding-right: 1.8vw;
  }
}

#works {
  background: #005aa5 url(../img/co-bk-3.webp) no-repeat bottom center;
  background-size: 3000px auto;
  margin-top: -1px;
}
@media screen and (max-width: 900px), print {
  #works {
    background: #005aa5 url(../img/co-bk-3-sp.webp) no-repeat bottom center;
    background-size: 100% auto;
    height: 100%;
    min-height: 223vw;
  }
}
#works .__inner {
  padding: 65px 0 330px;
}
@media screen and (max-width: 900px), print {
  #works .__inner {
    padding: 12vw 0 34vw;
  }
}

.works-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 770px;
  margin: 0 auto;
  padding: 0 0 13px;
}
@media screen and (max-width: 900px), print {
  .works-list {
    width: 90vw;
    padding: 0 0 2vw;
  }
}
.works-list li {
  margin: 0 0 87px;
  position: relative;
  width: 330px;
}
@media screen and (max-width: 900px), print {
  .works-list li {
    width: 41vw;
    margin: 0 0 9.4vw;
  }
}
.works-list li a {
  display: block;
}
.works-list li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.works-list li .pic-box {
  position: relative;
  padding: 0 0 0 30px;
  margin: 0 0 25px;
}
@media screen and (max-width: 900px), print {
  .works-list li .pic-box {
    padding: 0 0 0 3.3vw;
    margin: 0 0 2.5vw;
  }
}
.works-list li .pic-box .thum {
  width: 100%;
  height: 424px;
}
@media screen and (max-width: 900px), print {
  .works-list li .pic-box .thum {
    height: 54vw;
  }
}
.works-list li .pic-box .thum img {
  width: 100%;
  height: 100%;
}
.works-list li .line {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 212px;
  background: url(../img/item-line.svg) no-repeat 0 0;
  background-size: 100% auto;
}
@media screen and (max-width: 900px), print {
  .works-list li .line {
    width: 1vw;
    height: 23.5vw;
  }
}
.works-list li .txt {
  height: 150px;
}
@media screen and (max-width: 900px), print {
  .works-list li .txt {
    height: 20vw;
  }
}
.works-list li .txt h3 {
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 400;
}
@media screen and (max-width: 900px), print {
  .works-list li .txt h3 {
    font-size: 1.4rem;
  }
}
.works-list li .meta {
  width: 100%;
  border-top: #FFF solid 1px;
  background-image: linear-gradient(to right, #ffffff 4px, rgba(0, 0, 0, 0) 4px);
  background-size: 8px 1px;
  background-position: left bottom;
  background-repeat: repeat-x;
  padding: 10px 30px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  font-size: 1.5rem;
}
@media screen and (max-width: 900px), print {
  .works-list li .meta {
    padding: 1.8vw;
    font-size: 1.0rem;
  }
}
.works-list li .meta .cat {
  padding-right: 10px;
}
@media screen and (max-width: 900px), print {
  .works-list li .meta .cat {
    padding-right: 1.8vw;
  }
}
.works-list li .links {
  width: 100%;
  border-bottom: #FFF solid 1px;
  padding: 10px 30px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  font-size: 1.5rem;
}
@media screen and (max-width: 900px), print {
  .works-list li .links {
    padding: 1.8vw;
    font-size: 1.0rem;
  }
}
.works-list li .links .trailer {
  padding-right: 30px;
}
@media screen and (max-width: 900px), print {
  .works-list li .links .trailer {
    padding-right: 3.6vw;
  }
}

#company {
  background: #2a7dc2 url(../img/co-bk-4.webp) no-repeat bottom center;
  background-size: 3000px auto;
}
@media screen and (max-width: 900px), print {
  #company {
    background: #2a7dc2 url(../img/co-bk-4-sp.webp) no-repeat bottom center;
    background-size: 100% auto;
    height: 100%;
    min-height: 118vw;
    margin-top: -1px;
  }
}

.company-list {
  width: 646px;
  margin: 0 auto;
}
@media screen and (max-width: 900px), print {
  .company-list {
    width: 72vw;
  }
}
.company-list li {
  display: -webkit-flex;
  display: flex;
  padding: 25px 0;
}
@media screen and (max-width: 900px), print {
  .company-list li {
    padding: 3vw 0;
  }
}
.company-list li:first-child {
  padding-top: 0;
}
.company-list li:last-child {
  padding-bottom: 0;
}
.company-list li:not(:last-child) {
  background-image: linear-gradient(to right, #ffffff 4px, rgba(0, 0, 0, 0) 4px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.company-list li .tl {
  width: 190px;
  font-size: 2.4rem;
  line-height: 1.4;
}
@media screen and (max-width: 900px), print {
  .company-list li .tl {
    width: 20vw;
    font-size: 1.2rem;
  }
}
.company-list li .co {
  flex: 1;
  font-size: 2.4rem;
  line-height: 1.4;
}
@media screen and (max-width: 900px), print {
  .company-list li .co {
    font-size: 1.2rem;
  }
}

#recruit {
  background: #005aa5 url(../img/co-bk-5.webp) no-repeat bottom center;
  background-size: 3000px auto;
}
@media screen and (max-width: 900px), print {
  #recruit {
    background: #005aa5 url(../img/co-bk-5-sp.webp) no-repeat bottom center;
    background-size: 100% auto;
    height: 100%;
    min-height: 102vw;
    margin-top: -1px;
  }
}
#recruit h3.r-ttl {
  font-size: 3.0rem;
  font-weight: 400;
  line-height: 1.0;
  display: block;
  text-align: center;
  margin-bottom: 26px;
}
@media screen and (max-width: 900px), print {
  #recruit h3.r-ttl {
    font-size: 1.4rem;
    margin-bottom: 4vw;
  }
}

.txt-box {
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.66;
  width: 700px;
  margin: 0 auto 65px;
}
@media screen and (max-width: 900px), print {
  .txt-box {
    font-size: 1.2rem;
    width: 90vw;
    margin: 0 auto 8.9vw;
  }
}
.txt-box a {
  text-decoration: underline;
}
.txt-box a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.txt-box p:not(:last-child) {
  padding-bottom: 38px;
}
@media screen and (max-width: 900px), print {
  .txt-box p:not(:last-child) {
    padding-bottom: 5vw;
  }
}
.txt-box.__contact {
  font-size: 2.0rem;
}
@media screen and (max-width: 900px), print {
  .txt-box.__contact {
    font-size: 1.1rem;
  }
}

#contact {
  background: #2a7dc2 url(../img/co-bk-6.webp) no-repeat top center;
  background-size: 3000px auto;
}
@media screen and (max-width: 900px), print {
  #contact {
    background: #2a7dc2;
    height: 100%;
    min-height: 133vw;
    margin-top: -1px;
  }
}

.form-box {
  width: 700px;
  margin: 0 auto;
}
@media screen and (max-width: 900px), print {
  .form-box {
    width: 82vw;
  }
}
.form-box ul {
  border-top: #FFF solid 1px;
  border-left: #FFF solid 1px;
}
.form-box li {
  border-right: #FFF solid 1px;
  border-bottom: #FFF solid 1px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.form-box li:last-child {
  display: block;
}
.form-box li .tl {
  padding: 16px 14px;
  width: 220px;
  font-size: 1.6rem;
  line-height: 1.4;
}
@media screen and (max-width: 900px), print {
  .form-box li .tl {
    padding: 1.5vw 1.2vw;
    width: 36%;
    font-size: 1.0rem;
  }
}
.form-box li .tl p {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.form-box li .tl span.required {
  width: 34px;
  height: 20px;
  background: url(../img/icon-required.svg) no-repeat 0 0;
  background-size: 100% auto;
  display: block;
  margin-left: auto;
}
@media screen and (max-width: 900px), print {
  .form-box li .tl span.required {
    width: 3.5vw;
    height: 2.2vw;
  }
}
.form-box li .co {
  flex: 1;
  border-left: #FFF solid 1px;
  padding: 16px 14px;
  font-size: 1.6rem;
  line-height: 1.4;
}
@media screen and (max-width: 900px), print {
  .form-box li .co {
    padding: 1.5vw 1.2vw;
    font-size: 1.0rem;
  }
}
.form-box li .co p {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.form-box li .co span.c {
  width: 40px;
}
@media screen and (max-width: 900px), print {
  .form-box li .co span.c {
    width: auto;
    flex: 1;
  }
}
.form-box li .co input[name="your-name-sei"],
.form-box li .co input[name="your-name-mei"],
.form-box li .co input[name="your-name-sei-kana"],
.form-box li .co input[name="your-name-mei-kana"] {
  background: #FFF;
  border: none;
  height: 20px;
  width: 160px;
  padding: 2px;
}
@media screen and (max-width: 900px), print {
  .form-box li .co input[name="your-name-sei"],
  .form-box li .co input[name="your-name-mei"],
  .form-box li .co input[name="your-name-sei-kana"],
  .form-box li .co input[name="your-name-mei-kana"] {
    height: 2.2vw;
    width: 15vw;
    padding: 0.5vw;
  }
}
.form-box li .co input[name="your-name-sei"],
.form-box li .co input[name="your-name-sei-kana"] {
  margin-right: 15px;
  padding: 2px;
}
@media screen and (max-width: 900px), print {
  .form-box li .co input[name="your-name-sei"],
  .form-box li .co input[name="your-name-sei-kana"] {
    margin-right: 1.5vw;
    padding: 0.5vw;
  }
}
.form-box li .co input[name="your-email"],
.form-box li .co input[name="your-company"] {
  background: #FFF;
  border: none;
  height: 20px;
  width: 448px;
  padding: 2px;
}
@media screen and (max-width: 900px), print {
  .form-box li .co input[name="your-email"],
  .form-box li .co input[name="your-company"] {
    height: 2.2vw;
    width: 100%;
    padding: 0.5vw;
  }
}
.form-box li .co textarea[name="your-message"] {
  background: #FFF;
  border: none;
  height: 120px;
  width: 448px;
  padding: 2px;
}
@media screen and (max-width: 900px), print {
  .form-box li .co textarea[name="your-message"] {
    height: 13vw;
    width: 100%;
    padding: 0.5vw;
  }
}
.form-box li .co .cap {
  padding: 5px 0 0;
}
@media screen and (max-width: 900px), print {
  .form-box li .co .cap {
    padding: 0.8vw 0 0;
  }
}
.form-box li .btn-send {
  background: #FFF;
}
.form-box li .btn-send p {
  width: 100%;
  height: 50px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
@media screen and (max-width: 900px), print {
  .form-box li .btn-send p {
    height: 5.6vw;
  }
}
.form-box li .btn-send input.wpcf7-submit {
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  color: #005aa5;
  font-size: 2.3rem;
  font-weight: 700;
}
@media screen and (max-width: 900px), print {
  .form-box li .btn-send input.wpcf7-submit {
    font-size: 1.2rem;
  }
}
.form-box h2.complete {
  background: url(../img/icon-complete.svg) no-repeat top center;
  background-size: 70px auto;
  padding: 94px 0 0;
  margin-bottom: 25px;
  font-size: 2.6rem;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 900px), print {
  .form-box h2.complete {
    background: url(../img/icon-complete.svg) no-repeat top center;
    background-size: 14vw auto;
    padding: 18vw 0 0;
    margin-bottom: 8vw;
    font-size: 2.0rem;
  }
}
.form-box .complete-txt {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5;
}
@media screen and (max-width: 900px), print {
  .form-box .complete-txt {
    font-size: 1.2rem;
  }
}

.wpcf7-spinner,
.wpcf7-response-output {
  display: none !important;
}

.page-content-box {
  background: #005aa5;
}
.page-content-box#thanks .__inner {
  width: 100%;
  height: calc(100lvh - 64px);
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
@media screen and (max-width: 900px), print {
  .page-content-box#thanks .__inner {
    height: calc(100lvh - 14vw);
  }
}
.page-content-box .__inner {
  padding: 225px 0 80px;
}
@media screen and (max-width: 900px), print {
  .page-content-box .__inner {
    padding: 36vw 0 20vw;
    min-height: calc(100lvh - 46vw);
  }
}
.page-content-box h1 {
  display: block;
  text-indent: -9999px;
  margin: 0 auto 80px;
  width: 645px;
  height: 188px;
}
@media screen and (max-width: 900px), print {
  .page-content-box h1 {
    width: 71.28vw;
    height: 21vw;
    margin: 0 auto 8.7vw;
  }
}
.page-content-box h1.h1-ttl-1 {
  background: url(../img/h2-ttl-2.svg) no-repeat top center;
  background-size: auto 100%;
}
.page-content-box h1.h1-ttl-2 {
  background: url(../img/h2-ttl-3.svg) no-repeat top center;
  background-size: auto 100%;
}

.page-navigation {
  width: 470px;
  height: 88px;
  margin: 30px auto 0;
  position: relative;
}
@media screen and (max-width: 900px), print {
  .page-navigation {
    width: 100%;
    height: 16vw;
    margin: 8vw auto 0;
  }
}
.page-navigation .btn-index {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 70px;
  height: 88px;
}
@media screen and (max-width: 900px), print {
  .page-navigation .btn-index {
    width: 12.72vw;
    height: 16vw;
  }
}
.page-navigation .btn-index a {
  width: 100%;
  height: 100%;
  background: url(../img/nav-index.svg) no-repeat bottom center;
  background-size: 100% auto;
  display: block;
}
.page-navigation .btn-index a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.page-navigation .extend {
  display: none;
}
.page-navigation .previouspostslink {
  position: absolute;
  top: 0;
  left: calc(50% - 133px);
  width: 28px;
  height: 88px;
  background: url(../img/nav-prev.svg) no-repeat bottom center;
  background-size: 100% auto;
  display: block;
  text-indent: -9999px;
}
@media screen and (max-width: 900px), print {
  .page-navigation .previouspostslink {
    width: 5.1vw;
    height: 16vw;
    left: calc(50% - 20vw);
  }
}
.page-navigation .previouspostslink:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.page-navigation .nextpostslink {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 88px;
  background: url(../img/nav-next.svg) no-repeat bottom center;
  background-size: 100% auto;
  display: block;
  text-indent: -9999px;
  margin: 0 100px;
}
@media screen and (max-width: 900px), print {
  .page-navigation .nextpostslink {
    width: 5.1vw;
    height: 16vw;
    margin: 0;
    right: calc(50% - 20vw);
  }
}
.page-navigation .nextpostslink:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.page-navigation .first {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 88px;
  background: url(../img/nav-prev-last.svg) no-repeat bottom center;
  background-size: 100% auto;
  display: block;
  text-indent: -9999px;
}
@media screen and (max-width: 900px), print {
  .page-navigation .first {
    width: 5.76vw;
    height: 16vw;
  }
}
.page-navigation .first:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.page-navigation .last {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 88px;
  background: url(../img/nav-next-last.svg) no-repeat bottom center;
  background-size: 100% auto;
  display: block;
  text-indent: -9999px;
}
@media screen and (max-width: 900px), print {
  .page-navigation .last {
    width: 5.76vw;
    height: 16vw;
  }
}
.page-navigation .last:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.page-nav {
  border-bottom: #FFF solid 1px;
  padding-bottom: 8px;
  margin-bottom: 75px;
}
@media screen and (max-width: 900px), print {
  .page-nav {
    padding-bottom: 2vw;
    margin-bottom: 14vw;
    width: 100%;
  }
}
.page-nav ul {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
@media screen and (max-width: 900px), print {
  .page-nav ul {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.page-nav li {
  margin: 0 35px;
}
@media screen and (max-width: 900px), print {
  .page-nav li {
    margin: 0 3vw;
  }
}
.page-nav li a {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
@media screen and (max-width: 900px), print {
  .page-nav li a {
    font-size: 1.2rem;
  }
}
.page-nav li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.page-nav li a.current {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

.post-type-archive .page-nav ul li:first-child a,
.single .page-nav ul li:first-child a {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

@media screen and (max-width: 900px), print {
  .post-type-archive-works .page-nav li,
  .single-works .page-nav li {
    margin: 0 2vw;
  }
}

.post-body {
  width: 646px;
  margin: 0 auto;
}
@media screen and (max-width: 900px), print {
  .post-body {
    width: 100%;
    padding: 0 12vw;
  }
}
.post-body.__works {
  width: 894px;
}
@media screen and (max-width: 900px), print {
  .post-body.__works {
    width: 100%;
    padding: 0 12vw;
  }
}
.post-body .__wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media screen and (max-width: 900px), print {
  .post-body .__wrap {
    display: block;
  }
}
.post-body .__wrap .photos {
  width: 408px;
}
@media screen and (max-width: 900px), print {
  .post-body .__wrap .photos {
    width: 100%;
    margin-bottom: 18vw;
  }
}
.post-body .__wrap .photos .pic:not(:last-child) {
  margin-bottom: 20px;
}
@media screen and (max-width: 900px), print {
  .post-body .__wrap .photos .pic:not(:last-child) {
    margin-bottom: 5vw;
  }
}
.post-body .__wrap .photos img {
  display: block;
  width: 100%;
  height: auto;
}
.post-body .__wrap .txt {
  width: 450px;
}
@media screen and (max-width: 900px), print {
  .post-body .__wrap .txt {
    width: 100%;
  }
}
.post-body h2 {
  font-size: 3.4rem;
  line-height: 1.4;
  margin-bottom: 60px;
  font-weight: 400;
}
@media screen and (max-width: 900px), print {
  .post-body h2 {
    font-size: 1.8rem;
    margin-bottom: 8vw;
  }
}
.post-body .post-content p {
  font-size: 2.4rem;
  line-height: 1.66;
  padding: 0 0 40px;
}
@media screen and (max-width: 900px), print {
  .post-body .post-content p {
    font-size: 1.3rem;
    padding: 0 0 7vw;
  }
}
.post-body .post-content img {
  display: block;
  width: 100%;
  height: auto;
}
.post-body .post-content h3 {
  font-size: 1.5rem;
  line-height: 1.0;
  font-weight: 500;
  margin-bottom: 10px;
}
@media screen and (max-width: 900px), print {
  .post-body .post-content h3 {
    font-size: 1.4rem;
    margin-bottom: 2.5vw;
  }
}
.post-body .post-content .t {
  font-size: 1.8rem;
  line-height: 1.5;
}
@media screen and (max-width: 900px), print {
  .post-body .post-content .t {
    font-size: 1.3rem;
  }
}
.post-body .post-content .t:not(:last-child) {
  padding-bottom: 40px;
}
@media screen and (max-width: 900px), print {
  .post-body .post-content .t:not(:last-child) {
    padding-bottom: 7vw;
  }
}
.post-body .credit {
  font-size: 1.5rem;
  line-height: 1.5;
  padding-bottom: 40px;
}
@media screen and (max-width: 900px), print {
  .post-body .credit {
    font-size: 1.3rem;
    padding-bottom: 7vw;
  }
}
.post-body .meta {
  width: 100%;
  background-image: linear-gradient(to right, #ffffff 4px, rgba(0, 0, 0, 0) 4px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  padding: 10px 0 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  font-size: 1.5rem;
}
@media screen and (max-width: 900px), print {
  .post-body .meta {
    font-size: 1.0rem;
    padding: 2.5vw 0 0;
  }
}
.post-body .meta .date {
  padding-right: 10px;
}
@media screen and (max-width: 900px), print {
  .post-body .meta .date {
    padding-right: 2.5vw;
  }
}
.post-body .sns li {
  display: -webkit-flex;
  display: flex;
  font-size: 1.5rem;
  line-height: 1.5;
}
@media screen and (max-width: 900px), print {
  .post-body .sns li {
    font-size: 1.0rem;
  }
}
.post-body .sns li .tl {
  padding-right: 8px;
}
@media screen and (max-width: 900px), print {
  .post-body .sns li .tl {
    padding-right: 1.8vw;
  }
}
.post-body .sns li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.post-page-navigation {
  width: 100%;
  height: 88px;
  margin: 50px auto 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
@media screen and (max-width: 900px), print {
  .post-page-navigation {
    width: 100%;
    height: 16vw;
    margin: 10vw auto 0;
  }
}
.post-page-navigation.__works {
  border-top: #FFF solid 1px;
  padding: 50px 0 0;
}
@media screen and (max-width: 900px), print {
  .post-page-navigation.__works {
    padding: 10vw 0 0;
  }
}
.post-page-navigation .btn-index {
  width: 70px;
  height: 88px;
  margin: 0 60px;
}
@media screen and (max-width: 900px), print {
  .post-page-navigation .btn-index {
    width: 12.72vw;
    height: 16vw;
    margin: 0 10vw;
  }
}
.post-page-navigation .btn-index a {
  width: 100%;
  height: 100%;
  background: url(../img/nav-index.svg) no-repeat bottom center;
  background-size: 100% auto;
  display: block;
}
.post-page-navigation .btn-index a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.post-page-navigation .prev a {
  width: 28px;
  height: 88px;
  background: url(../img/nav-prev.svg) no-repeat bottom center;
  background-size: 100% auto;
  display: block;
  text-indent: -9999px;
  display: block;
}
@media screen and (max-width: 900px), print {
  .post-page-navigation .prev a {
    width: 5.1vw;
    height: 16vw;
  }
}
.post-page-navigation .prev a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
.post-page-navigation .next a {
  width: 28px;
  height: 88px;
  background: url(../img/nav-next.svg) no-repeat bottom center;
  background-size: 100% auto;
  display: block;
  text-indent: -9999px;
  display: block;
}
@media screen and (max-width: 900px), print {
  .post-page-navigation .next a {
    width: 5.1vw;
    height: 16vw;
  }
}
.post-page-navigation .next a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}