@media print {
  body {
    overflow: visible !important;
  }
}

:root {
  --font-b: "Shuei NijimiMGo B";
  --font-tel: "Helvetica,serif";
  /* base color */
  --color-green: #0aa546;
  --color-green2: #9cbc3a;
  --color-green3: #065c40;
  --color-green4: #6eba3d;
  --color-red: #ff563f;
  --color-red2: #cb0000;
  --color-orange: #eb5e01;
  --color-orange2: #feedcd;
  --color-beige: #fffae7;
  --color-beige2: #d2c898;
  --color-beige3: #eceade;
  --color-beige4: #f6f3d6;
  --color-yellow: #ffec60;
  --color-yellow2: #ffdf00;
  --color-brown: #393a34;
  --color-blue: #eaf6fb;
  --color-blue2: #094f8d;
  --color-gray: #ccc;
  --color-gray2: #eceded;
}

html {
  scroll-behavior: smooth;
  overflow: auto;
  /* scroll-behavior:smooth のおまじない */
}

@supports (scroll-behavior: smooth) {
  @-moz-document url-prefix() {
    html {
      scroll-behavior: auto;
      /* Firefoxではスムーススクロールを無効化 */
    }
  }
}

body {
  line-height: 1.7;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic,
    "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    sans-serif;
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
}

strong {
  color: #dc3a12;
}

blockquote {
  border: solid 1px #cccccc;
  background: #f0f0f0;
  margin: 1em;
  padding: 1em;
}

dl {
  margin: 1em 0;
}

dd {
  margin-left: 3em;
}

ul,
ol {
  margin: 1em 0 1em 2em;
  padding: 0;
}

p {
  margin: 1em 0;
}

a {
  text-decoration: underline;
}

a img {
  vertical-align: middle;
}

a:not([href]) {
  pointer-events: none;
  text-underline-offset: -0.5em;
}

input[type="text"]:focus,
textarea:focus {
  background-color: #ffc;
}

/* lazyload */
.fade {
  opacity: 0;
  transition: opacity 0.5s;
}

.fade.lazyloaded {
  opacity: 1;
}

.fadeUp {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.5s;
}

.fadeUp.lazyloaded {
  transform: translateY(0);
  opacity: 1;
}

.zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: 0.5s;
}

.zoom.lazyloaded {
  transform: scale(1);
  opacity: 1;
}

/* clearfix */
.pkg:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

#breadcrumbs {
  margin: 0;
  padding: 10px 0;
  font-size: 12px;
}

#breadcrumbs ul {
  display: inline;
  margin: 0;
}

#breadcrumbs,
#breadcrumbs ul {
  list-style-type: none;
}

#breadcrumbs li {
  display: inline;
}

#breadcrumbs ul li {
  margin-left: 0.5em;
}

#breadcrumbs ul ul:before {
  content: ">";
  margin-left: 0.5em;
}

.entry-meta {
  font-size: 12px;
}

.entry-meta dt,
.entry-meta dd {
  display: inline;
}

.entry-header .entry-meta {
  text-align: right;
}

.entry-footer .entry-meta {
  clear: both;
  margin: 1em 0 0;
  border: dotted 1px #ccc;
  padding: 5px;
}

.entry-date {
  text-align: center;
}

/* content */
blockquote .cite {
  text-align: right;
}

a.img {
  display: block;
  text-decoration: none;
  overflow: hidden;
}

.img {
  display: block;
  position: relative;
  background-repeat: no-repeat;
  white-space: nowrap;
  overflow: hidden;
  text-indent: 100%;
}

.img * {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style-type: none;
  white-space: nowrap;
  overflow: hidden;
  text-indent: 100%;
}

.img br {
  display: none;
}

.img a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

table.img {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table.img tr,
table.img th,
table.img td {
  background-color: transparent !important;
}

.clr {
  clear: both;
}

.img2 {
  text-align: center;
  text-indent: 0;
}

div.att {
  margin-top: 1em;
}

div.att>p,
p.att {
  margin-top: 1em;
  text-indent: -1em;
  padding-left: 1em;
  text-align: left;
}

div.att p {
  margin: 0;
}

div.att>p>span:first-child,
.att>span:first-child {
  color: red;
  font-style: normal;
}

span.att {
  text-indent: 0;
  padding: 0;
}

.att2 {
  color: red;
}

p.more a,
a.more {
  position: relative;
  padding-left: 12px;
}

p.more a:before,
a.more:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #12a73b;
}

.button a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  margin: 2em auto;
  width: 218px;
  height: 32px;
  background: #eb5e01;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;

  &[target="_blank"]::after {
    content: "";
  }

  &::before {
    content: "";
    position: absolute;
    right: 8px;
    top: 8px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background: #fff;
  }

  &::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    border-style: solid;
    border-width: 3px 3px 0 0;
    border-color: #f7af0e;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
  }
}

/* サムネ画像 */
.thumb img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 0 0;
}

.check-list {
  list-style-type: none;
  margin: 2em 0;
}

.check-list li {
  position: relative;
  padding: 5px 0 5px 38px;
  font-size: 22px;
  font-weight: bold;
}

.check-list li:before {
  content: "";
  position: absolute;
  top: 14px;
  left: 6px;
  width: 24px;
  height: 21px;
  background: url(check_icon01.webp) no-repeat;
}

.check-list2 {
  margin-left: 0;
  list-style-type: none;
}

.check-list2 li {
  position: relative;
  padding: 5px 0 5px 40px;
  font-size: 128%;
}

.check-list2 li:before {
  content: "";
  position: absolute;
  left: 12px;
  top: 8px;
  border: solid 2px #000;
  width: 16px;
  height: 16px;
}

.check-list2 li:after {
  content: "";
  position: absolute;
  left: 17px;
  top: 0;
  width: 10px;
  height: 20px;
  transform: rotate(40deg);
  border-bottom: 3px solid #f00;
  border-right: 3px solid #f00;
  box-shadow: 2px 2px 2px #ccc;
}

/* wordpress */
.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
  max-width: 100%;
}

.alignright {
  float: right;
  margin-bottom: 1em;
  margin-left: 1em;
}

.alignleft {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}

/* number list */
.number-list {
  counter-reset: number;
  list-style-type: none;
  margin: 1em 0 1em 30px;
}

.number-list li {
  position: relative;
  padding: 5px 0 5px 30px;
  font-size: 125%;
  color: #e2a91e;
  counter-increment: number;
}

.number-list li:before {
  content: counter(number);
  position: absolute;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: #e2a91e;
  color: #fff;
  font-size: 88%;
  text-align: center;
  font-weight: bold;
}

.number-list2 {
  counter-reset: number;
  list-style-type: none;
  margin: 1em 0;
  line-height: 1.5;
}

.number-list2 li {
  position: relative;
  margin: 10px 0 0;
  padding: 10px 10px 10px 50px;
  font-size: 125%;
  background-color: #a72c29;
  color: #fff;
  text-indent: -40px;
}

.number-list2 li:before {
  counter-increment: number;
  content: counter(number) ". ";
  width: 30px;
  height: 30px;
  background-color: #a72c29;
  color: #fff;
  text-align: center;
  z-index: -1;
}

.number-list3 {
  counter-reset: number;
  list-style-type: none;
  margin: 1em 0 1em 30px;
}

.number-list3 li {
  position: relative;
  padding: 0 0 0 60px;
  background: initial;
  color: inherit;
  font-size: 16px;
  counter-increment: number;
}

.number-list3 li:before {
  content: counter(number);
  position: absolute;
  left: 0;
  bottom: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: #3078ce;
  color: #fff;
  box-shadow:
    0px 0px 0px 2px rgba(255, 255, 255, 1),
    0px 0px 0px 5px rgba(48, 120, 206, 1);
  font-size: 20px;
}

.b2 {
  color: var(--color-red2);
}

