@charset "UTF-8";
/* ==============================================
  reset
 ============================================== */
/*
このCSSはシェアリソースの reset.css から必要なスタイルを流用したものです。
 */
/* --------------------
  HTML5
 -------------------- */
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}

/* --------------------
  DEFAULT
 -------------------- */
/* GLOBAL */
* {
  margin: 0;
  padding: 0;
}

/* BODY */
body {
  margin: 0;
  color: #444;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Yu Gothic", YuGothic, Verdana, Helvetica, "ＭＳ Ｐゴシック", sans-serif;
}

/* LIST */
ol,
ul,
li {
  line-height: 1.5;
  list-style-type: none;
}

/* IMG */
img {
  border: 0;
  vertical-align: bottom;
}

/* TABLE */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* A */
a {
  outline: none;
  overflow: hidden;
  text-decoration: none;
}

html {
  font-size: 62.5%;
  /* 1rem = 10px */
}

body {
  font-size: 1.6rem;
}

/* ==============================================
  layout
 ============================================== */
.layout_main {
  overflow: hidden;
}

.layout-section {
  padding: 80px 0 0;
}

.section-wrap {
  background: #f7f7f7;
  position: relative;
  z-index: 1;
}
.section-wrap .inner {
  padding: 60px 0;
  position: relative;
}
.section-wrap .inner::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 40px 0 40px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}

/* スマホ 幅が 0px - 599px */
@media screen and (max-width: 599px) {
  html,
  body {
    width: 100%;
  }
  .inner {
    margin: 0 20px;
  }
  .hidden-if-pc {
    display: block;
  }
  .hidden-if-sph {
    display: none;
  }
}
/* PC 幅が 600px 以上 */
@media screen and (min-width: 600px) {
  html,
  body {
  }
  .hidden-if-pc {
    display: none;
  }
  .hidden-if-sph {
    display: block;
  }
  .inner {
    max-width: 960px;
    margin: 0 auto;
  }
  .layout-section {
    padding: 120px 0 0;
  }
  .layout_main a {
    transition: opacity 0.3s;
  }
  .layout_main a:hover {
    opacity: 0.7;
  }

  .section-wrap .inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* ==============================================
  module
============================================== */
.section-head {
  margin: 0 0 30px;
}
.section-head .inner {
  position: relative;
}

.section-headline {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 30px;
}

.section-sub-headline {
  font-size: 2.4rem;
  line-height: 1;
  margin: 80px 0 30px;
}
.section-sub-headline:first-child {
  margin-top: 0;
}

.section-lead {
  line-height: 1.9;
}

@media screen and (min-width: 600px) {
  .section-head {
    margin: 0 20px 50px;
  }
  .section-headline {
    font-size: 4rem;
  }
  .section-sub-headline {
    font-size: 3rem;
  }

  .section-lead {
    word-break: keep-all;
  }
}
.tag {
  font-size: 1.2rem;
  font-weight: 700;
  display: inline-block;
  padding: 4px 9px;
  color: #F7522D;
  background: #F8F8FF;
  border-radius: 26px;
}

.tag-list {
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 0;
}

.cta {
  background: #EFF3F9;
  padding: 50px 0;
  position: relative;
  z-index: 1;
}
.cta .inner {
  max-width: 680px;
  position: relative;
}
.cta .shape-dot {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.34 46.34"><g><circle fill="%23ddd" cx="23.17" cy="3.21" r="3.21"/><circle fill="%23ddd" cx="33.15" cy="13.19" r="3.21"/><circle fill="%23ddd" cx="43.13" cy="23.17" r="3.21"/><circle fill="%23ddd" cx="33.15" cy="33.15" r="3.21"/><circle fill="%23ddd" cx="23.17" cy="23.17" r="3.21"/><circle fill="%23ddd" cx="13.19" cy="13.19" r="3.21"/><circle fill="%23ddd" cx="3.21" cy="23.17" r="3.21"/><circle fill="%23ddd" cx="13.19" cy="33.15" r="3.21"/><circle fill="%23ddd" cx="23.17" cy="43.13" r="3.21"/></g></svg>');
}
.cta_shape01 {
  left: 0;
  top: 0;
}
.cta_shape02 {
  right: 0;
  top: 60px;
}

.cta-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 26px;
}
.cta-title::before {
  content: "";
  display: block;
  width: 37px;
  height: 31px;
  background: url(../images/icon_cta.svg) no-repeat center center;
  background-size: 100% 100%;
  margin: 0 auto 5px;
}

