@charset "UTF-8";
@media screen and (max-width: 599px) {
  img.lg,
  img.md,
  img.sm {
    display: none !important; }

  img.xs {
    display: inline !important; } }
@media screen and (min-width: 600px) and (max-width: 767px) {
  img.lg,
  img.md,
  img.xs {
    display: none !important; }

  img.sm {
    display: inline !important; } }
@media screen and (min-width: 768px) and (max-width: 979px) {
  img.lg,
  img.sm,
  img.xs {
    display: none !important; }

  img.md {
    display: inline !important; } }
@media screen and (min-width: 980px) {
  img.sm,
  img.md,
  img.xs {
    display: none !important; }

  img.lg {
    display: inline !important; } }
/* ***** */
* {
  box-sizing: border-box; }

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0; }

address {
  font-style: normal; }

img {
  max-width: 100%; }

p,
ul, ol, dl, dt, dd {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none;
  color: inherit; }

.clear:after {
  clear: both;
  display: block;
  content: ""; }

.content {
  padding: 0 10px;
  margin: 0 auto; }
  @media screen and (min-width: 980px) {
    .content {
      width: 950px;
      padding: 0; } }

.font-serif {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
  @media all and (-ms-high-contrast: none) {
    .font-serif {
      font-family: "メイリオ"; } }

/* ***** */
body {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  font-size: 16px;
  line-height: 24px;
  color: #221815;
  margin: 0;
  padding: 0; }

header {
  display: table;
  width: 100%;
  margin: 0 auto;
  padding: 15px 20px; }
  @media screen and (min-width: 980px) {
    header {
      width: 980px;
      padding: 30px 0; } }
  header h1 {
    display: table-cell;
    width: 30%;
    vertical-align: middle; }
    @media screen and (min-width: 980px) {
      header h1 img {
        max-width: 294px; } }
  header address {
    text-align: right;
    display: table-cell;
    width: 70%;
    vertical-align: top; }
    @media screen and (min-width: 600px) and (max-width: 767px) {
      header address {
        padding-left: 10px; } }
    header address > * {
      display: block;
      float: left; }
    header address > span {
      display: none;
      width: 130px;
      text-align: left;
      margin-left: 85px;
      color: #004e2e;
      line-height: 24px;
      font-weight: bold; }
      @media screen and (min-width: 980px) {
        header address > span {
          display: block; } }
    header address .header-tel img,
    header address .header-mail img {
      height: 50px; }
      @media screen and (min-width: 768px) and (max-width: 979px) {
        header address .header-tel img,
        header address .header-mail img {
          height: 70px; } }
      @media screen and (min-width: 980px) {
        header address .header-tel img,
        header address .header-mail img {
          height: 70px; } }
    @media screen and (min-width: 768px) and (max-width: 979px) {
      header address .header-tel {
        width: 279px; } }
    @media screen and (min-width: 980px) {
      header address .header-tel {
        width: 279px; } }
    header address .header-mail {
      width: 75px; }
      @media screen and (min-width: 768px) and (max-width: 979px) {
        header address .header-mail {
          width: 175px; } }
      @media screen and (min-width: 980px) {
        header address .header-mail {
          width: 190px; } }

nav.global {
  display: none;
  margin: 0 auto; }
  @media screen and (min-width: 980px) {
    nav.global {
      display: block;
      width: 980px; } }
  nav.global ul {
    display: table;
    width: 100%; }
    nav.global ul li {
      display: table-cell;
      text-align: center; }
      nav.global ul li a {
        display: block;
        padding: 20px 0;
        font-weight: bold; }
        @media screen and (min-width: 980px) {
          nav.global ul li a {
            font-size: 18px; } }

footer {
  background: #004e2e;
  color: #fff;
  text-align: center;
  padding: 50px 10px; }
  footer > a img {
    width: 320px;
    margin-bottom: 20px; }
  footer > address {
    margin-bottom: 30px; }
  footer > div > * {
    display: block;
    margin-bottom: 20px; }
    @media screen and (min-width: 980px) {
      footer > div > * {
        display: inline-block; } }
  footer > div > span {
    display: none;
    border: 2px solid #fff;
    border-radius: 15px;
    padding: 10px;
    font-weight: bold;
    margin-right: 20px;
    text-align: left;
    vertical-align: text-bottom; }
    @media screen and (min-width: 980px) {
      footer > div > span {
        display: inline-block; } }
  footer > div > div {
    vertical-align: text-bottom;
    margin-right: 20px;
    font-size: 14px; }
    @media screen and (min-width: 980px) {
      footer > div > div {
        text-align: left; } }
    footer > div > div span {
      display: block;
      line-height: 100%;
      font-size: 200%; }
      @media screen and (min-width: 980px) {
        footer > div > div span {
          font-size: 68px; } }
  footer > div > a {
    vertical-align: top; }
    footer > div > a img {
      width: 120px; }

#page-top {
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 9999;
  background: #004e2e;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  display: block;
  padding: 10px; }

