@charset "UTF-8";
/* 榊の字用 */
/* ------------------- */
/* other */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;900&family=Poppins:wght@600&display=swap");
.protect, .pSlider li, #castArea button {
  position: relative; }
  .protect::before, .pSlider li::before, #castArea button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; }

.margin05 {
  margin-top: .5em !important; }

.margin1 {
  margin-top: 1em !important; }

.margin2 {
  margin-top: 2em !important; }

.margin3 {
  margin-top: 3em !important; }

.font1 {
  font-family: zen-old-mincho, sans-serif; }
  .font1 * {
    font-family: zen-old-mincho, sans-serif; }

.font2 {
  font-family: "inglesa-caps-variable", sans-serif; }
  .font2 * {
    font-family: "inglesa-caps-variable", sans-serif; }

.font3 {
  font-family: "shippori-mincho-b1", sans-serif; }
  .font3 * {
    font-family: "shippori-mincho-b1", sans-serif; }

.color3 {
  color: #E5808C; }

.color4 {
  color: #00A2B8; }

.opa {
  opacity: 1;
  transition: all 180ms 0s ease-out; }
  .opa:hover, .opa:focus {
    opacity: .4; }

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center; }

@media screen and (min-width: 48.0625em) {
  .pcNone {
    display: none; }

  .pcBlock {
    display: block; } }
@media screen and (max-width: 48em) {
  .spNone {
    display: none; }

  .spBlock {
    display: block; } }
/* ------------------- */
/* #Loading */
#Loading {
  z-index: 200;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #fff; }
  #Loading.moveloading {
    animation: moveloading forwards .8s ease-out 0s; }
  #Loading p {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 8vw;
    height: 8vw;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #3ff9dc;
    background: linear-gradient(0deg, rgba(101, 198, 223, 0.2) 33%, #65c6df 100%);
    animation: spin 1.2s linear 0s infinite; }
    #Loading p > span {
      display: block;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 50%; }
  @media screen and (max-width: 48em) {
    #Loading p {
      width: 20vw;
      height: 20vw; } }

@keyframes moveloading {
  from {
    filter: blur(0); }
  to {
    filter: blur(2em);
    display: none; } }
@keyframes spin {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(359deg); } }
/* ------------------- */
/* .closebtn */
.closebtn {
  position: fixed;
  z-index: 201;
  width: 4em;
  height: 4em;
  background-color: rgba(255, 255, 255, 0.8);
  border-style: solid;
  border-width: 1px;
  border-color: #333333;
  border-radius: 50%; }
  .closebtn p {
    position: relative;
    left: 20%;
    width: 60%;
    height: 60%; }
    .closebtn p::before, .closebtn p::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 1px;
      background-color: #333333; }
    .closebtn p::before {
      transform: rotate(45deg); }
    .closebtn p::after {
      transform: rotate(-45deg); }
  @media screen and (max-width: 48em) {
    .closebtn {
      width: 14vw;
      height: 14vw; } }

/* ------------------- */
/* .btn */
.btn {
  box-sizing: border-box;
  position: relative;
  max-width: 20rem;
  transition: all 180ms 0s ease-out; }
  .btn a {
    position: relative;
    display: block;
    padding: 1.3rem 0;
    text-align: center;
    line-height: 1em;
    font-size: 1.1em;
    font-family: zen-old-mincho, sans-serif;
    font-font-weight: 600;
    color: #fff !important;
    background-color: #E5808C;
    border-radius: 9999px; }
    .btn a span {
      position: absolute;
      display: block;
      width: 1.2em;
      height: 1.2em;
      right: 5%;
      top: 30%;
      transition: all 180ms 0s ease-out; }
      .btn a span::before, .btn a span::after {
        content: '';
        position: absolute;
        height: 1px;
        background-color: #fff; }
      .btn a span::before {
        left: 0;
        top: 50%;
        width: 100%; }
      .btn a span::after {
        right: 0;
        top: 32%;
        width: 40%;
        transform: rotate(45deg); }
    .btn a:hover span {
      right: 2%; }
  .btn:hover {
    transform: translate(0, 3px); }
  .btn.btmar a span {
    transform: rotate(90deg); }
  .btn.btmar a:hover span {
    right: 5%;
    top: 40%; }

/* ------------------- */
/* .fadein1 */
.fadein1 {
  opacity: 0;
  filter: blur(0.5em);
  transform: scale(0.9); }
  .fadein1.action {
    animation: movefaddein1 forwards .6s ease-out 0s; }

@keyframes movefaddein1 {
  from {
    opacity: 0;
    filter: blur(0.5em);
    transform: scale(0.98); }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1); } }
/* ------------------- */
/* .fadein2 */
.fadein2 {
  opacity: 0;
  filter: blur(0.5em);
  transform: translate(0, 1.5em); }
  .fadein2.action {
    animation: movefaddein2 forwards .6s ease-out 0s; }

@keyframes movefaddein2 {
  from {
    opacity: 0;
    filter: blur(0.5em);
    transform: translate(0, 1.5em); }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0); } }
/* ------------------- */
/* .backimg */
.backimg {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #fff; }
  @media screen and (min-width: 48.0625em) {
    .backimg {
      background-image: url("https://happinet-phantom.com/mizuumi-movie/img_new/backimg_pc.jpg"); } }
  @media screen and (max-width: 48em) {
    .backimg {
      background-image: url("https://happinet-phantom.com/mizuumi-movie/img_new/backimg_sp.jpg"); } }

/* ------------------- */
/* .billing 上下あるので */
.billing {
  position: relative;
  max-width: 760px; }
  @media screen and (max-width: 48em) {
    .billing {
      width: 96vw; } }

/* ------------------- */
/* .title */
.title {
  opacity: 0;
  transform: translate(0, -0.6em);
  line-height: .8em;
  letter-spacing: .06em;
  font-family: "inglesa-caps-variable", sans-serif;
  font-size: 3rem; }
  .title:first-letter {
    color: #E5808C; }
  .title.action {
    animation: movetitle forwards .5s ease-out .3s; }
  @media screen and (max-width: 48em) {
    .title {
      font-size: 2.6rem !important; } }

@keyframes movetitle {
  0% {
    opacity: 0;
    transform: translate(0, -0.6em); }
  70% {
    transform: translate(0, 0.1em); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }
/* ------------------- */
/* footer */
footer {
  text-align: center; }
  footer .snslist {
    letter-spacing: -.4em; }
    footer .snslist > * {
      display: inline-block;
      letter-spacing: normal;
      vertical-align: top;
      *display: inline;
      *zoom: 1; }
    footer .snslist li {
      line-height: 1em; }
      footer .snslist li.filmark {
        width: 6em; }
    footer .snslist li:not(:last-child) {
      margin-right: .5em; }
  footer small {
    display: block;
    font-family: zen-old-mincho, sans-serif;
    font-variant: small-caps; }
  @media screen and (min-width: 48.0625em) {
    footer {
      margin-top: 3em !important;
      padding-bottom: 1em !important; }
      footer .billing {
        margin-bottom: 3em; } }
  @media screen and (max-width: 48em) {
    footer {
      margin-top: 10vw !important;
      padding-bottom: 3vw !important; }
      footer .billing {
        margin-bottom: 10vw; }
      footer .snslist li {
        margin-bottom: 2vw; } }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "游ゴシック",YuGothic,"Helvetica","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Arial, sans-serif;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased; }

html {
  -webkit-text-size-adjust: 100%; }

body {
  font-size: .96rem;
  color: #333333;
  background-color: #fff; }

a {
  text-decoration: none;
  outline: none;
  color: #333333;
  overflow-wrap: break-word; }
  a:hover {
    color: #333333; }
  a:focus, a:visited {
    outline: none;
    color: #333333; }

img {
  width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom; }

li {
  list-style: none; }

iframe {
  display: block; }

button {
  padding: 0;
  background-color: transparent;
  border: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer; }

::selection {
  background-color: #cdcdcd; }

::-moz-selection {
  background-color: #cdcdcd; }

/* ------------------- */
/* header */
header {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  line-height: 1em;
  background-color: #fff; }
  header .itemarea {
    position: relative;
    width: 100%;
    padding-bottom: 2em; }
    header .itemarea li {
      position: absolute;
      width: 100%; }
      header .itemarea li img {
        height: 0;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% auto;
        object-fit: cover; }
      @media screen and (min-width: 48.0625em) {
        header .itemarea li img {
          padding-top: 47.13%; }
        header .itemarea li[data-himg="1"] img {
          background-image: url("../img_new/he_mainimg_pc2_1.jpg"); }
        header .itemarea li[data-himg="2"] img {
          background-image: url("../img_new/he_mainimg_pc2_2.jpg"); }
        header .itemarea li[data-himg="3"] img {
          background-image: url("../img_new/he_mainimg_pc2_3.jpg"); } }
      @media screen and (max-width: 48em) {
        header .itemarea li img {
          padding-top: 125%; }
        header .itemarea li[data-himg="1"] img {
          background-image: url("../img_new/he_mainimg_sp2_1.jpg"); }
        header .itemarea li[data-himg="2"] img {
          background-image: url("../img_new/he_mainimg_sp2_2.jpg"); }
        header .itemarea li[data-himg="3"] img {
          background-image: url("../img_new/he_mainimg_sp2_3.jpg"); } }
    header .itemarea li.active {
      display: block; }
  header .billing {
    opacity: 0;
    filter: blur(1em); }
  header .billing.action {
    opacity: 0;
    filter: blur(1em);
    animation: moveheader forwards .6s ease-out 0s; }
  @media screen and (max-width: 48em) {
    header {
      padding-top: 16vw; }
      header .itemarea {
        padding-bottom: 0; }
      header .billing {
        box-sizing: border-box;
        width: 100%;
        padding: 4vw 2vw;
        background-color: #fff; } }

@keyframes moveheader {
  from {
    opacity: 0;
    filter: blur(1em); }
  to {
    opacity: 1;
    filter: blur(0); } }
/* ------------------- */
/* main */
main {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding-top: 3em; }
  @media screen and (max-width: 48em) {
    main {
      padding-top: 0; } }

/* ------------------- */
/* .bnrarea2 */
.bnrarea2 {
  position: relative;
  z-index: 300;
  max-width: 1000px;
  margin: 2em auto;
  transform: translate(0, 0); }
  .bnrarea2 p a {
    display: block;
    transition: all 180ms 0s ease-out; }
    .bnrarea2 p a:hover {
      transform: translate(0, 2px);
      opacity: .5; }
  @media screen and (min-width: 48.0625em) {
    .bnrarea2 {
      letter-spacing: -.4em; }
      .bnrarea2 > * {
        display: inline-block;
        letter-spacing: normal;
        vertical-align: top;
        *display: inline;
        *zoom: 1; }
      .bnrarea2 p {
        width: 49%;
        margin-bottom: 1em; }
        .bnrarea2 p:nth-of-type(odd) {
          margin-right: 2%; } }
  @media screen and (max-width: 48em) {
    .bnrarea2 {
      margin: 3vw 6vw 6vw; }
      .bnrarea2 p {
        margin-top: 3vw; } }

/* ------------------- */
/* #bnrArea */
#bnrArea {
  position: relative;
  z-index: 300;
  letter-spacing: -.4em; }
  #bnrArea > * {
    display: inline-block;
    letter-spacing: normal;
    vertical-align: top;
    *display: inline;
    *zoom: 1; }
  #bnrArea p {
    transition: all 180ms 0s ease-out;
    transform: translate(0, 0); }
    #bnrArea p:hover {
      transform: translate(0, 2px);
      opacity: .5; }
    #bnrArea p a {
      display: block; }
  @media screen and (min-width: 48.0625em) {
    #bnrArea {
      width: 80vw;
      /*margin: 0 auto 4em;*/
      margin: 0 auto 2em; }
      #bnrArea p {
        width: 16em;
        margin: 0 .5em .8em; } }
  @media screen and (max-width: 48em) {
    #bnrArea {
      /*margin: 2vw 2vw 8vw;*/
      margin: 0 2vw 4vw; }
      #bnrArea p {
        width: 49%;
        margin-top: 2vw; }
        #bnrArea p:nth-child(odd) {
          margin-right: 2%; } }

/* ------------------- */
/* #mvtk-widgets-container ムビチケウィジェット */
#mvtk-widgets-container {
  position: relative;
  z-index: 300;
  margin: auto auto 2em; }
  @media screen and (max-width: 48em) {
    #mvtk-widgets-container {
      margin-bottom: 4vw; } }