.cta-item {
  margin: 0 0 40px;
  text-align: center;

}
.cta-item:last-child {
  margin: 0;
}
.cta-item--panel .cta-text {
  color: #2B3CB5;
}
.cta-item--panel .cta-text span::before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g><path fill="%232B3CB5" d="m4.04,14.09h0c.44-.71,1.36-.92,2.07-.49l6.8,4.21c.71.44.92,1.36.49,2.07h0c-.44.71-1.36.92-2.07.49l-6.8-4.21c-.71-.44-.92-1.36-.49-2.07Z"/><path fill="%232B3CB5" d="m14.28,3.79h0c.72-.42,1.63-.17,2.05.55l4.01,6.92c.42.72.17,1.63-.55,2.05h0c-.72.42-1.63.17-2.05-.55l-4.01-6.92c-.42-.72-.17-1.63.55-2.05Z"/><path fill="%232B3CB5" d="m28.5,0h0c.83,0,1.5.67,1.5,1.5v8c0,.83-.67,1.5-1.5,1.5h0c-.83,0-1.5-.67-1.5-1.5V1.5c0-.83.67-1.5,1.5-1.5Z"/><path fill="%232B3CB5" d="m0,28.5h0c0-.83.67-1.5,1.5-1.5h8c.83,0,1.5.67,1.5,1.5h0c0,.83-.67,1.5-1.5,1.5H1.5c-.83,0-1.5-.67-1.5-1.5Z"/></g></svg>') no-repeat center center;
  background-size: contain;
}

.cta-text {
  color: #F7522D;
  font-weight: 700;
  margin: 0 0 10px;
}
.cta-text span {
  position: relative;
}
.cta-text span::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g><path fill="%23F7522D" d="m4.04,14.09h0c.44-.71,1.36-.92,2.07-.49l6.8,4.21c.71.44.92,1.36.49,2.07h0c-.44.71-1.36.92-2.07.49l-6.8-4.21c-.71-.44-.92-1.36-.49-2.07Z"/><path fill="%23F7522D" d="m14.28,3.79h0c.72-.42,1.63-.17,2.05.55l4.01,6.92c.42.72.17,1.63-.55,2.05h0c-.72.42-1.63.17-2.05-.55l-4.01-6.92c-.42-.72-.17-1.63.55-2.05Z"/><path fill="%23F7522D" d="m28.5,0h0c.83,0,1.5.67,1.5,1.5v8c0,.83-.67,1.5-1.5,1.5h0c-.83,0-1.5-.67-1.5-1.5V1.5c0-.83.67-1.5,1.5-1.5Z"/><path fill="%23F7522D" d="m0,28.5h0c0-.83.67-1.5,1.5-1.5h8c.83,0,1.5.67,1.5,1.5h0c0,.83-.67,1.5-1.5,1.5H1.5c-.83,0-1.5-.67-1.5-1.5Z"/></g></svg>') no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -20px;
  left: -25px;
}

.cta-btn {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: #F7522D;
  border-radius: 70px;
  font-size: 1.8rem;
  position: relative;
}
.cta-btn span::after {
  content: "\f054";
  font-family: FontAwesome, sans-serif;
  margin: 0 0 0 5px;
  line-height: 1;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
}
.cta-btn--panel {
  background: #2B3CB5;
}

.cta-note {
  margin: 16px 0 0;
}
.cta-note li {
  font-size: 1.2rem;
  line-height: 2;
}
.cta-note li::before {
  content: "※";
}
.cta-note li a {
  color: #F7522D;
}

@media (min-width: 600px) {
  .cta_shape01 {
    left: -64px;
    top: 0;
  }
  .cta_shape02 {
    right: -89px;
    top: auto;
    bottom: 60px;
  }
  .cta-list {
    display: flex;
    justify-content: space-between;
  }
  .cta-item {
    width: 320px;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .cta-text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
  }
}
.shape-border {
  background: #423EAF;
  transform: rotate(60deg);
  position: absolute;
}
.shape-border.op01 {
  opacity: 0.05;
}
.shape-border.op02 {
  opacity: 0.1;
}
.shape-border.op03 {
  opacity: 0.5;
}
.shape-border.w01 {
  width: 30px;
  height: 600px;
  border-radius: 30px;
}
.shape-border.w02 {
  width: 20px;
  height: 590px;
  border-radius: 20px;
}
.shape-border.w03 {
  width: 10px;
  height: 475px;
  border-radius: 10px;
}

