@font-face {
  font-family: Beirut;
  src: url(../font/BeirutDisplay.eot);
  src: url(../font/BeirutDisplay-1.eot) format("embedded-opentype"), url(../font/BeirutDisplay.woff2) format("woff2"), url(../font/BeirutDisplay.woff) format("woff");
  font-style: normal;
  font-display: swap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.f-u, .page-top #s1 .cp, .page-top #s6 .list .flex .txts strong,
.page-top #s7 .flex h3, .page-top #s8 .flex-2 .l, .page-top #s9 .flex-2 .l, h2 {
  font-family: Beirut, nimbus-sans, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  font-style: normal;
}

.f-ja, .page-contact #s1 .flex .r strong, .page-top #s7_2 .flex h3, .page-top #s2 .txts strong, .page-top #s3 .flex .l strong, .page-top #s4 .box1 .flex .lead .center strong {
  font-family: source-han-serif-japanese, serif;
  font-weight: 500
}

* {
  word-wrap: break-word;
  -webkit-text-size-adjust: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  outline: 0!important;
  font-feature-settings: 'palt'
}

abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0;
  border: 0;
  outline: 0
}

article, aside, details, em, figcaption, figure, footer, header, hgroup, menu, nav, section, strong {
  font-style: normal;
  display: block
}

nav ul {
  list-style: none
}

blockquote, q {
  quotes: none
}

span {
  display: block
}

q:after, q:before {
  content: '';
  content: none
}

img {
  width: 100%;
  vertical-align: bottom
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  text-decoration: none;
  display: block;
  cursor: pointer;
  color: currentColor;
  background: 0 0;
  -webkit-transition: all .6s;
  transition: all .6s
}

@media screen and (min-width:768px) {
  a:hover {
    opacity: .6
  }
}

ins {
  text-decoration: none;
  color: #000;
  background-color: #ff9
}

mark {
  font-weight: 700;
  font-style: italic;
  color: #000;
  background-color: #ff9
}

del {
  text-decoration: line-through
}

svg {
  width: 100%;
  height: 100%
}

i {
  font-style: normal;
  display: block
}

abbr[title], dfn[title] {
  cursor: help;
  border-bottom: 1px dotted
}

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

hr {
  height: 1px;
  margin: 1em 0;
  padding: 0;
  display: block;
  border: 0;
  border-top: 1px solid #ccc
}

input, select {
  vertical-align: middle;
  -moz-appearance: none;
  -webkit-appearance: none
}

textarea {
  border: 1px solid #ccc;
  outline: 0;
  resize: none;
  width: 100%;
  min-height: 293px;
  padding: 10px;
  font-size: 1.4rem
}

input {
  font-size: 1.4rem;
  padding: 10px;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 1px solid #ccc;
  outline: 0
}

::-moz-selection {
  color: #e6dfd3;
  background: rgba(63, 77, 87, .6)
}

::selection {
  color: #e6dfd3;
  background: #3f4d57
}

.comp {
  position: absolute;
  top: -1810px;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .4
}

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

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

body, html {
  width: 100%;
  height: 100%;
  font-family: nimbus-sans, source-han-sans-japanese, 'Yu Gothic', YuGothic, sans-serif;
  font-size: 62.5%;
  font-weight: 400;
  background: #e6dfd3;
  line-height: 1.5;
  color: #3f4d57
}

@media screen and (max-width:768px) {
  body, html {
    overflow: hidden
  }
}

.scroll-cont {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll
}

@media screen and (min-width:768px) {
  .scroll-cont {
    overflow: hidden;
    z-index: 1
  }
}

@media screen and (max-width:768px) {
  .scroll-cont {
    height: 100%;
    will-change: scroll-position;
    transform: translate3d(0, 0, 0)!important;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch
  }
}

.hidden {
  overflow: hidden
}

#c {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none
}

#c img {
  opacity: 0
}

#c canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.s-in {
  line-height: 1
}

.s-in.is-in .zoom {
  transform: translateX(0) translateY(0) translateZ(0) scale(1)
}

.s-in .zoom {
  transform: translateX(0) translateY(0) translateZ(0) scale(1.2);
  transition: transform 2s
}

#pop-up {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 109;
  transition: opacity .6s;
  opacity: 0;
  pointer-events: none
}

#pop-up.is-in {
  opacity: 1;
  pointer-events: visible
}

#pop-up.is-in .center {
  transform: translateX(0) translateY(0) translateZ(0)
}

#pop-up .close {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 23px 0;
  right: 15px;
  width: 66px;
  color: #e6dfd3;
  z-index: 50;
  font-size: 1.4rem;
  letter-spacing: .4px
}

#pop-up .bg {
  background: rgba(63, 77, 87, .95);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1
}

#pop-up .center {
  z-index: 3;
  background: #e6dfd3;
  width: 88%;
  padding: 54px 10px;
  position: relative;
  transform: translateX(0) translateY(40px) translateZ(0);
  transition: transform .6s
}

@media screen and (min-width:768px) {
  #pop-up .center {
    width: 900px;
    padding: 0 0
  }
}

@media screen and (min-width:768px) {
  #pop-up .center .flex {
    display: flex;
    align-items: center
  }
}

#pop-up .center .flex .img {
  width: 50%
}

#pop-up .center .flex .r {
  width: 100%;
  text-align: center
}

@media screen and (min-width:768px) {
  #pop-up .center .flex .r {
    width: 50%
  }
}

#pop-up .center .flex .r .p1 {
  letter-spacing: 1px;
  font-size: 1.4rem;
  margin-bottom: 26px
}

@media screen and (min-width:768px) {
  #pop-up .center .flex .r .p1 {
    margin-bottom: 40px;
    font-size: 1.6rem
  }
}

#pop-up .center .flex .r .p2 {
  letter-spacing: .8px;
  font-size: 2.5rem
}

@media screen and (min-width:768px) {
  #pop-up .center .flex .r .p2 {
    font-size: 2.8rem
  }
}

#pop-up .center .flex .r .p3 {
  letter-spacing: 1px;
  font-size: 1.4rem;
  border-top: 1px solid #3f4d57;
  border-bottom: 1px solid #3f4d57;
  padding: 6px 0 5px;
  width: 272px;
  margin: 10px auto 16px
}

@media screen and (min-width:768px) {
  #pop-up .center .flex .r .p3 {
    margin: 10px auto 20px;
    padding: 8px 0 5px;
    font-size: 1.6rem
  }
}

#pop-up .center .flex .r .p3 em {
  font-size: 2.5rem;
  display: inline-block;
  letter-spacing: 0;
  vertical-align: middle;
  margin-top: -6px
}

@media screen and (min-width:768px) {
  #pop-up .center .flex .r .p3 em {
    font-size: 2.8rem
  }
}

#pop-up .center .flex .r .p4 {
  letter-spacing: 1px;
  font-size: 1.4rem
}

@media screen and (min-width:768px) {
  #pop-up .center .flex .r .p4 {
    font-size: 1.6rem
  }
}

#pop-up .center .flex .r .p5 {
  letter-spacing: 1px;
  font-size: 1.4rem
}

@media screen and (min-width:768px) {
  #pop-up .center .flex .r .p5 {
    font-size: 1.8rem
  }
}

#pop-up .center .flex .r a {
  width: 272px;
  margin: 14px auto 20px;
  background: #3f4d57;
  color: #e6dfd3;
  padding: 16px 0;
  font-size: 1.4rem;
  letter-spacing: 1px;
  transition: all .3s;
  border: 1px solid #3f4d57
}

@media screen and (min-width:768px) {
  #pop-up .center .flex .r a {
    margin: 22px auto 38px
  }
}

#pop-up .center .flex .r a:before {
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  display: inline-block;
  border-top: 2px solid #e6dfd3;
  border-right: 2px solid #e6dfd3;
  transform: translateX(0) translateY(0) translateZ(0) rotate(45deg);
  margin-right: 11px;
  transition: all .3s
}

#pop-up .center .flex .r a:hover {
  opacity: 1
}

@media screen and (min-width:768px) {
  #pop-up .center .flex .r a:hover {
    background: #e6dfd3;
    color: #3f4d57
  }
  #pop-up .center .flex .r a:hover:before {
    border-top: 2px solid #3f4d57;
    border-right: 2px solid #3f4d57
  }
}

#cursor {
  pointer-events: none;
  position: fixed;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  z-index: 110
}

#cursor.is-grabbing .grab:before {
  transform: translateX(-6px) translateY(0) translateZ(0) rotate(-45deg)
}

#cursor.is-grabbing .grab:after {
  transform: translateX(6px) translateY(0) translateZ(0) rotate(135deg)
}

#cursor.is-grabbing .grab i {
  transform: translateX(0) translateY(0) translateZ(0) scale(.85)
}

#cursor.is-grab .grab {
  transform: translateX(0) translateY(0) translateZ(0) scale(1)
}

#cursor.is-play .play {
  transform: translateX(0) translateY(0) translateZ(0) scale(1)
}

#cursor.is-close .close {
  transform: translateX(0) translateY(0) translateZ(0) scale(1)
}

#cursor .grab {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform .6s;
  transform: translateX(0) translateY(0) translateZ(0) scale(0)
}

#cursor .grab:before {
  display: block;
  content: '';
  box-sizing: border-box;
  border-top: 2px solid #e6dfd3;
  border-left: 2px solid #e6dfd3;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 30px;
  z-index: 100;
  transform: translateX(0) translateY(0) translateZ(0) rotate(-45deg);
  transition: transform .6s
}

#cursor .grab:after {
  display: block;
  content: '';
  box-sizing: border-box;
  border-top: 2px solid #e6dfd3;
  border-left: 2px solid #e6dfd3;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 30px;
  z-index: 100;
  transform: translateX(0) translateY(0) translateZ(0) rotate(135deg);
  transition: transform .6s
}

#cursor .grab i {
  background: rgba(63, 77, 87, .8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  transition: transform .6s
}

#cursor .close, #cursor .play {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform .6s;
  transform: translateX(0) translateY(0) translateZ(0) scale(0)
}

#cursor .close em, #cursor .play em {
  text-align: center;
  font-style: normal;
  color: #e6dfd3;
  font-size: 1.6rem;
  position: absolute;
  top: 37px;
  letter-spacing: 1px;
  left: 0;
  width: 100%;
  z-index: 10
}

#cursor .close i, #cursor .play i {
  background: rgba(63, 77, 87, .8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  transition: transform .6s
}

#cursor .close em {
  color: #3f4d57
}

#cursor .close i {
  background: #e6dfd3
}

#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 105;
  cursor: pointer;
  background-color: #3f4d57;
  clip: rect(0 0 0 0);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden
}

#modal.is-in {
  pointer-events: visible
}

#modal.is-in video {
  pointer-events: visible
}

@media screen and (max-width:768px) {
  #modal.is-loading .in video {
    opacity: 0
  }
}

#modal.is-loading p i {
  transform: translateX(0) translateY(0) translateZ(0)
}

#modal .close {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 23px 0;
  right: 15px;
  width: 66px;
  color: #e6dfd3;
  z-index: 50;
  font-size: 1.4rem;
  letter-spacing: .4px
}

@media screen and (min-width:768px) {
  #modal .close {
    right: 0;
    text-indent: -9999px;
    width: 100%;
    height: 100%
  }
}

#modal .in {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 20
}

@media screen and (min-width:768px) {
  #modal .in {
    clip: rect(0 0 0 0)
  }
}