/* ------------------- */
/* #movieArea */
#movieArea {
  position: relative;
  z-index: 300;
  padding: 2em 0;
  background-color: rgba(154, 229, 250, 0.4); }
  @media screen and (max-width: 48em) {
    #movieArea {
      width: 100vw;
      margin-top: 4vw;
      padding: 4vw 0; } }
  #movieArea ul {
    max-width: 1200px;
    margin: 1em auto 0; }
    #movieArea ul li {
      width: calc(100% / 3);
      transition: all 180ms 0s ease-out; }
      #movieArea ul li:hover {
        transform: translate(0, 3px); }
      #movieArea ul li button {
        position: relative;
        display: block;
        width: 94%;
        padding-left: 3%;
        text-align: center;
        color: #333333; }
      #movieArea ul li p {
        margin-top: .8em;
        letter-spacing: .06em;
        font-family: "shippori-mincho-b1", sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 1.3em; }
      #movieArea ul li p.img {
        overflow: hidden; }
        #movieArea ul li p.img img {
          transition: all 180ms 0s ease-out; }
          #movieArea ul li p.img img:hover {
            transform: scale(1.05); }
      #movieArea ul li.marginL {
        width: calc(100% / 3);
        margin: auto; }
      @media screen and (max-width: 48em) {
        #movieArea ul li button p {
          margin-top: 1vw !important; }
        #movieArea ul li.marginL {
          width: 50%; } }
  #movieArea .slick-arrow {
    position: absolute;
    z-index: 301;
    top: -4em;
    width: 3.6em;
    height: 3.6em;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, 0.8);
    border-style: solid;
    border-width: 1px;
    border-color: #333333;
    border-radius: 50%; }
    #movieArea .slick-arrow::before, #movieArea .slick-arrow::after {
      content: '';
      position: absolute;
      z-index: 21;
      height: 1px;
      margin: auto;
      background-color: #333333; }
    #movieArea .slick-arrow::before {
      left: 0;
      right: 0;
      top: 50%;
      width: 60%; }
    #movieArea .slick-arrow::after {
      right: 20%;
      top: 40%;
      width: 25%;
      transform: rotate(45deg); }
    #movieArea .slick-arrow.slick-prev {
      left: 2em;
      transform: scale(-1, 1); }
    #movieArea .slick-arrow.slick-next {
      right: 2em; }
    @media screen and (max-width: 48em) {
      #movieArea .slick-arrow {
        top: -10vw;
        width: 8vw;
        height: 8vw; }
        #movieArea .slick-arrow.slick-prev {
          left: 2vw; }
        #movieArea .slick-arrow.slick-next {
          right: 2vw; } }
  #movieArea .slick-dots {
    letter-spacing: -.4em;
    text-align: center; }
    #movieArea .slick-dots > * {
      display: inline-block;
      letter-spacing: normal;
      vertical-align: top;
      *display: inline;
      *zoom: 1; }
    #movieArea .slick-dots li {
      width: 1em;
      height: 1em;
      margin-right: .5em;
      background-color: #333333;
      border-radius: 50%; }
      #movieArea .slick-dots li button {
        width: 100%;
        height: 100%;
        text-indent: -9999px; }
      #movieArea .slick-dots li:hover {
        transform: translate(0, 0); }
      #movieArea .slick-dots li.slick-active {
        background-color: #E5808C; }
    @media screen and (max-width: 48em) {
      #movieArea .slick-dots li {
        width: 4vw !important;
        height: 4vw !important; } }

/* #movieOver */
#movieOver {
  display: none;
  z-index: 200;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); }
  #movieOver .movieItem {
    position: fixed;
    width: 70%;
    left: 0;
    right: 0;
    top: 3vw;
    margin: auto; }
    #movieOver .movieItem > div {
      box-sizing: border-box;
      position: relative;
      height: 0;
      padding-top: 54.25%; }
      #movieOver .movieItem > div iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important; }
    @media screen and (max-width: 48em) {
      #movieOver .movieItem {
        width: 96vw;
        top: 30vw; } }
  #movieOver .closebtn {
    right: 10vw;
    top: 2vw; }
    @media screen and (max-width: 48em) {
      #movieOver .closebtn {
        right: 2vw;
        top: 14vw; } }

/* ------------------- */
/* #newsArea */
#newsArea {
  position: relative;
  z-index: 300;
  max-width: 1200px; }
  #newsArea section h2.title {
    margin-bottom: .4em;
    font-size: 2.2em; }
  @media screen and (min-width: 48.0625em) {
    #newsArea {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 3em;
      margin: 3em auto 0; } }
  @media screen and (max-width: 48em) {
    #newsArea section {
      margin: 10vw 3vw 0; } }