.b3 {
  background-image: linear-gradient(transparent 80%, #ff0 80%);
  font-weight: bold;
}

/* bouten */
/* .b3 { padding-top:.6em; background-position: top left -2px -8px; background-repeat: repeat-x; background-size: 1em .8em; background-image: radial-gradient(.18em .18em at center center,#e3a81c,#e3a81c 100%,transparent); font-size:119.05%; } */
.b4 {
  padding-top: 0.6em;
  text-emphasis: filled circle red;
  font-size: 119.05%;
}

a[target="_blank"]:not(:has(img)):after {
  content: url(openwindow.webp);
  margin-left: 2px;
}

/* a[href$=".pdf"]:not(:has(img)):after {
  content: url(pdf_small.webp);
  margin-right: 2px;
} */

input[type="search"] {
  border-radius: 20px;
  border: solid 1px #ccc;
  background: url(search.svg) no-repeat 4px 50%/16px 16px;
  padding-left: 20px;
  box-sizing: border-box !important;
}

/* table */
.table {
  margin: 1em auto 0;
  border-collapse: collapse;
  border-spacing: 0;
}

table.line th,
table.line td,
.table th,
.table td {
  color: #333;
  padding: 2px 5px;
  border: solid 1px #ccc;
}

.table th {
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
}

.odd,
.table>tbody>tr>td {
  background: #fff;
}

.even,
.table2>tbody>tr:nth-of-type(2n)>td,
.table2>tbody>tr:nth-of-type(2n + 1)>th,
.table>tbody>tr>th {
  background-color: #f7f7f7;
}

.table2>tbody>tr:nth-of-type(2n)>th {
  background-color: #eee;
}

.table>tbody>tr.head>th {
  background-color: #ddd;
  font-weight: bold;
}

caption,
tr.caption>th {
  background: #6d9923;
  background: linear-gradient(to bottom, #6d9923 0%, #588217 100%);
  color: #fff;
  text-align: left !important;
  padding: 2px 5px;
  text-shadow: 1px 1px 1px #000;
}

.fee {
  margin: 1em auto 0;
  width: 100%;
}

.fee>tbody>tr>th,
.fee>tbody>tr>td,
.table .val {
  vertical-align: middle;
  text-align: center;
}

.table .text {
  text-align: left !important;
}

table.list {
  width: 100%;
  margin-top: 1em;
}

table.list th,
table.list td {
  vertical-align: top;
  text-align: left;
}

table.list .head td {
  text-align: center;
}

.history {
  border: none;
  width: 100%;
  margin-top: 1em;
}

.history th {
  font-weight: normal;
  width: 7em;
}

.history th,
.history td {
  border: none;
  text-align: left;
  vertical-align: top;
  border-top: dashed 1px silver;
  padding: 2px 0;
}

.history tr:first-child th,
.history tr:first-child td {
  border: none;
}

.table td :first-child {
  margin-top: 0;
  margin-bottom: 0;
}

.large {
  font-size: 112%;
}

.larger {
  font-size: 125%;
}

.mark,
.mark-table td {
  text-align: center;
  font-family: "MS PGothic";
}

table.career-path {
  width: 100%;

  & th,
  & td {
    border: solid 1px var(--color-green2);
    padding: 8px;

    &.career-path {
      padding-right: 32px;
      background-repeat: no-repeat;
      background-position: calc(100% - 8px) 50%;

      &.lazyloaded {
        content: "";
        background-image: url(cp_icon.webp);
      }
    }
  }

  & tr.head th {
    background: var(--color-green3);
    color: #fff;
  }

  &.career-path2 {

    & th,
    & td {
      border-color: var(--color-beige2);
      background-color: #fff;
      text-align: left;
      vertical-align: top;
    }

    & tr:nth-child(2n+1) th,
    & tr:nth-child(2n+1) td {
      background-color: var(--color-beige3)
    }

    & th {}

    & tr.head th {
      background-color: var(--color-brown);
    }
  }
}

.mailaddress {
  vertical-align: middle;
}

.gmap {
  position: relative;
  margin: 20px auto;
  width: 600px;
  height: 600px;
}

.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#change-view {
  display: none;
}

.mobile #change-view {
  display: block;
}

#change-view {
  clear: both;
  margin: 16px auto;
  width: 320px;
}

#change-view li {
  float: left;
}

#change-view li a {
  display: block;
  height: 48px;
  text-indent: -9999px;
}

.tel.number {
  font-size: 36px;
  font-weight: bold;

  &.lazyloaded::before {
    content: "";
    display: inline-block;
    margin-right: 8px;
    width: 50px;
    height: 20px;
    background: url(free-daial.webp) no-repeat;
  }
}

/* content */
article {
  padding: 0 10px;
}

article>*:first-child {
  margin-top: 0;
}

article>*:last-child {
  margin-bottom: 0;
}

.page-title,
article h1 {
  display: none;
  margin: 1em 0;
  font-size: 157%;
  border-top: solid 1px #198040;
  border-bottom: solid 1px #198040;
  padding: 14px 0 14px 19px;
  position: relative;
  /* テキストグラデーション */
  color: #ff8c00;
  background: linear-gradient(#c38646, #88643a);
  background-clip: text;
  color: transparent;
  font-size: 20px;
}

article h1:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 4px;
  height: 32px;
  background-color: #e27505;
}

article h1+h2,
article h1+h3,
article h2+h3 {
  margin-top: 1em;
}

article h1.img {
  border: none;
  height: 160px;
  padding: 0;
  text-indent: -9999px;
}

article h2 {
  margin: 2em 0 1em;
  font-size: 157%;
  background-color: #f3f7d5;
  color: #005a49;
  padding: 5px 13px;
  border-top: solid 4px #005a49;
}

article h2 a {
  position: relative;
  display: block;
  margin: -5px -13px;
  padding: 5px 13px;
  color: inherit;
  text-decoration: none;
}

article h2 a:after {
  content: "";
  position: absolute;
  right: 10px;
  top: calc(50% - 5px);
  border-style: solid;
  border-width: 4px 4px 0 0;
  border-color: #fff;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

article h1+h2 {
  margin-top: 1em !important;
}

article h3 {
  margin: 2em 0 1em;
  font-size: 114%;
  color: #319041;
  border: solid 1px #319041;
  padding: 7px 12px;
}

article h4 {
  margin: 1.5em 0 1em;
  font-size: 100%;
  color: #319041;
  border-bottom: dashed 1px #319041;
}

article h5 {
  margin: 1em 0;
  font-size: 100%;
  color: #319041;
}

article h6 {
  margin: 1em 0;
  font-size: 100%;
  color: #000;
}

#gotop {
  display: block;
  position: fixed;
  width: 100%;
  height: 0;
  top: auto;
  bottom: 20px;
  z-index: 9999;
}

#gotop a {
  margin-top: -100px;
  margin-right: -15mm;
}

.gotop a {
  position: relative;
  float: right;
  background: #666;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;

  &.is-show {
    opacity: 1;
    visibility: visible;
  }
}

.gotop a:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -4px;
  border-style: solid;
  border-width: 4px 0 0 4px;
  border-color: #fff;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.check-box {
  list-style-type: none;
  margin: 0;
}

.check-box input {
  display: none;
}

.check-box label:before {
  content: "";
  position: absolute;
  border: solid 4px #ccc;
  margin-top: -10px;
  left: 0;
  top: 50%;
  width: 16px;
  height: 16px;
}

.check-box label {
  display: block;
  position: relative;
  padding: 14px 0 14px 35px;
  font-size: 19px;
  font-weight: bold;
}

.check-box input:checked+label:after {
  content: "";
  display: block;
  position: absolute;
  margin-top: -15px;
  top: 50%;
  left: 7px;
  width: 9px;
  height: 18px;
  transform: rotate(40deg);
  border-bottom: 3px solid #f00;
  border-right: 3px solid #f00;
}

/*  */
.drop-down-category {
  margin: 1em auto 0;
}

.pagination {
  display: none;
  clear: both;
  margin: 20px 0;
  font-size: 75%;
  line-height: 2;
}

.pagination {
  display: block;
}

.pagination:after {
  clear: both;
  display: block;
  content: " ";
  height: 0;
}

.pagination>* {
  float: left;
  margin: 2px 2px 2px 0;
  padding: 6px 9px 5px 9px;
  text-decoration: none;
  width: auto;
  color: #fff;
  background: #555;
}

.pagination a:hover,
.pagination .current {
  background-color: #005a49;
  color: #fff;
}

/* plugin */
.yarpp h3 {
  margin: 1em 0;
  padding: 0;
  background: transparent;
  color: #198040;
  font-size: 18px;
  line-height: 1.5;

  &:before,
  &:after {
    content: none;
  }
}

.yarpp-thumbnails-horizontal {
  display: flex;
  flex-wrap: wrap;
}

.yarpp-thumbnails-horizontal>* {
  border: none !important;
  margin: 10px 0 0 10px !important;
  width: calc(25% - 10px) !important;
}

.yarpp-thumbnail>img,
.yarpp-thumbnail-default {
  height: auto !important;
}

/* table of content */
#ez-toc-container {
  border-style: dotted;
  margin-top: 1em;
  background: #fff;
  box-sizing: border-box;
  width: 100% !important;
}

#ez-toc-container li {
  border-top: solid 1px #ccc;
}

#ez-toc-container li:first-child {
  border-top: none;
}

#ez-toc-container li a {
  display: block;
  color: #005a49;
}

#ez-toc-container.counter-decimal ul.ez-toc-list li a::before,
.ez-toc-widget-container.counter-decimal ul.ez-toc-list li a::before {
  content: counters(item, "-") ". " !important;
  counter-increment: item !important;
}

/* contact form 7 */
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
}

.wpcf7 *:focus {
  background-color: #ffc;
}

.wpcf7 input,
.wpcf7 textarea {
  font-weight: normal;
}

.wpcf7 label {
  font-weight: bold;
}

.wpcf7 input.name {
  width: 20em;
}

.wpcf7 input.tel {
  width: 14em;
}

.wpcf7 input.mail {
  width: 30em;
}

.wpcf7 input.zip {
  width: 8em;
}

