@charset "UTF-8";
/* Scss Document */
/* setting
**********************************************************************/
/* mixin
*********************************************************************/
/* media query */
.fade {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s; }

.cover_w {
  position: relative;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.cover_h {
  position: relative;
  width: auto;
  height: 100%;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.glow {
  text-shadow: 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 8px #ffffff, 0px 0px 8px #ffffff, 0px 0px 8px #ffffff, 0px 0px 4px #ffffff, 0px 0px 4px #ffffff, 0px 0px 4px #ffffff; }

.shadow {
  text-shadow: 0px 0px 10px #000, 0px 0px 8px #000; }

/* mixin
*********************************************************************/
/* media query */
.area_info {
  padding: 60px 0 0;
  box-sizing: border-box;
  position: relative; }

.wrap_info {
  display: flex; }
  .wrap_info .side_img {
    width: 18%;
    overflow: hidden;
    position: relative; }
    .wrap_info .side_img img {
      width: auto;
      height: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%); }
    .wrap_info .side_img .nav_local {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      text-align: right;
      width: 100%; }
      .wrap_info .side_img .nav_local ul {
        text-align: left;
        display: inline-block; }
        .wrap_info .side_img .nav_local ul li {
          border-bottom: #FFF solid 1px;
          font-size: 2.4rem;
          line-height: 1em;
          padding: 1em 2em 1em 0;
          letter-spacing: 0.2em; }
          .wrap_info .side_img .nav_local ul li:last-child {
            border-bottom: none; }
  @media all and (max-width: 828px) {
    .wrap_info {
      display: block; }
      .wrap_info .side_img {
        display: none; } }

.block_info {
  width: 64%; }
  .block_info .inner {
    padding: 5% 7%; }
    .block_info .inner .block_ttl {
      padding: 0 0 30px;
      text-align: center; }
      .block_info .inner .block_ttl h1 {
        line-height: 1.1em;
        font-size: 3.6rem;
        font-weight: 200;
        display: inline-block;
        border-bottom: #CCC dotted 1px;
        padding: 0 0 8px; }
      .block_info .inner .block_ttl h2 {
        font-size: 2.4rem;
        line-height: 1.2em;
        font-weight: 200;
        padding: 16px 0 0; }
    .block_info .inner .box_info {
      display: flex;
      justify-content: space-between; }
      .block_info .inner .box_info .part_txt {
        width: 70%; }
        .block_info .inner .box_info .part_txt p {
          font-size: 1.6rem;
          line-height: 1.8em;
          letter-spacing: 0.05em; }
      .block_info .inner .box_info .part_img {
        width: 26%; }
        .block_info .inner .box_info .part_img ul li {
          padding: 0 0 10px 0; }
          .block_info .inner .box_info .part_img ul li img {
            width: 100%;
            height: auto; }
          .block_info .inner .box_info .part_img ul li.zumen {
            margin-top: -42px; }
    .block_info .inner .box_spec ul {
      display: flex;
      justify-content: space-between; }
      .block_info .inner .box_spec ul li {
        width: 45%;
        border-left: #FFF solid 1px;
        padding: 0 0 0 20px; }
        .block_info .inner .box_spec ul li dl dt {
          font-size: 2rem;
          line-height: 1.2em;
          padding-bottom: 10px; }
        .block_info .inner .box_spec ul li dl dd:after {
          content: '';
          display: block;
          clear: both; }
        .block_info .inner .box_spec ul li dl dd .space {
          float: right;
          /*画像の位置を右下にしたい場合はright*/
          height: 3.4em; }
        .block_info .inner .box_spec ul li dl dd .img {
          float: right;
          /*画像の位置を右下にしたい場合はright*/
          clear: both;
          /*.spaceのfloat解除*/
          margin: 1.2em 0 0 1.2em;
          /*画像の周りの余白*/ }
        .block_info .inner .box_spec ul li dl dd p {
          font-size: 1.4rem;
          line-height: 1.6em; }
  @media all and (max-width: 828px) {
    .block_info {
      width: 100%; }
      .block_info .inner {
        padding: 20px 10px 0; }
        .block_info .inner .block_ttl {
          padding: 0 0 30px;
          text-align: center; }
          .block_info .inner .block_ttl h1 {
            font-size: 2.8rem; }
          .block_info .inner .block_ttl h2 {
            font-size: 1.8rem; }
        .block_info .inner .box_info {
          display: block; }
          .block_info .inner .box_info .part_txt {
            width: 100%; }
            .block_info .inner .box_info .part_txt p {
              font-size: 1.5rem; }
          .block_info .inner .box_info .part_img {
            width: 100%; }
            .block_info .inner .box_info .part_img ul li.zumen {
              margin-top: 0px;
              width: 80%;
              margin: 5px auto; } }
  @media all and (max-width: 494px) {
    .block_info .inner .box_spec ul {
      display: block; }
      .block_info .inner .box_spec ul li {
        width: 100%;
        border-left: none;
        padding: 0 0 0 0px; } }

.area_detail {
  padding: 0 0 50px; }
  .area_detail ul li {
    padding: 90px 0 30px; }
    .area_detail ul li h2 {
      text-align: center;
      font-size: 3rem;
      line-height: 1.2em;
      letter-spacing: 0.3em;
      font-weight: 200; }
      .area_detail ul li h2 span {
        font-size: 1.8rem;
        padding: 0 0.5em; }
    .area_detail ul li .block_detail {
      display: flex;
      padding: 10px;
      line-height: 0em; }
      .area_detail ul li .block_detail img {
        width: 100%;
        height: auto; }
      .area_detail ul li .block_detail .side_single {
        margin: 10px;
        width: 68%;
        overflow: hidden;
        position: relative; }
        .area_detail ul li .block_detail .side_single img {
          position: absolute;
          top: 50%;
          transform: translateY(-50%); }
      .area_detail ul li .block_detail .side_double {
        width: 32%; }
        .area_detail ul li .block_detail .side_double p {
          padding: 10px; }
    .area_detail ul li:nth-child(2) .block_detail {
      flex-direction: row-reverse; }
  .area_detail p {
    font-size: 1.6rem;
    line-height: 1.3em;
    text-align: center; }
  @media all and (max-width: 828px) {
    .area_detail {
      padding: 0 0 20px; }
      .area_detail ul li {
        padding: 20px 0 5px; }
        .area_detail ul li h2 {
          font-size: 2.4rem; }
          .area_detail ul li h2 span {
            font-size: 1.6rem; }
        .area_detail ul li .block_detail {
          display: block;
          padding: 5px; }
          .area_detail ul li .block_detail .side_single {
            margin: 5px;
            width: auto; }
            .area_detail ul li .block_detail .side_single img {
              position: relative;
              top: auto;
              transform: none; }
          .area_detail ul li .block_detail .side_double {
            width: 100%;
            display: flex; }
            .area_detail ul li .block_detail .side_double p {
              box-sizing: border-box;
              padding: 5px;
              width: 50%; }
      .area_detail p {
        text-align: left;
        padding: 0 10px; } }

.area_detail2 {
  padding: 0 0 50px; }
  .area_detail2 ul {
    display: flex;
    justify-content: space-around; }
    .area_detail2 ul li {
      width: calc(100% / 2);
      padding: 30px 0 30px;
      text-align: center; }
      .area_detail2 ul li h2 {
        text-align: center;
        font-size: 3rem;
        line-height: 1.2em;
        letter-spacing: 0.3em;
        font-weight: 200; }
      .area_detail2 ul li .block_detail {
        padding: 20px;
        text-align: center; }
        .area_detail2 ul li .block_detail img {
          width: 100%;
          height: auto;
          margin: 0 auto; }
  @media all and (max-width: 828px) {
    .area_detail2 {
      padding: 0 0 20px; }
      .area_detail2 ul {
        display: block; }
        .area_detail2 ul li {
          width: 100%;
          padding: 0 0 10px; }
          .area_detail2 ul li h2 {
            font-size: 2.4rem; }
          .area_detail2 ul li .block_detail {
            padding: 10px;
            margin-bottom: 20px; } }