@charset "UTF-8";
/*
Theme Name: XeoryExtensionChild
Template: xeory_extension
Theme URI: https://xeory.jp/extension
Description: Xeory拡張テーマの子テーマです
Author: no name
Author URI: https://lucy.ne.jp/bazubu/
Version: 0.6.4
Text Domain: xeory_extension
Tested up to: 6.8
Requires PHP: 7.0
Tags:blog,one-column,two-columns,right-sidebar,theme-options
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Copyright: Copyright (c) バズ部

*/
/* all display
-------------------------------------------------- */

/*---------------追記---------------*/
/*root*/
:root {
  /*color*/
  --cta-color: #3881F0;
  --main-grd: linear-gradient(135.34deg, #00C0BA 0%, #07C9C3 33.48%, #21B3DC 66.95%, #1771E7 100.92%);
  --main-color-b: #0E59A6;
  --main-color-c: #1BB0AB;
  --main-color-c: #1BB0AB;
  --sub-grd-g: linear-gradient(135deg, #E6FFED 0%, #CDF4CA 100%);
  --sub-grd-p: linear-gradient(135.99deg, #F5F1FF 9.87%, #D4D4FF 106.57%);
  --sub-color-g: #338835;
  --sub-color-p: #814FC3;
  --base-color10: #fff;
  --base-color20: #F3F7FA;
  --base-color30: #ECF1F5;
  --base-color40: #5E6776;
  --base-color50: #0E192B;
  --bg-grd: linear-gradient(173.97deg, #F3F7FA 0%, #E9F6FF 100%);
  --dummy-color: #e8e6e6;

  /*spacing*/
  --spacing4: min(0.3125vw, 4px);
  --spacing8: min(0.625vw, 8px);
  --spacing12: min(0.9375vw, 12px);
  --spacing16: min(1.25vw, 16px);
  --spacing20: min(1.5625vw, 20px);
  --spacing24: min(1.875vw, 24px);
  --spacing28: min(2.1875vw, 28px);
  --spacing32: min(2.5vw, 32px);
  --spacing36: min(2.8125vw, 36px);
  --spacing40: min(3.125vw, 40px);
  --spacing44: min(3.4375vw, 44px);
  --spacing48: min(3.75vw, 48px);
  --spacing52: min(4.0625vw, 52px);
  --spacing56: min(4.375vw, 56px);
  --spacing60: min(4.6875vw, 60px);
  --spacing64: min(5.0vw, 64px);
  --spacing68: min(5.3125vw, 68px);
  --spacing72: min(5.625vw, 72px);
  --spacing76: min(5.9375vw, 76px);
  --spacing80: min(6.25vw, 80px);
  --spacing84: min(6.5625vw, 84px);
  --spacing88: min(6.875vw, 88px);
  --spacing92: min(7.1875vw, 92px);
  --spacing96: min(7.5vw, 96px);
  --spacing100: min(7.8125vw, 100px);
  --spacing104: min(8.125vw, 104px);
  --spacing108: min(8.4375vw, 108px);
  --spacing112: min(8.75vw, 112px);
  --spacing116: min(9.0625vw, 116px);
  --spacing120: min(9.375vw, 120px);
  --spacing124: min(9.6875vw, 124px);
  --spacing128: min(10.0vw, 128px);
  --spacing132: min(10.3125vw, 132px);
  --spacing136: min(10.625vw, 136px);
  --spacing140: min(10.9375vw, 140px);
  --spacing144: min(11.25vw, 144px);
  --spacing148: min(11.5625vw, 148px);
  --spacing152: min(11.875vw, 152px);
  --spacing156: min(12.1875vw, 156px);
  --spacing160: min(12.5vw, 160px);
  --spacing164: min(12.8125vw, 164px);
  --spacing168: min(13.125vw, 168px);
  --spacing172: min(13.4375vw, 172px);
  --spacing176: min(13.75vw, 176px);
  --spacing180: min(14.0625vw, 180px);
  --spacing184: min(14.375vw, 184px);
  --spacing188: min(14.6875vw, 188px);
  --spacing192: min(15.0vw, 192px);
  --spacing196: min(15.3125vw, 196px);
  --spacing200: min(15.625vw, 200px);
  --spacing260: min(20.313vw, 260px);

  --section-padding: var(--spacing200) 0;

  /*border-radius*/
  --border-radius-s: 12px;
  --border-radius-m: 20px;
}

@media screen and (max-width: 767px) {
  :root {
    /*spacing*/
    --spacing4: 1.0667vw;
    --spacing8: 2.1333vw;
    --spacing12: 3.2vw;
    --spacing16: 4.2667vw;
    --spacing20: 5.3333vw;
    --spacing24: 6.4vw;
    --spacing28: 7.4667vw;
    --spacing32: 8.5333vw;
    --spacing36: 9.6vw;
    --spacing40: 10.6667vw;
    --spacing44: 11.7333vw;
    --spacing48: 12.8vw;
    --spacing52: 13.8667vw;
    --spacing56: 14.9333vw;
    --spacing60: 16.0vw;
    --spacing64: 17.0667vw;
    --spacing68: 18.1333vw;
    --spacing72: 19.2vw;
    --spacing76: 20.2667vw;
    --spacing80: 21.3333vw;
    --spacing84: 22.4vw;
    --spacing88: 23.4667vw;
    --spacing92: 24.5333vw;
    --spacing96: 25.6vw;
    --spacing100: 26.6667vw;
    --spacing104: 27.7333vw;
    --spacing108: 28.8vw;
    --spacing112: 29.8667vw;
    --spacing116: 30.9333vw;
    --spacing120: 32.0vw;
    --spacing124: 33.0667vw;
    --spacing128: 34.1333vw;
    --spacing132: 35.2vw;
    --spacing136: 36.2667vw;
    --spacing140: 37.3333vw;
    --spacing144: 38.4vw;
    --spacing148: 39.4667vw;
    --spacing152: 40.5333vw;
    --spacing156: 41.6vw;
    --spacing160: 42.6667vw;
    --spacing164: 43.7333vw;
    --spacing168: 44.8vw;
    --spacing172: 45.8667vw;
    --spacing176: 46.9333vw;
    --spacing180: 48.0vw;
    --spacing184: 49.0667vw;
    --spacing188: 50.1333vw;
    --spacing192: 51.2vw;
    --spacing196: 52.2667vw;
    --spacing200: 53.3333vw;
    --spacing260: 69.3333vw;

    --section-padding: var(--spacing100) 0;
  }
}

.wrap {
  width: 1200px;
  box-sizing: border-box;
  margin: 0 auto;
  zoom: 1;
}
.wrap:before {
  display: inline-table;
}
.wrap:after {
  content: "";
  display: block;
  clear: both;
}

#main {
  width: 100%;
  float: left;
}

.main-inner {
  margin-right: 358px;
}

#side {
  width: 310px;
  float: left;
  margin-left: -310px;
}

.left-content #main {
  width: 100%;
  float: left;
}
.left-content .main-inner {
  margin-right: 358px;
  margin-left: 0;
}
.left-content #side {
  width: 310px;
  float: left;
  margin-left: -310px;
}

.right-content #main {
  width: 100%;
  float: left;
}
.right-content .main-inner {
  margin-left: 358px;
  margin-right: 0;
}
.right-content #side {
  width: 310px;
  float: left;
  margin-left: -100%;
}

.one-column #content .wrap {
  width: 1000px;
}
.one-column #content .wrap #main {
  width: 100%;
  float: none;
}
.one-column #content .wrap #main .main-inner {
  width: 100%;
  margin: 0;
}
.one-column #content .wrap #side {
  display: none;
}

/* table
-------------------------------------------------- */
table {
  width: 100% !important;
}

table td,
table th {
  word-break: break-all;
  text-align: left;
}

/* ----------------------------------------
* レスポンシブ
* ~ / 1200px / 991px / 767px
* desctop / laptop / tablet / phone
---------------------------------------- */
@media screen and (max-width: 1200px) {
  /* laptop */
  .wrap,
  .one-column #content .wrap {
    margin-left: 36px;
    margin-right: 36px;
    width: auto;
  }

  .main-inner {
    margin-right: 346px;
    box-sizing: border-box;
  }

  /* laptop end */
}
@media screen and (max-width: 991px) {
  /* tablet */
  .wrap,
  .one-column #content .wrap {
    margin-left: 24px;
    margin-right: 24px;
  }

  #main,
  .main-inner,
  #side {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .left-content #main,
  .right-content #main {
    float: none;
  }
  .left-content .main-inner,
  .right-content .main-inner {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
  }
  .left-content #side,
  .right-content #side {
    width: 100%;
    float: none;
    margin: 0;
  }

  #side {
    padding-top: 42px;
  }

  /* tablet end */
}
@media screen and (max-width: 767px) {
  /* phone */
  .wrap,
  .one-column #content .wrap {
    margin-left: 12px;
    margin-right: 12px;
  }

  /* phone end */
}
/* ----------------------------------------
* フォント設定
---------------------------------------- */
/* ----------------------------------------
* all
---------------------------------------- */
body {
  color: var(--base-color10);
  overflow: hidden;
}

a {
  text-decoration: none;
  color: #47b39d;
}
a:hover {
  text-decoration: underline;
  text-decoration: none;
}

/* form
---------------------------------------- */
form input[type="submit"],
form button {
  background: #3b4552;
  color: #fff;
}
form input[type="submit"]:hover,
form button:hover {
  cursor: pointer;
}

/* ----------------------------------------
* header
---------------------------------------- */
#header {
  background-color: #47b39d;
  padding: 0;
  overflow: visible;
}
#header #logo {
  float: left;
  font-size: 24px;
  padding: 0;
  height: 92px;
  line-height: 92px;
}
#header #logo img {
  max-height: 76px;
}
#header a {
  color: #fff;
}

/* ----------------------------------------
* breadcrumb
---------------------------------------- */
.breadcrumb-area {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.breadcrumb-area .wrap {
  padding: 10px 0;
}

.breadcrumb {
  margin: 0;
  font-size: 13px;
  padding: 0;
  line-height: 22px;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb li {
  margin-left: 24px;
}
.breadcrumb li a {
  text-decoration: none;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}

/* ----------------------------------------
* gloval nav & primary nav
---------------------------------------- */
#gnav {
  background: #47b39d;
  margin: 0 0 0 auto;
  float: right;
  text-align: right;
}
#gnav .sub-menu {
  z-index: 10;
}
#gnav ul li {
  display: inline-block;
  position: relative;
}
#gnav ul li:hover a {
  background: #57bca8;
}
#gnav ul li.current-menu-item a {
  background: #57bca8;
}
#gnav ul li a {
  display: block;
  padding: 32px 12px;
  line-height: 28px;
  color: #fff;
  background: #47b39d;
  text-decoration: none;
  -webkit-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
#gnav ul li a:hover {
  color: #fff;
  background: #57bca8;
}
#gnav ul li a:hover .sub-menu {
  display: block;
}
#gnav ul li .sub-menu {
  font-size: 14px;
  text-align: left;
  display: none;
  position: absolute;
  width: 200px;
  background: #fff;
  border: 1px #e5e5e5 solid;
}
#gnav ul li .sub-menu li {
  float: none;
  margin-left: 0;
  border-bottom: 1px #e5e5e5 solid;
  display: block;
}
#gnav ul li .sub-menu li:list-child {
  border-bottom: none;
}
#gnav ul li .sub-menu li a {
  color: #3b4552;
  background: #fff;
  padding: 10px 15px;
}
#gnav ul li .sub-menu li a:hover {
  background: #fafafa;
  color: #3b4552;
}
#gnav ul li .sub-menu .sub-menu {
  left: 100%;
  top: -1px;
}

#header-right {
  height: 92px;
  float: right;
}

#header-fnav-area,
#header-gnav-area {
  float: right;
}

#header-fnav-area {
  width: 150px;
  position: relative;
}
#header-fnav-area #header-fnav-btn a {
  display: block;
  padding: 22px 12px;
  font-size: 28px;
  height: 92px;
  text-align: center;
  background: #57bca8;
  display: flex;
  justify-content: center;
}
#header-fnav-area #header-fnav-btn a:hover {
  text-decoration: none;
}
#header-fnav-area #header-fnav {
  z-index: 10;
  font-size: 14px;
  text-align: left;
  display: none;
  position: absolute;
  right: 0;
  width: 200px;
  background: #fff;
  border: 1px #e5e5e5 solid;
}
#header-fnav-area #header-fnav li {
  float: none;
  margin-left: 0;
  border-bottom: 1px #e5e5e5 solid;
  display: block;
}
#header-fnav-area #header-fnav li:list-child {
  border-bottom: none !important;
}
#header-fnav-area #header-fnav li a {
  color: #3b4552;
  background: #fff;
  padding: 10px 15px;
  display: block;
}
#header-fnav-area #header-fnav li a:hover {
  background: #fafafa;
  color: #3b4552;
  text-decoration: none;
}

/* ----------------------------------------
* content
---------------------------------------- */
#content {
  padding: 52px 0;
}
#content .wrap {
  overflow: visible;
}
#content .wp-caption {
  max-width: 100%;
  border: 1px solid #e5e5e5;
  text-align: center;
  padding: 5px;
  margin-bottom: 12px;
}
#content .wp-caption-text {
  padding: 12px 16px;
  margin-bottom: 0;
  text-align: center;
}

/* ----------------------------------------
* main
---------------------------------------- */
.cat-content,
article.post,
article.page {
  margin-bottom: 60px;
  background: #fff;
  border: 1px #e5e5e5 solid;
}

.post-header {
  padding: 56px 64px 46px;
  position: relative;
  border-bottom: 1px solid #e5e5e5;
}
.post-header .cat-name {
  margin-bottom: 20px;
}
.post-header .cat-name span {
  border: 1px solid #47b39d;
  color: #47b39d;
  display: inline-block;
  padding: 4px 16px;
  font-size: 13px;
}

.post-title {
  font-size: 32px;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 36px;
}
body.page .post-title {
  margin-bottom: 0;
}
.post-title a {
  color: #241913;
}
.post-title a:hover {
  color: #ff6c00;
}

.post-content h2.post-title {
  font-weight: normal;
}

.post-title a {
  color: #3b4552;
}
.post-title a:hover {
  color: #ff6c00;
  text-decoration: none;
}

.cat-content .post-header,
article.page .post-header {
  padding: 56px 64px 30px;
  margin-bottom: 20px;
  background: #fff;
}

.post-meta-area {
  margin: 0;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.post-meta-area ul {
  margin: 0;
}
.post-meta-area .post-meta .date {
  padding: 12px 40px;
}
.post-meta-area .post-meta .date .datetime {
  font-size: 1.1em;
}
.post-meta-area .post-meta-comment {
  text-align: center;
  margin-left: auto;
  display: flex;
  padding: 0;
}
.post-meta-area .post-meta-comment li {
  padding: 12px 24px;
  border-left: 1px solid #e5e5e5;
}
.comments .fa-comments {
  top: 2px;
}
.post-thumbnail img {
  width: 100%;
  height: auto;
}

.post-content {
  padding: 30px 64px 10px;
}
.post-content hr {
  border-bottom: 1px solid #eee;
  margin: 20px 0;
  clear: both;
}
.post-content p,
.post-content ul,
.post-content ol,
.post-content dl,
.post-content blockquote,
.post-content pre,
.post-content table {
  margin-bottom: 2em;
}
.post-content ul {
  list-style: disc;
}
.post-content ol {
  list-style: decimal;
}
.post-content ul,
.post-content ol {
  margin-left: 30px;
}
.post-content ul > ul,
.post-content ul > ol,
.post-content ol > ol,
.post-content ol > ul {
  margin-bottom: 0px;
}
.post-content dl dt {
  font-weight: bold;
}
.post-content dl dd {
  margin-left: 30px;
}
.post-content pre {
  padding: 20px;
  overflow: scroll;
  font-family: "Courier", monospace;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  font-weight: bold;
}
.post-content h1 {
  margin: 32px 0;
  font-size: 36px;
  clear: both;
  font-weight: normal;
}
.post-content h2 {
  margin: 80px 0 32px -74px;
  padding: 16px 16px 16px 56px;
  font-size: 28px;
  clear: both;
  font-weight: normal;
  border-left: 10px solid #131d2a;
  background: #3b4552;
  color: #fff;
}
.post-content h3 {
  font-size: 24px;
  margin: 48px 0 24px;
  padding: 20px 0;
  clear: both;
  font-weight: normal;
  border-bottom: 2px solid #3b4552;
  line-height: 1;
}
.post-content h4 {
  font-size: 20px;
  font-weight: normal;
  margin: 30px 0 16px;
  padding: 0 0 0 8px;
  border-left: 5px solid #131d2a;
  clear: both;
}
.post-content h5 {
  font-size: 16px;
  margin: 30px 0 16px;
  clear: both;
}
.post-content h6 {
  font-size: 16px;
  margin: 30px 0 16px;
  clear: both;
}
.post-content blockquote {
  clear: both;
  margin: 0 0 28px;
  padding: 30px 20px 35px 55px;
  position: relative;
  border: 1px #e5e5e5 solid;
  background: #fafafa;
}
.post-content blockquote:before {
  font-size: 36px;
  color: #e7e7e7;
  position: absolute;
  top: 20px;
  left: 10px;
}
.post-content blockquote cite {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 12px;
  color: #808080;
}
.post-content table {
  border: 1px #ddd solid;
  max-width: 100%;
}
.post-content table th,
.post-content table td {
  padding: 8px 10px;
  border: #ddd solid 1px;
}
.post-content table th {
  color: #fff;
}
.post-content table thead th {
  background: #5e6265;
}
.post-content table tbody th {
  background: #919598;
}
.post-content table.table-line table,
.post-content table.table-line th,
.post-content table.table-line td {
  border-color: #fff;
}
.post-content table.table-line th {
  background: transparent;
  color: #241913;
  font-weight: bold;
}
.post-content table.table-line thead th {
  background: #5e6265;
  color: #fff;
}
.post-content table.table-line tr {
  background: #eee;
}
.post-content table.table-line tr:nth-child(2n + 1) {
  background: #ddd;
}
.post-content img.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.post-content img.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}

.post-content h2:first-child {
  margin-top: 0;
}

