@charset "UTF-8";
@import url("global.css");
#contents {
  overflow: hidden; }

.introduction {
  position: relative;
  margin-bottom: 120px; }
  .introduction .f-inner {
    display: flex;
    align-items: center; }
    .introduction .f-inner::after {
      content: "";
      height: 500px;
      width: 0;
      display: block; }
  .introduction .main {
    max-width: calc(50% + 40px); }
    .introduction .main .catch {
      font-size: min(28px,2.2vw);
      font-family: 'Zen Old Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 500;
      margin-bottom: 50px; }
    .introduction .main .text p + p {
      margin-top: 20px; }
  .introduction .image {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: calc( 50% - 80px ); }

.section {
  position: relative; }
  .section .sectitle {
    font-family: 'Zen Old Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 500;
    font-size: min(32px,2.8vw);
    line-height: 1.6;
    margin-bottom: 40px; }
  .section .f-inner {
    display: flex;
    align-items: center; }
    .section .f-inner::after {
      content: "";
      height: 560px;
      width: 0;
      display: block; }
  .section .main {
    width: 50%; }
  .section .photo {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc( 50% - 80px ); }
  .section .text p + p {
    margin-top: 1em; }
  .section:nth-of-type(odd) .photo {
    right: 0; }
  .section:nth-of-type(even) .main {
    margin-left: auto; }
  .section:nth-of-type(even) .photo {
    left: 0; }

.menu {
  margin: 70px 0 100px;
  background-color: #f3f3f3;
  padding: 60px 0; }
  .menu ul {
    margin: 0 -12px;
    display: flex;
    flex-wrap: wrap; }
    .menu ul li {
      width: 20%;
      box-sizing: border-box;
      padding: 0 12px; }
      .menu ul li .image {
        height: 0;
        padding-top: 57%;
        position: relative;
        margin-bottom: 5px; }
        .menu ul li .image img {
          position: absolute;
          top: 0;
          left: 0; }
      .menu ul li .text {
        text-align: center; }

