@charset "UTF-8";
/*CSSで全体サイズなど決める*/
@font-face {
  font-family: 'Shippori Mincho B1', serif;
  src: url("font/ShipporiMinchoB1-Bold.ttf") format("ttf"); }
@font-face {
  font-family: 'Kosugi', sans-serif;
  src: url("font/Kosugi-Regular.ttf") format("ttf"); }
@font-face {
  font-family: 'Cormorant', serif;
  src: url("font/Cormorant-Bold.ttf") format("ttf"); }

  /* CSSハック */

.mac.safari .Y9Z9{
  display: contents;
}
.mac.safari .PQ{
  display: contents;
}
.mac.safari .R1{
  margin-top: 0;
}
.mac.safari .A10{
  margin-top: 0;
}
.mac.safari .vertical:not(.am24){
  height: 530px!important;
}
.mac.safari .U8{
  transform: rotate(90deg);
  display: inline-block;
  letter-spacing: 0px;
}
.mac.safari .V8{
  transform: rotate(90deg);
  display: inline-block;
  letter-spacing: 0px;
}
.mac.safari .R5{
  transform: rotate(90deg);
  display: inline-block;
  letter-spacing: 0px;
}
.mac.safari .S5{
  transform: rotate(90deg);
  display: inline-block;
  letter-spacing: 0px;
}
.mac.safari #bg .news div{
  height: 1.4rem;
}
.mac.safari .news div div{
  height: auto!important;
}
/* CSSハック */

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  margin: 0; }

/*Chromeちらつき防止ローディングアニメーション後ほど対応*/
/*@media screen and (-webkit-min-device-pixel-ratio:0) {

}*/
/*Chromeちらつき防止ローディングアニメーション後ほど対応*/


/*ローディングアニメーション*/
/* .loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  
  visibility: visible; }

.loading.is-active {
  opacity: 0;
  
  visibility: hidden; 
  background-color: transparent;
}

.loading-animation {
  width: 100vw;
  height: 100vh;
  transition: all 0.5s;
  
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  visibility: hidden; }

.loading-animation.is-active {
  opacity: 1;
  visibility: visible; 
}
.loading img{
  width: 100vw;
  height: 100vh;
} */
/*ローディングアニメーション*/
.myfont {
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 600; }

.subfont {
  font-family: 'Kosugi', sans-serif; }

.otherfont {
  font-family: 'Cormorant', serif;
  letter-spacing: 1px; }