.post-cta {
  background: #131d2a;
  color: #fff;
}
.post-cta .post-cta-inner {
  padding: 30px 45px;
}
.post-cta .cta-post-title {
  padding: 30px 45px;
  font-size: 36px;
  margin-bottom: 14px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.post-cta .post-cta-img {
  float: right;
  width: 230px;
  margin: 0 0 20px 20px;
}
.post-cta .post-cta-cont {
  overflow: hidden;
}
.post-cta .post-cta-btn {
  margin: 10px 0;
}
.post-cta .post-cta-btn a {
  background: #f86222;
  color: #fff;
  border-radius: 8px;
  display: block;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  width: 60%;
  margin: 0 auto 20px;
}
.post-cta .post-cta-btn a:hover {
  background: #fa8553;
}
.post-cta p {
  margin-bottom: 1em;
}
.post-cta .btn {
  width: 100%;
  display: block;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  padding: 14px 0;
  -webkit-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
  background: #3b4552;
}
.post-cta .btn:hover {
  text-decoration: none;
  background: #ff6c00;
}

.post-footer {
  border-radius: 0;
  padding: 20px 64px;
  overflow: hidden;
  clear: both;
}
.post-footer ul {
  overflow: hidden;
}
.post-footer ul li a:hover {
  text-decoration: underline;
}
.post-footer .bzb-sns-btn {
  padding: 30px 0;
}

.post-footer .bzb-sns-btn li {
  vertical-align: top;
}
.post-footer .bzb-sns-btn li .fb_iframe_widget span {
  vertical-align: top !important;
}

.post-footer-list {
  padding: 20px 0;
}

.post-author {
  margin-bottom: 40px;
  padding: 40px 45px;
  border: 1px solid #e5e5e5;
  color: #241913;
  background: #fff;
}
.post-author .post-author-img {
  height: 100%;
  float: left;
}
.post-author .post-author-img img {
  width: 100px;
  height: auto;
  border: 1px solid #e5e5e5;
}
.post-author .post-author-img .inner {
  padding: 0;
}
.post-author .row {
  margin-right: -10px;
  margin-left: -10px;
}
.post-author .row .gr1,
.post-author .row .gr2,
.post-author .row .gr3,
.post-author .row .gr4,
.post-author .row .gr5,
.post-author .row .gr6,
.post-author .row .gr7,
.post-author .row .gr8,
.post-author .row .gr9,
.post-author .row .gr10,
.post-author .row .gr11,
.post-author .row .gr12 {
  padding-left: 10px;
  padding-right: 10px;
}
.post-author a {
  color: #3b4552;
}
.post-author .post-author-meta {
  color: #241913;
  margin-left: 120px;
}
.post-author .post-author-meta h2 {
  margin: 0 40px 10px 0;
}
.post-author .post-author-meta p {
  margin: 0 40px 20px 0;
}
.post-header-meta {
  overflow: hidden;
  margin-bottom: 26px;
}
.post-header-meta .bzb-sns-btn {
  padding: 20px 0 10px;
  float: left;
  width: 400px;
  overflow: hidden;
}
.post-header-meta .post-header-category {
  float: right;
  width: 300px;
  text-align: right;
  padding: 20px 0 10px;
}

.bzb-sns-btn {
  padding: 0;
  margin: 0;
  font-size: 0;
}
.bzb-sns-btn li {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  margin: 4px;
}

.comment-list > .comment {
  margin-bottom: 40px;
  border-bottom: 1px #eee solid;
}

.comment-list > .comment > .comment-body {
  padding: 0 20px;
  margin-bottom: 20px;
}

.comment-list .children {
  margin-left: 45px;
}

@media screen and (max-width: 767px) {
  .comment-list .children {
    margin-left: 0;
  }
}
.comment-list .children .comment-body {
  padding: 20px 30px;
  margin-bottom: 20px;
  background: #f7f7f7;
}

.comment-author {
  float: left;
  vertical-align: top;
  font-size: 12px;
  margin-left: 10px;
}
.comment-author img {
  vertical-align: top;
}

.comment-meta {
  font-size: 12px;
  margin-bottom: 12px;
}

.reply a {
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 12px;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.reply a:before {
  content: "";
  position: absolute;
  mask: url(./lib/images/icon/reply.svg) no-repeat;
  mask-size: contain;
  background-color: #383838;
  width: 13px;
  height: 13px;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -11px;
}
.reply a:hover {
  text-decoration: none;
}

.comment-form-comment {
  margin-bottom: 0;
  width: 100%;
}

.comment-form-comment label {
  display: none;
}

.form-allowed-tags {
  font-size: 12px;
  margin-bottom: 20px;
  display: none;
}

.comment-meta:after {
  content: " ";
  display: block;
  clear: both;
}

.comments-title {
  font-size: 24px;
  padding: 20px 0;
  margin-bottom: 30px;
  margin-top: 0;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
  overflow: hidden;
  margin: 10px 0;
}
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
  font-size: 12px;
}

.form-submit #submit {
  width: 240px;
  margin-top: 2em;
  line-height: 24px;
  border: none;
  border-radius: 3px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.form-submit #submit:hover {
  cursor: pointer;
}

.comment-form-comment textarea {
  width: 100%;
  padding-left: 2%;
  padding-right: 2%;
}
.comment-form {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.comment-form-author,
.comment-form-email {
  width: 50%;
  margin: 0;
}
.comment-form-author label,
.comment-form-author input,
.comment-form-email label,
.comment-form-email input {
  width: 90%;
  margin: 0 0 10px;
}
.comment-form-cookies-consent {
  margin-bottom: 0;
  font-size: 14px;
  width: 100%;
}

/* loop
---------------------------------------- */
.cat-content {
  background: #fff;
  padding: 40px;
  margin-bottom: 30px;
}

.post-loop-wrap article {
  width: 100%;
  margin: 0 0 60px;
}
.post-loop-wrap article p {
  margin-top: 0;
}
.post-loop-wrap .post-title {
  margin-bottom: 0;
}
.post-loop-wrap .post-thumbnail {
  width: 100%;
}
.post-loop-wrap .post-thumbnail img {
  max-width: 100%;
  height: auto;
}
.post-loop-wrap .more-link {
  border: 1px #3b4552 solid;
  padding: 8px 20px;
  margin-bottom: 64px;
  color: #3b4552;
}
.post-loop-wrap .more-link:hover {
  background: #3b4552;
  color: #fff;
  text-decoration: none;
}
.post-loop-wrap .post-footer {
  border-top: 1px #eee solid;
  padding: 0;
  overflow: hidden;
}
.post-loop-wrap .post-footer a.morelink {
  display: block;
  background: #3b4552;
  color: #fff;
  text-align: center;
  padding: 12px;
}

/* pager */
.pagination {
  clear: both;
  padding: 20px 0;
  position: relative;
  font-size: 16px;
  line-height: 22px;
  overflow: hidden;
}

.pagination a {
  background: #fff;
}

.pagination a,
.pagination > span {
  display: block;
  float: left;
  margin: 2px 2px 2px 0;
  padding: 6px 9px 5px 9px;
  text-decoration: none;
  width: auto;
  color: #241913;
}

.pagination a:hover {
  background: #999999;
  color: #fff;
}

.pagination .current {
  padding: 6px 9px 5px 9px;
  background: #999999;
  color: #fff;
}

.post-content .pagination {
  margin: 0;
}

.post-content .pagination > span {
  background: #999999;
  color: #ffffff;
}

/* ----------------------------------------
* side
---------------------------------------- */
.side-widget-area {
  padding: 0;
}

.side-widget {
  margin-bottom: 40px;
  padding-bottom: 40px;
  line-height: 1.6;
  font-size: 14px;
}
.side-widget .side-title {
  margin: 0 0 32px;
  font-size: 15px;
  background: #ebebeb;
  border: 1px solid #e4e4e4;
}
.side-widget a {
  color: #47b39d;
  text-decoration: underline;
  display: block;
}
.side-widget a:hover {
  color: #47b39d;
  text-decoration: none;
}
.side-widget ul li {
  padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
}
.side-widget .side-title {
  margin: 0 0 13px;
  padding: 8px;
  font-size: 16px;
}
.side-widget.widget_recent_comments a {
  background: none;
}
.side-widget .post-date {
  margin: 0 0 0 36px;
  font-size: 13px;
  color: #999999;
}
.side-widget .post-share-fb .pas {
  display: none;
}

.widget_categories a {
  display: inline-block;
}

/* widget_views */
.widget_views a {
  display: inline;
}

/* search */
.widget_search {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e5e5;
  padding-bottom: 0;
  border-radius: 2px;
}
.widget_search form div {
  position: relative;
  padding-right: 40px;
}
.widget_search label {
  display: none;
}
.widget_search input[type="text"] {
  line-height: 18px;
  padding: 8px 13px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  border: none;
  float: left;
}
.widget_search button {
  float: right;
  position: absolute;
  top: 0;
  right: 0;
  vertical-align: top;
  line-height: 18px;
  border: none;
  border-radius: 3px;
  width: 40px;
  padding: 8px 5px;
  -webkit-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
  background: transparent;
  font-size: 14px;
  color: #5e6265;
}
.widget_search button:hover {
  cursor: pointer;
}

#searchform form input[type="text"],
#searchform form input[type="email"],
#searchform form input[type="url"],
#searchform form input[type="tel"],
#searchform form input[type="number"],
#searchform form input[type="date"],
#searchform form textarea {
  border-radius: 3px;
  padding: 12px;
  max-width: 100%;
  font-size: 16px;
}
#searchform form textarea {
  width: 80%;
}
#searchform form input[type="submit"] {
  padding: 12px 20px;
}

/* comment */
.recentcomments {
  color: #808080;
  font-size: 12px;
}
.recentcomments a {
  color: #241913;
  font-size: 14px;
}

/* 実装中止----------- */
/* calendar */
.widget_calendar {
  border-radius: 3px;
  font-size: 16px;
}
.widget_calendar .side-widget-inner {
  border-radius: 3px;
  padding: 0;
}
.widget_calendar table {
  width: 100%;
}
.widget_calendar caption {
  border-radius: 3px 3px 0 0;
  padding: 14px 20px;
  margin: 0 -20px 20px;
  font-size: 18px;
  text-align: center;
}
.widget_calendar a {
  color: #666;
}
.widget_calendar li {
  margin-bottom: 1em;
}
.widget_calendar thead,
.widget_calendar tfoot,
.widget_calendar tbody {
  margin: 0 20px;
}
.widget_calendar th,
.widget_calendar td {
  text-align: center;
  white-space: nowrap;
}
.widget_calendar tbody a {
  display: block;
}
.widget_calendar tbody a:hover {
  text-decoration: none;
}

/* follow */
#side .share-list-wrap {
  margin: 0 -20px 20px;
  background: #fff;
  padding: 20px;
}
#side .share-list-wrap .post-share-list1,
#side .share-list-wrap .post-share-list2,
#side .share-list-wrap .post-share-list3,
#side .share-list-wrap .post-share-list4 {
  overflow: hidden;
  margin-left: -1%;
}
#side .share-list-wrap .post-share-list1 li,
#side .share-list-wrap .post-share-list2 li,
#side .share-list-wrap .post-share-list3 li,
#side .share-list-wrap .post-share-list4 li {
  float: left;
  width: 24%;
  margin-left: 1%;
}
#side .share-list-wrap .post-share-list1 li a,
#side .share-list-wrap .post-share-list2 li a,
#side .share-list-wrap .post-share-list3 li a,
#side .share-list-wrap .post-share-list4 li a {
  border-radius: 100%;
  background: #fff;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 60px;
  height: 60px;
  font-size: 32px;
  color: #5e6265;
}
#side .share-list-wrap .post-share-list1 li a .follow-on,
#side .share-list-wrap .post-share-list1 li a .big,
#side .share-list-wrap .post-share-list2 li a .follow-on,
#side .share-list-wrap .post-share-list2 li a .big,
#side .share-list-wrap .post-share-list3 li a .follow-on,
#side .share-list-wrap .post-share-list3 li a .big,
#side .share-list-wrap .post-share-list4 li a .follow-on,
#side .share-list-wrap .post-share-list4 li a .big {
  display: none;
}
#side .share-list-wrap .post-share-list1 li.post-share-facebook a:hover,
#side .share-list-wrap .post-share-list2 li.post-share-facebook a:hover,
#side .share-list-wrap .post-share-list3 li.post-share-facebook a:hover,
#side .share-list-wrap .post-share-list4 li.post-share-facebook a:hover {
  color: #305097;
}
#side .share-list-wrap .post-share-list1 li.post-share-twitter a:hover,
#side .share-list-wrap .post-share-list2 li.post-share-twitter a:hover,
#side .share-list-wrap .post-share-list3 li.post-share-twitter a:hover,
#side .share-list-wrap .post-share-list4 li.post-share-twitter a:hover {
  color: #00aced;
}
#side .share-list-wrap .post-share-list1 li.post-share-feedly a:hover,
#side .share-list-wrap .post-share-list2 li.post-share-feedly a:hover,
#side .share-list-wrap .post-share-list3 li.post-share-feedly a:hover,
#side .share-list-wrap .post-share-list4 li.post-share-feedly a:hover {
  color: #2bb24c;
}

/* author */
#side-author {
  overflow: hidden;
  font-size: 12px;
}
#side-author h4 {
  padding: 12px 0;
  margin-bottom: 20px;
  font-size: 16px;
}
#side-author .side-author-img {
  float: left;
  width: 100px;
}
#side-author .side-author-meta {
  float: right;
  width: 180px;
}

/* ----------------------------------------
* footer
---------------------------------------- */
/* Facebook Like Box width: 100% */
.post-share-fb.side-widget {
  text-align: center;
}
div.post-share-fb .fbcomments,
div.post-share-fb .fb_iframe_widget,
div.post-share-fb .fb_iframe_widget[style],
div.post-share-fb .fb_iframe_widget iframe[style],
div.post-share-fb .fbcomments iframe[style] *,
div.post-share-fb .fb_iframe_widget span {
  max-width: 100% !important;
}
#footer .fbcomments,
#footer .fb_iframe_widget,
#footer .fb_iframe_widget[style],
#footer .fb_iframe_widget iframe[style],
#footer .fbcomments iframe[style] *,
#footer .fb_iframe_widget span {
  max-width: 100% !important;
}

#footer {
  color: #fff;
  border-top: 8px solid #3b4552;
}
#footer .fb-like-box,
#footer .fb-like-box > span,
#footer iframe {
  width: 100% !important;
  box-sizing: border-box;
}
#footer .footer-logo {
  font-size: 24px;
}
#footer a {
  color: #fff;
}
#footer a:hover {
  color: #ccc;
}
#footer .wrap {
  padding: 30px 0;
}
#footer .post-share {
  padding-right: 0;
  padding-left: 0;
}
#footer .row {
  margin-left: -15px;
  margin-right: -15px;
}
#footer .row .gr1,
#footer .row .gr2,
#footer .row .gr3,
#footer .row .gr4,
#footer .row .gr5,
#footer .row .gr6,
#footer .row .gr7,
#footer .row .gr8,
#footer .row .gr9,
#footer .row .gr10,
#footer .row .gr11,
#footer .row .gr12 {
  padding-left: 15px;
  padding-right: 15px;
}

#footer-brand-area {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #3b4552;
}

#footer-content-area {
  font-size: 14px;
}
#footer-content-area h4 {
  font-size: 16px;
}
#footer-content-area i.fa {
  margin-right: 26px;
}
#footer-content-area #footer-cont-about li,
#footer-content-area #footer-cont-content li {
  position: relative;
}
#footer-content-area #footer-cont-about li:before,
#footer-content-area #footer-cont-content li:before {
  content: "";
  mask: url(./lib/images/icon/angle-right.svg) no-repeat;
  mask-size: contain;
  width: 10px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
}
#footer-content-area #footer-cont-about li a,
#footer-content-area #footer-cont-content li a {
  padding: 8px 12px 8px 14px;
  display: inline-block;
}
#footer-content-area #footer-cont-about li a:hover,
#footer-content-area #footer-cont-content li a:hover {
  text-decoration: none;
}
#footer-content-area #footer-cont-sns a {
  display: flex;
  padding: 8px 12px 8px 0;
}
#footer-content-area #footer-cont-sns a:hover {
  text-decoration: none;
}

.footer-01 {
  background: #031731;
  padding: 48px 0;
}
.footer-01 .footer-address {
  text-align: right;
}

@media screen and (max-width: 991px) {
  .footer-01 .footer-address {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .footer-01 .footer-address {
    margin-top: 24px;
  }
}

.footer-02 {
  background: #010a17;
}
.footer-02 .footer-copy {
  text-align: center;
  font-size: 12px;
}

/* ----------------------------------------
* pagetop
---------------------------------------- */
.pagetop {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 50px;
  color: #fff;
}
.pagetop span {
  display: block;
  border-radius: 25px;
  background: #2b2b2b;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 40px;
  font-size: 36px;
  opacity: 0.8;
}

@media screen and (max-width: 768px) {
  .pagetop {
    bottom: 8px;
    right: 8px;
  }
  .pagetop span {
    width: 45px;
    height: 45px;
    font-size: 28px;
  }
}

/* ----------------------------------------
* レスポンシブ
---------------------------------------- */
#header-nav-btn,
#gnav-sp {
  display: none;
}

@media screen and (max-width: 1200px) {
  .post-header,
  .post-author {
    padding: 36px;
  }

  .post-content,
  .post-footer {
    padding-left: 36px;
    padding-right: 36px;
  }
  /* end start */
}
@media screen and (max-width: 991px) {
  /* tablet */
  .wrap {
    width: auto;
    margin: 0 24px;
  }

  /* header */
  #header {
    padding: 0;
  }
  #header .wrap {
    width: auto;
    margin: 0 24px;
  }

  #header-nav-btn {
    display: block;
    width: 116px;
    line-height: 92px;
    float: right;
  }
  #header-nav-btn a {
    display: block;
    text-align: center;
    display: block;
    font-size: 20px;
    background: #3b4552;
  }

  #header-fnav-area {
    display: none;
  }

  /* gnav */
  #gnav {
    display: none;
  }

  .dummy {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 10;
  }

  #gnav-sp {
    display: none;
    background: #3b4552;
    display: block;
    color: #fff;
    font-family:
      "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic,
      Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",
      sans-serif;
    z-index: 100;
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
  }
  #gnav-sp .wrap {
    width: 94%;
    margin: 0 3%;
    padding: 36px 0;
  }
  #gnav-sp .wrap a {
    color: #fff;
  }
  #gnav-sp #header-cont-content h4,
  #gnav-sp #header-cont-about h4,
  #gnav-sp #header-cont-sns h4 {
    font-weight: bold;
    margin: 16px 0 0;
  }
  #gnav-sp #header-cont-content li,
  #gnav-sp #header-cont-about li,
  #gnav-sp #header-cont-sns li {
    font-size: 14px;
  }
  #gnav-sp #header-cont-content li a,
  #gnav-sp #header-cont-about li a,
  #gnav-sp #header-cont-sns li a {
    padding: 10px 12px;
  }
  #gnav-sp #header-cont-content li a {
    display: block;
    position: relative;
  }
  #gnav-sp #header-cont-content li a:before {
    content: "";
    mask: url(./lib/images/icon/angle-right.svg) no-repeat;
    mask-size: contain;
    background-color: #fff;
    width: 10px;
    height: 10px;
    position: absolute;
    mask: url(./lib/images/icon/angle-right.svg) no-repeat;
    mask-size: contain;
    background: #fff;
    width: 10px;
    height: 11px;
    top: 15px;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  #gnav-sp #header-cont-content .children {
    display: none;
  }
  #gnav-sp #header-cont-content li .sub-menu {
    margin-bottom: 0;
  }
  #gnav-sp #header-cont-about li .sub-menu li a::before,
  #gnav-sp #header-cont-content li .sub-menu li a::before {
    display: none;
  }
  #gnav-sp #header-cont-about li a,
  #gnav-sp #header-cont-content li a {
    text-decoration: none !important;
  }
  #gnav-sp #header-cont-about li.menu-item-has-children > a,
  #gnav-sp #header-cont-content li.menu-item-has-children > a {
    width: 92%;
    display: inline-block;
  }
  #gnav-sp #header-cont-about li.menu-item-has-children span.dropdown-toggle,
  #gnav-sp #header-cont-content li.menu-item-has-children span.dropdown-toggle {
    mask-image: url(./lib/images/icon/angle-down.svg);
    mask-repeat: no-repeat;
    mask-size: 10px auto;
    mask-position: center center;
    background-color: #fff;
    width: 5%;
    height: 20px;
    margin-right: 2%;
    display: none;
  }
  #gnav-sp #header-cont-about li.nav-open span.dropdown-toggle,
  #gnav-sp #header-cont-content li.nav-open span.dropdown-toggle {
    mask-image: url(./lib/images/icon/angle-up.svg);
  }
  #gnav-sp #header-cont-about li.menu-item-has-children span.dropdown-toggle,
  #gnav-sp #header-cont-content li.menu-item-has-children span.dropdown-toggle {
    display: inline-block;
    position: relative;
    top: 3px;
  }
  #gnav-sp #header-cont-about li .sub-menu li span.dropdown-toggle,
  #gnav-sp #header-cont-content li .sub-menu li span.dropdown-toggle {
    display: none !important;
  }
  #gnav-sp #footer-nav li a {
    display: block;
    padding: 8px 12px;
    position: relative;
  }
  #gnav-sp #footer-nav li a:before {
    content: "";
    mask: url(./lib/images/icon/angle-right.svg) no-repeat;
    mask-size: contain;
    background-color: #fff;
    width: 10px;
    height: 10px;
    position: absolute;
    mask: url(./lib/images/icon/angle-right.svg) no-repeat;
    mask-size: contain;
    background: #fff;
    width: 10px;
    height: 11px;
    top: 14px;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  #gnav-sp #footer-nav .children {
    display: none;
  }
  #gnav-sp #header-cont-sns li a {
    display: block;
    padding: 8px 12px 8px 0;
  }

  .cat-content .post-header,
  article.page .post-header,
  article.post .post-header {
    padding: 56px 44px;
  }

  article.page .post-content {
    padding: 40px;
  }

  .post-header {
    padding: 56px 44px 0;
  }

  .post-content {
    padding: 40px;
  }
  .post-content h2 {
    margin-left: -52px;
  }

  .post-meta-area {
    background: #fff;
    color: #241913;
  }
  .post-meta-area .post-meta {
    text-align: left;
  }
  .post-meta-area .post-meta .date {
    background: transparent;
    text-align: left;
  }
  .post-meta-area .bzb-sns-btn {
    height: auto;
  }
  .post-meta-area .bzb-sns-btn .sharrre {
    margin: 0 5px 0 0;
    float: left !important;
    width: 20%;
    overflow: hidden;
  }
  .post-meta-area .bzb-sns-btn .sharrre.twitter a,
  .post-meta-area .bzb-sns-btn .sharrre.facebook a,
  .post-meta-area .bzb-sns-btn .sharrre.hatena a {
    background: transparent;
    display: block;
    padding: 4px 24px;
    color: #241913;
  }
  .post-meta-area .bzb-sns-btn .sharrre.twitter a .share,
  .post-meta-area .bzb-sns-btn .sharrre.facebook a .share,
  .post-meta-area .bzb-sns-btn .sharrre.hatena a .share {
    display: none;
    text-align: center;
    float: left;
  }
  .post-meta-area .bzb-sns-btn .sharrre.twitter a:hover,
  .post-meta-area .bzb-sns-btn .sharrre.facebook a:hover,
  .post-meta-area .bzb-sns-btn .sharrre.hatena a:hover {
    background: transparent;
  }
  .post-meta-area .bzb-sns-btn .s_buttons {
    font-size: 14px;
    padding-top: 20px;
  }
  .post-meta-area .loop-comment-icon {
    padding: 4px 12px;
    background: transparent !important;
    text-align: center;
    float: right;
  }

  #footer-facebook {
    display: none;
  }

  #footer-list-area {
    width: 100%;
  }
  /* tablet end */
}
@media screen and (max-width: 767px) {
  /* phone */
  .wrap {
    overflow: hidden;
  }

  .post-title {
    font-size: 21px;
    margin-bottom: 20px;
  }

  .wrap {
    margin: 0 12px;
  }

  #main {
    width: 100%;
    float: none;
  }

  #side {
    width: 100%;
    float: none;
  }

  .left-content #main {
    width: 100%;
    float: none;
  }
  .left-content #side {
    width: 100%;
    float: none;
  }

  .right-content #main {
    width: 100%;
    float: none;
  }
  .right-content #side {
    width: 100%;
    float: none;
  }

  .one-column #content .wrap {
    width: 94%;
    margin: 0 3%;
  }
  .one-column #content .wrap #main {
    width: 100%;
    float: none;
  }
  .one-column #content .wrap #side {
    width: 100%;
    float: none;
  }

  /* header */
  #header {
    padding: 0;
  }
  #header .wrap {
    padding: 0;
    margin: 0 12px;
  }
  #header #logo {
    float: none;
    height: 78px;
    line-height: 78px;
  }
  #header #logo img {
    max-height: 62px;
  }
  #header #header-right {
    height: auto;
  }
  #header #header-primary-nav {
    display: none;
  }

  #header-nav-btn {
    display: block;
    width: auto;
    margin: 0;
    line-height: 92px;
    float: none;
  }
  #header-nav-btn a {
    display: block;
    text-align: center;
    font-size: 20px;
    padding: 4px 0;
    line-height: 1.2;
    background: #3b4552;
    width: 100%;
  }
  #header-nav-btn a:hover {
    text-decoration: none;
  }

  #gnav-sp {
    display: none;
    top: 112px;
  }
  #gnav-sp ul {
    margin-bottom: 20px;
  }
  #gnav-sp #header-cont-content ul {
    margin-left: 0;
  }
  #gnav-sp #header-cont-content li {
    margin-left: 0;
    float: left;
    width: 100%;
  }

  /* single */
  .cat-content .post-header,
  article.page .post-header,
  article.post .post-header {
    padding: 20px;
  }

  .post-author {
    padding: 20px;
  }
  .post-author .post-author-meta {
    padding-top: 12px;
    margin-left: 0;
  }
  .post-author .post-author-meta h2 {
    margin: 0 0 4px;
  }
  .post-author .post-author-meta p {
    margin-right: 0;
    font-size: 15px;
  }
  .post-author .post-author-img {
    float: none;
    text-align: center;
  }

  .post-meta-area .post-meta,
  .post-meta-area .post-meta-comment {
    padding: 0;
  }
  .post-meta-area .post-meta .date {
    padding: 8px 20px;
  }
  .post-meta-area .post-meta-comment .author {
    text-align: left;
  }
  .post-content,
  .post-footer {
    padding: 20px;
  }

  .post-cta .cta-post-title {
    padding: 12px 20px;
    font-size: 18px;
  }
  .post-cta .post-cta-inner {
    padding: 0;
  }
  .post-cta .post-cta-cont {
    padding: 12px 20px;
  }
  .post-cta .post-cta-cont .post-cta-img {
    float: none;
    margin: 0 0 12px;
    width: 100%;
  }
  .post-cta .post-cta-cont .post-cta-img {
    text-align: center;
  }
  .post-cta .post-cta-btn a {
    width: 100%;
  }

  .comment-form-author,
  .comment-form-email {
    width: 100%;
  }
  .comment-form-author input,
  .comment-form-email input {
    width: 100%;
  }
  /* phone end */
}