.flow {
  background-color: #f3f3f3;
  margin-bottom: 1px;
  padding: 80px 0;
  margin-top: 80px; }
  .flow .wrapper {
    text-align: center; }
  .flow ol {
    display: flex;
    margin: 0 -6px;
    padding-top: 40px; }
    .flow ol li {
      width: 14.2857142857%;
      box-sizing: border-box;
      padding: 0 6px;
      position: relative; }
      .flow ol li .step {
        position: absolute;
        top: -38px;
        left: 0;
        right: 0; }
        .flow ol li .step span {
          display: block; }
        .flow ol li .step span:not([class]) {
          background-color: #C5A05A;
          color: #fff;
          width: 80px;
          font-size: 18px;
          font-family: "EB Garamond", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
          border-radius: 3px;
          line-height: 24px;
          margin: 0 auto -5px; }
        .flow ol li .step .number {
          font-size: 48px;
          font-family: "EB Garamond", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
          line-height: 1;
          color: #C5A05A; }
      .flow ol li .text {
        background-color: #fff;
        height: 100%;
        box-sizing: border-box;
        padding: 40px 5px 25px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5; }
  .flow .attention {
    margin-top: 15px;
    white-space: nowrap;
    font-size: 85%; }

.works {
  background-color: #EEEBE5;
  padding: 80px 0 40px;
  margin-bottom: 100px; }
  .works .sectitle {
    text-align: center;
    line-height: 1.6;
    margin-bottom: 60px; }
    .works .sectitle span {
      display: block; }
    .works .sectitle .en {
      font-size: 38px;
      font-family: "EB Garamond", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      letter-spacing: .1em; }
    .works .sectitle .jp {
      font-family: 'Zen Old Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 500;
      font-size: 18px; }
  .works .post {
    background-color: #fff;
    padding: 60px 60px 70px;
    margin: 40px 0;
    border-radius: 5px;
    text-align: center; }
    .works .post .textblock {
      background-color: rgba(238, 235, 229, 0.4);
      border-radius: 4px;
      padding: 40px 20px;
      margin-top: 20px; }
    .works .post .posttitle {
      font-family: 'Zen Old Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 500;
      font-size: 21px;
      margin-bottom: 30px; }
    .works .post .text {
      display: inline-block;
      font-size: 14px;
      text-align: left; }
  .works .carousel li .imagebox {
    display: flex;
    align-items: center;
    justify-content: center; }
    .works .carousel li .imagebox figure {
      margin: 0 3%; }
      .works .carousel li .imagebox figure figcaption {
        text-align: right;
        padding-right: 5px;
        font-family: "EB Garamond", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-size: 20px; }
      .works .carousel li .imagebox figure span {
        display: block; }
    .works .carousel li .imagebox .before {
      width: 30%; }
      .works .carousel li .imagebox .before span {
        height: 260px; }
      .works .carousel li .imagebox .before figcaption {
        color: #8f8f8f; }
    .works .carousel li .imagebox .after {
      width: 70%; }
      .works .carousel li .imagebox .after span {
        height: 500px; }
      .works .carousel li .imagebox .after figcaption {
        color: #C5A05A; }
    .works .carousel li .imagebox .full {
      width: 100%; }
      .works .carousel li .imagebox .full figcaption {
        text-align: center; }

.slick-next {
  right: -20px; }

.slick-prev {
  left: -20px; }

.slick-dots {
  margin-top: 10px;
  text-align: center; }
  .slick-dots li button::before {
    background-color: #e7e7e7; }
  .slick-dots li.slick-active button:before {
    background-color: #C5A05A; }

.tel_block .sectitle {
  font-family: 'Zen Old Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500;
  margin-bottom: 40px;
  font-size: 26px;
  text-align: center; }
  .tel_block .sectitle br {
    display: none; }
.tel_block #contactbutton {
  border: #8f8f8f 1px solid;
  padding: 20px 0 50px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  font-family: "Zen Kaku Gothic Antique", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  background-color: #fff;
  width: 100%;
  border-radius: 4px;
  margin-top: 30px;
  background: url("../reform/images/mail.png") no-repeat center 70%;
  background-size: 30px auto; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1300px)

------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .introduction {
    margin-bottom: 60px; }
    .introduction .f-inner {
      display: block; }
      .introduction .f-inner::after {
        display: none; }
    .introduction .main {
      max-width: none; }
      .introduction .main .catch {
        font-size: min(26px,4vw);
        margin-bottom: 40px; }
    .introduction .image {
      position: static;
      width: auto;
      margin-top: 50px; }

  .section .sectitle {
    font-size: min(24px,2.8vw);
    margin-bottom: 30px; }
  .section .f-inner::after {
    height: auto; }
  .section .main {
    padding: 70px 0; }
  .section .photo {
    width: 42%; }

  .menu {
    margin: 60px 0;
    padding: 40px 0; }
    .menu ul {
      margin: 0 -4vw; }
      .menu ul li {
        padding: 0 1vw; }
        .menu ul li .image {
          padding-top: 66%; }
        .menu ul li .text {
          font-size: 14px;
          font-weight: 700;
          line-height: 1.4; }

  .flow {
    padding: 60px 0;
    margin-top: 60px; }
    .flow ol {
      flex-wrap: wrap;
      justify-content: center;
      margin: 0 -4vw;
      padding-top: 0; }
      .flow ol li {
        width: 25%;
        padding: 0 1.5vw;
        margin-top: 50px; }
        .flow ol li .text {
          padding: 35px 10px 25px; }

  .works {
    padding: 60px 0 30px;
    margin-bottom: 80px; }
    .works .sectitle {
      margin-bottom: 40px; }
      .works .sectitle .en {
        font-size: 32px; }
      .works .sectitle .jp {
        font-size: 16px; }
    .works .post {
      padding: 40px 5vw; }
      .works .post .textblock {
        padding: 40px 5vw; }
      .works .post .posttitle {
        font-size: 20px; }
    .works .carousel li .imagebox figure figcaption {
      font-size: 18px; }
    .works .carousel li .imagebox .before span {
      height: 17vw; }
    .works .carousel li .imagebox .after span {
      height: 40vw; }

  .tel_block {
    margin-bottom: 10px; }
    .tel_block .sectitle {
      font-size: 21px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .introduction {
    margin-bottom: 50px; }
    .introduction .main .catch {
      margin-bottom: 30px; }
    .introduction .main .text {
      font-size: 13px; }
      .introduction .main .text br {
        display: none; }
      .introduction .main .text p + p {
        margin-top: 1em; }
    .introduction .image {
      margin-top: 40px; }

  .section .sectitle {
    line-height: 1.5;
    font-size: min(26px,5vw); }
  .section .f-inner {
    display: block; }
    .section .f-inner::after {
      display: none; }
  .section .main {
    width: auto;
    padding: 40px 0; }
  .section .photo {
    position: static;
    width: auto;
    aspect-ratio: 10 / 6;
    margin: 0 5vw; }
  .section .text {
    font-size: 13px; }

  .menu {
    margin: 40px 0;
    padding: 40px 0 20px; }
    .menu ul {
      margin: 0 -2.5vw;
      justify-content: center; }
      .menu ul li {
        width: 50%;
        padding: 0 2.5vw;
        margin-bottom: 15px; }

  .flow {
    padding: 40px 0;
    margin-top: 20px; }
    .flow ol {
      display: block;
      margin: 60px 0 0; }
      .flow ol li {
        width: auto;
        padding: 0; }
        .flow ol li .step {
          top: -35px; }
          .flow ol li .step .number {
            font-size: 40px; }
        .flow ol li .text {
          padding: 25px 10px 20px;
          display: block;
          font-size: 14px; }

  .works {
    padding: 40px 0 30px;
    margin-bottom: 50px; }
    .works .sectitle {
      margin-bottom: 30px; }
      .works .sectitle .en {
        font-size: 28px; }
    .works .post {
      padding: 30px 5vw;
      margin: 30px 0; }
      .works .post .textblock {
        padding: 30px 5vw 25px;
        margin-top: 10px; }
      .works .post .posttitle {
        font-size: 16px;
        margin-bottom: 20px; }
      .works .post .text {
        font-size: 12px; }
        .works .post .text br {
          display: none; }
    .works .carousel li .imagebox figure {
      margin: 0 2%; }
      .works .carousel li .imagebox figure figcaption {
        font-size: 16px; }
    .works .carousel li .imagebox .before span {
      height: 20vw; }
    .works .carousel li .imagebox .before figcaption {
      font-size: 13px; }
    .works .carousel li .imagebox .after span {
      height: 40vw; }

  .slick-next {
    right: -35px; }

  .slick-prev {
    left: -35px; }

  .slick-dots {
    margin-top: 5px; }

  .tel_block {
    margin-bottom: 1px; }
    .tel_block .sectitle {
      margin-bottom: 30px;
      font-size: 18px; }
      .tel_block .sectitle br {
        display: inline; }
    .tel_block #contactbutton {
      padding: 15px 0 45px;
      font-size: 15px;
      margin-top: 20px; } }