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

body {
  height: 100%;
  margin: 0px;
  line-height: 1.5;
  font-family: "Noto Serif JP";
  height: 1000px;
  color: #444444; }

h1, h2 {
  font-size: 45px;
  font-weight: 400;
  letter-spacing: 10px; }
  @media screen and (max-width: 868px) {
    h1, h2 {
      font-size: 35px; } }
  @media screen and (max-width: 500px) {
    h1, h2 {
      font-size: 25px;
      letter-spacing: 5px; } }

h3 {
  font-size: 35px;
  font-weight: 400;
  margin: 0px;
  letter-spacing: 5px; }
  @media screen and (max-width: 868px) {
    h3 {
      font-size: 28px; } }
  @media screen and (max-width: 500px) {
    h3 {
      font-size: 19px; } }

@media screen and (max-width: 868px) {
  p {
    font-size: 18px; } }

@media screen and (max-width: 500px) {
  p {
    font-size: 13px;
    color: #222222; } }

.header {
  position: fixed;
  z-index: 2;
  width: 100%;
  background: url(../img/black1.png);
  height: 80px;
  top: 0px;
  left: 0px; }
  @media screen and (max-width: 868px) {
    .header {
      height: 55px; } }
  .header__container {
    position: relative; }
  .header__background {
    position: absolute;
    height: 80px;
    width: 100%; }
  .header__logo {
    position: absolute;
    background-size: contain;
    padding-top: 13px;
    height: 80px;
    -webkit-filter: invert(90%);
    filter: invert(90%); }
    @media screen and (max-width: 868px) {
      .header__logo {
        padding-top: 9px;
        height: 60px; } }
  .header nav {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 0px;
    height: 80px;
    right: 100px;
    right: 0px; }
    @media screen and (max-width: 868px) {
      .header nav {
        margin-left: 0px; } }
  .header ul {
    padding-left: 0px;
    padding-top: 10px;
    width: 830px; }
    @media screen and (max-width: 868px) {
      .header ul {
        display: none; } }
    @media screen and (max-width: 500px) {
      .header ul {
        display: none; } }
  .header li {
    display: inline;
    color: white;
    font-size: 15px;
    height: 80px;
    padding-right: 55px; }
    .header li a {
      text-decoration: none;
      color: white;
      position: relative;
      display: inline-block;
      -webkit-transition: .3s;
      -o-transition: .3s;
      transition: .3s;
      padding-bottom: 5px; }
      .header li a::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        content: '';
        width: 0;
        margin-top: 30px;
        height: 1px;
        background-color: white;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }
      .header li a:hover::after {
        width: 100%; }
  .header__menu-trigger {
    display: none; }
    @media screen and (max-width: 868px) {
      .header__menu-trigger {
        top: 17px;
        position: relative;
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 0 0 auto;
        float: right;
        right: 10px;
        -webkit-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
        width: 30px;
        height: 20px; }
        .header__menu-trigger span {
          display: inline-block;
          -webkit-transition: all .4s;
          -o-transition: all .4s;
          transition: all .4s;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          position: absolute;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: #fff;
          border-radius: 4px; }
        .header__menu-trigger span:nth-of-type(1) {
          top: 0; }
        .header__menu-trigger span:nth-of-type(2) {
          top: 9px; }
        .header__menu-trigger span:nth-of-type(3) {
          bottom: 0; } }
    .header__menu-trigger.active span:nth-of-type(1) {
      -webkit-transform: translateY(9px) rotate(-45deg);
      -ms-transform: translateY(9px) rotate(-45deg);
      transform: translateY(9px) rotate(-45deg); }
    .header__menu-trigger.active span:nth-of-type(2) {
      left: 50%;
      opacity: 0;
      -webkit-animation: active-menu-bar02 .8s forwards;
      animation: active-menu-bar02 .8s forwards; }

@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0; } }

@keyframes active-menu-bar02 {
  100% {
    height: 0; } }
    .header__menu-trigger.active span:nth-of-type(3) {
      -webkit-transform: translateY(-9px) rotate(45deg);
      -ms-transform: translateY(-9px) rotate(45deg);
      transform: translateY(-9px) rotate(45deg); }

