@charset "UTF-8";
@import url(common.css);
.eyecatch--howto {
  background-image: url(../img/howto/img-eyecatch.jpg); }

.howto {
  padding: 80px 5%; }
  .howto__header {
    font-family: '游明朝体', YuMincho, '游明朝', 'Yu Mincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN W3', HiraMinProN-W3, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'HGS明朝E', serif;
    font-size: 3.2rem;
    margin-bottom: 50px; }
  .howto-chart {
    border: 2px solid #1B2B47;
    border-radius: 30px;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 50px; }
    .howto-chart.js-action {
      -webkit-animation: effect-fade-in 1.2s ease 0s forwards;
      animation: effect-fade-in 1.2s ease 0s forwards; }
    .howto-chart__header {
      width: 100%;
      font-size: 2.4rem;
      font-weight: bold;
      color: #fff;
      background: #1B2B47;
      padding: 1.5rem 0; }
    .howto-chart__container {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      padding: 3%; }
    .howto-chart__item {
      width: 22%; }
    .howto-chart__image {
      position: relative;
      overflow: hidden;
      margin-bottom: 15px; }
      .howto-chart__image::after {
        content: '';
        display: block;
        padding-top: 100%; }
      .howto-chart__image img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        height: auto;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
  .howto-else {
    padding: 30px 0 80px; }
    .howto-else__container {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      opacity: 0; }
      .howto-else__container.js-action {
        -webkit-animation: effect-fade-in 1.2s ease 0s forwards;
        animation: effect-fade-in 1.2s ease 0s forwards; }
    .howto-else__item {
      position: relative;
      width: 22%; }
      .howto-else__item:not(:last-child) {
        margin-right: 55px; }
        .howto-else__item:not(:last-child)::after {
          content: '';
          position: absolute;
          left: -webkit-calc(100% + 20px);
          left: calc(100% + 20px);
          top: 50%;
          border: 15px solid transparent;
          border-left: 18px solid #D7D7D7;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
    .howto-else__image {
      position: relative;
      overflow: hidden;
      margin-bottom: 15px; }
      .howto-else__image::after {
        content: '';
        display: block;
        padding-top: 100%; }
      .howto-else__image img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        height: auto;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
  .howto-article {
    position: relative;
    opacity: 0;
    padding: 120px 5% 80px; }
    .howto-article.js-action {
      -webkit-animation: effect-fade-in 1.2s ease 0s forwards;
      animation: effect-fade-in 1.2s ease 0s forwards; }
    .howto-article::before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: -webkit-linear-gradient(to right, #1B2B47, #1B2B47 12px, transparent 12px, transparent 24px);
      background: linear-gradient(to right, #1B2B47, #1B2B47 12px, transparent 12px, transparent 24px);
      background-position: top;
      background-size: 24px 5px;
      background-repeat: repeat-x; }
    .howto-article__header {
      position: absolute;
      top: -45px;
      left: 5%;
      font-size: 2rem;
      background: #ddab80;
      color: #fff;
      padding: 2.5rem 3.5rem;
      border-radius: 50%;
      z-index: 1;
      -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      transform: rotate(-5deg); }
      .howto-article__header::after {
        content: '';
        display: inline-block;
        position: absolute;
        top: -webkit-calc(100% - 15px);
        top: calc(100% - 15px);
        left: 50%;
        width: 27px;
        height: 30px;
        background: url("data:image/svg+xml;charset=utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226.96%22%20height%3D%2230.32%22%20viewBox%3D%220%200%2026.96%2030.32%22%3E%3Cpath%20fill%3D%22%23ddab80%22%20d%3D%22M0%2C1.58C-.9%2C15.92%2C18.17%2C27.05%2C27%2C30.32%2C18.41%2C23.47%2C17.23%2C0%2C17.23%2C0Z%22%2F%3E%3C%2Fsvg%3E%0A") center center/contain no-repeat;
        z-index: -1;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }
    .howto-article__container {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between; }
    .howto-article__item {
      width: 31%; }
    .howto-article__inner {
      display: block; }
      .howto-article__inner:hover .howto-article__thumb {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        -ms-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1); }
      .howto-article__inner:hover .howto-article__ttl {
        color: #877555; }
    .howto-article__image {
      position: relative;
      overflow: hidden;
      border-radius: 15px;
      margin-bottom: 15px; }
      .howto-article__image::after {
        content: '';
        display: block;
        padding-top: 66.7%; }
    .howto-article__thumb {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s; }
    .howto-article__date {
      display: block;
      text-align: center;
      margin-bottom: 5px; }
    .howto-article__ttl {
      font-size: 1.6rem;
      font-weight: bold;
      transition: color .5s; }

@media screen and (max-width: 768px) {
  .howto {
    padding: 50px 5%; }
    .howto__header {
      font-size: 2.4rem; }
    .howto-chart {
      border-radius: 15px; }
      .howto-chart__header {
        font-size: 2rem;
        padding: 1.5rem 0; }
      .howto-chart__container {
        -webkit-flex-direction: column;
        flex-direction: column;
        padding: 5%; }
      .howto-chart__item {
        width: 100%; }
        .howto-chart__item:not(:last-child) {
          margin-bottom: 15px; }
      .howto-chart__image img {
        width: 75%; }
    .howto-else {
      padding: 0 5% 50px; }
      .howto-else__container {
        -webkit-flex-direction: column;
        flex-direction: column;
        padding: 0 5%; }
      .howto-else__item {
        position: relative;
        width: 100%; }
        .howto-else__item:not(:last-child) {
          margin: 0 0 55px; }
          .howto-else__item:not(:last-child)::after {
            top: -webkit-calc(100% + 20px);
            top: calc(100% + 20px);
            left: 50%;
            border: 15px solid transparent;
            border-top: 18px solid #D7D7D7;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
      .howto-else__image {
        margin-bottom: 15px; }
        .howto-else__image img {
          width: 75%; }
    .howto-article {
      position: relative;
      padding: 120px 5% 80px; }
      .howto-article::before {
        content: '';
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: -webkit-linear-gradient(to right, #1B2B47, #1B2B47 12px, transparent 12px, transparent 24px);
        background: linear-gradient(to right, #1B2B47, #1B2B47 12px, transparent 12px, transparent 24px);
        background-position: top;
        background-size: 24px 5px;
        background-repeat: repeat-x; }
      .howto-article__header {
        position: absolute;
        top: -45px;
        left: 50%;
        font-size: 1.8rem;
        padding: 2.5rem 3.5rem;
        white-space: nowrap;
        -webkit-transform: translateX(-50%) rotate(0);
        -ms-transform: translateX(-50%) rotate(0);
        transform: translateX(-50%) rotate(0); }
      .howto-article__container {
        -webkit-flex-direction: column;
        flex-direction: column;
        padding: 0; }
      .howto-article__item {
        width: 100%;
        border-bottom: 1px dotted #c3c3c3;
        padding-bottom: 15px; }
        .howto-article__item:not(:last-child) {
          margin-bottom: 15px; }
      .howto-article__inner {
        display: grid;
        grid-template-rows: 1.5rem 1fr;
        grid-template-columns: 40% 1fr;
        grid-row-gap: 15px;
        grid-column-gap: 3.5vw; }
      .howto-article__image {
        grid-row: 1 / 3;
        grid-column: 1 / 2;
        margin: 0; }
        .howto-article__image img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
        .howto-article__image::after {
          padding-top: 66.67%; }
      .howto-article__date {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        line-height: 1;
        text-align: left;
        margin: 0; }
      .howto-article__ttl {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        font-size: 1.6rem;
        text-align: left;
        text-overflow: ellipsis;
        overflow: hidden; } }

/*# sourceMappingURL=howto.css.map */