#modal .in video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  max-width: 92vw;
  max-height: 92vh
}

@media screen and (max-width:768px) {
  #modal .in video {
    opacity: 1;
    transition: opacity .3s
  }
}

#modal p {
  position: absolute;
  top: calc(42.4% - 10px);
  left: 0;
  text-align: left;
  width: 250%;
  font-size: 1.8rem;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  animation-name: moveSP;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards
}

@media screen and (min-width:768px) {
  #modal p {
    animation-name: movePC;
    top: 48.3vh;
    font-size: 2rem;
    width: 160%
  }
}

#modal p i {
  display: inline-block;
  color: #e6dfd3;
  transition: transform .8s cubic-bezier(.32, 0, .02, 1.01);
  transform: translateX(0) translateY(100%) translateZ(0)
}

@keyframes movePC {
  0% {
    transform: translateX(0) translateY(0) translateZ(0)
  }
  100% {
    transform: translateX(-75px) translateY(0) translateZ(0)
  }
}

@keyframes moveSP {
  0% {
    transform: translateX(0) translateY(0) translateZ(0)
  }
  100% {
    transform: translateX(-69px) translateY(0) translateZ(0)
  }
}

#h {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 100
}

@media screen and (min-width:768px) {
  #h {
    top: 27px;
    height: 70px
  }
}

#h .logo {
  position: absolute;
  top: 21px;
  left: 20px;
  width: 70px;
  height: 19px
}

@media screen and (min-width:768px) {
  #h .logo {
    top: 16px;
    left: 48px;
    width: 110px;
    height: 27px
  }
}

#h .logo span {
  display: none
}

#h .logo a {
  width: 70px;
  height: 19px;
  transition: all 0s;
  opacity: 1!important
}

@media screen and (min-width:768px) {
  #h .logo a {
    width: 110px;
    height: 27px
  }
}

#h .logo a svg {
  transition: all .3s;
  fill: currentColor
}

#h #copy {
  position: absolute;
  left: 0;
  text-align: center;
  width: 100%;
  color: currentColor;
  z-index: 10;
  top: -35px;
  font-size: 2rem;
  transition: color .3s;
  pointer-events: none;
  letter-spacing: .4px
}

#h .hidden {
  visibility: hidden
}

#h .nav {
  position: absolute;
  top: 0;
  right: 0;
  width: 92px;
  height: 66px;
  cursor: pointer;
  text-align: center
}

@media screen and (min-width:768px) {
  #h .nav {
    top: 0;
    right: 34px;
    width: 80px;
    height: 70px;
    padding-top: 24px
  }
}

#h .nav:hover {
  opacity: 1
}

@media screen and (min-width:768px) {
  #h .nav:hover i {
    opacity: 0;
    transform: translateX(0) translateY(-10px) translateZ(0) skewY(10deg)
  }
  #h .nav:hover i:last-child {
    opacity: 1;
    transform: translateX(0) translateY(0) translateZ(0)
  }
}

#h .nav i {
  letter-spacing: .4px;
  font-size: 1.4rem
}

@media screen and (max-width:768px) {
  #h .nav i {
    padding-top: 23px
  }
}

@media screen and (min-width:768px) {
  #h .nav i {
    letter-spacing: .4px;
    font-size: 1.6rem;
    color: currentColor;
    position: relative;
    text-align: center;
    transition: all .3s
  }
}

#h .nav i:last-child {
  opacity: 0
}

@media screen and (min-width:768px) {
  #h .nav i:last-child {
    transform: translateX(0) translateY(10px) translateZ(0) skewY(10deg);
    position: absolute;
    top: 24px;
    left: 0;
    text-align: center;
    width: 100%
  }
}

#h #back-top {
  width: 130px
}

@media screen and (min-width:768px) {
  #h #back-top {
    width: 124px
  }
}

#f {
  padding-top: 60px
}

@media screen and (min-width:768px) {
  #f {
    padding-top: 0
  }
}

#f #line {
  font-size: 7.7vw;
  line-height: 1.3;
  position: relative
}

@media screen and (max-width:768px) {
  #f #line {
    padding: 0 30px;
    margin-bottom: 40px
  }
}

@media screen and (min-width:768px) {
  #f #line {
    font-size: 7.1vw;
    height: 12vw;
    transform: translate3d(0, 0, 0);
    animation-name: vMove;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none
  }
}

@keyframes vMove {
  0% {
    transform: translate3d(0, 0, 0)
  }
  100% {
    transform: translate3d(-135.5%, 0, 0)
  }
}

@media screen and (min-width:768px) {
  #f #line span {
    width: 1000%;
    position: absolute
  }
}

#f #line i {
  display: inline-block
}

#f #line a {
  display: inline-block;
  -webkit-text-stroke: 1px transparent;
  text-stroke: 1px transparent;
  transition: all .2s
}

@media screen and (max-width:768px) {
  #f #line a {
    position: relative
  }
  #f #line a:before {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #3f4d57;
    bottom: 4px;
    left: 0
  }
}

#f #line a:hover {
  opacity: 1
}

@media screen and (min-width:768px) {
  #f #line a:hover {
    -webkit-text-stroke: 1px #3f4d57;
    text-stroke: 1px #3f4d57;
    color: #e6dfd3
  }
}

#f .flex {
  padding: 40px 30px 20px;
  margin: 0 auto;
  width: 100%;
  font-size: 1.3rem;
  letter-spacing: .2px;
  position: relative
}

@media screen and (min-width:768px) {
  #f .flex {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    padding: 46px 0;
    margin: 0 auto;
    width: 87%;
    letter-spacing: .6px
  }
}

@media screen and (max-width:768px) {
  #f .flex .l {
    margin-bottom: 20px
  }
}

@media screen and (min-width:768px) {
  #f .flex .l {
    display: flex;
    align-items: center;
    width: 460px
  }
}

#f .flex .l .logo {
  width: 87px;
  height: 21px;
  display: inline-block
}

@media screen and (min-width:768px) {
  #f .flex .l .logo {
    width: 112px;
    height: 28px;
    margin-right: 40px
  }
}

#f .flex .l .logo svg {
  fill: #3f4d57
}

@media screen and (max-width:768px) {
  #f .flex .r {
    width: 100%
  }
}

@media screen and (min-width:768px) {
  #f .flex .r {
    text-align: right;
    width: 1080px;
    position: relative;
    top: 14px
  }
}

#f .flex .r .jp {
  font-size: 1.1rem;
  margin-right: 0
}

@media screen and (min-width:768px) {
  #f .flex .r .jp {
    margin-right: 30px;
    font-size: 1.1rem
  }
}

#f .flex .r a {
  display: inline-block;
  margin-right: 30px
}

@media screen and (max-width:768px) {
  #f .flex .r a {
    margin-bottom: 7px
  }
}

@media screen and (min-width:768px) {
  #f .flex .r a {
    margin-right: 16px
  }
}

@media screen and (max-width:768px) {
  #f .flex .r small {
    margin-top: 24px;
    display: block
  }
}

@media screen and (min-width:768px) {
  #f .flex .r small {
    margin-top: 0;
    display: inline-block
  }
}

#menu {
  position: fixed;
  top: 0;
  right: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 100;
  color: currentColor
}

@media screen and (min-width:768px) {
  #menu {
    width: 100%;
    height: 100vh
  }
}

#menu.is-in {
  pointer-events: visible
}

#menu .bg {
  background: url(../img/common/bg-g.jpg) 0 0 repeat;
  background-size: 50px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
  transform: translateX(0) translateY(-100%) translateZ(0);
  z-index: 1
}

@media screen and (min-width:768px) {
  #menu .bg {
    width: 50%
  }
}

#menu #q {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
  z-index: 0;
  cursor: pointer
}

@media screen and (min-width:768px) {
  #menu #q {
    width: 100%
  }
}

#menu #close {
  position: absolute;
  top: 0;
  right: 0;
  width: 95px;
  height: 66px;
  cursor: pointer;
  opacity: 0;
  z-index: 6;
  color: currentColor;
  text-align: center
}

@media screen and (min-width:768px) {
  #menu #close {
    top: 27px;
    right: 15px;
    width: 120px;
    height: 70px;
    padding-top: 24px
  }
}

@media screen and (min-width:768px) {
  #menu #close:hover i {
    opacity: 0;
    transform: translateX(0) translateY(-10px) translateZ(0) skewY(10deg)
  }
  #menu #close:hover i:last-child {
    opacity: 1;
    transform: translateX(0) translateY(0) translateZ(0)
  }
}

#menu #close i {
  letter-spacing: .4px;
  font-size: 1.4rem
}

@media screen and (max-width:768px) {
  #menu #close i {
    padding-top: 22px
  }
}

@media screen and (min-width:768px) {
  #menu #close i {
    letter-spacing: .4px;
    font-size: 1.6rem;
    color: #e6dfd3;
    position: relative;
    text-align: center;
    transition: all .3s
  }
}

#menu #close i:last-child {
  opacity: 0
}

@media screen and (min-width:768px) {
  #menu #close i:last-child {
    transform: translateX(0) translateY(10px) translateZ(0) skewY(10deg);
    position: absolute;
    top: 24px;
    left: 0;
    text-align: center;
    width: 100%
  }
}

#menu .anchors {
  text-align: right;
  z-index: 2;
  position: relative
}

@media screen and (max-width:768px) {
  #menu .anchors {
    padding-top: 100px;
    margin-right: 30px
  }
}

@media screen and (min-width:768px) {
  #menu .anchors {
    position: absolute;
    bottom: 60px;
    right: 50px
  }
}

#menu .anchors span {
  opacity: 0;
  margin-top: 8px;
  letter-spacing: 1px;
  font-size: 2rem;
  color: #e6dfd3;
  cursor: pointer
}

@media screen and (min-width:768px) {
  #menu .anchors span:hover i {
    opacity: 0;
    transform: translateX(0) translateY(-10px) translateZ(0) skewY(10deg)
  }
  #menu .anchors span:hover i:last-child {
    opacity: 1;
    transform: translateX(0) translateY(0) translateZ(0)
  }
}

@media screen and (min-width:768px) {
  #menu .anchors span {
    margin-top: 18px;
    font-size: 1.6rem
  }
}

#menu .anchors span i {
  transition: all .3s
}

#menu .anchors span i:last-child {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transform: translateX(0) translateY(10px) translateZ(0) skewY(10deg)
}

#menu .social {
  position: relative;
  z-index: 2
}

@media screen and (max-width:768px) {
  #menu .social {
    margin-top: 40px;
    margin-right: 30px;
    text-align: right
  }
}

@media screen and (min-width:768px) {
  #menu .social {
    position: absolute;
    bottom: 60px;
    left: calc(50% + 50px)
  }
}

#menu .social a {
  opacity: 0;
  margin-top: 8px;
  letter-spacing: 1px;
  font-size: 1.4rem;
  color: #e6dfd3;
  transition: all 0s
}

@media screen and (min-width:768px) {
  #menu .social a {
    font-size: 1.6rem;
    margin-top: 18px
  }
}

@media screen and (min-width:768px) {
  #menu .social a:hover i {
    opacity: 0;
    transform: translateX(0) translateY(-10px) translateZ(0) skewY(10deg)
  }
  #menu .social a:hover i:last-child {
    opacity: 1;
    transform: translateX(0) translateY(0) translateZ(0)
  }
}

#menu .social a i {
  transition: all .3s
}