#bg {
  margin: 0;
  height: 720px;
  width: 100%;
  min-height: 100vh;
  /*max-width: 1200px;*/
  place-items: center;
  background-image: url("images/bg_pattern.png");
  background-position: center x;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden; }
  #bg .sub_page_padding {
    margin-top: 1.5rem !important; }
  #bg #site-box {
    overflow: hidden;
    width: 100%;
    height: 720px;
    background-image: url("images/bg.png");
    background-size: cover;
    text-align: right;
    vertical-align: top;
    margin: auto;
    min-width: 1080px;
    max-width: 1080px;
    max-height: 720px;
    background-repeat: no-repeat;
    background-position: center center; }
    #bg #site-box .sub_margin {
      margin-top: 1.5rem; }
    #bg #site-box .menu {
      position: absolute;
      z-index: 1;
      top: 605px;
      width: 1080px;
      text-align: center; }
      #bg #site-box .menu .home img {
        transition: transform 0.3s ease-out; }
      #bg #site-box .menu .home img:hover {
        transform: rotateY(180deg); }
      #bg #site-box .menu .right-m {
        position: absolute;
        top: 55px;
        right: 400px; }
        #bg #site-box .menu .right-m img {
          margin: 0 8px;
          opacity: 0.5; }
        #bg #site-box .menu .right-m img.products-i:hover {
          opacity: 1; }
        #bg #site-box .menu .right-m img.member-i:hover {
          opacity: 1; }
        #bg #site-box .menu .right-m img.member-i-active {
          opacity: 0.8; }
        #bg #site-box .menu .right-m img.products-i-active {
          opacity: 0.8; }
      #bg #site-box .menu .left-m {
        position: absolute;
        top: 53px;
        left: 393px; }
        #bg #site-box .menu .left-m img {
          margin: 0 9px;
          opacity: 0.5; }
        #bg #site-box .menu .left-m img.other-i:hover {
          opacity: 1; }
        #bg #site-box .menu .left-m img.contacts-i:hover {
          opacity: 1; }
        #bg #site-box .menu .left-m img.other-i-active {
          opacity: 0.8; }
        #bg #site-box .menu .left-m img.contacts-i-active {
          opacity: 0.8; }
    #bg #site-box .vertical:not(.am24) {
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      text-orientation: upright;
      display: inline-block;
      position: relative;
      top: 120px;
      right: 7%;
      margin: 0 auto;
      height: 510px; }
    #bg #site-box .vertical .margin-top {
      margin-top: 15px; }
    #bg #site-box .vertical .am24 {
      display: none;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
      position: relative;
      float: right;
      right: 375px;
      font-size: 2.5rem; }
    #bg #site-box .vertical p {
      text-align: left;
      font-size: 1rem;
      line-height: 2rem;
      letter-spacing: 0.4rem; }
      #bg #site-box .vertical p a {
        text-decoration: none; }
    #bg #site-box .vertical .link-bk {
      margin-right: 50px;
      width: 225px;
      height: auto;
      background-image: url(images/link-bk.png);
      background-size: auto;
      background-position: 10px 20px;
      background-repeat: no-repeat; }
      #bg #site-box .vertical .link-bk p.myfont .secret a {
        color: #fdf9c2; }
      #bg #site-box .vertical .link-bk p.myfont .secret a:hover {
        color: #FFFFFF;
        margin-top: 60px;
        background-color: black;
        background-size: 105%; }
      #bg #site-box .vertical .link-bk p.myfont a {
        color: black;
        margin-top: 60px; }
      #bg #site-box .vertical .link-bk p.myfont a:hover {
        background: #FFFFFF;
        background-size: 105%; }
    #bg #site-box .flex {
      display: flex; }
      #bg #site-box .flex .left-page {
        position: relative;
        right: 765px;
        display: flex; }
        #bg #site-box .flex .left-page .character_m {
          margin: 70px 0; }
        #bg #site-box .flex .left-page .character {
          position: relative;
          bottom: 15px; }
          #bg #site-box .flex .left-page .character .c-note {
            position: absolute;
            left: 200px;
            top: -60px;
            width: 209px;
            height: 169px;
            background-image: url(/images/member/menber_note.png); }
            #bg #site-box .flex .left-page .character .c-note p {
              margin: 40px 10px 0px 20px;
              writing-mode: horizontal-tb;
              font-size: 0.6rem;
              letter-spacing: 0.1rem;
              line-height: 1.02rem; }
          #bg #site-box .flex .left-page .character .c-img {
            position: relative;
            bottom: 40px; }
            #bg #site-box .flex .left-page .character .c-img img {
              transition: transform 0.3s ease-out; }
            #bg #site-box .flex .left-page .character .c-img img:hover {
              transform: rotateY(180deg); }
          #bg #site-box .flex .left-page .character .c-name {
            position: relative;
            top: 80px;
            left: 50px;
            width: 107px;
            height: 25px;
            background-image: url(/images/member/menber_name_bg.png); }
            #bg #site-box .flex .left-page .character .c-name img {
              position: absolute;
              bottom: -2px;
              -webkit-transition: all .3s;
              transition: all .3s; }
            #bg #site-box .flex .left-page .character .c-name img:hover {
              opacity: 0.6;
              filter: brightness(110%); }
        #bg #site-box .flex .left-page .top {
          position: absolute;
          left: -110px;
          top: -37px;
          width: 355px;
          height: 243px;
          background-image: url(/images/products/products_sub-1.png);
          writing-mode: lr-tb; }
          #bg #site-box .flex .left-page .top p {
            width: 180px;
            height: 210px;
            margin: 30px 20px 10px 160px;
            font-size: 0.8rem;
            letter-spacing: 0.1rem;
            line-height: 1rem; }
            #bg #site-box .flex .left-page .top p .btn {
              display: inline-block;
              text-align: center;
              width: 180px;
              margin-top: 9px; }
              #bg #site-box .flex .left-page .top p .btn a.btn-border {
                font-size: 0.6rem;
                font-weight: 500;
                line-height: 0.5;
                position: relative;
                display: inline-block;
                padding: 0.8rem 1.2rem;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
                text-align: center;
                vertical-align: middle;
                text-decoration: none;
                letter-spacing: 0.1em;
                color: #212529;
                border-radius: 0.5rem;
                border: 1.5px solid #000;
                border-radius: 0;
                background: #fff; }
              #bg #site-box .flex .left-page .top p .btn a.btn-border:hover {
                color: #fff;
                background: #000; }
        #bg #site-box .flex .left-page .under {
          position: absolute;
          bottom: 37px;
          left: -110px;
          width: 355px;
          height: 243px;
          background-image: url(/images/products/products_sub-2.png);
          writing-mode: lr-tb; }
          #bg #site-box .flex .left-page .under p {
            width: 156px;
            margin: 30px 180px 10px 20px;
            font-size: 0.8rem;
            letter-spacing: 0.1rem;
            line-height: 1rem; }
            #bg #site-box .flex .left-page .under p .btn {
              display: inline-block;
              text-align: center;
              width: 156px; }
              #bg #site-box .flex .left-page .under p .btn a.btn-border {
                font-size: 0.6rem;
                font-weight: 500;
                line-height: 0.5;
                position: relative;
                display: inline-block;
                padding: 0.8rem 1.2rem;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
                text-align: center;
                vertical-align: middle;
                text-decoration: none;
                letter-spacing: 0.1em;
                color: #212529;
                border-radius: 0.5rem;
                border: 1.5px solid #000;
                border-radius: 0;
                background: #fff; }
              #bg #site-box .flex .left-page .under p .btn a.btn-border:hover {
                color: #fff;
                background: #000; }
        #bg #site-box .flex .left-page .writing-tb {
          writing-mode: horizontal-tb;
          position: relative;
          left: 250px;
          bottom: 20px;
          width: 320px;
          z-index: 1; }
          #bg #site-box .flex .left-page .writing-tb .flex__wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; }
            #bg #site-box .flex .left-page .writing-tb .flex__wrap .flex__item {
              display: block;
              margin-bottom: 40px; }
              #bg #site-box .flex .left-page .writing-tb .flex__wrap .flex__item img {
                height: auto;
                display: inline-block;
                box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3); }
                #bg #site-box .flex .left-page .writing-tb .flex__wrap .flex__item img:hover {
                  opacity: 0.6;
                  filter: brightness(110%); }
        #bg #site-box .flex .left-page .contacts-note {
          position: absolute;
          top: 0;
          left: -85px; }
        #bg #site-box .flex .left-page p.form-note {
          position: absolute;
          writing-mode: horizontal-tb;
          letter-spacing: 0.1rem;
          line-height: 1.5rem;
          width: 300px;
          bottom: 110px;
          left: -75px;
          font-size: 13px; }
        #bg #site-box .flex .left-page .c-sns {
          position: absolute;
          writing-mode: horizontal-tb;
          bottom: 35px;
          left: -75px; }
          #bg #site-box .flex .left-page .c-sns img:hover {
            opacity: 0.6;
            filter: brightness(110%); }