/* .news */
.news ul {
  overflow-y: scroll;
  max-height: 300px;
  border-top: #fff 1px solid;
  border-bottom: #fff 1px solid; }
  .news ul li {
    position: relative;
    margin-bottom: 1em;
    padding-bottom: 1em;
    line-height: 1.4em;
    border-bottom: dashed 1px #707070; }
    .news ul li span:first-of-type {
      font-family: "inglesa-caps-variable", sans-serif;
      font-variation-settings: "wght" 600;
      font-size: 1.3em; }
    .news ul li span:nth-of-type(2) {
      box-sizing: border-box;
      position: relative;
      display: block;
      line-height: 1.5em; }
      .news ul li span:nth-of-type(2) > a {
        display: block;
        font-size: 1em;
        transition: all 100ms 0s ease-out; }
      .news ul li span:nth-of-type(2) > a:hover {
        opacity: .5;
        color: #E5808C; }
      .news ul li span:nth-of-type(2) a h1 + h2, .news ul li span:nth-of-type(2) a h2:nth-of-type(n+2), .news ul li span:nth-of-type(2) a div, .news ul li span:nth-of-type(2) a p, .news ul li span:nth-of-type(2) a img, .news ul li span:nth-of-type(2) a figure, .news ul li span:nth-of-type(2) p, .news ul li span:nth-of-type(2) img, .news ul li span:nth-of-type(2) figure, .news ul li span:nth-of-type(2) div, .news ul li span:nth-of-type(2) a > b, .news ul li span:nth-of-type(2) a + a {
        display: none; }
      .news ul li span:nth-of-type(2) a h1, .news ul li span:nth-of-type(2) a h2 {
        font-size: 1em !important; }
@media screen and (max-width: 48em) {
  .news ul {
    max-height: 60vw; } }

/* ------------------- */
/* .introphoto */
.introphoto {
  position: relative;
  z-index: 10; }
  .introphoto li {
    position: relative; }
    .introphoto li img {
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto; }
  .introphoto.introPhotobtm li img {
    padding-top: 33%; }
  .introphoto.introPhotobtm li[data-inid="4"] img {
    background-image: url("../img_new/intro/p4.jpg"); }
  .introphoto.introPhotobtm li[data-inid="5"] img {
    background-image: url("../img_new/intro/p5.jpg"); }
  @media screen and (min-width: 48.0625em) {
    .introphoto.introPhototop {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      margin-top: 4em; }
      .introphoto.introPhototop li[data-inid="1"] img {
        padding-top: 86.6%;
        background-image: url("../img_new/intro/p2.jpg"); }
      .introphoto.introPhototop li[data-inid="2"] img {
        padding-top: 43.3%;
        background-image: url("../img_new/intro/p1.jpg"); }
      .introphoto.introPhototop li[data-inid="3"] img {
        padding-top: 86.6%;
        background-image: url("../img_new/intro/p3.jpg"); }
    .introphoto.introPhotobtm {
      display: grid;
      grid-template-columns: 1fr 1fr; } }
  @media screen and (max-width: 48em) {
    .introphoto.introPhototop {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin-top: 10vw; }
      .introphoto.introPhototop li[data-inid="1"] {
        grid-column-start: 1;
        grid-column-end: 4; }
        .introphoto.introPhototop li[data-inid="1"] img {
          padding-top: 43.3%;
          background-image: url("../img_new/intro/p1.jpg"); }
      .introphoto.introPhototop li[data-inid="2"] img {
        padding-top: 86.6%;
        background-image: url("../img_new/intro/p2.jpg"); }
      .introphoto.introPhototop li[data-inid="3"] img {
        padding-top: 86.6%;
        background-image: url("../img_new/intro/p3.jpg"); } }

/* ------------------- */
/* .introback */
@media screen and (max-width: 48em) {
  .introback {
    opacity: 0;
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img_new/intro/back.jpg"); }
    .introback.show {
      opacity: 1; } }
/* ------------------- */
/* #introArea */
#introArea {
  opacity: 0;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-image: url("../img_new/intro/back.jpg"); }
  #introArea > section {
    position: relative;
    z-index: 10;
    padding: 4em 0; }
    #introArea > section .catch img {
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto; }
    #introArea > section > div {
      box-sizing: border-box;
      background-color: rgba(255, 255, 255, 0.8); }
      #introArea > section > div p {
        line-height: 2em; }
    #introArea > section .catch, #introArea > section .cont {
      opacity: 0;
      filter: blur(1em); }
      #introArea > section .catch.action, #introArea > section .cont.action {
        animation: moveintro forwards .6s ease-out 0s; }
  @media screen and (min-width: 48.0625em) {
    #introArea > section .catch {
      width: 54vw; }
      #introArea > section .catch img {
        padding-top: 18.8%;
        background-image: url("../img_new/intro/catch_pc.svg"); }
    #introArea > section > div {
      width: 68vw;
      margin: 4em auto 0;
      padding: 3em;
      border-radius: 1em; }
    #introArea > section > div h3 {
      margin: 1.5em auto 1em;
      line-height: 1.5em;
      font-size: 1.9em; } }
  @media screen and (min-width: 48.0625em) and (max-width: 64em) {
    #introArea > section > div {
      width: 90vw;
      padding: 4vw; } }
  @media screen and (max-width: 48em) {
    #introArea > section {
      padding: 8vw 0 4vw; }
      #introArea > section .catch {
        margin-left: 2vw;
        margin-right: 2vw; }
      #introArea > section .catch img {
        padding-top: 19.15%;
        background-image: url("../img_new/intro/catch_sp.svg"); }
      #introArea > section > div {
        margin-top: 8vw;
        padding: 6vw 3vw; }
        #introArea > section > div h3 {
          margin: 4vw 3vw;
          font-size: 1.3em; } }

@keyframes moveintro {
  from {
    opacity: 0;
    filter: blur(1em); }
  to {
    opacity: 1;
    filter: blur(0); } }
/* ------------------- */
/* #storyArea */
#storyArea {
  position: relative;
  z-index: 10;
  margin: auto;
  padding: 3em 0 3em; }
  #storyArea .title {
    position: relative;
    width: 6em; }
  #storyArea .cat {
    display: block;
    position: absolute;
    left: -8rem;
    top: -2rem;
    width: 10rem; }
    #storyArea .cat img {
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto;
      padding-top: 53.25%;
      background-image: url("../img_new/story/cat.png"); }
  #storyArea > div {
    position: relative; }
    #storyArea > div h3 span {
      position: relative; }
      #storyArea > div h3 span::after {
        content: '';
        position: absolute;
        right: -2.2em;
        top: 50%;
        width: 2em;
        height: 1px;
        background-color: #00A2B8; }
  @media screen and (min-width: 48.0625em) {
    #storyArea {
      max-width: 68vw; }
      #storyArea > div h3 {
        margin: 1.5em auto 1em;
        font-size: 1.9em; }
      #storyArea > div p {
        line-height: 2.4em; } }
  @media screen and (min-width: 48.0625em) and (max-width: 64em) {
    #storyArea {
      width: 90vw; } }
  @media screen and (max-width: 48em) {
    #storyArea {
      padding: 6vw 5vw 7vw; }
      #storyArea .cat {
        left: -13vw;
        top: -4vw;
        width: 25vw; }
      #storyArea > div h3 {
        margin: 4vw auto;
        line-height: 1.5em;
        font-size: 1.3em; }
        #storyArea > div h3 span::after {
          top: 75% !important; }
      #storyArea > div p {
        line-height: 2em; } }

/* ------------------- */
/* .pSlider */
.pSlider li {
  position: relative; }
  .pSlider li img {
    padding-top: 54%;
    height: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto; }
  .pSlider li[data-pid="02"] img {
    background-image: url("../img_new/story/p02.jpg"); }
  .pSlider li[data-pid="07"] img {
    background-image: url("../img_new/story/p07.jpg"); }
  .pSlider li[data-pid="08"] img {
    background-image: url("../img_new/story/p08.jpg"); }
  .pSlider li[data-pid="09"] img {
    background-image: url("../img_new/story/p09.jpg"); }
  .pSlider li[data-pid="10"] img {
    background-image: url("../img_new/story/p10.jpg"); }
  .pSlider li[data-pid="11"] img {
    background-image: url("../img_new/story/p11.jpg"); }
  .pSlider li[data-pid="12"] img {
    background-image: url("../img_new/story/p12.jpg"); }

/* ------------------- */
/* .storyphoto */
.storyphoto {
  position: relative; }
  .storyphoto li {
    position: relative; }
    .storyphoto li img {
      padding-top: 62.5%;
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto; }
    .storyphoto li[data-stid="1"] img {
      background-image: url("../img_new/story/p2_1.jpg"); }
    .storyphoto li[data-stid="2"] img {
      background-image: url("../img_new/story/p2_2.jpg"); }
    .storyphoto li[data-stid="3"] img {
      background-image: url("../img_new/story/p2_3.jpg"); }
    .storyphoto li[data-stid="4"] img {
      background-image: url("../img_new/story/p2_4.jpg"); }
    .storyphoto li[data-stid="5"] img {
      background-image: url("../img_new/story/p2_5.jpg"); }
  @media screen and (min-width: 48.0625em) {
    .storyphoto {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px; }
      .storyphoto li:first-child {
        grid-area: 1 / 1 / 3 / 3; }
      .storyphoto li:nth-child(2) {
        grid-area: 1 / 3 / 2 / 4; }
      .storyphoto li:nth-child(3) {
        grid-area: 1 / 4 / 2 / 5; }
      .storyphoto li:nth-child(4) {
        grid-area: 2 / 3 / 3 / 4; }
      .storyphoto li:nth-child(5) {
        grid-area: 2 / 4 / 3 / 5; } }
  @media screen and (max-width: 48em) {
    .storyphoto {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px; }
      .storyphoto li:first-child {
        grid-area: 1 / 1 / 3 / 3; }
      .storyphoto li:nth-child(2) {
        grid-area: 3 / 1 / 4 / 2; }
      .storyphoto li:nth-child(3) {
        grid-area: 3 / 2 / 4 / 3; }
      .storyphoto li:nth-child(4) {
        grid-area: 4 / 1 / 5 / 2; }
      .storyphoto li:nth-child(5) {
        grid-area: 4 / 2 / 5 / 3; } }