#menu .social a i:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(0) translateY(10px) translateZ(0) skewY(10deg)
}

.nav-b {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background: url(../img/common/bg-g.jpg) 0 0 repeat;
  background-size: 50px;
  z-index: 90;
  transition: transform .6s;
  padding: 22px 0
}

@media screen and (min-width:768px) {
  .nav-b {
    padding: 22px 0;
    bottom: 0;
    right: 50px;
    width: 304px
  }
}

.nav-b.is-out {
  transform: translateX(0) translateY(100%) translateZ(0)
}

.nav-b.force-out {
  transform: translateX(0) translateY(100%) translateZ(0)
}

.nav-b p {
  text-align: center;
  font-size: 1.2rem;
  color: #e6dfd3;
  letter-spacing: 1.6px;
  margin: 0 auto 11px;
  overflow: hidden
}

@media screen and (min-width:768px) {
  .nav-b p {
    font-size: 1.4rem;
    color: #e6dfd3;
    letter-spacing: 2.1px;
    margin: 0 auto 12px
  }
}

.nav-b .flex {
  display: flex;
  justify-content: center;
  width: 268px;
  margin: 0 auto
}

@media screen and (min-width:768px) {
  .nav-b .flex {
    width: 220px
  }
}

.nav-b .flex a, .nav-b .flex span {
  background-color: #e6dfd3;
  width: 130px;
  padding: 7px 0;
  position: relative;
  transition: all .3s;
  border: 1px solid #e6dfd3;
  color: #3f4d57;
  letter-spacing: .6px;
  font-size: 1.4rem;
  position: relative;
  text-align: center;
  cursor: pointer
}

@media screen and (min-width:768px) {
  .nav-b .flex a, .nav-b .flex span {
    font-size: 1.4rem;
    width: 105px;
    padding: 8px 0
  }
}

.nav-b .flex a:hover, .nav-b .flex span:hover {
  opacity: 1
}

@media screen and (min-width:768px) {
  .nav-b .flex a:hover, .nav-b .flex span:hover {
    background-color: transparent;
    color: #e6dfd3
  }
}

#panel-b {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url(../img/common/bg-g.jpg) 0 0 repeat;
  background-size: 50px;
  opacity: 0;
  transition: opacity .4s
}

#panel-load {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: url(../img/common/bg-g.jpg) 0 0 repeat;
  background-size: 50px;
  opacity: 1;
  transition: opacity .2s;
  white-space: nowrap;
  pointer-events: none
}

#panel-load p {
  position: absolute;
  top: calc(42.4% - 10px);
  left: 0;
  text-align: left;
  width: 250%;
  font-size: 1.8rem;
  z-index: 10;
  overflow: hidden;
  animation-name: moveXSP;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards
}

@media screen and (min-width:768px) {
  #panel-load p {
    animation-name: moveXPC;
    top: 48.3vh;
    font-size: 2rem;
    width: 160%
  }
}

#panel-load p i {
  display: inline-block;
  color: #e6dfd3;
  transform: translateX(0) translateY(100%) translateZ(0)
}

@keyframes moveXPC {
  0% {
    transform: translateX(0) translateY(0) translateZ(0)
  }
  100% {
    transform: translateX(-343px) translateY(0) translateZ(0)
  }
}

@keyframes moveXSP {
  0% {
    transform: translateX(0) translateY(0) translateZ(0)
  }
  100% {
    transform: translateX(-308px) translateY(0) translateZ(0)
  }
}

.first-white #h #copy {
  color: #e6dfd3
}

.first-white #menu #close i {
  color: #e6dfd3!important
}

.nav-black #h #copy {
  color: #3f4d57
}

body[data-color=theme-black] #menu .bg {
  background: url(../img/common/bg-g.jpg) 0 0 repeat
}

body[data-color=theme-black] #menu #close i, body[data-color=theme-black] #menu a, body[data-color=theme-black] #menu span {
  color: #e6dfd3!important
}

body[data-color=theme-black] #h .logo a svg {
  fill: #3f4d57
}

body[data-color=theme-black] #h #copy {
  color: #3f4d57
}

body[data-color=theme-black] #h .nav i {
  color: #3f4d57
}

body[data-color=theme-white] #menu #close i, body[data-color=theme-white] #menu a, body[data-color=theme-white] #menu span {
  color: #3f4d57!important
}

body[data-color=theme-white] #menu .bg {
  background: url(../img/common/bg-w.jpg) 0 0 repeat
}

body[data-color=theme-white] #h .logo a svg {
  fill: #e6dfd3
}

body[data-color=theme-white] #h #copy {
  color: #e6dfd3
}

body[data-color=theme-white] #h .nav i {
  color: #e6dfd3
}

@media screen and (max-width:768px) {
  #pjax-cont {
    position: relative;
    z-index: 1
  }
}

#bg-ps {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0
}

#bg-ps span {
  width: 100%
}

#bg-ps .w {
  background: url(../img/common/bg-w.jpg) 0 0 repeat;
  background-size: 50px
}

#bg-ps .g {
  background: url(../img/common/bg-g.jpg) 0 0 repeat;
  background-size: 50px
}

.c-h {
  display: inline-block;
  font-size: 1.4rem
}

@media screen and (min-width:768px) {
  .c-h {
    font-size: 1.6rem
  }
}

.c-h:before {
  display: block;
  content: '';
  width: 30px;
  background-color: currentColor;
  height: 1px;
  display: inline-block;
  vertical-align: top;
  margin: 6px 10px 0 0
}

@media screen and (min-width:768px) {
  .c-h:before {
    margin: 8px 10px 0 0
  }
}

h2 {
  font-size: 9vw;
  line-height: 1.2;
  letter-spacing: 0;
  overflow: hidden
}

@media screen and (min-width:768px) {
  h2 {
    letter-spacing: .3vw;
    font-size: 5.4vw
  }
}

@media screen and (min-width:768px) {
  .page-top #s1-inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
  }
}

.page-top #s1-inner #mv-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translateX(0) translateY(0) translateZ(0) scale(1.2)
}

.page-top #s1-inner #mv1 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.page-top #s1-inner #mv2 {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

@media screen and (max-width:768px) {
  .page-top #s1-inner #mv2 {
    clip: rect(0 0 0 0)
  }
}

.page-top #s1-inner #nv-scroll {
  position: absolute;
  top: calc(100vh - 70px);
  left: 46px;
  color: #e6dfd3;
  font-size: 1.6rem;
  z-index: 10;
  letter-spacing: 1px;
  transition: opacity .6s
}

.page-top #s1-inner #nv-scroll.is-out {
  opacity: 0
}

.page-top #s1 {
  position: relative;
  width: 100%;
  overflow: hidden
}

@media screen and (min-width:768px) {
  .page-top #s1 {
    height: calc(240vh + 24vw);
  }
}

.page-top #s1 .white {
  position: absolute;
  top: calc(34% - 10px);
  left: 0;
  text-align: center;
  width: 100%;
  color: #e6dfd3;
  font-size: 1.8rem;
  z-index: 10
}

.page-top #s1 .cp {
  text-align: center;
  font-size: 7vw;
  width: 100%;
  color: #3f4d57
}

@media screen and (max-width:768px) {
  .page-top #s1 .cp {
    margin: 120px 0 0
  }
}

@media screen and (min-width:768px) {
  .page-top #s1 .cp {
    font-size: 6vw;
    position: absolute;
    top: calc(240vh + 12vw);
    left: 0;
    z-index: 10
  }
}

.page-top #s2 {
  position: relative;
  color: #3f4d57
}

@media screen and (max-width:768px) {
  .page-top #s2 {
    padding-top: 100px;
    padding-bottom: 100px
  }
}

@media screen and (min-width:768px) {
  .page-top #s2 {
    padding-bottom: 20%
  }
}

.page-top #s2 .img {
  width: 50.8%;
  margin: 0 auto;
  transform: translateX(100%) translateY(50%) translateZ(0) rotate(16deg);
  z-index: 10;
  position: relative;
  transition: transform 1.6s
}

@media screen and (min-width:768px) {
  .page-top #s2 .img {
    transform: translateX(0) translateY(100%) translateZ(0) rotate(-8deg);
    position: absolute;
    top: 0;
    left: 0;
    width: 33.3%;
    margin: 28% 0 0 11.7%
  }
}

.page-top #s2 .img.is-in {
  transform: translateX(0) translateY(0) translateZ(0) rotate(2deg)
}

.page-top #s2 .img img {
  backface-visibility: inherit
}

.page-top #s2 .txts {
  padding: 15% 30px 0;
  margin: 0;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-top #s2 .txts {
    padding: 54% 0 0 0;
    margin: 0 0 0 53.3%;
    width: 37%
  }
}

.page-top #s2 .txts em {
  margin-bottom: 32px
}

@media screen and (min-width:768px) {
  .page-top #s2 .txts em {
    margin-bottom: 66px
  }
}

.page-top #s2 .txts strong {
  font-size: 1.8rem;
  letter-spacing: 1.7px;
  margin-bottom: 20px;
  line-height: 1.65
}

@media screen and (min-width:768px) {
  .page-top #s2 .txts strong {
    font-size: 2.2rem;
    letter-spacing: 1.7px;
    margin-bottom: 52px
  }
}

.page-top #s2 .txts p {
  font-size: 1.2rem;
  letter-spacing: .2px;
  line-height: 2.15;
  text-align: justify
}

@media screen and (min-width:768px) {
  .page-top #s2 .txts p {
    font-size: 1.4rem;
    letter-spacing: 1.2px
  }
}

.page-top #s2 .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin: calc(17% + 100px) 0 0 0;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-top #s2 .bg {
    margin: 36% 0 0 0;
    width: 150%;
    opacity: 0;
    z-index: 1
  }
}

.page-top #s3 {
  padding-top: 0;
  /* padding-bottom: 100px; */
  position: relative;
  color: #e6dfd3
}

@media screen and (max-width:768px) {
  .page-top #s3 {
    background: url(../img/common/bg-g.jpg) 0 0 repeat;
    background-size: 50px
  }
}

@media screen and (min-width:768px) {
  .page-top #s3 {
    padding-top: 0;
    /* padding-bottom: 240px */
  }
}

.page-top #s3 #s3-logo {
  position: relative;
  width: 100%;
  height: 88vw;
  margin: auto
}

@media screen and (min-width:768px) {
  .page-top #s3 #s3-logo {
    height: calc(100vh + 140px);
    max-height: 1000px
  }
}

.page-top #s3 #s3-logo .symbol {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 56vw;
  height: auto;
  fill: #e6dfd3
}

@media screen and (max-width:768px) {
  .page-top #s3 #s3-logo .symbol {
    bottom: 0;
    right: 0
  }
}

@media screen and (min-width:768px) {
  .page-top #s3 #s3-logo .symbol {
    transform: translateX(0) translateY(-2%) translateZ(0) scale(1);
    top: 0;
    margin: auto;
    left: 36.6%;
    bottom: 0;
    width: 36vw;
    height: auto;
  }
}

.page-top #s3 #s3-logo #type2 {
  position: absolute;
  top: 17vw;
  left: 0;
  right: 0;
  width: 100%;
  height: 54vw;
  margin: auto
}

@media screen and (min-width:768px) {
  .page-top #s3 #s3-logo #type2 {
    top: 0;
    bottom: 0;
    width: 70%
  }
}

@media screen and (max-width:768px) {
  .page-top #s3 #s3-logo #type2 .gl-img {
    display: none
  }
}