/* index */
.index-image {
  width: 100%;
  margin: 0 auto 60px; }
  @media screen and (min-width: 980px) {
    .index-image {
      display: table;
      max-width: 1200px;
      margin: 0 auto 70px; } }
  .index-image .main {
    vertical-align: top;
    position: relative; }
    @media screen and (min-width: 980px) {
      .index-image .main {
        display: table-cell;
        width: 85%; } }
    .index-image .main > img {
      margin-bottom: 30px; }
      @media screen and (min-width: 980px) {
        .index-image .main > img {
          margin-bottom: 0;
          max-width: 1020px; } }
    .index-image .main > div {
      background: #fff;
      text-align: center;
      font-weight: bold;
      background: rgba(225, 212, 127, 0.8);
      padding: 30px 10px;
      margin: 0 10px 30px; }
      @media screen and (min-width: 980px) {
        .index-image .main > div {
          position: absolute;
          bottom: 40px;
          right: 40px;
          width: 260px;
          height: 260px;
          border-radius: 130px;
          margin: 0 10px; } }
      .index-image .main > div > span {
        display: inline-block;
        font-size: 140%; }
        @media screen and (min-width: 980px) {
          .index-image .main > div > span {
            border-bottom: 1px solid #000;
            padding: 0 10px 5px;
            font-size: 110%; } }
      .index-image .main > div ul {
        padding-top: 5px;
        list-style-type: none; }
        .index-image .main > div ul li {
          margin-bottom: 5px; }
          @media screen and (min-width: 980px) {
            .index-image .main > div ul li {
              font-size: 14px; } }
          .index-image .main > div ul li span {
            color: #004e2e;
            font-size: 140%; }
            @media screen and (max-width: 599px) {
              .index-image .main > div ul li span {
                display: block; } }
            @media screen and (min-width: 980px) {
              .index-image .main > div ul li span {
                display: block;
                font-size: 22px;
                margin-bottom: 5px; } }
  .index-image .side {
    padding: 0 10px;
    font-weight: bold;
    text-align: center;
    font-size: 160%;
    margin-bottom: 60px; }
    @media screen and (min-width: 980px) {
      .index-image .side {
        display: table-cell;
        vertical-align: top;
        width: 15%;
        padding: 0 20px;
        font-size: 20px;
        margin-bottom: 70px; } }
    .index-image .side p {
      padding: 10px 0; }
    .index-image .side ul {
      list-style-type: none;
      border-left: 1px solid #999;
      display: table;
      width: 100%; }
      @media screen and (min-width: 980px) {
        .index-image .side ul {
          display: block;
          border-top: 1px solid #999;
          border-left: none; } }
      .index-image .side ul li {
        display: table-cell;
        width: 33%;
        border-right: 1px solid #999;
        padding: 0 10px; }
        @media screen and (min-width: 980px) {
          .index-image .side ul li {
            display: block;
            width: auto;
            padding: 20px 0;
            border-bottom: 1px solid #999;
            border-right: none; }
            .index-image .side ul li img {
              width: 100%; } }