/*products.html:右ページ2枚の場合*/

      #bg #site-box .flex .right-page-next {
        position: relative;
        right: 285px;
        display: flex; }
        #bg #site-box .flex .right-page-next .character_m {
          margin: 70px 0; }
        #bg #site-box .flex .right-page-next .character {
          position: relative;
          bottom: 15px; }
          #bg #site-box .flex .right-page-next .character .c-note {
            position: absolute;
            left: 200px;
            top: -60px;
            width: 209px;
            height: 169px;
            background-image: url(/images/member/menber_note.png); }
            #bg #site-box .flex .right-page-next .character .c-note p {
              margin: 40px 10px 0px 20px;
              writing-mode: horizontal-tb;
              font-size: 0.6rem;
              letter-spacing: 0.1rem;
              line-height: 1.02rem; }
          #bg #site-box .flex .right-page-next .character .c-img {
            position: relative;
            bottom: 40px; }
            #bg #site-box .flex .right-page-next .character .c-img img {
              transition: transform 0.3s ease-out; }
            #bg #site-box .flex .right-page-next .character .c-img img:hover {
              transform: rotateY(180deg); }
          #bg #site-box .flex .right-page-next .character .c-name {
            position: relative;
            top: 80px;
            left: 50px;
            width: 107px;
            height: 25px;
            background-image: url(/images/member/menber_name_bg.png); }
            #bg #site-box .flex .right-page-next .character .c-name img {
              position: absolute;
              bottom: -2px;
              -webkit-transition: all .3s;
              transition: all .3s; }
            #bg #site-box .flex .right-page-next .character .c-name img:hover {
              opacity: 0.6;
              filter: brightness(110%); }
        #bg #site-box .flex .right-page-next .top {
          position: absolute;
          left: -110px;
          top: -37px;
          width: 355px;
          height: 243px;
          background-image: url(/images/products/products_main-2.png);
          writing-mode: lr-tb; }
          #bg #site-box .flex .right-page-next .top p {
            width: 180px;
            height: 210px;
            margin: 30px 20px 10px 160px;
            font-size: 0.8rem;
            letter-spacing: 0.1rem;
            line-height: 1rem; }
            #bg #site-box .flex .right-page-next .top p .btn {
              display: inline-block;
              text-align: center;
              width: 180px;
              margin-top: 9px; }
              #bg #site-box .flex .right-page-next .top p .btn a.btn-border {
                font-size: 0.6rem;
                font-weight: 500;
                line-height: 0.5;
                position: relative;
                display: inline-block;
                padding: 0.8rem 1.2rem;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
                text-align: center;
                vertical-align: middle;
                text-decoration: none;
                letter-spacing: 0.1em;
                color: #212529;
                border-radius: 0.5rem;
                border: 1.5px solid #000;
                border-radius: 0;
                background: #fff; }
              #bg #site-box .flex .right-page-next .top p .btn a.btn-border:hover {
                color: #fff;
                background: #000; }
        #bg #site-box .flex .right-page-next .under {
          position: absolute;
          bottom: 37px;
          left: -110px;
          width: 355px;
          height: 243px;
          background-image: url(/images/products/products_main-1.png);
          writing-mode: lr-tb; }
          #bg #site-box .flex .right-page-next .under p {
            width: 156px;
            margin: 30px 180px 10px 20px;
            font-size: 0.8rem;
            letter-spacing: 0.1rem;
            line-height: 1rem; }
            #bg #site-box .flex .right-page-next .under p .btn {
              display: inline-block;
              text-align: center;
              width: 156px; }
              #bg #site-box .flex .right-page-next .under p .btn a.btn-border {
                font-size: 0.6rem;
                font-weight: 500;
                line-height: 0.5;
                position: relative;
                display: inline-block;
                padding: 0.8rem 1.2rem;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
                text-align: center;
                vertical-align: middle;
                text-decoration: none;
                letter-spacing: 0.1em;
                color: #212529;
                border-radius: 0.5rem;
                border: 1.5px solid #000;
                border-radius: 0;
                background: #fff; }
              #bg #site-box .flex .right-page-next .under p .btn a.btn-border:hover {
                color: #fff;
                background: #000; }
        #bg #site-box .flex .right-page-next .writing-tb {
          writing-mode: horizontal-tb;
          position: relative;
          left: 250px;
          bottom: 20px;
          width: 320px;
          z-index: 1; }
          #bg #site-box .flex .right-page-next .writing-tb .flex__wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; }
            #bg #site-box .flex .right-page-next .writing-tb .flex__wrap .flex__item {
              display: block;
              margin-bottom: 40px; }
              #bg #site-box .flex .right-page-next .writing-tb .flex__wrap .flex__item img {
                height: auto;
                display: inline-block;
                box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3); }
                #bg #site-box .flex .right-page-next .writing-tb .flex__wrap .flex__item img:hover {
                  opacity: 0.6;
                  filter: brightness(110%); }
        #bg #site-box .flex .right-page-next .contacts-note {
          position: absolute;
          top: 0;
          left: -85px; }
        #bg #site-box .flex .right-page-next p.form-note {
          position: absolute;
          writing-mode: horizontal-tb;
          letter-spacing: 0.1rem;
          line-height: 1.5rem;
          width: 300px;
          bottom: 110px;
          left: -75px;
          font-size: 13px; }
        #bg #site-box .flex .right-page-next .c-sns {
          position: absolute;
          writing-mode: horizontal-tb;
          bottom: 35px;
          left: -75px; }
          #bg #site-box .flex .right-page-next .c-sns img:hover {
            opacity: 0.6;
            filter: brightness(110%); }

