@charset "UTF-8";

/* GoogleFonts読み込み 下記のライセンス記述は削除禁止 */

/*

* "Noto Sans JP" licensed under the SIL Open Font License 1.1

* by https://fonts.google.com/specimen/Noto+Sans+JP

*/

@font-face {

  font-family: "Noto Sans JP";

  font-style: normal;

  font-weight: 400;

  src: url("fonts/NS-400.woff2") format("woff2"), url("fonts/NS-400.woff") format("woff");

  font-display: swap;

}

@font-face {

  font-family: "Noto Sans JP";

  font-style: normal;

  font-weight: 700;

  src: url("fonts/NS-700.woff2") format("woff2"), url("fonts/NS-700.woff") format("woff");

  font-display: swap;

}

@font-face {

  font-family: "Noto Sans JP vertical";

  font-style: normal;

  font-weight: 700;

  src: url("fonts/NS-700-vertical.woff2") format("woff2"), url("fonts/NS-700-vertical.woff") format("woff");

  font-display: swap;

}

/*

---------------------------------------------



    base settings



*/

:root {

  font-size: 62.5%;

  --s-2: calc(var(--s1) / 2);

  --s1: 0.8rem;

  --s2: calc(var(--s1) * 2);

  --s3: calc(var(--s1) * 3);

  --s4: calc(var(--s1) * 4);

  --s5: calc(var(--s1) * 5);

  --s6: calc(var(--s1) * 6);

  --s7: calc(var(--s1) * 7);

  --s8: calc(var(--s1) * 8);

  --s9: calc(var(--s1) * 9);

  --s10: calc(var(--s1) * 10);

  --s11: calc(var(--s1) * 11);

  --s12: calc(var(--s1) * 12);

}



@media screen and (max-width: 1100px) {

  :root {

    font-size: 0.9090909091vw;

  }

}

body {

  margin: 0;

  padding: 0;

  color: #000;

  font-family: "Noto Sans JP", sans-serif;

  font-size: 1.5rem;

  font-weight: 500;

  line-height: 1.5;

  -webkit-text-size-adjust: 100%;

  background: url(img/bg.jpg) repeat left top/20rem auto;

  background-attachment: fixed;
overflow-x: hidden;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin: 0;

  padding: 0;

  font-weight: normal;

  clear: both;

}



ul,

ol,

dl,

p,

img,

form,

dt,

dd,

figure {

  margin: 0;

  padding: 0;

  border: 0;

}



li {

  list-style: none;

}



input,

button,

textarea,

