@charset "UTF-8";
/* Welcome to Compass. Use this file to define print styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
body {
  margin: 0;
  padding: 0;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1.4em; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

p, ul, h2 {
  margin: 0; }

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

header {
  height: 100%;
  width: 100%;
  padding: .5em 0 1em; }
  header h1 {
    width: 50%;
    max-width: 450px;
    margin: 0 auto; }

.max {
  max-width: 1000px;
  margin: 0 auto; }

.wrap0 {
  background: #fff; }

.wrap1 {
  background: #FBEDF0; }

.wrap2 {
  background: #FFFBE4; }

.wrap3 {
  background: #fff; }

.wrap4 {
  background: #E3EDF7; }

.wrap5 .p5 {
  padding: 0 2em; }

.menu {
  padding: 2em 2em; }
  .menu .m_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-top: 1px #000 dashed;
    border-bottom: 1px #000 dashed;
    padding: 2em 0; }
    .menu .m_box .left {
      width: 35%;
      margin-right: 1em;
      background-image: url(../images/menu.jpg);
      background-size: cover;
      background-position: center center; }
    .menu .m_box .right {
      width: 62.5%; }
      .menu .m_box .right h2 {
        font-size: 1.2em;
        font-weight: 900;
        border-bottom: solid #000 2px;
        padding-bottom: 0.3em; }
      .menu .m_box .right .m_txt {
        font-size: .95em;
        font-weight: 600; }
        .menu .m_box .right .m_txt .top_ul {
          display: flex;
          flex-wrap: wrap;
          padding: 1em 0 .5em 1em; }
          .menu .m_box .right .m_txt .top_ul .top_li {
            width: 50%; }
        .menu .m_box .right .m_txt .txt_r {
          text-align: right;
          padding: 0 3em 1em 0; }
        .menu .m_box .right .m_txt .bottom_ul {
          padding-left: 1em; }

.am_btn {
  padding: 2em 2em; }
  .am_btn .btn_inner {
    width: 85%;
    margin: 0 auto;
    max-width: 600px; }
    .am_btn .btn_inner a:hover {
      opacity: .8; }

.story {
  padding: 1em 2em; }
  .story h2 {
    margin: 0 0 -5% 2%; }
    .story h2 img {
      width: 25%; }
  .story .s_box {
    background: #EDEBE9;
    border-radius: 10px;
    padding: 3em 3.5em;
    line-height: 2.5; }
    .story .s_box .txt {
      font-size: 0.9em;
      font-weight: 600; }

@media (max-width: 1000px) {
  html {
    font-size: calc(100vw / 32); }

  .menu {
    padding: 1.5em 2em; }
    .menu .m_box {
      display: flex;
      width: 100%;
      border-top: 1px #000 dashed;
      border-bottom: 1px #000 dashed;
      padding: 2em 0; }
      .menu .m_box .left {
        width: 35%;
        margin-right: 1.5em; }
      .menu .m_box .right {
        width: 62.5%; }
        .menu .m_box .right h2 {
          font-size: .9rem;
          font-weight: 900;
          border-bottom: solid #000 2px;
          padding-bottom: 0.3em; }
        .menu .m_box .right .m_txt {
          font-size: .5rem;
          font-weight: 600; }
          .menu .m_box .right .m_txt .top_ul {
            display: block;
            flex-wrap: wrap;
            padding: 1em 0 .5em 1em; }
            .menu .m_box .right .m_txt .top_ul .top_li {
              width: 100%; }
          .menu .m_box .right .m_txt .txt_r {
            text-align: left;
            padding: 0 3em 1em 0; }
          .menu .m_box .right .m_txt .bottom_ul {
            padding-left: 1em; }

  .story .s_box {
    padding: 1.5em 2em; }
    .story .s_box .txt {
      font-size: .6rem; } }
@media (max-width: 480px) {
  html {
    font-size: 56.25%; } }