/*products.html:右ページ2枚の場合*/
      #bg #site-box .flex .right-page {
        display: flex;
        position: relative;
        right: 120px; }
        #bg #site-box .flex .right-page .character_m {
          margin: 70px 0; }
        #bg #site-box .flex .right-page .character {
          position: relative;
          bottom: 15px; }
          #bg #site-box .flex .right-page .character .c-note {
            position: absolute;
            left: 200px;
            top: -60px;
            width: 209px;
            height: 169px;
            background-image: url(/images/member/menber_note.png); }
            #bg #site-box .flex .right-page .character .c-note p {
              margin: 40px 10px 0px 20px;
              writing-mode: horizontal-tb;
              font-size: 0.6rem;
              letter-spacing: 0.1rem;
              line-height: 1.02rem; }
            #bg #site-box .flex .right-page .character .c-note p.shiomi {
              position: relative;
              right: 52px; }
          #bg #site-box .flex .right-page .character .c-img {
            position: relative;
            bottom: 40px; }
            #bg #site-box .flex .right-page .character .c-img img {
              transition: transform 0.3s ease-out; }
            #bg #site-box .flex .right-page .character .c-img img:hover {
              transform: rotateY(180deg); }
          #bg #site-box .flex .right-page .character .c-name {
            position: relative;
            top: 80px;
            left: 50px;
            width: 107px;
            height: 25px;
            background-image: url(/images/member/menber_name_bg.png); }
            #bg #site-box .flex .right-page .character .c-name img {
              position: absolute;
              bottom: -2px;
              -webkit-transition: all .3s;
              transition: all .3s; }
            #bg #site-box .flex .right-page .character .c-name img:hover {
              opacity: 0.6;
              filter: brightness(110%); }
        #bg #site-box .flex .right-page .novels-main_image {
          position: absolute;
          bottom: 200px;
          right: -25px; }
        #bg #site-box .flex .right-page .novels-note {
          position: absolute;
          top: 327px;
          right: -95px;
          width: 383px;
          height: 149px;
          background-image: url(/images/products/products_main_note.png);
          writing-mode: lr-tb; }
          #bg #site-box .flex .right-page .novels-note p {
            margin: 15px 20px 10px 20px;
            width: 348px;
            height: 120px;
            overflow-y: scroll;
            overflow-x: hidden;
            font-size: 0.8rem;
            letter-spacing: 0.1rem;
            line-height: 1rem; }
            #bg #site-box .flex .right-page .novels-note p .btn {
              display: inline-block;
              width: 348px;
              text-align: center; }
              #bg #site-box .flex .right-page .novels-note p .btn a.btn-border {
                font-size: 0.6rem;
                font-weight: 500;
                line-height: 0.5;
                position: relative;
                display: inline-block;
                padding: 0.8rem 1.2rem;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
                text-align: center;
                vertical-align: middle;
                text-decoration: none;
                letter-spacing: 0.1em;
                color: #212529;
                border-radius: 0.5rem;
                border: 1.5px solid #000;
                border-radius: 0;
                background: #fff; }
              #bg #site-box .flex .right-page .novels-note p .btn a.btn-border:hover {
                color: #fff;
                background: #000; }
        #bg #site-box .flex .right-page .writing-tb {
          writing-mode: horizontal-tb;
          position: relative;
          left: 350px;
          bottom: 20px;
          width: 320px; }
          #bg #site-box .flex .right-page .writing-tb .flex__wrap {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; }
            #bg #site-box .flex .right-page .writing-tb .flex__wrap .flex__item {
              display: block;
              margin-bottom: 40px; }
              #bg #site-box .flex .right-page .writing-tb .flex__wrap .flex__item img {
                height: auto;
                display: inline-block;
                box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3); }
                #bg #site-box .flex .right-page .writing-tb .flex__wrap .flex__item img:hover {
                  opacity: 0.6;
                  filter: brightness(110%); }
          #bg #site-box .flex .right-page .writing-tb .flex__wrap:after {
            content: "";
            width: 30%; }
        #bg #site-box .flex .right-page .form {
          position: absolute;
          top: -60px;
          right: -105px;
          height: 110%;
          overflow-y: scroll;
          overflow-x: hidden;
          border-radius: 20px; }
          #bg #site-box .flex .right-page .form .formrun-embed {
            width: 400px; }
      #bg #site-box .flex .o-title {
        position: absolute;
        bottom: 32px;
        right: 314px; }
      #bg #site-box .flex .o-gallery {
        position: absolute;
        bottom: 21px;
        left: -205px;
        writing-mode: horizontal-tb; }
        #bg #site-box .flex .o-gallery a {
          text-decoration: none; }
          #bg #site-box .flex .o-gallery a h1 {
            color: #000;
            font-size: 1rem;
            position: relative;
            padding: 0.5rem 1.5rem;
            background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px, #ffe4b1 3px, #ffe4b1 8px);
            background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px, #ffe4b1 3px, #ffe4b1 8px);
            border-radius: 7px; }
            #bg #site-box .flex .o-gallery a h1:after {
              position: absolute;
              content: '';
              top: 100%;
              left: 20px;
              border: 15px solid transparent;
              border-top: 15px solid #ffebbe;
              width: 0;
              height: 0; }
          #bg #site-box .flex .o-gallery a:hover {
            opacity: 0.6;
            filter: brightness(110%); }
    #bg #site-box .title-img {
      position: absolute;
      top: 370px;
      left: 20px;
      transition: all 0.5s ease-in; }
    #bg #site-box .title-img:hover {
      filter: brightness(110%);
      transform: scale(1.05); }
    #bg #site-box .banner01 {
      position: absolute;
      top: 290px;
      left: 20px;
      transition: all 0.5s ease-in; }
    #bg #site-box .banner01:hover {
      filter: brightness(110%);
      transform: scale(1.05); }
      