.wpcf7 input.pref {
  width: 8em;
}

.wpcf7 input.address {
  box-sizing: border-box;
  width: 100%;
}

.wpcf7 textarea {
  box-sizing: border-box;
  width: 100%;
  height: 8em;
}

.wpcf7 .require {
  padding: 2px 8px;
  background: var(--color-red);
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  vertical-align: middle;
}

.wpcf7 fieldset {
  background: transparent;
  margin: 1em 0 0;
  padding: 10px 15px;
}

.wpcf7 fieldset label {
  font-weight: normal;
  white-space: nowrap;
  float: left;
  margin-right: 1em;
}

.wpcf7 legend {
  font-weight: bold;
  color: #000;
}

.wpcf7 select {
  max-width: 100%;
}

.wpcf7-checkbox {
  display: block;
  clear: both;
}

.wpcf7-checkbox .wpcf7-list-item {
  display: block;
}

.wpcf7-checkbox label {
  font-weight: normal;
}

.wpcf7-checkbox:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
}

.wpcf7-radio label {
  font-weight: normal;
}

.wpcf7 .mf_month,
.wpcf7 .mf_day,
.wpcf7 .mf_hour,
.wpcf7 .mf_month2,
.wpcf7 .mf_day2,
.wpcf7 .mf_hour2,
.wpcf7 .mf_month3,
.wpcf7 .mf_day3,
.wpcf7 .mf_hour3 {
  display: inline;
}

.wpcf7 .mf_privacy {
  position: static;
  display: inline;
  margin-right: 1em;
}

.wpcf7 #mf_privacy {
  position: relative;
}

.wpcf7 #mf_privacy input[type="checkbox"] {
  margin-right: 8px;
}

.wpcf7 #mf_privacy .wpcf7-not-valid-tip {
  position: absolute;
  left: 0;
  bottom: -1em;
  width: 100%;
}

.wpcf7 #mf_privacy .wpcf7-form-control-wrap {
  display: inline;
}

.wpcf7 .wpcf7-not-valid {
  background: pink;
}

.wpcf7 input[type="submit"]:active {
  border: inset 2px #ccc;
  transform: translate(1px, 1px);
}

/* widget */
*[class*="widget"] h2,
*[class*="widget"] h3,
*[class*="widget"] h4 {
  margin: 0;
}

#contents *[class*="widget"] {
  margin-top: 10px;
  margin-bottom: 10px;
}

#contents *[class*="widget"]:first-child {
  margin-top: 0;
}

#contents *[class*="widget"]:last-child {
  margin-bottom: 0;
}

.widget-posts .thumb .noimg {
  position: relative;
  display: block;
  background: #ccc;
  width: 100%;
  padding-top: 66.67%;
}

.widget-posts .thumb .noimg:before {
  content: "no image";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}

.widget-post .date {
  width: 9em;
}

.widget-post .new {
  display: inline;
  margin-left: 5px;
  color: #f00;
}

/* 流れ図 */
.widget-flow .step {
  position: relative;
  padding-left: 80px;
  margin-bottom: 18px;
}

.widget-flow .step:before {
  content: "";
  position: absolute;
  left: 0;
  margin: 0 27px;
  width: 20px;
  height: 100%;
  background: #f8cb86;
  z-index: 0;
}

.widget-flow .step:after {
  content: "";
  position: absolute;
  left: 0;
  margin: 0 19px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 18.5px 0 18.5px;
  border-color: #f8ca86 transparent transparent transparent;
  z-index: 1;
}

.widget-flow .step:last-child:before,
.widget-flow .step:last-child:after {
  border: none;
  padding-bottom: 0;
  background-color: #fff;
  background-image: none;
}

.widget-flow .step .head {
  position: relative;
  border: none;
  border-left: solid 6px #0c4f0b;
  margin-left: -80px;
  margin-top: 5px;
  background-color: #ededed;
  color: #333;
  z-index: 99;
}

.widget-flow .step .body {
  padding: 10px;
}

.widget-privacy-policy {
  margin: 1em 0 0;
  border: solid 1px #ccc;
  padding: 9px;
  height: 200px;
  overflow: auto;
}

.widget-privacy-policy>*:first-child {
  margin-top: 0;
}

.widget-share-button ul {
  list-style-type: none;
  margin: 0;
}

.widget-share-button ul:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.widget-share-button li {
  float: left;
  margin: 10px;
}

.widget-share-button .line {
  display: block;
  width: 82px;
  height: 20px;
  background: url(linebutton_82x20.webp) no-repeat;
  background-size: 82px 20px;
  text-indent: -9999px;
}

.widget-movie {
  max-width: 560px;
  margin: 10px auto;
}

.widget-movie>div {
  position: relative;
  height: 0;
  padding: 56.25% 0 0;
}

.widget-movie>div iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.widget-box .inner {
  border: solid 1px #ccc;
  margin: 1em 0 0;
  padding: 19px;
  background: #ffe;
}

.widget-box .inner>*:first-child {
  margin-top: 0;
}

/* アコーディオン（js版） */
.widget-acc-head {
  display: flex;
  justify-content: center;
  align-items: start;
  cursor: pointer;
}

.widget-acc-head:after {
  content: "＋";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  color: var(--color-green3);
  font-size: 32px;
  line-height: 25px;
  text-align: center;
  vertical-align: middle;
}

.widget-acc-head.open:after {
  content: "－";
}

.widget-acc-body {
  display: none;
}

/* アコーディオン（CSS版） */
.widget-acc .acc {
  border: solid 1px #bbb;
  margin: 20px 0 0;
}

.widget-acc input {
  display: none;
}

.widget-acc label {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 18px 42px 18px 18px;
  background: #fff;
  color: #000;
  font-weight: bold;
  cursor: pointer;
}

.widget-acc label+div {
  padding: 0 18px;
  overflow: hidden;
  transition: max-height 0.5s;
  max-height: 0;
  height: 100px;
}

.widget-acc label span {
  color: #eb5e01;
  font-weight: bold;
}

.widget-acc input+label:after {
  content: "+";
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 13px;
  margin: 0;
  right: 10px;
  top: calc(50% - 12.5px);
  width: 25px;
  height: 25px;
  background: #cdab00;
  color: #fff;
  font-size: 20px;
}

.widget-acc input:checked+label:after {
  content: "-";
}

.widget-acc input:checked+label+div {
  display: block;
  height: auto;
  max-height: 300px;
}

.widget-acc .body span:first-child {
  color: #12a73b;
  font-weight: bold;
}

.widget-acc .head {
  display: flex;
  align-items: center;
  margin: 0 0 30px;
  padding: 0 20px;
  height: 56px;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: 100% 0;
  color: #fff;
  font-size: 22px;
}

.widget-acc .outer {
  padding: 0 28px;
}

.widget-acc .more a {
  display: block;
  margin: 30px auto 0;
  padding: 0;
  width: 234px;
  height: 56px;
}

.widget-column .outer {
  display: flex;
  flex-wrap: wrap;
}

.widget-column .txt {
  padding: 10px;
}

.widget-column .thumb {
  max-width: 264px;
}

.widget-column .thumb img {
  margin-bottom: 8px;
  width: 100%;
  height: auto;
  vertical-align: top;
  aspect-ratio: 640 / 426;
  object-fit: cover;
  object-position: 0 0;
}

.widget-column .noimg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  padding-top: 66.67% !important;
  background: #ccc;
  text-align: center;
}

.widget-column .noimg:before {
  content: "no image";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}

.widget-column .date {
  color: #6d6d6d;
  font-weight: bold;
}

.widget-column a {
  color: inherit;
  text-decoration: none;
}

.widget-column .title {
  font-weight: bold;
}

.widget-column .tags {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  list-style-type: none;
}

.widget-column .tags a {
  display: block;
  border-radius: 5px;
  margin: 8px 8px 0 0;
  padding: 2px 4px;
  background: #002d5b;
  color: #fff;
  font-size: 14px;
}

.widget-column a.column-keijijiken {
  background: #007396;
}

.widget-column a.column-rikon {
  background: #ffa1a1;
}

.widget-column a.column-souzoku {
  background: #ffc742;
}

.widget-column a.column-koutsuujiko {
  background: #00a3e5;
}

.widget-column a.column-roudoumondai {
  background: #bd86e2;
}

.widget-column a.column-saimuseiri {
  background: #ff4e77;
}

#page .page_under01 {
  border-top: 3px solid #005a49;
  margin: 50px 0 0;
  font-size: 16px;
}

#page .page_under01 ul {
  list-style: none;
}

#page .page_under01 ul.parent {
  font-weight: bold;
  margin: 5px;
}

#page .page_under01 ul li a {
  display: block;
  border-bottom: 1px solid #e2e2e2;
  padding: 10px 10px;
  text-decoration: none;
}

#page .page_under01 ul li a:before {
  content: " ▸";
  padding: 0 5px 0 0;
}

#page .page_under01 ul.child {
  margin: 0;
}

#page .page_under01 ul.child li a {
  padding: 5px 35px;
}