.index-info {
  margin-bottom: 60px; }
  @media screen and (min-width: 980px) {
    .index-info {
      margin-bottom: 70px; } }
  .index-info:after {
    content: "";
    clear: both;
    display: block; }
  .index-info .info {
    margin-bottom: 60px; }
    @media screen and (min-width: 980px) {
      .index-info .info {
        margin-right: 50%;
        padding-right: 30px;
        margin-bottom: 0; } }
    .index-info .info h2 {
      color: #004e2e;
      margin-bottom: 10px; }
      @media screen and (min-width: 980px) {
        .index-info .info h2 {
          font-size: 20px; } }
    .index-info .info dl {
      border-bottom: 1px dashed #999; }
      .index-info .info dl dt,
      .index-info .info dl dd {
        padding: 10px 0;
        border-top: 1px dashed #999; }
      .index-info .info dl dt {
        float: left;
        width: 120px;
        color: #004e2e;
        font-weight: bold; }
      .index-info .info dl dd {
        margin-left: 120px; }
  .index-info .c_red {
    color: #a50319;
    font-weight: bold; }
  .index-info > div {
    margin-bottom: 60px; }
    @media screen and (min-width: 980px) {
      .index-info > div {
        float: right;
        width: 50%;
        margin-bottom: 0; } }

.index-about {
  margin: 0 10px 60px;
  padding: 40px 20px;
  background: #b9c684;
  border-radius: 30px;
  text-align: center;
  color: #004e2e;
  font-weight: bold;
  line-height: 140%; }
  @media screen and (min-width: 980px) {
    .index-about {
      padding: 40px;
      margin: 0 auto 70px;
      font-size: 20px; } }
  .index-about p {
    padding: 30px 0; }
    @media screen and (min-width: 980px) {
      .index-about p {
        text-align: center; } }
    .index-about p br {
      display: none; }
      @media screen and (min-width: 980px) {
        .index-about p br {
          display: inline; } }
  .index-about > p {
    border-bottom: 1px solid #004e2e;
    text-align: left; }
    @media screen and (min-width: 980px) {
      .index-about > p {
        text-align: center; } }
  .index-about ul {
    list-style-type: none;
    text-align: left;
    display: inline-block; }
    .index-about ul li:before {
      content: "●"; }

.index-item h2 {
  background: #004e2e;
  color: #fff;
  text-align: center;
  padding: 10px;
  margin-bottom: 30px;
  line-height: 120%; }
.index-item .index-item {
  margin-bottom: 60px;
  font-weight: bold; }
  @media screen and (min-width: 980px) {
    .index-item .index-item {
      margin-bottom: 70px; } }
  .index-item .index-item > div:after {
    display: block;
    clear: both;
    content: ""; }
  .index-item .index-item > div.about {
    margin-bottom: 30px; }
    @media screen and (min-width: 980px) {
      .index-item .index-item > div.about > div {
        float: left; } }
    .index-item .index-item > div.about > div.left {
      text-align: center;
      margin-bottom: 60px; }
      @media screen and (min-width: 980px) {
        .index-item .index-item > div.about > div.left {
          width: 52%;
          text-align: left;
          margin-bottom: 0; } }
      .index-item .index-item > div.about > div.left > span {
        color: #a50319;
        font-weight: bold; }
        @media screen and (min-width: 980px) {
          .index-item .index-item > div.about > div.left > span {
            font-size: 20px; } }
      .index-item .index-item > div.about > div.left .label {
        padding: 1px;
        border: 2px solid #a50319;
        background: #fff;
        color: #a50319;
        text-align: left;
        font-size: 80%; }
        @media screen and (max-width: 599px) {
          .index-item .index-item > div.about > div.left .label {
            text-align: center; } }
        @media screen and (min-width: 980px) {
          .index-item .index-item > div.about > div.left .label {
            font-size: 14px; } }
        .index-item .index-item > div.about > div.left .label > span {
          display: inline-block;
          padding: 15px;
          background: #a50319;
          color: #fff;
          margin-right: 20px;
          font-size: 160%; }
          @media screen and (max-width: 599px) {
            .index-item .index-item > div.about > div.left .label > span {
              display: block;
              margin-right: 0;
              padding: 10px;
              margin-bottom: 10px; } }
          @media screen and (min-width: 980px) {
            .index-item .index-item > div.about > div.left .label > span {
              font-size: 24px; } }
        .index-item .index-item > div.about > div.left .label > strong {
          font-size: 180%;
          /*vertical-align: sub;*/ }
          @media screen and (min-width: 980px) {
            .index-item .index-item > div.about > div.left .label > strong {
              font-size: 26px; } }
      .index-item .index-item > div.about > div.left > p {
        margin: 15px 0;
        text-align: left; }
        @media screen and (min-width: 980px) {
          .index-item .index-item > div.about > div.left > p {
            font-size: 15px; } }
      .index-item .index-item > div.about > div.left .price {
        position: relative;
        font-size: 160%;
        margin-bottom: 5px;
        display: inline-block; }
        @media screen and (min-width: 980px) {
          .index-item .index-item > div.about > div.left .price {
            font-size: 70px; } }
        .index-item .index-item > div.about > div.left .price .quant {
          font-size: 100%;
          display: inline-block;
          border-radius: 10px;
          color: #fff;
          background: #221815;
          padding: 10px; }
          @media screen and (min-width: 980px) {
            .index-item .index-item > div.about > div.left .price .quant {
              position: absolute;
              left: 90px;
              top: 0; } }
          @media screen and (min-width: 980px) {
            .index-item .index-item > div.about > div.left .price .quant {
              font-size: 30px; } }
        .index-item .index-item > div.about > div.left .price .num {
          font-size: 240%;
          line-height: 100%; }
          @media screen and (min-width: 980px) {
            .index-item .index-item > div.about > div.left .price .num {
              font-size: 140px; } }
      .index-item .index-item > div.about > div.left .note {
        text-align: center; }
        @media screen and (min-width: 980px) {
          .index-item .index-item > div.about > div.left .note {
            text-align: left;
            font-size: 20px; } }
    .index-item .index-item > div.about > div.right {
      text-align: center; }
      @media screen and (min-width: 980px) {
        .index-item .index-item > div.about > div.right {
          width: 48%;
          padding-left: 30px;
          font-size: 24px; } }
      .index-item .index-item > div.about > div.right img {
        width: 100%; }
      @media screen and (min-width: 980px) {
        .index-item .index-item > div.about > div.right span.num {
          font-size: 28px; } }
      .index-item .index-item > div.about > div.right span.note {
        font-size: 16px;
        display: block; }
  .index-item .index-item > div.flow {
    padding: 5px;
    border: 1px solid #221815; }
    .index-item .index-item > div.flow > span {
      display: block;
      background: #221815;
      color: #fff;
      padding: 10px;
      text-align: center; }
      @media screen and (min-width: 980px) {
        .index-item .index-item > div.flow > span {
          float: left;
          width: 44px;
          font-size: 20px;
          -webkit-writing-mode: vertical-rl;
          -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl; } }
    .index-item .index-item > div.flow > ol {
      list-style-type: none; }
      @media screen and (min-width: 980px) {
        .index-item .index-item > div.flow > ol {
          margin-left: 50px; } }
      .index-item .index-item > div.flow > ol li {
        padding: 10px;
        margin-bottom: 60px; }
        .index-item .index-item > div.flow > ol li:last-child {
          margin-bottom: 0; }
        @media screen and (min-width: 768px) and (max-width: 979px) {
          .index-item .index-item > div.flow > ol li {
            float: left;
            width: 33%;
            margin-bottom: 0; } }
        @media screen and (min-width: 980px) {
          .index-item .index-item > div.flow > ol li {
            float: left;
            width: 33%;
            margin-bottom: 0; } }
        .index-item .index-item > div.flow > ol li > span {
          display: block;
          color: #9a0014;
          font-weight: bold;
          margin-bottom: 5px;
          font-size: 140%; }
          @media screen and (min-width: 980px) {
            .index-item .index-item > div.flow > ol li > span {
              font-size: 22px; } }
        .index-item .index-item > div.flow > ol li img {
          margin-right: 5px;
          width: 100%; }
          @media screen and (min-width: 980px) {
            .index-item .index-item > div.flow > ol li img {
              width: 50%;
              float: left; } }
  .index-item .index-item.index-item-02 > div.about .left > span {
    color: #0c0857; }
  .index-item .index-item.index-item-02 > div.about .left .label {
    border: 2px solid #0c0857;
    color: #0c0857; }
    .index-item .index-item.index-item-02 > div.about .left .label > span {
      background: #0c0857; }
  .index-item .index-item.index-item-02 > div.about .left .price {
    font-size: 160%; }
    @media screen and (max-width: 599px) {
      .index-item .index-item.index-item-02 > div.about .left .price {
        margin-bottom: 30px; } }
    @media screen and (min-width: 980px) {
      .index-item .index-item.index-item-02 > div.about .left .price {
        font-size: 45px; } }
    .index-item .index-item.index-item-02 > div.about .left .price .quant {
      position: static;
      left: auto;
      border-radius: 20px;
      vertical-align: super; }
      @media screen and (max-width: 599px) {
        .index-item .index-item.index-item-02 > div.about .left .price .quant {
          display: block; } }
      @media screen and (min-width: 980px) {
        .index-item .index-item.index-item-02 > div.about .left .price .quant {
          font-size: 22px; } }
    .index-item .index-item.index-item-02 > div.about .left .price .num {
      font-size: 240%; }
      @media screen and (min-width: 980px) {
        .index-item .index-item.index-item-02 > div.about .left .price .num {
          font-size: 80px; } }
  @media screen and (min-width: 980px) {
    .index-item .index-item.index-item-02 > .flow > span {
      height: 210px; } }
  .index-item .index-item.index-item-02 > .flow li {
    text-align: center; }
    @media screen and (min-width: 768px) and (max-width: 979px) {
      .index-item .index-item.index-item-02 > .flow li {
        width: 25%;
        text-align: left; } }
    @media screen and (min-width: 980px) {
      .index-item .index-item.index-item-02 > .flow li {
        width: 25%;
        text-align: left; } }
    .index-item .index-item.index-item-02 > .flow li img {
      float: none;
      margin: 0 auto 5px;
      width: auto;
      max-height: 80px;
      display: block; }

.index-merit {
  margin-bottom: 60px; }
  @media screen and (min-width: 980px) {
    .index-merit {
      margin-bottom: 70px; } }
  .index-merit h2 {
    position: relative;
    text-align: center;
    color: #004e2e;
    line-height: 140%;
    margin-bottom: 20px; }
    @media screen and (min-width: 980px) {
      .index-merit h2 {
        font-size: 32px; } }
    .index-merit h2:before, .index-merit h2:after {
      position: absolute;
      display: block;
      content: "";
      width: 50px;
      height: 80px;
      background-size: auto 80px;
      background-repeat: no-repeat;
      background-position: left top; }
      @media screen and (min-width: 980px) {
        .index-merit h2:before, .index-merit h2:after {
          height: 90px;
          background-size: auto 90px; } }
    .index-merit h2:before {
      left: 110px;
      background-image: url(../image/megahonmark1.png); }
      @media screen and (max-width: 599px) {
        .index-merit h2:before {
          display: none; } }
      @media screen and (min-width: 600px) and (max-width: 767px) {
        .index-merit h2:before {
          left: 20px; } }
      @media screen and (min-width: 768px) and (max-width: 979px) {
        .index-merit h2:before {
          left: 80px; } }
    .index-merit h2:after {
      top: 0;
      right: 110px;
      background-image: url(../image/megahonmark2.png); }
      @media screen and (max-width: 599px) {
        .index-merit h2:after {
          display: none; } }
      @media screen and (min-width: 600px) and (max-width: 767px) {
        .index-merit h2:after {
          right: 10px; } }
      @media screen and (min-width: 768px) and (max-width: 979px) {
        .index-merit h2:after {
          right: 80px; } }
  .index-merit ol {
    padding: 40px 20px;
    border: 1px solid #221815;
    list-style-type: none;
    font-weight: bold;
    line-height: 150%; }
    @media screen and (min-width: 980px) {
      .index-merit ol {
        padding: 50px 40px; } }
    .index-merit ol li {
      margin-bottom: 50px; }
      .index-merit ol li:last-child {
        margin-bottom: 0; }
      .index-merit ol li img {
        float: left;
        max-width: 50px; }
        @media screen and (max-width: 599px) {
          .index-merit ol li img {
            max-width: 30px; } }
      .index-merit ol li div,
      .index-merit ol li p {
        margin-left: 80px; }
        @media screen and (max-width: 599px) {
          .index-merit ol li div,
          .index-merit ol li p {
            margin-left: 50px; } }
      .index-merit ol li div {
        margin-bottom: 10px;
        position: relative;
        font-size: 140%;
        line-height: 120%; }
        @media screen and (min-width: 980px) {
          .index-merit ol li div {
            font-size: 21px; } }
        .index-merit ol li div strong {
          display: inline;
          background: #ecdd7b; }
        .index-merit ol li div span {
          font-size: 80%; }
          @media screen and (min-width: 980px) {
            .index-merit ol li div span {
              position: absolute;
              right: 180px;
              top: 1.8em;
              font-size: 14px; } }

.index-access {
  margin-bottom: 60px; }
  @media screen and (min-width: 980px) {
    .index-access {
      margin-bottom: 70px; } }
  .index-access h2 {
    position: relative;
    text-align: center;
    color: #004e2e;
    line-height: 140%;
    margin-bottom: 20px; }
    @media screen and (min-width: 980px) {
      .index-access h2 {
        font-size: 32px; } }
    .index-access h2:before, .index-access h2:after {
      position: absolute;
      display: block;
      content: "";
      width: 50px;
      height: 80px;
      background-size: auto 80px;
      background-repeat: no-repeat;
      background-position: left top; }
      @media screen and (min-width: 980px) {
        .index-access h2:before, .index-access h2:after {
          height: 90px;
          background-size: auto 90px; } }
    .index-access h2:before {
      left: 260px;
      background-image: url(../image/megahonmark1.png); }
      @media screen and (max-width: 599px) {
        .index-access h2:before {
          display: none; } }
      @media screen and (min-width: 600px) and (max-width: 767px) {
        .index-access h2:before {
          left: 110px; } }
      @media screen and (min-width: 768px) and (max-width: 979px) {
        .index-access h2:before {
          left: 200px; } }
    .index-access h2:after {
      top: 0;
      right: 260px;
      background-image: url(../image/megahonmark2.png); }
      @media screen and (max-width: 599px) {
        .index-access h2:after {
          display: none; } }
      @media screen and (min-width: 600px) and (max-width: 767px) {
        .index-access h2:after {
          right: 110px; } }
      @media screen and (min-width: 768px) and (max-width: 979px) {
        .index-access h2:after {
          right: 200px; } }
  .index-access > div > img {
    margin-bottom: 60px; }
    @media screen and (min-width: 980px) {
      .index-access > div > img {
        float: left;
        width: 55%;
        margin-bottom: 0; } }
  .index-access > div > div {
    font-weight: bold; }
    .index-access > .detail{
      font-weight: bold;
      width: 400px;
      margin:10px auto 40px auto;
    }
    @media screen and (max-width:768px){
      .index-access > .detail{
        width: auto;
      }
    }
    @media screen and (min-width: 980px) {
      .index-access > div > div {
        margin-left: 55%;
        padding-left: 30px; } }
    @media screen and (min-width: 768px) and (max-width: 979px) {
      .index-access > .detail {
        float: right;
        width: 100%;
        padding: 0 20px; } }
    .index-access > .detail > dl {
      margin-bottom: 10px;
      border-top: 1px dashed #999; }
      .index-access > .detail > dl dt {
        padding: 10px 0 0; }
        @media screen and (min-width: 600px) and (max-width: 767px) {
          .index-access > .detail > dl dt {
            float: left;
            width: 270px;
            padding: 10px 0;
            border-bottom: 1px dashed #999; } }
        @media screen and (min-width: 768px) and (max-width: 979px) {
          .index-access > .detail > dl dt {
            float: none;
            width: auto;
            border-bottom: none;
            padding-bottom: 0; } }
        @media screen and (min-width: 980px) {
          .index-access > .detail > dl dt {
            float: left;
            width: 270px;
            padding: 10px 0;
            border-bottom: 1px dashed #999; } }
      .index-access > .detail > dl dd {
        padding: 0 0 10px;
        color: #004e2e;
        border-bottom: 1px dashed #999;
        font-size: 140%; }
        @media screen and (min-width: 600px) and (max-width: 767px) {
          .index-access > .detail > dl dd {
            margin-left: 270px;
            font-size: 22px;
            padding: 10px 0; } }
        @media screen and (min-width: 768px) and (max-width: 979px) {
          .index-access > .detail > dl dd {
            margin-left: 0;
            padding: 10px 0;
            padding-top: 0; } }
        @media screen and (min-width: 980px) {
          .index-access > .detail > dl dd {
            margin-left: 270px;
            font-size: 22px;
            padding: 10px 0; } }
    .index-access > .detail > p {
      text-align: center;
      color: #f00;}
      @media screen and (min-width: 980px) {
        .index-access > .detail > p {
          margin-bottom: 15px;
          font-size: 22px; } }
    @media screen and (min-width: 768px) and (max-width: 979px) {
      .index-access > div > div > .zoom {
        margin-right: 35%; } }
    .index-access > div > div > .zoom img {
      vertical-align: bottom; }
    @media screen and (min-width: 980px) {
      .index-access > div > div > .zoom span {
        font-size: 12px; } }
        .index-access > div > div > .zoom span.txt-red{
          color: #f00;
          display: block;
          font-size: 16px;
        }

.index-flow {
  margin-bottom: 70px; 
  clear: both;
  padding-top: 70px;}
  .index-flow h2 {
    background: #b9c684;
    color: #004e2e;
    text-align: center;
    padding: 10px; }
  .index-flow ol {
    list-style-type: none; }
    .index-flow ol li {
      padding: 30px 0;
      border-bottom: 1px solid #b9baba;
      font-weight: bold;
      font-size: 90%; }
      @media screen and (min-width: 980px) {
        .index-flow ol li {
          font-size: 15px; } }
      .index-flow ol li:after {
        display: block;
        content: "";
        clear: left; }
      .index-flow ol li > img {
        display: none; }
        @media screen and (min-width: 768px) and (max-width: 979px) {
          .index-flow ol li > img {
            display: inline;
            float: left;
            width: 240px; } }
        @media screen and (min-width: 980px) {
          .index-flow ol li > img {
            display: inline;
            float: left;
            width: 240px; } }
      .index-flow ol li > span,
      .index-flow ol li p {
        display: block; }
        @media screen and (min-width: 768px) and (max-width: 979px) {
          .index-flow ol li > span,
          .index-flow ol li p {
            margin-left: 260px; } }
        @media screen and (min-width: 980px) {
          .index-flow ol li > span,
          .index-flow ol li p {
            margin-left: 260px; } }
      .index-flow ol li > span {
        color: #032f4b;
        margin-bottom: 10px;
        font-size: 140%; }
        @media screen and (min-width: 980px) {
          .index-flow ol li > span {
            font-size: 24px; } }
        .index-flow ol li > span img {
          width: 50px;
          vertical-align: middle; }
          @media screen and (max-width: 599px) {
            .index-flow ol li > span img {
              width: 30px; } }

.index-contact {
  border: 4px solid #004e2e;
  border-radius: 30px;
  padding: 30px 20px;
  margin: 0 10px 60px; }
  @media screen and (min-width: 980px) {
    .index-contact {
      margin: 0 auto 70px;
      padding: 40px; } }
  .index-contact h2 {
    color: #1a306e;
    text-align: center;
    line-height: 100%;
    margin-bottom: 30px;
    font-size: 200%; }
    @media screen and (min-width: 980px) {
      .index-contact h2 {
        font-size: 48px; } }
  .index-contact > div {
    text-align: center; }
    @media screen and (min-width: 980px) {
      .index-contact > div img {
        float: left;
        width: 30%; } }
    .index-contact > div > div {
      font-weight: bold; }
      @media screen and (min-width: 980px) {
        .index-contact > div > div {
          margin-left: 30%;
          padding: 0 20px; } }
      .index-contact > div > div > p {
        color: #575554;
        line-height: 140%;
        margin-bottom: 10px;
        font-size: 130%; }
        @media screen and (min-width: 980px) {
          .index-contact > div > div > p {
            font-size: 20px; } }
      .index-contact > div > div > span {
        display: block;
        text-align: center;
        background-color: #ecdd7b;
        padding: 10px;
        border-radius: 20px;
        font-size: 120%;
        margin-bottom: 10px; }
        @media screen and (min-width: 980px) {
          .index-contact > div > div > span {
            font-size: 20px; } }
      @media screen and (min-width: 980px) {
        .index-contact > div > div > div {
          text-align: left; } }
      .index-contact > div > div > div ol {
        margin-top: 5px;
        list-style-type: none; }
        .index-contact > div > div > div ol:after {
          clear: left;
          content: "";
          display: block; }
        .index-contact > div > div > div ol li {
          position: relative;
          background: #005124;
          color: #fff;
          text-align: center;
          display: block;
          text-align: center;
          padding: 10px 0;
          border-radius: 10px;
          font-size: 120%;
          margin-bottom: 20px; }
          .index-contact > div > div > div ol li:last-child {
            margin-bottom: 0; }
            .index-contact > div > div > div ol li:last-child:after {
              display: none; }
          .index-contact > div > div > div ol li:after {
            position: absolute;
            bottom: -15px;
            left: 47%;
            display: block;
            width: 50px;
            height: 10px;
            content: "";
            background-image: url(../image/index-contact-arrow-bottom.png);
            background-repeat: no-repeat;
            background-size: 20px auto; }
          @media screen and (min-width: 980px) {
            .index-contact > div > div > div ol li {
              float: left;
              width: 95px;
              margin-right: 20px;
              margin-bottom: 0;
              font-size: 20px; }
              .index-contact > div > div > div ol li:last-child {
                margin-right: 0; }
                .index-contact > div > div > div ol li:last-child:after {
                  display: none; }
              .index-contact > div > div > div ol li:after {
                top: 23px;
                bottom: auto;
                left: auto;
                right: -15px;
                width: 10px;
                height: 50px;
                content: "";
                background-image: url(../image/index-contact-arrow.png);
                background-size: auto 20px; } }
          .index-contact > div > div > div ol li br {
            display: none; }
            @media screen and (min-width: 980px) {
              .index-contact > div > div > div ol li br {
                display: inline; } }

/* pure-drawer */
.pure-container .pure-drawer > div {
  padding: 20px 10px 0;
  color: #fff;
  height: 60px; }
  @media screen and (min-width: 600px) and (max-width: 767px) {
    .pure-container .pure-drawer > div {
      height: 70px;
      padding: 25px 10px 0; } }
  @media screen and (min-width: 768px) and (max-width: 979px) {
    .pure-container .pure-drawer > div {
      height: 107px;
      padding: 40px 10px 0; } }
.pure-container .pure-drawer ul {
  list-style-type: none;
  background: #fff; }
  .pure-container .pure-drawer ul li {
    border-bottom: 1px solid #004e2e; }
    .pure-container .pure-drawer ul li a {
      display: block;
      padding: 10px;
      color: #004e2e; }
@media screen and (max-width: 599px) {
  .pure-container .pure-toggle-label {
    height: 35px; }
  .pure-container .pure-toggle-label .pure-toggle-icon:before {
    transform: translate3d(-50%, -15px, 0);
    -webkit-transform: translate3d(-50%, -15px, 0); }
  .pure-container .pure-toggle-label .pure-toggle-icon:after {
    transform: translate3d(-50%, 8px, 0);
    -webkit-transform: translate3d(-50%, 10px, 0); } }
@media screen and (min-width: 768px) and (max-width: 979px) {
  .pure-container .pure-toggle-label {
    height: 50px;
    top: 25px; }
  .pure-container .pure-toggle-label .pure-toggle-icon:before {
    transform: translate3d(-50%, -15px, 0);
    -webkit-transform: translate3d(-50%, -20px, 0); }
  .pure-container .pure-toggle-label .pure-toggle-icon:after {
    transform: translate3d(-50%, 8px, 0);
    -webkit-transform: translate3d(-50%, 14px, 0); } }
@media screen and (min-width: 980px) {
  .pure-container {
    display: none; } }