/* bzb_sns_btn 2016.12.20 */

.bzb-sns-btn {
  display: table-cell;
}
.bzb-sns-btn li {
  vertical-align: top;
  font-size: auto;
}
.bzb-sns-btn li.bzb-facebook {
  width: 110px;
}
.bzb-sns-btn li.bzb-twitter {
  width: 75px;
}
.bzb-sns-btn li.bzb-pocket {
  width: 86px;
}
.fb_iframe_widget span {
  vertical-align: top !important;
}
.bzb-line a img {
  vertical-align: top !important;
}

/* h2 2016.12.20 */

@media screen and (max-width: 1200px) {
  .post-content h2 {
    margin: 80px 0 32px -46px;
    padding: 16px 16px 16px 36px;
  }
}

@media screen and (max-width: 767px) {
  .post-content h2 {
    margin: 80px 0 32px -30px;
    padding: 16px 16px 16px 20px;
  }
}

/* ----------------------------------------
* table scroll
---------------------------------------- */
.table-wrap {
  overflow-x: scroll;
  white-space: nowrap;
  margin-bottom: 48px;
}

.table-grad {
  position: relative;
  white-space: nowrap;
}

.table-grad:after {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 80%,
    white 100%
  );
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  table img {
    max-width: initial;
  }
}

/*記事下ウィジェットエリア*/
.under_post_area {
  padding: 40px;
}
@media screen and (max-width: 767px) {
  .under_post_area {
    padding: 40px 20px;
  }
}

span.count {
  display: block;
  margin-left: 16px;
}

#fnav-h-ul .sub-menu li a {
  text-indent: 1em;
}
#fnav-h-ul .sub-menu {
  border-top: 1px #e5e5e5 solid;
}
.color03 #header-fnav-area #header-fnav li:last-child {
  border-bottom: 0;
}

/* single */
.single .post-meta-area .post-meta .modified,
.single .post-meta-area .post-meta .published {
  display: inline-block;
  padding: 12px 16px;
  position: relative;
  font-size: 14px;
}
.single .post-meta-area .post-meta .published::before {
  content: "";
  mask: url(./lib/images/icon/clock.svg) no-repeat;
  mask-size: contain;
  width: 13px;
  height: 13px;
  background-color: #383838;
  position: relative;
  display: inline-block;
  top: 1px;
  margin-right: 4px;
}
.single .post-meta-area .post-meta .modified::before {
  content: "";
  mask: url(./lib/images/icon/modified.svg) no-repeat;
  mask-size: contain;
  width: 12px;
  height: 12px;
  background-color: #383838;
  position: relative;
  display: inline-block;
  top: 1px;
  margin-right: 4px;
}

/* 投稿詳細ページでは X / はてブ(B!) を非表示 */
.single .bzb-sns-btn li.bzb-twitter,
.single .bzb-sns-btn li.bzb-hatena {
  display: none !important;
}

/*meta*/
@media screen and (max-width: 550px) {
  .post-meta-area {
    flex-direction: column;
  }
  .post-meta-area .post-meta {
    border-bottom: 1px solid #e5e5e5;
  }
}

/* Css for footer menu SP */
@media screen and (max-width: 767px) {
  #footer-list-area ul li ul.sub-menu li a {
    text-indent: 1em;
  }
  #footer-list-area ul li ul.sub-menu li::before {
    display: none !important;
  }
  #footer-content-area #footer-cont-about li:before,
  #footer-content-area #footer-cont-content li:before {
    top: 14px;
    bottom: unset;
  }
  #footer-list-area ul li.menu-item-has-children a,
  #footer-content-area ul li.menu-item-has-children .dropdown-toggle a {
    width: 93%;
    display: inline-block;
  }
  #footer-list-area ul li.menu-item-has-children .dropdown-toggle,
  #footer-content-area ul li.menu-item-has-children .dropdown-toggle {
    mask-image: url(./lib/images/icon/angle-down.svg);
    mask-repeat: no-repeat;
    mask-size: 10px auto;
    mask-position: center center;
    background-color: #fff;
    width: 5%;
    height: 20px;
    margin-right: 2%;
    display: inline-block;
  }
  #footer-list-area ul li.nav-open span.dropdown-toggle,
  #footer-content-area ul li.nav-open span.dropdown-toggle {
    mask-image: url(./lib/images/icon/angle-up.svg);
  }
  #footer-list-area ul li.menu-item-has-children ul li .dropdown-toggle,
  #footer-content-area ul li.menu-item-has-children ul li .dropdown-toggle {
    display: none;
  }
}

#gnav-sp #header-cont-content h2,
#gnav-sp #header-cont-about h2,
#gnav-sp #header-cont-sns h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 16px 0 0;
}



/*=====================以下、追記=====================*/

/*-----共通-----*/
body{
  background: var(--base-color10);
}

p,h1,h2,h3,h4,h5,a{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 150%;
  margin: 0;
  padding: 0;
  color: var(--base-color50);
}

p{
  font-size: 18px;
  font-weight: 400;
}

h1{
  font-size: 64px;
  font-weight: 900;
}

h2{
  font-size: 44px;
  font-weight: 800;
}

h3{
  font-weight: 700;
}

a{
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

img{
  width: 100%;
}

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.main-button{
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing8);
  color: var(--base-color10);
  background: var(--cta-color);
  padding: 24px 60px;
  border-radius: 999px;
}

.sub-button{
  width: fit-content;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing8);
  color: var(--cta-color);
  border: 1px solid var(--cta-color);
  background: var(--base-color10);
  padding: 24px 60px;
  border-radius: 999px;
}

.main-button .icon,
.sub-button .icon{
  width: 24px;
  height: 24px;
}

.main-button p{
  width: auto !important;
  color: var(--base-color10) !important;
}

.sub-button p{
  width: auto !important;
}

.title-box{
  width: fit-content;
  margin: 0 auto;
}

.title-box h2{
  font-size: 44px;
  text-align: center;
  display: inline-block;
  margin-bottom: var(--spacing16);
}

.title-box .line-box{
  width: 100%;
  height: 6px;
  display: flex;
}

.title-box .line-box div:nth-child(1){
  width: calc(50% - 8px);
  margin-right: 8px;
  height: 100%;
  background: var(--main-color-c);
}

.title-box .line-box div:nth-child(2){
  width: calc(50% - 8px);
  margin-left: 8px;
  height: 100%;
  background: var(--main-color-b);
}

.title-area{
  margin-bottom: var(--spacing80);
}

.title-area .title-box{
  margin-bottom: var(--spacing60);
}

.title-area .title-area-p{
  text-align: center;
}

.cta-box{
  width: fit-content;
  margin: 0 auto;
}

.cta-box .cta-text{
  font-size: 24px;
  margin-bottom: var(--spacing28);
  text-align: center;
}

.cta-box .main-button{
  margin: 0 auto;
}

.thirdry-button{
  margin: 0 auto;
  width: fit-content;
  box-sizing: border-box;
  color: var(--base-color50);
  border: 1px solid var(--base-color50);
  padding: 12px 40px;
  border-radius: 999px;
  text-align: center;
  display: block;
  background: var(--base-color10);
  line-height: 100%;
}

.fourthry-button{
  margin: 0 auto;
  width: fit-content;
  box-sizing: border-box;
  color: var(--base-color10);
  padding: 24px 60px;
  border-radius: 999px;
  text-align: center;
  display: block;
  background: var(--base-color50);
  line-height: 100%;
}

section{
  width: 100%;
  padding: var(--section-padding);
  position: relative;
}

section > .bg{
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--bg-grd);
  z-index: -1;
}

.sp-br{
  display: none;
}

.icon{
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  p{
    font-size: 16px;
  }

  h1{
    font-size: 36px;
  }

  h2{
    font-size: 24px;
  }

  a{
    font-size: 18px;
  }

  .main-button{
    padding: 12px 32px;
  }

  .sub-button{
    padding: 12px 32px;
  }

  .title-box h2{
    font-size: 24px;
  }

  .title-box .line-box{
    height: 4px;
  }

  .title-box .line-box div:nth-child(1){
    width: calc(50% - 6px);
    margin-right: 6px;
  }

  .title-box .line-box div:nth-child(2){
    width: calc(50% - 6px);
    margin-left: 6px;
  }

  .title-area{
    margin-bottom: var(--spacing52);
  }

  .title-area .title-box{
    margin-bottom: var(--spacing28);
}

  .cta-box .cta-text{
    font-size: 18px;
    margin-bottom: var(--spacing24);
  }

  .sp-br{
    display: block;
  }
}

/*-----共通/achieve-box-----*/
.achieve-box{
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing40);
}

.achieve-box li{
  width: fit-content;
}

.achieve-box li h4{
  font-size: 28px;
  text-align: center;
}

.achieve-box li .num-box{
  display: flex;
  align-items: flex-end;
  gap: var(--spacing20);
  margin-top: var(--spacing20);
}

.achieve-box li .num-box img{
  width: 17%;
  max-width: 44px;
}

.achieve-box li .num-box .reverse{
  transform: scaleX(-1);
}

.achieve-box li .num-box .num{
  font-size: clamp(3.25rem, 0.26rem + 6.24vw, 5.25rem);
  color: var(--main-color-b);
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 50%;
}

.achieve-box li .num-box .num span{
  font-size: 28px;
}

@media screen and (max-width: 767px) {
  .achieve-sec .achieve-box{
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing32);
  }

  .achieve-sec .achieve-box li h4{
    font-size: 16px;
  }

  .achieve-sec .achieve-box li .num-box{
    gap: var(--spacing24);
    margin-top: var(--spacing8);
  }

  .achieve-sec .achieve-box li .num-box img{
    width: 28px;
  }

  .achieve-sec .achieve-box li .num-box .num{
    font-size: 52px;
  }

  .achieve-sec .achieve-box li .num-box .num span{
    font-size: 20px;
  }
}

/*-----共通/plan-list-----*/
.plan-list{
  width: calc(100% - 40px);
  margin: 0 auto;
  gap: var(--spacing80);
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing120);
}

.plan-list li{
  width: 28%;
  position: relative;
  background: var(--base-color10);
  box-sizing: border-box;
  padding: var(--spacing60) var(--spacing28) var(--spacing40) var(--spacing28);
  border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
  display: flex;
  flex-direction: column;
}

.plan-list li:nth-of-type(2){
  transform-origin: bottom;
  transform: scale(1.08);
}

.plan-list li .plan-head{
  padding: var(--spacing48) var(--spacing28);
  background: linear-gradient(135deg, #E6FFED 0%, #CDF4CA 100%);
  border-radius: var(--border-radius-m);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-90%);
  width: 114%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.plan-list li:nth-of-type(2) .plan-head{
  background: var(--main-grd);
}

.plan-list li:nth-of-type(3) .plan-head{
  background: linear-gradient(135.99deg, #F5F1FF 9.87%, #D4D4FF 106.57%);
}

.plan-list li .plan-head .plan-badge{
  font-size: 15px;
  color: #5EB860;
  display: inline-block;
  padding: 4px 24px;
  background: var(--base-color10);
  border-radius: 999px;
  text-align: center;
  width: fit-content;
  white-space: nowrap;
  margin-bottom: var(--spacing24);
}

.plan-list li .plan-head h4{
  font-size: 18px;
  color: #338835;
  text-align: center;
  margin-bottom: var(--spacing4);
}

.plan-list li .plan-head h3{
  font-size: 30px;
  color: #338835;
  text-align: center;
  /*margin-bottom: var(--spacing20);*/
}

.plan-list li .plan-head h3 span{
  font-size: 14px;
}

.plan-list li .plan-head .nomal-p{
  font-size: 16px;
  color: #338835;
  text-align: center;
}

.plan-list li:nth-of-type(2) .plan-head h4,
.plan-list li:nth-of-type(2) .plan-head h3,
.plan-list li:nth-of-type(2) .plan-head .nomal-p{
  color: var(--base-color10);
}

.plan-list li:nth-of-type(3) .plan-head h4,
.plan-list li:nth-of-type(3) .plan-head h3,
.plan-list li:nth-of-type(3) .plan-head .nomal-p{
  color: #814FC3;
}

.plan-list li .inner-list{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing12);
}

.plan-list li .inner-list .item{
  width: 100%;
  display: flex;
  gap: var(--spacing4);
}

.plan-list li .inner-list .item .icon{
  width: 24px;
  height: 24px;
}

.plan-list li .inner-list .item p{
  font-size: 16px;
}

.plan-list li .btn-top-text{
  font-size: 18px;
  margin-bottom: var(--spacing16);
  margin-top: var(--spacing32);
  text-align: center;
}

.plan-list li .thirdry-button{
  width: 100%;
  padding: 12px 20px;
}

.plan-list li .plan-bottom{
  margin-top: auto;
}

@media screen and (max-width: 767px) {
  .plan-list{
    width: 100%;
    margin: 0;
    padding-inline: max(var(--spacing16), calc((100vw - min(76vw, 320px)) / 2));
    padding-top: 12px;
    padding-bottom: 0;
    box-sizing: border-box;
    gap: var(--spacing40);
    margin-bottom: var(--spacing52);
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .plan-list::-webkit-scrollbar{
    display: none;
  }

  .plan-list li{
    width: min(76vw, 320px);
    flex: 0 0 min(76vw, 320px);
    padding: var(--spacing2) 0 0;
    margin-left: 0;
    scroll-snap-align: center;
  }

  .plan-list li:nth-of-type(2){
    transform-origin: bottom;
    transform: scale(1);
  }

  .plan-list li .plan-head{
    padding: var(--spacing28);
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: calc(100% + var(--spacing32));
    margin-left: calc(var(--spacing32) / -2);
    box-sizing: border-box;
    margin-bottom: 0;
  }

  .plan-list li:nth-of-type(2) .plan-head{
    margin-top: -8px;
  }

  .plan-list li .inner-list{
    margin-top: 0;
    padding: 36px 17px 0;
    box-sizing: border-box;
  }

  .plan-list li .plan-init-cost,
  .plan-list li .btn-top-text{
    padding: 0 17px;
    box-sizing: border-box;
  }

  .plan-list li .thirdry-button{
    width: calc(100% - 34px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 36px;
  }

  .plan-list li .plan-head .plan-badge{
    /*font-size: 15px;*/
    margin-bottom: var(--spacing20);
  }

  .plan-list li .plan-head h3{
    font-size: 28px;
    margin-bottom: var(--spacing12);
  }

  .plan-list li .inner-list .item p{
    font-size: 15px;
  }

  .plan-list li .btn-top-text{
    font-size: 16px;
    margin-bottom: 36px;
    margin-top: 36px;
  }

  .plan-list li .thirdry-button{
    font-size: 16px;
  }

  .plan-list li:nth-of-type(1){
    order: 2;
  }

  .plan-list li:nth-of-type(2){
    order: 1;
  }

  .plan-list li:nth-of-type(3){
    order: 3;
  }
}



/*-----ヘッダー-----*/
#header{
  background-color: rgba(255, 255, 255, 0.8);
  width: 100vw;
  box-sizing: border-box;
  padding: 0;
  overflow: visible;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 12px var(--spacing40) ;
  /*display: none; あとで消す*/
}

/*
#header .header-logo{
  width: 128px;
  height: 100%;
  display: flex;
  align-items: center;
}
  */

#header img{
  width: 128px;
  margin-top: 0.5%;
}

#header .wrap{
  width: 100%;
}

#header #header-right{
  height: auto;
}

#header #header-right{
  display: flex;
  align-items: center;
}

#header #header-right .main-button{
  padding: 12px 24px;
  margin-left: 32px;
  height: fit-content;
  margin-top: 0.3%;
}

#header #header-right .main-button p{
  font-size: 16px;
}

#header #gnav{
  background: none;
}

#header #gnav ul li a{
  padding: 12px;
  font-size: 16px;
  color: var(--base-color50);
  background: none;
}

#header #gnav ul li:nth-of-type(n+2){
  margin-left: 16px;
}

#header-nav-btn{
  width: fit-content;
  line-height: auto;
  background: var(--base-color50);
  padding: 8px;
  border-radius: 999px;
  margin-left: 12px;
}

#header-nav-btn .icon{
  width: 24px;
  height: 24px;
  background: var(--dummy-color);
  border-radius: 999px;
}