/* スライダー（splide） */
.splide__arrow {
  border-radius: 50% !important;
  width: 60px !important;
  height: 60px !important;
  background: #ff8e3f !important;
  box-shadow: 5px 5px 15px -5px #777777;
}

.splide__arrow svg {
  display: none !important;
}

.splide__arrow--prev:before {
  content: "";
  position: absolute;
  left: 20px;
  top: calc(50% - 8px);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-left: 0;
  width: 16px;
  height: 16px;
  transform: rotate(225deg);
}

.splide__arrow--prev:after {
  content: "";
  position: absolute;
  left: 22px;
  top: calc(50% - 8px);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-left: 8px;
  width: 16px;
  height: 16px;
  transform: rotate(225deg);
}

.splide__arrow--next:before {
  content: "";
  position: absolute;
  right: 20px;
  top: calc(50% - 8px);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
}

.splide__arrow--next:after {
  content: "";
  position: absolute;
  right: 30px;
  top: calc(50% - 8px);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
}

.splide__pagination {
  display: flex !important;
  bottom: 64px;
}

.splide.widget-jirei .splide__arrow {
  background: var(--color-green) !important;
}

/* タブコントロール */
.widget-tab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1em;
  text-indent: 0 !important;
  font-size: 16px;
}

.widget-tab label {
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  margin-right: 20px;
  padding: 0 20px;
  width: 350px;
  height: 64px;
  background: #fff;
  color: var(--color-green);
  font-weight: bold;
  order: -1;
  z-index: 0;
}

.widget-tab label:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.widget-tab label a {
  position: static !important;
  display: block;
  pointer-events: none;
  color: #ff8e3f;
  text-decoration: none;
}

.widget-tab input#jirei-tab+label a {
  color: var(--color-green);
}

.widget-tab .tab-content {
  display: none;
}

.widget-tab input:checked+label a {
  color: #fff !important;
  z-index: 0;
  pointer-events: auto;
}

.widget-tab input:checked+label:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: #ff8e3f;
}

.widget-tab input#jirei-tab:checked+label:after {
  background: var(--color-green) !important;
}

.widget-tab input:checked+label+.tab-content {
  display: block;
}

.widget-tab input {
  display: none;
}

.tab-content.widget-posts.widget-jirei {
  background: #ebf4df;
}