.page-top #s3 #s3-logo #type2 img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto
}

@media screen and (min-width:768px) {
  .page-top #s3 #s3-logo #type2 img {
    opacity: 0
  }
}

.page-top #s3 .flex {
  width: 100%;
  margin: 0 auto
}

@media screen and (max-width:768px) {
  .page-top #s3 .flex {
    padding: 0 30px
  }
}

@media screen and (min-width:768px) {
  .page-top #s3 .flex {
    width: 80%;
    display: flex
  }
}

@media screen and (min-width:768px) {
  .page-top #s3 .flex .l {
    width: 37.5%
  }
}

.page-top #s3 .flex .l em {
  margin-bottom: 32px
}

@media screen and (min-width:768px) {
  .page-top #s3 .flex .l em {
    margin-bottom: 70px
  }
}

.page-top #s3 .flex .l strong {
  line-height: 1.65;
  font-size: 1.8rem;
  letter-spacing: 3px
}

@media screen and (max-width:768px) {
  .page-top #s3 .flex .l strong {
    margin-bottom: 20px
  }
}

@media screen and (min-width:768px) {
  .page-top #s3 .flex .l strong {
    font-size: 2.2rem;
    letter-spacing: 3.7px
  }
}

.page-top #s3 .flex .r {
  width: 100%;
  font-size: 1.2rem;
  line-height: 2.1
}

@media screen and (min-width:768px) {
  .page-top #s3 .flex .r {
    margin-top: -6px;
    width: 63%;
    font-size: 1.4rem;
    line-height: 2.15;
    font-size: 1.4rem;
    letter-spacing: 1.2px
  }
}

.page-top #s3 .flex .r p {
  text-align: justify
}

.page-top #s3 .flex .r ul {
  margin-top: 44px
}

@media screen and (min-width:768px) {
  .page-top #s3 .flex .r ul {
    margin-top: 76px
  }
}

.page-top #s3 .flex .r ul li {
  list-style: none;
  display: flex;
  border-bottom: 1px solid currentColor;
  padding-bottom: 26px;
  margin-bottom: 26px
}

@media screen and (max-width:768px) {
  .page-top #s3 .flex .r ul li {
    flex-wrap: wrap
  }
}

@media screen and (min-width:768px) {
  .page-top #s3 .flex .r ul li {
    padding-bottom: 20px;
    margin-bottom: 18px
  }
}

@media screen and (max-width:768px) {
  .page-top #s3 .flex .r ul li i {
    font-size: 1.8rem;
    line-height: 1.5
  }
}

@media screen and (max-width:768px) {
  .page-top #s3 .flex .r ul li span {
    padding-left: 12px;
    font-size: 1.8rem;
    line-height: 1.5
  }
}

@media screen and (min-width:768px) {
  .page-top #s3 .flex .r ul li span {
    width: 28%;
    padding-left: 8%
  }
}

.page-top #s4 {
  color: #3f4d57;
  position: relative;
  z-index: 1
}
@media screen and (max-width:768px) {
  .page-top #s4 {
    padding-top: 120px;
  }
}

@media screen and (min-width:768px) {
  .page-top #s4 {
    padding-top:200px;
  }
}


@media screen and (min-width:768px) {
  .page-top #s4 .box1 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between
  }
}

.page-top #s4 .box1 .flex {
  padding: 0 30px 0
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .flex {
    width: 50%;
    padding: 0 10vw 10vw 10vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between
  }
}

.page-top #s4 .box1 .flex .lead {
  padding-top: 100px
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .flex .lead {
    padding-top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column
  }
}

.page-top #s4 .box1 .flex .lead .center h2 {
  margin-bottom: 16px
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .flex .lead .center h2 {
    margin-bottom: 30px
  }
}

.page-top #s4 .box1 .flex .lead .center strong {
  font-size: 1.8rem;
  letter-spacing: 3px
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .flex .lead .center strong {
    font-size: 2.2rem;
    letter-spacing: 2px
  }
}

.page-top #s4 .box1 .flex .txts {
  padding-top: 60px
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .flex .txts {
    padding-top: 0
  }
}

.page-top #s4 .box1 .flex .txts .c-h {
  margin-bottom: 32px
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .flex .txts .c-h {
    margin-bottom: 60px
  }
}

.page-top #s4 .box1 .flex .txts .c-h:before {
  margin-top: 9px
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .flex .txts .c-h:before {
    margin-top: 11px
  }
}

.page-top #s4 .box1 .flex .txts p {
  font-size: 1.2rem;
  line-height: 2.1;
  text-align: justify
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .flex .txts p {
    font-size: 1.4rem;
    line-height: 2.1;
    letter-spacing: 1.2px
  }
}

.page-top #s4 .box1 .img {
  width: 100%
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .img {
    width: 50%;
    height: 62vw;
    overflow: hidden;
    position: relative
  }
}

@media screen and (min-width:768px) {
  .page-top #s4 .box1 .img img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
  }
}

.page-top #s4 .box2 {
  margin: 80px auto
}

@media screen and (max-width:768px) {
  .page-top #s4 .box2 {
    padding: 0 30px
  }
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 {
    width: 80%;
    /* margin: 180px auto; */
    padding-bottom:180px;
  }
}

.page-top #s4 .box2 .c-h {
  margin-bottom: 32px
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .c-h {
    margin-bottom: 60px
  }
}

.page-top #s4 .box2 .c-h:before {
  margin-top: 9px
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .c-h:before {
    margin-top: 11px
  }
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
  }
}

.page-top #s4 .box2 .lists .list {
  border-bottom: 1px solid #b2afa8;
  padding: 26px 0;
  display: flex;
  justify-content: space-between
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .lists .list {
    align-items: center;
    padding: 50px 0;
    width: 46%
  }
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .lists .list:first-child, .page-top #s4 .box2 .lists .list:nth-child(2) {
    border-top: 1px solid #b2afa8
  }
}

@media screen and (max-width:768px) {
  .page-top #s4 .box2 .lists .list:first-child {
    border-top: 1px solid #b2afa8
  }
}

.page-top #s4 .box2 .lists .list .num {
  width: 32px;
  height: 32px;
  color: #e6dfd3;
  background: #3f4d57;
  border-radius: 100%;
  text-align: center;
  font-size: 1.2rem;
  padding-top: 10px;
  line-height: 1
}

@media screen and (max-width:768px) {
  .page-top #s4 .box2 .lists .list .num {
    position: relative;
    top: -6px
  }
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .lists .list .num {
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    padding-top: 14px
  }
}

.page-top #s4 .box2 .lists .list .txts {
  padding-left: 20px;
  width: calc(100% - 30px)
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .lists .list .txts {
    padding-left: 40px;
    width: calc(100% - 40px)
  }
}

.page-top #s4 .box2 .lists .list .txts strong {
  font-size: 1.4rem;
  font-weight: 100;
  letter-spacing: 1.6px;
  display: inline-block
}

@media screen and (max-width:768px) {
  .page-top #s4 .box2 .lists .list .txts strong {
    margin-bottom: 2px
  }
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .lists .list .txts strong {
    font-size: 1.8rem;
    letter-spacing: 1.6px;
    margin-right: 12px
  }
}

.page-top #s4 .box2 .lists .list .txts em {
  letter-spacing: 1.2px;
  font-size: 1.2rem;
  display: inline-block
}

@media screen and (max-width:768px) {
  .page-top #s4 .box2 .lists .list .txts em {
    margin-bottom: 4px
  }
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .lists .list .txts em {
    font-size: 1.4rem
  }
}

.page-top #s4 .box2 .lists .list .txts p {
  text-align: justify;
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 2.1;
  letter-spacing: 1.2px
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 .lists .list .txts p {
    font-size: 1.4rem
  }
}

.page-top #s4 .box2 small {
  margin-top: 40px;
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 2.1;
  color: #666
}

@media screen and (max-width:768px) {
  .page-top #s4 .box2 small:last-child {
    margin-top: 0
  }
}

@media screen and (min-width:768px) {
  .page-top #s4 .box2 small {
    margin-top: 60px;
    width: 46%
  }
}

.page-top .p-area {
  position: relative;
  width: 100%;
  height: 106vw;
  overflow: hidden;
  margin-top: 20vw;
  cursor: pointer
}

@media screen and (min-width:768px) {
  .page-top .p-area {
    margin-top: 242px;
    height: 56vw
  }
}

.page-top .p-area .video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%
}

.page-top .p-area .video-ico {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  backface-visibility: hidden
}

.page-top .p-area .video-ico.is-loading .play {
  transform: translateX(0) translateY(0) translateZ(0) scale(0)
}

.page-top .p-area .play {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 1.4rem;
  color: #e6dfd3;
  margin: auto;
  background-color: rgba(63, 77, 87, .8);
  border-radius: 100%;
  z-index: 100;
  letter-spacing: 1px;
  text-align: center;
  padding-top: 41px;
  text-indent: 2px;
  transition: transform .4s;
  transform: translateX(0) translateY(0) translateZ(0) scale(1)
}

.page-top #s5 {
  padding-top: 100px;
  padding-bottom: 100px;
  color: #3f4d57;
}

@media screen and (min-width:768px) {
  .page-top #s5 {
    /* padding-top: 240px; */
    padding-bottom: 240px;
  }
}

.page-top #s5 .flex {
  width: 100%;
  margin: 0 auto 20px;
}

@media screen and (max-width:768px) {
  .page-top #s5 .flex {
    padding: 0 30px
  }
}

@media screen and (min-width:768px) {
  .page-top #s5 .flex {
    width: 80%;
    margin: 0 auto 87px;
    display: flex;
    justify-content: space-between
  }
}

.page-top #s5 .flex h2 {
  line-height: .9
}

@media screen and (max-width:768px) {
  .page-top #s5 .flex h2 {
    margin-bottom: 30px
  }
}

@media screen and (min-width:768px) {
  .page-top #s5 .flex h2 {
    width: 50%
  }
}

.page-top #s5 .flex .t {
  letter-spacing: .9px;
  line-height: 2;
  font-size: 1.2rem;
  margin-bottom: 0;
  text-align: justify
}

@media screen and (min-width:768px) {
  .page-top #s5 .flex .t {
    width: 45.7%;
    letter-spacing: .9px;
    line-height: 2.3;
    font-size: 1.4rem
  }
}

.page-top #s5 .flex .scroll {
  margin-top: 40px;
  text-align: right;
  font-size: 1.2rem;
  letter-spacing: 1px;
  position: relative;
  padding-right: 15px
}

.page-top #s5 .flex .scroll:after {
  display: block;
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 5px;
  right: 0;
  border-top: 2px solid #3f4d57;
  border-right: 2px solid #3f4d57;
  transform: translateX(0) translateY(0) translateZ(0) rotate(45deg)
}

@media screen and (max-width:768px) {
  .page-top #s5 .wrap {
    width: 100%;
    padding: 0 30px;
    overflow-x: scroll;
    overflow-y: hidden
  }
}

.page-top #s5 .lists {
  position: relative;
  width: 670px;
  margin: 0 auto 34px
}

@media screen and (max-width:768px) {
  .page-top #s5 .lists {
    padding-right: 30px
  }
}

.page-top #s5 .lists .fade {
  border-top: 1px solid #b2afa8;
  border-left: 1px solid #b2afa8
}

@media screen and (min-width:768px) {
  .page-top #s5 .lists {
    width: 80%;
    margin: 0 auto 98px
  }
}