@media screen and (max-width: 1200px) {
  #header .wrap{
    margin: 0;
  }
  #header #gnav ul li:nth-of-type(n+2){
    margin-left: 8px;
  }
}

@media screen and (max-width: 767px) {
  #header{
    padding: 12px var(--spacing16) ;
    /*display: none; あとで消す*/
  }

  #header img{
    width: 105px;
    margin-top: 1.8%;
  }

  #header #header-right .main-button p{
    font-size: 15px;
  }

  #header #header-right .main-button{
    margin-left: 0;
    padding: 12px 20px;
  }
}

/*-----トップページ-fv-----*/
.home #main_visual {
  background-color: transparent !important;
  background-image: none !important;
  color: #fff !important;
  text-align: left !important;
  display: block !important;
  padding-top: var(--spacing104) !important;
  padding: 0 var(--spacing80);
  aspect-ratio: 1.633;
  width: 100%;

  position: relative;
}

.home #main_visual h1,
.home #main_visual h2,
.home #main_visual h3,
.home #main_visual h4{
  color: var(--base-color10) !important;
}

.home #main_visual p{
  color: var(--base-color10);
}

.home #main_visual .bg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--main-grd);
  height: 100%;
  width: 100vw;
  z-index: -1;
}

.home #main_visual .copy-box{
  margin-top: var(--spacing12);
}

.home #main_visual .copy-box h1{
  font-size: clamp(36px, 5vw, 64px);
}

.home #main_visual .copy-box span{
  font-size: clamp(24px, 3.75vw, 48px);
}

.home #main_visual .copy-box .copy-bottom{
  display: flex;
}

.home #main_visual .copy-box .copy-bottom h1{
  white-space: nowrap;
}

.home #main_visual .copy-box .copy-bottom .hukidashi{
  width: fit-content;
  height: fit-content;
  padding: 6px 10px;
  background: linear-gradient(135deg, #15AEA9 0%, #3881F0 100%);
  margin: 0;
  margin-top: var(--spacing4);
  margin-right: var(--spacing12);
  border-radius: 7px 7px 0 7px;
  position: relative;
}

.home #main_visual .copy-box .copy-bottom .hukidashi p{
  display: inline-block;
  width: fit-content;
  font-size: clamp(12px, 1.25vw, 16px);
  white-space: nowrap;
}

.home #main_visual .copy-box .copy-bottom .hukidashi img{
  display: block;
  position: absolute;
  bottom: 0;
  right: -9%;
  width: 16px;
}

.home #main_visual .fv-text-box h3{
  font-size: clamp(18px, 1.72vw, 22px);
}

.home #main_visual .fv-text-box h4{
  font-size: clamp(15px, 1.56vw, 20px);
  margin-top: var(--spacing16);
}

.home #main_visual .card-box{
  display: flex;
  gap: var(--spacing20);
  margin-top: var(--spacing80);
}

.home #main_visual .card-box li{
  position: relative;
  padding: 68px var(--spacing36) var(--spacing24) var(--spacing36);
  width: fit-content;
  min-width: 178px;
  background: var(--base-color10);
  border-radius: var(--border-radius-m);
}

.home #main_visual .card-box p{
  width: auto !important;
}

.home #main_visual .card-box li .icon-box{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 108px;
  height: 108px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(135deg, #15AEA9 0%, #3881F0 100%);
  border: 4px solid var(--base-color10);
  display: flex;
  justify-content: center;
  align-items: center;
}

.home #main_visual .card-box li .icon-box img{
  width: 60%;
}

.home #main_visual .card-box li p{
  text-align: center;
  color: var(--main-color-b) !important;
}

.home #main_visual .mocup{
  width: 38%;
  position: absolute;
  top: 24%;
  right: 5%;
  z-index: -1;
}

.home #main_visual .fv-button-box{
  background-color: transparent;
  background-image: url("./lib/images/line.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  width: calc(100vw + 2px);
  width: calc(100dvw + 2px);
  justify-content: center;
  gap: var(--spacing32);
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding: calc(var(--spacing28) + 74px) var(--spacing80) var(--spacing52);
}

.home #main_visual .fv-button-box .main-button,
.home #main_visual .fv-button-box .sub-button{
  transform: translateY(20px);
}

.sub-button p{
  color: var(--main-color-b) !important;
}

.home #content{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing80);
}

@media screen and (max-width: 991px) {
  .home #main_visual p{
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .page-template-page-plan-php #content .wrap,
  body.page-plan #content .wrap{
    overflow: visible;
  }

  body.page:not(.home) .plan-choice{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .home .plan-sec .plan-list,
  .page-template-page-plan-php .plan-choice .plan-list,
  body.page-plan .plan-choice .plan-list,
  body.page:not(.home) .plan-choice .plan-list{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .page-template-page-plan-php .plan-choice .plan-list,
  body.page-plan .plan-choice .plan-list,
  body.page:not(.home) .plan-choice .plan-list{
    padding-inline: calc((100vw - min(82vw, 320px)) / 2);
  }

  .home #main_visual {
    padding-top: 80vw !important;
    padding: 0 var(--spacing16);
    aspect-ratio: 0.411;
  }

  .home #main_visual p{
    margin: 0 !important;
  }

  .home #main_visual .copy-box{
    margin-top: var(--spacing4);
  }

  .home #main_visual .fv-text-box h4{
    margin-top: var(--spacing12);
  }

  .home #main_visual .card-box{
    display: flex;
    gap: var(--spacing12);
    margin-top: var(--spacing52);
    width: 200%;
  }

  .home #main_visual .card-box li{
    padding: 40px var(--spacing24) var(--spacing16) var(--spacing24);
    border-radius: var(--border-radius-s);
    min-width: 143px;
  }

  .home #main_visual .card-box li .icon-box{
    width: 64px;
    height: 64px;
    aspect-ratio: 1;
    border: 3px solid var(--base-color10);
  }

  .home #main_visual .card-box li p{
    text-align: center;
  }

  .home #main_visual .mocup{
    width: 72%;
    top: var(--spacing52);
    right: 46%;
    transform: translateX(50%);
  }

  .home #main_visual .fv-button-box{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing12);
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    padding: calc(var(--spacing24) + 60px) var(--spacing16) var(--spacing40);
  }

  .home #main_visual .fv-button-box .main-button,
  .home #main_visual .fv-button-box .sub-button{
    transform: translateY(32px);
  }

  .home #content{
    padding: 0 var(--spacing16);
  }
}


/*-----トップページ-悩み-----*/
.annoy-sec{
  margin-top: -1px;
  padding-top: 26.6vw;
}

/*
.annoy-sec .bg{
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--bg-grd);
  z-index: -1;
}
*/

.annoy-sec .title-box{
  margin-bottom: var(--spacing160);
}

.annoy-sec .contents{
  width: 100%;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1.88;
  margin-bottom: var(--spacing160);
}

.annoy-sec .contents .annoy-img{
  width: 38%;
}

.annoy-sec .contents .hukidashi-box{
  width: 62%;
  height: 100%;
  position: relative;
}

.annoy-sec .contents .hukidashi-bg{
  width: 120%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}

.annoy-sec .contents .hukidashi-box .hukidashi{
  position: absolute;
  z-index: 2;
}

.annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(1){
  top: 22%;
  left: 10%;
}

.annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(2){
  top: 17%;
  right: 5%;
}

.annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(3){
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 5;
}

.annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(4){
  bottom: 22%;
  left: 12%;
}

.annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(5){
  bottom: 22%;
  right: 8%;
}

.annoy-sec .contents .hukidashi-box .hukidashi-inner{
  position: relative;
  width: fit-content;
}

.annoy-sec .contents .hukidashi-box .hukidashi-inner img{
  width: 150%;
  max-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
}

.annoy-sec .contents .hukidashi:nth-of-type(5) img{
  width: 220%;
}

.annoy-sec .contents .hukidashi-box .hukidashi-inner p{
  /*font-size: 24px;*/
  font-size: clamp(0.938rem, 0.096rem + 1.75vw, 1.5rem);
  display: inline-block;
}

.annoy-sec .logo-area{
  width: 100vw;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  background: rgba(255,255,255,0.7);
  overflow: hidden;
  padding: var(--spacing40);
}

.annoy-sec .logo-area .logo-marquee{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.annoy-sec .logo-area .logo-track{
  display: flex;
  align-items: center;
  gap: var(--spacing40);
}

.annoy-sec .logo-area .logo-track--clone{
  display: none;
}

.annoy-sec .logo-area.is-overflow .logo-marquee{
  width: max-content;
  justify-content: flex-start;
  animation: logo-marquee 30s linear infinite;
}

.annoy-sec .logo-area.is-overflow .logo-track{
  padding-right: var(--spacing40);
}

.annoy-sec .logo-area.is-overflow .logo-track--clone{
  display: flex;
}

.annoy-sec .logo-area .logo-placeholder-list{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing40);
}