@media print,
screen and (min-width: 751px) {
  :root {
    --header-height: 112px;
    /* ヘッダー通常高さ */
    --header-height-min: 112px;
    /* ヘッダー縮小時高さ */
    --header-menu-height: 80px;
    /* ヘッダーメニュー高さ */
  }

  /* 固定メニューの高さ */
  html {
    scroll-padding-top: calc(var(--header-menu-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
    /* アンカーまでの余白 */
    scroll-behavior: smooth;
    overflow: auto;
    /* scroll-behavior:smooth のおまじない */
  }

  body {
    min-width: 1024px;
  }

  a:hover {
    opacity: 0.5;
  }

  .col2 {
    display: flex;
    justify-content: space-between;

    &>* {
      flex-shrink: 0;
      margin: 0;
    }
  }

  /* hidden */
  #header-mail,
  #sp-menu,
  #sp-site-menu,
  #navigation,
  .sp {
    display: none;
  }

  /* layout */
  .wrapper {
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
  }

  /* #header */
  #header .wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    text-indent: -9999px;

    &.lazyloaded {
      background: url(header.webp) no-repeat;
    }

    & #header-content a {
      position: absolute;
      left: 0;
      top: 0;
      width: 590px;
      height: 100px;
    }

    & #header-description {
      position: absolute;
      left: 0;
      bottom: 16px;
      width: 390px;
      height: auto;
      color: var(--color-green3);
      font-size: 14px;
      text-indent: 0;
    }

    #header-soudan {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      justify-content: center;
      margin: 0;
      width: 430px;
      flex-shrink: 0;
      list-style-type: none;

      & * {
        position: static;
      }

      & li {
        & a {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          border-radius: 32px;
          margin: 0;
          padding: 10px 0;
          box-sizing: border-box;
          width: 210px;
          height: 64px;
          background: var(--color-green);
          color: #fff;
          font-size: 16px;
          text-align: center;
          text-decoration: none;
          text-indent: 0;
          line-height: 1;

          &::after {
            content: "";
            display: block;
            width: 100%;
            height: 18px;
          }
        }

        &.lazyloaded {
          & a::after {
            background: url(h_icon-dl.webp) no-repeat 50% 50%;
          }
        }

        &.mf {
          & a {
            background: var(--color-red);
          }

          &.lazyloaded a::after {
            background: url(h_icon-mf.webp) no-repeat 50% 50%;
          }
        }

      }
    }
  }

  #header-img {
    padding-top: 37%;
    height: 0;

    &.lazyloaded {
      background: url(main_img.webp) no-repeat 50% 0/cover;
      ;
    }
  }

  #header-menu.fixed {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    height: var(--header-menu-height);
    z-index: 999;
  }

  #header-menu {
    margin: 0;
    height: var(--header-menu-height);
    background: linear-gradient(to right, color-mix(in srgb, #fabe00 100%, transparent) 50%, color-mix(in srgb, #e94f0c 100%, transparent) 51%);

    & ul {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      padding: 0;
      list-style-type: none;

      & li {
        position: relative;
        margin: 0 -12px;
        clip-path: polygon(calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0% 100%, 22px 50%, 0% 0%);

        &::before {
          content: "";
          position: absolute;
          inset: 0 1px 0 0;
          background: #fff;
        }

        & a {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          margin-right: 3px;
          padding: 16px 32px;
          height: var(--header-menu-height);
          box-sizing: border-box;
          background: #333;
          color: #fff;
          clip-path: polygon(calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0% 100%, 22px 50%, 0% 0%);
          text-decoration: none;

          &::before {
            content: "";
            display: block;
            width: 100%;
            height: 30px;
          }
        }

        &.hm1 {
          clip-path: polygon(0 0, calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0 100%);

          & a {
            margin-left: -1px;
            background: #fabe00;
            clip-path: polygon(0 0, calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0 100%);
          }

          &.lazyloaded a::before {
            background: url(hm_icon01.webp) no-repeat 50% 50%;
          }
        }

        &.hm2 {
          & a {
            background: #f6a90e;
          }

          &.lazyloaded a::before {
            background: url(hm_icon02.webp) no-repeat 50% 50%;
          }
        }

        &.hm3 {
          & a {
            background: #f3980f;
          }

          &.lazyloaded a::before {
            background: url(hm_icon03.webp) no-repeat 50% 50%;
          }
        }

        &.hm4 {
          & a {
            background: #ef7a00;
          }

          &.lazyloaded a::before {
            background: url(hm_icon04.webp) no-repeat 50% 50%;
          }
        }

        &.hm5 {
          & a {
            background: #eb5c02;
          }

          &.lazyloaded a::before {
            background: url(hm_icon05.webp) no-repeat 50% 50%;
          }
        }

        &.hm6 {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%);

          & a {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%);
            margin-right: -1px;
            background: #e94f0c;
          }

          &.lazyloaded a::before {
            background: url(hm_icon06.webp) no-repeat 50% 50%;
          }
        }
      }
    }
  }

  /***************
   footer
   **************/
  #footer-menu {
    margin-top: 16px;
    background: var(--color-green2);

    & ul {
      list-style-type: none;
      margin: 0;
      padding: 10px 0;
      display: flex;
      justify-content: center;

      & li {
        position: relative;

        &::before {
          content: "";
          position: absolute;
          margin-top: -8px;
          left: 0;
          top: 50%;
          width: 1px;
          height: 16px;
          background: #fff;
        }

        &:first-child::before {
          content: none;
        }

        & a {
          color: #fff;
          text-decoration: none;
          padding: 0 16px;
        }
      }
    }
  }

  #copyright {
    font-size: 12px;
    padding: 10px;
    text-align: center;
  }

  /* content */
  /* .blogcard */
  .blogcard {
    line-height: 1;
    background-color: #fff;
    border: 1px solid #eee;
    word-wrap: break-word;
    margin: 40px;
    box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.025);
  }

  .blogcard.ex {
    background-color: #f7f7f7;
  }

  .blogcard a {
    display: flex;
    text-decoration: none;
    opacity: 1;
    transition: all 0.2s ease;
  }

  .blogcard a:hover {
    opacity: 0.6;
  }

  .blogcard_thumbnail {
    float: left;
    padding: 20px;
  }

  .blogcard_title {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4;
    padding: 17px 20px 10px;
  }

  .blogcard_excerpt {
    font-size: 0.85em;
    line-height: 1.6;
    padding: 0 17px 15px 20px;
  }

  .blogcard_link {
    font-size: 0.65em;
    padding: 0 17px 15px 20px;
    text-align: left;
  }

  .blogcard_link .favicon {
    margin-bottom: -4px;
  }

  .blogcard_link .icon-external-link-alt::before {
    font-size: 0.75em;
  }

  /* ウィンドウ幅一杯に広げる
    --window-width はJSによってclientWidthを取得
    */
  header {
    margin: 0 calc(50% - calc(var(--window-width) / 2));
  }

  header.lazyloaded:has(h1) {
    background: url(h1_bg.webp) no-repeat 50% 0 / cover;
  }

  header h1 {
    margin: 0;
    min-height: 200px;
    background-image: none !important;
  }

  section {
    margin: -88px calc(50% - calc(var(--window-width) / 2)) 0;
    padding: 120px 0 80px;
    width: var(--window-width);
    background: var(--color-beige);
    clip-path: polygon(100% 0, 100% calc(100% - 80px), 50% 100%, 0 calc(100% - 80px), 0 0, 50% 80px);
  }

  section h2 {
    display: table;
    border: none;
    margin: 0 auto 10px;
    width: auto;
    background: unset;
    color: #000;
    font-size: 32px;
    text-align: center;

    &::after {
      content: attr(data-label);
      display: block;
      border-style: solid;
      border-width: 1px 0 0;
      border-color: #000;
      width: 100%;
      height: auto;
      color: #000;
      font-size: 20px;
      font-family: serif;
    }
  }

  /* お悩み */
  section#onayami {
    padding-top: 48px;
    background: var(--color-beige);

    clip-path: polygon(100% 0, 100% calc(100% - 80px), 50% 100%, 0 calc(100% - 80px), 0 0, 50% 0);

    & .wrapper {
      display: grid;
      grid-template-columns: auto 306px;
      grid-template-areas:
        "head img"
        "body img";
    }

    & h2 {
      grid-area: head;
      display: block;
      border: none;
      margin: 0;
      padding: 0;
      width: auto;
      background: unset;
      color: var(--color-green3);
      font-size: 32px;
      text-align: left;

      &::after {
        content: none;
      }
    }

    & .img2 {
      grid-area: img;
    }

    & .body {
      grid-area: body;
      margin: 0;
      list-style-type: none;
    }
  }

  /* 人事評価制度 */
  section#solution {
    background: #eb5c02;
    color: #fff;

    & h2 {
      color: #fff;

      &::after {
        border-color: #fff;
        color: #fff;
      }
    }

    & .banner {
      text-align: center;
    }
  }

  .widget-solution {
    & ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin: 1em auto;
      padding: 0;
      list-style-type: none;

      & li {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 8px;
        padding: 20px;
        box-sizing: border-box;
        width: 300px;
        height: 176px;
        color: #000;
        font-size: 22px;
        font-weight: bold;
        text-align: center;

        &.lazyloaded {
          background: url(top_solution_b.webp) no-repeat;
        }
      }
    }
  }

  /* コンサルティング */
  section#support {
    background: #fff;

    & .support {
      & .inner {
        display: flex;
        margin: 48px 0;

        & .txt {
          margin-right: 48px;

          & h3 {
            border: none;
            margin: 0;
            padding: 0 0 0 112px;
            color: #000;
            font-size: 26px;
            /* text-decoration: underline solid var(--color-yellow) 10px; */
            text-decoration-line: underline;
            text-decoration-thickness: 10px;
            text-decoration-style: solid;
            text-decoration-color: var(--color-yellow);
            text-underline-offset: 0;
            -webkit-text-decoration-skip: none;
            line-height: 1.5;

            & b {
              color: var(--color-red);
              font-size: 150%;
            }
          }
        }
      }

      &:nth-child(2n+1) .inner {
        flex-direction: row-reverse;

        & .txt {
          margin-right: 0;
          margin-left: 48px;
        }
      }

      &.s1 h3.lazyloaded {
        background: url(top_str01.webp) no-repeat;
      }

      &.s2 h3.lazyloaded {
        background: url(top_str02.webp) no-repeat;
      }

      &.s3 h3.lazyloaded {
        background: url(top_str03.webp) no-repeat;
      }
    }
  }

  /* ご相談ください */
  section#soudan {
    background: var(--color-green4);
    color: #fff;
  }

  .bubble {
    position: relative;
    display: grid;
    grid-template-columns: 58px auto 58px;
    justify-content: center;
    align-items: end;
    border: none;
    margin: 0 auto;
    padding: 0;
    color: inherit;
    text-align: center;

    &::before,
    &::after {
      content: "";
      display: block;
      border: none;
      margin: 0;
      padding: 0;
      width: 38px;
      height: 70px;
    }

    &.lazyloaded::before {
      margin-right: 20px;
      background: url(nayami-komarigoto02.webp) no-repeat;
    }

    &.lazyloaded::after {
      margin-left: 20px;
      background: url(nayami-komarigoto02.webp) no-repeat;
      transform: scaleX(-1);
    }

    &.lazyloaded b {
      display: inline-block;
      padding-top: 18px;
      background: url(nayami-komarigoto01.webp) no-repeat 50% 0;
      color: var(--color-yellow);
    }
  }

  .widget-soudan {
    & ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      justify-content: center;
      align-items: center;
      margin: 1em auto;
      padding: 0;
      list-style-type: none;

      & li {
        position: relative;
        padding-top: 19.69%;

        & a {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50px;
          border: solid 4px #fff;
          margin: 0;
          padding: 20px;
          box-sizing: border-box;
          background: var(--color-green);
          color: #fff;
          font-size: 22px;
          font-weight: bold;
          text-align: center;
          text-decoration: none;
          ;

          &::before {
            content: "";
            display: block;
            margin-right: 8px;
            width: 32px;
            height: 24px;
          }
        }

        &.lazyloaded a::before {
          background: url(top_icon-dl.webp) no-repeat;
        }

        &.mf a {
          background: var(--color-red);
        }

        &.mf.lazyloaded a::before {
          background: url(top_icon-mf.webp) no-repeat;
        }
      }
    }
  }

  /* 主な実績 */
  section#jisseki {
    background: #fff;

    & h2 {
      &::after {
        content: none;
      }
    }

    & .wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;

      & h3 {
        border: none;
        margin: 0;
        padding: 0;
        background: unset;
        color: var(--color-green3);
        font-size: 24px;
      }
    }

    & .j2 {
      & h3 {
        color: var(--color-brown);
      }
    }
  }

  p.career-path {
    display: flex;
    justify-content: center;

    &::before {
      content: "";
      display: block;
      margin-right: 8px;
      width: 24px;
      height: 30px;
    }

    &.lazyloaded::before {
      background: url(cp_icon.webp) no-repeat;
    }
  }


  /* お客様の声 */
  section#voice {
    background: var(--color-gray2);

    & .wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;

      & .voice {
        & .inner {
          border: solid 1px var(--color-beige2);
          padding: 10px;
          background: #fff;

          & .img2 {
            margin: -10px -10px 0;
          }

          & h3 {
            border: none;
            margin: 0;
            padding: 0;
            background: unset;
            color: var(--color-green3);
            font-size: 24px;
          }

          & .meta {
            font-size: 22px;
          }
        }
      }
    }
  }

  section#flow {
    background: #fff;

    & .wrapper {}

    & .step {
      display: grid;
      gap: 0 40px;
      grid-template-columns: 96px 148px auto;
      grid-template-rows: 48px 48px 11px auto auto;
      grid-template-areas:
        "step illust head"
        "number illust head"
        "number illust head"
        "number illust head"
        "number body body";
      margin: 0;
      padding: 0 0 40px;
      background: linear-gradient(to bottom, #ccc 0, #ccc 8px, transparent 9px, transparent 16px) repeat-y 48px 0 / 2px 16px;
      counter-increment: number;

      &:last-child {
        background-image: none;
      }

      &::before {
        grid-area: step;
        content: "STEP";
        display: flex;
        justify-content: center;
        align-items: end;
        width: 96px;
        height: 48px;
        background: var(--color-green3);
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.2;
      }

      &::after {
        grid-area: number;
        content: counter(number);
        display: flex;
        justify-content: center;
        align-items: top;
        width: 96px;
        height: 48px;
        background: var(--color-green3);
        color: #fff;
        font-size: 26px;
        font-weight: bold;
        line-height: 1.2;
      }

      & .illust {
        grid-area: illust;
      }

      & div.head {
        grid-area: head;

        &>*:first-child {
          border-style: solid;
          border-width: 0 0 1px;
          border-color: var(--color-green3);
          margin: 0 0 10px;
          padding: 0;
          background: unset;
          color: var(--color-green3);
          font-size: 26px;
        }
      }

      & .body {
        grid-area: body;
        position: relative;
        border-radius: 12px;
        margin: 0;
        padding: 16px;
        background: var(--color-blue);

        &::before {
          content: "";
          position: absolute;
          left: 16px;
          top: 16px;
          width: 62px;
          height: 88px;
          z-index: 99;
        }

        &.lazyloaded::before {
          background: url(flow_icon01.webp) no-repeat;
        }

        & h4 {
          border: none;
          margin: 0 0 16px 80px;
          padding: 0;
          background: unset;
          color: var(--color-blue2);
          font-size: 22px;

          & span {
            color: #000;
          }
        }

        &.body2 {
          background: var(--color-beige4);

          & h4 {
            margin-left: 0;
            color: #393a34;
          }
        }
      }
    }
  }

  /* デジタル化 */
  section#digital {
    background: var(--color-yellow2);

    & h2::after {
      border: none;
    }

    & .banner {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }

    & .wrapper {
      display: grid;
      grid-template-columns: 320px auto;
      grid-template-areas:
        "img-1 content-1"
        "img-1 content-2"
        "img-1 content-3";
      margin: 1em auto 0;

      & .img-1 {
        grid-area: img-1;
        z-index: 99;
      }

      & div[class*="content"] {
        & h3 {
          border: none;
          margin: 0;
          padding: 0;
          background: unset;
          color: #000;
          font-size: 20px;
        }

        & p {
          margin: 0 0 1em;
        }

        &.content-3 {
          grid-area: content-3;
          margin-left: -320px;
          padding: 16px 16px 16px 320px;
          border-radius: 12px;
          background: #fff;

          & h3 {
            color: var(--color-orange);
          }
        }
      }
    }
  }

  /* メッセージ */
  section#message {
    background: #fff;

    & .wrapper {
      display: grid;
      grid-template-columns: 400px auto;
      grid-template-rows: 2em auto 300px;
      grid-template-areas:
        "head head"
        "photo body"
        "photo author";

      & h2 {
        grid-area: head;
        border: none;
        margin: 0;
        padding: 0;
        background: unset;
        color: var(--color-green3);
        font-size: 28px;

        &::after {
          content: none;
        }
      }

      & .body {
        grid-area: body;
        font-size: 18px;
      }

      & .img2 {
        grid-area: photo;
      }

      & .author {
        grid-area: author;
        display: flex;
        justify-content: end;
        align-items: center;
        text-align: right;
      }
    }
  }

  /* よくある質問 */
  section#faq {
    background: var(--color-gray2);

    & .widget-faq .inner {
      background: #fff;
    }
  }

  .widget-faq {
    & .inner {
      border: solid 1px var(--color-green4);

      & .widget-acc-head {
        display: flex;
        justify-content: space-between;
        align-items: start;
        border: none;
        margin: 0 !important;
        padding: 10px 10px 10px 52px;
        color: #000;
        font-size: 20px;

        &.lazyloaded {
          background: url(q.webp) no-repeat 10px 8px;
        }
      }

      & .widget-acc-body {
        display: none;
        justify-content: space-between;
        align-items: center;
        border: none;
        margin: 0 !important;
        padding: 10px 10px 10px 52px;

        &.lazyloaded {
          background: url(a.webp) no-repeat 10px 8px;
        }
      }

      & .widget-acc-head.open+.widget-acc-body {
        display: flex;
      }
    }
  }

  /* お問い合わせ */
  section#contact {
    background: #fff;
    clip-path: polygon(50% 80px, 100% 0, 100% 100%, 0 100%, 0% 0%);

    & .wrapper {
      border: solid 1px var(--color-orange);
      border-radius: 16px;
      padding: 30px;
      box-sizing: border-box;
      background: var(--color-orange2);

      & h2 {
        display: block;
        border-radius: 16px 16px 0 0;
        margin: -30px -30px 30px;
        padding: 10px 0;
        background: var(--color-orange);
        color: #fff;

        &::after {
          content: none;
        }

      }

      & .table {
        border: none;
        border-collapse: collapse;
        border-spacing: 0;

        & th {
          border-style: solid;
          border-width: 0 0 1px;
          border-color: #fff;
          padding: 24px 16px;
          width: 270px;
          background: unset;
          font-weight: bold;
          text-align: left;
          vertical-align: top;

          & label {
            display: flex;
            align-items: start;

            & span {
              flex-shrink: 0;
              display: block;
              border-radius: 16px;
              margin-left: 1em;
              padding: 1px 16px;
              background: #01b3cd;
              color: #fff;
              font-size: 12px;
              text-align: center;

              &.require {
                background: #df1014;
              }
            }
          }
        }

        & td {
          border-style: solid;
          border-width: 0 0 1px;
          border-color: #fff;
          padding: 16px;
          background: unset;
          font-weight: bold;
          text-align: left;
          vertical-align: top;

          & textarea {
            width: 100%;
            min-height: 120px;
          }
        }
      }

      & input[type="text"],
      & input[type="email"],
      & input[type="tel"] {
        padding: 8px;
      }

      & input[type="submit"] {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 32px;
        margin: 0 auto;
        width: 240px;
        height: 64px;
        background: #04a569;
        color: #fff;
        font-size: 20px;
      }

      & .submit {
        text-align: center;
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  #header-img {
    height: 307px;
  }

  #gotop {
    width: 100%;
  }

  #gotop .wrapper {
    width: 100%;
  }

  #gotop a {
    margin-right: 0;
  }

  section,
  section h2 {
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
    width: 100%;
  }
}