.menu {
  z-index: 1;
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  margin: 0;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .menu.active {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; }
  .menu ul {
    margin: 0;
    padding: 0;
    margin-top: 70px; }
  .menu li {
    font-size: .8em;
    line-height: 1.4; }
    .menu li:not(:first-child) {
      border-top: 1px solid rgba(255, 255, 255, 0.6); }
  .menu a {
    display: block;
    padding: 1em 2em;
    text-decoration: inherit;
    -webkit-transition: background .6s;
    -o-transition: background .6s;
    transition: background .6s;
    color: white; }
    .menu a:hover {
      background: black; }

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(600px, 0, 0);
    transform: translate3d(600px, 0, 0); }
  100% {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0); } }

@keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(600px, 0, 0);
    transform: translate3d(600px, 0, 0); }
  100% {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0); } }

.footer-yohaku {
  height: 50px;
  width: 50px; }

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 70px;
  background-color: #222222;
  color: #aaaaaa;
  width: 100%; }
  @media screen and (max-width: 868px) {
    footer {
      font-size: 13px; } }

body {
  height: auto;
  background-image: url(../img/texture/hana.jpg);
  background-size: cover; }
  @media screen and (max-width: 868px) {
    body {
      height: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; } }

.container {
  margin-top: 200px;
  margin-left: 10%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #444444;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-flow: row-reverse;
  flex-flow: row-reverse;
  background-color: #F4F4F4a0;
  width: 80%;
  height: 90%;
  border-radius: 50px;
  -webkit-box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8); }
  @media screen and (min-width: 1330px) {
    .container {
      margin-bottom: 5%; } }
  @media screen and (max-width: 868px) {
    .container {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      width: 90%;
      margin-left: 0px;
      margin-top: 50px;
      margin-bottom: 50px; } }
  .container .title-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 200px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    margin-top: -80px; }
    @media screen and (min-width: 1330px) {
      .container .title-container {
        margin-right: 100px;
        margin-top: -70px; } }
    @media screen and (max-width: 868px) {
      .container .title-container {
        height: auto;
        margin-top: 50px;
        margin-bottom: 30px; } }
    .container .title-container .title-namba {
      letter-spacing: 10px;
      margin-top: -500px;
      margin-right: -50px;
      margin-left: 0px;
      height: wrap;
      position: relative;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      float: left; }
      @media screen and (max-width: 868px) {
        .container .title-container .title-namba {
          margin: 0px;
          letter-spacing: 5px;
          height: 200px; } }
      @media screen and (max-width: 868px) {
        .container .title-container .title-namba {
          height: 180px; } }
      @media screen and (max-width: 500px) {
        .container .title-container .title-namba {
          height: 140px; } }
    .container .title-container .title-yodogawa {
      letter-spacing: 10px;
      margin-top: -500px;
      margin-right: -50px;
      margin-left: 0px;
      height: wrap;
      position: relative;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      float: left; }
      @media screen and (max-width: 868px) {
        .container .title-container .title-yodogawa {
          margin: 0px;
          letter-spacing: 5px;
          height: 200px; } }
      @media screen and (min-width: 1330px) {
        .container .title-container .title-yodogawa {
          margin-top: -650px; } }
      @media screen and (max-width: 868px) {
        .container .title-container .title-yodogawa {
          height: 180px; } }
      @media screen and (max-width: 500px) {
        .container .title-container .title-yodogawa {
          height: 140px; } }
    .container .title-container .title-karasuma {
      letter-spacing: 10px;
      margin-top: -500px;
      margin-right: -50px;
      margin-left: 0px;
      height: wrap;
      position: relative;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      float: left;
      margin-top: -1050px; }
      @media screen and (max-width: 868px) {
        .container .title-container .title-karasuma {
          margin: 0px;
          letter-spacing: 5px;
          height: 200px; } }
      @media screen and (min-width: 1330px) {
        .container .title-container .title-karasuma {
          margin-top: -1300px; } }
      @media screen and (max-width: 868px) {
        .container .title-container .title-karasuma {
          height: 330px; } }
      @media screen and (max-width: 500px) {
        .container .title-container .title-karasuma {
          height: 250px; } }
    .container .title-container .title-en {
      font-size: 16px;
      letter-spacing: 10px;
      margin-top: -450px;
      margin-left: 70px;
      height: 530px;
      position: relative;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      float: left; }
      @media screen and (min-width: 1330px) {
        .container .title-container .title-en {
          margin-left: 0px; } }
      @media screen and (max-width: 868px) {
        .container .title-container .title-en {
          height: auto;
          margin: 0px;
          margin-top: 15px;
          font-size: 13px;
          letter-spacing: 8px; } }
    .container .title-container .title-en-yodogawa {
      font-size: 16px;
      letter-spacing: 10px;
      margin-top: -450px;
      margin-left: 70px;
      height: 530px;
      position: relative;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      float: left; }
      @media screen and (min-width: 1330px) {
        .container .title-container .title-en-yodogawa {
          margin-left: 0px; } }
      @media screen and (max-width: 868px) {
        .container .title-container .title-en-yodogawa {
          height: auto;
          margin: 0px;
          margin-top: 15px;
          font-size: 13px;
          letter-spacing: 8px; } }
      @media screen and (min-width: 1330px) {
        .container .title-container .title-en-yodogawa {
          margin-top: -590px; } }
    .container .title-container .title-en-karasuma {
      font-size: 16px;
      letter-spacing: 10px;
      margin-top: -450px;
      margin-left: 70px;
      height: 530px;
      position: relative;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      float: left;
      margin-top: -950px;
      margin-left: 0px; }
      @media screen and (min-width: 1330px) {
        .container .title-container .title-en-karasuma {
          margin-left: 0px; } }
      @media screen and (max-width: 868px) {
        .container .title-container .title-en-karasuma {
          height: auto;
          margin: 0px;
          margin-top: 15px;
          font-size: 13px;
          letter-spacing: 8px; } }
      @media screen and (min-width: 1330px) {
        .container .title-container .title-en-karasuma {
          margin-top: -1200px; } }
  .container .content {
    margin-top: 200px; }
    @media screen and (min-width: 1330px) {
      .container .content {
        margin-top: 250px;
        margin-bottom: 20px; } }
    @media screen and (max-width: 868px) {
      .container .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 0px; } }
    .container .content p {
      width: 80%;
      margin-bottom: 5px;
      margin-top: 5px; }
    .container .content table {
      margin-top: 50px;
      margin-bottom: 50px;
      border-spacing: 0;
      width: 90%; }
      @media screen and (min-width: 1330px) {
        .container .content table {
          font-size: 21px; } }
      @media screen and (max-width: 868px) {
        .container .content table {
          font-size: 18px;
          width: 85%; } }
      @media screen and (max-width: 500px) {
        .container .content table {
          font-size: 13px; } }
      .container .content table th {
        border-bottom: solid 2px #fb5144;
        padding: 10px 0; }
      .container .content table td {
        border-bottom: solid 2px #ddd;
        text-align: center;
        padding: 10px 0; }
    .container .content li {
      margin-bottom: 10px; }
      @media screen and (min-width: 1330px) {
        .container .content li {
          font-size: 21px; } }
      @media screen and (max-width: 868px) {
        .container .content li {
          font-size: 18px;
          width: 95%; } }
      @media screen and (max-width: 500px) {
        .container .content li {
          font-size: 13px; } }
    .container .content .karasuma-hosyu {
      font-size: 30px; }
      @media screen and (max-width: 868px) {
        .container .content .karasuma-hosyu {
          font-size: 20px; } }
    .container .content .jusyo {
      margin-top: 50px;
      font-size: 30px;
      font-weight: 400;
      letter-spacing: 4px; }
      @media screen and (max-width: 868px) {
        .container .content .jusyo {
          font-size: 20px;
          margin-right: auto;
          margin-left: 30px;
          position: relative;
          left: 0px; } }
    .container .content iframe {
      margin-top: 20px;
      margin-bottom: 55px; }
      @media screen and (max-width: 868px) {
        .container .content iframe {
          width: 80%;
          margin-bottom: 55px; } }