.annoy-sec .logo-area .logo-item{
  flex: 0 1 180px;
  max-width: 220px;
  min-width: 120px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.annoy-sec .logo-area .logo-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.annoy-sec .logo-area .logo-item.logo-placeholder{
  background: var(--dummy-color);
}

@keyframes logo-marquee{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 767px) {
  .annoy-sec{
    padding-top: var(--spacing200);
  }

  .annoy-sec .title-box{
    margin-bottom: var(--spacing52);
  }

  .annoy-sec .contents{
    flex-direction: column-reverse;
    align-items: center;
    aspect-ratio: auto;
    margin-bottom: var(--spacing52);
  }

  .annoy-sec .contents .annoy-img{
    width: 65%;
    display: block;
    position: relative;
    z-index: 1;
    margin-top: -20%;
  }

  .annoy-sec .contents .hukidashi-box{
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    position: relative;
    z-index: 2;
  }

  .annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(1){
    top: 50%;
    left: 50%;
    transform: translate(-130%, -210%)
  }

  .annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(2){
    top: 50%;
    right: 50%;
    transform: translate(105%, -180%);
  }

  .annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(3){
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(4){
    bottom: 50%;
    left: 50%;
    transform: translate(-105%, 220%);
  }

  .annoy-sec .contents .hukidashi-box .hukidashi:nth-of-type(5){
    bottom: 50%;
    right: 50%;
    transform: translate(150%, 220%);
  }

  .annoy-sec .contents .hukidashi-box .hukidashi-inner img{
    width: 140%;
  }

  .annoy-sec .contents .hukidashi:nth-of-type(5) img{
    width: 200%;
  }

  .annoy-sec .contents .hukidashi-box .hukidashi-inner p{
    /*font-size: 15px;*/
    font-size: clamp(0.938rem, 0.758rem + 0.77vw, 1.125rem);
  }

  .annoy-sec .logo-area{
    width: 100vw;
    padding: var(--spacing20);
  }

  .annoy-sec .logo-area .logo-track{
    gap: var(--spacing20);
  }

  .annoy-sec .logo-area.is-overflow .logo-track{
    padding-right: var(--spacing20);
  }

  .annoy-sec .logo-area .logo-placeholder-list{
    gap: var(--spacing20);
  }

  .annoy-sec .logo-area .logo-item{
    flex: 0 1 36%;
    min-width: 110px;
    max-width: 160px;
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .annoy-sec .logo-area .logo-marquee{
    animation: none;
  }
}


/*-----トップページ-仕組み-----*/
.system-sec .title-box{
  margin-bottom: var(--spacing260);
}

.system-sec .contents{
  width: 100%;
  margin-bottom: var(--spacing260);
  position: relative;
}

.system-sec .contents > img{
  width: 100%;
  display: block;
  position: absolute;
}

.system-sec .contents > img:nth-of-type(1){
  top: 58%;
  left: 49%;
  transform: translate(-50%,-50%);
  z-index: -1;
}

.system-sec .contents > img:nth-of-type(2){
  top: 61%;
  left: 48.5%;
  transform: translate(-50%,-50%);
  z-index: -1;
}

.system-sec .contents .top-box,
.system-sec .contents .bottom-box{
  width: 100%;
  display: flex;
  justify-content: center;
}

.system-sec .contents .text-box{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.system-sec .contents .text-box .bg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: linear-gradient(173.97deg, #F3F7FA 0%, #CCE7FA 100%);
  width: 420px;
  height: 420px;
  z-index: -1;
  border-radius: 999px;
}

.system-sec .contents .l-text-box{
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing4);
}

.system-sec .contents .l-text-box h3{
  font-size: 28px;
  color: var(--main-color-b);
  display: inline-block;
  background: var(--base-color10);
  padding: 8px 40px;
  border-radius: 999px;
}

.system-sec .contents .l-text-box .icon{
  width: 23px;
  height: 23px;
  padding: 5px;
  box-sizing: border-box;
}

.system-sec .contents .l-text-box .icon img{
  width: 13px;
  height: 13px;
  display: block;
}

.system-sec .contents .s-text-box{
  display: flex;
  flex-direction: column;
  gap: var(--spacing8);
  margin-top: var(--spacing20);
}

.system-sec .contents .s-text-box li{
  display: flex;
  gap: var(--spacing4);
}

.system-sec .contents .s-text-box li .icon{
  width: 24px;
  height: 24px;
}

.system-sec .contents .bottom-box{
  gap: var(--spacing188);
  margin-top: var(--spacing196);
}

.system-sec .contents .second-box .bg{
  background: linear-gradient(135.99deg, #F5F1FF 9.87%, #D4D4FF 106.57%);
}

.system-sec .contents .third-box .bg{
  background: linear-gradient(135deg, #E6FFED 0%, #CDF4CA 100%);
}

@media screen and (max-width: 767px) {
  .system-sec .title-box{
    margin-bottom: var(--spacing120);
  }

  .system-sec .contents{
    margin-bottom: var(--spacing152);
  }

  .system-sec .contents > img:nth-of-type(1){
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    width: 250%;
    max-width: 1000px;
  }

  .system-sec .contents > img:nth-of-type(2){
    display: none;
  }

  .system-sec .contents .text-box .bg{
    width: 360px;
    height: 360px;
    transform: translate(-50%,-45%);
  }

  .system-sec .contents .l-text-box h3{
    font-size: 20px;
    padding: 4px 20px;
  }

  .system-sec .contents .s-text-box{
    gap: var(--spacing4);
  }

  .system-sec .contents .s-text-box li .icon{
    width: 24px;
    height: 24px;
  }

  .system-sec .contents .bottom-box{
    flex-direction: column;
    gap: 0;
    margin-top: 0;
  }

  .system-sec .contents .bottom-box > div{
    margin-top: var(--spacing100);
  }

  .system-sec .contents .second-box .bg{
    background: linear-gradient(135.99deg, #F5F1FF 9.87%, #D4D4FF 106.57%);
  }

  .system-sec .contents .third-box .bg{
    background: linear-gradient(135deg, #E6FFED 0%, #CDF4CA 100%);
  }
}


/*-----トップページ-選ばれる理由-----*/
.reason-sec .title-box{
  margin-bottom: var(--spacing60);
}

.reason-sec .title-area{
  margin-bottom: var(--spacing160);
}

.reason-sec .title-area .title-area-p{
  text-align: center;
}

.reason-sec .card-box{
  width: 100%;
  display: flex;
  justify-content: center;
  gap: var(--spacing40);
  margin-bottom: var(--spacing160);
}

.reason-sec .card-box li{
  position: relative;
  width: 33%;
  box-sizing: border-box;
  padding: var(--spacing52) var(--spacing28) var(--spacing60) var(--spacing28);
  background: #F8F8F8;
  overflow: hidden;
  border-radius: var(--border-radius-m);
  border: 5px solid transparent;
}

.reason-sec .card-box li:nth-of-type(1){
  border-color: #B2DBF8;
}

.reason-sec .card-box li:nth-of-type(2){
  border-color: #ADF2B4;
}

.reason-sec .card-box li:nth-of-type(3){
  border-color: #F8D4FF;
}

.reason-sec .card-box li .num{
  font-size: 52px;
  margin-bottom: var(--spacing24);
  position: relative;
  z-index: 2;
  text-align: center;
}

.reason-sec .card-box li:nth-of-type(1) .num{
  color: #71ADD7;
}

.reason-sec .card-box li:nth-of-type(2) .num{
  color: #7ACF85;
}

.reason-sec .card-box li:nth-of-type(3) .num{
  color: #C1A0ED;
}

.reason-sec .card-box li .nomal{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--spacing40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.reason-sec .card-box li .img{
  width: 85%;
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reason-sec .card-box li:nth-of-type(1) .img img{
  width: 130%;
  max-width: none;
}

.reason-sec .card-box li:nth-of-type(2) .img img{
  width: 130%;
  max-width: none;
}

.reason-sec .card-box li > img{
  height: 100%;
  max-width: none;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .reason-sec .title-box{
    margin-bottom: var(--spacing28);
  }

  .reason-sec .title-area{
    margin-bottom: var(--spacing52);
  }

  .reason-sec .title-area-p{
    letter-spacing: -0.4px;
  }

  .reason-sec .card-box{
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--spacing28);
    margin-bottom: var(--spacing52);
  }

  .reason-sec .card-box li{
    width: 100%;
    padding: var(--spacing40) var(--spacing20) var(--spacing44) var(--spacing20);
  }

  .reason-sec .card-box li .num{
    font-size: 44px;
    margin-bottom: var(--spacing12);
  }

  .reason-sec .card-box li .nomal{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: var(--spacing44);
  }

  .reason-sec .card-box li .img{
    /*width: 85%;*/
  }
}


/*-----トップページ-実績-----*/
.achieve-sec .title-box{
  margin-bottom: var(--spacing100);
}

.achieve-sec .card-box{
  --achieve-card-width: min(56vw, 760px);
  width: 100%;
  gap: var(--spacing40);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-inline: max(var(--spacing24), calc((100vw - var(--achieve-card-width)) / 2));
  margin-bottom: var(--spacing100);
  cursor: grab;
}

.achieve-sec .card-box::-webkit-scrollbar{
  display: none;
}

.achieve-sec .card-box.is-dragging{
  cursor: grabbing;
  scroll-snap-type: none;
}

.achieve-sec .card-box li{
  width: var(--achieve-card-width);
  flex: 0 0 var(--achieve-card-width);
  scroll-snap-align: center;
}

.achieve-sec .card-box li .img{
  width: 100%;
  aspect-ratio: 1.78;
  overflow: hidden;
}

.achieve-sec .card-box li .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.achieve-sec .card-box li .img.is-placeholder{
  background: var(--dummy-color);
}

.achieve-sec .card-box li .name{
  margin-top: 26px;
  text-align: center;
}

.achieve-sec .card-box.is-single{
  overflow: hidden;
  justify-content: center;
  padding-inline: 0;
  cursor: default;
}
/*
.achieve-sec .achieve-box{
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing40);
}

.achieve-sec .achieve-box li{
  width: fit-content;
}

.achieve-sec .achieve-box li h4{
  font-size: 28px;
  text-align: center;
}

.achieve-sec .achieve-box li .num-box{
  display: flex;
  align-items: flex-end;
  gap: var(--spacing20);
  margin-top: var(--spacing20);
}

.achieve-sec .achieve-box li .num-box img{
  width: 17%;
  max-width: 44px;
}

.achieve-sec .achieve-box li .num-box .reverse{
  transform: scaleX(-1);
}

.achieve-sec .achieve-box li .num-box .num{
  font-size: clamp(3.25rem, 0.26rem + 6.24vw, 5.25rem);
  color: var(--main-color-b);
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 50%;
}

.achieve-sec .achieve-box li .num-box .num span{
  font-size: 28px;
}
*/

@media screen and (max-width: 767px) {
  .achieve-sec .title-box{
    margin-bottom: var(--spacing52);
  }

  .achieve-sec .card-box{
    --achieve-card-width: min(68vw, 360px);
    gap: var(--spacing20);
    margin-bottom: var(--spacing52);
    padding-inline: max(var(--spacing16), calc((100vw - var(--achieve-card-width)) / 2));
  }

  .achieve-sec .card-box li .img{
    aspect-ratio: 0.56;
  }

  /*
  .achieve-sec .achieve-box{
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing32);
  }

  .achieve-sec .achieve-box li h4{
    font-size: 16px;
  }

  .achieve-sec .achieve-box li .num-box{
    gap: var(--spacing24);
    margin-top: var(--spacing8);
  }

  .achieve-sec .achieve-box li .num-box img{
    width: 28px;
  }

  .achieve-sec .achieve-box li .num-box .num{
    font-size: 52px;
  }

  .achieve-sec .achieve-box li .num-box .num span{
    font-size: 20px;
  }
  */
}


/*-----トップページ-ステップ-----*/
.step-sec{
  padding: var(--spacing200) var(--spacing40);
}

.step-sec .title-box{
  margin-bottom: var(--spacing140);
}

.step-sec .step-list{
  width: 100%;
  display: flex;
  gap: var(--spacing24);
  margin-bottom: var(--spacing180);
}

.step-sec .step-list li{
  width: 33%;
}

.step-sec .step-list li .step-text-box{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 20px;
  width: 83%;
  border-bottom: 1px solid var(--main-color-b);
  margin: 0 auto;
  gap: 20px;
}

.step-sec .step-list li .card-box{
  position: relative;
  width: 100%;
}

.step-sec .step-list li .card-box .icon-box{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-85%);
  width: 72%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--base-color10);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-sec .step-list li .card-box .icon-box img{
  width: 40%;
}

.step-sec .step-list li:not(:last-child) .card-box .icon-box::after{
  content: "";
  position: absolute;
  left: calc(119.444% + (var(--spacing24) / 2));
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  aspect-ratio: 1;
  background: url("./lib/images/myicon/double_arrow.svg") center / contain no-repeat;
}

.step-sec .step-list li .card-box .card-body{
  background: var(--main-grd);
  border-radius: var(--border-radius-m);
  margin-top: 75%;
  padding: var(--spacing80) var(--spacing40);
  min-height: clamp(340px, 30vw, 430px);
  position: relative;
  z-index: 2;
}

.step-sec .step-list li .card-box .card-body h3{
  color: var(--base-color10);
  font-size: 24px;
  padding-bottom: 28px;
  width: 100%;
  border-bottom: 3px solid var(--base-color10);
}

.step-sec .step-list li .card-box .card-body .inner-list{
  display: flex;
  flex-direction: column;
  gap: var(--spacing8);
  margin-top: var(--spacing32);
}

.step-sec .step-list li .card-box .card-body .inner-list .item{
  display: flex;
  gap: var(--spacing4);
}

.step-sec .step-list li .card-box .card-body .inner-list .icon{
  width: 24px;
  height: 24px;
}

.step-sec .step-list li .card-box .card-body .inner-list .item p{
  color: var(--base-color10);
}

@media screen and (max-width: 767px) {
  .step-sec{
    padding: var(--section-padding);
  }

  .step-sec .title-box{
    margin-bottom: var(--spacing52);
  }

  .step-sec .step-list{
    flex-direction: column;
    gap: var(--spacing24);
    margin-bottom: var(--spacing52);
  }

  .step-sec .step-list li{
    width: 100%;
  }

  .step-sec .step-list li:nth-of-type(n+2)::before{
    /*カード間の矢印*/
    content:"";
    display: block;
    width: 32px;
    height: 20px;
    background: url("./lib/images/myicon/double_arrow.svg") center / contain no-repeat;
    transform: rotate(90deg);
    margin: 0 auto;
    margin-bottom: var(--spacing24);
  }

  .step-sec .step-list li .step-text-box{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 16px;
    padding: 0  16px 12px 16px;
    width: fit-content;
    margin: 0;
    margin-right: auto;
    margin-left: 6%;
    gap: 12px;
  }

  .step-sec .step-list li .step-text-box img{
    width: 58px;
  }

  .step-sec .step-list li .card-box .icon-box{
    position: absolute;
    top: 0;
    left: auto;
    right: 6%;
    transform: translate(0,-85%);
    width: 30%;
  }

  .step-sec .step-list li:not(:last-child) .card-box .icon-box::after{
    content: none;
  }

  .step-sec .step-list li .card-box .card-body{
    margin-top: 9%;
    padding: var(--spacing28) var(--spacing40) var(--spacing32) var(--spacing40);
    min-height: auto;
  }

  .step-sec .step-list li .card-box .card-body h3{
    font-size: 20px;
    padding-bottom: var(--spacing16);
  }

  .step-sec .step-list li .card-box .card-body .inner-list{
    display: flex;
    flex-direction: column;
    gap: var(--spacing8);
    margin-top: var(--spacing20);
  }

  .step-sec .cta-box .cta-text{
    letter-spacing: -0.2px;
  }
}


/*-----トップページ-他社との比較-----*/
.comparison-sec{
  padding: var(--spacing200) 0;
  box-sizing: border-box;
}

.comparison-sec .title-box{
  margin-bottom: var(--spacing60);
}

.comparison-sec .title-area{
  margin-bottom: var(--spacing100);
}

.comparison-sec .title-area .title-area-p{
  text-align: center;
}

.comparison-sec .table-wrapper{
  width: 80%;
  margin: 0 auto;
  position: relative;
  margin-bottom: var(--spacing100);
}

.comparison-sec .table-scroll{
  width: 100%;
}

.comparison-sec .th{
  width: 100%;
  display: flex;
  border-bottom: 1px solid #E2E2E2;
}

.comparison-sec .th li{
  width: 25%;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #E2E2E2;
}

.comparison-sec .th li:first-of-type{
  border-radius: var(--border-radius-m) 0 0 0;
}

.comparison-sec .th li:last-of-type{
  border-radius: 0 var(--border-radius-m) 0 0;
}

.comparison-sec .th li:last-of-type{
  border-left: 1px solid #707070;
}

.comparison-sec .th h3{
  font-size: 16px;
  text-align: center;
}

.comparison-sec .th .large{
  font-size: 24px;
}

.comparison-sec .th .color-p{
  background: var(--base-color20);
}

.comparison-sec .th .color-main{
  background: var(--main-grd);
}

.comparison-sec .th .color-b{
  background: #555;
}

.comparison-sec .th .color-h{
  color: var(--base-color10);
}

.comparison-sec .tr{
  width: 100%;
  display: flex;
}

.comparison-sec .tr li{
  width: 25%;
  padding: 24px;
  border-left: 1px solid #E2E2E2;
  border-bottom: 1px solid #E2E2E2;
}

.comparison-sec .tr li:last-of-type{
  border-right: 1px solid #E2E2E2;
}

.comparison-sec .tr .color{
  color: var(--main-color-b);
}

.comparison-sec .tr:last-of-type li:first-of-type{
  border-radius: 0 0 0 var(--border-radius-m);
}

.comparison-sec .tr:last-of-type li:last-of-type{
  border-radius: 0 0 var(--border-radius-m) 0;
}

.grd-border{
  width: calc(25% + 16px);
  height: calc(100% + 16px);
  position: absolute;
  top: 0;
  left: 25%;
  transform: translate(-8px,-8px);
  border: 10px solid transparent;
  border-radius: 20px;
  background: var(--main-grd) border-box;
  
  /* マスクを使って中身をくり抜く */
  -webkit-mask:
     linear-gradient(#fff 0 0) padding-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

@media screen and (max-width: 767px) {
  .comparison-sec{
    padding: var(--section-padding);
  }

  .comparison-sec .title-box{
    margin-bottom: var(--spacing28);
  }

  .comparison-sec .title-area{
    margin-bottom: var(--spacing60);
  }

  .comparison-sec .table-wrapper{
    width: 190%;
    margin: 0;
    margin-bottom: var(--spacing60);
  }

  .comparison-sec .table-scroll{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-sec .th li{
    width: 25%;
    padding: var(--spacing24) var(--spacing16);
  }

  .comparison-sec .th li:first-of-type{
    border-radius: var(--border-radius-s) 0 0 0;
  }

  .comparison-sec .th li:last-of-type{
    border-radius: 0 var(--border-radius-s) 0 0;
  }

  .comparison-sec .th .large{
    font-size: 20px;
  }

  .comparison-sec .tr li{
    width: 25%;
    padding: var(--spacing16) var(--spacing24);
  }

  .comparison-sec .tr:last-of-type li:first-of-type{
    border-radius: 0 0 0 var(--border-radius-s);
  }

  .comparison-sec .tr:last-of-type li:last-of-type{
    border-radius: 0 0 var(--border-radius-s) 0;
  }

  .grd-border{
    /*width: calc(25% + 16px);
    height: calc(100% + 16px);
    transform: translate(-8px,-8px);
    border: 10px solid transparent;*/
    border-radius: 12px;
  }
}


/*-----トップページ-料金プラン-----*/
.plan-sec{
  padding: var(--spacing200) var(--spacing40);
}

.plan-sec .title-box{
  margin-bottom: var(--spacing60);
}

.plan-sec .title-area{
  margin-bottom: min(34vw, 436px);
}

.plan-sec .title-area .title-area-p{
  text-align: center;
}

.plan-sec .cta-box{
  margin-top: 120px;
}

/*
.plan-sec .plan-list{
  width: calc(100% - 40px);
  margin: 0 auto;
  gap: var(--spacing80);
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing120);
}

.plan-sec .plan-list li{
  width: 28%;
  position: relative;
  background: var(--base-color10);
  box-sizing: border-box;
  padding: var(--spacing60) var(--spacing28) var(--spacing40) var(--spacing28);
  border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
}

.plan-sec .plan-list li:nth-of-type(2){
  transform-origin: bottom;
  transform: scale(1.08);
}

.plan-sec .plan-list li .plan-head{
  padding: var(--spacing48) var(--spacing28);
  background: linear-gradient(135deg, #E6FFED 0%, #CDF4CA 100%);
  border-radius: var(--border-radius-m);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-90%);
  width: 114%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.plan-sec .plan-list li:nth-of-type(2) .plan-head{
  background: var(--main-grd);
}

.plan-sec .plan-list li:nth-of-type(3) .plan-head{
  background: linear-gradient(135.99deg, #F5F1FF 9.87%, #D4D4FF 106.57%);
}

.plan-sec .plan-list li .plan-head .plan-badge{
  font-size: 15px;
  color: #5EB860;
  display: inline-block;
  padding: 4px 24px;
  background: var(--base-color10);
  border-radius: 999px;
  text-align: center;
  width: fit-content;
  margin-bottom: var(--spacing24);
}

.plan-sec .plan-list li:nth-of-type(2) .plan-head .plan-badge{
  background: var(--base-color10);
  color: transparent;
  position: relative;
}

.plan-sec .plan-list li:nth-of-type(2) .plan-head .plan-badge::before{
  content: "一番人気";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00C0BA 0%, #07CDC7 33.48%, #21B3DC 66.95%, #1771E7 100.92%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-sec .plan-list li:nth-of-type(3) .plan-head .plan-badge{
  color: var(--sub-color-p);
}

.plan-sec .plan-list li .plan-head h4{
  font-size: 18px;
  color: #338835;
  text-align: center;
  margin-bottom: var(--spacing4);
}

.plan-sec .plan-list li .plan-head h3{
  font-size: 30px;
  color: #338835;
  text-align: center;
  margin-bottom: var(--spacing20);
}

.plan-sec .plan-list li .plan-head h3 span{
  font-size: 14px;
}

.plan-sec .plan-list li .plan-head .nomal-p{
  font-size: 16px;
  color: #338835;
  text-align: center;
}

.plan-sec .plan-list li:nth-of-type(2) .plan-head h4,
.plan-sec .plan-list li:nth-of-type(2) .plan-head h3,
.plan-sec .plan-list li:nth-of-type(2) .plan-head .nomal-p{
  color: var(--base-color10);
}

.plan-sec .plan-list li:nth-of-type(3) .plan-head h4,
.plan-sec .plan-list li:nth-of-type(3) .plan-head h3,
.plan-sec .plan-list li:nth-of-type(3) .plan-head .nomal-p{
  color: #814FC3;
}

.plan-sec .plan-list li .inner-list{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing12);
}

.plan-sec .plan-list li .inner-list .item{
  width: 100%;
  display: flex;
  gap: var(--spacing4);
}

.plan-sec .plan-list li .inner-list .item .icon{
  width: 24px;
  height: 24px;
  background: var(--dummy-color);
}

.plan-sec .plan-list li .inner-list .item p{
  font-size: 16px;
}

.plan-sec .plan-list li .btn-top-text{
  font-size: 18px;
  margin-bottom: var(--spacing16);
  margin-top: var(--spacing32);
  text-align: center;
}

.plan-sec .plan-list li .thirdry-button{
  width: 100%;
  padding: 12px 20px;
}
*/

@media screen and (max-width: 991px) {
  .plan-sec{
    padding: var(--spacing200) 0;
  }
}

@media screen and (max-width: 767px) {
  .plan-sec{
    padding: var(--section-padding);
  }

  .plan-sec .title-box{
    margin-bottom: var(--spacing28);
  }

  .plan-sec .title-area{
    margin-bottom: var(--spacing40);
  }

  /*
  .plan-sec .plan-list{
    width: calc(260% - 12px);
    margin: 0;
    gap: var(--spacing36);
    margin-bottom: var(--spacing52);
  }

  .plan-sec .plan-list li{
    width: 28%;
    padding: var(--spacing40) var(--spacing16) var(--spacing36) var(--spacing16);
    margin-left: var(--spacing28);
  }

  .plan-sec .plan-list li:nth-of-type(2){
    transform-origin: bottom;
    transform: scale(1.08);
  }

  .plan-sec .plan-list li .plan-head{
    padding: var(--spacing28);
  }

  .plan-sec .plan-list li .plan-head .plan-badge{
    margin-bottom: var(--spacing20);
  }

  .plan-sec .plan-list li .plan-head h3{
    font-size: 28px;
    margin-bottom: var(--spacing12);
  }

  .plan-sec .plan-list li .inner-list .item p{
    font-size: 15px;
  }

  .plan-sec .plan-list li .btn-top-text{
    font-size: 16px;
    margin-bottom: var(--spacing12);
    margin-top: var(--spacing20);
  }

  .plan-sec .plan-list li .thirdry-button{
    font-size: 16px;
  }

  .plan-sec .plan-list li:nth-of-type(1){
    order: 2;
  }

  .plan-sec .plan-list li:nth-of-type(2){
    order: 1;
  }

  .plan-sec .plan-list li:nth-of-type(3){
    order: 3;
  }
  */
}


/*-----トップページ-よくある質問-----*/
.qa-sec{
  padding: var(--spacing200) 0;
  width: 80%;
  margin: 0 auto;
}

.qa-sec .title-box{
  margin-bottom: var(--spacing80);
}

.qa-sec .qa-list{
  width: 100%;
}

.qa-sec .qa-list li{
  width: 100%;
  padding: var(--spacing24) 0;
  border-bottom: 1px solid #BEBEBE;
}

.qa-sec .qa-list li .badge{
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.qa-sec .qa-list li .q-box{
  display: flex;
  justify-content: space-between;
}

.qa-sec .qa-list li .q-box .left{
  display: flex;
  gap: 4px;
}

.qa-sec .qa-list li .q-box .left .q{
  color: var(--base-color10);
  background: var(--main-color-b);
}

.qa-sec .qa-list li .q-box .right{
  width: 24px;
  height: 24px;
}

.qa-sec .qa-list li .a-box{
  display: flex;
  gap: 4px;
}

.qa-sec .qa-list li .a-box{
  margin-top: var(--spacing16);
}

.qa-sec .qa-list li .a-box .a{
  color: var(--base-color10);
  background: var(--main-color-c);
}

.qa-sec .thirdry-button{
  margin: var(--spacing80) auto 0;
}

.qa-sec .qa-more-button{
  margin: 80px auto 0;
  width: fit-content;
  display: flex;
  padding: 12px 40px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 50px;
  border: 1px solid #0E192B;
  background: #FFF;
  color: #0E192B;
}

@media screen and (max-width: 767px) {
  .qa-sec{
    padding: var(--section-padding);
    width: 100%;
  }

  .qa-sec .title-box{
    margin-bottom: var(--spacing52);
  }

  .qa-sec .qa-list li{
    padding: var(--spacing20) 0;
  }

  .qa-sec .qa-list li .badge{
    border-radius: 999px;
    width: 28px;
    height: 28px;
  }

  .qa-sec .qa-list li .q-box .left{
    gap: var(--spacing4);
  }

  .qa-sec .qa-list li .a-box{
    display: flex;
    gap: var(--spacing4);
  }

  .qa-sec .qa-list li .a-box{
    margin-top: var(--spacing16);
  }

  .qa-sec .thirdry-button{
    margin-top: var(--spacing44);
  }
}


/*-----トップページ-最新コラム-----*/
.home .front-loop {
  border: none !important;
  background: transparent !important;
  overflow: hidden;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  padding: var(--spacing200) var(--spacing40) !important;
}

.home .front-loop .wrap{
  width: 100%;
  box-sizing: border-box;
}

.home .front-loop h2{
  padding: 0 !important;
  margin: 0px !important;
  border-bottom: none !important;
  font-size: 44px !important;
  margin-bottom: var(--spacing16) !important;
}

#recent_post_content .title-box{
  margin-bottom: var(--spacing80);
}

#recent_post_content article{
  margin: 0;
  width: 100%;
  background: transparent;
}

#recent_post_content article .post-thumbnail{
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-m);
  overflow: hidden;
  margin-bottom: var(--spacing20);
}

#recent_post_content article .post-thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin-bottom: 0;
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

#recent_post_content .p_category{
  color: var(--base-color50);
  padding: 4px 12px;
  background: #DBDBDB;
  border-radius: 999px;
  margin-bottom: var(--spacing20);
}

#recent_post_content .front-loop-cont{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing48);
  margin-bottom: var(--spacing80);
  padding: 0;
}

#recent_post_content .front-loop-cont h3{
  margin-bottom: 0;
}

@media screen and (max-width: 991px) {
  .home .front-loop .popular_post_box .wrap-a{
    border: none !important;
  }
}

@media screen and (max-width: 767px) {
  .home .front-loop {
    padding: var(--section-padding) !important;
  }

  .home .front-loop .wrap{
    margin: 0;
  }

  .home .front-loop h2{
    font-size: 24px !important;
  }

  #recent_post_content .title-box{
    margin-bottom: var(--spacing44);
  }

  #recent_post_content article .post-thumbnail{
    border-radius: var(--border-radius-s);
    margin-bottom: var(--spacing12);
  }

  #recent_post_content .p_category{
    margin-bottom: var(--spacing12);
  }

  #recent_post_content .front-loop-cont{
    display: flex;
    gap: var(--spacing24);
    margin-bottom: var(--spacing44);
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: max(var(--spacing16), calc((100vw - min(76vw, 320px)) / 2));
    box-sizing: border-box;
  }

  #recent_post_content .front-loop-cont::-webkit-scrollbar{
    display: none;
  }

  #recent_post_content article{
    width: min(64vw, 280px);
    flex: 0 0 min(64vw, 280px);
    scroll-snap-align: center;
  }
  .home .front-loop .popular_post_box .wrap-a{
    border: none !important;
  }
}


/*-----トップページ-ctaセクション-----*/
.cta-sec{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing100);
  padding: var(--section-padding);
}

.cta-sec .bg{
  background: var(--main-grd);
}

.cta-sec h2,
.cta-sec p{
  text-align: center;
  color: var(--base-color10);
}

.cta-sec .text-box{
  margin: 0 auto;
}

.cta-sec .text-box p:first-child{
  margin-bottom: var(--spacing24);
}

.cta-sec .main-button{
  background: var(--base-color10);
  margin: 0 auto;
}

.cta-sec .main-button p{
  color: var(--main-color-b) !important;
}

.cta-sec .bottom p:first-child{
  margin-bottom: var(--spacing12);
}

@media screen and (max-width: 767px) {
  .cta-sec{
    gap: var(--spacing52);
  }

  .cta-sec .bottom p:first-child{
    margin-bottom: var(--spacing24);
  }
}


/*-----フッター-----*/
#footer{
  color: var(--base-color50);
  border: none;
  padding: var(--spacing120) var(--spacing40);
}

#footer .wrap{
  padding: 0;
  display: flex;
  justify-content: center;
  width: 70%;
  max-width: 880px;
  margin: 0 auto;
}

#footer .footer-logo{
  width: 80%;
  max-width: 250px;
}

#footer #footer-brand-area{
  width: 50%;
}

#footer a{
  color: var(--base-color50);
}

.footer-01,
.footer-02{
  background: none;
}

.footer-01{
  padding: 0;
  margin-bottom: var(--spacing100);
}

#footer .row{
  margin: 0;
  border: none;
  padding-bottom: 0;
}

#footer #footer-gnav-ul li:nth-of-type(1),
#footer #footer-gnav-ul li:nth-of-type(4){
  display: none;
}

#footer #footer-gnav-ul li{
  margin-top: 8px;
}

#footer-gnav-container::before{
  content: "サービス";
  margin-bottom: 16px;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
  display: inline-block;
  color: var(--base-color50);
  margin-left: 12px;
}

#footer-content-area #footer-cont-about li a,
#footer-content-area #footer-cont-content li a{
  font-size: 14px;
}

#footer .footer-nav2{
  width: fit-content;
}

