@charset "UTF-8";
html {
  font-size: 62.5%; }

* {
  box-sizing: border-box; }

body {
  font-family: 'Noto Sans JP', sans-serif; }

body a p {
  color: #595757; }
body a img {
  transition: all 0.5s; }

h1,
h2,
h3 {
  font-family: "M PLUS 1p", sans-serif;
  color: #e50012; }

@media (max-width: 767px) {
  .slider {
    margin-top: 60px; } }
.slider_con {
  width: 100%;
  height: 100%; }
  .slider_con a {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
.slider .slick-dots li button:before {
  margin-top: 10px;
  transition: .3s; }
  @media (min-width: 768px) {
    .slider .slick-dots li button:before {
      font-size: 14px; } }
  @media (max-width: 767px) {
    .slider .slick-dots li button:before {
      font-size: 12px; } }
  .slider .slick-dots li button:before:hover {
    transition: .3s; }

main {
  background: url(../images/bg.png) top center; }
  @media (min-width: 768px) {
    main {
      background-size: cover; } }
  @media (max-width: 767px) {
    main {
      background-size: contain; } }

.top {
  padding-top: 80px; }
  .top_title .fukidashi {
    margin: 10px auto;
    display: block;
    width: 60%; }
    @media (min-width: 768px) {
      .top_title .fukidashi {
        max-width: 160px; } }
    @media (max-width: 767px) {
      .top_title .fukidashi {
        max-width: 100px; } }
  .top_title_wrapper {
    position: relative; }
    .top_title_wrapper h1 {
      text-align: center;
      font-weight: 600; }
      @media (min-width: 768px) {
        .top_title_wrapper h1 {
          font-size: 80px;
          font-size: 8rem;
          line-height: 1.125; } }
      @media (max-width: 767px) {
        .top_title_wrapper h1 {
          font-size: 45px;
          font-size: 4.5rem;
          line-height: 1.5555555556; } }
      .top_title_wrapper h1 span {
        display: block;
        color: #595757;
        font-weight: 400; }
        @media (min-width: 768px) {
          .top_title_wrapper h1 span {
            font-size: 25px;
            font-size: 2.5rem;
            line-height: 1.8; } }
        @media (max-width: 767px) {
          .top_title_wrapper h1 span {
            font-size: 18px;
            font-size: 1.8rem;
            line-height: 1.3888888889; } }
    .top_title_wrapper .kuwashikuwa {
      border: 2px solid #e50012;
      border-radius: 100%;
      color: #e50012;
      text-align: center;
      display: grid;
      align-content: center;
      justify-items: center; }
      @media (min-width: 768px) {
        .top_title_wrapper .kuwashikuwa {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 90px;
          height: 90px;
          font-size: 15px;
          font-size: 1.5rem;
          line-height: 1.3333333333; } }
      @media (max-width: 767px) {
        .top_title_wrapper .kuwashikuwa {
          margin: 1em auto;
          width: 80px;
          height: 80px;
          font-size: 14px;
          font-size: 1.4rem;
          line-height: 1.2857142857; } }
      .top_title_wrapper .kuwashikuwa:hover {
        background: #e50012;
        color: #fff; }

.about {
  margin: 3em 0; }
  @media (min-width: 768px) {
    .about {
      display: flex;
      flex-wrap: wrap;
      grid-gap: 40px; } }
  @media (min-width: 768px) {
    .about > li {
      width: calc((100% / 3) - 30px); } }
  @media (max-width: 767px) {
    .about > li {
      margin: 2em auto 3em; } }
  .about > li h3 {
    text-align: center;
    margin: 10px 0;
    font-weight: 500; }
    @media (min-width: 768px) {
      .about > li h3 {
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 1.4583333333; } }
    @media (max-width: 767px) {
      .about > li h3 {
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 1.4583333333; } }

.order h2 {
  font-weight: 500; }
  @media (min-width: 768px) {
    .order h2 {
      font-size: 30px;
      font-size: 3rem;
      line-height: 1.3333333333; } }
  @media (max-width: 767px) {
    .order h2 {
      font-size: 24px;
      font-size: 2.4rem;
      line-height: 1.4583333333; } }
  .order h2 span {
    color: #595757;
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 400; }
    @media (min-width: 768px) {
      .order h2 span {
        margin-left: 1em; } }
    @media (max-width: 767px) {
      .order h2 span {
        display: block; } }
.order_flow {
  margin: 1em auto; }
  @media (min-width: 768px) {
    .order_flow {
      display: flex;
      justify-content: space-between; } }
  .order_flow > li {
    position: relative;
    border: 2px solid #e50012;
    border-radius: 10px;
    background: #fff;
    padding: 1em; }
    @media (min-width: 768px) {
      .order_flow > li:nth-child(1) {
        width: 32%; }
        .order_flow > li:nth-child(1)::before {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border-style: solid;
          border-top: 20px solid transparent;
          border-bottom: 20px solid transparent;
          border-left: 20px solid #595757;
          border-right: 0;
          top: 50%;
          transform: translateY(-50%);
          right: -14%; }
      .order_flow > li:nth-child(2) {
        width: 62%;
        padding-right: 160px; }
        .order_flow > li:nth-child(2) img {
          width: 170px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -2em; } }
    @media (max-width: 767px) {
      .order_flow > li:nth-child(1) {
        margin-bottom: 3em; }
        .order_flow > li:nth-child(1)::before {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border-style: solid;
          border-right: 20px solid transparent;
          border-left: 20px solid transparent;
          border-top: 20px solid #595757;
          border-bottom: 0;
          bottom: -2.3em;
          left: 50%;
          transform: translateX(-50%); }
      .order_flow > li:nth-child(2) img {
        display: block;
        margin: 10px auto;
        width: 70%;
        max-width: 150px; } }
    .order_flow > li h3 {
      display: flex;
      text-align: left;
      font-weight: 500;
      font-size: 22px;
      font-size: 2.2rem;
      line-height: 1.5909090909; }
      .order_flow > li h3 span {
        margin-top: 3px;
        width: 30px;
        height: 30px;
        display: block;
        background: #e50012;
        color: #fff;
        display: grid;
        align-content: center;
        justify-items: center;
        border-radius: 100%;
        margin-right: 5px; }

.intro_btn {
  margin-top: 2em; }
  @media (min-width: 768px) {
    .intro_btn {
      display: flex;
      column-gap: 40px; } }
  @media (min-width: 768px) {
    .intro_btn li {
      width: calc((100% / 3) - 20px); } }
  @media (max-width: 767px) {
    .intro_btn li {
      margin-bottom: 2em; } }
  .intro_btn li a {
    display: block;
    padding: 1em;
    border: 2px solid #4652a1;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    font-family: "M PLUS 1p", sans-serif;
    color: #4652a1;
    font-weight: 500; }
    @media (min-width: 768px) {
      .intro_btn li a {
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 1.4583333333; } }
    @media (max-width: 767px) {
      .intro_btn li a {
        font-size: 20px;
        font-size: 2rem;
        line-height: 1.5; } }
    .intro_btn li a:hover {
      background: #4652a1;
      color: #fff; }
    .intro_btn li a span {
      display: block;
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1.6666666667; }

.service h2 {
  text-align: center;
  font-weight: 500; }
  @media (min-width: 768px) {
    .service h2 {
      font-size: 35px;
      font-size: 3.5rem;
      line-height: 1.4285714286; } }
  @media (max-width: 767px) {
    .service h2 {
      font-size: 30px;
      font-size: 3rem;
      line-height: 1.3333333333;
      margin-bottom: 10px; } }
.service .center {
  text-align: center; }
.service_wrapper {
  margin: 2em auto; }
  @media (min-width: 768px) {
    .service_wrapper {
      display: flex;
      column-gap: 40px; } }
  .service_wrapper > li {
    border-radius: 10px;
    padding: 2em; }
    @media (min-width: 768px) {
      .service_wrapper > li {
        display: flex;
        flex-direction: column;
        width: calc((100% / 2) - 20px); } }
    .service_wrapper > li.sukusuku {
      background: #f4aaae; }
      @media (max-width: 767px) {
        .service_wrapper > li.sukusuku {
          margin-bottom: 2em; } }
    .service_wrapper > li.omoiyari {
      background: #aacf52; }
    .service_wrapper > li .list {
      margin: 1em 0; }
      .service_wrapper > li .list > li {
        font-family: "Kiwi Maru", serif;
        color: #fff;
        margin-bottom: 1em;
        padding-left: 1em;
        text-indent: -1em; }
        .service_wrapper > li .list > li::before {
          content: '●'; }
        @media (min-width: 768px) {
          .service_wrapper > li .list > li {
            font-size: 24px;
            font-size: 2.4rem;
            line-height: 1.4583333333; } }
        @media (max-width: 767px) {
          .service_wrapper > li .list > li {
            font-size: 20px;
            font-size: 2rem;
            line-height: 1.5; } }
    .service_wrapper > li a {
      display: block;
      background: #fff;
      border-radius: 10px;
      margin-top: auto;
      padding: 1em 2em; }
      .service_wrapper > li a:hover {
        background: #e7e7e7; }
      .service_wrapper > li a img {
        display: block;
        width: 90%;
        max-width: 200px;
        margin: 0 auto; }
    .service_wrapper > li .youtube {
      width: 100%;
      margin-bottom: 2em;
      aspect-ratio: 16 / 9; }
    .service_wrapper > li .youtube iframe {
      width: 100%;
      height: 100%; }
.service .noto_support {
  margin: 3em auto;
  position: relative;
  display: block;
  background: #86b0cf;
  border-radius: 10px;
  padding: 1em; }
  .service .noto_support:hover {
    opacity: .5; }
  .service .noto_support img {
    position: absolute;
    top: -20px; }
    @media (min-width: 768px) {
      .service .noto_support img {
        width: 80px; } }
    @media (max-width: 767px) {
      .service .noto_support img {
        width: 60px;
        left: 50%;
        transform: translateX(-50%); } }
  @media (min-width: 768px) {
    .service .noto_support div {
      padding-left: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 20px; } }
  .service .noto_support div p {
    color: #fff;
    font-family: "Kiwi Maru", serif;
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.5; }
    @media (max-width: 767px) {
      .service .noto_support div p {
        padding-top: 50px;
        text-align: center; } }
  .service .noto_support div h3 {
    color: #fff;
    font-family: "Kiwi Maru", serif; }
    @media (min-width: 768px) {
      .service .noto_support div h3 {
        font-size: 38px;
        font-size: 3.8rem;
        line-height: 1.3157894737; } }
    @media (max-width: 767px) {
      .service .noto_support div h3 {
        font-size: 25px;
        font-size: 2.5rem;
        line-height: 1.4;
        text-align: center; } }
@media (min-width: 768px) {
  .service .delivery_banner {
    display: flex;
    column-gap: 40px; } }
.service .delivery_banner > li {
  background: #fad48a;
  border-radius: 10px;
  transition: .3s; }
  .service .delivery_banner > li:hover {
    transition: .3s;
    opacity: .5; }
  @media (min-width: 768px) {
    .service .delivery_banner > li {
      width: calc((100% / 2) - 20px); } }
  @media (max-width: 767px) {
    .service .delivery_banner > li {
      margin-bottom: 2em; } }
  .service .delivery_banner > li a {
    display: block;
    padding: 1em; }
  .service .delivery_banner > li h3 {
    font-weight: 500;
    color: #e65a24;
    font-size: 25px;
    font-size: 2.5rem;
    line-height: 1.4; }
  .service .delivery_banner > li .muryou {
    display: flex; }
    .service .delivery_banner > li .muryou > p {
      width: calc(100% - 80px); }
    .service .delivery_banner > li .muryou_circle {
      margin-top: auto;
      width: 80px;
      height: 80px;
      background: #fff;
      border-radius: 100%;
      text-align: center;
      display: grid;
      align-content: center; }
      .service .delivery_banner > li .muryou_circle p {
        color: #ec881e;
        font-weight: 500;
        font-size: 28px;
        font-size: 2.8rem;
        line-height: 1.3571428571; }
        .service .delivery_banner > li .muryou_circle p span {
          display: block;
          font-size: 15px;
          font-size: 1.5rem;
          line-height: 1; }

.set_wrapper {
  border: 5px dashed #4652a1;
  background: #fff;
  padding: 2em; }
  .set_wrapper .center {
    margin: 10px 0;
    text-align: center; }
.set_title {
  display: block;
  margin: 0 auto; }
  @media (min-width: 768px) {
    .set_title {
      width: 90%; } }
.set_content {
  padding: 2em 0 3em 0; }
  .set_content + .set_content {
    border-top: 1px solid #4652a1; }
  .set_content:last-child {
    padding-bottom: 0; }
  .set_content_title {
    margin-bottom: 2em; }
    @media (min-width: 768px) {
      .set_content_title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; } }
    @media (min-width: 768px) {
      .set_content_title .set_name {
        width: 40%; } }
    @media (max-width: 767px) {
      .set_content_title .set_name {
        margin-bottom: 1em; } }
    @media (min-width: 768px) {
      .set_content_title .set_name_img {
        width: 55%; } }
@media (min-width: 768px) {
  .set_list {
    display: flex;
    column-gap: 20px; } }
@media (min-width: 768px) {
  .set_list > li {
    width: calc((100% / 4) - 10px); } }
@media (max-width: 767px) {
  .set_list > li {
    width: 90%;
    margin: 2em auto; } }
@media (max-width: 767px) {
  .set_list > li:last-child {
    margin-bottom: 0; } }
.set_list > li h3 {
  margin: 5px 0;
  color: #4652a1;
  text-align: center;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.6666666667; }
  .set_list > li h3 span {
    display: block;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.6666666667; }
.set_list_img {
  position: relative; }
  .set_list_img .mark {
    position: absolute;
    top: -10px;
    right: -10px; }
    @media (min-width: 768px) {
      .set_list_img .mark {
        width: 40px; } }
    @media (max-width: 767px) {
      .set_list_img .mark {
        width: 50px; } }
    @media (min-width: 768px) {
      .set_list_img .mark.mark_2 {
        width: 75px; } }
    @media (max-width: 767px) {
      .set_list_img .mark.mark_2 {
        width: 85px; } }
.set_contact {
  display: block;
  max-width: 300px;
  margin: 3em auto 0;
  padding: 1em;
  border: 3px solid #4652a1;
  background: #4652a1;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5625; }
  .set_contact:hover {
    background: #fff;
    color: #4652a1; }

.present_wrapper {
  border: 5px dashed #e50012;
  background: #fff;
  padding: 2em; }
  @media (min-width: 768px) {
    .present_wrapper {
      display: flex;
      flex-wrap: wrap;
      grid-gap: 40px; } }
  @media (min-width: 768px) {
    .present_wrapper > li {
      width: calc((100% / 3) - 28px); } }
  @media (max-width: 767px) {
    .present_wrapper > li + li {
      margin-top: 2em; } }
  .present_wrapper > li h3 {
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.4;
    font-family: "Kiwi Maru", serif; }
    .present_wrapper > li h3 span {
      font-size: 15px;
      font-size: 1.5rem;
      line-height: 1.6; }

.cooptoha a {
  position: relative;
  display: block;
  background: #ffefbe;
  padding: 2em 1em;
  border-radius: 10px; }
  .cooptoha a:hover {
    opacity: .5; }
  .cooptoha a h2 {
    font-weight: 500;
    text-align: center; }
    @media (min-width: 768px) {
      .cooptoha a h2 {
        font-size: 30px;
        font-size: 3rem;
        line-height: 1.3333333333; } }
    @media (max-width: 767px) {
      .cooptoha a h2 {
        font-size: 25px;
        font-size: 2.5rem;
        line-height: 1.4;
        padding-right: 20px; } }
  .cooptoha a img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }
    @media (min-width: 768px) {
      .cooptoha a img {
        width: 110px;
        right: 20%; } }
    @media (max-width: 767px) {
      .cooptoha a img {
        width: 80px;
        right: -10px; } }

.freedial {
  margin: 2em auto; }
  @media (min-width: 768px) {
    .freedial {
      display: flex;
      justify-content: center;
      alignitems: center;
      column-gap: 20px; } }
  .freedial h2 {
    background: #4652a1;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.6666666667; }
    @media (min-width: 768px) {
      .freedial h2 {
        width: 270px;
        display: grid;
        align-content: center; } }
    @media (max-width: 767px) {
      .freedial h2 {
        margin-bottom: 10px; } }
  @media (max-width: 767px) {
    .freedial p {
      text-align: center; } }
  .freedial p a {
    color: #4652a1;
    font-weight: 800;
    font-family: "M PLUS 1p", sans-serif; }
    @media (min-width: 768px) {
      .freedial p a {
        font-size: 50px;
        font-size: 5rem;
        line-height: 1.2; } }
    @media (max-width: 767px) {
      .freedial p a {
        font-size: 38px;
        font-size: 3.8rem;
        line-height: 1.3157894737; } }
  .freedial p span {
    display: block; }