.-_- {
  color: white;
  opacity: 0.5; }

.A1:hover {
  color: white;
  background-color: black; }

.B1:hover {
  color: white;
  background-color: black; }

.C1 {
  letter-spacing: 0.1rem !important; }

.C1:hover {
  color: white;
  background-color: black; }

.D1:hover {
  color: white;
  background-color: black; }

.E1:hover {
  color: white;
  background-color: black; }

.F1:hover {
  color: white;
  background-color: black; }

.G1:hover {
  color: white;
  background-color: black; }

.H1:hover {
  color: white;
  background-color: black; }

.I1:hover {
  color: white;
  background-color: black; }

.J1:hover {
  color: white;
  background-color: black; }

.K1:hover {
  color: white;
  background-color: black; }

.L1:hover {
  color: white;
  background-color: black; }

.M1:hover {
  color: white;
  background-color: black; }

.N1:hover {
  color: white;
  background-color: black; }

.O1:hover {
  color: white;
  background-color: black; }

.PQ {
  -ms-text-combine-horizontal: all;
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
  position: absolute;
  right: 18px; }

.PQ:hover {
  color: white;
  background-color: black; }

.R1 {
  margin-top: 1.4rem; }

.R1:hover {
  color: white;
  background-color: black; }

.S1:hover {
  color: white;
  background-color: black; }

.T1:hover {
  color: white;
  background-color: black; }

.U1:hover {
  color: white;
  background-color: black; }

.V1 {
  letter-spacing: 0.1rem !important; }

.V1:hover {
  color: white;
  background-color: black; }

.W1:hover {
  color: white;
  background-color: black; }

.X1:hover {
  color: white;
  background-color: black; }

.W1:hover {
  color: white;
  background-color: black; }

.X1:hover {
  color: white;
  background-color: black; }

.Y1:hover {
  color: white;
  background-color: black; }

.Z1:hover {
  color: white;
  background-color: black; }

.A2:hover {
  color: white;
  background-color: black; }

.B2:hover {
  color: white;
  background-color: black; }

.C2:hover {
  color: white;
  background-color: black; }

.D2:hover {
  color: white;
  background-color: black; }

.E2:hover {
  color: white;
  background-color: black; }

.F2:hover {
  color: white;
  background-color: black; }

.G2:hover {
  color: white;
  background-color: black; }

.H2:hover {
  color: white;
  background-color: black; }

.I2:hover {
  color: white;
  background-color: black; }

.J2:hover {
  color: white;
  background-color: black; }

.K2:hover {
  color: white;
  background-color: black; }

.L2:hover {
  color: white;
  background-color: black; }

.M2:hover {
  color: white;
  background-color: black; }