/* ------------------- */
/* #castArea */
#castArea {
  position: relative; }
  #castArea > div {
    position: relative;
    z-index: 5; }
  #castArea button {
    transition: all 180ms 0s ease-out; }
    #castArea button img {
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto; }
    #castArea button.cp1 img {
      padding-top: 107.2%; }
    #castArea button.cp2 img {
      padding-top: 112.8%; }
    #castArea button:hover {
      opacity: .5;
      transform: translate(0, 3px); }
  @media screen and (min-width: 48.0625em) {
    #castArea {
      max-width: 1100px;
      margin: 3em auto 0; }
      #castArea > div {
        height: 0;
        padding-top: 97.85%;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-image: url("../img_new/cast/back.png"); }
      #castArea button {
        position: absolute; }
        #castArea button.cp1 {
          width: 26.4%; }
        #castArea button.cp2 {
          width: 23%; }
        #castArea button[data-castid="01"] {
          left: 12.9%;
          top: .2%;
          width: 39.6%; }
          #castArea button[data-castid="01"] img {
            padding-top: 98.8%;
            background-image: url("../img_new/cast/cast01_img_pc.png"); }
        #castArea button[data-castid="02"] {
          left: 57%;
          top: 7.9%;
          width: 27.9%; }
          #castArea button[data-castid="02"] img {
            padding-top: 114.2%;
            background-image: url("../img_new/cast/cast02_img_pc.png"); }
        #castArea button[data-castid="03"] {
          left: 0;
          top: 35%; }
          #castArea button[data-castid="03"] img {
            background-image: url("../img_new/cast/cast03_img_pc.png"); }
        #castArea button[data-castid="04"] {
          left: 24.6%;
          top: 41.7%; }
          #castArea button[data-castid="04"] img {
            background-image: url("../img_new/cast/cast04_img_pc.png"); }
        #castArea button[data-castid="05"] {
          left: 51%;
          top: 42.8%; }
          #castArea button[data-castid="05"] img {
            background-image: url("../img_new/cast/cast05_img_pc.png"); }
        #castArea button[data-castid="06"] {
          left: 76.8%;
          top: 40.7%; }
          #castArea button[data-castid="06"] img {
            background-image: url("../img_new/cast/cast06_img_pc.png"); }
        #castArea button[data-castid="07"] {
          left: 0%;
          top: 66.2%; }
          #castArea button[data-castid="07"] img {
            background-image: url("../img_new/cast/cast07_img_pc.png"); }
        #castArea button[data-castid="08"] {
          left: 24.7%;
          top: 72%; }
          #castArea button[data-castid="08"] img {
            background-image: url("../img_new/cast/cast08_img_pc.png"); }
        #castArea button[data-castid="09"] {
          left: 50.6%;
          top: 73%; }
          #castArea button[data-castid="09"] img {
            background-image: url("../img_new/cast/cast09_img_pc.png"); }
        #castArea button[data-castid="10"] {
          left: 76.6%;
          top: 70.8%; }
          #castArea button[data-castid="10"] img {
            background-image: url("../img_new/cast/cast10_img_pc.png"); } }
  @media screen and (max-width: 48em) {
    #castArea {
      margin: 12vw 2vw 0; }
      #castArea > div {
        letter-spacing: -.4em; }
        #castArea > div > * {
          display: inline-block;
          letter-spacing: normal;
          vertical-align: top;
          *display: inline;
          *zoom: 1; }
      #castArea button {
        position: relative; }
        #castArea button.cp1 {
          width: 44.7%;
          margin: 3vw calc(5.3% / 2) 0; }
        #castArea button.cp2 {
          width: 39%;
          margin: 3vw calc(11% / 2) 0; }
        #castArea button[data-castid="01"] {
          z-index: 10;
          width: 55.3%; }
          #castArea button[data-castid="01"] img {
            padding-top: 139.5%;
            background-image: url("../img_new/cast/cast01_img_sp.png"); }
        #castArea button[data-castid="02"] {
          z-index: 10;
          left: -2vw;
          top: 10vw;
          width: 44.7%; }
          #castArea button[data-castid="02"] img {
            padding-top: 140.7%;
            background-image: url("../img_new/cast/cast02_img_sp.png"); }
        #castArea button[data-castid="03"] img {
          background-image: url("../img_new/cast/cast03_img_sp.png"); }
        #castArea button[data-castid="04"] img {
          background-image: url("../img_new/cast/cast04_img_sp.png"); }
        #castArea button[data-castid="05"] img {
          background-image: url("../img_new/cast/cast05_img_sp.png"); }
        #castArea button[data-castid="06"] img {
          background-image: url("../img_new/cast/cast06_img_sp.png"); }
        #castArea button[data-castid="07"] img {
          background-image: url("../img_new/cast/cast07_img_sp.png"); }
        #castArea button[data-castid="08"] img {
          background-image: url("../img_new/cast/cast08_img_sp.png"); }
        #castArea button[data-castid="09"] img {
          background-image: url("../img_new/cast/cast09_img_sp.png"); }
        #castArea button[data-castid="10"] img {
          background-image: url("../img_new/cast/cast10_img_sp.png"); } }

/* ------------------- */
/* #castOver */
#castOver {
  display: none;
  overflow-y: scroll;
  z-index: 200;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 5vw 0 3vw;
  background-color: rgba(255, 255, 255, 0.8); }
  #castOver .closebtn {
    right: 10vw;
    top: 1vw; }
  #castOver .arrow {
    position: absolute;
    z-index: 20;
    top: 2em;
    width: 3.6em;
    height: 3.6em;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, 0.8);
    border-style: solid;
    border-width: 1px;
    border-color: #333333;
    border-radius: 50%; }
    #castOver .arrow::before, #castOver .arrow::after {
      content: '';
      position: absolute;
      z-index: 21;
      height: 1px;
      margin: auto;
      background-color: #333333; }
    #castOver .arrow::before {
      left: 0;
      right: 0;
      top: 50%;
      width: 60%; }
    #castOver .arrow::after {
      right: 20%;
      top: 40%;
      width: 25%;
      transform: rotate(45deg); }
    #castOver .arrow.arrow_prev {
      left: -2em;
      transform: scale(-1, 1); }
    #castOver .arrow.arrow_next {
      right: -2em; }
    @media screen and (max-width: 48em) {
      #castOver .arrow {
        top: 2vw;
        width: 10vw;
        height: 10vw; }
        #castOver .arrow.arrow_prev {
          left: -2vw; }
        #castOver .arrow.arrow_next {
          right: -2vw; } }
  #castOver > div {
    position: relative;
    max-width: 800px;
    margin: auto; }
  #castOver .castitemarea {
    padding: 2em 2em;
    background-color: #DBF2F8;
    border-radius: 1em; }
    #castOver .castitemarea h2 {
      line-height: 1em;
      letter-spacing: .06em; }
      #castOver .castitemarea h2 span:nth-of-type(3) {
        position: relative;
        margin-left: .4em;
        padding-left: .6em;
        font-size: .8em; }
        #castOver .castitemarea h2 span:nth-of-type(3)::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 3px;
          height: 80%;
          background-color: #333333; }
      #castOver .castitemarea h2 span.ruby {
        position: relative; }
        #castOver .castitemarea h2 span.ruby::before {
          content: attr(data-text);
          position: absolute;
          left: -20%;
          top: -1.3em;
          width: 140%;
          height: 1em;
          margin: auto;
          letter-spacing: -.06em;
          text-align: center;
          font-size: .4em; }
    #castOver .castitemarea .img img {
      height: 0;
      padding-top: 66.6%;
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto;
      border-radius: .5em; }
    #castOver .castitemarea .prof p {
      padding: 1em;
      line-height: 1.4em;
      font-size: .9em;
      background-color: #fff;
      border-radius: .5em; }
  @media screen and (min-width: 48.0625em) {
    #castOver .castitemarea h2 {
      font-size: 2.4em; }
    #castOver .castitemarea h3 {
      font-size: 1.2em; }
    #castOver .castitemarea h4 {
      font-size: 1.2em; }
    #castOver .castitemarea .img {
      width: 80%;
      margin: auto; } }
  @media screen and (max-width: 48em) {
    #castOver {
      padding: 18vw 2vw 5vw; }
      #castOver .closebtn {
        right: 2vw;
        top: 2vw; }
      #castOver .castitemarea {
        padding: 5vw 2vw; }
        #castOver .castitemarea h2 {
          font-size: 2em; }
        #castOver .castitemarea h3 {
          font-size: 1.1em; }
        #castOver .castitemarea h4 {
          font-size: 1.2em; }
        #castOver .castitemarea .comm p {
          line-height: 1.6em; } }

/* ------------------- */
/* #staffArea */
#staffArea > section .cont h3 {
  line-height: 1em;
  font-size: 2em; }
  #staffArea > section .cont h3 span {
    margin-right: .5em;
    font-size: .7em; }
#staffArea > section .cont .prof {
  margin-top: .6em; }
  #staffArea > section .cont .prof h4 {
    letter-spacing: .06em;
    font-size: 1.2em; }
  #staffArea > section .cont .prof p {
    padding: 1em;
    line-height: 1.4em;
    font-size: .9em;
    background-color: rgba(154, 229, 250, 0.4);
    border-radius: .6em; }
@media screen and (min-width: 48.0625em) {
  #staffArea {
    margin: 4em 0 3em; }
    #staffArea > section {
      letter-spacing: -.4em;
      max-width: 1200px;
      margin: auto; }
      #staffArea > section > * {
        display: inline-block;
        letter-spacing: normal;
        vertical-align: top;
        *display: inline;
        *zoom: 1; }
      #staffArea > section .cont {
        width: 48.5%; }
      #staffArea > section .cont:nth-of-type(even) {
        margin-left: 3%; }
        #staffArea > section .cont:nth-of-type(even) .prof p {
          height: 11.4em; } }
@media screen and (max-width: 48em) {
  #staffArea {
    margin: 16vw 0 8vw; }
    #staffArea > section .cont {
      box-sizing: border-box;
      width: 100%;
      padding: 4vw 2vw; }
    #staffArea > section .cont:not(:last-of-type) {
      border-bottom: dashed 1px #707070; } }

/* ------------------- */
/* .artcont */
main .artcont .img img {
  height: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto; }
main .artcont .txt h3 {
  line-height: 1em; }
main .artcont .txt h5 {
  line-height: 1.5em;
  font-size: 1.1em;
  font-weight: normal; }
main .artcont .txt .btn {
  width: 20em; }
main .artcont .txt > h3:first-of-type, main .artcont .txt > h4, main .artcont .txt > h5 {
  margin-bottom: .7rem; }
main .artcont .prof {
  margin-top: 1.5em;
  text-align: left; }
  main .artcont .prof h4 {
    letter-spacing: .06em; }
    main .artcont .prof h4 span:first-of-type {
      font-size: .8em; }
  main .artcont .prof p {
    padding: 1em;
    line-height: 1.4em;
    font-size: .9em;
    background-color: #fff;
    border-radius: .6em; }
@media screen and (min-width: 48.0625em) {
  main .artcont {
    letter-spacing: -.4em;
    max-width: 1200px;
    margin: 2em auto 0; }
    main .artcont > * {
      display: inline-block;
      letter-spacing: normal;
      vertical-align: top;
      *display: inline;
      *zoom: 1; }
    main .artcont .img {
      box-sizing: border-box;
      width: 50%; }
    main .artcont .txt {
      width: 50%; }
      main .artcont .txt h3 {
        font-size: 2.6em; }
        main .artcont .txt h3.leftm {
          margin-left: -.5em; }
      main .artcont .txt h4 {
        font-size: 1.2em; }
      main .artcont .txt .shouarea {
        letter-spacing: -.4em; }
        main .artcont .txt .shouarea > * {
          display: inline-block;
          letter-spacing: normal;
          vertical-align: top;
          *display: inline;
          *zoom: 1; }
      main .artcont .txt .shou {
        width: 35%; }
      main .artcont .txt .btn {
        margin: 1.5em 0 0 .7em; } }