.shape-dot {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.34 46.34"><g><circle fill="%23F0F0F0" cx="23.17" cy="3.21" r="3.21"/><circle fill="%23F0F0F0" cx="33.15" cy="13.19" r="3.21"/><circle fill="%23F0F0F0" cx="43.13" cy="23.17" r="3.21"/><circle fill="%23F0F0F0" cx="33.15" cy="33.15" r="3.21"/><circle fill="%23F0F0F0" cx="23.17" cy="23.17" r="3.21"/><circle fill="%23F0F0F0" cx="13.19" cy="13.19" r="3.21"/><circle fill="%23F0F0F0" cx="3.21" cy="23.17" r="3.21"/><circle fill="%23F0F0F0" cx="13.19" cy="33.15" r="3.21"/><circle fill="%23F0F0F0" cx="23.17" cy="43.13" r="3.21"/></g></svg>') no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
}
.shape-dot.dot01 {
  width: 49px;
  height: 49px;
}
.shape-dot.dot02 {
  width: 73px;
  height: 73px;
}

@media (min-width: 600px) {
  .shape-border.w01 {
    width: 50px;
    height: 600px;
    border-radius: 50px;
  }
  .shape-border.w02 {
    width: 40px;
    height: 590px;
    border-radius: 40px;
  }
  .shape-border.w03 {
    width: 20px;
    height: 475px;
    border-radius: 20px;
  }
}
/* ==============================================
  marketplace
============================================== */
/* --------------------
  main-visual
 -------------------- */
.main-visual {
  padding: 0 0 100px;
  overflow: hidden;
}