select {

  margin: 0;

  padding: 0;

  background: none;

  border: none;

  border-radius: 0;

  outline: none;

  font-size: 1.5rem;

  font-family: "Noto Sans JP", sans-serif;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



img {

  max-width: 100%;

  height: auto;

  vertical-align: bottom;

}

img.img-height {
  width: auto;
  max-width: inherit;
  height: 90%;
}



a {

  color: #000;

  transition: opacity 0.6s ease, color 0.6s ease;

  outline: none;

}



a:active {

  color: #000;

  text-decoration: none;

}



@media (hover: hover) {

  a:hover {
    color: #000;
    text-decoration: none;
  }
}

p {
  line-height: 2;
}

p + p {
  margin-top: 1em;
}

p + .toc-wrap {
  margin-top: 3em;
}



strong {
  font-weight: 700;
}



em {
  font-style: italic;
  font-weight: normal;
}



small {

  font-size: 80%;

}



.eng {

  position: absolute;

  top: 15px;

  right: 30px;

  color: #fff;

  font-size: 6.2rem;

  line-height: 1;

}



* {

  box-sizing: border-box;

}



.sp_br {

  display: none;

}



.pc_br {

  display: inline;

}



@media screen and (min-width: 768px) {

  .for-sp {

    display: none;

  }

}

@media screen and (max-width: 767px) {

  .for-pc {

    display: none;

  }

}

/*

---------------------------------------------



    layout center



*/

.l-center {

  max-width: 110rem;

  margin-right: auto;

  margin-left: auto;

  padding-right: var(--s3);

  padding-left: var(--s3);

  box-sizing: content-box;

  background: url(img/deco-ruler-left.png) repeat-y left top/2.4rem auto, url(img/deco-ruler-right.png) repeat-y right top/2.4rem auto, #fff;

  position: relative;

}

.l-center:before {

  content: "";

  width: 1px;

  height: 100%;

  background: #959595;

  position: absolute;

  left: 0;

  top: 0;

  z-index: 9;

}

.l-center:after {

  content: "";

  width: 1px;

  height: 100%;

  background: #959595;

  position: absolute;

  right: 0;

  top: 0;

  z-index: 9;

}



/*

---------------------------------------------



    layout stack



*/

.l-stack {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  gap: var(--s2);

}

.l-stack > * {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}



.l-stack-02 {

  margin-top: var(--s8);

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  gap: 11rem;

}

.l-stack-02 > * {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}



/*

---------------------------------------------



    layout cluster



*/

.l-cluster {

  display: flex;

  flex-wrap: wrap;

  gap: 2rem;

}



/*

---------------------------------------------



    layout grid



*/

.l-grid {

  --minmum: calc((100% - var(--s7)) / 2);

  display: grid;

  grid-gap: var(--s7);

}



.l-grid-02 {

  --minmum: calc(100% / 2);

  display: grid;

  grid-gap: 0;

  /* border: solid 0.5rem #fff; */

}



.l-grid-three {

  --minmum: calc((100% - 5px * 2) / 3);

  display: grid;

  grid-gap: 5px;

}



.l-grid-three-02 {

  --minmum: calc(100% / 3);

  display: grid;

  grid-gap: 0;

}



.l-grid-three-03 {

  --minmum: calc((100% - var(--s3) * 2) / 3);

  display: grid;

  grid-gap: var(--s3);

}



@supports (width: min(var(--minmum), 100%)) {

  .l-grid,

.l-grid-02,

.l-grid-three,

.l-grid-three-02,

.l-grid-three-03 {

    grid-template-columns: repeat(auto-fill, minmax(min(var(--minmum), 100%), 1fr));

  }

}

/*

---------------------------------------------



    layout sidebar



*/

.l-sidebar {

  margin-top: var(--s9);

  display: flex;

  gap: var(--s9);

  align-items: flex-start;

}

.l-sidebar__side {

  width: 30rem;

  height: calc(100vh - 9rem);

  padding-bottom: var(--s4);

  position: sticky;

  top: 9rem;

  overflow: scroll;

}

.l-sidebar__main {

  flex: 1;

}



/*

---------------------------------------------



    layout column



*/

.l-column {display: flex;flex-wrap: wrap;gap: var(--s1) var(--s5);}

.l-column__side {

  width: 38rem;

}

.l-column__side02 {

  width: 46rem;

}

.l-column__side03 {

  width: 13.5rem;

}

.l-column__side04 {

  width: 18rem;

}

.l-column__side05 {

  width: 20rem;

}

.l-column__side06 {

  width: 35rem;

}

.l-column__main {

  flex: 1;

}

.l-column--row-reverse {

  flex-direction: row-reverse;

}

.l-column--align-center {

  align-items: center;

}



/*

---------------------------------------------



    layout grid areas



*/

.l-grid-areas {

  display: grid;

  grid-template-areas: "img catch" "img text";

  grid-template-columns: 30rem 1fr;

  grid-template-rows: auto 1fr;

  grid-gap: var(--s3) var(--s9);

}

.l-grid-areas__cell-01 {

  grid-area: catch;

}

.l-grid-areas__cell-02 {

  grid-area: img;

}

.l-grid-areas__cell-03 {

  grid-area: text;

}

.l-grid-areas--row-reverse {

  grid-template-areas: "catch img" "text img";

  grid-template-columns: 1fr 30rem;

}

.l-grid-areas--align-center {

  grid-template-rows: auto auto;

}

.l-grid-areas--align-center .l-grid-areas__cell-01 {

  place-self: end start;

}

.l-grid-areas--align-center .l-grid-areas__cell-02 {

  place-self: center;

}

.l-grid-areas--align-center .l-grid-areas__cell-03 {

  place-self: start;

}

.l-grid-areas.box-study {

  grid-template-columns: 52rem 1fr;

  grid-gap: var(--s3) 5rem;

  grid-template-rows: auto auto;

}

.l-grid-areas.box-study .l-grid-areas__cell-01 {

  place-self: end start;

}

.l-grid-areas.box-study .l-grid-areas__cell-02 {

  place-self: center;

}

.l-grid-areas.box-study .l-grid-areas__cell-03 {

  place-self: start;

}

.l-grid-areas.box-study.l-grid-areas--row-reverse {

  grid-template-columns: 1fr 52rem;

}



.l-grid-areas02 {

  display: grid;

  grid-template-areas: "img catch" "img text";

  grid-template-columns: 19.5rem 1fr;

  grid-template-rows: auto 1fr;

  grid-gap: var(--s3) 3.8rem;

}

.l-grid-areas02__cell-01 {

  grid-area: catch;

}

.l-grid-areas02__cell-02 {

  grid-area: img;

}

.l-grid-areas02__cell-03 {

  grid-area: text;

}



/*

---------------------------------------------



    layout scroll x



*/

.l-scroll-x {

  width: 100%;

  padding-bottom: var(--s1);

  overflow-x: auto;

  overflow-y: hidden;

  scrollbar-color: #ddd transparent;

  scrollbar-width: 0.6rem;

}

.l-scroll-x::-webkit-scrollbar {

  height: 0.6rem;

}

.l-scroll-x::-webkit-scrollbar-track {

  border-radius: 0.3rem;

  background: #eee;

}

.l-scroll-x::-webkit-scrollbar-thumb {

  border-radius: 0.3rem;

  background: #ddd;

}



/*

---------------------------------------------



    header 



*/

.header-area {

  width: 100%;

  max-width: 114.8rem;

  height: 6.8rem;

  margin: 0 auto;

  padding: 0 11rem 0 3.4rem;

  border: solid 1px #959595;

  background: #fff;

  display: flex;

  gap: var(--s2);

  justify-content: space-between;

  align-items: center;

}

.header-area__left {

  margin: 0;

  display: flex;

  gap: 2rem;

  align-items: center;

  font-size: 1.1rem;

}

.header-area__left a {

  text-decoration: none;

}

.header-area__name {

  font-size: 1.1rem;

}

.header-area__name-wrap {

  flex: 1;

  font-size: 1.1rem;

}

.header-area__logo {

  height: 4.8rem;

}



@media (hover: hover) {

  .header-area__logo a:hover,

.header-area__navi__item a:hover,

.header-area__name a:hover,

.mainvisual-low__logo a:hover {

    opacity: 0.6;

  }

}

/*

---------------------------------------------



    main-area



*/

.main-area {

  position: relative;

}

.main-area:before {

  content: "";

  width: 1px;

  height: calc(100% + 6.8rem);

  background: #959595;

  position: absolute;

  left: -1px;

  top: -6.8rem;

  z-index: 9;

}

.main-area:after {

  content: "";

  width: 1px;

  height: calc(100% + 6.8rem);

  background: #959595;

  position: absolute;

  right: -1px;

  top: -6.8rem;

  z-index: 9;

}

.main-area--low {

  padding: var(--s1) 5rem var(--s5);

}



/*

---------------------------------------------



    main visual



*/

.mainvisual {

  width: 100%;

  margin-bottom: var(--s10);

  position: relative;

}

.mainvisual .mv-content {

  padding: 4.5rem 5rem;

  background: url(img/mv-illust.png) no-repeat right 2rem bottom/47rem auto;

  position: relative;

}

.mainvisual .deco-title {

  width: 12.6rem;

  height: auto;

  padding: 1.4rem 0 1rem;

  background-color: #fff;

  border-left: 1px solid #959595;

  border-right: 1px solid #959595;

  position: absolute;

  top: 17.7rem;

  right: 10rem;

  display: flex;

  justify-content: center;

  z-index: 1;

}

.mainvisual .deco-title__text {

  writing-mode: vertical-rl;

  font-family: "Noto Sans JP vertical";

  font-size: 3.6rem;

  font-weight: 700;

  line-height: 1.2;

  white-space: nowrap;

  letter-spacing: 0.2em;

}

.mainvisual .mv-header__labels {

  margin-bottom: var(--s3);

}

.mainvisual .mv-header__label {

  display: inline-block;

  padding: var(--s-2) var(--s1);

  background-color: #434343;

  font-size: 2.8rem;

  font-weight: 700;

  color: #fff;

}

.mainvisual .mv-header__connector {

  margin: 0 1rem;

  font-size: 2.8rem;

  font-weight: 700;

}

.mainvisual .mv-header__title {

  margin-bottom: var(--s4);

  font-size: 6rem;

  font-weight: 700;

  line-height: 1;

}

.mainvisual .mv-header__title span.cl {

  color: #f0795b;

}

.mainvisual .mv-header__title span.line {

  display: inline-block;

  padding: 0.6rem 0.8rem 1rem 0.8rem;

  border: solid 1px #959595;

  border-left: none;

}

.mainvisual .mv-header__title span.line:first-of-type {

  border-left: solid 1px #959595;

}

.mainvisual .mv-header__title-suffix {

  margin-left: var(--s2);

  font-size: 3.6rem;

  letter-spacing: 0.3rem;

}

.mainvisual .mv-sponsor {

  font-size: 1.1rem;

  margin-bottom: var(--s4);

  color: #868686;

}

.mainvisual .mv-body {

  max-width: 53rem;

}



/*

---------------------------------------------



    TOC lower



*/

.toc-lower-wrap {max-width: 70rem;margin: var(--s8) auto var(--s10);padding: var(--s4) var(--s6);border: solid 1px #e5e5e5;background: #f2f2ef;position: relative;}

.toc-lower-wrap--relation {

  margin-top: 10rem;

  padding-bottom: var(--s2);

}

.toc-lower-wrap ul,

.toc-lower-wrap ul:not([class]) {

  margin-top: 0;

  margin-bottom: 0;

  counter-reset: numb;

}

.toc-lower-wrap ul li,

.toc-lower-wrap ul:not([class]) li {

  font-size: 1.8rem;

  font-weight: 700;

}

.toc-lower-wrap ul li + li,

.toc-lower-wrap ul:not([class]) li + li {

  margin-top: 1.2em;

}

.toc-lower-wrap ul li.chapter-h-two,

.toc-lower-wrap ul:not([class]) li.chapter-h-two {

  padding: 0 0 0 1.8em;

  font-size: 1.8rem;

  font-weight: 700;

  position: relative;

  counter-increment: numb;

}

.toc-lower-wrap ul li.chapter-h-two::before,

.toc-lower-wrap ul:not([class]) li.chapter-h-two::before {

  content: counter(numb, decimal-leading-zero);

  font-size: 1.3rem;

  font-weight: 700;

  color: #434343;

  position: absolute;

  top: 0.25em;

  left: 0.4rem;

}

.toc-lower-wrap ul li.chapter-h-two a,

.toc-lower-wrap ul:not([class]) li.chapter-h-two a {

  background: none;

}

.toc-lower-wrap ul li.chapter-h-three,

.toc-lower-wrap ul:not([class]) li.chapter-h-three {

  margin: var(--s2) 0 var(--s1) var(--s4);

  padding: 0 0 0 1.5em;

  font-size: 1.6rem;

  font-weight: 700;

  line-height: 1.3;

  position: relative;

}

.toc-lower-wrap ul li.chapter-h-three:before,

.toc-lower-wrap ul:not([class]) li.chapter-h-three:before {

  content: "└";

  position: absolute;

  left: 0;

  top: 0.1em;

}

.toc-lower-wrap ul li.chapter-h-three a,

.toc-lower-wrap ul:not([class]) li.chapter-h-three a {

  background: none;

}

.toc-lower-wrap ul li.relation-links,

.toc-lower-wrap ul:not([class]) li.relation-links {

  padding: 0 0 0 1.8em;

  font-size: 1.6rem;

  font-weight: 700;

  position: relative;

}

.toc-lower-wrap ul li.relation-links:before,

.toc-lower-wrap ul:not([class]) li.relation-links:before {

  width: 1.8rem;

  height: 1.8rem;

  background: url(img/arrow-02-black-right.svg) no-repeat center/contain;

  position: absolute;

  left: 0;

  top: 0.2em;

}

.toc-lower-wrap a {

  display: block;

  text-decoration: none;

}



.toc-lower__title {

  margin-bottom: var(--s3);

  font-size: 2.2rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  color: #ea6544;

}

.toc-lower__title span.en {

  margin-left: var(--s3);

}

.toc-lower__title span.en img {

  height: 3.3rem;

  width: auto;

}



.toc-lower__body {

  padding-bottom: var(--s3);

}



@media (hover: hover) {

  .toc-lower-wrap a:hover {

    opacity: 0.6;

  }

}

/*

---------------------------------------------



    list



*/

.main-area .subList,

.main-area ul:not([class]) {

  margin: var(--s4) 0;

}

.main-area .subList li,

.main-area ul:not([class]) li {

  padding: 0 0 0 1.2em;

  font-size: 100%;

  line-height: 1.5;

  position: relative;

}

.main-area .subList li::before,

.main-area ul:not([class]) li::before {

  content: "";

  width: 1rem;

  height: 1rem;

  background: #ea6544;

  border-radius: 10rem;

  position: absolute;

  top: 0.4em;

  left: 0;

}

.main-area .subList li + li,

.main-area ul:not([class]) li + li {

  margin-top: 1em;

}

.main-area ol:not([class]) {

  margin: var(--s4) 0;

  counter-reset: number;

}

.main-area ol:not([class]) li {

  padding: 0 0 0 2em;

  font-size: 100%;

  line-height: 1.5;

  position: relative;

  counter-increment: number;

}

.main-area ol:not([class]) li::before {

  content: counter(number);

  width: 1.6em;

  height: 1.6em;

  padding-top: var(--s-2);

  background: #7d775d;

  border-radius: 0.4rem;

  display: flex;

  justify-content: center;

  color: #fff;

  font-size: 1.4rem;

  font-weight: 700;

  line-height: 1;

  text-align: center;

  box-sizing: border-box;

  position: absolute;

  top: 0.1em;

  left: 0;

}

.main-area ol:not([class]) li a {

  text-decoration: none;

}

.main-area ol:not([class]) li + li {

  margin-top: 1em;

}



/*

---------------------------------------------



    btn



*/

.btn-internal {margin: var(--s6) auto;position: relative;}

.btn-internal a {

  width: 41rem;

  min-height: var(--s9);

  /* height: 100%; */

  margin: 0 auto;

  margin-top: var(--s3);

  margin-bottom: var(--s3);

  padding: var(--s3) var(--s7);

  background: #fff url("img/arrow-01-orange-right.svg") no-repeat center right var(--s3)/0.9rem auto;

  border-radius: 10rem;

  border: solid 0.2rem #000;

  box-shadow: 0.6rem 0.6rem 0 rgba(0, 0, 0, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

  font-weight: 700;

  text-align: center;

  text-decoration: none;

  transition: background 0.4s, color 0.4s, opacity 0.4s;

}

.btn-internal a span.st {

  font-size: 1.8rem;

}

.btn-internal--right a {

  margin-left: auto;

  margin-right: 0;

}

.btn-internal02 a {

  width: 41rem;

  min-height: var(--s9);

  height: 100%;

  margin: 0 auto;

  padding: var(--s3) var(--s7);

  border-radius: 10rem;

  border: solid 0.2rem #000;

  box-shadow: 0.6rem 0.6rem 0 rgba(0, 0, 0, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

  font-weight: 700;

  text-align: center;

  text-decoration: none;

  transition: background 0.4s, color 0.4s, opacity 0.4s;

　background: #fff; 

  position: relative;

}

.btn-internal02 a::after {

  content: "";

  position: absolute;

  right: var(--s3);

  top: 50%;

  transform: translateY(-50%) rotate(90deg); /* ここで90度回転 */

  width: 2.0rem;

  height: 1.7rem;

  background: url("img/arrow-01-orange-right.svg") no-repeat center/contain;

}



@media (hover: hover) {

  .btn-internal a:hover {

    background-color: #000;

    color: #fff;

  }

}

@media (hover: hover) {

  .btn-internal02 a:hover {

    background-color: #000;

    color: #fff;

  }

}

.btn-web {

  margin: var(--s5) auto;

  position: relative;

}

.btn-web a {

  width: 41rem;

  min-height: var(--s9);

  /* height: 100%; */

  margin: 0 auto;

  margin-top: var(--s3);

  margin-bottom: var(--s3);

  padding: var(--s3) var(--s7);

  background: #00995c url("img/icon-window.svg") no-repeat center right 2.4rem/1.8rem auto;

  border-radius: 10rem;

  border: solid 0.2rem #000;

  box-shadow: 0.6rem 0.6rem 0 rgba(0, 0, 0, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 1.5rem;

  font-weight: 700;

  text-align: center;

  text-decoration: none;

  transition: background 0.4s, color 0.4s, opacity 0.4s;

}

.btn-web a span.st {

  font-size: 1.8rem;

}



@media (hover: hover) {

  .btn-web a:hover {

    background-color: #fff;

    background-image: url("img/icon-window-green.svg");

    color: #00995c;

    border-color: #00995c;

  }

}

.btn-link {

  margin: var(--s2) auto;

  text-align: right;

}

.btn-link a {

  margin: 0;

  padding: 0.2rem var(--s4) var(--s-2) 0;

  background: url("img/arrow-02-black-right.svg") no-repeat center right/2.2rem auto;

  display: inline-block;

  font-weight: 700;

  line-height: 1.5;

}

.btn-link--white a {

  color: #fff;

}



@media (hover: hover) {

  .btn-link a:hover {

    text-decoration: none;

    opacity: 0.6;

  }

}

.btn-tel {

  display: none;

}



.btn-column {

  margin: var(--s5) 0;

  display: flex;

  justify-content: center;

  gap: var(--s5);

}

.btn-column .btn-web,

.btn-column .btn-internal {

  margin: 0;

}



/*

---------------------------------------------



    table



*/

table {

  width: 100%;

  margin: var(--s5) 0;

  border-collapse: collapse;

  border-top: 1px solid #c7c7c7;

  border-left: 1px solid #c7c7c7;

}



th,

td {

  padding: var(--s2);

  border-right: solid 1px #c7c7c7;

  border-bottom: solid 1px #c7c7c7;

  line-height: 1.5;

  word-break: break-all;

}



th {

  background: #f7f7f5;

}



td {

  background: #fff;

}



tbody th {

  background: #f7f7f5;

}



.l-scroll-x table {

  width: inherit;

}

.l-scroll-x table th,

.l-scroll-x table td {

  min-width: 20rem;

}



/*

---------------------------------------------



    caption



*/

.caption {

  margin-top: 0.8em;

  display: block;

  color: #999;

  font-size: 1rem;

  line-height: 1.5;

  text-align: center;

  word-break: break-all;

}

.caption a {

  color: #999;

}



.caption-scroll {

  margin-top: 0.8em;

  color: #999;

  font-size: 1.2rem;

  line-height: 1.5;

  text-align: center;

  word-break: break-all;

  white-space: nowrap;

  overflow-x: auto;

  overflow-y: hidden;

  scrollbar-color: #ddd transparent;

  scrollbar-width: thin;

}

.caption-scroll a {

  color: #999;

}

.caption-scroll::-webkit-scrollbar {

  height: 0.6rem;

}

.caption-scroll::-webkit-scrollbar-track {

  border-radius: 0.3rem;

  background: #eee;

}

.caption-scroll::-webkit-scrollbar-thumb {

  border-radius: 0.3rem;

  background: #ddd;

}



/*

---------------------------------------------



catch



*/

.catch-01 {

  font-size: 2rem;

  font-weight: 700;

  line-height: 1.5;

  color: #ea6544;

}



.catch-02 {

  font-size: 2rem;

  font-weight: 700;

  line-height: 1.5;

  color: #00995c;

}



/*

---------------------------------------------



text



*/

.marker {border-bottom: solid 0.3rem #ffbbaa;font-weight: 700;}



.marker2 {border-bottom: solid 0.3rem #ea6544;font-weight: 700;}



.txt_bold {

  font-weight: 700;

  color: #ea6544;

}



/*

---------------------------------------------



subgrid card



*/

.subgrid-card {

  display: grid;

  grid-template-rows: subgrid;

  grid-row: span 2;

  grid-gap: 0;

  border: solid 0.5rem #ffffff;

  background: #dedfe3;

}



.subgrid-card-02 {

  display: grid;

  grid-template-rows: subgrid;

  grid-row: span 3;

  grid-gap: var(--s2);

}



/*

---------------------------------------------



    float wrap



*/

.float-wrap {

  display: flow-root;

  margin: var(--s4) 0;

}

.float-wrap .float-img.fr {

  width: 37rem;

  margin-left: var(--s5);

  margin-bottom: var(--s2);

  float: right;

}

.float-wrap .float-img.fl {

  width: 37rem;

  margin-right: var(--s5);

  margin-bottom: var(--s2);

  float: left;

}

.float-wrap .float-img.ct {

  width: 42rem;

  margin-left: auto;

  margin-right: auto;

  margin-bottom: var(--s2);

}



/*

---------------------------------------------



pankuzu



*/

#pankuzu {

  width: 100%;

  margin: 0 auto var(--s3);

  padding: var(--s1) 0;

  color: #7d7d7d;

  font-size: 1.2rem;

  white-space: nowrap;

  overflow-x: auto;

  overflow-y: hidden;

}

#pankuzu a {

  color: #7d7d7d;

}



/*

---------------------------------------------



    footer



*/

.footer-area {

  background: #434343;

  position: relative;

}

.footer-area .l-center {

  max-width: calc(110rem - 2px);

  padding-top: var(--s9);

  background: none;

  border-right: solid 1px #959595;

  border-left: solid 1px #959595;

}

.footer-area .l-center:before {

  left: calc(var(--s3) - 1px);

}

.footer-area .l-center:after {

  right: calc(var(--s3) - 1px);

}



.footer-about {

  max-width: 90rem;

  margin: 0 auto var(--s8);

  padding: var(--s5) var(--s9);

  background: #e1e2e2;

}

.footer-about__main {

  position: relative;

  z-index: 0;

}

.footer-about__title {

  width: fit-content;

  margin-bottom: var(--s1);

  padding: 1.8rem var(--s1) 0.6rem 18.6rem;

  background: url(img/logo.png) no-repeat left center/16.2rem auto, #e1e2e2;

  font-size: 2rem;

  font-weight: 700;

  color: #434343;

  position: relative;

}

.footer-about__title:before {

  content: "";

  width: 90rem;

  height: 1px;

  background: #959595;

  position: absolute;

  left: calc(var(--s9) * -1);

  top: 60%;

  z-index: -1;

}

.footer-about p {

  font-size: 1.3rem;

}

.footer-about .btn-link {

  margin-bottom: 0;

}



.footer-main {

  max-width: 100rem;

  margin-right: auto;

  margin-left: auto;

  padding-right: var(--s3);

  padding-left: var(--s3);

  box-sizing: content-box;

}



.footer-bottom {

  background: #7d775d;

}

.footer-bottom__inner {

  max-width: 100rem;

  margin: 0 auto;

  padding: var(--s1) 0;

  padding-right: var(--s3);

  padding-left: var(--s3);

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.footer-bottom .l-center {

  padding-top: 0;

}



.footer-logo {

  width: 23.5rem;

  margin: 0;

  font-size: 2rem;

  text-align: center;

}

.footer-logo__link {

  display: block;

  text-decoration: none;

}



@media (hover: hover) {

  .footer-logo__link:hover {

    opacity: 0.6;

  }

}

.footer-box + .footer-box {

  margin-top: var(--s5);

}



.footer-menu-title {

  margin-bottom: var(--s1);

  font-size: 1.5rem;

  font-weight: 700;

  line-height: 1.5;

  border-bottom: 1px solid #959595;

}

.footer-menu-title__link {

  padding: var(--s1) 0;

  display: block;

  text-decoration: none;

  color: #fff;

}



@media (hover: hover) {

  .footer-menu-title__link:hover {

    opacity: 0.6;

    color: #fff;

  }

}

.footer-menu {

  display: flex;

  flex-wrap: wrap;

  gap: var(--s2);

}

.footer-menu__item {

  width: calc((100% - var(--s2) * 3) / 4);

  font-size: 1.4rem;

  line-height: 1.5;

}

.footer-menu__link {

  padding: var(--s1);

  display: block;

  text-decoration: none;

  color: #fff;

}



@media (hover: hover) {

  .footer-menu__link:hover {

    opacity: 0.6;

    color: #fff;

  }

}

.footer-menu-sub {

  margin-left: var(--s1);

}

.footer-menu-sub__item {

  font-size: 1.2rem;

  line-height: 1.5;

}

.footer-menu-sub__link {

  padding: var(--s-2) var(--s-2) var(--s-2) 1.2em;

  display: block;

  text-decoration: none;

  color: #fff;

  position: relative;

}

.footer-menu-sub__link::before {

  content: "-";

  position: absolute;

  color: #fff;

  top: var(--s-2);

  left: 0;

}



@media (hover: hover) {

  .footer-menu-sub__link:hover {

    opacity: 0.6;

    color: #fff;

  }

}

.footer-disclaimer {

  width: 70rem;

  margin: var(--s5) auto;

  font-size: 1rem;

  color: #fff;

  line-height: 1.5;

}

.footer-disclaimer__label {

  display: inline;

}

.footer-disclaimer__text {

  display: inline;

}



.footer-nocopy {

  margin: var(--s5) 0 0;

  padding-bottom: var(--s5);

  font-size: 1.2rem;

  color: #fff;

  text-align: center;

}



.footer-copyright {

  font-size: 1.2rem;

  color: #fff;

}

.footer-copyright__link {

  text-decoration: none;

  color: #fff;

}



@media (hover: hover) {

  .footer-copyright__link:hover {

    text-decoration: underline;

    color: #fff;

  }

}

.footer-sitemap {

  margin: 0;

  font-size: 1.2rem;

  color: #fff;

}

.footer-sitemap__link {

  text-decoration: none;

  color: #fff;

}



@media (hover: hover) {

  .footer-sitemap__link:hover {

    text-decoration: underline;

    color: #fff;

  }

}

.footer-banner {

  width: 7.2rem;

  height: 25.8rem;

  padding: 2.6rem var(--s2) 4.8rem;

  background: #00995c url(img/icon-window.svg) no-repeat center bottom 1.4rem/1.8rem auto;

  border-radius: var(--s1) 0 0 var(--s1);

  border: solid 0.2rem #000;

  border-right: none;

  color: #fff;

  font-family: "Noto Sans JP vertical";

  letter-spacing: 0.1rem;

  writing-mode: vertical-rl;

  font-size: 1.4rem;

  font-weight: 700;

  display: block;

  text-decoration: none;

  position: fixed;

  right: 0;

  bottom: 10rem;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.5s, visibility 0.5s;

  z-index: 9;

}

.footer-banner:before {

  content: "CHECK";

  width: 5.2rem;

  height: 5.2rem;

  background: #ea6544;

  border: solid 1px #000;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: "Poppins", sans-serif;

  font-size: 1.2rem;

  writing-mode: horizontal-tb;

  color: #fff;

  position: absolute;

  left: 50%;

  top: -3.6rem;

  transform: translateX(-50%);

}

.footer-banner.is-fixed {

  opacity: 1;

  visibility: visible;

}



@media (hover: hover) {

  .footer-banner:hover {

    opacity: 0.7;

    color: #fff;

  }

}

/*

---------------------------------------------



    gnavi



*/

.gnavi-btn {
  width: 6.8rem;
  height: 6.8rem;
  background: #959595;
  display: block;
  position: fixed;
  top: 0;
  left: calc(50% + 50.5rem);
  z-index: 100;
  cursor: pointer;
}

.gnavi-btn:before {

  content: "menu";

  width: 100%;

  font-family: "Poppins", sans-serif;

  font-size: 1.2rem;

  font-weight: 200;

  line-height: 1;

  text-align: center;

  color: #fff;

  position: absolute;

  left: 0;

  bottom: 1rem;

}

.gnavi-btn span {

  width: 3.1rem;

  height: 0.2rem;

  display: inline-block;

  background: #fff;

  position: absolute;

  left: 1.8rem;

  transition: transform 0.4s, opacity 0.4s;

}

.gnavi-btn span:nth-of-type(1) {

  top: 1.5rem;

}

.gnavi-btn span:nth-of-type(2) {

  top: 2.4rem;

}

.gnavi-btn span:nth-of-type(3) {

  top: 3.3rem;

}

.gnavi-btn.is-active span:nth-of-type(1) {

  transform: translateY(1rem) rotate(-45deg);

}

.gnavi-btn.is-active span:nth-of-type(2) {

  opacity: 0;

}

.gnavi-btn.is-active span:nth-of-type(3) {

  transform: translateY(-0.8rem) rotate(45deg);

}



.gnavi-area {

  width: 40rem;

  height: 100vh;

  padding: 7rem 0;

  background: #f2f2f2;

  display: block;

  visibility: hidden;

  position: fixed;

  top: 0;

  left: calc(50% + 15rem);

  z-index: 99;

  transition: transform 0.8s ease, opacity 0.8s ease, visibility 0.8s ease;

  opacity: 0;

  overflow-x: hidden;

  overflow-y: auto;

}

.gnavi-area__logo {

  width: 18rem;

  margin: 0 auto var(--s2);

}



.gnavi-box__title {padding: 1.2rem var(--s6) 1.2rem var(--s2);border-bottom: 1px solid #999;font-weight: 700;line-height: 1.5;display: block;cursor: pointer;transition: opacity 0.5s;position: relative;}

.gnavi-box__title::after {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background: url("img/arrow-03-black-down.svg") no-repeat center/contain;
  position: absolute;
  top: 50%;
  right: var(--s2);
  transform: translate(0, -50%) rotate(0);
  transition: transform 0.3s;
  background: url(img) no-repeat center / contain;
}

.gnavi-box__title:hover {
  opacity: 1;
}

.gnavi-box a {
    text-decoration: none;
}

.gnavi-box__title.is-open::after {
  transform: translate(0, -50%) rotate(180deg);
}

.gnavi-box__content {

  background: rgba(255, 255, 255, 0.4);

}

.gnavi-box:first-child {

  border-top: 1px solid #999;

}



.gnavi-menu__item,

.gnavi-menu-sub__item {

  position: relative;

}

.gnavi-menu__item::before,

.gnavi-menu-sub__item::before {

  content: "└";

  position: absolute;

  top: var(--s2);

  left: var(--s2);

}

.gnavi-menu__link,

.gnavi-menu-sub__link {

  padding: 1.2rem var(--s2) 1.2rem var(--s5);

  display: block;

  font-weight: 700;

  line-height: 1.5;

  text-decoration: none;

}

.gnavi-menu__link:hover,

.gnavi-menu-sub__link:hover {

  opacity: 0.6;

}



.gnavi-menu__item {

  border-bottom: 1px solid #999;

}



.gnavi-menu-sub__item {

  border-top: 1px solid #999;

}



.is-gnavi-open .gnavi-area {

  opacity: 1;

  visibility: visible;

}



/*

---------------------------------------------



    page



*/

.page-top {

  width: 7.2rem;

  height: 7.2rem;

  position: fixed;

  right: 0;

  bottom: var(--s2);

  z-index: 10;

  transition: opacity 0.3s;

}



@media (hover: hover) {

  .page-top__link:hover {

    opacity: 0.6;

  }

}

/*

---------------------------------------------



    toggle sp



*/

.toggle-sp-content {

  display: block;

}



/*

---------------------------------------------



    toggle



*/

.toggle-btn {

  line-height: 1.5;

  position: relative;

  transition: opacity 0.3s;

  cursor: pointer;

}

.toggle-btn::before {

  content: "";

  width: var(--s4);

  height: 0.3rem;

  background: #000;

  position: absolute;

  top: 50%;

  right: var(--s3);

  transform: translate(0, -50%);

}

.toggle-btn::after {

  content: "";

  width: 0.3rem;

  height: var(--s4);

  background: #000;

  position: absolute;

  top: 50%;

  right: 3.9rem;

  transform: translate(0, -50%);

  transition: transform 0.3s;

}

.toggle-btn.is-open::after {

  transform: translate(0, -50%) rotate(270deg);

}



.toggle-content {

  display: none;

}



/*

---------------------------------------------



    more



*/

.more-btn {

  max-width: 38rem;

  margin: var(--s5) auto;

  padding: var(--s3) var(--s7);

  background: #000;

  border: 0.2rem solid #000;

  border-radius: 10rem;

  color: #fff;

  text-align: center;

  position: relative;

  transition: opacity 0.3s;

  cursor: pointer;

}

.more-btn::before {

  content: "";

  width: var(--s3);

  height: 0.2rem;

  background: #fff;

  position: absolute;

  top: 50%;

  right: var(--s3);

  transform: translate(0, -50%);

}

.more-btn::after {

  content: "";

  width: 0.2rem;

  height: var(--s3);

  background: #fff;

  position: absolute;

  top: 50%;

  right: 3.5rem;

  transform: translate(0, -50%);

  transition: transform 0.3s;

}

.more-btn.is-open::after {

  transform: translate(0, -50%) rotate(270deg);

}



@media (hover: hover) {

  .more-btn:hover {

    opacity: 0.6;

    color: #fff;

  }

}

.more-content {

  display: none;

}



/*

---------------------------------------------



    グラデーション  more-content



*/

.more__content {

  position: relative;

  height: auto;

  max-height: 15rem;

  overflow: hidden;

  transition: max-height 1s;

}



.more__content::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

  display: block;

  width: 100%;

  height: 100%;

  transition: 0.3s;

  background: linear-gradient(to bottom, transparent 0%, #f2f2ef 100%);

}



.more__content.open {

  height: auto;

}



.more__content.open:after {

  z-index: -1;

  opacity: 0;

}



.more__content.sp-only {

  overflow: initial;

  max-height: initial;

}



.more__content.sp-only:after {

  content: none;

}



.more__btn {

  width: 22rem;

  min-width: 9rem;

  display: block;

  margin: var(--s2) auto -8rem;

  padding: 1.2rem 4.5rem 1.2rem;

  border-radius: 5rem;

  background: #ffffff;

  border: solid 0.1rem #000000;

  cursor: pointer;

  font-size: 1.6rem;

  font-weight: 700;

  text-align: center;

  position: relative;

  transition: opacity 0.3s;

}

.more__btn::before {

  content: "";

  width: 2.8rem;

  height: 2.8rem;

  background: url(img/btn-more.png) no-repeat center/contain;

  position: absolute;

  top: 50%;

  right: 1.4rem;

  transform: translate(0, -50%);

}

.more__btn::after {

  content: "";

  width: 0.2rem;

  height: 1.6rem;

  background: #000;

  position: absolute;

  top: 50%;

  right: 2.7rem;

  transform: translate(0, -50%);

  transition: transform 0.3s;

}



.more__btn.is-open::after {

  transform: translate(0, -50%) rotate(270deg);

}



.more__btn.for-sp {

  display: none;

}



@media (hover: hover) {

  .more__btn:hover {

    opacity: 0.8;

  }

}

/*

---------------------------------------------



    help



*/

.help-btn01 {

  padding-bottom: var(--s5);

  text-align: center;

  display: inline-block;

  cursor: pointer;

  position: relative;

}

.help-btn01--a {

  background: url(img/btn-help-blue.png) no-repeat center bottom/3.2rem auto;

}

.help-btn01--b {

  padding-top: 2rem;

  padding-bottom: 5.5rem;

  background: url(img/btn-help-yg.png) no-repeat center bottom/3.2rem auto;

}

.help-btn01--c {

  background: url(img/btn-help-green.png) no-repeat center bottom/3.2rem auto;

}



.help-content01 {

  width: 33rem;

  padding: var(--s2);

  background: #fff;

  border: solid 0.2rem #00995c;

  border-radius: var(--s1);

  position: absolute;

  top: 70%;

  left: 0;

  z-index: 5;

  transition: opacity 0.6s;

  visibility: hidden;

  opacity: 0;

  font-size: 1.6rem;

  font-weight: 500;

  color: #000;

}

.help-content01--b {

  border-color: #6ab348;

  left: 50%;

  transform: translateX(-50%);

}

.help-content01--b .future-subtitle {

  color: #6ab348;

}

.help-content01--c {

  border-color: #959595;

  left: auto;

  right: 0;

}

.help-content01--c .future-subtitle {

  color: #959595;

}

.help-content01.is-show {

  visibility: visible;

  opacity: 1;

}



.help-content02 {

  width: 30rem;

  padding: var(--s2);

  background: #575757;

  border-radius: var(--s2);

  position: absolute;

  top: 100%;

  left: 57%;

  transform: translateX(-50%);

  z-index: 5;

  transition: opacity 0.6s;

  visibility: hidden;

  opacity: 0;

  font-size: 1.6rem;

  font-weight: 500;

  color: #fff;

  text-align: left;

}

.help-content02:before {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 0 7.5px 12px 7.5px;

  border-color: transparent transparent #575757 transparent;

  position: absolute;

  left: 50%;

  bottom: 100%;

  transform: translateX(-50%);

}

.help-content02.is-show {

  visibility: visible;

  opacity: 1;

}



/*

---------------------------------------------



    tab



*/

.tab-btn {

  width: fit-content;

  padding: 1.4rem 2.8rem;

  background: #959595;

  border-radius: var(--s2) var(--s2) 0 0;

  color: #fff;

  font-size: 2.2rem;

  font-weight: 700;

  text-align: center;

  cursor: pointer;

  transition: background-color ease 0.6s;

  position: relative;

  z-index: 1;

}

.tab-btn span.en {

  margin-right: var(--s3);

  font-family: "Poppins", sans-serif;

  font-size: 2rem;

  font-weight: 200;

}

.tab-btn.is-active {

  margin-bottom: -1px;

  background-color: #f0795b;

}

.tab-btn.is-active:after {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 1.5rem 1.4rem 0 1.4rem;

  border-color: #f0795b transparent transparent transparent;

  position: absolute;

  left: 50%;

  top: 100%;

  transform: translateX(-50%);

  z-index: 2;

}



.tab-btn-wrapper {

  max-width: 100rem;

  margin: 0 auto;

  display: flex;

  gap: var(--s2);

}

.tab-btn-wrapper--bottom {

  align-items: flex-start;

}

.tab-btn-wrapper--bottom .tab-btn {

  border-radius: 0 0 var(--s2) var(--s2);

}

.tab-btn-wrapper--bottom .tab-btn.is-active:after {

  border-width: 0 0.9rem 1rem 0.9rem;

  border-color: transparent transparent #f0795b transparent;

  top: auto;

  bottom: 100%;

}



.tab-content {

  border-top: solid 1px #000;

  border-bottom: solid 1px #000;

  display: none;

  opacity: 0;

}

.tab-content__left {

  padding: var(--s5);

  padding-left: 0;

}

.tab-content.is-active {

  display: block;

  animation: tabAnimation ease 0.6s forwards;

}



/*

---------------------------------------------



    titles



*/

.pr-text {

  margin-bottom: var(--s12);

  font-size: 1.1rem;

  color: #868686;

}



.main-area h1,

.main-area h2,

.main-area h3,

.main-area h4,

.main-area h5,

.main-area h6 {font-weight: 700;word-wrap: break-word;}

.main-area--low h1 a,

.main-area--low h2 a,

.main-area--low h3 a,

.main-area--low h4 a,

.main-area--low h5 a,

.main-area--low h6 a {

  display: block;

  padding-right: var(--s4);

  text-decoration: none;

}



@media (hover: hover) {

  .main-area h2 a:hover,

.main-area h3 a:hover,

.main-area h4 a:hover,

.main-area h5 a:hover,

.main-area h6 a:hover {

    opacity: 0.6;

  }

}

.main-area--low h1:not([class]) {

  max-width: 82rem;

  margin: 0 0 2rem;

  font-size: 4.8rem;

  position: relative;

  z-index: 0;

}

.main-area--low h1:not([class]):before {

  content: "";

  width: var(--s3);

  height: 4rem;

  background: #f0795b;

  position: absolute;

  left: -7.4rem;

  top: 0.3em;

}

.main-area--low h1:not([class]):after {
  content: "";
  width: 35rem;
  height: 22rem;
  background: url(img/mv-illust.png) no-repeat right 2rem bottom/34rem auto;
  position: absolute;
  right: -21rem;
  bottom: -13rem;
  z-index: -1;
  opacity: 0.3;
}

.main-area--low h2:not([class]) {

  margin: var(--s10) auto var(--s4);

  padding: var(--s2) var(--s3) var(--s2) 6.8rem;

  background: #434343;

  font-size: 3.2rem;

  color: #fff;

  position: relative;

}

.main-area--low h2:not([class]):before {

  content: "";

  width: 4.8rem;

  height: 1px;

  background: #ea6544;

  position: absolute;

  left: 0;

  top: 50%;

}

.main-area--low h2:not([class]) a {

  background: url(img/arrow-02-white-right.svg) no-repeat right center;

  background-size: 2.2rem auto;

  color: #fff;

}

.main-area--low h3:not([class]) {
    margin: var(--s5) auto var(--s3);
    padding: 0 0 var(--s-2);
    border-bottom: solid 2px #c1bdac;
    font-size: 2.4rem;
    font-weight: 700;
    position: relative;
}

.main-area--low h3:not([class]):before {
    content: "";
    width: 4.8rem;
    height: 2px;
    background: #ea6544;
    position: absolute;
    left: 0;
    bottom: -2px;
}

.main-area--low h3:not([class]) a {
  background: url(img/arrow-02-black-right.svg) no-repeat right center;
  background-size: 2.2rem auto;
}

.main-area--low h4:not([class]),

.main-area--low h5:not([class]) {

  margin: var(--s5) auto var(--s3);

  padding-left: var(--s2);

  color: #00995c;

  font-size: 2rem;

  font-weight: 700;

  position: relative;

}

.main-area--low h4:not([class]):before,

.main-area--low h5:not([class]):before {

  content: "";

  width: 0.8rem;

  height: 100%;

  background: #434343;

  position: absolute;

  left: 0;

  top: 0;

}

.main-area--low h4:not([class]) a,

.main-area--low h5:not([class]) a {

  background: url(img/arrow-02-black-right.svg) no-repeat right center;

  background-size: 2.2rem auto;

  color: #00995c;

}

.main-area--low h6:not([class]) {

  margin: var(--s5) auto var(--s3);

  font-size: 1.7rem;

}

.main-area--low .icon-title {

  margin: var(--s5) 0 var(--s5) var(--s4);

  min-height: 7rem;

  padding: 1.2rem var(--s4) 1.2rem 5rem;

  background: #f6f6f6;

  font-size: 2.4rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  position: relative;

}

.main-area--low .icon-title::before {

  content: "CHECK";

  width: 6rem;

  height: 6rem;

  border-radius: 50%;

  background: #f0795b;

  font-family: "Poppins", sans-serif;

  color: #fff;

  font-size: 1.3rem;

  font-weight: 200;

  text-align: center;

  left: calc(var(--s4) * -1);

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  justify-content: center;

  align-items: center;

  position: absolute;

}



/*---------------------------------------------



    lower parts



*/

.lower-summary {

  margin: 18rem 0 10rem;

  padding: var(--s6) var(--s9);

  position: relative;

  z-index: 0;

}

.lower-summary:before {

  content: "";

  width: calc(100% + 5rem + var(--s3));

  height: 100%;

  background: #7d775d;

  position: absolute;

  left: 0;

  top: 0;

  z-index: -1;

}

.lower-summary__tag {

  margin-bottom: var(--s2);

  font-size: 2rem;

  font-weight: 700;

  color: #fff;

  position: relative;

}

.lower-summary__tag:before {

  content: "";

  width: var(--s7);

  height: 1px;

  background: #fff;

  position: absolute;

  left: calc(var(--s9) * -1);

  top: 50%;

}

.lower-summary__title {

  margin-bottom: var(--s4);

  font-size: 2.4rem;

  font-weight: 700;

  color: #fff;

}

.lower-summary p {

  color: #fff;

}

.lower-summary .btn-web {

  margin: var(--s4) auto 0;

}



.box-qa {

  margin-top: var(--s8);

  margin-bottom: var(--8);

}

.box-qa__title {

  margin-top: var(--s6);

  margin-bottom: var(--s4);

  padding-left: var(--s7);

  font-size: 2.4rem;

  font-weight: 700;

  position: relative;

}

.box-qa__title:before {

  content: "Q.";

  font-family: "Poppins", sans-serif;

  font-size: 3.5rem;

  font-weight: 300;

  line-height: 1;

  color: #434343;

  position: absolute;

  left: 0;

  top: 0;

}

.box-qa__body {

  padding-left: var(--s7);

}

.box-qa__body .l-column--row-reverse {

  gap: var(--s9);

}

.box-qa__answer {

  margin-bottom: var(--s1);

  font-size: 1.8rem;

  font-weight: 700;

  color: #f0795b;

  position: relative;

}

.box-qa__answer:before {

  content: "A.";

  font-family: "Poppins", sans-serif;

  font-size: 3.5rem;

  font-weight: 300;

  line-height: 1;

  color: #f0795b;

  position: absolute;

  left: -5rem;

  top: 0;

}



.box-comment {

  margin: var(--s5) auto;

  padding: var(--s5) var(--s7);

  border-radius: var(--s5);

  background: #ebf2f8;

  display: flex;

  gap: var(--s2) var(--s5);

}

.box-comment--reverse {

  flex-direction: row-reverse;

}

.box-comment__pic {

  width: 10rem;

}

.box-comment__pic img {

  width: 10rem;

  height: 10rem;

  border-radius: 50%;

}

.box-comment__main {

  flex: 1;

}

.box-comment__name {

  font-size: 1.8rem;

  text-align: center;

}



.box-interview {

  padding: var(--s4) var(--s5);

  /* border-top: solid 1px #000; */

  /* border-bottom: solid 1px #000; */

}

.box-interview__title {

  margin-bottom: var(--s3);

  font-size: 1.75rem;

  font-weight: 700;

  color: #ea6544;

}

.box-interview__name {

  margin-bottom: var(--s3);

  font-size: 2rem;

  font-weight: 700;

  color:#fff

}

.box-interview .l-cluster {

  margin-bottom: var(--s3);

}



.tag01 {

  padding: 0.6rem 1rem;

  background: #e1e2e2;

  font-size: 1.4rem;

  font-weight: 700;

}



/*

---------------------------------------------



    animation



*/

@keyframes tabAnimation {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

@keyframes bg {

  0% {

    transform: scaleY(1);

  }

  100% {

    transform: scaleY(0);

  }

}

/*

---------------------------------------------



    inview



*/

.bgFlow {

  opacity: 0;

  transition: opacity 0.3s ease;

}

.bgFlow:before {

  content: "";

  background: #fff;

  position: absolute;

  top: 0;

  left: -1px;

  width: calc(100% + 2px);

  height: 100%;

  box-sizing: border-box;

  transform-origin: left bottom;

}



.bgFlow.animated {

  opacity: 1;

}

.bgFlow.animated:before {

  animation: bg 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;

}



.lineFlow {

  background-size: 0% 100%;

  background-repeat: no-repeat;

  transition: background-size 1.5s;

}



.lineFlow.animated {

  background-size: 100% 100%;

}



/*

.fadeIn::after, .fadeIn::before {

  opacity: 0;

  transition: opacity 1.2s ease;

}

*/



/*

.fadeIn.animated::after, .fadeIn.animated::before {

  opacity: 1;

  transition-delay: 0.4s;

}

*/



/*

---------------------------------------------



    TOP common



*/

.common-title {

  margin-bottom: var(--s5);

  font-size: 4.4rem;

  font-weight: 700;

  position: relative;

}

.common-title:before {

  content: "";

  width: 2.4rem;

  height: 4rem;

  background: #7d775d;

  position: absolute;

  left: -7.4rem;

  top: 0;

}

.common-title span.sm {

  display: block;

  font-size: 2.2rem;

}

.common-title span.cl {

  color: #f0795b;

}

.common-title span.fkds {

  width: fit-content;

  display: block;

  margin-bottom: 1rem;

  padding-bottom: var(--s-2);

  border-bottom: solid 1px #7d775d;

  font-size: 2.2rem;

  font-weight: 700;

  color: #7d775d;

  position: relative;

}

.common-title span.fkds:before {

  content: "";

  width: 2.3rem;

  height: 1rem;

  background: url(img/arrow-line-gold-down.svg) no-repeat center top/contain;

  position: absolute;

  left: 50%;

  top: calc(100% - 1px);

  transform: translateX(-50%);

}

.common-title a {

  padding-right: 5rem;

  background: url(img/arrow-02-white-right.svg) no-repeat center right/3rem auto;

  text-decoration: none;

}



.common-lead {

  max-width: 50rem;

}



.sec-inner {

  padding: 0 5rem;

}



.common-sec {

  padding-top: 10rem;

}

.common-sec:last-child {

  padding-bottom: 10rem;

}



.common-catch {

  width: fit-content;

  margin: var(--s5) 0;

  padding: var(--s2) var(--s4) var(--s2) var(--s11);

  background: #434343;

  font-size: 2.2rem;

  font-weight: 700;

  color: #fff;

  position: relative;

}

.common-catch:before {

  content: "";

  width: var(--s8);

  height: 1px;

  background: #f0795b;

  position: absolute;

  left: 0;

  top: 50%;

}

.common-catch span.st {

  font-size: 2.8rem;

  color: #f0795b;

}



/*

---------------------------------------------



    TOP section



*/

section {

  padding: 0 5rem;

}



.sec-sponsored {

  margin-bottom: 10rem;

  padding: 0 0 6rem;

  position: relative;

  z-index: 0;

}

.sec-sponsored:before {

  content: "";

  width: calc(100% + var(--s6));

  height: 100%;

  background: #f6f6f3;

  border-bottom: solid 1px #959595;

  box-sizing: border-box;

  position: absolute;

  left: calc(-1 * var(--s3));

  top: 0;

  z-index: -1;

}

.sec-sponsored:after {

  content: "";

  width: calc(100% + var(--s6));

  height: 10rem;

  background: #d5d5d5;

  box-sizing: border-box;

  position: absolute;

  left: calc(-1 * var(--s3));

  top: 100%;

  z-index: -1;
background: url(img/bg.jpg) repeat left top / 20rem auto;
}

.sec-sponsored__column {

  gap: 0;

  position: relative;

}

.sec-sponsored__column:before {

  content: "";

  width: 2.4rem;

  height: 100%;

  background: #7d775d;

  position: absolute;

  right: 100%;

  top: 0;

}

.sec-sponsored__header {

  padding: var(--s3) 5rem;

  background: #434343;

}

.sec-sponsored__logo {

  border-top: solid 1px #000;

  border-bottom: solid 1px #000;

  background: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

}

.sec-sponsored__logo img {

  width: 28rem;

}

.sec-sponsored__title {

  margin-bottom: 2.2rem;

  font-size: 3rem;

  font-weight: 700;

  color: #fff;

}

.sec-sponsored__tag {

  margin-bottom: var(--s-2);

  font-family: "Poppins", sans-serif;

  font-size: 1.6rem;

  color: #f0795b;

}

.sec-sponsored__name {

  display: flex;

  align-items: center;

  font-size: 2rem;

  font-weight: 700;

  color: #fff;

}

.sec-sponsored__name span.sm {

  margin-right: var(--s2);

  padding-right: var(--s2);

  border-right: solid 1px #fff;

  font-size: 1.4rem;

}

.sec-sponsored__body {

  margin: 0;

  padding: var(--s4) 5rem var(--s3);

}

.sec-sponsored .btn-column {

  margin: 0 auto;

}



.sec-shift {

  padding: 0;

}

.sec-shift__upper {

  position: relative;

  z-index: 0;

  padding: 8rem 5rem 5rem;

  padding-bottom: var(--s1);

}

.sec-shift__upper:before {

  content: "";

  width: calc(100% + var(--s6));

  height: 100%;

  background: #fff;

  border-top: solid 1px #959595;

  position: absolute;

  left: calc(-1 * var(--s3));

  top: 0;

  z-index: -1;

}

.sec-shift__under {

  padding-bottom: var(--s9);

  position: relative;

  z-index: 0;

}

.sec-shift__under:before {

  content: "";

  width: 100vw;

  height: 100%;

  background: rgba(116, 116, 116, 0.7);

  position: absolute;

  left: 50%;

  top: 0;

  transform: translateX(-50%);

  z-index: -2;

}

.sec-shift__under:after {

  content: "";

  width: calc(100% + var(--s6));

  height: 100%;

  background: linear-gradient(to bottom, #434343 5%, #959595 100%);

  position: absolute;

  left: calc(-1 * var(--s3));

  top: 0;

  z-index: -1;

}

.sec-shift__title {

  margin-bottom: var(--s5);

  font-size: 5rem;

  font-weight: 700;

  letter-spacing: 0.1rem;

  position: relative;

}

.sec-shift__title span.sm {margin-bottom: 1.6rem;display: block;font-size: 2.2rem;letter-spacing: 0;}

.sec-shift__title span.bg {

  padding: 0 1rem;

  border: solid 1px #fff;

  background: #434343;

  color: #f0795b;

}

.sec-shift__title span.bg2 {

  margin-right: var(--s1);

  padding: 0 1rem;

  border: solid 1px #fff;

  background: #434343;

  color: #fff;

}

.sec-shift__pic {
    width: 37rem;
    position: absolute;
    right: 5rem;
    top: 8.5rem;
}

.sec-shift__subtitle {margin: var(--s8) -5rem var(--s5);padding: var(--s1);background: #fce4de;border-top: solid 1px #959595;border-bottom: solid 1px #959595;font-size: 1.8rem;font-weight: 700;text-align: center;position: relative;}

.sec-shift__subtitle:before {content: "";width: 2rem;height: 1.6rem;background: url(img/arrow-fkds-gray.png) no-repeat center top -3.5px/contain;position: absolute;left: 50%;top: 100%;transform: translateX(-50%);}

.sec-shift__footer {

  margin: 0 auto;

  padding: 10rem 5rem;

  font-size: 2.2rem;

  font-weight: 700;

  text-align: center;

  position: relative;

  z-index: 0;

}

.sec-shift__footer:before {

  content: "";

  width: calc(100% + var(--s6));

  height: 100%;

  background: #fff url(img/arrow-down-grade.png) no-repeat center top/24rem auto;

  position: absolute;

  left: calc(-1 * var(--s3));

  top: 0;

  z-index: -1;

}



.card-job-wrap {

  margin-bottom: var(--s8);

  padding: 0 var(--s2);

}

.card-job__catch {padding-bottom: var(--s2);border-bottom: solid 1px #000;text-align: center;font-size: 2.2rem;font-weight: 700;}

.card-job__catch--02 {

  padding: var(--s1);

  border-bottom: solid 1px #fff;

  background: #7d775d;

  color: #fff;

}

.card-job__column {

  display: flex;

  margin-bottom: var(--s2);

}

.card-job__info {

  flex: 1;

}

.card-job__info--02 ul:not([class]) {

  color: #fff;

}

.card-job__info--02 ul:not([class]) li:before {

  background: #fff;

}

.card-job__label {

  padding: var(--s1) var(--s3) var(--s1);

  background: #7d775d;

  font-size: 1.8rem;

  font-weight: 700;

  color: #fff;

}

.card-job__label--02 {

  background: #e1e2e2;

  color: #000;

}

.card-job__pic {

  width: 20rem;

}

.card-job ul:not([class]) {

  margin: var(--s2) 0 var(--s2) var(--s4);

}

.card-job__text {

  padding: 0 var(--s3) var(--s3) var(--s3);

}

.card-job--02 {

  border: solid 1px #959595;

}

.card-job--02 .card-job__column {

  background: #7d775d;

}



.area-sticky__btns {

  width: 100%;

  margin: 0 auto;

  padding: var(--s2) 0;

  background: rgba(255, 255, 255, 0.9);

  position: sticky;

  top: 0;

  z-index: 5;

}

.area-sticky__btns:before {

  content: "";

  width: calc(100% + var(--s6));

  height: 100%;

  border-left: solid 2.4rem #fff;

  border-right: solid 2.4rem #fff;

  box-sizing: border-box;

  position: absolute;

  left: calc(-1 * var(--s3));

  top: 0;

  z-index: -1;

}



.title-category {margin-bottom: var(--s6);padding: 3.8rem 0 0 11.5rem;font-size: 4.0rem;font-weight: 700;color: #fff;position: relative;z-index: 0;}

.title-category:before {content: "01";font-family: "Poppins", sans-serif;font-size: 8rem;font-weight: 400;opacity: 0.4;position: absolute;left: var(--s2);top: 0;z-index: -1;opacity: 0.25;}

.title-category--02:before {content: "02";}

.title-category--03:before {

  content: "03";

}

.title-category--04:before {

  content: "04";

}



.title-sub {

  font-size: 0.7em;

  margin-bottom: 1px;

}



.page-link-list {

  margin: 0 auto;

  display: flex;

  gap: var(--s2);

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

}



.page-link-item {

  position: relative;

  width: 22rem;

  height: 5.9rem;

  cursor: pointer;

  flex-shrink: 0;

  border-radius: 8rem;

  background: #ffffff;

  border: 1px solid #aaabab;

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0.7rem 1.719rem;

  z-index: 0;

}

.page-link-item__number {

  position: absolute;

 top: 0rem;
    left: 1rem;

  font-family: "Poppins", sans-serif;

  font-size: 3rem;

  font-weight: 400;

  color: #e1e2e2;

  line-height: 1;

  z-index: -1;

}

.page-link-item__label {

  font-size: 2.4rem;

  font-weight: 700;

  color: #787878;

  white-space: nowrap;

  line-height: 1.5;

}

.page-link-item--active {

  background: #7d775d;

  border: none;

}

.page-link-item--active .page-link-item__number {

  color: rgba(255, 255, 255, 0.2);

}

.page-link-item--active .page-link-item__label {

  /* border-bottom: solid 0.3rem #f0795b; */

  color: #ffffff;

}

.page-link-item:not(.page-link-item--active):hover {

  background: #f5f5f5;

}



.box-compare__prologe {

  padding: 0 0 9.2rem;

  position: relative;

}

.box-compare__prologe--before {

  /* border: solid 0.5rem #fff; */

  background: #dedfe3 url(img/bg-illust-before01.png) no-repeat 26rem bottom/auto 74%;

}



.box-compare__title {

  display: inline-block;

  /* background: #ffffffb3; */

  width: 70%;

  font-size: 2.5rem;

  font-weight: 700;

  line-height: 1.4;

  padding: 0.3rem 1rem 0.3rem 4rem

}

.box-compare__prologe--before:before {

  content: "BEFORE";

  font-family: "Poppins", sans-serif;

  font-size: 2rem;

  font-weight: 300;

  color: #fff;

  position: absolute;

  left: 0;

  top: -2.8rem;

}

.box-compare__prologe--after {

  /* border: solid 0.5rem #ffffff; */

  background: #fff url(img/bg-illust-after01.png) no-repeat right  bottom/auto 70%;

}

.box-compare__prologe--after:before {

  content: "AFTER";

  font-family: "Poppins", sans-serif;

  font-size: 3rem;

  font-weight: 300;

  color: #f0795b;

  position: absolute;

  left: 0;

  top: -3.9rem;

}

.box-compare__prologe--after:after {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 3.4rem 0 3.4rem 3.4rem;

  border-color: transparent transparent transparent #f0795b;

  position: absolute;

  left: -2.1rem;

  top: 50%;

  transform: translateY(-50%);

}

.box-compare__prologe--before02 {

  /* border: solid 0.5rem #fff; */

  background: #dedfe3 url(img/bg-illust-before02.png) no-repeat 29.5rem bottom / auto 60%;

}

.box-compare__prologe--before02:before {

  content: "BEFORE";

  font-family: "Poppins", sans-serif;

  font-size: 2rem;

  font-weight: 300;

  color: #fff;

  position: absolute;

  left: 0;

  top: -2.8rem;

}

.box-compare__prologe--after02 {

  /* border: solid 0.5rem #f0795b; */

  background: #fff url(img/bg-illust-after02.png) no-repeat 27rem bottom/auto 68%;

}

.box-compare__prologe--after02:before {

  content: "AFTER";

  font-family: "Poppins", sans-serif;

  font-size: 3rem;

  font-weight: 300;

  color: #f0795b;

  position: absolute;

  left: 0;

  top: -3.9rem;

}

.box-compare__prologe--after02:after {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 3.4rem 0 3.4rem 3.4rem;

  border-color: transparent transparent transparent #f0795b;

  position: absolute;

  left: -2.1rem;

  top: 50%;

  transform: translateY(-50%);

}

.box-compare__prologe--before03 {
  background: #dedfe3 url(img/bg-illust-before03.png) no-repeat 24rem bottom/auto 66%;
}

.box-compare__prologe--before03:before {

  content: "BEFORE";

  font-family: "Poppins", sans-serif;

  font-size: 2rem;

  font-weight: 300;

  color: #fff;

  position: absolute;

  left: 0;

  top: -2.8rem;

}

.box-compare__prologe--after03 {

  /* border: solid 0.5rem #f0795b; */

  background: #fff url(img/bg-illust-after03.png) no-repeat right bottom/auto 66%;

}

.box-compare__prologe--after03:before {

  content: "AFTER";

  font-family: "Poppins", sans-serif;

  font-size: 3rem;

  font-weight: 300;

  color: #f0795b;

  position: absolute;

  left: 0;

  top: -3.9rem;

}

.box-compare__prologe--after03:after {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 3.4rem 0 3.4rem 3.4rem;

  border-color: transparent transparent transparent #f0795b;

  position: absolute;

  left: -2.1rem;

  top: 50%;

  transform: translateY(-50%);

}

.box-compare__prologe--before04 {

  /* border: solid 0.5rem #fff; */

  background: #dedfe3 url(img/bg-illust-before04.png) no-repeat right bottom/auto 62%;

}

.box-compare__prologe--before04:before {

  content: "BEFORE";

  font-family: "Poppins", sans-serif;

  font-size: 2rem;

  font-weight: 300;

  color: #fff;

  position: absolute;

  left: 0;

  top: -2.8rem;

}

.box-compare__prologe--after04 {/* border: solid 0.5rem #f0795b; */background: #fff url(img/bg-illust-after04.png) no-repeat right bottom/auto 67%;}

.box-compare__prologe--after04:before {

  content: "AFTER";

  font-family: "Poppins", sans-serif;

  font-size: 3rem;

  font-weight: 300;

  color: #f0795b;

  position: absolute;

  left: 0;

  top: -3.9rem;

}

.box-compare__prologe--after04:after {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 3.4rem 0 3.4rem 3.4rem;

  border-color: transparent transparent transparent #f0795b;

  position: absolute;

  left: -2.1rem;

  top: 50%;

  transform: translateY(-50%);

}

.box-compare__tag {
  width: fit-content;
  margin-bottom: var(--s3);
  padding: var(--s-2) var(--s2);
  background: #fff;
  font-size: 1.6rem;
  font-weight: 700;
}

.box-compare__tag--after {
  background: rgba(240, 121, 91, 0.2);
}

.box-compare__title {display: inline-block;/* background: #ffffffb3; */width: 400px;font-size: 2.1rem;font-weight: 700;line-height: 1.4;padding: 0.3rem 1rem 0.3rem 4rem}

.box-compare__content {

  padding: var(--s5) 5rem;

  border-bottom: none;

}

.box-compare__content .name {

  display: block;

  margin-top: var(--s-2);

  font-weight: 700;

  text-align: center;

  color: var(--wp--preset--color--black);

}

.box-compare__content--after {

  /* border: solid 0.5rem #f0795b; */

  border-top: none;

  background: #fff;

}

.box-compare__content--after .box-compare__catch {

  color: #000;

  border-color: #f0795b;

}

.box-compare__content--after .box-compare__main {

  color: #000;

}

.box-compare__content--after .name {

  color: #000;

}

.box-compare__catch {

  margin-bottom: var(--s2);

  padding-bottom: var(--s-2);

  border-bottom: solid 1px #fff;

  font-size: 2rem;

  font-weight: 700;

  color: #000;

}

.box-compare__text {

  display: flex;

  gap: var(--s3);

}

.box-compare__pic {

  width: 10rem;

}

.box-compare__main {

  flex: 1;

  color: #000;

}

.box-compare .inner-body + .inner-body {

  margin-top: var(--s6);

}



.box-pickup {

  max-width: 90rem;

  margin: var(--s5) auto var(--s6);

  padding: 0 var(--s7) var(--s3);

  position: relative;

  z-index: 0;

}

.box-pickup:before {

  content: "";

  width: 100%;

  height: calc(100% - var(--s2));

  background: #fff;

  box-sizing: border-box;

  position: absolute;

  left: 0;

  bottom: 0;

  z-index: -1;

}

.box-pickup__tag {

  width: fit-content;

  margin-bottom: var(--s3);

  padding: var(--s-2) var(--s2);

  border: solid 1px #fff;

  background: #f0795b;

  font-size: 2rem;

  font-weight: 700;

  color: #fff;

}

.box-pickup__title {

  margin-bottom: var(--s2);

  font-size: 2.4rem;

  font-weight: 700;

}

.box-pickup__body {

  flex-direction: row-reverse;

  align-items: flex-start;

}

.box-pickup__content {

  padding-right: var(--s5);

  border-right: solid 1px #000;

  position: relative;

}

.box-pickup__content:before {

  content: "";

  width: 1rem;

  height: 2rem;

  background: url(img/arrow-line-gray-right.svg) no-repeat left center/contain;

  position: absolute;

  left: calc(100% - 1px);

  top: 50%;

  transform: translateY(-50%);

}

.box-pickup__name {

  text-align: center;

  font-weight: 700;

}

.box-pickup__more {

  margin-top: var(--s6);

  margin-bottom: calc(var(--s10) * -1);

  display: flex;

  align-items: flex-end;

  gap: 2.2rem;

}

.box-pickup__more .more-pic {

  width: 10rem;

}

.box-pickup__more .more-text {

  width: fit-content;

  padding: 2rem 4rem 2rem 4rem;

  border: solid 1px #434343;

  border-radius: 3rem;

  background: #fff;

  position: relative;

}

.box-pickup__more .more-text:before {content: "";width: 15rem;height: 8rem;background: url(img/icon-morereal.png) no-repeat center/contain;position: absolute;left: -5rem;top: calc(var(--s9) * -0.85);z-index: -1;}

.box-pickup__more .more-text:after {

  content: "";

  width: 1.2rem;

  height: 1.4rem;

  background: url(img/arrow-line-gray-right.svg) no-repeat left center/100% 100%;

  position: absolute;

  left: calc(1.1rem * -1);

  top: 50%;

  transform: translateY(-50%) scale(-1, 1);

}



.sec-summary {

  margin-bottom: 10rem;

  padding: 0 0 6rem;

  position: relative;

  z-index: 0;

}

.sec-summary:before {

  content: "";

  width: calc(100% + var(--s6));

  height: 100%;

  background: #ffffff;

  border-bottom: solid 1px #959595;

  box-sizing: border-box;

  position: absolute;

  left: calc(-1 * var(--s3));

  top: 0;

  z-index: -1;

}

.sec-summary:after {

  content: "";

  width: calc(100% + var(--s6));

  height: 10rem;

  background: #d5d5d5;

  box-sizing: border-box;

  position: absolute;

  left: calc(-1 * var(--s3));

  top: 100%;

  z-index: -1;
background: url(img/bg.jpg) repeat left top / 20rem auto;
}

.sec-summary__title {

  padding: var(--s3) 5rem var(--s8);

  background: #434343;

  font-size: 3.2rem;

  font-weight: 700;

  color: #fff;

  position: relative;

}

.sec-summary__title:before {

  content: "";

  width: 2.4rem;

  height: 100%;

  background: #7d775d;

  position: absolute;

  right: 100%;

  top: 0;

}


.sec-summary__column {

  margin-top: var(--s3);

  padding: 0 5rem;

}

.sec-summary .logo-hokoku {

  max-width: 44rem;

  padding: var(--s4) var(--s5);

}

.sec-summary .site-capture {

  margin: -6rem auto var(--s1);

  position: relative;

}

.sec-summary .btn-web,

.sec-summary .btn-internal {

  margin-bottom: 0;

}



.sec-reason {

  margin-bottom: 10rem;

  padding: 0 0 5rem;

  border-bottom: solid 1px #959595;

}

.sec-reason__upper {

  padding: var(--s7) 5rem;

  position: relative;

  z-index: 0;

}

.sec-reason__upper:before {

  content: "";

  width: calc(100% + var(--s6));

  height: 100%;

  background: linear-gradient(to bottom, #a8a183 0%, #7d775d 100%);

  border-top: solid 1px #959595;

  box-sizing: border-box;

  position: absolute;

  left: calc(-1 * var(--s3));

  top: 0;

  z-index: -1;

}

.sec-reason__title {

  margin-bottom: 6.9rem;

  font-size: 4.4rem;

  font-weight: 700;

  line-height: 1.7;

  color: #fff;

  position: relative;

}

.sec-reason__title:before {

  content: "";

  width: 2.4rem;

  height: 4rem;

  background: #f0795b;

  position: absolute;

  left: -7.4rem;

  top: 0;

}

.sec-reason__title:after {

  content: "";

  width: 50%;

  height: 18.7rem;

  background: url(img/sec03-pic-1.jpg) no-repeat center/cover;

  position: absolute;

  right: 0;

  top: 0;

}

.sec-reason__title span.sm {

  margin-bottom: -1.2rem;

  font-size: 2.2rem;

  display: block;

}

.sec-reason__title span.sm2 {

  margin: 0 var(--s1);

  font-size: 2.8rem;

}

.sec-reason__title span.line {

  border-bottom: solid 0.2rem #fff;

  font-size: 2.8rem;

}

.sec-reason__summary {

  max-width: 84rem;

  margin: var(--s5) auto;

  position: relative;

}

.sec-reason__subtitle {

  margin: var(--s2) 0;

  font-size: 2.2rem;

  font-weight: 700;

  position: relative;

  z-index: 0;

}

.sec-reason__subtitle:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #cbcbcb;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
}

.sec-reason__subtitle span {

  padding-right: var(--s2);

  background: #fff;

}



.box-reason {

  padding: 0 5rem 6rem var(--s5);

  grid-row: span 3;

  grid-gap: var(--s3);

  position: relative;

}

.box-reason:before {

  content: "";

  width: 100%;

  height: calc(100% - var(--s7));

  background: #fff;

  border: solid 1px #434343;

  position: absolute;

  left: 0;

  bottom: 0;

  z-index: -1;

}

.box-reason__icon {

  width: 12.6rem;

  height: 12.6rem;

  margin: 0 auto;

  padding: var(--s9) 0 0;

  border-radius: 50%;

  background: #434343 url(img/icon-bg1.png) no-repeat center top var(--s3)/7rem auto;

  color: #fff;

  text-align: center;

  font-size: 1.8rem;

  font-weight: 700;

}

.box-reason__icon2 {
  width: 12.6rem;
  height: 12.6rem;
  margin: 0 auto;
  padding: var(--s9) 0 0;
  border-radius: 50%;
  background: #434343 url(img/icon-bg2.png) no-repeat center top var(--s3)/7rem auto;
  color: #fff;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}

.box-reason__title {

  padding: 2rem 0rem 2rem 0 ;

  font-size: 2.2rem;

  font-weight: 700;

  text-align: center;

  color: #f0795b;

}



.title-between {

  padding: 9rem 5rem 0;

  font-size: 2.2rem;

  font-weight: 700;

  text-align: center;

  position: relative;

}

.title-between:before {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 50px 120px 0 120px;

  border-color: #7d775d transparent transparent transparent;

  position: absolute;

  left: 50%;

  top: 0;

  transform: translateX(-50%);

}



.title-vertical {

  width: 100%;

  border-right: solid 1px #000;

  border-left: solid 1px #000;

  font-family: "Noto Sans JP vertical";

  font-size: 3.6rem;

  font-weight: 700;

  line-height: 1.5;

  letter-spacing: 0.4rem;

  writing-mode: vertical-rl;

  display: flex;

  align-items: center;

  position: relative;

}

.title-vertical span.cl {

  color: #f0795b;

}

.box-message {
max-width: 90rem;
margin: var(--s5) auto 0;
padding: 4rem var(--s5) var(--s4);
background: #f8f1ef;
border: solid 0.3rem #f0795b;
}

.box-message__tag {

  font-family: "Poppins", sans-serif;

  font-size: 2rem;

  font-weight: 300;
  padding: var(--s1) 0 var(--s1);

  color: #f0795b;

}


.box-message__title {

  margin-bottom: var(--s1);

  font-weight: 700;

  color: #f0795b;

}

.box-message__title span.bg {

  margin-right: var(--s2);

  padding: 0.2rem var(--s1);

  border-radius: var(--s-2);

  background: #fff;

}

.box-message__catch {margin-top: var(--s3);margin-bottom: var(--s4);font-size: 2.4rem;font-weight: 700;color: #2c3338;}

.box-message__catch02 {margin-bottom: var(--s4);font-size: 2.4rem;font-weight: 700;color: #2c3338;}

.box-message__name {

  margin-bottom: var(--s2);

  font-size: 2.4rem;

  font-weight: 700;

  color: #ea6544;

}

.box-message__text {

  margin-top: var(--s2);

  color: #2c3338;

}

.box-message--low {

  margin: var(--s8) auto;

}



.box-interview {

  max-width: 90rem;

  margin: var(--s6) 0 var(--s6) var(--s6);

  padding: 2rem var(--s5) var(--s4);

  background: #7d775d;

}

.box-interview__tag {

  font-family: "Poppins", sans-serif;

  font-size: 2rem;

  font-weight: 300;

  color: #dbdcdc;

}

.box-interview__title {

  margin-bottom: var(--s1);

  font-weight: 700;

  color: #fff;

}

.box-interview__title span.bg {

  margin-right: var(--s2);

  padding: 0.2rem var(--s1);

  border-radius: var(--s-2);

  background: #8d8871;

}

.box-interview__catch {

  margin-bottom: var(--s2);

  font-size: 2.4rem;

  font-weight: 700;

  color: #fff;

}

.box-interview__text {

  color: #fff;

}

.box-interview--low {

  margin: var(--s8) auto;

}

.box-interview--low .btn-internal,

.box-interview--low .btn-web{ 

margin:var(--s2);

}



.sec-job {

  padding: 0 0 var(--s4);

  position: relative;

}

.sec-job:after {

  content: "";

  width: calc(100% + var(--s6));

  height: 1px;

  border-bottom: solid 1px #959595;

  position: absolute;

  left: calc(-1 * var(--s3));

  bottom: 0;

}

.sec-job__subtitle {

  margin: var(--s12) auto var(--s8);

  font-size: 3.2rem;

  font-weight: 700;

  text-align: center;

  position: relative;

}

.sec-job__subtitle span.sm {

  display: block;

  margin-bottom: 1.2rem;

  font-size: 2rem;

}

.sec-job__subtitle span.cl {

  color: #f0795b;

}

.sec-job__subtitle span.bg {

  display: inline-block;

  padding: var(--s1) var(--s3);

  background: #434343;

  color: #fff;

}

.sec-job__subtitle span.bg:before {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 1.6rem 1.8rem 0 1.8rem;

  border-color: #434343 transparent transparent transparent;

  position: absolute;

  left: 50%;

  top: 100%;

  transform: translateX(-50%);

}



.splide {

  margin: var(--s5) auto;

}

.splide-wrapper {

  margin-top: var(--s7);

}



#thumbnail-carousel {

  max-width: 100rem;

  margin: 0 auto;

}



.splide__pagination {

  margin: 2rem auto;

  gap: 1rem;

  font-size: 0;

}



.splide__pagination__page {

  width: 1.1rem;

  height: 1.1rem;

  background: #d9d9d9;

  border-radius: 100%;

  cursor: pointer;

  transition: opacity 0.6s;

}

.splide__pagination__page.is-active {

  background-color: #7d775d;

  cursor: default;

}



.splide__arrows {

  width: calc(60rem + 4.2rem * 2);

  height: 7.2rem;

  margin: 0 auto;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 2;

}



.splide__arrow {width:3.6rem;height: 7.0rem;background: no-repeat center/contain;cursor: pointer;position: absolute;top: 0;transition: opacity 0.6s;}



.splide__arrow--prev {background-image: url("img/arrow-prev.svg");left: 0rem;}



.splide__arrow--next {background-image: url("img/arrow-next.svg");right: 0rem;}



@media (hover: hover) {

  .splide__arrow:hover {

    opacity: 0.7;

  }

}

.btn-slider {padding: var(--s2);border: solid 1px #c7c7c7;border-radius: 10rem;font-size: 2rem;font-weight: 700;text-align: center;transition: opacity 0.3s;color: #c7c7c7;}



.splide__slide.is-active .btn-slider {

  background: #7d775d;

  border-color: #7d775d;

  color: #fff;

}

.splide__slide.is-active .btn-slider span {

  /* border-bottom: solid 1px #f0795b; */

}



@media (hover: hover) {

  .btn-slider:hover {

    cursor: pointer;

    opacity: 0.6;

  }

}

.card-task {

  padding: var(--s3) var(--s6);

  border: solid 1px #959595;

  border-bottom-width: 0.6rem;

  background: #f6f6f6;

  position: relative;

  z-index: 0;

}

.card-task:before {

  content: "";

  width: 100%;

  height: 1px;

  background: #959595;

  position: absolute;

  left: 0;

  top: var(--s5);

  z-index: -1;

}

.card-task:after {

  content: "";

  width: 1px;

  height: 100%;

  background: #959595;

  position: absolute;

  left: var(--s2);

  top: 0;

  z-index: -1;

}

.card-task__title {

  width: fit-content;

  margin-bottom: var(--s2);

  padding: 0 var(--s1) 0 6.2rem;

  background: #f6f6f6;

  font-size: 2.4rem;

  font-weight: 700;

  position: relative;

}

.card-task__title:after {

  content: "";

  width: 4.8rem;

  height: 4.8rem;

  background: url(img/icon-task-1.png) no-repeat center/contain;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}

.card-task__title--02:after {

  content: "";

  width: 4.8rem;

  height: 4.8rem;

  background: url(img/icon-task-2.png) no-repeat center/contain;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}

.card-task__title--03:after {

  content: "";

  width: 4.8rem;

  height: 4.8rem;

  background: url(img/icon-task-3.png) no-repeat center/contain;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}

.card-task__title--04:after {

  content: "";

  width: 4.8rem;

  height: 4.8rem;

  background: url(img/icon-task-4.png) no-repeat center/contain;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}

.card-task__title--05:after {

  content: "";

  width: 4.8rem;

  height: 4.8rem;

  background: url(img/icon-task-5.png) no-repeat center/contain;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}

.card-task__subtitle {

  width: fit-content;

  margin: var(--s2) auto var(--s3);

  padding: var(--s1) var(--s3);

  background: #434343;

  font-weight: 700;

  color: #fff;

  position: relative;

}

.card-task__subtitle:before {

  content: "";

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 8px 8.5px 0 8.5px;

  border-color: #434343 transparent transparent transparent;

  position: absolute;

  left: 50%;

  top: 100%;

  transform: translateX(-50%);

}

.card-task__skill-list {
    display: flex;
    justify-content: center;
    gap: var(--s3);
  align-items: stretch;
}

.card-task__skill {
    max-width: 15.2rem;
    padding: var(--s1) var(--s2);
    background: #fff;
    border: solid 1px #7d775d;
    border-radius: var(--s1);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
  justify-content: center;
    color: #7d775d;
}




.sec-schedule {

  padding-top: 10rem;

  padding-bottom: 10rem;

}



.box-schedule {

  padding: var(--s4) var(--s5);

  background: #f2f2ef;

}

.box-schedule__title {

  margin-bottom: var(--s2);

  font-size: 2.2rem;

  font-weight: 700;

  color: #7d775d;

}

.box-schedule--lower {

  border-top: solid 1px #7d775d;

  border-bottom: solid 1px #7d775d;

}

.box-schedule--lower .box-schedule__content {

  padding: var(--s4) var(--s4) var(--s3);

  background: #fff;

}



.schedule-dl {

  display: flex;

  gap: 1.4rem;

  position: relative;

}

.schedule-dl:before {

  content: "";

  width: 1px;

  height: calc(100% + var(--s3));

  border-right: dashed 1px #7d775d;

  position: absolute;

  left: 0.5rem;

  top: 0.5em;

}

.schedule-dl:last-child:before {

  content: none;

}

.schedule-dl__term {

  width: 10rem;

  margin-bottom: var(--s2);

  padding-left: 3.8rem;

  font-size: 1.8rem;

  font-weight: 900;

  position: relative;

}

.schedule-dl__term:before {

  content: "";

  width: 1.4rem;

  height: 1.4rem;

  background: #7d775d;

  position: absolute;

  left: 0;

  top: 0.4em;

}

.schedule-dl__term span {

  color: #000;

}

.schedule-dl__term span:first-child {

  color: #ea6544;

}

.schedule-dl__catch {

  margin-bottom: var(--s1);

  font-size: 1.8rem;

  font-weight: 700;

}

.schedule-dl__desc {

  flex: 1;

}

.schedule-dl + .schedule-dl {

  margin-top: 2rem;

}



.sec-learning {
  padding: 0 0 var(--s8);
  position: relative;
  z-index: 0;
}

.sec-learning:before {

  content: "";

  width: 100%;

  height: calc(100% - var(--s3));

  border-top: solid 1px #959595;

  border-bottom: solid 1px #959595;

  background: #f6f6f6;

  position: absolute;

  left: 0;

  bottom: 0;

  z-index: -1;

}

.sec-learning__tag {

  width: fit-content;

  margin: 0 auto 0.4rem;

  padding: var(--s1) var(--s2);

  background: #7d775d;

  font-size: 2rem;

  font-weight: 700;

  text-align: center;

  color: #fff;

}

.sec-learning__title {

  margin-bottom: var(--s5);

  padding-bottom: 3rem;

  border-bottom: solid 1px #959595;

  font-size: 4.4rem;

  font-weight: 700;

  text-align: center;

}

.sec-learning__title span.sm {

  font-size: 2.2rem;

}



.card-revel {

  max-width: 80rem;

  margin: var(--s4) auto;

  background: #fff;

  gap: var(--s4);

}

.card-revel__bg {

  padding: var(--s4);

  background: #434343;

}

.card-revel__title {

  margin-bottom: var(--s2);

  font-size: 2rem;

  font-weight: 700;

  text-align: center;

  color: #fff;

}

.card-revel__pic {

  width: 7.2rem;

  margin: 0 auto;

}

.card-revel--last {

  margin-bottom: var(--s10);

}

.card-revel__text {

  padding: var(--s3) var(--s4);

  padding-left: 0;

}



.sec-number {

  padding-top: 10rem;

  padding-bottom: 12rem;

}

.sec-number__cont {

  padding: 0.5rem;

  background: #e1e2e2;

}

.sec-number__title {

  margin-bottom: var(--s6);

  font-size: 4.4rem;

  font-weight: 700;

  text-align: center;

}

.sec-number__title span.sm {

  display: block;

  margin-top: var(--s2);

  font-size: 2.2rem;

}

.sec-number__title span.bg {

  padding: 0.4rem 1.5rem;

  border: solid 1px #ffffff;

  background: #434343;

  color: #f0795b;

}

.sec-number__title span.bg:first-child {

  /* margin-right: 1px; */

}

.sec-number__title span.line {

  padding: 0.4rem 1.5rem;

  border: solid 1px #959595;

  border-left: none;

}

.sec-number--low {

  margin: 7rem auto;

  padding-top: 0;

  padding-bottom: 0;

}



.card-number {

  padding: var(--s3) var(--s2) var(--s2);

  background: #fff;

}

.card-number__title {

  margin-bottom: var(--s1);

  font-size: 2.4rem;

  font-weight: 700;

  text-align: center;

}



.sec-info {

  padding-bottom: 10rem;

  position: relative;

  z-index: 0;

}

.sec-info:before {

  content: "";

  width: 100%;

  height: calc(100% - var(--s8));

  background: url(img/bg.jpg) repeat center/20rem auto;

  opacity: 0.5;

  position: absolute;

  left: 0;

  bottom: 0;

  z-index: -1;

}

.sec-info__title {

  width: 60rem;

  margin-bottom: var(--s6);

  padding: 2.2rem var(--s6);

  background: url(img/bg-sec08-title.jpg) no-repeat center/cover;

  font-size: 4.4rem;

  font-weight: 700;

  color: #fff;

}

.sec-info__title span.sm {

  display: block;

  font-size: 2.4rem;

}

.sec-info__title span.cl {

  color: #f0795b;

}



.benefit-info {

  width: calc((100% - var(--s4)) / 2);

  padding: 0 0 var(--s3);

  display: flex;

  align-items: center;

  border-bottom: solid 1px #959595;

  position: relative;

}

.benefit-info:before {

  content: "";

  width: 16.2rem;

  height: 1px;

  background: #f0795b;

  position: absolute;

  left: 0;

  bottom: -1px;

}

.benefit-info .info-title {

  min-width: 21rem;

  font-weight: 700;

}

.benefit-info .info-txt {

  flex: 1;

}

.benefit-info:nth-child(2n+1):last-child {

  width: 100%;

}

.benefit-info-wrap {

  max-width: 90rem;

  margin: 0 auto var(--s7);

  display: flex;

  flex-wrap: wrap;

  gap: var(--s4);

}



.box-message-02 {

  max-width: 90rem;

  margin: 0 auto var(--s6);

  padding: var(--s4) var(--s5);

}

.box-message-02__title {

  width: fit-content;

  margin: 0 auto;

  padding: var(--s1) var(--s2);

  border: solid 1px #fff;

  background: #f0795b;

  font-size: 2rem;

  font-weight: 700;

  color: #fff;

  position: relative;

  z-index: 1;

}

.box-message-02__text {

  margin-top: -2rem;

  padding: var(--s5) var(--s6) var(--s4);

  background: #fff;

}



.btn-qa {

  border-top: solid 0.5rem #e1e2e2;

  border-left: solid 0.5rem #e1e2e2;

  border-bottom: solid 0.5rem #e1e2e2;

  padding: var(--s3) var(--s8);

  background: #fff url(img/arrow-02-white-right.svg) no-repeat right 2rem center/3rem auto;

  font-size: 1.6rem;

  font-weight: 700;

  text-decoration: none;

  display: flex;

  align-items: center;

  position: relative;

  transition: background-color 0.3s, color 0.3s;

}

.btn-qa:before {

  content: "Q.";

  font-family: "Poppins", sans-serif;

  font-size: 3.2rem;

  color: #f0795b;

  position: absolute;

  left: 2.1rem;

  top: 50%;

  transform: translateY(-50%);

}

.btn-qa:nth-of-type(3n) {

  border-right: solid 0.5rem #e1e2e2;

}

.btn-qa:nth-of-type(4) {

  border-top: none;

}

.btn-qa:nth-of-type(5) {

  border-top: none;

}

.btn-qa:nth-of-type(5):after {

  content: "";

  width: 0.5rem;

  height: calc(100% + 0.5rem);

  background: #e1e2e2;

  box-sizing: border-box;

  position: absolute;

  left: 100%;

  top: 0;

}



@media (hover: hover) {

  .btn-qa:hover {

    background-color: #434343;

    color: #fff;

  }

}

.card-license {

  border-top: solid 1px #000;

  border-left: solid 1px #000;

  display: block;

  text-decoration: none;

}

.card-license__pic {

  margin-bottom: var(--s3);

}

.card-license__title {

  padding: 0 var(--s5) 0 var(--s3);

  background: url(img/arrow-02-white-right.svg) no-repeat center right/3rem auto;

  font-size: 1.6rem;

  font-weight: 700;

}



@media (hover: hover) {

  .card-license:hover {

    opacity: 0.6;

  }

}

.card-recommend {

  display: block;

  padding: var(--s3) var(--s6) var(--s3) 11.5rem;

  background: #f6f6f6 url(img/arrow-02-white-right.svg) no-repeat center right var(--s3)/3rem auto;

  font-size: 1.6rem;

  font-weight: 700;

  text-decoration: none;

  position: relative;

  counter-increment: numb;

  transition: background-color 0.3s ease, color 0.3s ease;

}

.card-recommend:before {

  content: counter(numb, decimal-leading-zero);

  font-family: "Poppins", sans-serif;

  font-size: 4.8rem;

  font-weight: 400;

  color: #7d775d;

  position: absolute;

  left: var(--s3);

  top: 50%;

  transform: translateY(-50%);

}

.card-recommend-wrap {

  counter-reset: numb;

}



@media (hover: hover) {

  .card-recommend:hover {

    background-color: #434343;

    color: #fff;

  }

}


.lower-sp {
  margin: 8rem -5rem 6rem;
  background: #f6f6f3;
    border-bottom: solid 1px #959595;
}

.lower-sp  .sec-summary__title {
	padding: var(--s5) 5rem var(--s6);
}
.lower-sp .sec-summary__column {
    margin-top: var(--s4);
}
.lower-sp  .btn-column {
    margin: var(--s2) auto var(--s5);
}


@media screen and (max-width: 767px) {

  /*

  ---------------------------------------------



      sp base settings



  */

  :root {

    font-size: 2.6666666667vw;

  }



  body {

    font-size: 1.4rem;

  }



  .sp_br {

    display: inline;

  }



  .pc_br {

    display: none;

  }

}

@media screen and (max-width: 767px) {

  /*

  ---------------------------------------------



      sp layout center



  */

  .l-center {

    padding-right: var(--s2);

    padding-left: var(--s2);

    background-size: var(--s2) auto, var(--s2) auto;

    box-sizing: border-box;

    overflow: clip;

  }



  /*

  ---------------------------------------------



      sp layout stack



  */

  .l-stack-01 {

    gap: var(--s12);

  }



  .l-stack-02 {

    margin-top: var(--s5);

    gap: var(--s8);

  }



  /*

  ---------------------------------------------



      sp layout cluster



  */

  .l-cluster {

    gap: var(--s1);

  }



  /*

  ---------------------------------------------



      sp layout grid



  */

  .l-grid {

    grid-gap: var(--s3);

    grid-template-columns: 100%;

  }



  .l-grid-02 {

    grid-template-columns: 100%;

  }



  .l-grid-three,

.l-grid-three-02,

.l-grid-three-03 {

    grid-template-columns: 100%;

  }



  /*

  ---------------------------------------------



      sp layout sidebar



  */

  .l-sidebar {

    margin-top: var(--s4);

    flex-wrap: wrap;

  }

  .l-sidebar__side {

    width: 100%;

    height: auto;

    position: static;

  }

  .l-sidebar__main {
    width: 100%;
  }



  /*

  ---------------------------------------------



      sp layout column



  */

  .l-column {
    gap: var(--s1);
  }

  .l-column__side, .l-column__side02, .l-column__side04, .l-column__side05 {
    width: 100%;
  }

  .l-column__side03 {

    width: 6.5rem;

  }

  .l-column__side06 {
  padding: var(--s2) var(--s2) var(--s3);
  }

  .l-column__main {
    width: 100%;
  }



  /*

  ---------------------------------------------



      sp layout grid areas



  */

  .l-grid-areas {

    grid-template-areas: "catch" "img" "text";

    grid-template-columns: 100%;

    grid-template-rows: auto auto auto;

    grid-gap: var(--s2);

  }

  .l-grid-areas.box-study {

    grid-template-columns: 100%;

  }

  .l-grid-areas.box-study.l-grid-areas--row-reverse {

    grid-template-columns: 100%;

  }



  .l-grid-areas02 {

    grid-template-areas: "catch" "img" "text";

    grid-template-columns: 100%;

    grid-template-rows: auto auto auto;

  }



  /*

  ---------------------------------------------



      sp layout scroll



  */

  .l-scroll-x-sp {

    width: 100%;

    margin-bottom: var(--s5);

    padding-bottom: 0.6rem;

    overflow-x: auto;

    overflow-y: hidden;

  }

  .l-scroll-x-sp::-webkit-scrollbar {

    height: 0.6rem;

  }

  .l-scroll-x-sp::-webkit-scrollbar-track {

    border-radius: 0.3rem;

    background: #eee;

  }

  .l-scroll-x-sp::-webkit-scrollbar-thumb {

    border-radius: 0.3rem;

    background: #ddd;

  }

  .l-scroll-x-sp table {

    width: 70rem;

    margin-bottom: var(--s1);

  }

}

@media screen and (max-width: 767px) {

  /*

  ---------------------------------------------



      header area



  */

  .header-area {

    height: auto;

    min-height: 5.2rem;

    padding: var(--s1) var(--s7) var(--s1) var(--s1);

  }

  .header-area__left {

    gap: var(--s1);

  }

  .header-area__logo {

    height: 2.8rem;

  }



  /*

  ---------------------------------------------



      main visual



  */

  .mainvisual {

    margin-bottom: var(--s2);

  }

  .mainvisual .deco-title {

    width: 5.5rem;

    padding-top: var(--s1);

    padding-bottom: 0;

    right: var(--s3);

    left: auto;

    top: 6.6rem;

  }

  .mainvisual .deco-title__text {

    font-size: 1.5rem;

  }

  .mainvisual .mv-content {

    padding: var(--s4) var(--s2) var(--s3);

    background-image: none;

  }

  .mainvisual .mv-header__labels {

    margin-bottom: var(--s2);

  }

  .mainvisual .mv-header__label {

    font-size: 1.5rem;

  }

  .mainvisual .mv-header__connector {

    margin: 0 0.4rem;

    font-size: 1.4rem;

  }

  .mainvisual .mv-header__title {

    margin-bottom: var(--s2);

    font-size: 3.2rem;

  }

  .mainvisual .mv-header__title-suffix {

    font-size: 2.4rem;

  }

  .mainvisual .mv-sponsor {

    margin-bottom: var(--s3);

  }



  /*

  ---------------------------------------------



      main-area



  */

  .main-area--low {

    padding: var(--s1) var(--s2);

  }



  /*

  ---------------------------------------------



      toc



  */

  .toc-lower-wrap {

    margin: var(--s5) auto var(--s8);

    padding: var(--s2) var(--s3) var(--s4);

  }

  .toc-lower-wrap--relation {

    padding-bottom: 0;

  }

  .toc-lower-wrap:before {

    height: 3.5rem;

    top: -1.5rem;

  }

  .toc-lower-wrap ul li + li {

    margin-top: var(--s2);

  }

  .toc-lower-wrap ul li.chapter-h-two {

    font-size: 1.6rem;

  }

  .toc-lower-wrap ul li.chapter-h-two:before {

    top: 0.15em;

  }

  .toc-lower-wrap ul li.chapter-h-three {

    font-size: 1.4rem;

  }

  .toc-lower-wrap ul:not([class]) li {

    font-size: 1.5rem;

  }

  .toc-lower-wrap .more__btn {

    margin-top: var(--s1);

    margin-bottom: -6.5rem;

  }

  .toc-lower__body {

    padding-bottom: var(--s1);

  }

  .toc-lower__title {

    margin-bottom: var(--s2);

    font-size: 1.8rem;

  }

  .toc-lower__title span.en img {

    height: 2.5rem;

  }



  /*

  ---------------------------------------------



      list



  */

  .main-area .subList,

.main-area ul:not([class]) {

    margin: var(--s3) 0;

  }

  .main-area ol:not([class]) {

    margin: var(--s3) 0;

  }

  .main-area ol:not([class]) li:before {

    top: 0;

  }



  /*

  ---------------------------------------------



      sp btn



  */

  .btn-internal,

.btn-web {margin: var(--s3) auto;}
 .btn-internal a,
  .btn-web a {
    width: 94%;
    min-height: 6.8rem;
    padding: 1.2rem 4.2rem 1.2rem 3.2rem;
    font-size: 1.5rem;
    background-position: right 1.8rem center;
  }

  .btn-internal a span.st,

.btn-web a span.st {
    font-size: 1.6rem;
  }



  .btn-link {

    margin: var(--s1) auto;

  }

  .btn-link a {

    padding-right: 2.8rem;

    background-size: 2rem auto;

    font-size: 1.5rem;

  }



  .btn-tel {

    margin: var(--s3) auto;

    display: block;

    position: relative;

  }

  .btn-tel a {

    width: 94%;

    min-height: 6.8rem;

    margin: 0 auto;

    padding: var(--s1) var(--s6);

    background: #f0795b url("img/icon-tel.png") no-repeat center left var(--s3)/2.2rem auto;

    border-radius: 10rem;

    border: solid 0.2rem #000;

    box-shadow: 0.6rem 0.6rem 0 rgba(0, 0, 0, 0.25);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    color: #fff;

    line-height: 1.5;

    text-align: center;

    text-decoration: none;

  }



  .btn-column {margin-top: var(--s2);flex-direction: column;gap: var(--s0);}

  .btn-column .btn-web a,

.btn-column .btn-internal a,

.btn-column .btn-tel a {

    width: 94%;

  }



  .btn-share__link {

    padding-right: var(--s2);

    padding-left: var(--s2);

    font-size: 1.1rem;

  }

  .btn-share__link img {

    width: 3rem;

  }


  .sec-learning {
  padding: 0 0 var(--s2);
  position: relative;
  z-index: 0;
}



  /*

  ---------------------------------------------



      sp table



  */

  .sp-table thead,

.sp-table tbody,

.sp-table tr {

    display: block;

  }

  .sp-table th,

.sp-table td {

    width: 100%;

    display: block;

  }



  .table-label thead {

    display: none;

  }

  .table-label tbody th {

    background: #f7f7f5;

  }

  .table-label td {

    padding: 0;

    display: flex;

    position: relative;

  }

  .table-label td::before {

    content: attr(data-label);

    width: 7em;

    background: #f7f7f5;

    border-right: solid 1px #c7c7c7;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-weight: 700;

    text-align: center;

  }

  .table-label__cell {

    padding: var(--s1) var(--s2);

  }



  /*

  ---------------------------------------------



      sp caption



  */

  .caption {

    font-size: 0.9rem;

  }



  .caption-scroll {

    font-size: 0.9rem;

  }

  .caption-scroll::-webkit-scrollbar {

    height: 0.4rem;

  }

  .caption-scroll::-webkit-scrollbar-track {

    border-radius: 0.2rem;

  }

  .caption-scroll::-webkit-scrollbar-thumb {

    border-radius: 0.2rem;

  }



  /*

  ---------------------------------------------



  sp catch



  */

  .catch-01,

.catch-02 {

    font-size: 1.8rem;

  }



  /*

  ---------------------------------------------



  subgrid card



  */

  /*

  ---------------------------------------------



      sp float wrap



  */

  .float-wrap .float-img.fr {

    width: 100%;

    margin-left: 0;

    float: none;

  }

  .float-wrap .float-img.fl {

    width: 100%;

    margin-right: 0;

    float: none;

  }

  .float-wrap .float-img.ct {

    width: 100%;

    margin-left: 0;

    margin-right: 0;

  }



  /*

  ---------------------------------------------



  sp pankuzu



  */

  #pankuzu {

    margin: var(--s1) 0 var(--s3);

  }



  /*

  ---------------------------------------------



      sp footer



  */

  .footer-area .l-center {

    padding-top: var(--s5);

  }

  .footer-area .l-center:before {

    left: calc(var(--s2) - 1px);

  }

  .footer-area .l-center:after {

    right: calc(var(--s2) - 1px);

  }



  .footer-about {

    width: calc(100% - var(--s4));

    margin: 0 auto var(--s4);

    padding: var(--s2) var(--s3) var(--s2);

    flex-wrap: wrap;

    gap: var(--s2);

  }

  .footer-about__main {

    flex: auto;

  }

  .footer-about__logo {

    width: 7rem;

    margin-left: auto;

    margin-bottom: -3rem;

  }

  .footer-about__title {

    width: 100%;

    margin-bottom: var(--s1);

    padding-top: 1.2rem;

    padding-left: 11rem;

    background-size: 9.2rem auto;

    font-size: 1.5rem;

  }

  .footer-about__title:before {

    width: calc(100% + var(--s6));

    left: calc(var(--s3) * -1);

  }

  .footer-about-p {

    font-size: 1.3rem;

  }



  .footer-main {

    padding-right: 0;

    padding-left: 0;

    box-sizing: border-box;

  }



  .footer-bottom .l-center {

    padding: 0 0 var(--s8);

  }



  .footer-logo {

    margin: var(--s1) auto;

    width: 16rem;

  }



  .footer-box + .footer-box {

    margin-top: var(--s2);

  }



  .footer-menu-title {

    margin-bottom: 0;

  }

  .footer-menu-title__link {

    padding: var(--s1) var(--s4) var(--s1) var(--s2);

    position: relative;

  }

  .footer-menu-title__link::after {

    content: "";

    width: 1.4rem;

    height: 1.4rem;

    background: url("img/arrow-03-white-down.svg") no-repeat center/contain;

    position: absolute;

    top: 50%;

    right: var(--s2);

    transform: translate(0, -50%) rotate(0);

    transition: transform 0.3s;

  }

  .footer-menu-title__link.is-open::after {

    transform: translate(0, -50%) rotate(180deg);

  }

  .footer-menu-title__link--not-toggle::after {

    background: url("img/arrow-03-white-right.svg") no-repeat center/contain;

    right: 1.4rem;

  }



  .footer-menu {

    padding: var(--s1) 0;

    background: rgba(255, 255, 255, 0.3);

    gap: 0;

  }

  .footer-menu__item {

    width: 100%;

  }

  .footer-menu__link {

    padding: var(--s1) var(--s2);

  }



  .footer-menu-sub {

    margin-left: var(--s2);

  }

  .footer-menu-sub__link {

    padding: var(--s1) var(--s2) var(--s1) 1.1em;

  }

  .footer-menu-sub__link::before {

    top: var(--s1);

  }



  .footer-disclaimer {

    width: calc(100% - var(--s2));

    margin: var(--s2) auto;

    padding: var(--s1) var(--s2);

  }



  .footer-nocopy {

    margin: var(--s2) var(--s1) 0;

    padding-bottom: var(--s2);

    font-size: 1rem;

  }



  .footer-copyright {

    width: 100%;

    text-align: center;

    font-size: 1rem;

  }



  .footer-sitemap {

    display: none;

  }



  .footer-banner {

    padding: 0.6rem var(--s5) 0.6rem 7.2rem;

    background-position: right var(--s2) center;

    background-size: 1.8rem auto;

    width: calc(100% - 5.6rem);

    height: auto;

    left: 0;

    bottom: 0;

    border-radius: 0 var(--s1) 0 0;

    border: solid 1px #000;

    border-bottom: none;

    writing-mode: horizontal-tb;

    font-family: "Noto Sans JP", sans-serif;

    font-size: 1.3rem;

  }

  .footer-banner:before {

    left: var(--s1);

    top: auto;

    bottom: var(--s1);

    transform: none;

  }



  /*

  ---------------------------------------------



  sp gnavi



  */

  .gnavi-btn {

    width: 5.2rem;

    height: 5.2rem;

    left: auto;

    right: 0;

  }

  .gnavi-btn:before {

    font-size: 1rem;

    bottom: 0.6rem;

  }

  .gnavi-btn span {

    left: 1.1rem;

  }

  .gnavi-btn span:nth-of-type(1) {

    top: 1.3rem;

  }

  .gnavi-btn span:nth-of-type(2) {

    top: 2.1rem;

  }

  .gnavi-btn span:nth-of-type(3) {

    top: 2.9rem;

  }

  .gnavi-btn.is-active span:nth-of-type(1) {

    transform: translateY(0.8rem) rotate(-45deg);

  }

  .gnavi-btn.is-active span:nth-of-type(3) {

    transform: translateY(-0.8rem) rotate(45deg);

  }



  .gnavi-area {

    width: 100%;

    padding: var(--s4) 0;

    left: 0;

  }

  .gnavi-area__logo {

    display: block;

    width: 15rem;

    margin: 0 auto var(--s2);

  }



  .gnavi-logo {

    width: 22rem;

    margin: 0 auto var(--s2);

    padding-right: var(--s3);

  }



  /*

  ---------------------------------------------



      sp page



  */

  .page-top {

    width: var(--s6);

    height: var(--s6);

    bottom: 0;

  }



  /*

  ---------------------------------------------



       sp toggle sp



  */

  .toggle-sp-content {

    display: none;

  }



  .toggle-btn:after {

    height: var(--s3);

    right: 3.5rem;

  }

  .toggle-btn:before {

    width: var(--s3);

  }



  /*

  ---------------------------------------------



      help



  */

  .help-content01 {

    width: 20rem;

  }

  .help-content01 p {

    font-size: 1.4rem;

  }



  .help-content02 {

    left: 50%;

    top: calc(100% + var(--s2));

  }



  /*

  ---------------------------------------------



      tab



  */

  .tab-btn {padding: 1rem var(--s4) 1rem;font-size: 1.6rem;}

  .tab-btn span.en {

    margin-right: var(--s1);

    font-size: 1.4rem;

  }

  .tab-btn.is-active:after {

    border-width: 1rem 0.9rem 0 0.9rem;

  }

  .tab-btn-wrapper {padding: 0 2.6rem;gap: var(--s1);}



  .tab-content__left {

    padding: var(--s3) 0;

  }



  /*

  ---------------------------------------------



      SP titles



  */

  .pr-text {

    margin-bottom: var(--s5);

    font-size: 1.2rem;

    line-height: 1.3;

  }



  .main-area--low h2:not([class]),

.main-area--low h3:not([class]),

.main-area--low h4:not([class]),

.main-area--low h5:not([class]),

.main-area--low h6:not([class]) {

    margin: var(--s4) auto var(--s2);

  }

  .main-area--low h1:not([class]) {

    margin: 0 auto var(--s2);

    padding: 0 0 var(--s6) 0;

    background-size: auto 2.2rem;

    font-size: 2.2rem;

  }

  .main-area--low h1:not([class]):after {

    right: 0;

    bottom: -2rem;

    width: 30rem;

    height: 23rem;

    background-size:70% auto;

  }

  .main-area--low h2:not([class]) {

    font-size: 2rem;

    padding: 1.2rem var(--s1) 1.2rem var(--s4);

  }

  .main-area--low h2:not([class]):before {

    width: var(--s3);

  }

  .main-area--low h2:not([class]) a {

    background-size: 2rem auto;

    background-position: right center;

  }

  .main-area--low h3:not([class]) {

    padding: var(--s1) 0 ;

    font-size: 1.8rem;

  }

  .main-area--low h3:not([class]) a {

    background-size: 2rem auto;

    background-position: right center;

  }

  .main-area--low h4:not([class]) {

    font-size: 1.6rem;

  }

  .main-area--low h4:not([class]) a {

    background-size: 2rem auto;

    background-position: right center;

  }

  .main-area--low h5:not([class]) {

    font-size: 1.5rem;

  }

  .main-area--low h5:not([class]) a {

    background-size: 2rem auto;

    background-position: right center;

  }

  .main-area--low h6:not([class]) {

    font-size: 1.5rem;

  }

  .main-area--low .icon-title {

    margin: var(--s7) auto var(--s7) var(--s2);

    padding-left: 5.5rem;

    padding-right: var(--s1);

    font-size: 1.7rem;

  }

  .main-area--low .icon-title:before {

    left: -2rem;

  }



  /*

  ---------------------------------------------



      lower Parts



  */

  .lower-summary {

    margin: 10rem 0 var(--s7);

    padding: var(--s3) 0 var(--s3) var(--s3);

  }

  .lower-summary:after {

    font-size: 5rem;

    top: -5.5rem;

  }

  .lower-summary__tag {

    font-size: 1.4rem;

  }

  .lower-summary__tag:before {

    width: var(--s2);

    left: calc(var(--s3) * -1);

  }

  .lower-summary__title {

    margin-bottom: var(--s2);

    font-size: 1.8rem;

  }

  .lower-summary .btn-web {

    margin-top: var(--s2);

  }



  .lower-schedule {

    margin: 10rem auto var(--s7);

    padding: var(--s3) 0;

  }

  .lower-schedule:before {

    padding: 0 var(--s1);

    font-size: 2.6rem;

    left: var(--s3);

    top: -2rem;

  }

  .lower-schedule:after {

    width: 4rem;

    height: 5.6rem;

    left: -1rem;

    top: -3.5rem;

  }

  .lower-schedule__title {

    margin-bottom: var(--s2);

    font-size: 2rem;

  }



  .box-qa {

    margin: var(--s6) 0;

  }

  .box-qa__title {

    margin-bottom: var(--s2);

    padding-left: var(--s5);

    font-size: 1.8rem;

  }

  .box-qa__title:before {

    font-size: 3rem;

  }

  .box-qa__body {

    padding-left: 0;

  }

  .box-qa__body .l-column--row-reverse {

    gap: var(--s2);

  }

  .box-qa__answer {

    padding-left: var(--s5);

    font-size: 1.6rem;

  }

  .box-qa__answer:before {

    left: var(--s-2);

    top: -0.4rem;

    font-size: 3rem;

  }



  .lower-job {

    margin: var(--s6) 0;

  }

  .lower-job__title {

    padding: var(--s2);

    font-size: 1.8rem;

    gap: var(--s2);

  }

  .lower-job__tag {

    font-size: 1.2rem;

    width: 5.5rem;

    height: 5.5rem;

  }

  .lower-job__body {

    padding: var(--s2) var(--s3) var(--s3);

  }



  .box-comment {

    margin: var(--s7) 0 var(--s4);

    padding: var(--s3);

    border-radius: var(--s4);

    flex-direction: column;

  }

  .box-comment__pic {

    width: 100%;

    margin-top: -6rem;

    display: flex;

    align-items: flex-end;

  }

  .box-comment--reverse .box-comment__pic {

    flex-direction: row-reverse;

  }



 .box-interview {
    padding: var(--s2) var(--s2) var(--s3);
  }
  .box-message__tag {
    text-align: center;
	 font-size: 1.7rem;
  }
  .box-interview__title {
    margin-bottom: var(--s2);
    text-align: center;
  }
  .box-message__title span.bg {
    display: block;
    width: fit-content;
	font-size: 1.6rem;
    margin: 0 auto var(--s2);
  }
  .box-interview__pic {
    width: 20rem;
    margin: 0 auto;
  }
  .box-interview__catch {
    font-size: 1.8rem;
  }



  .tag01 {

    font-size: 1.3rem;

  }



  /*

  ---------------------------------------------



      SP end



  */

}

@media screen and (max-width: 767px) {

  /*

  ---------------------------------------------



      TOP common



  */

  .common-title {

    margin-bottom: var(--s3);

    font-size: 2.4rem;

  }

  .common-title span.sm,

.common-title span.fkds {

    font-size: 1.8rem;

  }

  .common-title:before {

    left: -4rem;

  }

  .common-title a {

    padding-right: var(--s4);

    background-size: 2rem auto;

    background-position: right top 60%;

  }



  .common-catch {

    margin: var(--s3) 0;

    padding: 1.2rem var(--s2) 1.2rem var(--s4);

    font-size: 1.6rem;

  }

  .common-catch:before {

    width: var(--s3);

  }

  .common-catch span.st {

    font-size: 2rem;

  }



  .sec-inner {

    padding: 0 var(--s2);

  }



  .common-sec {

    padding: var(--s6) var(--s2);

  }



  /*

  ---------------------------------------------



      TOP section



  */

  .sec-sponsored {
padding: 0 0 4rem;
    margin-bottom: var(--s6);

  }

  .sec-sponsored__header {

    padding: var(--s2);

  }

  .sec-sponsored__column {

    gap: 0;

  }

  .sec-sponsored__title {

    font-size: 2rem;

  }

  .sec-sponsored__name {

    font-size: 1.5rem;

  }

  .sec-sponsored__logo {

    padding: var(--s2) var(--s6);

  }

  .sec-sponsored__body {

    padding: var(--s2);

  }



  .sec-shift__upper {

    padding: var(--s6) var(--s2);

  }

  .sec-shift__title {margin-bottom: var(--s1);font-size: 3.3rem;}

  .sec-shift__title span.sm {
    font-size: 1.8rem;
  }

  .sec-shift__title span.bg,

.sec-shift__title span.bg2 {
    font-size: 3.3rem;
    padding: 0.3rem 0.7rem;
  }

  .sec-shift__pic {width: 19rem;left: auto;right: -0.1rem;top: 3rem;z-index: -1;opacity: 0.5;}

  .sec-shift__subtitle {
margin-top:var(--s6);
    margin-left: calc(var(--s2) * -1);

    margin-right: calc(var(--s2) * -1);

    font-size: 1.6rem;

  }

  .sec-shift__footer {

    padding: var(--s8) var(--s2) var(--s4);

    font-size: 1.6rem;

  }

  .sec-shift__footer:before {

    background-size: 16rem auto;

  }



  .card-job-wrap {

    margin-bottom: var(--s2);

    padding: 0;

  }

  .card-job__catch {

    font-size: 1.8rem;

  }

  .card-job__column {

    margin-bottom: var(--s1);

  }

  .card-job__pic {

    width: 12rem;

  }

  .card-job__label {

    font-size: 1.5rem;

  }

  .card-job__text {

    padding: 0 var(--s2) var(--s2) var(--s2);

  }

  .card-job ul:not([class]) {

    margin: var(--s1) 0 var(--s1) var(--s2);

  }

  .card-job ul:not([class]) li + li {

    margin-top: 0.5rem;

  }



  .area-sticky__btns {

    padding: var(--s1) var(--s5) var(--s1) var(--s1);

  }



  .page-link-list {

    gap: var(--s1);

  }

  .page-link-item {

    width: calc((100% - var(--s2)) / 2);

    height: auto;

    padding: 1rem var(--s2);

  }

  .page-link-item__label {

    font-size: 1.4rem;

  }

  .page-link-item__number {

    font-size: 1.8rem;

  }



  .page-link-item--active .page-link-item__label {

    border-width: 0.2rem;

  }



  .title-category {

    margin-bottom: var(--s4);

    padding:2.8rem 0 0 var(--s2);

    font-size: 2.6rem;

  }

  .title-category:before {

    font-size: 5rem;

  }



  .box-compare__prologe {
  display: block;
  width: 100% !important;
  min-height: 200px; /* 画像がしっかり見えるように高さを確保 */
  background-repeat: no-repeat;
  /* overflowを隠す */
  overflow: hidden;
	  padding-bottom: var(--s3);
  }

  .box-compare__prologe--before {
display: block;
  width: 100% !important;
  min-height: 200px; 
  background-repeat: no-repeat;
  /* overflowを隠す */
  overflow: hidden;
	  right: 70rem auto;
	   background-position: right top;
  }

  .box-compare__prologe--after {
display: block;
  width: 100% !important;
  min-height: 200px; /* 画像がしっかり見えるように高さを確保 */
  background-repeat: no-repeat;
  /* overflowを隠す */
  overflow: hidden;
margin-top: var(--s5);
  }

  .box-compare__prologe--after:after {
    left: 50%;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.6rem 1.8rem 0 1.8rem;
    border-color: #f0795b transparent transparent transparent;
    transform: translateX(-50%);
  }

  .box-compare__prologe--after02:after {

    left: 50%;

    top: 0;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 1.6rem 1.8rem 0 1.8rem;

    border-color: #f0795b transparent transparent transparent;

    transform: translateX(-50%);

  }

    .box-compare__prologe--after03:after {

    left: 50%;

    top: 0;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 1.6rem 1.8rem 0 1.8rem;

    border-color: #f0795b transparent transparent transparent;

    transform: translateX(-50%);

  }

    .box-compare__prologe--after04:after {

    left: 50%;

    top: 0;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 1.6rem 1.8rem 0 1.8rem;

    border-color: #f0795b transparent transparent transparent;

    transform: translateX(-50%);

  }

  .box-compare__tag {
margin-bottom: var(--s2);
    font-size: 1.4rem;

  }

  .box-compare__title {
    padding-left: var(--s2);
    font-size: 1.8rem;
  }

  .box-compare__content {

    padding: var(--s2);

  }

  .box-compare__catch {

    font-size: 1.8rem;

  }

  .box-compare__text {

    display: flex;
gap: var(--s2);
  }

  .box-compare__pic {

    width: 8rem;


    margin-bottom: var(--s1);

    float: left;

  }

  .box-compare .inner-body + .inner-body {

    margin-top: var(--s3);

  }



  .box-pickup {

    margin: var(--s5) 1.2rem var(--s6);

    padding: 0 var(--s2) var(--s2);

  }

  .box-pickup__tag {

    font-size: 1.5rem;

  }

  .box-pickup__title {

    font-size: 1.7rem;

  }

  .box-pickup__body {

    display: block;

  }

  .box-pickup__pic {

    float: left;

    width: 8rem;

    margin: 0 1.5rem var(--s1) 0;

  }

  .box-pickup__content {

    padding: 0;

    border: none;

  }

  .box-pickup__content:before {

    content: none;

  }

  .box-pickup__content p {

    clear: both;

  }

  .box-pickup__more .more-pic {

    width: 7.5rem;

  }

  .box-pickup__more .more-text {

    padding: 2rem 2rem 2rem 2rem;

    font-size: 1.3rem;

    flex: 1;

  }

  .box-pickup__more .more-text:before {

    width: 10rem;

    height: 5rem;

    top: calc(4rem * -0.9);

    left: -5rem;

  }



  .sec-summary {
padding: 0 0 3rem;
    margin-bottom: var(--s6);

  }

  .sec-summary__title {

    padding: var(--s2);

    font-size: 1.8rem;

  }

  .sec-summary__column {

    margin-top: 0;

    padding: 0 var(--s2) var(--s2) var(--s2);

  }

  .sec-summary .site-capture {

    margin-top: 0;

  }



  .sec-reason {

    margin-bottom: var(--s6);

    padding-bottom: 0;

  }

  .sec-reason__upper {

    padding: var(--s2) var(--s2) var(--s6);

  }

  .sec-reason__upper .l-grid-02 {

    grid-gap: var(--s2);

  }

  .sec-reason__title {margin-bottom: var(--s2);padding: var(--s3) 0 0 0;font-size: 2.4rem;}

  .sec-reason__title span.sm {

    margin-bottom: -0.5rem;

    font-size: 1.6rem;

  }

  .sec-reason__title span.sm2 {

    font-size: 1.5rem;

  }

  .sec-reason__title span.line {

    font-size: 1.8rem;

  }

  .sec-reason__title:before {

    left: -4rem;

    top: var(--s9);

  }

  .sec-reason__title:after {
    display: none;
    height: var(--s8);
    right: 0;
    top: 0;
  }

  .sec-reason__summary {

    padding: 0 var(--s2);

    align-items: flex-start;

  }

  .sec-reason__summary .l-column__main {

    flex: none;

  }

  .sec-reason__pic {

    width: calc(100% - 4.1rem - var(--s3));

    margin-top: -16.5rem;

  }

  .sec-reason__subtitle {

    margin: var(--s6) 0 var(--s1);

    font-size: 1.8rem;

  }



  .box-reason {
    padding: 0 var(--s2) var(--s4) var(--s2);
    grid-gap: var(--s2);
	          margin: 0 -1.6rem;
  }

  .box-reason__icon {
    width: 10rem;
    height: 10rem;
    padding-top: 6rem;
    font-size: 1.6rem;
    background-position: center top var(--s2);
  }
  .box-reason__icon2 {
  width: 10rem;
  height: 10rem;
  padding-top: 6rem;
  font-size: 1.6rem;
  background-position: center top var(--s2);
}


  .box-reason__title {

    font-size: 1.8rem;

  }



  .title-between {

    padding: 5.6rem var(--s2) 0;

    font-size: 1.8rem;

  }

  .title-between:before {

    border-width: 4rem 8rem 0 8rem;

  }



  .box-message {

    padding: var(--s4) var(--s2) var(--s5);

  }

  .box-message__tag {

    text-align: center;

  }

  .box-message__title {

    margin-bottom: var(--s1);

    text-align: center;

  }

  .box-message__title span.bg {

    width: fit-content;

    display: block;

    margin: 0 auto var(--s-2);

  }

  .box-message__pic {

    width: 20rem;

    margin: 0 auto;

  }

  .box-message__catch {
    text-align: center;
    font-size: 1.8rem;
    margin-top: var(--s2);
    margin-bottom: 0;
  }

  .box-message__catch02 {
    text-align: left;
    font-size: 1.5rem;
    margin-top: var(--s2);
    margin-bottom: var(--s2);
  }

  .box-message-02 {
    padding: var(--s2) 0 var(--s3);
    margin: 0 auto var(--s2);
  }

  .box-message-02__title {
    font-size: 1.6rem;
  }

  .box-message-02__text {
    padding: var(--s4) var(--s2) var(--s2);
  }

  .box-message--low {
    margin: var(--s8) auto;
  }



  .title-vertical {
    font-size: 1.8rem;
  }


  .splide-wrapper {
    margin-top: var(--s4);
  }

  .splide {
    margin: var(--s1) auto;
  }



  .splide__arrows {
    width: 100%;
  }



  .splide__arrow {
    width: 3.2rem;
  }



  #thumbnail-carousel .splide__list {
    flex-wrap: wrap;
    justify-content: center;
  }

  #thumbnail-carousel .splide__slide {
    padding: var(--s-2);
  }



  .btn-slider {
    padding: var(--s1);
    font-size: 1.3rem;
  }



  .card-task {
    padding: var(--s2);
  }

  .card-task::before {
    top: 2.8rem;
  }

  .card-task:after {
    content: none;
  }

  .card-task__title {
    padding-left: var(--s5);
    font-size: 1.6rem;
  }

  .card-task__title:after {
    width: 3.5rem;
    height: 3.5rem;
  }

  .card-task__subtitle {
    padding: var(--s-2) var(--s1);
    font-size: 1.3rem;
    text-align: center;
  }

  .card-task p {
    font-size: 1.3rem;
  }

  .card-task__skill {
        max-width: calc((100% - 1.5rem) / 2);
        padding: var(--s-2) var(--s1);
        font-size: 1.3rem;
        text-align: center;
        width: 50%;
    }
  
  .card-task__skill-list {
    flex-wrap: wrap;
    gap: 0.5rem;
  }



  .sec-job {
    padding-bottom: var(--s6);
  }

  .sec-job__subtitle {
    margin: var(--s8) 0 var(--s4);
    font-size: 1.8rem;
  }

  .sec-job__subtitle span.sm {
    font-size: 1.6rem;
  }

  .sec-job__subtitle span.bg {
    padding: 0.4rem 0.6rem;
  }

  .sec-job__subtitle span.bg:before {
    border-width: 1rem 0.9rem 0 0.9rem;
  }



  .sec-schedule {
    padding: var(--s6) var(--s2) var(--s5);
  }



  .box-schedule {
    padding: var(--s2);
  }

  .box-schedule__title {
    font-size: 1.6rem;
  }

  .box-schedule--lower {
    padding: var(--s2) var(--s1);
  }

  .box-schedule--lower .box-schedule__content {
    padding: var(--s2);
    background: rgba(255, 255, 255, 0.8);
  }



  .schedule-dl__term {
    width: 7rem;
    padding-left: var(--s3);
    font-size: 1.5rem;
  }

  .schedule-dl__term:before {
    top: 0.3em;
  }

  .schedule-dl__catch {
    font-size: 1.5rem;
  }



  .sec-learning:before {
    height: calc(100% - var(--s2));
  }

  .sec-learning__tag {
    padding: 0.5rem var(--s1);
    font-size: 1.5rem;
  }

  .sec-learning__title {
    margin-bottom: var(--s2);
    padding-bottom: var(--s2);
    font-size: 2.4rem;
  }

  .sec-learning__title span.sm {
    font-size: 1.8rem;
  }



  .card-revel {
margin-bottom: var(--s6);
    max-width: 88%;
    gap: 0;
  }

  .card-revel__bg {
    padding: var(--s1) var(--s3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-revel__title {
    margin: 0;
    font-size: 1.6rem;
    text-align: left;
  }

  .card-revel__pic {
    margin: 0;
  }

  .card-revel__text {
    padding: var(--s2);
  }



  .sec-number {
    padding: var(--s8) var(--s2);
  }

  .sec-number__title {
    margin-bottom: var(--s3);
    font-size: 2.4rem;
  }

  .sec-number__title span.bg,
.sec-number__title span.line {
    padding: 0.3rem 0.7rem;
  }

  .sec-number--low {
    margin: var(--s7) auto;
    padding: 0;
  }



  .card-number {
    padding: var(--s2);
  }

  .card-number__title {
    font-size: 1.8rem;
  }



  .sec-info {
    padding: 0 var(--s2) var(--s4);
  }

  .sec-info__title {
    width: fit-content;
    margin-bottom: var(--s3);
    margin-left: calc(var(--s2) * -1);
    padding: var(--s2) var(--s4) var(--s2) var(--s2);
    font-size: 2.4rem;
  }

	.sec-info:before {
    height: calc(100% - var(--s6));
}
	
  .sec-info__title span.sm {
    font-size: 1.8rem;
  }



  .benefit-info {
    width: 100%;
    padding-bottom: var(--s2);
  }

  .benefit-info:before {
    width: 10.4rem;
  }

  .benefit-info-wrap {
    gap: var(--s2);
  }

  .benefit-info .info-title {
    min-width: initial;
    width: 12rem;
    padding-right: var(--s2);
  }



  .btn-qa {
    padding: var(--s2) var(--s6);
    border: solid 0.5rem #e1e2e2;
    border-top: none;
    background-size: 2.2rem auto;
    background-position: right var(--s1) center;
  }

  .btn-qa::before {
    left: var(--s1);
    font-size: 2.8rem;
  }

  .btn-qa:first-of-type {
    border-top: solid 0.5rem #e1e2e2;
  }



  .card-license__pic {
    margin-bottom: var(--s2);
  }

  .card-license__title {
    background-size: 2.2rem auto;
  }



  .card-recommend {
    padding: var(--s2) var(--s5) var(--s2) var(--s8);
    background-size: 2.2rem auto;
    background-position: right var(--s1) center;
  }

  .card-recommend:before {
    left: 1.2rem;
    font-size: 3rem;

  }

img.img-height {
  width: auto;
  max-width: inherit;
  height: 70%;
}

 .box-compare__prologe--before {
  background: #dbdce4 url(img/bg-illust-before01.png) no-repeat right -22px bottom/auto 60%;
}

.box-compare__prologe--after {
	margin-top: 0;
	padding: 2rem 0;
  background: #ffffff url(img/bg-illust-after01.png) no-repeat 16rem 7rem/auto 65%;
}

  .box-compare__prologe--before02 {
  background: #dbdce4 url(img/bg-illust-before02.png) no-repeat right bottom/auto 58%;
}
  
 .box-compare__prologe--after02 {
	 margin-top: 0;
	 padding: 2rem 0;
	 background: #ffffff url(img/bg-illust-after02.png) no-repeat right bottom/auto 58%;
}
	.box-compare__prologe--before03 {
    background: #dedfe3 url(img/bg-illust-before03.png) no-repeat right -21px bottom / auto 62%;
}
  
  .box-compare__prologe--after03 {
	  margin-top: 0;
	padding: 2rem 0;
  background: #ffffff url(img/bg-illust-after03.png) no-repeat right -5px bottom 4px/auto 53%;
}

	
   .box-compare__prologe--after04 {
	   margin-top: 0;
	padding: 2rem 0;
  background: #ffffff url(img/bg-illust-after04.png) no-repeat right -5px bottom 6px/auto 54%;
}

  .sec-reason__subtitle:before {
  display: none;
}

.lower-sp {
  margin: 5rem -1.6rem;
}

.lower-sp  .sec-summary__title {
	padding: var(--s3) var(--s2);
}
.lower-sp .sec-summary__column {
    margin-top: var(--s3);
	display: flex;
        flex-direction: column;
}
.lower-sp .l-column__side02 {
        order: -1;
    }
.lower-sp .btn-column {
    margin: var(--s2) auto var(--s3);
}
.lower-sp .l-column__main {
     margin-top: 1rem;
    }
  /*

  ---------------------------------------------



      SP end



  */

}