@media screen and (max-width: 48em) {
  main .artcont {
    margin-top: 6vw; }
    main .artcont .txt {
      margin-top: 3vw;
      text-align: center; }
      main .artcont .txt h3 {
        font-size: 1.7em; }
      main .artcont .txt .shouarea .shou {
        width: 55%;
        margin: auto; }
      main .artcont .txt .btn {
        margin: 3vw auto 0; }
      main .artcont .txt .prof {
        margin-top: 3vw; }
        main .artcont .txt .prof h4 {
          font-size: 1.2em; } }

/* ------------------- */
/* #originalArea */
#originalArea {
  background-color: rgba(255, 221, 221, 0.8); }
  #originalArea > section .img img {
    padding-top: 142.1%;
    background-image: url("../img_new/original_img.jpg"); }
  #originalArea .genbtn {
    display: block;
    font-size: 1.1em; }
  @media screen and (min-width: 48.0625em) {
    #originalArea {
      padding: 2em 0; }
      #originalArea > section .img {
        padding: 0 13%; }
      #originalArea .genbtn {
        width: 22rem;
        margin-top: 2em; } }
  @media screen and (max-width: 48em) {
    #originalArea {
      padding: 6vw 3vw; }
      #originalArea > section .img {
        width: 60%;
        margin-left: 20%; }
      #originalArea .genbtn {
        width: 100%;
        margin-top: 8vw; } }

/* ------------------- */
/* #musicArea */
#musicArea {
  background-color: rgba(154, 229, 250, 0.8); }
  #musicArea > section .img img {
    padding-top: 72.5%;
    background-image: url("../img_new/music_img.jpg"); }
  @media screen and (min-width: 48.0625em) {
    #musicArea {
      padding: 2em 0; }
      #musicArea > section .img {
        padding: 0 6%; } }
  @media screen and (max-width: 48em) {
    #musicArea {
      padding: 6vw 3vw; }
      #musicArea > section .img {
        width: 80%;
        margin: auto; } }

/* ------------------- */
/* .commbtn */
.commbtn {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 20rem;
  transition: all 180ms 0s ease-out; }
  .commbtn > span {
    position: relative;
    display: block;
    padding: 1.4rem 0;
    line-height: 1em;
    letter-spacing: .08em;
    font-size: 1.1em;
    font-family: zen-old-mincho, sans-serif;
    font-font-weight: 600;
    color: #fff !important;
    background-color: #333333;
    border-radius: 9999px; }
    .commbtn > span span {
      position: absolute;
      display: block;
      width: 1em;
      height: 1em;
      right: 5%;
      top: 35%;
      transition: all 180ms 0s ease-out; }
      .commbtn > span span::before, .commbtn > span span::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        left: 0;
        top: 50%;
        background-color: #fff; }
      .commbtn > span span::after {
        transform: rotate(90deg); }
    .commbtn > span:hover span {
      right: 2%;
      transform: rotate(135deg); }
  .commbtn:hover {
    transform: translate(0, 3px); }

/* ------------------- */
/* #commOver */
#commOver {
  display: none;
  overflow-y: scroll;
  z-index: 200;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 5vw 0 3vw;
  background-color: rgba(255, 255, 255, 0.8); }
  #commOver .closebtn {
    right: 10vw;
    top: 1vw; }
  #commOver > div {
    position: relative;
    max-width: 800px;
    margin: auto; }
  #commOver .commitemarea {
    padding: 3em 2em;
    background-color: #DBF2F8;
    border-radius: 1em; }
    #commOver .commitemarea h3 {
      margin-bottom: .5em;
      line-height: 1.3em;
      font-size: 2em; }
      #commOver .commitemarea h3 span {
        font-size: .8em; }
    #commOver .commitemarea div {
      line-height: 1.5em; }
  @media screen and (max-width: 48em) {
    #commOver {
      padding: 18vw 2vw 5vw; }
      #commOver .closebtn {
        right: 2vw;
        top: 2vw; }
      #commOver .commitemarea {
        padding: 8vw 2vw 10vw; }
        #commOver .commitemarea h3 {
          font-size: 1.6em; }
          #commOver .commitemarea h3 span {
            font-size: .8em; } }

/* ------------------- */
/* #specialArea */
#specialArea {
  position: relative; }
  #specialArea .catch {
    width: 14em;
    margin-top: 1rem;
    letter-spacing: .06em;
    font-size: 1.8em;
    border-bottom: 1px solid #333333; }
    #specialArea .catch span {
      position: relative;
      font-size: 1.6em;
      color: #E5808C; }
      #specialArea .catch span::before {
        content: '';
        position: absolute;
        left: -20%;
        top: 0;
        width: 140%;
        height: 30%;
        background: url("../img_new/special/title_item.svg") 0 0 no-repeat;
        background-size: 100% auto; }
  #specialArea .op {
    counter-reset: number 0; }
    #specialArea .op li {
      opacity: 0;
      transform: translate(0, 1em);
      position: relative;
      width: 19em;
      margin: .6em auto 0;
      padding: .4em 0 .6em 2.6em;
      font-size: 1.2em; }
      #specialArea .op li.action {
        animation: moveop forwards .4s ease-out 0s; }
      #specialArea .op li::before {
        counter-increment: number 1;
        content: counter(number);
        position: absolute;
        left: 0;
        top: 0;
        width: 1.6em;
        height: 1.6em;
        line-height: 1.4em;
        text-align: center;
        font-size: 1.4em;
        color: #fff;
        background-color: #E5808C;
        border-radius: 50%; }
      #specialArea .op li::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 0;
        height: 1px;
        margin: auto;
        background-color: #333333;
        transition: all 180ms 0s ease-out; }
      #specialArea .op li:hover::after, #specialArea .op li:focus::after {
        width: 100%; }
  #specialArea .mtitle2 {
    position: relative;
    text-align: center; }
    #specialArea .mtitle2 p {
      position: relative;
      display: inline-block;
      padding: .23em 0 .23em 4em;
      text-align: left;
      font-size: 1.2em;
      color: #F46475; }
      #specialArea .mtitle2 p::before {
        transform: rotate(-20deg);
        content: attr(data-pnum);
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 1.9em;
        height: 1.9em;
        padding-top: .5em;
        line-height: 1.2em;
        text-align: center;
        font-weight: normal;
        font-size: 1.8em;
        color: #fff;
        background: url("../img_new/special/point.svg") center 0.2em no-repeat #E5808C;
        background-size: 60% auto;
        border-radius: 50%; }
    #specialArea .mtitle2.action p::before {
      animation: movemtitle2 forwards .4s ease-out .2s; }
  #specialArea .catch2 {
    font-family: "shippori-mincho-b1", sans-serif;
    font-size: 1.2em; }
    #specialArea .catch2 span.backtxt {
      position: relative;
      display: inline-block; }
      #specialArea .catch2 span.backtxt::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: .1em;
        width: 100%;
        height: 40%;
        background-color: #DBF2F8; }
      #specialArea .catch2 span.backtxt > span {
        position: relative;
        z-index: 5;
        font-family: "shippori-mincho-b1", sans-serif; }
  @media screen and (min-width: 48.0625em) {
    #specialArea {
      margin: 3em auto 5em; }
      #specialArea .mtitle2 {
        margin-bottom: .5em; } }
  @media screen and (max-width: 48em) {
    #specialArea {
      margin: 6vw auto 16vw; }
      #specialArea .catch {
        font-size: 1.6em; }
      #specialArea .op li {
        font-size: 1.1em; }
      #specialArea .mtitle2 {
        margin-bottom: 1vw; }
        #specialArea .mtitle2 p {
          padding: .13em 0 .13em 3.5em;
          letter-spacing: -.02em;
          font-size: 1em; }
          #specialArea .mtitle2 p::before {
            font-size: 1.6em; }
      #specialArea .catch2 {
        margin: auto 3vw;
        letter-spacing: -.04em;
        font-size: .94em; } }

@keyframes moveop {
  from {
    opacity: 0;
    transform: translate(0, 1em); }
  to {
    opacity: 1;
    transform: translate(0, 0); } }
@keyframes movemtitle2 {
  from {
    transform: rotate(-20deg); }
  to {
    transform: rotate(0deg); } }