#footer .nav-genre{
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 800;
  display: inline-block;
  color: var(--base-color50);
  margin-left: 12px;
}

#footer .footer-nav2 .nav li{
  margin-top: 8px;
}

#footer .footer-nav2 .nav li a{
  font-size: 14px;
  padding: 8px 12px;
  line-height: 150%;
  display: block;
}

/* フッターナビの左アイコン（同一サイズ / 黒） */
#footer .footer-nav2 .nav a.footer-contact-link,
#footer #footer-content-area a.footer-link--reason,
#footer #footer-content-area a.footer-link--plan,
#footer #footer-content-area a.footer-link--faq {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#footer .footer-nav2 .nav a.footer-contact-link::before,
#footer #footer-content-area a.footer-link--reason::before,
#footer #footer-content-area a.footer-link--plan::before,
#footer #footer-content-area a.footer-link--faq::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  background-color: #000;
  -webkit-mask: var(--footer-icon-url) center / contain no-repeat;
  mask: var(--footer-icon-url) center / contain no-repeat;
}

#footer .footer-nav2 .nav a.footer-contact-link--phone {
  --footer-icon-url: url("./lib/images/contact/icon-contact-01.svg");
}

#footer .footer-nav2 .nav a.footer-contact-link--mail {
  --footer-icon-url: url("./lib/images/contact/icon-contact-03.svg");
}

#footer .footer-nav2 .nav a.footer-contact-link--reserve {
  --footer-icon-url: url("./lib/images/contact/icon-contact-02.svg");
}

#footer #footer-content-area a.footer-link--reason {
  --footer-icon-url: url("./lib/images/faq/icon-faq-04.svg");
}

#footer #footer-content-area a.footer-link--plan {
  --footer-icon-url: url("./lib/images/faq/icon-faq-01.svg");
}

#footer #footer-content-area a.footer-link--faq {
  --footer-icon-url: url("./lib/images/faq/icon-faq-02.svg");
}

#footer #footer-content-area{
  width: calc(50% - 164px);
}

@media screen and (max-width: 767px) {
  #footer{
    padding: var(--spacing100) var(--spacing16);
  }

  #footer .wrap{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto
  }

  #footer #footer-brand-area{
    width: 100%;
  }

  .footer-01{
    padding: 0;
    margin-bottom: var(--spacing52);
  }

  /*
  #footer #footer-gnav-ul li{
    margin-top: 8px;
  }
  */

  #footer-gnav-container::before{
    margin-left: 0;
    margin-bottom: 12px;
  }

  /*
  #footer .footer-nav2{
    width: fit-content;
  }
  */

  #footer .nav-genre{
    margin-left: 0;
    margin-bottom: 12px;
  }

  /*
  #footer .footer-nav2 .nav li{
    margin-top: 8px;
  }
  */

  #footer .footer-nav2 .nav li a{
    padding: 8px 0px;
  }

  #footer .footer-nav2{
    margin-top: var(--spacing52);
  }

  #footer #footer-content-area{
    width: fit-content;
  }

  #footer #footer-gnav-ul li a{
    padding: 8px 0;
  }

  #footer .footer-nav2{
    width: fit-content;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: end;
  }

  #footer .footer-logo{
    width: 70%;
    max-width: 132px;
  }

  #footer-list-area ul li::before,
  #footer-content-area ul li::before{
    display: none !important;
    content: none !important;
  }

  #footer-list-area ul li.menu-item-has-children .dropdown-toggle,
  #footer-content-area ul li.menu-item-has-children .dropdown-toggle{
    display: none !important;
  }

  #footer-list-area ul li.menu-item-has-children > a,
  #footer-content-area ul li.menu-item-has-children > a{
    width: 100% !important;
    display: block !important;
  }
}



/*---------------以下、下層ページ---------------*/

/*-------共通-------*/
body.page:not(.home) #content{
  padding: 0;
  margin-top: 42px;
}

.blog #content{
  margin-top: 42px;
}

body.page:not(.home) #content .wrap,
.blog #content .wrap{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing40);
}

@media screen and (max-width: 767px) {
  body.page:not(.home) #content .wrap,
  .blog #content .wrap{
    padding: 0 var(--spacing16);
  }
}


/*-------よくある質問ページ-------*/
body.page:not(.home) .qa-sec{
  padding: var(--spacing100) 0 var(--spacing200) 0;
}

.faq-tabs{
  display: flex;
  width: 100%;
  margin-bottom: var(--spacing12);
}

.faq-tabs .tab-btn{
  width: 20%;
  color: var(--base-color50);
  background: var(--base-color20);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing12);
  padding: var(--spacing24);
  cursor: pointer;
}

.faq-tabs .tab-btn .tab-btn__icon{
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
}

.faq-tabs .tab-btn .tab-btn__label{
  line-height: 130%;
  font-weight: 700;
}

.faq-tabs .tab-btn:nth-of-type(n+2){
  border-left: 1px solid #EBEBEB;
}

.faq-content{
  display: none;
}

.faq-content.active{
  display: block;
}

.qa-sec .qa-list li .q-box{
  cursor: pointer;
}

.qa-sec .qa-list li .q-box .right{
  display: flex;
  justify-content: center;
  align-items: center;
}

.qa-sec .qa-list li .q-box .faq-arrow{
  width: 60px;
  height: 35px;
  display: block;
  transition: transform 0.2s ease;
}

.qa-sec .qa-list li .a-box{
  display: none;
}

.qa-sec .qa-list li.is-open .a-box{
  display: flex;
}

.qa-sec .qa-list li.is-open .q-box .faq-arrow{
  transform: rotate(180deg);
}

.tab-btn{
  font-size: 20px;
  position: relative;
}

.tab-btn.active{
  background: var(--main-grd);
  color: var(--base-color10);
}

.tab-btn.active::after{
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--main-color-b);
}

@media screen and (max-width: 767px) {
  body.page:not(.home) .qa-sec{
    padding: var(--spacing80) 0 var(--spacing100) 0;
  }

  .faq-tabs{
    flex-wrap: wrap;
    margin-bottom: var(--spacing12);
  }

  .tab-btn{
    font-size: 18px;
  }

  .faq-tabs .tab-btn{
    gap: var(--spacing8);
  }

  .faq-tabs .tab-btn .tab-btn__icon{
    width: 27px;
    height: 27px;
  }

  .faq-tabs .tab-btn:nth-of-type(2),
  .faq-tabs .tab-btn:nth-of-type(3){
    border-bottom: 1px solid #EBEBEB;
  }

  .faq-tabs .tab-btn:nth-of-type(4){
    border-left: none;
  }

  .faq-tabs .tab-btn:nth-of-type(-n+3){
    width: 33.33%;
    padding: var(--spacing12) var(--spacing16);
  }

  .faq-tabs .tab-btn:nth-of-type(n+4){
    width: 50%;
    padding: var(--spacing12) var(--spacing16);
  }
}


/*-------お問い合わせページ-------*/
/*リードプロへのお問い合わせセクション*/
.contact-contact{
  padding: var(--spacing100) 0 var(--spacing200) 0;
}

.contact-contact .title-area{
  margin-bottom: 80px;
}

.contact-contact .title-area .title-area-p{
  text-align: center;
}

.contact-cards{
  width: 100%;
  display: flex;
  gap: var(--spacing40);
}

.contact-cards li{
  position: relative;
  width: 33.33%;
  border: 3px solid #ccc;
  border-radius: var(--border-radius-m);
  padding: var(--spacing40) var(--spacing24);
  display: flex;
  flex-direction: column;
}

.contact-cards li .badge{
  position: absolute;
  top: 12px;
  right: 12px;
  background: #FFA600;
  padding: 4px 12px;
  color: var(--base-color10);
  font-size: 14px;
  border-radius: 999px;
}

.contact-cards .main-button{
  padding: 24px 60px;
  margin: 0 auto;
}

.contact-cards li div.icon{
  width: 108px;
  aspect-ratio: 1;
  margin: 0 auto;
  margin-bottom: var(--spacing40);
}

.contact-cards li div.icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.contact-cards li.color{
  border: 3px solid transparent;
  background:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(135deg, #00C0BA 0%, #07C9C3 33.48%, #21B3DC 66.95%, #1771E7 100.92%) border-box;
}

.contact-cards li h3{
  font-size: 24px;
  margin-bottom: var(--spacing32);
  text-align: center;
}

.contact-cards li p{
  text-align: center;
}

.contact-cards li p:nth-of-type(n+2){
  margin-top: var(--spacing20);
}

.contact-cards li .text-box{
  margin-bottom: var(--spacing40);
  flex: 1;
}

.contact-cards li .main-button,
.contact-cards li .fourthry-button{
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
}

.contact-call-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.contact-call-modal.is-open{
  display: block;
}

.contact-call-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.contact-call-modal__dialog{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 560px);
  background: #fff;
  border-radius: var(--border-radius-m);
  padding: 44px 32px 32px;
  box-sizing: border-box;
}

.contact-call-modal__close{
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  color: #5a5a5a;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.contact-call-modal__title{
  text-align: center;
  font-size: 20px;
  margin-bottom: 12px;
}