.page-top #s5 .lists .h {
  display: flex;
  border-bottom: 1px solid #b2afa8
}

.page-top #s5 .lists .h i {
  padding: 16px;
  font-size: 1rem;
  border-right: 1px solid #b2afa8;
  width: 22.9%;
  text-align: center
}

@media screen and (min-width:768px) {
  .page-top #s5 .lists .h i {
    padding: 28px;
    font-size: 1.4rem
  }
}

.page-top #s5 .lists .h i:first-child {
  width: 54.2%
}

.page-top #s5 .lists .cell {
  display: flex
}

.page-top #s5 .lists .cell .head {
  display: flex;
  align-items: center;
  width: 27%;
  border-right: 1px solid #b2afa8;
  border-bottom: 1px solid #b2afa8
}

.page-top #s5 .lists .cell .head i {
  font-size: 1rem;
  padding: 0 0 0 16px
}

@media screen and (min-width:768px) {
  .page-top #s5 .lists .cell .head i {
    font-size: 1.4rem;
    padding: 0 0 0 35px
  }
}

.page-top #s5 .lists .cell .detail {
  width: 73%
}

.page-top #s5 .lists .cell .detail .data {
  display: flex;
  border-bottom: 1px solid #b2afa8
}

.page-top #s5 .lists .cell .detail .data i {
  padding: 12px 16px 12px 16px;
  font-size: 1rem;
  letter-spacing: 1.4px;
  border-right: 1px solid #b2afa8;
  width: 31.4%;
  text-align: right;
  display: flex;
  align-items: center
}

@media screen and (min-width:768px) {
  .page-top #s5 .lists .cell .detail .data i {
    padding: 19px 40px 19px 36px;
    font-size: 1.4rem
  }
}

.page-top #s5 .lists .cell .detail .data i:first-child {
  width: 37.3%;
  text-align: left
}

.page-top #s5 .lists .cell .detail .data i span {
  width: 100%;
  line-height: 1.6
}

.page-top #s5 .anchor-wrap,.page-top #blog .anchor-wrap {
  text-align: center
}

@media screen and (max-width:768px) {
  .page-top #s5 .anchor-wrap,.page-top #blog .anchor-wrap {
    margin-top: 20px
  }
}

.page-top #s5 .anchor-wrap .in,.page-top #blog .anchor-wrap .in {
  display: inline-block;
  position: relative;
  cursor: pointer
}

@media screen and (max-width:768px) {
  .page-top #s5 .anchor-wrap .in,.page-top #blog .anchor-wrap .in {
    width: 200px
  }
}

@media screen and (min-width:768px) {
  .page-top #s5 .anchor-wrap .in:hover,.page-top #blog .anchor-wrap .in:hover  {
    opacity: 1
  }
  .page-top #s5 .anchor-wrap .in:hover span:before,.page-top #blog .anchor-wrap .in:hover span:before {
    transform: translateX(101%) translateY(0) translateZ(0)
  }
  .page-top #s5 .anchor-wrap .in:hover span:after,.page-top #blog .anchor-wrap .in:hover span:after {
    transform: translateX(6px) translateY(0) translateZ(0) rotate(45deg)
  }
}

.page-top #s5 .anchor-wrap .in span,.page-top #blog .anchor-wrap .in span {
  display: inline-block;
  position: relative;
  font-size: 1.4rem;
  letter-spacing: 1px;
  padding-bottom: 4px;
  overflow: hidden;
  padding-left: 20px
}

@media screen and (min-width:768px) {
  .page-top #s5 .anchor-wrap .in span,.page-top #blog .anchor-wrap .in span {
    font-size: 1.6rem;
    letter-spacing: 1px;
    padding-bottom: 4px;
    padding-left: 24px
  }
}

.page-top #s5 .anchor-wrap .in span:before,.page-top #blog .anchor-wrap .in span:before {
  display: block;
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 20px;
  background-color: currentColor;
  transition: transform .3s
}

@media screen and (min-width:768px) {
  .page-top #s5 .anchor-wrap .in span:before,.page-top #blog .anchor-wrap .in span:before {
    left: 24px
  }
}

.page-top #s5 .anchor-wrap .in span:after,.page-top #blog .anchor-wrap .in span:after {
  display: block;
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 11px;
  left: 0;
  border-top: 2px solid #3f4d57;
  border-right: 2px solid #3f4d57;
  transform: translateX(0) translateY(0) translateZ(0) rotate(45deg);
  transition: transform .2s cubic-bezier(.4, 1.25, .81, 1.56)
}

@media screen and (min-width:768px) {
  .page-top #s5 .anchor-wrap .in span:after,.page-top #blog .anchor-wrap .in span:after {
    width: 8px;
    height: 8px;
    bottom: 12px
  }
}

.page-top #s6 {
  padding-top: 100px;
  padding-bottom: 100px;
  color: #e6dfd3;
}

@media screen and (max-width:768px) {
  .page-top #s6 {
    background: url(../img/common/bg-g.jpg) 0 0 repeat;
    background-size: 50px
  }
}

@media screen and (min-width:768px) {
  .page-top #s6 {
    /* padding-top: 240px; */
    padding-bottom: 240px
  }
}

.page-top #s6 h2 {
  width: 100%;
  margin: 0 auto 40px
}

@media screen and (max-width:768px) {
  .page-top #s6 h2 {
    padding: 0 30px
  }
}

@media screen and (min-width:768px) {
  .page-top #s6 h2 {
    width: 80%;
    margin: 0 auto 133px
  }
}

.page-top #s6 .list {
  width: 100%;
  margin: 0 auto 88px
}

@media screen and (max-width:768px) {
  .page-top #s6 .list {
    padding: 0 30px
  }
}

@media screen and (min-width:768px) {
  .page-top #s6 .list {
    width: 80%;
    margin: 0 auto 166px
  }
}

.page-top #s6 .list:last-child {
  margin-bottom: 0
}

.page-top #s6 .list em {
  margin-bottom: 42px
}

@media screen and (min-width:768px) {
  .page-top #s6 .list em {
    margin-bottom: 64px
  }
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex {
    display: flex;
    justify-content: space-between
  }
}

.page-top #s6 .list .flex .img {
  width: 52%
}

@media screen and (max-width:768px) {
  .page-top #s6 .list .flex .img {
    margin: 0 auto 48px
  }
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .img {
    width: 29%
  }
}

.page-top #s6 .list .flex .img .in {
  overflow: hidden
}

.page-top #s6 .list .flex .txts {
  margin-top: 0;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts {
    margin-top: -4px;
    width: 45.6%
  }
}

.page-top #s6 .list .flex .txts strong {
  font-size: 2.4rem;
  line-height: 1;
  display: inline-block;
  margin-right: 16px
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts strong {
    margin-right: 36px;
    font-size: 2.6rem
  }
}

.page-top #s6 .list .flex .txts span {
  font-size: 1.4rem;
  line-height: 1;
  display: inline-block
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts span {
    font-size: 1.6rem
  }
}

.page-top #s6 .list .flex .txts p {
  margin-top: 20px;
  letter-spacing: .9px;
  line-height: 2;
  font-size: 1.2rem;
  margin-bottom: 18px;
  text-align: justify
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts p {
    margin-top: 60px;
    letter-spacing: 1.1px;
    line-height: 2.3;
    font-size: 1.4rem;
    margin-bottom: 38px
  }
}

.page-top #s6 .list .flex .txts .resume {
  letter-spacing: .9px;
  line-height: 2;
  font-size: 1.2rem
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts .resume {
    letter-spacing: 1.1px;
    line-height: 2.3;
    font-size: 1.4rem
  }
}

.page-top #s6 .list .flex .txts .resume i {
  padding-left: 10px;
  position: relative
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts .resume i {
    padding-left: 14px
  }
}

.page-top #s6 .list .flex .txts .resume i:before {
  display: block;
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  background-color: currentColor;
  width: 4px;
  height: 4px;
  border-radius: 100%
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts .resume i:before {
    top: 13px
  }
}

.page-top #s6 .list .flex .txts .social {
  margin-top: 25px
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts .social {
    margin-bottom: 42px
  }
}

.page-top #s6 .list .flex .txts .social a {
  display: inline-block;
  color: currentColor;
  font-size: 1.2rem;
  position: relative;
  padding-bottom: 5px;
  letter-spacing: .9px;
  overflow: hidden
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts .social a {
    font-size: 1.4rem
  }
}

.page-top #s6 .list .flex .txts .social a:hover {
  opacity: 1
}

@media screen and (min-width:768px) {
  .page-top #s6 .list .flex .txts .social a:hover:before {
    transform: translateX(101%) translateY(0) translateZ(0)
  }
}

.page-top #s6 .list .flex .txts .social a:before {
  display: block;
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transition: transform .3s
}

.page-top #s6 .list .flex .txts .social a:first-child {
  margin-right: 30px
}

/* ===============================
   #s7 / #s7_2 共通（セクション余白・レイアウト）
   =============================== */
.page-top :is(#s7, #s7_2) { padding-bottom: 40px; }
@media screen and (max-width:768px){
  .page-top :is(#s7, #s7_2) { padding-top: 100px; }
}
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) { padding-bottom: 120px; }
}

.page-top :is(#s7, #s7_2) .flex{ width:100%; margin:0 auto 60px; }
@media screen and (max-width:768px){
  .page-top :is(#s7, #s7_2) .flex{ padding:0 30px; }
}
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) .flex{
    width:80%;
    margin:0 auto 60px;
    display:flex; justify-content:space-between;
  }
}

/* 見出し・本文 */
.page-top :is(#s7, #s7_2) .flex h3{ font-size:9vw; line-height:1.2; }
@media screen and (max-width:768px){
  .page-top :is(#s7, #s7_2) .flex h3{ margin-bottom:30px; }
}
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) .flex h3{ padding-top:30px; line-height:.9; font-size:3.2rem; }
}

.page-top :is(#s7, #s7_2) .flex p{
  letter-spacing:.7px; font-size:1.2rem; line-height:2; text-align:justify;
}
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) .flex p{ letter-spacing:.7px; font-size:1.4rem; width:45.8%; }
}

/* ---- #s7 見出しと説明文を確実に見えるように ---- */
.page-top #s7{                 /* セクション自体に積層基準を作る */
  position: relative;
  z-index: 0;
}

.page-top #s7 .flex{           /* 見出し＆説明文のブロックを前面に */
  position: relative;
  z-index: 3;
}

/* 文字色をはっきり（背景が濃い帯でも読める色） */
.page-top #s7 .flex h3{
  color:#e6dfd3;               /* 見出し：薄ベージュ */
}

.page-top #s7 .flex p{
  color:#e6dfd3;               /* 説明文も同色で固定 */
}

/* 念のため：スライダーはテキストより後ろ */
.page-top #s7 #slider{
  position: relative;
  z-index: 1;
}

/* ===============================
   スライダー共通（#slider / #slider2）
   =============================== */
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) :is(#slider, #slider2){
    width:100%; height:30.6vw; position:relative;
    cursor:-webkit-grab; cursor:grab;
    /* 縦スクロール優先（ドラッグしながらでも上下に動ける） */
    touch-action: pan-y;
    /* 誤選択防止 */
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color: transparent;
  }
}
.page-top :is(#s7, #s7_2) :is(#slider, #slider2).is-grabbing{
  cursor:-webkit-grabbing; cursor:grabbing;
}