/* ------------------- */
/* .point1area */
.point1area {
  background-color: rgba(255, 221, 221, 0.6); }
  .point1area .point1item li {
    box-sizing: border-box;
    position: relative;
    background-color: #C2EFF7;
    border: 1px solid #333333; }
    .point1area .point1item li .txt {
      position: absolute;
      z-index: 5; }
    .point1area .point1item li .img {
      position: relative; }
      .point1area .point1item li .img::before {
        content: '';
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #DBF2F8; }
    .point1area .point1item li .img img {
      position: relative;
      display: block;
      height: 0;
      padding-top: 66%;
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100% auto;
      box-sizing: border-box;
      border: 1px solid #333333; }
    .point1area .point1item li:nth-child(1) .txt {
      right: -20%;
      bottom: -4%;
      width: 26%; }
    .point1area .point1item li:nth-child(1) .img img {
      background-image: url("../img_new/special/point1_1.jpg"); }
    .point1area .point1item li:nth-child(2) .txt1 {
      left: 16%;
      top: -49%;
      width: 22%; }
    .point1area .point1item li:nth-child(2) .txt2 {
      right: 2%;
      bottom: 3%;
      width: 16%; }
    .point1area .point1item li:nth-child(2) .img img {
      background-image: url("../img_new/special/point1_2.jpg"); }
    .point1area .point1item li:nth-child(3) .txt1 {
      left: 40%;
      top: -36%;
      width: 22%; }
    .point1area .point1item li:nth-child(3) .txt2 {
      left: -12%;
      top: 4%;
      width: 16%; }
    .point1area .point1item li:nth-child(3) .img img {
      background-image: url("../img_new/special/point1_3.jpg"); }
    .point1area .point1item li:nth-child(4) .txt1 {
      left: 6%;
      top: -45%;
      width: 29%; }
    .point1area .point1item li:nth-child(4) .txt2 {
      right: -8%;
      top: 11%;
      width: 21%; }
    .point1area .point1item li:nth-child(4) .img img {
      background-image: url("../img_new/special/point1_4.jpg"); }
    .point1area .point1item li.action .img::before {
      animation: movepoint1 forwards .6s ease-out .2s; }
  @media screen and (min-width: 48.0625em) {
    .point1area {
      margin: 3em auto 0;
      padding: 2em 0 2.5em; }
      .point1area .point1item {
        width: 80vw;
        margin: auto; }
        .point1area .point1item li {
          width: 60%;
          margin-top: 2em; }
          .point1area .point1item li:nth-child(odd) p {
            transform: translate(1em, -0.7em); }
          .point1area .point1item li:nth-child(even) p {
            transform: translate(-1em, -0.7em); }
          .point1area .point1item li:nth-child(1) {
            margin-left: 28%; }
          .point1area .point1item li:nth-child(3) {
            margin-left: 38%; }
          .point1area .point1item li:nth-child(4) {
            margin-left: 5%; } }
  @media screen and (max-width: 48em) {
    .point1area {
      margin: 8vw auto 0;
      padding: 6vw 0 8vw; }
      .point1area .point1item {
        width: 88vw;
        margin: auto; }
        .point1area .point1item li {
          width: 90%;
          margin-top: 6vw; }
          .point1area .point1item li:nth-child(odd) p {
            transform: translate(1.2vw, -1vw); }
          .point1area .point1item li:nth-child(even) p {
            transform: translate(-1.2vw, -1vw); }
          .point1area .point1item li:nth-child(1) .txt {
            right: -16%;
            bottom: -10%; }
          .point1area .point1item li:nth-child(2) {
            margin-left: 10vw; }
            .point1area .point1item li:nth-child(2) .txt1 {
              left: -16%;
              top: -6%; }
          .point1area .point1item li:nth-child(3) .txt1 {
            top: -8%; }
          .point1area .point1item li:nth-child(3) .txt2 {
            left: -8%;
            top: 2%; }
          .point1area .point1item li:nth-child(4) {
            margin-left: 10vw; }
            .point1area .point1item li:nth-child(4) .txt1 {
              left: -10%;
              top: -6%; }
            .point1area .point1item li:nth-child(4) .txt2 {
              right: -4%;
              top: 15%; } }

@keyframes movepoint1 {
  from {
    width: 100%; }
  to {
    width: 0%; } }
/* ------------------- */
/* .point2area */
.point2area {
  background-color: rgba(244, 214, 131, 0.2); }
  .point2area .pointitem > div {
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    border: 2px solid #E5808C;
    border-radius: 1em; }
    .point2area .pointitem > div .txtarea {
      font-size: .94em; }
    .point2area .pointitem > div .img img {
      padding-top: 65%;
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto;
      border-radius: .92em .92em 0 0; }
    .point2area .pointitem > div:nth-of-type(1) .img img {
      background-image: url("../img_new/special/point2_p1.jpg"); }
    .point2area .pointitem > div:nth-of-type(2) .img img {
      background-image: url("../img_new/special/point2_p2.jpg"); }
    .point2area .pointitem > div:nth-of-type(3) .img img {
      background-image: url("../img_new/special/point2_p3.jpg"); }
    .point2area .pointitem > div:nth-of-type(4) .img img {
      background-image: url("../img_new/special/point2_p4.jpg"); }
    .point2area .pointitem > div:nth-of-type(5) .img img {
      background-image: url("../img_new/special/point2_p5.jpg"); }
    .point2area .pointitem > div h3 {
      width: 80%;
      padding: 0 1em .1em;
      font-family: "shippori-mincho-b1", sans-serif;
      font-size: 1.9em;
      color: #E5808C;
      background: url("../img_new/special/point2_line.svg") center bottom no-repeat;
      background-size: auto 1px; }
    .point2area .pointitem > div .txt2 {
      padding: .5em;
      background-color: #FAE6E8; }
  @media screen and (min-width: 48.0625em) {
    .point2area {
      padding: 2em 0 2.5em; }
      .point2area .pointitem {
        margin-top: 1em;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1em 1.5%; }
        .point2area .pointitem > div {
          width: calc(calc(100% / 3) - 4.5%); }
          .point2area .pointitem > div .txtarea {
            margin: 1em 1em 1.5em; } }
  @media screen and (max-width: 48em) {
    .point2area {
      padding: 6vw 0 8vw; }
      .point2area .pointitem {
        margin: auto 5vw; }
        .point2area .pointitem > div {
          margin-top: 4vw; }
          .point2area .pointitem > div .txtarea {
            padding: 3vw 3vw 4vw; }
          .point2area .pointitem > div h3 {
            padding-bottom: .2em;
            font-size: 1.6em; } }

.ill {
  display: grid; }
  .ill li {
    position: relative;
    box-sizing: border-box;
    border-radius: .6em; }
    .ill li img {
      border-radius: .5em; }
    .ill li:first-child {
      transform: rotate(4deg); }
    .ill li:nth-child(2) {
      transform: rotate(-4deg);
      z-index: 4; }
    .ill li:nth-child(3) {
      transform: rotate(4deg);
      z-index: 5; }
    .ill li:nth-child(4) {
      transform: rotate(-4deg);
      z-index: 4; }
    .ill li:last-child {
      transform: rotate(4deg); }
  @media screen and (min-width: 48.0625em) {
    .ill {
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 1.2em;
      max-width: 90vw;
      margin: 3em auto 2em; } }
  @media screen and (max-width: 48em) {
    .ill {
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 1vw;
      margin: 6vw 4vw 0; }
      .ill li:nth-child(n+4) {
        left: 15vw;
        margin-top: 2vw; } }

/* ------------------- */
/* .point3area */
.point3area {
  background-color: rgba(209, 239, 247, 0.3); }
  .point3area .item {
    position: relative; }
    .point3area .item h3 {
      position: relative;
      text-align: center; }
      .point3area .item h3 p {
        position: relative;
        display: inline-block;
        padding: 0 0 0 2.8em;
        line-height: 1.4em;
        font-family: "shippori-mincho-b1", sans-serif;
        font-size: 1.4em; }
        .point3area .item h3 p::before {
          content: attr(data-pnum2);
          box-sizing: border-box;
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          padding-right: .2em;
          font-size: 1.6em;
          font-weight: normal;
          color: #8FD9EC;
          border-right: 1px solid #8FD9EC; }
    .point3area .item h3 + h4 {
      line-height: 1.7em; }
    .point3area .item .img img {
      display: inline-block;
      width: 49%;
      padding-top: 32%;
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto;
      border-radius: 1em; }
      .point3area .item .img img:first-of-type {
        margin-right: 2%; }
    .point3area .item.item1 .img img:nth-of-type(1) {
      background-image: url("../img_new/special/point3_p1_1.jpg"); }
    .point3area .item.item1 .img img:nth-of-type(2) {
      background-image: url("../img_new/special/point3_p1_2.jpg"); }
    .point3area .item.item2 .img img:nth-of-type(1) {
      background-image: url("../img_new/special/point3_p2_1.jpg"); }
    .point3area .item.item2 .img img:nth-of-type(2) {
      background-image: url("../img_new/special/point3_p2_2.jpg"); }
    .point3area .item.item3 .img img:nth-of-type(1) {
      background-image: url("../img_new/special/point3_p3_1.jpg"); }
    .point3area .item.item3 .img img:nth-of-type(2) {
      background-image: url("../img_new/special/point3_p3_2.jpg"); }
  @media screen and (min-width: 48.0625em) {
    .point3area {
      padding: 2em 0 2.5em; }
      .point3area .item {
        margin-top: 3em; }
        .point3area .item .img {
          max-width: 1100px;
          margin-top: 1em; } }
  @media screen and (max-width: 48em) {
    .point3area {
      padding: 6vw 0 12vw; }
      .point3area .item {
        margin: 10vw 2vw 0; }
        .point3area .item h3 p {
          font-size: 1.2em; }
        .point3area .item h3 + h4 {
          font-size: .92em; }
        .point3area .item .img {
          margin-top: 2vw; }
          .point3area .item .img img {
            border-radius: .3em; } }

/* ------------------- */
/* .point4area */
.point4area .houseitem {
  position: relative; }
  .point4area .houseitem > div {
    position: relative;
    height: 0; }
  .point4area .houseitem .back {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100% !important;
    height: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto; }
  .point4area .houseitem .img {
    box-sizing: border-box;
    position: absolute; }
    .point4area .houseitem .img img {
      box-sizing: border-box;
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto; }
    .point4area .houseitem .img:not([data-p4img="01"]) {
      z-index: 5; }
    .point4area .houseitem .img[data-p4img="01"] {
      z-index: 2;
      background-color: #fff;
      border: 1px solid #edbb31; }
      .point4area .houseitem .img[data-p4img="01"] img {
        padding-top: 65.5%;
        background-image: url("../img_new/special/point4_p01.jpg");
        border: 6px solid #fff; }
    .point4area .houseitem .img[data-p4img="08"] {
      z-index: 6; }
      .point4area .houseitem .img[data-p4img="08"] img {
        padding-top: 81.5%;
        background-image: url("../img_new/special/point4_map08.png"); }
    .point4area .houseitem .img[data-p4img="09"] img {
      padding-top: 80.3%;
      background-image: url("../img_new/special/point4_map09.png"); }
    .point4area .houseitem .img[data-p4img="10"] {
      z-index: 6; }
      .point4area .houseitem .img[data-p4img="10"] img {
        padding-top: 81.1%;
        background-image: url("../img_new/special/point4_map10.png"); }
    .point4area .houseitem .img[data-p4img="11"] {
      z-index: 7; }
      .point4area .houseitem .img[data-p4img="11"] img {
        padding-top: 79.4%;
        background-image: url("../img_new/special/point4_map11.png"); }
    .point4area .houseitem .img[data-p4img="12"] {
      z-index: 8; }
      .point4area .houseitem .img[data-p4img="12"] img {
        padding-top: 81.5%;
        background-image: url("../img_new/special/point4_map12.png"); }
@media screen and (min-width: 48.0625em) {
  .point4area {
    margin: 3em auto;
    padding-top: 2em; }
    .point4area .houseitem {
      max-width: 1300px;
      margin: 2em auto 0; }
      .point4area .houseitem > div {
        padding-top: 80.76%; }
      .point4area .houseitem .back {
        background-image: url("../img_new/special/point4_pc_base.png"); }
      .point4area .houseitem .img[data-p4img="01"] {
        left: 14%;
        top: 15%;
        width: 67%; }
      .point4area .houseitem .img[data-p4img="02"] {
        left: 4.8%;
        top: 1%;
        width: 30.4%; }
        .point4area .houseitem .img[data-p4img="02"] img {
          padding-top: 71.7%;
          background-image: url("../img_new/special/point4_map02.png"); }
      .point4area .houseitem .img[data-p4img="03"] {
        left: 54%;
        top: 1%;
        width: 29.8%; }
        .point4area .houseitem .img[data-p4img="03"] img {
          padding-top: 69.5%;
          background-image: url("../img_new/special/point4_map03.png"); }
      .point4area .houseitem .img[data-p4img="04"] {
        left: 1%;
        top: 31%;
        width: 23.8%; }
        .point4area .houseitem .img[data-p4img="04"] img {
          padding-top: 75.2%;
          background-image: url("../img_new/special/point4_map04.png"); }
      .point4area .houseitem .img[data-p4img="05"] {
        left: 73%;
        top: 27%;
        width: 24%; }
        .point4area .houseitem .img[data-p4img="05"] img {
          padding-top: 74.1%;
          background-image: url("../img_new/special/point4_map05.png"); }
      .point4area .houseitem .img[data-p4img="06"] {
        left: .6%;
        top: 54.2%;
        width: 24%; }
        .point4area .houseitem .img[data-p4img="06"] img {
          padding-top: 73.7%;
          background-image: url("../img_new/special/point4_map06.png"); }
      .point4area .houseitem .img[data-p4img="07"] {
        left: 76%;
        top: 51.3%;
        width: 23%; }
        .point4area .houseitem .img[data-p4img="07"] img {
          padding-top: 71.3%;
          background-image: url("../img_new/special/point4_map07.png"); }
      .point4area .houseitem .img[data-p4img="08"] {
        left: 12.2%;
        top: 76.5%;
        width: 18.3%; }
      .point4area .houseitem .img[data-p4img="09"] {
        left: 29.4%;
        top: 78%;
        width: 18.3%; }
      .point4area .houseitem .img[data-p4img="10"] {
        left: 45.9%;
        top: 76.4%;
        width: 18%; }
      .point4area .houseitem .img[data-p4img="11"] {
        left: 63.4%;
        top: 77%;
        width: 18%; }
      .point4area .houseitem .img[data-p4img="12"] {
        left: 79.8%;
        top: 75.2%;
        width: 17.9%; }
      .point4area .houseitem .housebtn {
        transition: all 180ms 0s ease-out; }
        .point4area .houseitem .housebtn:hover {
          transform: translate(0, 0.6em); } }
@media screen and (max-width: 48em) {
  .point4area {
    margin: 8vw auto;
    padding-top: 6vw; }
    .point4area .houseitem {
      margin: 4vw 2vw 0; }
      .point4area .houseitem > div {
        padding-top: 226.8%; }
      .point4area .houseitem .back {
        background-image: url("../img_new/special/point4_sp_base.png"); }
      .point4area .houseitem .img[data-p4img="01"] {
        left: 0%;
        top: 29.75%;
        width: 100%; }
        .point4area .houseitem .img[data-p4img="01"] img {
          padding-top: 64%; }
      .point4area .houseitem .img[data-p4img="02"] {
        left: .75%;
        top: 4.2%;
        width: 49.7%; }
        .point4area .houseitem .img[data-p4img="02"] img {
          padding-top: 71.6%;
          background-image: url("../img_new/special/point4_sp_map02.png"); }
      .point4area .houseitem .img[data-p4img="03"] {
        left: 51%;
        top: 1.1%;
        width: 49%; }
        .point4area .houseitem .img[data-p4img="03"] img {
          padding-top: 69.5%;
          background-image: url("../img_new/special/point4_sp_map03.png"); }
      .point4area .houseitem .img[data-p4img="04"] {
        left: 6.4%;
        top: 20.9%;
        width: 45%; }
        .point4area .houseitem .img[data-p4img="04"] img {
          padding-top: 71.7%;
          background-image: url("../img_new/special/point4_sp_map04.png"); }
      .point4area .houseitem .img[data-p4img="05"] {
        left: 54%;
        top: 20%;
        width: 46%; }
        .point4area .houseitem .img[data-p4img="05"] img {
          padding-top: 72.9%;
          background-image: url("../img_new/special/point4_sp_map05.png"); }
      .point4area .houseitem .img[data-p4img="06"] {
        left: 0%;
        top: 57.6%;
        width: 45.6%; }
        .point4area .houseitem .img[data-p4img="06"] img {
          padding-top: 73.4%;
          background-image: url("../img_new/special/point4_sp_map06.png"); }
      .point4area .houseitem .img[data-p4img="07"] {
        left: 55.8%;
        top: 55.1%;
        width: 43.1%; }
        .point4area .houseitem .img[data-p4img="07"] img {
          padding-top: 68.7%;
          background-image: url("../img_new/special/point4_sp_map07.png"); }
      .point4area .houseitem .img[data-p4img="08"] {
        left: 1%;
        top: 72.4%;
        width: 33.8%; }
      .point4area .houseitem .img[data-p4img="09"] {
        left: 33.3%;
        top: 73%;
        width: 33%; }
      .point4area .houseitem .img[data-p4img="10"] {
        left: 64.1%;
        top: 72.1%;
        width: 34.5%; }
      .point4area .houseitem .img[data-p4img="11"] {
        left: 35.5%;
        top: 87.1%;
        width: 35%; }
      .point4area .houseitem .img[data-p4img="12"] {
        left: 65.3%;
        top: 84.4%;
        width: 33.8%; } }

/* ------------------- */
/* #houseOver */
#houseOver {
  display: none;
  z-index: 200;
  overflow-y: scroll;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); }
  #houseOver .closebtn {
    right: 10vw;
    top: 1vw; }
  #houseOver .img {
    background-color: #fff;
    border: 1px solid #edbb31;
    border-radius: 1em; }
    #houseOver .img img {
      box-sizing: border-box;
      padding-top: 63%;
      height: 0;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto;
      border: 6px solid #fff;
      border-radius: .96em; }
  #houseOver h3 {
    padding: .3em 0 .4em;
    font-family: "shippori-mincho-b1", sans-serif;
    font-size: 1.6em;
    color: #fff;
    background-color: #edbb31;
    border-radius: .6em; }
  @media screen and (min-width: 48.0625em) {
    #houseOver > div {
      max-width: 800px;
      margin: 5vw auto; } }
  @media screen and (max-width: 48em) {
    #houseOver .closebtn {
      right: 2vw;
      top: 2vw; }
    #houseOver > div {
      margin: 18vw 2vw 5vw; }
      #houseOver > div .img img {
        padding-top: 62%; }
    #houseOver h3 {
      font-size: 1.3em; } }