.contact-call-modal__number{
  text-align: center;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.contact-call-modal__note{
  text-align: center;
  color: #5a5a5a;
  font-size: 14px;
}

.contact-call-modal__actions{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-call-modal__actions .main-button,
.contact-call-modal__actions .fourthry-button{
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

.contact-call-modal__actions .main-button{
  display: flex;
}

/*お問い合わせフォームセクション*/
.contact-form .title-box{
  margin-bottom: var(--spacing80);
}

.contact-form .contents-wrapper{
  display: flex;
  gap: var(--spacing32);
}

.contact-form .contents-wrapper .form{
  width: 60%;
  background: #FFF;
  padding: 40px;
  border-radius: var(--border-radius-m);
  box-shadow: 0 0 30px rgba(0,0,0,0.1);
}

.contact-form .contents-wrapper .form .wpcf7{
  width: 100%;
}

.leadpro-cf7-form{
  width: 100%;
}

.leadpro-cf7-form p{
  margin: 0;
}

.leadpro-cf7-form .leadpro-cf7-field{
  margin-top: 40px;
}

.leadpro-cf7-form .leadpro-cf7-field:first-child{
  margin-top: 0;
}

.leadpro-cf7-form .leadpro-cf7-label-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.leadpro-cf7-form .leadpro-cf7-field:first-child .leadpro-cf7-label-row{
  margin-bottom: 12px;
}

.leadpro-cf7-form .leadpro-cf7-label{
  color: #0E192B;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}

.leadpro-cf7-form .leadpro-cf7-required{
  color: #F00;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.leadpro-cf7-form .leadpro-cf7-radio-group{
  display: flex;
  align-items: center;
  align-content: center;
  gap: 20px;
  align-self: stretch;
  flex-wrap: wrap;
}

.leadpro-cf7-form .leadpro-cf7-radio-group .wpcf7-form-control{
  display: flex;
  align-items: center;
  align-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.leadpro-cf7-form .leadpro-cf7-radio-group .wpcf7-list-item{
  margin: 0;
}

.leadpro-cf7-form .leadpro-cf7-radio-group .wpcf7-list-item label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.leadpro-cf7-form .leadpro-cf7-radio-group .wpcf7-list-item input[type="radio"]{
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 5px;
  margin: 0;
  border-radius: 15px;
  border: 1px solid #5E6776;
  background: #FFF;
  position: relative;
}

.leadpro-cf7-form .leadpro-cf7-radio-group .wpcf7-list-item input[type="radio"]:checked::after{
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--main-color-b);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.leadpro-cf7-form .leadpro-cf7-radio-group .wpcf7-list-item-label{
  color: #0E192B;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.leadpro-cf7-form input[type="text"],
.leadpro-cf7-form input[type="email"],
.leadpro-cf7-form input[type="tel"]{
  display: flex;
  width: 100%;
  height: 60px;
  padding: 15px 20px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: var(--border-radius-s);
  border: 1px solid #666;
  background: #FFF;
  box-sizing: border-box;
  color: #0E192B;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.leadpro-cf7-form textarea{
  display: flex;
  width: 100%;
  height: 250px;
  padding: 15px 20px;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-radius: var(--border-radius-s);
  border: 1px solid #666;
  background: #FFF;
  box-sizing: border-box;
  color: #0E192B;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  resize: vertical;
}

.leadpro-cf7-form input::placeholder,
.leadpro-cf7-form textarea::placeholder{
  color: #CCC;
  text-align: left;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.leadpro-cf7-form .leadpro-cf7-two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.leadpro-cf7-form .leadpro-cf7-two-col .leadpro-cf7-field{
  margin-top: 40px;
}

.leadpro-cf7-form .leadpro-cf7-submit{
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.leadpro-cf7-form .leadpro-cf7-submit .wpcf7-submit{
  display: flex;
  height: 75px;
  padding: 24px 60px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 50px;
  background: #3881F0;
  color: #FFF;
  border: none;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  cursor: pointer;
}

.leadpro-cf7-form .wpcf7-spinner{
  margin: 12px auto 0;
  display: block;
}

.contact-form .contents-wrapper .sidebox{
  width: 40%;
  background: var(--bg-grd);
  border-radius: var(--border-radius-m);
  padding: 0 var(--spacing32);
}

.contact-form .contents-wrapper .sidebox .inner-block{
  padding: var(--spacing40) 0;
  border-bottom: 1px solid #ccc;
}

.contact-form .contents-wrapper .sidebox .inner-block:last-of-type{
  border-bottom: none;
}

.contact-form .contents-wrapper .sidebox .logo{
  width: 50%;
  margin-bottom: var(--spacing40);
}

.contact-form .contents-wrapper .sidebox h3{
  font-size: 20px;
  margin-bottom: var(--spacing20);
}

.contact-form .contents-wrapper .sidebox ul{
  display: flex;
  flex-direction: column;
  gap: var(--spacing20);
}

.contact-form .contents-wrapper .sidebox ul .icon{
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: var(--spacing8);
  aspect-ratio: 1;
  background: var(--dummy-color);
}

.contact-form .contents-wrapper .sidebox ul .icon{
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: var(--spacing8);
  aspect-ratio: 1;
  background: var(--dummy-color);
}

.contact-form .contents-wrapper .sidebox .achieve-box{
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.contact-form .contents-wrapper .sidebox .achieve-box li h4{
  font-size: 16px;
  font-weight: 700;
}

.contact-form .contents-wrapper .sidebox .achieve-box .num-box{
  gap: var(--spacing12);
  margin-top: var(--spacing12);
}

.contact-form .contents-wrapper .sidebox .achieve-box .num-box .num{
  font-size: 36px;
}

.contact-form .contents-wrapper .sidebox .achieve-box .num-box .num span{
  font-size: 18px;
}

.contact-form .contents-wrapper .sidebox .achieve-box .num-box img{
  max-width: 18px;
}

.feature-list li,
.contact-list li{
  display: flex;
  gap: var(--spacing8);
}

.feature-list li img,
.contact-list li img{
  width: 28px;
}

@media screen and (max-width: 767px) {
  .contact-contact{
    padding: var(--spacing80) 0 var(--spacing100) 0;
  }

  .contact-contact .title-area{
    margin-bottom: var(--spacing52);
  }

  .contact-cards{
    flex-direction: column;
    gap: var(--spacing20);
  }

  .contact-cards li:nth-of-type(2){
    order: 1;
  }

  .contact-cards li:nth-of-type(1){
    order: 2;
  }

  .contact-cards li:nth-of-type(3){
    order: 3;
  }

  .contact-cards li{
    width: 100%;
    padding: var(--spacing24) var(--spacing20);
  }

  .contact-cards li div.icon{
    width: 88px;
    margin-bottom: var(--spacing32);
  }

  .contact-cards li h3{
    font-size: 20px;
    margin-bottom: var(--spacing20);
  }

  .contact-cards li .text-box{
    margin-bottom: var(--spacing40);
  }

  .contact-call-modal{
    display: none !important;
  }

  /*お問い合わせフォームセクション*/
  .contact-form .title-box{
    margin-bottom: var(--spacing52);
  }

  .contact-form .contents-wrapper{
    flex-direction: column;
    gap: var(--spacing40);
  }

  .contact-form .contents-wrapper .form{
    width: 100%;
    padding: 24px 20px;
  }

  .contact-form .contents-wrapper .sidebox{
    width: 100%;
    padding: var(--spacing20);
  }

  .contact-form .contents-wrapper .sidebox .inner-block{
    padding: var(--spacing20) 0;
  }

  .contact-form .contents-wrapper .sidebox .logo{
    width: 60%;
    max-width: 220px;
    margin-bottom: var(--spacing20);
  }

  .contact-form .contents-wrapper .sidebox h3{
    font-size: 16px;
  }

  .contact-form .contents-wrapper .sidebox ul{
    gap: var(--spacing20);
  }

  .contact-form .contents-wrapper .sidebox ul .icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: var(--spacing8);
    aspect-ratio: 1;
    background: var(--dummy-color);
  }

  .leadpro-cf7-form .leadpro-cf7-label{
    font-size: 18px;
  }

  .leadpro-cf7-form .leadpro-cf7-required{
    font-size: 14px;
  }

  .leadpro-cf7-form .leadpro-cf7-radio-group,
  .leadpro-cf7-form .leadpro-cf7-radio-group .wpcf7-form-control{
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    gap: 12px;
  }

  .leadpro-cf7-form .leadpro-cf7-field:first-child .leadpro-cf7-label-row{
    margin-bottom: 20px;
  }

  .leadpro-cf7-form .leadpro-cf7-submit .wpcf7-submit{
    display: flex;
    height: 48px;
    padding: 0 60px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    line-height: 48px;
  }

  .leadpro-cf7-form .leadpro-cf7-two-col{
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form .contents-wrapper .sidebox .achieve-box{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }

  .contact-form .contents-wrapper .sidebox .achieve-box li{
    width: 100%;
  }

  .contact-form .contents-wrapper .sidebox .achieve-box li h4{
    text-align: center;
  }

  .contact-form .contents-wrapper .sidebox .achieve-box .num-box{
    gap: var(--spacing12);
    margin-top: var(--spacing12);
    justify-content: center;
  }

  .contact-form .contents-wrapper .sidebox .achieve-box .num-box .num{
    font-size: 36px;
  }

  .contact-form .contents-wrapper .sidebox .achieve-box .num-box .num span{
    font-size: 18px;
  }

  .contact-form .contents-wrapper .sidebox .achieve-box .num-box img{
    max-width: 18px;
  }
}

/*-------料金プランページ-------*/
/*料金プランセクション*/
.plan-intro{
  padding: var(--spacing100) 0 var(--spacing200) 0;
}

.plan-intro .contents-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan-intro h3{
  display: inline-block;
  font-size: 20px;
  background: var(--main-color-b);
  border-radius: var(--border-radius-s);
  margin: 0 auto;
  padding: 20px;
  margin-bottom: var(--spacing60);
  color: var(--base-color10);
}

.plan-intro .arrow-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing8);
  margin: 0 auto;
}

.plan-intro .arrow-box p{
  font-size: 20px;
  font-weight: 800;
}

.plan-intro .arrow-box .arrow{
  width: 10px;
  height: 45px;
  background: url("./lib/images/myicon/arrow-bottom.svg") center / 100% 100% no-repeat;
}

/*選べる3つのプランセクション*/
.plan-choice .title-area{
  margin-bottom: min(34vw, 436px);
}

.plan-choice .plan-list li{
  border: 1px solid #ccc;
}

.plan-choice .plan-list li .plan-init-cost{
  margin-top: 32px;
  text-align: center;
}

.plan-choice .btn-top-text,
.plan-choice .thirdry-button{
  display: none;
}

.plan-choice .plan-list li:nth-of-type(2) .plan-head .plan-badge{
  background: var(--base-color10);
  color: transparent;
  position: relative;
}

.plan-choice .plan-list li:nth-of-type(2) .plan-head .plan-badge::before{
  content: "一番人気";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00C0BA 0%, #07CDC7 33.48%, #21B3DC 66.95%, #1771E7 100.92%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-choice .plan-list li:nth-of-type(3) .plan-head .plan-badge{
  color: var(--sub-color-p);
}

.plan-extra-panel{
  margin: 72px auto 0;
  max-width: 1082px;
  width: calc(100% - 40px);
  background: #fff;
  border-radius: var(--border-radius-m);
}

.plan-extra-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
}

.plan-extra-grid::before{
  content: "";
  width: 1px;
  height: 152px;
  position: absolute;
  left: 50%;
  top: 21px;
  transform: translateX(-0.5px);
  background: rgba(94, 103, 118, 0.50);
}

.plan-extra-col{
  padding: 28px 18.5px;
}

.plan-extra-title{
  color: #5a5a5a;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.plan-extra-links{
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  color: #5a5a5a;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.plan-extra-links .sep{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(94, 103, 118, 0.50);
}

.plan-extra-col .thirdry-button.is-dark{
  display: block;
  margin-top: 20px;
  color: #5a5a5a;
  border-color: #5a5a5a;
}

.plan-choice .plan-extra-panel{
  border: 1px solid #ccc;
}

.plan-choice .plan-extra-panel .thirdry-button{
  display: none !important;
}

.plan-choice .plan-extra-grid::before{
  height: 80px;
}

.plan-list li.plan-extra-slide{
  display: none;
}

/*トップページ料金プランセクションのバッジ色を/planと統一*/
.home .plan-sec .plan-list li:nth-of-type(2) .plan-head .plan-badge{
  background: var(--base-color10);
  color: transparent;
  position: relative;
}

.home .plan-sec .plan-list li:nth-of-type(2) .plan-head .plan-badge::before{
  content: "一番人気";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00C0BA 0%, #07CDC7 33.48%, #21B3DC 66.95%, #1771E7 100.92%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home .plan-sec .plan-list li:nth-of-type(3) .plan-head .plan-badge{
  color: var(--sub-color-p);
}

.home .plan-sec .plan-list li .plan-init-cost{
  display: none;
}

/*プラン比較表セクション*/
.plan-comparison .th{
  width: 100%;
  display: flex;
  border-bottom: 1px solid #E2E2E2;
}

.plan-comparison .th li{
  width: 25%;
  padding: var(--spacing24);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #E2E2E2;
}

.plan-comparison .th li:first-of-type{
  border-radius: var(--border-radius-m) 0 0 0;
}

.plan-comparison .th li:last-of-type{
  border-radius: 0 var(--border-radius-m) 0 0;
}

/*
.plan-comparison .th li:last-of-type{
  border-left: 1px solid #707070;
}
*/

.plan-comparison .th h3{
  font-size: 24px;
  text-align: center;
  white-space: nowrap;
}

/*
.plan-comparison .th .large{
  font-size: 24px;
}
*/

.plan-comparison .th .backcolor-g{
  background: var(--sub-grd-g);
}

.plan-comparison .th .backcolor-b{
  background: var(--main-grd);
}

.plan-comparison .th .backcolor-p{
  background: var(--sub-grd-p);
}

.plan-comparison .th .color-g{
  color: var(--sub-color-g);
}

.plan-comparison .th .color-p{
  color: var(--sub-color-p);
}

.plan-comparison .th .color-w{
  color: var(--base-color10);
}

.plan-comparison .th .color-main{
  background: var(--main-grd);
}

.plan-comparison .tr{
  width: 100%;
  display: flex;
}

.plan-comparison .tr li{
  width: 25%;
  padding: var(--spacing16);
  border-left: 1px solid #E2E2E2;
  border-bottom: 1px solid #E2E2E2;
}

.plan-comparison .th li:first-of-type,
.plan-comparison .tr li:first-of-type{
  background: #F3F7FA;
}

.plan-comparison .tr li:first-of-type p{
  font-weight: 700;
}

.plan-comparison .tr li:last-of-type{
  border-right: 1px solid #E2E2E2;
}

.plan-comparison .tr .push{
  color: var(--main-color-b);
  font-size: 24px;
  font-weight: 700;
}

.plan-comparison .tr:last-of-type li:first-of-type{
  border-radius: 0 0 0 var(--border-radius-m);
}

.plan-comparison .tr:last-of-type li:last-of-type{
  border-radius: 0 0 var(--border-radius-m) 0;
}

.plan-comparison .table-scroll{
  width: 100%;
}

/*特別プランセクション*/
.plan-special .plan-cards{
  width: 100%;
  display: flex;
  gap: var(--spacing40);
  margin-bottom: var(--spacing80);
}

.plan-special .plan-cards li{
  width: 50%;
  padding: var(--spacing40);
  border: 3px solid #ccc;
  border-radius: var(--border-radius-m);
  position: relative;
}

.plan-special .plan-cards li:nth-of-type(1){
  border: 3px solid transparent;
  background:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(135deg, #00C0BA 0%, #07C9C3 33.48%, #21B3DC 66.95%, #1771E7 100.92%) border-box;
}

.plan-special .plan-cards li .icon{
  width: 124px;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 auto;
  margin-bottom: var(--spacing40);
}

.plan-special .plan-cards li:nth-of-type(1) .icon{
  background-image: url("./lib/images/plan/icon-plan-01.svg");
}

.plan-special .plan-cards li:nth-of-type(2) .icon{
  background-image: url("./lib/images/plan/icon-plan-02.svg");
}

.plan-special .plan-cards li h3{
  font-size: 24px;
  text-align: center;
  margin-bottom: var(--spacing32);
}

.plan-special .plan-cards li .main-des{
  font-size: 18px;
  text-align: center;
  margin-bottom: var(--spacing32);
}

.plan-special .plan-cards li .inner-list{
  display: flex;
  flex-direction: column;
  gap: var(--spacing8);
}

.plan-special .plan-cards li .inner-list h4,
.plan-special .plan-cards li .inner-list p{
  font-size: 18px;
  font-weight: 700;
}

.plan-special .plan-cards .badge{
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--main-color-c);
  padding: var(--spacing4) var(--spacing16);
  border-radius: 999px;
  color: var(--base-color10);
  font-size: 16px;
}

.plan-special .info-block{
  width: 70%;
  margin: 0 auto;
  padding: var(--spacing40) 0;
  border-bottom: 1px solid #ccc;
}

.plan-special .info-block:first-of-type{
  padding-top: 0;
}

.plan-special .info-block:last-of-type{
  padding-bottom: 0;
  border-bottom: none;
}

.plan-special .info-block h3{
  font-size: 20px;
  color: var(--main-color-b);
  font-weight: 600;
  margin-bottom: var(--spacing20);
}

.plan-special .info-block ul{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing20);
}

.plan-special .info-block ul li{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.plan-special .info-block ul li .list-left{
  margin-right: var(--spacing32);
}

.plan-special .info-block ul li .list-left h4{
  font-size: 18px;
  font-weight: 600;
}

.plan-special .info-block ul li .list-left p{
  font-size: 16px;
}

.plan-special .info-block ul li .list-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.plan-special .info-block ul li .list-right .price{
  font-size: 20px;
  color: var(--main-color-b);
  font-weight: 600;
}

/*ctaセクション*/
.cta-sec .btnbox{
  display: flex;
  gap: var(--spacing32);
  margin: 0 auto;
}

.cta-sec .btnbox .main-button{
  margin: 0;
}

.cta-sec .btnbox .sub-button{
  background: transparent;
  border: 2px solid var(--base-color10);
  width: 314px;
}

.cta-sec .btnbox .sub-button p{
  color: var(--base-color10) !important;
}

.cta-sec .point-list{
  display: flex;
  justify-content: center;
  gap: var(--spacing60);
  width: fit-content;
  margin: 0 auto;
}

.cta-sec .point-list li{
  display: flex;
  gap: var(--spacing8);
}

.cta-sec .point-list li .icon{
  width: 24px;
  height: 24px;
  background: var(--base-color10);
}

.cta-sec .point-list li p{
  font-size: 18px;
  font-weight: 600;
  color: var(--base-color10);
}

.reason-final-cta{
  gap: 0;
}

.reason-final-cta .text-box p:first-child{
  margin-bottom: 0;
}

.reason-final-cta h2{
  margin-bottom: 100px;
}

.reason-final-cta .point-list{
  margin-top: 100px;
  margin-bottom: 100px;
  gap: min(var(--spacing200), 100px);
}

.reason-final-cta .btnbox .main-button .icon img,
.reason-final-cta .btnbox .sub-button .icon img{
  display: none;
}

.reason-final-cta .btnbox .main-button .icon{
  background-color: var(--main-color-b);
  -webkit-mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
  mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
}

.reason-final-cta .btnbox .sub-button .icon{
  background-color: var(--base-color10);
  -webkit-mask: url("./lib/images/myicon/docs_b.svg") center / contain no-repeat;
  mask: url("./lib/images/myicon/docs_b.svg") center / contain no-repeat;
}

.home .cta-sec .main-button .icon img{
  display: none;
}

.home .cta-sec .main-button .icon{
  background-color: var(--main-color-b);
  -webkit-mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
  mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
}

.page-template-page-plan-php .cta-sec .btnbox .main-button .icon img,
.page-template-page-plan-php .cta-sec .btnbox .sub-button .icon img{
  display: none;
}

.page-template-page-plan-php .cta-sec .btnbox .main-button .icon{
  background-color: var(--main-color-b);
  -webkit-mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
  mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
}

.page-template-page-plan-php .cta-sec .btnbox .sub-button .icon{
  background-color: var(--base-color10);
  -webkit-mask: url("./lib/images/myicon/docs_b.svg") center / contain no-repeat;
  mask: url("./lib/images/myicon/docs_b.svg") center / contain no-repeat;
}

body.page-plan .cta-sec .btnbox .main-button .icon img,
body.page-plan .cta-sec .btnbox .sub-button .icon img{
  display: none;
}

body.page-plan .cta-sec .btnbox .main-button .icon{
  background-color: var(--main-color-b);
  -webkit-mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
  mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
}

body.page-plan .cta-sec .btnbox .sub-button .icon{
  background-color: var(--base-color10);
  -webkit-mask: url("./lib/images/myicon/docs_b.svg") center / contain no-repeat;
  mask: url("./lib/images/myicon/docs_b.svg") center / contain no-repeat;
}

body.page-plan .cta-sec .point-list li .icon{
  display: none;
}

body.page-plan .cta-sec .point-list li{
  gap: 0;
}

.plan-final-cta .btnbox .main-button .icon img,
.plan-final-cta .btnbox .sub-button .icon img{
  display: none !important;
}

.plan-final-cta .btnbox .main-button .icon{
  background-color: var(--main-color-b);
  -webkit-mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
  mask: url("./lib/images/myicon/mail_w.svg") center / contain no-repeat;
}

.plan-final-cta .btnbox .sub-button .icon{
  background-color: var(--base-color10);
  -webkit-mask: url("./lib/images/myicon/docs_b.svg") center / contain no-repeat;
  mask: url("./lib/images/myicon/docs_b.svg") center / contain no-repeat;
}

.plan-final-cta .point-list li .icon{
  display: none !important;
}

.plan-final-cta .point-list li{
  gap: 0;
}

@media screen and (max-width: 767px) {
  /*料金プランセクション*/
  .plan-intro{
    padding: var(--spacing80) 0 var(--spacing100) 0;
  }

  .plan-intro h3{
    font-size: 18px;
    margin-bottom: var(--spacing40);
    text-align: center;
  }

  .plan-intro .arrow-box{
    gap: var(--spacing4);
  }

  .plan-intro .arrow-box p{
    font-size: 16px;
  }

  /*
  .plan-intro .arrow-box .arrow{
    width: 10px;
    height: 40px;
    background: var(--dummy-color);
  }
  */

  /*選べる3つのプランセクション*/
  .plan-choice .title-area{
    margin-bottom: var(--spacing40);
  }

  .plan-choice .plan-list li{
    border: 1px solid #ccc;
    padding-bottom: 36px;
  }

  .plan-choice .plan-list li .plan-init-cost{
    margin-bottom: 0;
  }

  .plan-choice .plan-list li:nth-of-type(2){
    transform: scale(1);
  }

  .plan-choice .plan-list li:nth-of-type(1) .plan-head,
  .plan-choice .plan-list li:nth-of-type(3) .plan-head{
    position: relative;
    top: -1px;
    margin-bottom: -1px;
  }

  .plan-extra-panel{
    width: calc(100% - 32px);
  }

  .plan-extra-grid{
    grid-template-columns: 1fr;
  }

  .plan-extra-grid::before{
    display: block;
    width: calc(100% - 37px);
    height: 1px;
    left: 18.5px;
    top: 50%;
    transform: translateY(-0.5px);
  }

  .plan-extra-col{
    padding: 28px 18.5px;
  }

  .plan-extra-links{
    flex-direction: column;
    gap: 0;
  }

  .plan-extra-links .sep{
    display: none;
  }

  .plan-extra-panel--desktop{
    display: none;
  }

  .plan-list li.plan-extra-slide{
    display: block;
    order: 4;
    width: min(76vw, 320px);
    flex: 0 0 min(76vw, 320px);
    align-self: flex-end;
    padding: 0;
    background: transparent;
    border: none;
    margin: 0;
  }

  .plan-list li.plan-extra-slide .plan-extra-panel{
    width: 100%;
    margin: 0;
  }

  .plan-choice .plan-list li.plan-extra-slide{
    border: none;
    padding-bottom: 0;
  }

  .plan-list li.plan-extra-slide .plan-extra-col .thirdry-button.is-dark{
    margin-top: 36px;
    margin-bottom: 36px;
  }

  /*プラン比較表セクション*/
  .plan-comparison .table-wrapper{
    width: 200%;
  }

  .plan-comparison .table-scroll{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .plan-comparison .th li{
    width: 25%;
    padding: var(--spacing20) var(--spacing16);
  }

  .plan-comparison .th li:nth-of-type(1){
    order: 1;
  }

  .plan-comparison .th li:nth-of-type(2){
    order: 3;
  }

  .plan-comparison .th li:nth-of-type(3){
    order: 2;
  }

  .plan-comparison .th li:nth-of-type(4){
    order: 4;
  }

  .plan-comparison .th h3{
    font-size: 20px;
  }

  .plan-comparison .tr li:nth-of-type(1){
    order: 1;
  }

  .plan-comparison .tr li:nth-of-type(2){
    order: 3;
  }

  .plan-comparison .tr li:nth-of-type(3){
    order: 2;
  }

  .plan-comparison .tr li:nth-of-type(4){
    order: 4;
  }

  .plan-comparison .tr li{
    width: 25%;
    padding: var(--spacing20) var(--spacing16);
  }

  .plan-comparison .tr .push{
    font-size: 20px;
  }

  /*特別プランセクション*/
  .plan-special .plan-cards{
    flex-direction: column;
    gap: var(--spacing20);
    margin-bottom: var(--spacing52);
  }

  .plan-special .plan-cards li{
    width: 100%;
    padding: var(--spacing32) var(--spacing20);
  }

  .plan-special .plan-cards li .icon{
    width: 100px;
    aspect-ratio: 1;
    margin-bottom: var(--spacing32);
  }

  .plan-special .plan-cards li h3{
    font-size: 20px;
    margin-bottom: var(--spacing20);
  }

  .plan-special .plan-cards li .main-des{
    font-size: 16px;
    margin-bottom: var(--spacing20);
  }

  .plan-special .plan-cards li .inner-list h4,
  .plan-special .plan-cards li .inner-list p{
    font-size: 16px;
    font-weight: 700;
  }

  .plan-special .plan-cards .badge{
    top: 12px;
    right: 12px;
    padding: var(--spacing4) var(--spacing12);
    font-size: 14px;
  }

  .plan-special .info-block{
    width: 100%;
    padding: var(--spacing32) 0;
  }

  .plan-special .info-block:last-of-type{
    padding-bottom: 0;
    border-bottom: none;
  }

  .plan-special .info-block h3{
    font-size: 18px;
  }

  /*
  .plan-special .info-block ul{
    gap: var(--spacing20);
  }
  */

  .plan-special .info-block ul li{
    /*width: 100%;*/
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .plan-special .info-block ul li .list-left h4{
    font-size: 16px;
  }

  .plan-special .info-block ul li .list-left p{
    font-size: 14px;
  }

  .plan-special .info-block ul li .list-left,
  .plan-special .info-block ul li .list-right{
    width: 100%;
  }

  .plan-special .info-block ul li .list-left{
    margin-right: 0;
  }

  .plan-special .info-block ul li .list-right{
    margin-top: var(--spacing8);
  }

  .plan-special .info-block ul li .list-right .price{
    font-size: 18px;
  }

  /*ctaセクション*/
  .cta-sec .btnbox{
    flex-direction: column;
    align-items: center;
    gap: var(--spacing20);
  }

  .cta-sec .text-box p{
    margin-bottom: 0 !important;
  }

  .cta-sec .btnbox .sub-button{
    border: 2px solid var(--base-color10);
    width: 240px;
  }

  .cta-sec .point-list{
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--spacing32);
  }

  .cta-sec .point-list li .icon{
    width: 20px;
    height: 20px;
  }

  .cta-sec .point-list li p{
    font-size: 16px;
  }

  .reason-final-cta .point-list{
    margin-top: var(--spacing40);
    margin-bottom: var(--spacing40);
  }
}


/*-------選ばれる理由ページ-------*/
/*選ばれる理由セクション*/
.reason-reason{
  padding: var(--spacing100) 0 0 0;
}

.reason-reason .category-cards{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--spacing20);
  margin-bottom: var(--spacing80);
}

.reason-reason .category-cards li{
  padding: var(--spacing12);
  border: 1px solid #6c6c6c;
  border-radius: var(--border-radius-s);
  position: relative;
  overflow: hidden;
}

.reason-reason .category-cards li h3{
  font-size: 20px;
}

.reason-reason .title-box h2{
  white-space: nowrap;
}

.reason-reason .category-cards li .card-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 var(--spacing12) 0;
  border-bottom: 1px solid #999;
  margin-bottom: var(--spacing12);
}

.reason-reason .category-cards li .hukidashi{
  color: var(--base-color10);
  background-image: url("./lib/images/reason/fukidashi.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center calc(50% + 4px);
  line-height: 100%;
  width: 48px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.reason-reason .category-cards li .body-text{
  font-size: 16px;
  margin-bottom: var(--spacing32);
}

.reason-reason .category-cards li .icon{
  width: 64px;
  height: 64px;
  position: absolute;
  bottom: -5%;
  right: 5%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}

.reason-reason .category-cards li:nth-of-type(1) .icon{
  width: 64px;
  height: 61px;
  background-image: url("./lib/images/reason/icon-yen.svg");
}

.reason-reason .category-cards li:nth-of-type(2) .icon{
  width: 78px;
  height: 78px;
  background-image: url("./lib/images/reason/icon-achieve.svg");
  transform: translate(11%,9%);
}

.reason-reason .category-cards li:nth-of-type(3) .icon{
  width: 68px;
  height: 68px;
  background-image: url("./lib/images/reason/icon-team.svg");
  transform: translate(0%, -3%);
}

.reason-reason .category-cards li:nth-of-type(4) .icon{
  width: 64px;
  height: 85px;
  background-image: url("./lib/images/reason/icon-advice.svg");
  transform: translate(10%, 13%);
}

.reason-reason .category-cards li:nth-of-type(5) .icon{
  width: 85px;
  height: 43px;
  background-image: url("./lib/images/reason/icon-seo.svg");
  transform: translateY(-20px);
}

.reason-reason .category-cards li:nth-of-type(6) .icon{
  width: 62px;
  height: 52px;
  background-image: url("./lib/images/reason/icon-hand.svg");
  transform: translateY(-6px);
}

.reason-reason .category-cards li:nth-of-type(7) .icon{
  width: 70px;
  height: 70px;
  background-image: url("./lib/images/reason/icon-news.svg");
  transform: translate(8%, 0%);
}

.reason-reason .category-cards li:nth-of-type(8) .icon{
  width: 68px;
  height: 68px;
  background-image: url("./lib/images/reason/icon-writing.svg");
  transform: translate(9%, 1%);
}

.reason-reason .reason-mid-cta{
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing200);
}

.reason-reason .detail-cards{
  width: 85%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing120);
  margin: 0 auto;
  margin-bottom: var(--spacing200);
}

.reason-reason .detail-cards li{
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing60);
}

.reason-reason .detail-cards li:nth-of-type(2n-1){
  background: #F3F7FA;
  border-radius: 45px;
}

.reason-reason .detail-cards li:nth-of-type(2n-1){
  padding-right: 45px;
  box-sizing: border-box;
}

.reason-reason .detail-cards li:nth-of-type(2n){
  flex-direction: row-reverse;
  padding-left: 45px;
  box-sizing: border-box;
}

.reason-reason .detail-cards li .img{
  width: 327px;
  height: 327px;
  flex-shrink: 0;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.reason-reason .detail-cards li:nth-of-type(1) .img .price-overlay{
  position: absolute;
  top: 35%;
  left: 68%;
  transform: translate(-50%, -50%);
  color: #6FA6E8;
  -webkit-text-stroke-width: 0;
  font-family: "Hind Guntur", sans-serif;
  font-size: 34px;
  font-style: normal;
  font-weight: 800;
  line-height: 88%;
  letter-spacing: -1.56px;
  text-align: left;
  white-space: nowrap;
}

.reason-reason .detail-cards li:nth-of-type(1) .img .price-overlay .price-main{
  -webkit-text-stroke-width: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -2.24px;
  display: inline-block;
  margin-top: 6px;
}

.reason-reason .detail-cards li:nth-of-type(1) .img .price-overlay .price-wave{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -2.24px;
}

.reason-reason .detail-cards li:nth-of-type(2) .img .count-overlay{
  position: absolute;
  top: 15%;
  left: 25%;
  margin: 0;
  color: #6FA6E8;
  text-align: center;
  font-family: "Hiragino Kaku Gothic Std", sans-serif;
  font-size: 54px;
  font-style: normal;
  font-weight: 800;
  line-height: 150%;
  letter-spacing: -1.08px;
  transform: rotate(-11deg);
}

.reason-reason .detail-cards li:nth-of-type(1) .img{
  background-image: url("./lib/images/reason/reason-img-01.png");
}

.reason-reason .detail-cards li:nth-of-type(2) .img{
  background-image: url("./lib/images/reason/reason-img-02.png");
}

.reason-reason .detail-cards li:nth-of-type(3) .img{
  background-image: url("./lib/images/reason/reason-img-03.png");
}

.reason-reason .detail-cards li:nth-of-type(4) .img{
  background-image: url("./lib/images/reason/reason-img-04.png");
}

.reason-reason .detail-cards li:nth-of-type(5) .img{
  background-image: url("./lib/images/reason/reason-img-05.png");
}

.reason-reason .detail-cards li:nth-of-type(6) .img{
  background-image: url("./lib/images/reason/reason-img-06.png");
}

.reason-reason .detail-cards li:nth-of-type(7) .img{
  background-image: url("./lib/images/reason/reason-img-07.png");
}

.reason-reason .detail-cards li:nth-of-type(8) .img{
  background-image: url("./lib/images/reason/reason-img-08.png");
}

.reason-reason .detail-cards li .text-box{
  width: 66%;
}

.reason-reason .detail-cards li .text-box h3{
  font-size: 24px;
  margin-bottom: var(--spacing16);
}

.reason-reason .detail-cards li .text-box .des{
  margin-bottom: var(--spacing16);
}

.reason-reason .detail-cards li .text-box .inner-list{
  display: flex;
  flex-direction: column;
  gap: var(--spacing8);
}

.reason-reason .detail-cards li .text-box .inner-list p{
  vertical-align: middle;
}

.reason-reason .detail-cards li .text-box .inner-list p span{
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("./lib/images/myicon/check_bla.svg") center / contain no-repeat;
  margin-right: var(--spacing4);
}

.reason-reason .bottom-cards-area{
  padding: 92px 0 var(--spacing200) 0;
  width: 100%;
  position: relative;
}

.reason-reason .bottom-cards-area .title-area{
  margin-top: 0;
  margin-bottom: 23px;
}

.reason-reason .bottom-cards-area .bg-box{
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
}

.reason-reason .bottom-cards-area .bg-box .inner{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  position: relative;
}

.reason-reason .bottom-cards-area .bg-box .inner div:nth-of-type(1){
  background: #F5FFDA;
}

.reason-reason .bottom-cards-area .bg-box .inner div:nth-of-type(2){
  background: #FFD3EF;
}

.reason-reason .bottom-cards-area .bg-box .inner div:nth-of-type(3){
  background: #B1FBFF;
}

.reason-reason .bottom-cards-area .bg-box .inner div:nth-of-type(4){
  background: #D7CAFF;
}

.reason-reason .bottom-cards-area .bg-box .inner .blur{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  background-color: rgba(255,255,255,0.01);
  backdrop-filter: blur(300px);
  width: 100%;
  height: 100%;
}

.reason-reason .bottom-cards-area .bottom-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--spacing20);
  width: 100%;
}

.reason-reason .bottom-cards-area .bottom-cards li{
  padding: 10px var(--spacing12) 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  border: 1px solid #BC73B0;
  background-color: var(--base-color10);
  border-radius: var(--border-radius-s);
}

.reason-reason .bottom-cards-area .bottom-cards li .icon{
  width: 62px;
  height: 62px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 auto;
}

.reason-reason .bottom-cards-area .bottom-cards li:nth-of-type(1) .icon{
  background-image: url("./lib/images/reason/icon-support-01.svg");
}

.reason-reason .bottom-cards-area .bottom-cards li:nth-of-type(2) .icon{
  background-image: url("./lib/images/reason/icon-support-02.svg");
}

.reason-reason .bottom-cards-area .bottom-cards li:nth-of-type(3) .icon{
  background-image: url("./lib/images/reason/icon-support-03.svg");
}

.reason-reason .bottom-cards-area .bottom-cards li:nth-of-type(4) .icon{
  background-image: url("./lib/images/reason/icon-support-04.svg");
}

.reason-reason .bottom-cards-area .bottom-cards li:nth-of-type(5) .icon{
  background-image: url("./lib/images/reason/icon-support-05.svg");
}

.reason-reason .bottom-cards-area .bottom-cards li:nth-of-type(6) .icon{
  background-image: url("./lib/images/reason/icon-support-06.svg");
}

.reason-reason .bottom-cards-area .bottom-cards li:nth-of-type(7) .icon{
  background-image: url("./lib/images/reason/icon-support-07.svg");
}

.reason-reason .bottom-cards-area .bottom-cards li:nth-of-type(8) .icon{
  background-image: url("./lib/images/reason/icon-support-08.svg");
}

.reason-reason .bottom-cards-area .bottom-cards li h3{
  color: var(--base-color50);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.reason-reason .bottom-cards-area .bottom-cards li h4{
  color: var(--base-color50);
  font-size: 16px;
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.reason-reason .bottom-cards-area .bottom-cards li .special{
  background: linear-gradient(148deg, #6BC4E9 -6.55%, #57DCBB 106.62%);
  display: flex;
  width: 164px;
  height: 34px;
  padding: 0 50px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 20px;
  color: var(--base-color10);
  text-align: center;
  margin: 0 auto;
  margin-top: var(--spacing12);
  margin-bottom: var(--spacing12);
}

.reason-reason .bottom-cards-area .bottom-cards li .body-text{
  width: 100%;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .reason-reason .category-cards{
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .reason-reason .category-cards li h3{
    font-size: 25px;
  }

  .reason-reason .category-cards li .hukidashi{
    width: 60px;
    height: 44px;
    font-size: 20px;
  }

  .reason-reason .category-cards li .body-text{
    font-size: 20px;
  }

  .reason-reason .category-cards li:nth-of-type(1) .icon{
    width: 72px;
    height: 69px;
  }

  .reason-reason .category-cards li:nth-of-type(2) .icon{
    width: 73px;
    height: 73px;
  }

  .reason-reason .category-cards li:nth-of-type(3) .icon{
    width: 76px;
    height: 76px;
  }

  .reason-reason .category-cards li:nth-of-type(4) .icon{
    width: 60px;
    height: 95px;
  }

  .reason-reason .category-cards li:nth-of-type(5) .icon{
    width: 95px;
    height: 48px;
  }

  .reason-reason .category-cards li:nth-of-type(6) .icon{
    width: 70px;
    height: 59px;
  }

  .reason-reason .category-cards li:nth-of-type(7) .icon{
    width: 63px;
    height: 63px;
  }

  .reason-reason .category-cards li:nth-of-type(8) .icon{
    width: 80px;
    height: 80px;
  }

  .reason-reason .bottom-cards-area .bottom-cards{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    margin-left: calc(45px - var(--spacing16));
    margin-right: calc(45px - var(--spacing16));
    width: auto;
  }

  .reason-reason .detail-cards{
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    gap: var(--spacing52);
  }

  .reason-reason .detail-cards li{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "image"
      "desc"
      "list";
    gap: 0;
    position: relative;
    z-index: 0;
    background: transparent;
    padding: 15px !important;
    border-radius: 0;
  }

  .reason-reason .detail-cards li::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
  }

  .reason-reason .detail-cards li:nth-of-type(2n-1),
  .reason-reason .detail-cards li:nth-of-type(2n){
    padding: 15px !important;
    border-radius: 0;
  }

  .reason-reason .detail-cards li:nth-of-type(2n-1)::before{
    background: #F3F7FA;
  }

  .reason-reason .detail-cards li:nth-of-type(2n)::before{
    background: #FFF;
  }

  .reason-reason .detail-cards li:nth-of-type(2n){
    flex-direction: initial;
  }

  .reason-reason .detail-cards li .img{
    grid-area: image;
    width: calc(100% + 30px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 0;
  }

  .reason-reason .detail-cards li .text-box{
    width: 100%;
    display: contents;
  }

  .reason-reason .detail-cards li .text-box h3{
    grid-area: title;
    font-size: 20px;
    text-align: center;
    margin-bottom: var(--spacing16);
  }

  .reason-reason .detail-cards li .text-box .des{
    grid-area: desc;
    margin-bottom: 0;
  }

  .reason-reason .detail-cards li .text-box .inner-list{
    grid-area: list;
    margin-top: 10px;
  }
}

/*-------ブログページ-------*/
/*サイドバー*/
.blog #side{
  width: 35%;
  margin-left: 0;
  float: none;
}

.blog #side .side-cta-list,
.single #side .side-cta-list{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing40);
}

.blog #side .side-cta-list li,
.single #side .side-cta-list li{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing12);
  padding: var(--spacing40) var(--spacing32);
  border-radius: var(--border-radius-m);
  background: var(--dummy-color);
}

.blog #side .side-cta-list li h3,
.single #side .side-cta-list li h3{
  font-size: 20px;
  text-align: center;
}

.blog #side .side-cta-list li .btn,
.single #side .side-cta-list li .btn{
  padding: 16px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  background: var(--base-color10);
  gap: 4px;
}

.blog #side .side-cta-list li .btn p,
.single #side .side-cta-list li .btn p{
  color: var(--main-color-b);
  font-size: 16px;
}

.blog #side .side-cta-list li .btn .icon,
.single #side .side-cta-list li .btn .icon{
  width: 24px;
  height: 24px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.blog #side .side-cta-list li:nth-of-type(1) .btn .icon,
.blog #side .side-cta-list li:nth-of-type(2) .btn .icon,
.single #side .side-cta-list li:nth-of-type(1) .btn .icon,
.single #side .side-cta-list li:nth-of-type(2) .btn .icon{
  background-image: url("./lib/images/myicon/arrow-right.svg");
}