.visual-intro {
  padding: 50px 0 60px;
}
.visual-intro .inner {
  position: relative;
}
.visual-intro .inner::after {
  content: "";
  display: block;
  width: 62.29946524%;
  padding-top: 41.443850267%;
  background: url(../images/bg_main.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -22%;
  right: -8.021390374%;
}
.visual-intro_shape01 {
  left: -160px;
  top: -90px;
}
.visual-intro_shape02 {
  right: -200px;
  top: 0;
}
.visual-intro_shape03 {
  top: 259px;
  left: -79px;
}
.visual-intro_shape04 {
  top: 292px;
  right: -125px;
}

.visual-head {
  line-height: 0;
  position: relative;
  z-index: 1;
}
.visual-head span {
  display: inline-block;
  padding: 6px 8px 5px;
  font-size: 1.5rem;
  line-height: 1.3;
  background: #2B3CB5;
  border-radius: 4px;
  color: #fff;
}
.visual-head strong {
  display: block;
  font-size: 3.2rem;
  line-height: 1.4;
  margin: 20px 0 0;
}

.visual-copy {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #2B3CB5;
  margin: 20px 0 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 600px) {
  .visual-intro {
    padding: 60px 20px 100px;
  }
  .visual-intro .inner::after {
    width: 330px;
    height: 220px;
    right: -54px;
    top: -30px;
    padding: 0;
    margin: 0;
  }
  .visual-intro_shape02 {
    right: -300px;
    top: -223px;
    z-index: 1;
  }
  .visual-intro_shape04 {
    top: 292px;
    right: -125px;
  }

  .visual-head,
  .visual-copy {
    width: 70%;
    word-break: keep-all;
  }
}
/* --------------------
  about
 -------------------- */
.about .inner {
  position: relative;
}
.about_shape01 {
  left: -240px;
  bottom: -130px;
}
.about_shape02 {
  right: 220px;
  bottom: -400px;
}
.about_shape03 {
  left: 0;
  bottom: 130px;
}

.about-list li {
  margin: 0 0 30px;
}
.about-list li:nth-child(1) .about-text::before {
  background-image: url(../images/icon_01.svg);
  background-size: contain;
}
.about-list li:nth-child(2) .about-text::before {
  background-image: url(../images/icon_02.svg);
  background-size: 87px auto;
}
.about-list li:nth-child(3) .about-text::before {
  background-image: url(../images/icon_03.svg);
  background-size: contain;
}

.about-text {
  line-height: 1.8;
}
.about-text::before {
  content: "";
  display: block;
  width: 98px;
  height: 76px;
  margin: 0 auto 15px;
  background-position: center center;
  background-repeat: no-repeat;
}

.about-title {
  font-size: 2rem;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 25px;
}
.about-title strong {
  color: #F7522D;
}

@media (min-width: 600px) {
  .about_shape01 {
    left: -355px;
    bottom: -420px;
  }
  .about_shape02 {
    right: 220px;
    bottom: -400px;
  }
  .about_shape03 {
    left: -190px;
    bottom: 45px;
  }
  .about-list {
    display: flex;
    justify-content: center;
  }
  .about-list li {
    width: 264px;
    margin: 0 27px;
  }
  .about-text::before {
    margin: 0 auto 28px;
  }
}
/* --------------------
  おすすめ情報
 -------------------- */
.recommend-info_shape01 {
  top: -470px;
  left: 250px;
}
.recommend-info_shape02 {
  right: 360px;
  bottom: -430px;
}
.recommend-info_shape03 {
  right: 60px;
  bottom: -50px;
}

.recommend-info-list {
  margin: 0 0 -20px;
}

.recommend-info-item {
  margin: 0 0 20px;
  background: #fff;
}
.recommend-info-item a {
  color: #000;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.recommend-info-item .tag-list {
  margin: 20px -10px -10px 0;
}
.recommend-info-item .tag {
  margin: 0 10px 10px 0;
}

.recommend-info-image {
  position: relative;
  overflow: hidden;
}
.recommend-info-image::before {
  content: "";
  display: block;
  padding: 46.33333333% 0 0;
}
.recommend-info-image img {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.reccomend-info-text {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.reccomend-info-title {
  font-size: 1.6rem;
}

@media (min-width: 600px) {
  .recommend-info_shape01 {
    top: -490px;
    left: 210px;
  }
  .recommend-info_shape02 {
    right: 360px;
    bottom: -360px;
  }
  .recommend-info_shape03 {
    right: 100px;
  }
  .recommend-info-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1.5625% -30px;
  }
  .recommend-info-item {
    width: 30.303030303%;
    margin: 0 1.515151515% 30px;
  }
}
/* --------------------
  サービス
 -------------------- */
.service_shape01 {
  top: -80px;
  left: -170px;
}
.service_shape02 {
  top: -295px;
  right: -125px;
}
.service_shape03 {
  top: -30px;
  right: 55px;
}

.service-list {
  margin: 40px 0 0;
}

.service-item + .service-item {
  margin: 10px 0 0;
}
.service-item .tag-list {
  margin: 0 -10px 0px 0;
}
.service-item .tag {
  margin: 0 10px 10px 0;
}

.service-link {
  display: flex;
  align-items: center;
  min-height: 150px;
  background: #fff;
  border-radius: 10px;
  padding-right: 10px;
  color: #000;
  position: relative;
}

.service-link::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: url('data:image/svg+xml;charset=utf-8,<svg width="51" height="52" viewBox="0 0 51 52" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="25.563" y="0.563477" width="35.9728" height="4.79638" rx="2.39819" transform="rotate(45 25.563 0.563477)" fill="%23D9D9D9"/><rect x="22.1714" y="48.0452" width="35.9728" height="4.79638" rx="2.39819" transform="rotate(-45 22.1714 48.0452)" fill="%23D9D9D9"/></svg>') no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto;
}

.service-logo {
  width: 140px;
  flex-shrink: 0;
}

.service-logo img {
  width: 100%;
}

.service-text {
  padding: 15px 15px 17px 0;
  font-size: 1.2rem;
  line-height: 1.6;
}

.service-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 5px;
}

.service-price {
  line-height: 1;
}
.service-price span {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 600px) {
  .service_shape01 {
    top: -50px;
  }
  .service_shape02 {
    right: -55px;
  }
  .service_shape03 {
    right: 145px;
  }
  .service .section-wrap .inner {
    padding-bottom: 100px;
  }

  .service-link {
    padding-right: 40px;
  }
  .service-link::after {
    width: 30px;
    height: 30px;
    right: 20px;
  }
  .service-logo {
    width: 240px;
  }
  .service-logo img {
    width: 100%;
  }
  .service-text {
    line-height: 2;
  }
  .service-title {
    font-size: 2rem;
    margin: 0 0 11px;
  }
  .service-price span {
    font-size: 1.8rem;
  }
}