/* ------------------- */
/* #specialArea2 */
#specialArea2 {
  position: relative;
  background-color: rgba(244, 214, 131, 0.2); }
  #specialArea2 .mtitle3 {
    max-width: 14em; }
  #specialArea2 .catch2 {
    margin-top: .5em;
    font-family: "shippori-mincho-b1", sans-serif;
    font-size: 1.2em; }
  #specialArea2 .copy {
    line-height: 1.4em;
    font-size: .8em; }
  #specialArea2 .contarea {
    position: relative; }
    #specialArea2 .contarea div {
      position: relative; }
      #specialArea2 .contarea div h4 {
        position: relative;
        z-index: 5;
        margin-bottom: .6em;
        padding: .2em 0;
        text-align: center;
        font-family: zen-old-mincho, sans-serif;
        font-size: 1.2em;
        border: 1px solid #d99f00;
        background-color: #ffe6a1;
        border-radius: .4em; }
      #specialArea2 .contarea div .img {
        position: relative;
        z-index: 5;
        box-sizing: border-box; }
        #specialArea2 .contarea div .img img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-position: center top;
          background-repeat: no-repeat;
          background-size: 100% auto; }
      #specialArea2 .contarea div.item1 .img {
        padding-top: 148.2%; }
        #specialArea2 .contarea div.item1 .img img:first-of-type {
          background-image: url("../img_new/special2/img1_1.png"); }
        #specialArea2 .contarea div.item1 .img img:nth-of-type(2) {
          background-image: url("../img_new/special2/img1_2.png");
          transform: rotate(4deg); }
        #specialArea2 .contarea div.item1 .img img:nth-of-type(3) {
          background-image: url("../img_new/special2/img1_3.png"); }
      #specialArea2 .contarea div.item2 .img {
        padding-top: 73.6%; }
        #specialArea2 .contarea div.item2 .img img:first-of-type {
          background-image: url("../img_new/special2/img2_1.png");
          transform: rotate(2deg); }
        #specialArea2 .contarea div.item2 .img img:nth-of-type(2) {
          background-image: url("../img_new/special2/img2_2.png"); }
      #specialArea2 .contarea div.item3 .img {
        padding-top: 91.8%; }
        #specialArea2 .contarea div.item3 .img img:first-of-type {
          background-image: url("../img_new/special2/img3_1.png");
          transform: rotate(-2deg); }
        #specialArea2 .contarea div.item3 .img img:nth-of-type(2) {
          background-image: url("../img_new/special2/img3_2.png");
          transform: rotate(2deg); }
      #specialArea2 .contarea div.item4 .img {
        padding-top: 109%; }
        #specialArea2 .contarea div.item4 .img img:first-of-type {
          background-image: url("../img_new/special2/img4_1.png"); }
        #specialArea2 .contarea div.item4 .img img:nth-of-type(2) {
          background-image: url("../img_new/special2/img4_2.png"); }
      #specialArea2 .contarea div.item5 .img {
        padding-top: 81.37%; }
        #specialArea2 .contarea div.item5 .img img:first-of-type {
          background-image: url("../img_new/special2/img5_1.png"); }
        #specialArea2 .contarea div.item5 .img img:nth-of-type(2) {
          background-image: url("../img_new/special2/img5_2.png"); }
      #specialArea2 .contarea div.item6 .img {
        padding-top: 75.7%; }
        #specialArea2 .contarea div.item6 .img img:first-of-type {
          background-image: url("../img_new/special2/img6_1.png");
          transform: rotate(2deg); }
        #specialArea2 .contarea div.item6 .img img:nth-of-type(2) {
          background-image: url("../img_new/special2/img6_2.png");
          transform: rotate(-2deg); }
      #specialArea2 .contarea div.item7 .img {
        padding-top: 65%; }
        #specialArea2 .contarea div.item7 .img img {
          background-image: url("../img_new/special2/img7.png");
          transform: rotate(4deg); }
      #specialArea2 .contarea div.item8 .img {
        padding-top: 110%; }
        #specialArea2 .contarea div.item8 .img img:first-of-type {
          background-image: url("../img_new/special2/img8_1.png"); }
        #specialArea2 .contarea div.item8 .img img:nth-of-type(2) {
          background-image: url("../img_new/special2/img8_2.png"); }
  @media screen and (min-width: 48.0625em) {
    #specialArea2 {
      padding: 3em 0 1em; }
      #specialArea2 .copy {
        margin-top: 5em; }
      #specialArea2 .contarea div {
        width: 30vw; }
        #specialArea2 .contarea div.item1 {
          left: 10vw;
          top: 2vw; }
          #specialArea2 .contarea div.item1 img:first-of-type {
            left: .8em; }
          #specialArea2 .contarea div.item1 img:nth-of-type(2) {
            left: -.6em;
            top: .8em; }
          #specialArea2 .contarea div.item1 img:nth-of-type(3) {
            left: 2em;
            top: 1.2em; }
        #specialArea2 .contarea div.item6 {
          left: 50vw;
          margin-top: -38vw; }
          #specialArea2 .contarea div.item6 img:nth-of-type(2) {
            left: -.9em;
            top: .8em; }
        #specialArea2 .contarea div.item4 {
          left: 58vw;
          margin-top: 3vw; }
          #specialArea2 .contarea div.item4 img:first-of-type {
            left: .8em; }
          #specialArea2 .contarea div.item4 img:nth-of-type(2) {
            left: -1em;
            top: .8em; }
        #specialArea2 .contarea div.item2 {
          left: 8vw;
          margin-top: -20vw; }
          #specialArea2 .contarea div.item2 img:nth-of-type(2) {
            left: -1em;
            top: .8em; }
        #specialArea2 .contarea div.item7 {
          left: 48vw;
          margin-top: 0vw; }
        #specialArea2 .contarea div.item3 {
          left: 13vw;
          margin-top: -15vw; }
          #specialArea2 .contarea div.item3 img:first-of-type {
            left: -1em; }
          #specialArea2 .contarea div.item3 img:nth-of-type(2) {
            left: 1em;
            top: .8em; }
        #specialArea2 .contarea div.item8 {
          left: 54vw;
          margin-top: -12vw;
          width: 32vw; }
          #specialArea2 .contarea div.item8 img:first-of-type {
            left: .8em; }
          #specialArea2 .contarea div.item8 img:nth-of-type(2) {
            left: -.6em;
            top: 1.4em; }
        #specialArea2 .contarea div.item5 {
          left: 17vw;
          margin-top: -21vw; }
          #specialArea2 .contarea div.item5 img:nth-of-type(2) {
            left: -1em;
            top: 1.2em; } }
  @media screen and (max-width: 48em) {
    #specialArea2 {
      padding: 6vw 0 4vw; }
      #specialArea2 .catch2 {
        margin: 2vw auto 3vw;
        letter-spacing: -.04em;
        font-size: .94em; }
      #specialArea2 .copy {
        margin-top: 10vw; }
      #specialArea2 .contarea div {
        width: 88vw;
        margin: 10vw auto 0; }
        #specialArea2 .contarea div h4 {
          font-size: 1em; }
        #specialArea2 .contarea div.item1 img:first-of-type {
          left: 2vw; }
        #specialArea2 .contarea div.item1 img:nth-of-type(2) {
          left: -2vw;
          margin-top: 2vw; }
        #specialArea2 .contarea div.item1 img:nth-of-type(3) {
          left: 2vw;
          margin-top: 3vw; }
        #specialArea2 .contarea div.item6 {
          margin-top: 5vw; }
          #specialArea2 .contarea div.item6 img:nth-of-type(2) {
            left: -2vw;
            margin-top: 3vw; }
        #specialArea2 .contarea div.item4 img:first-of-type {
          left: 2vw; }
        #specialArea2 .contarea div.item4 img:nth-of-type(2) {
          left: -2vw;
          margin-top: 2vw; }
        #specialArea2 .contarea div.item2 img:first-of-type {
          left: 2vw; }
        #specialArea2 .contarea div.item2 img:nth-of-type(2) {
          left: -2vw;
          margin-top: 2vw; }
        #specialArea2 .contarea div.item7 img:first-of-type {
          left: 2vw; }
        #specialArea2 .contarea div.item3 img:first-of-type {
          left: 2vw; }
        #specialArea2 .contarea div.item3 img:nth-of-type(2) {
          left: -2vw;
          margin-top: 2vw; }
        #specialArea2 .contarea div.item8 img:first-of-type {
          left: 2vw; }
        #specialArea2 .contarea div.item8 img:nth-of-type(2) {
          left: -2vw;
          margin-top: 2vw; }
        #specialArea2 .contarea div.item5 img:first-of-type {
          left: 2vw; }
        #specialArea2 .contarea div.item5 img:nth-of-type(2) {
          left: -3vw;
          margin-top: 2vw; } }