@media screen and (max-width: 750px) {
  :root {
    --header-menu-height: calc(100vw / 6);
    /* ヘッダーメニュー高さ */
  }

  /* 固定メニューの高さ */
  html {
    scroll-padding-top: calc(var(--header-menu-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
    /* アンカーまでの余白 */
    scroll-behavior: smooth;
    overflow: auto;
    /* scroll-behavior:smooth のおまじない */
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .alignright,
  .alignleft {
    display: block;
    float: none;
    margin: 10px auto;
    padding: 0;
  }

  .img {
    background-size: contain !important;
  }

  .admin-bar .mm-opened+.mm-page {
    padding-top: 46px;
  }

  .admin-bar #wpadminbar {
    position: fixed;
  }

  /* hidden */
  #header-soudan,
  #breadcrumbs,
  #footer-menu,
  .pc {
    display: none;
  }

  /* layout */
  #header {
    & .wrapper {
      #header-content {
        position: relative;
        height: 19.2vw;
        text-indent: -9999px;

        & a {
          position: absolute;
          left: 0;
          top: 0;
          width: 60%;
          height: 100%;
        }
      }

      &.lazyloaded {
        background: url(sp_header.webp) no-repeat 0 0 / contain;
      }

      & #header-description {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 4px;
        color: var(--color-green3);
        font-size: 12px;
        text-indent: 0;
      }
    }
  }

  #header-img {
    height: 100vw;

    &.lazyloaded {
      background: url(sp_main_img.webp) no-repeat;
    }
  }

  /* ハンバーガーメニュー */
  #sp-menu a {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 12vw;
    height: 13vw;
    background-color: #fff;
    z-index: 9999;
    text-indent: -9999px;
    text-decoration: none;
  }

  #sp-menu a:after {
    content: "ﾒﾆｭｰ";
    display: block;
    padding-top: 7vw;
    width: 12vw;
    color: var(--color-green3);
    font-size: 3vw;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
  }

  #sp-menu span,
  #sp-menu span:before,
  #sp-menu span:after {
    content: "";
    position: absolute;
    display: block;
    width: 8vw;
    height: 3px;
    border-radius: 3px;
    background-color: var(--color-green3);
  }

  #sp-menu span {
    top: 5vw;
  }

  #sp-menu span:before {
    bottom: 8px;
  }

  #sp-menu span:after {
    top: 8px;
  }

  .admin-bar #sp-menu a {
    top: 56px;
  }

  #navigation {
    display: block;
  }

  /* スライドダウンバー */
  #header-menu.fixed {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    height: var(--header-menu-height);
    z-index: 9999;

    & ul {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 1fr;
      margin: 0;
      list-style-type: none;
    }

    & a {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 1vw;
      height: var(--header-menu-height);
      box-sizing: border-box;
      background: #fabe00;
      color: #fff;
      font-size: 2.4vw;
      line-height: 1.3;
      text-decoration: none;
      text-align: center;

      &::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 2/1;
        background: #fabe00 url(sp_hm_icon01.webp) no-repeat 50% 50% / auto 20px;
      }
    }

    & .hm1 {
      & a {
        background: #fabe00;
      }

      &.lazyloaded a::before {
        background: url(sp_hm_icon01.webp) no-repeat 50% 50% / auto 20px;
      }
    }

    & .hm2 {
      & a {
        background: #f6a90e;
      }

      &.lazyloaded a::before {
        background: url(sp_hm_icon02.webp) no-repeat 50% 50% / auto 20px;
      }
    }

    & .hm3 {
      & a {
        background: #f3980f;
      }

      &.lazyloaded a::before {
        background: url(sp_hm_icon03.webp) no-repeat 50% 50% / auto 20px;
      }
    }

    & .hm4 {
      & a {
        background: #ef7a00;
      }

      &.lazyloaded a::before {
        background: url(sp_hm_icon04.webp) no-repeat 50% 50% / auto 20px;
      }
    }

    & .hm5 {
      & a {
        background: #eb5c02;
      }

      &.lazyloaded a::before {
        background: url(sp_hm_icon05.webp) no-repeat 50% 50% / auto 20px;
      }
    }

    & .hm6 {
      & a {
        background: #e94f0c;
      }

      &.lazyloaded a::before {
        background: url(sp_hm_icon06.webp) no-repeat 50% 50% / auto 20px;
      }
    }
  }

  /* footer */
  #copyright {
    padding: 10px;
    background: var(--color-green2);
    color: #fff;
    font-size: 11px;
    text-align: center;
  }

  #sp-footer-soudan {
    & img {
      vertical-align: top;
    }

    & ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin: 0;
      padding: 0 10px 10px;
      background: var(--color-green2);
      list-style-type: none;
    }

    & a {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      margin: 0;
      padding: 10px;
      background-color: var(--color-green);
      color: #fff;
      line-height: 1.3;
      text-decoration: none;
      text-align: center;

    }

    & .dl {
      &.lazyloaded a {
        background: var(--color-green);

        &::before {
          flex-shrink: 0;
          content: "";
          display: block;
          margin-right: 8px;
          width: 32px;
          height: 24px;
          background: url(sp_f_dl_icon.webp) no-repeat 50% 50% / 30px 22px;
        }
      }
    }

    & .mf {
      &.lazyloaded a {
        background: var(--color-red);

        &::before {
          flex-shrink: 0;
          content: "";
          display: block;
          margin-right: 8px;
          width: 32px;
          height: 24px;
          background: url(sp_f_mf_icon.webp) no-repeat 50% 50% / 30px 22px;
        }
      }
    }
  }

  #site-menu {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    z-index: 9999;
  }

  #gotop {
    position: absolute;
    top: -40px;
    right: 0;
  }

  #gotop a {
    margin: 0;
  }

  /* content */
  article {
    padding-right: 10px;
    padding-left: 10px;
  }

  article h1 {
    margin-right: -10px;
    margin-left: -10px;
    font-size: 144%;
  }

  article h2 {
    margin-right: -10px;
    margin-left: -10px;
    font-size: 128%;
  }

  article h3 {
    margin-right: -10px;
    margin-left: -10px;
    font-size: 114%;
  }

  article h4 {
    margin-right: -10px;
    margin-left: -10px;
    font-size: 100%;
  }

  article section {
    margin-right: -10px;
    margin-left: -10px;
  }

  .gmap {
    position: relative;
    margin: 20px auto;
    max-width: 100%;
    height: 100vw;
  }

  .gmap iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
  }

  .gmap small {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100% !important;
    height: 2em;
  }

  .wpcf7 .table th,
  .wpcf7 .table td {
    display: block;
    padding: 0;
    border: none;
  }

  .wpcf7 .table th {
    margin-top: 1em;
  }

  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 textarea {
    box-sizing: border-box;
    width: 100%;
  }

  table.scroll {
    width: 1024px;
  }

  table:not(.scroll) {
    display: block;
  }

  table.sp-transform caption,
  table.sp-transform tbody,
  table.sp-transform tr,
  table.sp-transform th,
  table.sp-transform td {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }

  .iframe-wrapper {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* .blogcard */
  .blogcard {
    margin: 40px 0;
  }

  .blogcard_thumbnail img {
    width: 90px;
  }

  .blogcard_title {
    font-size: 0.95em;
    padding-bottom: 17px;
  }

  .blogcard_excerpt {
    display: none;
  }

  .check-list {
    margin: 1em 0;

    & li {
      padding: 5px 0 5px 30px;
      font-size: 18px;
      font-weight: bold;

      &::before {
        top: 12px;
        left: 4px;
        width: 24px;
        height: 21px;
        background: url(check_icon01.webp) no-repeat 0 0 / 18px auto;
      }
    }
  }

  /*
  HOME
  */
  section {
    margin: -40px auto 0;
    padding: 60px 0 40px;
    width: auto;
    background: var(--color-beige);
    clip-path: polygon(100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px), 0 0, 50% 40px);
  }

  section h2 {
    display: table;
    border: none;
    margin: 0 auto 10px;
    width: auto;
    background: unset;
    color: #000;
    font-size: 22px;
    text-align: center;

    &::after {
      content: attr(data-label);
      display: block;
      border-style: solid;
      border-width: 1px 0 0;
      border-color: #000;
      width: 100%;
      height: auto;
      color: #000;
      font-size: 20px;
      font-family: serif;
    }
  }

  /* お悩み */
  section#onayami {
    padding-top: 20px;
    background: var(--color-beige);
    clip-path: polygon(100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px), 0 0, 50% 0);

    & .wrapper {
      & h2 {
        grid-area: head;
        display: block;
        border: none;
        margin: 0;
        padding: 0 10px;
        width: auto;
        background: unset;
        color: var(--color-green3);
        text-align: left;

        &::after {
          content: none;
        }
      }

      & .img2 {
        float: right;
        margin-left: 10px;
        width: 25%;
        grid-area: img;
      }

      & .body {
        grid-area: body;
        margin: 0;
        padding: 0 10px;
        list-style-type: none;
      }
    }
  }

  /* 人事評価制度 */
  section#solution {
    background: #eb5c02;
    color: #fff;

    & h2 {
      color: #fff;

      &::after {
        border-color: #fff;
        color: #fff;
      }
    }

    & .banner {
      padding: 0 10px;
      text-align: center;
    }
  }

  .widget-solution {
    & ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin: 1em auto;
      padding: 0 5px;
      list-style-type: none;

      & li {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px;
        padding: 0 10px;
        box-sizing: border-box;
        width: calc(50% - 10px);
        aspect-ratio: 300/176;
        color: #000;
        font-size: 4vw;
        font-weight: bold;
        text-align: center;
        line-height: 1.2;

        &.lazyloaded {
          background: url(top_solution_b.webp) no-repeat 0 0/contain;
        }
      }
    }
  }

  /* コンサルティング */
  section#support {
    background: #fff;

    & .support {
      & .inner {
        margin: 20px 0;
        padding: 0 10px;

        & .txt {

          & h3 {
            border: none;
            margin: 0;
            padding: 0 0 0 66px;
            color: #000;
            font-size: 22px;
            /* text-decoration: underline solid var(--color-yellow) 10px; */
            text-decoration-line: underline;
            text-decoration-thickness: 10px;
            text-decoration-style: solid;
            text-decoration-color: var(--color-yellow);
            text-underline-offset: 0;
            -webkit-text-decoration-skip: none;
            line-height: 1.5;

            & b {
              color: var(--color-red);
              font-size: 150%;
            }
          }
        }

        & .img2 {
          margin: 10px auto;
          max-width: 480px;
          width: 60%;
        }
      }

      &:nth-child(2n+1) .inner {
        flex-direction: row-reverse;

        & .txt {}
      }

      &.s1 h3.lazyloaded {
        background: url(top_str01.webp) no-repeat 0 0/56px auto;
      }

      &.s2 h3.lazyloaded {
        background: url(top_str02.webp) no-repeat 0 0/56px auto;
      }

      &.s3 h3.lazyloaded {
        background: url(top_str03.webp) no-repeat 0 0/56px auto;
      }
    }
  }

  /* ご相談ください */
  section#soudan {
    background: var(--color-green4);
    color: #fff;
  }

  .bubble {
    position: relative;
    display: grid;
    grid-template-columns: 36px auto 36px;
    justify-content: center;
    align-items: end;
    border: none;
    margin: 0 auto 1em;
    padding: 0;
    color: inherit;
    font-size: 20px;
    text-align: center;
    line-height: 1.3;

    &::before,
    &::after {
      content: "";
      display: block;
      border: none;
      margin: 0;
      padding: 0;
      width: 26px;
      height: 47px;
    }

    &.lazyloaded::before {
      margin-right: 10px;
      background: url(sp_nayami-komarigoto02.webp) no-repeat 0 0/contain;
    }

    &.lazyloaded::after {
      margin-left: 10px;
      background: url(sp_nayami-komarigoto02.webp) no-repeat 0 0/contain;
      transform: scaleX(-1);
    }

    &.lazyloaded b {
      flex-shrink: 0;
      display: inline-block;
      padding-top: 18px;
      background: url(nayami-komarigoto01.webp) no-repeat 50% 0;
      color: var(--color-yellow);
    }
  }

  .widget-soudan {
    & ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      justify-content: center;
      align-items: center;
      margin: 1em auto;
      padding: 0 10px;
      list-style-type: none;

      & li {
        position: relative;
        padding-top: 39.38%;

        & a {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 100px;
          border: solid 4px #fff;
          margin: 0;
          padding: 20px 10px;
          box-sizing: border-box;
          background: var(--color-green);
          color: #fff;
          font-size: 3.75vw;
          font-weight: bold;
          text-align: center;
          text-decoration: none;
          line-height: 1.2;

          &::before {
            flex-shrink: 0;
            content: "";
            display: block;
            margin-right: 8px;
            width: 24px;
            height: 18px;
          }
        }

        &.lazyloaded a::before {
          background: url(sp_top_icon-dl.webp) no-repeat 0 0/contain;
        }

        &.mf a {
          background: var(--color-red);
        }

        &.mf.lazyloaded a::before {
          background: url(sp_top_icon-mf.webp) no-repeat 0 0/contain;
        }
      }
    }
  }

  /* 主な実績 */
  section#jisseki {
    background: #fff;
    padding-bottom: 60px;

    & h2 {
      &::after {
        content: none;
      }
    }

    & .wrapper {
      padding: 0 10px;

      & h3 {
        border: none;
        margin: 10px 0;
        padding: 0;
        background: unset;
        color: var(--color-green3);
        font-size: 20px;
        text-align: center;
      }
    }

    & .j2 {
      & h3 {
        color: var(--color-brown);
      }
    }
  }

  p.career-path {
    display: flex;
    justify-content: center;

    &::before {
      content: "";
      display: block;
      margin-right: 8px;
      width: 24px;
      height: 30px;
    }

    &.lazyloaded::before {
      background: url(cp_icon.webp) no-repeat;
    }
  }


  /* お客様の声 */
  section#voice {
    background: var(--color-gray2);

    & .wrapper {
      padding: 0 10px;

      & .voice {
        & .inner {
          border: solid 1px var(--color-beige2);
          margin: 10px 0;
          padding: 10px;
          background: #fff;

          & .img2 {
            margin: -10px -10px 0;
          }

          & h3 {
            border: none;
            margin: 0;
            padding: 0;
            background: unset;
            color: var(--color-green3);
            font-size: 20px;
          }

          & .meta {
            font-size: 18px;
          }
        }
      }
    }
  }

  section#flow {
    background: #fff;

    & .step {
      display: grid;
      gap: 0 10px;
      grid-template-columns: 74px auto;
      grid-template-rows: 24px 24px auto auto;
      grid-template-areas:
        "step step"
        "number number"
        "illust head"
        "body body";
      margin: 10px 0 20px;
      padding: 0 10px;
      counter-increment: number;

      &:last-child {
        background-image: none;
      }

      &::before {
        grid-area: step;
        content: "STEP";
        display: flex;
        justify-content: center;
        align-items: end;
        margin: 0 auto;
        width: 48px;
        height: 24px;
        background: var(--color-green3);
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.2;
      }

      &::after {
        grid-area: number;
        content: counter(number);
        display: flex;
        justify-content: center;
        align-items: top;
        margin: 0 auto;
        width: 48px;
        height: 24px;
        background: var(--color-green3);
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.2;
      }

      & .illust {
        grid-area: illust;
        margin-top: 10px;
      }

      & div.head {
        grid-area: head;
        margin-top: 10px;

        &>*:first-child {
          border-style: solid;
          border-width: 0 0 1px;
          border-color: var(--color-green3);
          margin: 0 0 10px;
          padding: 0;
          background: unset;
          color: var(--color-green3);
          font-size: 20px;
        }
      }

      & .body {
        grid-area: body;
        position: relative;
        border-radius: 12px;
        margin: 10px 0 0;
        padding: 10px;
        background: var(--color-blue);

        &::before {
          content: "";
          position: absolute;
          left: 10px;
          top: 10px;
          width: 31px;
          height: 44px;
          z-index: 99;
        }

        &.lazyloaded::before {
          background: url(flow_icon01.webp) no-repeat 0 0/31px 44px;
        }

        & h4 {
          border: none;
          margin: 0 0 10px 40px;
          padding: 0;
          background: unset;
          color: var(--color-blue2);
          font-size: 18px;

          & span {
            color: #000;
          }
        }

        & .col2 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;

          &>* {
            margin: 0;
          }
        }

        &.body2 {
          background: var(--color-beige4);

          & h4 {
            margin-left: 0;
            color: #393a34;
          }
        }
      }
    }
  }

  /* デジタル化 */
  section#digital {
    background: var(--color-yellow2);
    padding-bottom: 60px;

    & h2::after {
      border: none;
    }

    & .banner {
      font-weight: bold;
      text-align: center;
    }

    & .wrapper {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-areas:
        "img-1 content-1"
        "img-1 content-2"
        "content-3 content-3";
      margin: 1em auto 0;
      padding: 0 10px;

      & .img-1 {
        grid-area: img-1;
        z-index: 99;
      }

      & div[class*="content"] {
        & h3 {
          border: none;
          margin: 0;
          padding: 0;
          background: unset;
          color: #000;
        }

        & p {
          margin: 0 0 1em;
        }

        &.content-3 {
          grid-area: content-3;
          padding: 10px;
          border-radius: 12px;
          background: #fff;

          & h3 {
            color: var(--color-orange);
          }
        }
      }
    }
  }

  /* メッセージ */
  section#message {
    background: #fff;

    & .wrapper {
      display: grid;
      grid-template-columns: 40% auto;
      gap: 10px;
      grid-template-rows: repeat(3, auto);
      grid-template-areas:
        "head head"
        "body body"
        "photo author";
      padding: 0 10px;

      & h2 {
        grid-area: head;
        border: none;
        margin: 0;
        padding: 0;
        background: unset;
        color: var(--color-green3);
        font-size: 22px;
        text-align: left;

        &::after {
          content: none;
        }
      }

      & .body {
        grid-area: body;
      }

      & .img2 {
        grid-area: photo;
      }

      & .author {
        grid-area: author;
        display: flex;
        justify-content: end;
        align-items: center;
        text-align: right;
      }
    }
  }

  /* よくある質問 */
  section#faq {
    background: var(--color-gray2);
    padding-bottom: 60px;

    & .wrapper {
      padding: 0 10px;
    }

    & .widget-faq .inner {
      background: #fff;
    }
  }

  .widget-faq {
    & .inner {
      border: solid 1px var(--color-green4);

      & .widget-acc-head {
        display: flex;
        justify-content: space-between;
        align-items: start;
        border: none;
        margin: 0 !important;
        padding: 10px 10px 10px 52px;
        color: #000;
        font-size: 18px;

        &.lazyloaded {
          background: url(q.webp) no-repeat 10px 8px;
        }
      }

      & .widget-acc-body {
        display: none;
        justify-content: space-between;
        align-items: center;
        border: none;
        margin: 0 !important;
        padding: 10px 10px 10px 52px;

        &.lazyloaded {
          background: url(a.webp) no-repeat 10px 8px;
        }
      }

      & .widget-acc-head.open+.widget-acc-body {
        display: flex;
      }
    }
  }

  /* お問い合わせ */
  section#contact {
    padding-right: 10px;
    padding-left: 10px;
    background: #fff;
    clip-path: polygon(50% 60px, 100% 0, 100% 100%, 0 100%, 0% 0%);

    & .wrapper {
      border: solid 1px var(--color-orange);
      border-radius: 16px;
      padding: 10px;
      background: var(--color-orange2);

      & h2 {
        display: block;
        border-radius: 16px 16px 0 0;
        margin: -10px -10px 10px;
        padding: 10px 0;
        background: var(--color-orange);
        color: #fff;

        &::after {
          content: none;
        }

      }

      & .table {
        border: none;
        border-collapse: collapse;
        border-spacing: 0;

        & th {
          border: none;
          padding: 10px 10px 0 10px;
          background: unset;
          font-weight: bold;
          text-align: left;
          vertical-align: top;

          & label {
            display: flex;
            align-items: start;

            & span {
              flex-shrink: 0;
              display: block;
              border-radius: 16px;
              margin-left: 1em;
              padding: 1px 16px;
              background: #01b3cd;
              color: #fff;
              font-size: 12px;
              text-align: center;

              &.require {
                background: #df1014;
              }
            }
          }
        }

        & td {
          border-style: solid;
          border-width: 0 0 1px;
          border-color: #fff;
          padding: 0 10px 10px;
          background: unset;
          font-weight: bold;
          text-align: left;
          vertical-align: top;

          & textarea {
            width: 100%;
            min-height: 120px;
          }
        }
      }

      & input[type="text"],
      & input[type="email"],
      & input[type="tel"] {
        box-sizing: border-box;
        padding: 8px;
        max-width: 100%;
      }

      & input[type="submit"] {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 32px;
        margin: 0 auto;
        width: 240px;
        height: 64px;
        background: #04a569;
        color: #fff;
        font-size: 20px;
      }
    }
  }
}
/* ヘッダーテキストバナー */
#header-banner {
  padding: 4px 0;
  background: #e94f0c;
  color: #fff;
  font-size: 16px;
  text-align: center;

  & .wrapper {
    text-align: center;

    & a {
      position: relative;
      margin-left: 8px;
      padding-left:18px;
      color: #fff;
      width: auto;

      &::before {
        content: "";
        position:absolute;
        left:0;
        top:3px;
        border-radius: 50%;
        margin-right: 8px;
        width: 16px;
        height: 16px;
        background: #fff;
      }

      &::after {
        content: "";
        position: absolute;
        left: 3px;
        top: 7px;
        border-style: solid;
        border-width: 2px 2px 0 0;
        border-color: #e94f0c;
        width: 6px;
        height: 6px;
        transform: rotate(45deg);
      }
    }
  }
}