.N2:hover {
  color: white;
  background-color: black; }

.O2:hover {
  color: white;
  background-color: black; }

.P2:hover {
  color: white;
  background-color: black; }

.Q2:hover {
  color: white;
  background-color: black; }

.R2:hover {
  color: white;
  background-color: black; }

.S2:hover {
  color: white;
  background-color: black; }

.T2:hover {
  color: white;
  background-color: black; }

.U2:hover {
  color: white;
  background-color: black; }

.V2:hover {
  color: white;
  background-color: black; }

.W2:hover {
  color: white;
  background-color: black; }

.X2:hover {
  color: white;
  background-color: black; }

.Y2:hover {
  color: white;
  background-color: black; }

.Z2:hover {
  color: white;
  background-color: black; }

.A3:hover {
  color: white;
  background-color: black; }

.B3:hover {
  color: white;
  background-color: black; }

.C3:hover {
  color: white;
  background-color: black; }

.D3:hover {
  color: white;
  background-color: black; }

.E3:hover {
  color: white;
  background-color: black; }

.F3:hover {
  color: white;
  background-color: black; }

.G3:hover {
  color: white;
  background-color: black; }

.H3:hover {
  color: white;
  background-color: black; }

.I3:hover {
  color: white;
  background-color: black; }

.J3:hover {
  color: white;
  background-color: black; }

.K3:hover {
  color: white;
  background-color: black; }

.L3:hover {
  color: white;
  background-color: black; }

.M3:hover {
  color: white;
  background-color: black; }

.N3:hover {
  color: white;
  background-color: black; }

.O3:hover {
  color: white;
  background-color: black; }

.P3:hover {
  color: white;
  background-color: black; }

.Q3:hover {
  color: white;
  background-color: black; }

.R3:hover {
  color: white;
  background-color: black; }

.S3:hover {
  color: white;
  background-color: black; }

.T3:hover {
  color: white;
  background-color: black; }

.U3:hover {
  color: white;
  background-color: black; }

.V3:hover {
  color: white;
  background-color: black; }

.W3:hover {
  color: white;
  background-color: black; }

.X3:hover {
  color: white;
  background-color: black; }

.Y3:hover {
  color: white;
  background-color: black; }

.Z3:hover {
  color: white;
  background-color: black; }

.A4:hover {
  color: white;
  background-color: black; }

.B4:hover {
  color: white;
  background-color: black; }

.C4:hover {
  color: white;
  background-color: black; }

.D4:hover {
  color: white;
  background-color: black; }

.E4:hover {
  color: white;
  background-color: black; }

.F4:hover {
  color: white;
  background-color: black; }

.G4:hover {
  color: white;
  background-color: black; }

.H4:hover {
  color: white;
  background-color: black; }

.I4:hover {
  color: white;
  background-color: black; }

.J4:hover {
  color: white;
  background-color: black; }

.K4:hover {
  color: white;
  background-color: black; }

.L4:hover {
  color: white;
  background-color: black; }

.M4:hover {
  color: white;
  background-color: black; }

.N4:hover {
  color: white;
  background-color: black; }

.O4:hover {
  color: white;
  background-color: black; }

.P4:hover {
  color: white;
  background-color: black; }

.Q4:hover {
  color: white;
  background-color: black; }

.R4:hover {
  color: white;
  background-color: black; }

.S4:hover {
  color: white;
  background-color: black; }

.T4:hover {
  color: white;
  background-color: black; }

.U4:hover {
  color: white;
  background-color: black; }

.V4:hover {
  color: white;
  background-color: black; }

.W4:hover {
  color: white;
  background-color: black; }

.X4:hover {
  color: white;
  background-color: black; }

.Y4:hover {
  color: white;
  background-color: black; }

.Z4:hover {
  color: white;
  background-color: black; }

.A5:hover {
  color: white;
  background-color: black; }

.B5:hover {
  color: white;
  background-color: black; }

.C5:hover {
  color: white;
  background-color: black; }

.D5:hover {
  color: white;
  background-color: black; }

.E5:hover {
  color: white;
  background-color: black; }

.F5:hover {
  color: white;
  background-color: black; }

.G5:hover {
  color: white;
  background-color: black; }

.H5:hover {
  color: white;
  background-color: black; }

.I5:hover {
  color: white;
  background-color: black; }

.J5:hover {
  color: white;
  background-color: black; }

.K5:hover {
  color: white;
  background-color: black; }

.L5:hover {
  color: white;
  background-color: black; }

.M5:hover {
  color: white;
  background-color: black; }

.N5:hover {
  color: white;
  background-color: black; }

.O5:hover {
  color: white;
  background-color: black; }

.P5:hover {
  color: white;
  background-color: black; }

.Q5:hover {
  color: white;
  background-color: black; }

.R5:hover {
  color: white;
  background-color: black; }

.S5:hover {
  color: white;
  background-color: black; }

.T5:hover {
  color: white;
  background-color: black; }

.U5:hover {
  color: white;
  background-color: black; }

.V5:hover {
  color: white;
  background-color: black; }

.W5:hover {
  color: white;
  background-color: black; }

