/* media query */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
@import url(https://fonts.googleapis.com/css?family=Marcellus);
#wrapper {
  margin: 0; }

.main {
  padding: 50px 100px;
  text-align: center;
  background: url("../../common/images/line_01.png") repeat;
  /*
  a {
    &:hover {
      opacity: 1;
    }
    img {
      &:hover {
        opacity: 1;
      }
    }
  }
  */ }
  @media all and (max-width: 1100px) {
    .main {
      padding: 50px; } }
  @media all and (max-width: 668px) {
    .main {
      padding: 25px; } }
  .main h1 img {
    margin: 0 auto; }
  .main h2 img {
    margin: 0 auto; }
  .main nav ul {
    display: flex;
    justify-content: center;
    align-items: flex-end; }
    @media all and (max-width: 668px) {
      .main nav ul {
        flex-wrap: wrap; } }
    .main nav ul li {
      width: 20%;
      margin: 5px; }
      .main nav ul li img {
        width: 100%;
        height: auto; }

.osusume {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px 100px; }
  @media all and (max-width: 1100px) {
    .osusume {
      padding: 50px; } }
  @media all and (max-width: 668px) {
    .osusume {
      padding: 25px; } }

.merit .area_merit_01 {
  width: 100%;
  padding: 50px 100px;
  background: url("../../common/images/line_01.png") repeat; }
  @media all and (max-width: 1100px) {
    .merit .area_merit_01 {
      padding: 50px; } }
  @media all and (max-width: 668px) {
    .merit .area_merit_01 {
      padding: 25px; } }
  .merit .area_merit_01 p {
    max-width: 1500px;
    margin: 0 auto; }
.merit .area_merit_02 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px 100px; }
  @media all and (max-width: 1100px) {
    .merit .area_merit_02 {
      padding: 50px; } }
  @media all and (max-width: 668px) {
    .merit .area_merit_02 {
      padding: 25px; } }
.merit .area_merit_03 {
  width: 100%;
  padding: 50px 100px;
  background: url("../../common/images/line_02.png") repeat; }
  @media all and (max-width: 1100px) {
    .merit .area_merit_03 {
      padding: 50px; } }
  @media all and (max-width: 668px) {
    .merit .area_merit_03 {
      padding: 25px; } }
  .merit .area_merit_03 p {
    max-width: 1500px;
    margin: 0 auto; }

.flow {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px 100px; }
  @media all and (max-width: 1100px) {
    .flow {
      padding: 50px; } }
  @media all and (max-width: 668px) {
    .flow {
      padding: 25px; } }
  .flow .area_flow dl {
    padding: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #FFF4A2; }
    @media all and (max-width: 960px) {
      .flow .area_flow dl {
        padding: 25px; } }
    .flow .area_flow dl dt {
      width: 140px; }
      @media all and (max-width: 960px) {
        .flow .area_flow dl dt {
          width: 140px;
          margin: 0 auto 20px;
          text-align: center; } }
    .flow .area_flow dl dd {
      width: calc(100% - 240px);
      padding: 0 50px;
      color: #801A26;
      font-size: 2rem;
      font-weight: bold;
      line-height: 2em; }
      @media all and (max-width: 960px) {
        .flow .area_flow dl dd {
          width: calc(100% - 0px);
          padding: 0px;
          font-size: 1.5rem;
          line-height: 1.5em; } }
  @media all and (max-width: 960px) and (max-width: 668px) {
    .flow .area_flow dl dd {
      font-size: 1.25rem; } }

      .flow .area_flow dl dd p {
        line-height: 1.5em; }
      .flow .area_flow dl dd span {
        font-size: 1.5rem;
        font-weight: normal;
        line-height: 1.5em; }
        @media all and (max-width: 668px) {
          .flow .area_flow dl dd span {
            font-size: 1.25rem; } }
      .flow .area_flow dl dd img {
        width: 50%;
        height: auto; }
        @media all and (max-width: 960px) {
          .flow .area_flow dl dd img {
            width: 100%;
            height: auto; } }
        .flow .area_flow dl dd img.w100 {
          width: 100%;
          height: auto; }
      .flow .area_flow dl dd ul {
        padding: 0 10px;
        display: flex; }
        @media all and (max-width: 668px) {
          .flow .area_flow dl dd ul {
            display: block; } }
        .flow .area_flow dl dd ul.zoom li {
          width: auto;
          font-size: 1.5rem;
          line-height: 1.5em; }
          @media all and (max-width: 668px) {
            .flow .area_flow dl dd ul.zoom li {
              font-size: 1.25rem; } }
          .flow .area_flow dl dd ul.zoom li img {
            width: 80%;
            height: auto; }
            @media all and (max-width: 960px) {
              .flow .area_flow dl dd ul.zoom li img {
                width: 120px;
                height: auto; } }
        .flow .area_flow dl dd ul li {
          width: 33%;
          padding: 10px;
          font-size: 1.0rem;
          line-height: 1.25em; }
          @media all and (max-width: 668px) {
            .flow .area_flow dl dd ul li {
              width: auto;
              padding: 10px 0; } }
          .flow .area_flow dl dd ul li b {
            font-size: 1.0rem; }
          .flow .area_flow dl dd ul li img {
            width: 100%;
            height: auto;
            margin: 10px 0 0; }
          .flow .area_flow dl dd ul li span.img {
            text-align: center;
            display: block; }
            .flow .area_flow dl dd ul li span.img img {
              width: auto;
              height: 100px; }
  .flow .area_flow b {
    padding: 10px;
    font-size: 1.5rem;
    line-height: 1.5em;
    text-align: center;
    border: 1px solid #801A26;
    border-radius: 10px;
    background: #FFFFFF;
    display: block; }
    @media all and (max-width: 668px) {
      .flow .area_flow b {
        font-size: 1.25rem;
        padding: 10px 5px; } }
  .flow .area_flow .mt {
    margin-top: 20px; }
  .flow .area_flow .dl {
    margin: 15px 15px 0;
    padding: 10px;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1.5em;
    background: #821e28; }
    @media all and (max-width: 668px) {
      .flow .area_flow .dl {
        margin: 15px 5px 0; } }
  .flow .area_flow .img {
    text-align: center; }

.trial {
  width: 100%;
  padding: 50px 100px;
  background: url("../../common/images/line_01.png") repeat; }
  @media all and (max-width: 1100px) {
    .trial {
      padding: 50px; } }
  @media all and (max-width: 668px) {
    .trial {
      padding: 25px; } }
  .trial .area_trial img {
    margin: 0 auto; }