/* 内側：SPはフレックス／PCはJSで絶対配置 */
@media screen and (max-width:768px){
  .page-top :is(#s7, #s7_2) :is(#slider, #slider2) .slider-inner{
    display:flex; flex-wrap:wrap; justify-content:space-between;
  }
}
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) :is(#slider, #slider2) .slider-inner{
    position:absolute; top:0; left:0; height:100%;
    /* ドラッグは親で受けるため */
    pointer-events:none;
  }
}

/* 各スライド（PCの当たり判定） */
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) :is(#slider, #slider2) .slide{
    position:absolute; top:0; bottom:0; margin:auto;
    width:25vw; height:25.4vw;
    pointer-events:none;
  }
}

/* 画像ラッパ（PCの見た目枠） */
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) :is(#slider, #slider2) .slide-bg{
    position:absolute; top:0; left:0; right:0; margin:auto;
    width:20vw; height:27vw; overflow:hidden;
    pointer-events:none;
  }
}

/* 画像スパン（共通） */
.page-top :is(#s7, #s7_2) :is(#slider, #slider2) .slide-bg span{
  background-position:center; background-repeat:no-repeat; background-size:cover;
  width:41vw; height:54vw; margin-bottom:60px;
}
@media screen and (max-width:768px){
  .page-top :is(#s7, #s7_2) :is(#slider, #slider2) .slide-bg span{ margin-left:6vw; }
}
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) :is(#slider, #slider2) .slide-bg span{
    position:absolute; top:0; left:0; width:100%; height:100%;
    pointer-events:none;
  }
}

/* IMGフィット & 誤ドラッグ/選択防止 */
.page-top :is(#s7, #s7_2) :is(#slider, #slider2) .slide-bg span img{
  display:block; width:100%; height:100%; object-fit:cover; transform:translateZ(0);
  pointer-events:none; -webkit-user-drag:none; user-select:none;
}

/* SPの並びバランス（元CSSの nth-child を両方に適用） */
@media screen and (max-width:768px){
  .page-top :is(#s7, #s7_2) #slider .slide:nth-child(2n) .slide-bg span,
  .page-top :is(#s7, #s7_2) #slider2 .slide:nth-child(2n) .slide-bg span{
    margin-top:60px; margin-left:0; width:47vw; height:63vw;
  }
  .page-top :is(#s7, #s7_2) #slider .slide:nth-child(3n) .slide-bg span,
  .page-top :is(#s7, #s7_2) #slider2 .slide:nth-child(3n) .slide-bg span{
    margin-left:0; width:47vw; height:63vw;
  }
  .page-top :is(#s7, #s7_2) #slider .slide:nth-child(4n) .slide-bg span,
  .page-top :is(#s7, #s7_2) #slider2 .slide:nth-child(4n) .slide-bg span{
    margin-top:120px; margin-left:0; margin-right:6vw; margin-bottom:60px;
    width:41vw; height:54vw;
  }
  .page-top :is(#s7, #s7_2) #slider .slide:nth-child(7) .slide-bg span,
  .page-top :is(#s7, #s7_2) #slider2 .slide:nth-child(7) .slide-bg span{
    margin-top:0; margin-left:0; width:47vw; height:63vw;
  }
  .page-top :is(#s7, #s7_2) #slider .slide:nth-child(8) .slide-bg span,
  .page-top :is(#s7, #s7_2) #slider2 .slide:nth-child(8) .slide-bg span{
    margin-top:100px;
  }
}

/* ===============================
   地図（必要ならそのまま両方に）
   =============================== */
@media screen and (min-width:768px){
  .page-top :is(#s7, #s7_2) .maparea{ margin-top:120px; justify-content:center; }
}
@media screen and (max-width:768px){
  .page-top :is(#s7, #s7_2) .map{ width:100%; }
}

/* ===============================
   #s7_2 の #slider2 だけサイズ拡大の上書き
   （“42vw + 余白”・ズーム対策の高さなど）
   =============================== */
@media (min-width:768px){
  .page-top #s7_2 #slider2{
    --gap: 12vw;                   /* カード間の余白 */
    height: 56vw;                  /* ズーム時に上下が切れにくい高さ */
    padding: 0 calc(var(--gap) / 2);
    margin-bottom: 48px;
  }
  .page-top #s7_2 #slider2 .slide{
    width: calc(42vw + var(--gap)); /* 画像幅 + 余白（JSが読む幅） */
    height: 58vw;                   /* 画像より少し大きめにして保険 */
  }
  .page-top #s7_2 #slider2 .slide-bg{
    width: 42vw; height: 56vw;
    left: 0; right: 0; margin: auto; /* .slide 中央に配置 */
  }
  .page-top #s7_2 #slider2 .slide-bg span{ background-size: cover; }
  .page-top #s7_2 #slider2 .slide-bg span img{
    width:100%; height:100%; object-fit:cover;
  }
}
/* ================================
   見出しのコントラスト調整（最後に追記）
   ================================ */

/* 使い回し用（そのまま） */
:root{
  --ink-on-dark: #e6dfd3;  /* 濃い背景の上で使う明色 */
  --ink-on-light:#2f3f45;  /* 明るい背景の上で使う濃色 */
}

/* #s7 は明るい背景 → 濃い文字色にする */
.page-top #s7 .flex h3,
.page-top #s7 .flex p{
  color: var(--ink-on-light) !important;
  position: relative; z-index: 3;
}

/* #s7_2 は濃い背景 → 明るい文字色のまま */
.page-top #s7_2 .flex h3,
.page-top #s7_2 .flex p{
  color: var(--ink-on-dark) !important;
  position: relative; z-index: 3;
}

.page-top #s8 .r{
  position: relative; z-index: 2;
}

/* ---- #s8（ACCESS）を確実に濃色で表示する上書き ---- */
:root{
  --ink-on-light:#2f3f45;  /* 明るい背景で使う濃色（サイトのダークグレー） */
}

/* セクション全体の継承色を濃色に戻す（必要に応じて） */
.page-top #s8 { color: var(--ink-on-light); }

/* 見出し ACCESS */
.page-top #s8 .flex-2 .l{
  color: var(--ink-on-light) !important;
  position: relative; z-index: 2;
}

/* ラベルや本文リンクも同じ濃色に統一 */
.page-top #s8 .flex-2 i,
.page-top #s8 .flex-2 p,
.page-top #s8 .flex-2 a{
  color: var(--ink-on-light) !important;
}


/* ラベル・本文・リンクの色／背景をリセット（!importantで既存の“帯背景”を無効化） */
.page-top #s8 .cell i{
  display:block;
  margin: 0 0 .25rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--s8-title) !important;
  background: transparent !important;
  padding: 0 !important;
}
.page-top #s8 .cell p{
  margin: 0 0 .75rem;
  color: var(--s8-text) !important;
  background: transparent !important;
  padding: 0 !important;
}
.page-top #s8 .cell a{
  color: var(--s8-link) !important;
  text-decoration: underline;
  background: transparent !important;
  padding: 0 !important;
}

/* マップ埋め込みは横幅に追従（任意） */
.page-top #s8 iframe{
  width: 100%;
  max-width: 100%;
  height: 360px;           /* お好みで */
  border: 0;
  border-radius: 6px;
}

/* テーマ切替の影響を受けても #s8 はこの色で固定したい場合 */
body[data-color="theme-black"] .page-top #s8,
body[data-color="theme-white"] .page-top #s8{
  --s8-title: #22333B;
  --s8-text:  rgba(34,51,59,.92);
  --s8-link:  #22333B;
}

.page-top #s8 {
  /* padding-top: 100px; */
  padding-bottom: 100px;
  color: #e6dfd3;
}

@media screen and (max-width:768px) {
  .page-top #s8 {
    padding-top: 100px;
    background: url(../img/common/bg-g.jpg) 0 0 repeat;
    background-size: 50px
  }
}

@media screen and (min-width:768px) {
  .page-top #s8 {
    /* padding-top: 160px; */
    padding-bottom: 160px
  }
}

.page-top #s8 .flex-2 {
  width: 100%
}

@media screen and (max-width:768px) {
  .page-top #s8 .flex-2 {
    padding: 0 30px 0
  }
}

@media screen and (min-width:768px) {
  .page-top #s8 .flex-2 {
    width: 80%;
    margin: 0 auto 0;
    padding-top: 0;
    display: flex;
    justify-content: space-between
  }
}

.page-top #s8 .flex-2 .l {
  font-size: 9vw;
  line-height: 1.2
}

@media screen and (max-width:768px) {
  .page-top #s8 .flex-2 .l {
    margin-bottom: 40px
  }
}

@media screen and (min-width:768px) {
  .page-top #s8 .flex-2 .l {
    padding-top:30px;
    font-size: 3.2rem
  }
}

.page-top #s8 .flex-2 .r {
  width: 100%;
  border-top: 1px solid rgba(230, 223, 211, .4)
}

@media screen and (min-width:768px) {
  .page-top #s8 .flex-2 .r {
    width: 62.4%
  }
}

.page-top #s8 .flex-2 .r .cell {
  padding: 26px 0;
  border-bottom: 1px solid rgba(230, 223, 211, .4);
  display: flex;
  font-size: 1.2rem;
  letter-spacing: 1px
}

@media screen and (max-width:768px) {
  .page-top #s8 .flex-2 .r .cell {
    flex-wrap: wrap
  }
}

@media screen and (min-width:768px) {
  .page-top #s8 .flex-2 .r .cell {
    font-size: 1.4rem
  }
}

.page-top #s8 .flex-2 .r .cell i {
  width: 32%
}

@media screen and (min-width:768px) {
  .page-top #s8 .flex-2 .r .cell i {
    width: 27%
  }
}

.page-top #s8 .flex-2 .r .cell p {
  width: 50%
}

@media screen and (min-width:768px) {
  .page-top #s8 .flex-2 .r .cell p {
    width: 55%
  }
}

.page-top #s8 .flex-2 .r .cell a {
  width: 100%
}

@media screen and (max-width:768px) {
  .page-top #s8 .flex-2 .r .cell a {
    padding-left: 32%;
    margin-top: 12px
  }
}

@media screen and (min-width:768px) {
  .page-top #s8 .flex-2 .r .cell a {
    width: 18%;
    text-align: right;
  }
}

@media screen and (max-width:768px) {
  .page-top #s8 .flex-2 .r .cell .map {
    width:100%;
    height: 40vh;
  }
}

@media screen and (min-width:768px) {
  .page-top #s8 .flex-2 .r .cell .map {
    width: 100%;
    height: 300px;
  }
}

.page-top #s9 {
  color: #3f4d57;
  padding-top: 100px;
//  padding-bottom: 80px
}

@media screen and (max-width:768px) {
  .page-top #s9 {
    background: url(../img/common/bg-w.jpg) 0 0 repeat;
    background-size: 50px
  }
}

//@media screen and (min-width:768px) {
//  .page-top #s9 {
//    padding-top: 160px;
//    padding-bottom: 60px
//  }
}

.page-top #s9 .flex-2 {
  width: 100%
}

@media screen and (max-width:768px) {
  .page-top #s9 .flex-2 {
    padding: 0 30px 0
  }
}

@media screen and (min-width:768px) {
  .page-top #s9 .flex-2 {
    width: 80%;
    margin: 0 auto 0;
    padding-top: 0;
    display: flex;
    justify-content: space-between
  }
}

.page-top #s9 .flex-2 .l {
  font-size: 9vw;
  line-height: 1.2
}