.X5:hover {
  color: white;
  background-color: black; }

.Y5:hover {
  color: white;
  background-color: black; }

.Z5:hover {
  color: white;
  background-color: black; }

.A6:hover {
  color: white;
  background-color: black; }

.B6:hover {
  color: white;
  background-color: black; }

.C6:hover {
  color: white;
  background-color: black; }

.D6:hover {
  color: white;
  background-color: black; }

.E6:hover {
  color: white;
  background-color: black; }

.F6:hover {
  color: white;
  background-color: black; }

.G6:hover {
  color: white;
  background-color: black; }

.H6:hover {
  color: white;
  background-color: black; }

.I6:hover {
  color: white;
  background-color: black; }

.J6:hover {
  color: white;
  background-color: black; }

.K6:hover {
  color: white;
  background-color: black; }

.L6:hover {
  color: white;
  background-color: black; }

.M6:hover {
  color: white;
  background-color: black; }

.N6:hover {
  color: white;
  background-color: black; }

.O6:hover {
  color: white;
  background-color: black; }

.P6:hover {
  color: white;
  background-color: black; }

.Q6:hover {
  color: white;
  background-color: black; }

.R6:hover {
  color: white;
  background-color: black; }

.S6:hover {
  color: white;
  background-color: black; }

.T6:hover {
  color: white;
  background-color: black; }

.U6:hover {
  color: white;
  background-color: black; }

.V6:hover {
  color: white;
  background-color: black; }

.W6:hover {
  color: white;
  background-color: black; }

.X6:hover {
  color: white;
  background-color: black; }

.Y6:hover {
  color: white;
  background-color: black; }

.Z6:hover {
  color: white;
  background-color: black; }

.A7:hover {
  color: white;
  background-color: black; }

.B7:hover {
  color: white;
  background-color: black; }

.C7:hover {
  color: white;
  background-color: black; }

.D7:hover {
  color: white;
  background-color: black; }

.E7:hover {
  color: white;
  background-color: black; }

.F7:hover {
  color: white;
  background-color: black; }

.G7:hover {
  color: white;
  background-color: black; }

.H7:hover {
  color: white;
  background-color: black; }

.I7:hover {
  color: white;
  background-color: black; }

.J7:hover {
  color: white;
  background-color: black; }

.K7:hover {
  color: white;
  background-color: black; }

.L7:hover {
  color: white;
  background-color: black; }

.M7:hover {
  color: white;
  background-color: black; }

.N7:hover {
  color: white;
  background-color: black; }

.O7:hover {
  color: white;
  background-color: black; }

.P7:hover {
  color: white;
  background-color: black; }

.Q7:hover {
  color: white;
  background-color: black; }

.R7:hover {
  color: white;
  background-color: black; }

.S7:hover {
  color: white;
  background-color: black; }

.T7:hover {
  color: white;
  background-color: black; }

.U7:hover {
  color: white;
  background-color: black; }

.V7:hover {
  color: white;
  background-color: black; }

.W7:hover {
  color: white;
  background-color: black; }

.X7:hover {
  color: white;
  background-color: black; }

.Y7:hover {
  color: white;
  background-color: black; }

.Z7:hover {
  color: white;
  background-color: black; }

.A8:hover {
  color: white;
  background-color: black; }

.B8:hover {
  color: white;
  background-color: black; }

.C8:hover {
  color: white;
  background-color: black; }

.D8:hover {
  color: white;
  background-color: black; }

.E8:hover {
  color: white;
  background-color: black; }

.F8:hover {
  color: white;
  background-color: black; }

.G8:hover {
  color: white;
  background-color: black; }

.H8:hover {
  color: white;
  background-color: black; }

.I8:hover {
  color: white;
  background-color: black; }

.J8:hover {
  color: white;
  background-color: black; }

.K8:hover {
  color: white;
  background-color: black; }

.L8:hover {
  color: white;
  background-color: black; }

.M8:hover {
  color: white;
  background-color: black; }

.N8:hover {
  color: white;
  background-color: black; }

.O8:hover {
  color: white;
  background-color: black; }

.P8:hover {
  color: white;
  background-color: black; }

.Q8:hover {
  color: white;
  background-color: black; }

.R8:hover {
  color: white;
  background-color: black; }

.S8:hover {
  color: white;
  background-color: black; }

.T8:hover {
  color: white;
  background-color: black; }

.U8 {
  margin-top: 0.2rem;
  letter-spacing: 0; }

.U8:hover {
  color: white;
  background-color: black; }

.V8 {
  margin-bottom: 0.2rem; }

.V8:hover {
  color: white;
  background-color: black; }

.W8:hover {
  color: white;
  background-color: black; }

.X8:hover {
  color: white;
  background-color: black; }

.Y8:hover {
  color: white;
  background-color: black; }

.Z8:hover {
  color: white;
  background-color: black; }

.A9:hover {
  color: white;
  background-color: black; }

.B9:hover {
  color: white;
  background-color: black; }

.C9:hover {
  color: white;
  background-color: black; }

.D9:hover {
  color: white;
  background-color: black; }

.E9:hover {
  color: white;
  background-color: black; }