/* ------------------- */
/* nav */
nav {
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.9); }
  nav p {
    position: relative; }
    nav p::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 1px;
      background-color: #333333;
      transition: all 180ms 0s ease-out; }
    nav p:hover::before {
      width: 100%; }
  nav p > * {
    letter-spacing: .02em;
    line-height: normal;
    font-size: .95em;
    font-family: zen-old-mincho, sans-serif;
    font-variation-settings: "wght" 600; }
  nav .officialSNS {
    letter-spacing: -.4em; }
    nav .officialSNS > * {
      display: inline-block;
      letter-spacing: normal;
      vertical-align: top;
      *display: inline;
      *zoom: 1; }
  nav .officialSNS li {
    line-height: 1em;
    font-variation-settings: "wght" 600; }
    nav .officialSNS li a {
      display: block; }
  @media screen and (min-width: 48.0625em) {
    nav {
      position: sticky;
      letter-spacing: -.4em;
      padding: .5em 0 .5em 1em;
      border-bottom: solid 1px #8C8C8C; }
      nav > * {
        display: inline-block;
        letter-spacing: normal;
        vertical-align: top;
        *display: inline;
        *zoom: 1; }
      nav p:not(:last-of-type) {
        margin-right: 1.5em; }
        nav p:not(:last-of-type)::after {
          content: '';
          position: absolute;
          right: -1em;
          top: 55%;
          width: .5em;
          height: 1px;
          background-color: #333333; }
      nav p > * {
        padding: .7em 0 .5em; }
      nav .officialSNS {
        position: absolute;
        right: 1em;
        top: .4em; }
        nav .officialSNS li {
          margin-left: .5vw; }
        nav .officialSNS li:first-child {
          padding-top: .3em; }
        nav .officialSNS li:nth-child(n+2) {
          width: 1.6em; } }
  @media screen and (max-width: 48em) {
    nav {
      position: fixed;
      display: none;
      height: 100vh;
      overflow-y: scroll;
      padding: 3vw 0; }
      nav p {
        width: 70vw;
        margin: 2vw 0 0 15vw; }
        nav p::after {
          content: '';
          position: absolute;
          left: -4vw;
          top: 51%;
          width: 2vw;
          height: 1px;
          background-color: #333333; }
      nav p > * {
        display: block;
        padding: 1vw 0;
        font-size: 1.4em; }
      nav .officialSNS {
        position: relative;
        margin: 8vw 0 0 10vw; }
        nav .officialSNS li {
          margin-right: 5vw; }
        nav .officialSNS li:first-child {
          padding-top: .4em;
          font-size: 1.4em; }
        nav .officialSNS li:nth-child(n+2) {
          width: 9vw; } }

/* ------------------- */
/* .spNavibtn */
.spNavibtn {
  position: fixed;
  z-index: 51;
  right: 2vw;
  top: 2vw;
  width: 12vw;
  height: 12vw;
  background-color: #333333;
  border-radius: 50%; }
  .spNavibtn p {
    position: absolute;
    width: 50%;
    height: 21%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto; }
    .spNavibtn p span {
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #fff;
      transition: all 180ms 0s ease-out; }
      .spNavibtn p span:first-of-type {
        top: 0; }
      .spNavibtn p span:nth-of-type(2) {
        top: 0;
        bottom: 0;
        margin: auto; }
      .spNavibtn p span:last-of-type {
        bottom: 0;
        width: 60%; }
  .spNavibtn.active p {
    top: -20%; }
    .spNavibtn.active p span:first-of-type {
      transform: translateY(0.7em) rotate(-45deg); }
    .spNavibtn.active p span:nth-of-type(2) {
      opacity: 0; }
    .spNavibtn.active p span:last-of-type {
      width: 100%;
      transform: translateY(0.1em) rotate(45deg); }