@media screen and (max-width:768px) {
  .page-top #s9 .flex-2 .l {
    margin-bottom: 40px
  }
}

@media screen and (min-width:768px) {
  .page-top #s9 .flex-2 .l {
    font-size: 3.2rem
  }
}

.page-top #s9 .flex-2 .r {
  width: 100%;
  border-top: 1px solid rgba(63, 77, 87, .4)
}

@media screen and (min-width:768px) {
  .page-top #s9 .flex-2 .r {
    width: 62.4%
  }
}

.page-top #s9 .flex-2 .r .cell {
  padding: 0;
  border-bottom: 1px solid rgba(63, 77, 87, .4);
  font-size: 1.2rem;
  letter-spacing: 1px;
  position: relative;
  cursor: pointer
}

@media screen and (min-width:768px) {
  .page-top #s9 .flex-2 .r .cell {
    font-size: 1.4rem
  }
}

.page-top #s9 .flex-2 .r .cell.is-open .head .plus {
  transform: translateX(0) translateY(0) translateZ(0) rotate(315deg)
}

.page-top #s9 .flex-2 .r .cell .head {
  position: relative;
  padding: 26px 0;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-top #s9 .flex-2 .r .cell .head {
    padding: 40px 0
  }
}

.page-top #s9 .flex-2 .r .cell .head span {
  position: absolute;
  top: 28px;
  left: 0
}

@media screen and (min-width:768px) {
  .page-top #s9 .flex-2 .r .cell .head span {
    top: 42px
  }
}

.page-top #s9 .flex-2 .r .cell .head p {
  display: inline-block;
  padding-left: 40px;
  line-height: 2
}

.page-top #s9 .flex-2 .r .cell .head .plus {
  width: 12px;
  height: 12px;
  width: 6px;
  height: 6px;
  position: absolute;
  top: -6px;
  left: auto;
  right: 2px;
  bottom: 0;
  margin: auto;
  border-top: 2px solid #3f4d57;
  border-right: 2px solid #3f4d57;
  transform: translateX(0) translateY(0) translateZ(0) rotate(135deg);
  transition: transform .3s
}

@media screen and (min-width:768px) {
  .page-top #s9 .flex-2 .r .cell .head .plus {
    width: 12px;
    height: 12px
  }
}

.page-top #s9 .flex-2 .r .cell .tab-inner {
  height: 0;
  overflow: hidden
}

.page-top #s9 .flex-2 .r .cell .tab-inner p {
  border-top: 1px solid rgba(63, 77, 87, .4);
  padding-top: 30px;
  padding-left: 40px
}

@media screen and (min-width:768px) {
  .page-top #s9 .flex-2 .r .cell .tab-inner p {
    padding-top: 40px;
    padding-left: 40px
  }
}

.page-top .btn-contact {
  width: calc(100% - 60px);
  margin: 0 auto 20px;
  padding: 30px 0 30px;
  text-align: center;
  background: #3f4d57;
  border: 1px solid #3f4d57
}

@media screen and (min-width:768px) {
  .page-top .btn-contact {
    width: 80%;
    margin: 120px auto;
    padding: 70px 0 64px
  }
}

.page-top .btn-contact:hover {
  opacity: 1
}

@media screen and (min-width:768px) {
  .page-top .btn-contact:hover {
    background: #e6dfd3
  }
  .page-top .btn-contact:hover span .img {
    transform: translateX(10px) translateY(0) translateZ(0)
  }
  .page-top .btn-contact:hover span i {
    color: #3f4d57
  }
}

.page-top .btn-contact span .img {
  display: inline-block;
  width: 22px;
  height: 30px;
  margin-right: 8px;
  position: relative;
  top: -2px;
  transform: translateX(0) translateY(0) translateZ(0);
  transition: transform .2s cubic-bezier(.4, 1.25, .81, 1.56)
}

@media screen and (min-width:768px) {
  .page-top .btn-contact span .img {
    width: 40px;
    height: 38px;
    margin-right: 20px
  }
}

.page-top .btn-contact span i {
  transition: color .3s;
  display: inline-block;
  color: #e6dfd3;
  letter-spacing: 2px;
  font-size: 1.4rem
}

@media screen and (min-width:768px) {
  .page-top .btn-contact span i {
    font-size: 1.8rem
  }
}

.page-contact {
  color: #3f4d57
}

.page-contact #s1 {
  padding-top: 100px;
  padding-bottom: 0;
  color: #3f4d57;
  background: url(../img/common/bg-w.jpg) 0 0 repeat;
  background-size: 50px
}

@media screen and (min-width:768px) {
  .page-contact #s1 {
    padding-top: 240px;
    padding-bottom: 100px
  }
}

.page-contact #s1 .wpcf7-form {
  position: relative
}

.page-contact #s1 .wpcf7-form.init .wpcf7-response-output {
  display: none
}

.page-contact #s1 .wpcf7-form.invalid {
  padding-top: 130px
}

@media screen and (min-width:768px) {
  .page-contact #s1 .wpcf7-form.invalid {
    padding-top: 180px
  }
}

.page-contact #s1 .wpcf7-form.sent {
  padding-top: 150px
}

@media screen and (min-width:768px) {
  .page-contact #s1 .wpcf7-form.sent {
    padding-top: 180px
  }
}

.page-contact #s1 .btn-wrap+.wpcf7-response-output {
  letter-spacing: .7px;
  font-size: 1.2rem;
  width: calc(100% - 60px);
  margin: 0 auto 40px;
  padding: 28px 34px;
  color: #e6dfd3;
  background: #3f4d57;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0
}

@media screen and (min-width:768px) {
  .page-contact #s1 .btn-wrap+.wpcf7-response-output {
    width: 80%;
    padding: 40px 60px;
    font-size: 1.4rem
  }
}

.page-contact #s1 .btn-wrap+.wpcf7-response-output em {
  font-size: 1.4rem;
  margin-bottom: 10px
}

@media screen and (min-width:768px) {
  .page-contact #s1 .btn-wrap+.wpcf7-response-output em {
    font-size: 1.8rem;
    margin-bottom: 10px
  }
}

.page-contact #s1 .btn-wrap+.wpcf7-response-output i {
  margin-top: 20px;
  font-size: 1.8rem
}

.page-contact #s1 .screen-reader-response {
  display: none
}

.page-contact #s1 .flex {
  width: 100%;
  margin: 0 auto 0
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex {
    padding: 0 30px
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex {
    width: 80%;
    margin: 0 auto 100px;
    display: flex;
    justify-content: space-between
  }
}

.page-contact #s1 .flex p {
  display: none
}

.page-contact #s1 .flex .lead, .page-contact #s1 .flex em {
  letter-spacing: .7px;
  font-size: 1.2rem;
  line-height: 2;
  text-align: justify
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .lead, .page-contact #s1 .flex em {
    letter-spacing: .7px;
    font-size: 1.4rem
  }
}

.page-contact #s1 .flex .lead {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(63, 77, 87, .2)
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .lead {
    margin-top: 60px
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .lead {
    margin-top: -60px
  }
}

.page-contact #s1 .flex .textarea {
  position: relative
}

.page-contact #s1 .flex .textarea .wpcf7-not-valid-tip {
  text-indent: -9999px;
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  background: #3f4d57;
  height: 4px
}

.page-contact #s1 .flex .textarea textarea {
  border: 1px solid rgba(63, 77, 87, .2);
  background: 0 0;
  letter-spacing: .7px;
  font-size: 1.2rem;
  line-height: 2;
  text-align: justify;
  border-radius: 0
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .textarea textarea {
    min-height: 285px;
    letter-spacing: .7px;
    font-size: 1.6rem
  }
}

.page-contact #s1 .flex .cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(63, 77, 87, .2);
  padding: 0
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell {
    padding: 17px 0
  }
  .page-contact #s1 .flex .cell.re {
    padding: 0
  }
}

.page-contact #s1 .flex .cell.t {
  display: block;
  border: 0 solid!important;
  padding: 0!important
}

.page-contact #s1 .flex .cell.t em {
  margin-bottom: 6px;
  border: 0 solid!important;
  width: 100%
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .cell.bt {
    border-top: 1px solid rgba(63, 77, 87, .2)
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell:first-child {
    border-top: 1px solid rgba(63, 77, 87, .2)
  }
}

.page-contact #s1 .flex .cell em {
  width: 45%;
  line-height: 1.6
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell em {
    padding-right: 20px;
    width: 38%
  }
}

.page-contact #s1 .flex .cell .i {
  width: 55%;
  position: relative;
  height: 74px
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .i {
    width: 62%;
    height: 60px
  }
}

.page-contact #s1 .flex .cell .i .wpcf7-not-valid-tip {
  text-indent: -9999px;
  position: absolute;
  bottom: -1px;
  left: -52%;
  width: 152%;
  background: #3f4d57;
  height: 3px
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .i .wpcf7-not-valid-tip {
    bottom: -18px;
    left: -61%;
    width: 161%;
    height: 4px
  }
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .cell .i.date {
    height: 124px
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .i.date {
    display: flex;
    justify-content: space-between
  }
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .cell .i.date .calender {
    height: 60px;
    border-bottom: 1px solid rgba(63, 77, 87, .2)
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .i.date .calender {
    width: 43%
  }
}

.page-contact #s1 .flex .cell .i.date .calender .wpcf7-form-control-wrap {
  position: relative;
  height: 100%;
  width: 100%
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .cell .i.date .calender .wpcf7-form-control-wrap:before {
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #3f4d57;
    border-right: 2px solid #3f4d57;
    transform: translateX(0) translateY(0) translateZ(0) rotate(45deg);
    position: absolute;
    top: 23px;
    right: 6px
  }
}

@media screen and (max-width:768px) and (min-width:768px) {
  .page-contact #s1 .flex .cell .i.date .calender .wpcf7-form-control-wrap:before {
    right: 12px
  }
}

.page-contact #s1 .flex .cell .i.date .calender .wpcf7-form-control-wrap input {
  letter-spacing: 1px
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .i.date .calender .wpcf7-form-control-wrap input {
    letter-spacing: 0
  }
}

.page-contact #s1 .flex .cell .i.date .time {
  position: relative;
  height: 60px;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .i.date .time {
    width: 42%
  }
}

.page-contact #s1 .flex .cell .i.date .time span {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-left: 0
}

.page-contact #s1 .flex .cell .i.date .time span:before {
  display: block;
  content: '';
  width: 6px;
  height: 6px;
  border-bottom: 2px solid #3f4d57;
  border-right: 2px solid #3f4d57;
  transform: translateX(0) translateY(0) translateZ(0) rotate(45deg);
  position: absolute;
  top: 23px;
  right: 6px
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .i.date .time span:before {
    right: 12px
  }
}

.page-contact #s1 .flex .cell .i.date .time span select {
  color: #3f4d57;
  font-size: 1.4rem;
  letter-spacing: .6px;
  width: 120%;
  height: 100%;
  background-color: transparent;
  border: none;
  padding: 0
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .i.date .time span select {
    font-size: 1.4rem
  }
}

.page-contact #s1 .flex .cell .i input {
  border: none;
  letter-spacing: .7px;
  font-size: 1.2rem;
  color: #3f4d57;
  line-height: 1.6
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .cell .i input {
    padding: 0
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .i input {
    letter-spacing: .7px;
    font-size: 1.4rem;
    padding-left: 0
  }
}