.F9:hover {
  color: white;
  background-color: black; }

.G9:hover {
  color: white;
  background-color: black; }

.H9:hover {
  color: white;
  background-color: black; }

.I9:hover {
  color: white;
  background-color: black; }

.J9:hover {
  color: white;
  background-color: black; }

.K9:hover {
  color: white;
  background-color: black; }

.L9:hover {
  color: white;
  background-color: black; }

.M9:hover {
  color: white;
  background-color: black; }

.N9:hover {
  color: white;
  background-color: black; }

.O9:hover {
  color: white;
  background-color: black; }

.P9:hover {
  color: white;
  background-color: black; }

.Q9:hover {
  color: white;
  background-color: black; }

.R9:hover {
  color: white;
  background-color: black; }

.S9:hover {
  color: white;
  background-color: black; }

.T9:hover {
  color: white;
  background-color: black; }

.U9:hover {
  color: white;
  background-color: black; }

.V9:hover {
  color: white;
  background-color: black; }

.W9:hover {
  color: white;
  background-color: black; }

.X9:hover {
  color: white;
  background-color: black; }

.Y9Z9 {
  -ms-text-combine-horizontal: all;
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
  position: absolute;
  right: 560px; }

.Y9Z9:hover {
  color: white;
  background-color: black; }

.A10 {
  margin-top: 1.4rem; }

.A10:hover {
  color: white;
  background-color: black; }

.B10:hover {
  color: white;
  background-color: black; }

.C10:hover {
  color: white;
  background-color: black; }

.D10:hover {
  color: white;
  background-color: black; }

.E10:hover {
  color: white;
  background-color: black; }

.F10:hover {
  color: white;
  background-color: black; }

.G10:hover {
  color: white;
  background-color: black; }

.H10:hover {
  color: white;
  background-color: black; }

.I10:hover {
  color: white;
  background-color: black; }

.J10:hover {
  color: white;
  background-color: black; }

.K10:hover {
  color: white;
  background-color: black; }

.L10:hover {
  color: white;
  background-color: black; }

.M10:hover {
  color: white;
  background-color: black; }

.N10:hover {
  color: white;
  background-color: black; }

.O10:hover {
  color: white;
  background-color: black; }

.P10:hover {
  color: white;
  background-color: black; }

.Q10:hover {
  color: white;
  background-color: black; }

.R10:hover {
  color: white;
  background-color: black; }

.S10:hover {
  color: white;
  background-color: black; }

.T10:hover {
  color: white;
  background-color: black; }

.U10:hover {
  color: white;
  background-color: black; }

.V10:hover {
  color: white;
  background-color: black; }

.W10:hover {
  color: white;
  background-color: black; }

.X10:hover {
  color: white;
  background-color: black; }

.Y10:hover {
  color: white;
  background-color: black; }

.Z10:hover {
  color: white;
  background-color: black; }

.A11:hover {
  color: white;
  background-color: black; }

.B11:hover {
  color: white;
  background-color: black; }

.C11:hover {
  color: white;
  background-color: black; }

.D11:hover {
  color: white;
  background-color: black; }

.E11:hover {
  color: white;
  background-color: black; }

.F11:hover {
  color: white;
  background-color: black; }

.G11:hover {
  color: white;
  background-color: black; }

.H11:hover {
  color: white;
  background-color: black; }

@keyframes typinganime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.footer {
  background-color: black;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  /*←絶対位置*/
  bottom: 0;
  /*下に固定*/
  z-index: 999; }
  .footer p {
    color: white;
    text-align: center;
    font-size: 0.5rem;
    margin: 0; }

.news {
  background-color: black;
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  z-index: 999; }
  .news div {
    color: white;
    text-align: center;
    margin: 0;
    height: 1.5rem;
    overflow: hidden; }
    .news div:hover {
      overflow: visible; }
    .news div .news_title {
      font-size: 0.5rem;
      margin: 0 0.3rem; }
    .news div .font_small {
      font-size: 0.3rem;
      display: inline-block;
      transform: scale(0.6); }
    .news div div {
      background-color: #000;
      opacity: 0.8;
      height: auto; }
      .news div div dl.news_contents {
        font-size: 0.5rem;
        padding-top: 0.2rem;
        color: white;
        text-align: center;
        margin: 0;
        z-index: 9999;
        display: flex;
        position: relative;
        margin-left: 34vw; }
        .news div div dl.news_contents:last-child {
          padding-bottom: 0.5rem; }
        .news div div dl.news_contents dd {
          margin-left: 0.8rem; }
          .news div div dl.news_contents dd a {
            color: #fff; }

#sf-form-page h2 {
  font-size: 20px; }

#sf-form-page div {
  font-size: 95%; }

.yon-maru-yon {
  margin: 0 auto; }
  .yon-maru-yon h1 {
    vertical-align: middle; }
  .yon-maru-yon p {
    vertical-align: middle; }

::-webkit-scrollbar {
  width: 8px; }

::-webkit-scrollbar-track {
  background: #c2e7f2;
  border-radius: 10px; }

::-webkit-scrollbar-thumb {
  background: #34c0eb;
  border-radius: 10px; }