.blog #side .side-cta-list li:nth-of-type(3) .btn .icon,
.single #side .side-cta-list li:nth-of-type(3) .btn .icon{
  background-image: url("./lib/images/myicon/download.svg");
}

.blog #side .side-main-cta,
.single #side .side-main-cta{
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.blog #side .side-cta-list li .btn,
.single #side .side-cta-list li .btn{
  width: 280px;
  max-width: 100%;
  box-sizing: border-box;
}

.blog #side .side-cta-list li .btn p,
.single #side .side-cta-list li .btn p{
  white-space: nowrap;
}

.blog #side .side-main-cta .main-button,
.single #side .side-main-cta .main-button{
  width: 280px;
  max-width: 100%;
  box-sizing: border-box;
}

.blog #side .side-main-cta .main-button p,
.single #side .side-main-cta .main-button p{
  white-space: nowrap;
}

.blog .wrap-inner{
  padding: var(--spacing100) 0 var(--spacing200) 0;
}

.blog #content{
  background: linear-gradient(174deg, #F3F7FA 0%, #E9F6FF 100%);
}

.blog .title-box{
  margin-bottom: var(--spacing80);
}

.blog .contents-container{
  width: 100%;
  display: flex;
  gap: var(--spacing40);
}

.blog .post-loop-wrap{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--spacing40);
  margin-bottom: 80px;
}

.blog #main{
  float: none;
}

.blog .main-inner{
  margin-right: 0;
  /*width: calc(100% - (25% + var(--spacing40)));*/
  width: 100%;
}

.blog .post-loop-wrap article{
  width: 30%;
  margin: 0;
  border: none;
  background: transparent !important;
}


.blog .post-loop-wrap article h2 a{
  display: block;
}

.blog .post-loop-wrap article .cat-name{
  margin-bottom: var(--spacing16);
}

.blog .post-loop-wrap article .cat-name span{
  color: var(--base-color50);
  font-size: 12px;
  padding: 4px 12px;
  background: #DBDBDB;
  border-radius: 999px;
  border: none;
}

.blog .post-loop-wrap article .post-header{
  padding: var(--spacing20) 0 0 0;
  border: none;
}

.blog .post-loop-wrap article .post-thumbnail{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--border-radius-m);
}

.blog .post-loop-wrap article .post-thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

.blog .blog-pagination{
  margin-top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.blog .blog-pagination .page-numbers{
  color: #0E192B;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
  min-width: 50px;
  height: 50px;
  padding: 10px;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.blog .blog-pagination .page-numbers.current{
  background: #0E59A6;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .blog .contents-container{
    display: block;
  }

  .blog #content .wrap{
    padding: 0 20px;
  }

  .blog .post-loop-wrap{
    gap: 20px;
  }

  .blog .post-loop-wrap article{
    width: calc((100% - 20px) / 2);
  }

.blog #side{
  width: 100%;
  margin-top: var(--spacing80);
}
}

@media screen and (max-width: 1280px) and (min-width: 768px) {
  .blog #side .side-cta-list li{
    transform: scale(0.95);
    transform-origin: top center;
  }
}

@media screen and (max-width: 1120px) and (min-width: 768px) {
  .blog #side .side-cta-list li{
    transform: scale(0.9);
  }
}

@media screen and (max-width: 980px) and (min-width: 768px) {
  .blog #side .side-cta-list li{
    transform: scale(0.85);
  }
}

/* SP hamburger modal menu */
body.sp-menu-open {
  overflow: hidden;
}

#header-nav-btn .icon {
  display: none;
}

#header-nav-btn .menu-toggle {
  display: none;
}

@media screen and (max-width: 991px) {
  #header-nav-btn {
    margin-left: 12px;
    background: transparent;
    padding: 0;
    line-height: normal;
  }

  #header-nav-btn .menu-toggle {
    width: 44px;
    height: 44px;
    border: none;
    background: #000;
    border-radius: 999px;
    padding: 10px 8px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  #header-nav-btn .menu-toggle .menu-toggle-bar {
    width: 72%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    display: block;
  }

  #gnav-sp {
    position: fixed;
    inset: 0;
    top: 0 !important;
    width: 100%;
    height: 100vh;
    margin: 0;
    background: rgba(14, 25, 43, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
    display: block !important;
  }

  #gnav-sp.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #gnav-sp .gnav-sp-close {
    position: absolute;
    top: 12px;
    right: var(--spacing16);
    border: none;
    background: transparent;
    color: #fff;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }

  #gnav-sp .gnav-sp-inner {
    width: 100%;
    max-width: 390px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 88px 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #gnav-sp .gnav-sp-logo {
    display: block;
    width: 173px;
    margin-bottom: 52px;
  }

  #gnav-sp .gnav-sp-logo img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0) saturate(100%) invert(64%) sepia(83%) saturate(1200%) hue-rotate(166deg) brightness(103%) contrast(98%);
  }

  #gnav-sp .grid-wrap {
    width: 100%;
    display: block;
  }

  #gnav-sp #header-cont-about {
    display: none;
  }

  #gnav-sp #header-cont-content {
    width: 100%;
  }

  #gnav-sp #header-cont-content h2 {
    display: none;
  }

  #gnav-sp #gnav-container-sp {
    width: 100%;
  }

  #gnav-ul-sp {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  #gnav-ul-sp > li {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }

  #gnav-ul-sp > li > a {
    color: #fff !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    padding: 0;
  }

  #gnav-sp #header-cont-content li a:before,
  #gnav-sp #footer-nav li a:before {
    display: none;
  }

  #gnav-sp #header-cont-content li.menu-item-has-children span.dropdown-toggle {
    display: none;
  }

  body.sp-menu-open #header-nav-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/*投稿詳細ページ*/
/*=====================
  キャンペーン記事詳細スタイル
=====================*/

.single #content > .wrap{
  width: 100%;
  display: flex;
  /*gap: var(--spacing40);*/
  width: 100%;
  max-width: 1280px;
  padding: 0 var(--spacing40);
}

.single #header .wrap{
  display: block;
  padding: 0;
}

.single #side{
  margin-left: var(--spacing40);
}

.single .main-inner{
  margin-right: 0;
}


/* 全体コンテナ */
.campaign-article {
  background: #fff !important; /* 背景は白 */
}

.campaign-article__container {
  max-width: 768px; /* デザインカンプに合わせた幅 */
  margin: 0 auto;
  border: none !important; /* 既存の枠線を消去 */
}

/* メイン画像 */
.campaign-article__main-visual {
  width: 100%;
  max-width: 335px; /* SPサイズ */
  margin: 0 auto 44px;
}

@media screen and (min-width: 768px) {
  .campaign-article__main-visual {
    max-width: 100%; /* PCではフル幅 */
    margin-bottom: 80px;
  }
}

.campaign-article__main-visual img {
  border-radius: 24px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* タイトルエリア */
.campaign-article__header {
  padding: 0 !important;
  border-bottom: none !important;
  margin-bottom: 24px;
}

.campaign-article__title {
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1.62 !important;
  text-align: left;
}

@media screen and (max-width: 1200px) {
    .single #content > .wrap{
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (min-width: 768px) {
  .campaign-article__title {
    font-size: 32px !important;
  }
}

@media screen and (max-width: 768px) {
  .single #content{
    margin-top: 56px;
  }
  .single #side{
    width: 100%;
    margin-top: var(--spacing80);
    margin-left: 0;
  }
  .single #content > .wrap{
    flex-direction: column;
    padding: 0 var(--spacing16);
  }
}

/* 本文内の基本装飾 */
.campaign-article__content {
  padding: 0 !important;
  line-height: 2.22 !important;
  font-size: 16px;
}

.campaign-article__content h2 {
  background: transparent !important; /* 既存の暗い背景を解除 */
  color: var(--base-color50) !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 48px 0 24px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

@media screen and (min-width: 768px) {
  .campaign-article__content h2 {
    font-size: 28px !important;
  }
}

/* 画像が入る想定のスタイル（本文内） */
.campaign-article__content img {
  border-radius: 24px;
  margin: 32px 0;
}

/* グレーボックス（ショートコード等での出力を想定） */
.cms-gray-box {
  background: #EDEDED;
  border-radius: var(--border-radius-s);
  padding: 28px;
  margin: 32px 0;
  font-size: 16px;
}

/* ポイントボックス（ショートコード等での出力を想定） */
.cms-point-box {
  border: 1px solid #3B3B3B;
  border-radius: 28px;
  overflow: hidden;
  margin: 32px 0;
  background: #fff;
}

.cms-point-box__head {
  background: #34343A;
  color: #fff;
  padding: 16px 20px;
  font-weight: bold;
}

.cms-point-box__body {
  padding: 28px;
}

.cms-point-box__item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  list-style: none !important;
}

/* CTAエリア */
.campaign-article__cta {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media screen and (min-width: 768px) {
  .campaign-article__cta {
    margin-top: 100px;
  }
}

.campaign-article__cta .main-button,
.campaign-article__cta .sub-button {
  width: 100%;
  max-width: 304px;
  padding: 12px 24px;
  justify-content: center;
}

.campaign-article__cta .sub-button {
  border: 1px solid #3F7976;
  color: #3F7976;
}

.campaign-article__cta-footer {
  margin-top: 16px;
  text-align: center;
}

.campaign-article__cta-footer a {
  font-size: 16px;
  color: #3F7976;
  text-decoration: underline;
}

.campaign-article ul{
  /*list-style: none;*/
  margin-left: 16px;
}

.campaign-article ul li{
  color: var(--base-color50);
  font-weight: 400;
}

.campaign-article .main-button img,
.campaign-article .sub-button img,
.campaign-article .main-button p,
.campaign-article .sub-button p{
  margin: 0;
}

.campaign-article .main-button,
.campaign-article .sub-button{
  padding: 24px 60px;
  width: fit-content;
  box-sizing: border-box;
  max-width: none;
}

.campaign-article td{
  color: var(--base-color50);
}

.campaign-article .post-meta-area ul{
  margin-left: 0;
}

.post-header .cat-name span{
  border: 1px solid var(--base-color40);
  color: var(--base-color40);
  display: inline-block;
  padding: 4px 16px;
  font-size: 14px;
  border-radius: 999px;
}

.campaign-article .post-footer-list a{
  color: var(--main-color-b);
  font-weight: 400;
  pointer-events: none;
}

.campaign-article .post-footer{
  padding-left: 0;
  padding-right: 0;
}