.page-contact #s1 .flex .cell .wpcf7-date {
  font-size: 1.4rem!important;
  padding-right: 6px
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .wpcf7-date {
    line-height: 1;
    font-size: 1.6rem!important
  }
}

.page-contact #s1 .flex .cell .radio {
  width: 55%
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .radio {
    width: 62%
  }
}

.page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item {
  border-bottom: 1px solid rgba(63, 77, 87, .2);
  padding: 0;
  height: 62px;
  position: relative;
  cursor: pointer
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item {
    display: flex;
    align-items: center
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item {
    height: 92px;
    display: flex;
    align-items: center
  }
}

.page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item:last-child {
  border-bottom: 0 solid rgba(63, 77, 87, .2)
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item:last-child {
    padding: 10px 0 0 0
  }
}

.page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item input {
  border: none;
  cursor: pointer
}

.page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item input+span {
  pointer-events: none;
  display: block;
  position: relative;
  letter-spacing: .2px;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: justify;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item input+span {
    padding-top: 15px;
    padding-bottom: 15px;
    letter-spacing: .7px;
    font-size: 1.4rem
  }
}

.page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item input+span:before {
  display: block;
  content: '';
  position: absolute;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(63, 77, 87, .2);
  border-radius: 50%
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item input+span:before {
    top: 0;
    bottom: 0;
    margin: auto
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item input+span:before {
    top: 8px;
    width: 30px;
    height: 30px
  }
}

.page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item input+span:after {
  transition: opacity .3s;
  opacity: 0;
  display: block;
  content: '';
  position: absolute;
  right: 7px;
  margin: auto;
  width: 10px;
  height: 10px;
  background: #3f4d57;
  border-radius: 50%
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item input+span:after {
    top: 0;
    bottom: 0;
    margin: auto
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .cell .radio .radio-input .wpcf7-list-item input+span:after {
    top: 16px;
    right: 8px;
    width: 16px;
    height: 16px
  }
}

.page-contact #s1 .flex .cell .radio .radio-input span input:checked+span:after {
  opacity: 1
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .l {
    width: 45.8%
  }
}

.page-contact #s1 .flex .l h2 {
  line-height: .9;
  margin-bottom: 24px
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .l h2 {
    margin-bottom: 50px
  }
}

.page-contact #s1 .flex .l .c-h {
  line-height: 1.3
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .l .c-h {
    margin-bottom: 30px
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .r {
    width: 45.8%
  }
}

.page-contact #s1 .flex .r strong {
  font-size: 1.8rem;
  letter-spacing: 1.7px;
  margin-bottom: 20px;
  line-height: 1.65
}

@media screen and (min-width:768px) {
  .page-contact #s1 .flex .r strong {
    font-size: 2.2rem;
    letter-spacing: 1.7px;
    margin-bottom: 24px
  }
}

.page-contact #s1 .flex .r .an {
  display: block
}

@media screen and (max-width:768px) {
  .page-contact #s1 .flex .r .an {
    margin-bottom: 40px
  }
}

.page-contact #s1 .btn-wrap {
  width: 100%;
  margin: 20px auto 0
}

@media screen and (max-width:768px) {
  .page-contact #s1 .btn-wrap {
    padding: 0 30px
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .btn-wrap {
    width: 80%;
    margin: -50px auto 76px;
    display: flex;
    justify-content: flex-end
  }
}

.page-contact #s1 .btn-wrap .send {
  width: 100%;
  background: #3f4d57;
  padding: 17px;
  text-align: center;
  border: 1px solid #3f4d57;
  transition: all .3s;
  cursor: pointer;
  color: #e6dfd3;
  font-size: 1.4rem;
  position: relative
}

.page-contact #s1 .btn-wrap .send input {
  opacity: 0;
  top: 0;
  left: 0;
  cursor: pointer
}

@media screen and (min-width:768px) {
  .page-contact #s1 .btn-wrap .send {
    font-size: 1.6rem;
    width: 200px
  }
}

@media screen and (min-width:768px) {
  .page-contact #s1 .btn-wrap .send:hover {
    background: #e6dfd3;
    color: #3f4d57
  }
}

.page-sub #s1 {
  padding-top: 140px;
  padding-bottom: 0;
  color: #3f4d57;
  background: url(../img/common/bg-w.jpg) 0 0 repeat;
  background-size: 50px;
  width: 80%;
  margin: 0 auto
}

@media screen and (min-width:768px) {
  .page-sub #s1 {
    width: 60%;
    padding-top: 240px;
    padding-bottom: 120px
  }
}

.page-sub #s1 h2 {
  margin-bottom: 20px
}

.page-sub #s1 .c-h:before {
  margin-top: 11px
}

.page-sub #s1 .txts {
  margin-top: 60px;
  font-size: 1.2rem;
  letter-spacing: .8px;
  line-height: 2.1
}

@media screen and (min-width:768px) {
  .page-sub #s1 .txts {
    font-size: 1.4rem;
    margin-top: 120px
  }
}

.page-sub #s1 .txts strong {
  letter-spacing: 1.4px;
  font-size: 1.4rem;
  margin: 50px 0 10px
}

@media screen and (min-width:768px) {
  .page-sub #s1 .txts strong {
    font-size: 1.6rem
  }
}

.page-sub #s1 .txts div ul {
  padding-left: 16px
}

@media screen and (min-width:768px) {
  .page-sub #s1 .txts div ul {
    padding-left: 20px
  }
}

.page-sub #s1 .txts div a {
  display: inline-block;
  text-decoration: underline
}

/*ブログ*/
@media screen and (max-width:768px) {
  .page-sub #s1.blog{
    padding-top:80px;
  }
}

@media screen and (min-width:768px) {
  .page-sub #s1.blog{
    padding-top:140px;
  }
}

@media screen and (max-width:768px) {
  .page-sub #s1 h1.blog-detail__title{
    font-family: source-han-serif-japanese, serif;
    margin-bottom: .3vw;
    font-size: 5.4vw;
  }
}

@media screen and (min-width:768px) {
  .page-sub #s1 h1.blog-detail__title{
    font-family: source-han-serif-japanese, serif;
    margin-bottom: 20px;
    font-size:25px;
    font-weight: bold;
  }
}

@media screen and (max-width:768px) {
  .page-sub #s1 .blog-content h2{
    margin:2.3vw 0;
    font-size: 4vw;
    font-weight: bold;
  }
}

@media screen and (min-width:768px) {
  .page-sub #s1 .blog-content h2{
    margin: 20px 0;
    font-size:30px;
    font-weight: bold;
  }
}

@media screen and (max-width:768px) {
  .page-sub #s1 .blog-content p{
    font-size:2.2vw;
    margin-bottom:2vw;
    line-height: 1.8;
  }
}

@media screen and (min-width:768px) {
  .page-sub #s1 .blog-content p{
    font-size:16px;
    margin-bottom:10px;
    line-height: 1.8;
  }
}

@media screen and (max-width:768px) {
  .page-sub #s1 .blog-detail__image{
    margin-bottom:3vw;
  }
}

@media screen and (min-width:768px) {
  .page-sub #s1 .blog-detail__image{
    margin-bottom:30px;
  }
}

/* ブログ */
.wp-show-posts .wp-show-posts-single .wp-show-posts-inner{
  display: flex;
  flex-direction: column;
}

.wp-show-posts .wp-show-posts-single .wp-show-posts-inner .wp-show-posts-entry-header{
  flex-grow: 1;
}

/* ブログトップ */
@media screen and (max-width:768px) {
  .page-top #blog{
    padding-top:100px;
  }
}

@media screen and (min-width:768px) {
  .page-top #blog .wp-show-posts {
    justify-content: space-around;
  }
}

@media screen and (min-width:768px) {
  .page-top #blog .wp-show-posts .wp-show-posts-single{
    width:30%;
  }
}

.page-top #blog .blogarea{
  padding:0 30px 0;
}

.page-top #blog .blogarea h2{
  margin-bottom:40px;
}

.page-top #blog .blogarea .anchor-wrap{
  margin-top:100px;
}

/* ブログ一覧 */
@media screen and (min-width:768px) {
  .wp-show-posts .wp-show-posts-single{
    margin-bottom:
  }
}
.wp-show-posts .wp-show-posts-single .wp-show-posts-image img{
  height: 100%;
}

@media screen and (max-width:768px) {
  .wp-show-posts .wp-show-posts-entry-header .wp-show-posts-entry-title{
    font-size: 3vw;
    margin:10px auto 5px;
  }
}

@media screen and (min-width:768px) {
  .wp-show-posts .wp-show-posts-entry-header .wp-show-posts-entry-title{
    font-size: 20px;
    margin:10px auto 5px;
  }
}

.wp-show-posts .wp-show-posts-single .wpsp-read-more{
  /* text-align: right; */
}

@media screen and (min-width:768px) {
  .wp-show-posts .wp-show-posts-single{
    margin-bottom:50px;
  }
}

/* ========== SP 幅（～767px）：文字色を濃色に強制上書き ========== */
@media (max-width: 767.98px){
  /* セクション全体の継承色も濃色にしておくと安全 */
  .page-top #s7,
  .page-top #s7_2{ color:#2f3f45; }

  /* 見出し/本文を濃色に “必ず” 上書き */
  .page-top #s7 .flex h3,
  .page-top #s7 .flex p,
  .page-top #s7_2 .flex h3,
  .page-top #s7_2 .flex p{
    color:#2f3f45 !important;    /* ← 競合を確実に勝たせる */
    mix-blend-mode: normal;      /* 念のため合成を無効化 */
    text-shadow:none;
  }

  /* テキストを最前面に（画像の上に来るように） */
  .page-top #s7 .flex,
  .page-top #s7_2 .flex{
    position: relative;
    z-index: 5;
  }
}

/* スライダー側はテキストより後ろに回す */
.page-top #s7 :is(#slider),
.page-top #s7_2 :is(#slider2){
  position: relative;
  z-index: 1;
}

/* ===============================
   ACCESS (#s8) – SP の可読性アップ
   =============================== */

/* 変数が無い環境でも動くようにフォールバック付き */
:root{
  --ink-on-dark: #e6dfd3;   /* 濃い背景で使う明色 */
  --ink-on-light:#2f3f45;   /* 明るい背景で使う濃色（既存） */
}

/* PC は従来どおり濃い文字（明背景用） */
@media (min-width: 768px){
  .page-top #s8 .flex-2 .l,
  .page-top #s8 .flex-2 i,
  .page-top #s8 .flex-2 p,
  .page-top #s8 .flex-2 a{
    color: var(--ink-on-light);
  }
}

/* SP は濃い帯の上になるので明色に切替 */
@media (max-width: 767.98px){
  .page-top #s8 .flex-2 .l,      /* 見出し ACCESS */
  .page-top #s8 .flex-2 i,       /* ラベル Address / E-mail / Open */
  .page-top #s8 .flex-2 p,
  .page-top #s8 .flex-2 a{
    color: var(--ink-on-dark, #e6dfd3) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);   /* ほんの少しだけ浮かせる */
  }

  /* 区切り線が border ならこちらで明るく */
  .page-top #s8 .flex-2 .cell{
    border-color: rgba(230,223,211,.55) !important;
  }
  /* 区切り線が ::after で描かれている場合の保険 */
  .page-top #s8 .flex-2 .cell::after{
    background-color: rgba(230,223,211,.55) !important;
  }

  /* 念のためテキストを前面に */
  .page-top #s8 .flex-2{ position: relative; z-index: 2; }
}