@charset "UTF-8";
/***************
 * 変数
***************/
/***************
 * 共通スタイル
***************/
html {
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 32px;
  }
}

body {
  font-family: "Yu Gothic", 游ゴシック体, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, verdana, sans-serif;
  background: #F8F0E9;
  background-size: 40px;
  color: #716058;
  font-size: 1rem;
  line-height: 1.5;
  width: 100%;
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: 750px;
  margin: auto;
  padding: 2rem 0;
}
@media screen and (max-width: 767px) {
  .wrap {
    overflow: hidden;
    position: relative;
  }
}

img {
  width: 100%;
  vertical-align: middle;
}

.area-notice {
  font-size: 0.625rem;
  color: #666;
  width: 91.2%;
  margin: 0.5rem auto 0;
}
.area-notice ul li {
  text-indent: -0.65rem;
  margin-left: 0.65rem;
}
.area-notice ul li a {
  color: #000;
}

.btn-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.btn-main p {
  text-align: center;
  line-height: 1.2;
}
.btn-main p span {
  display: block;
  font-size: 1.5rem;
}

.slick-dots li {
  margin: 0;
}
.slick-dots li button:before {
  font-size: 10px;
  color: #FFF;
  opacity: 1;
}
.slick-dots li.slick-active button:before {
  color: #0D382A;
}

.slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.slick-slide {
  height: auto !important;
}

.slick-prev {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 3rem;
  height: 3rem;
  padding: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 100;
  left: 0;
}
@media screen and (min-width: 768px) {
  .slick-prev {
    left: -1rem;
  }
}
.slick-prev::before {
  content: "";
  background-image: url(../img/slick-arr-left.svg);
  display: block;
  width: 3rem;
  height: 3rem;
  background-size: contain;
  opacity: 1;
}

.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 3rem;
  height: 3rem;
  padding: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 100;
  right: 0;
}
@media screen and (min-width: 768px) {
  .slick-next {
    right: -1rem;
  }
}
.slick-next img {
  width: 100%;
}
.slick-next::before {
  content: "";
  background-image: url(../img/slick-arr-right.svg);
  display: block;
  width: 3rem;
  height: 3rem;
  background-size: contain;
  opacity: 1;
}

/***************
 * ヘッダー
***************/
header {
  background-color: #F8F0E9;
  background-image: url(../img/bg_border.png);
}

/***************
 * メイン
***************/
main #main .area-header p {
  font-weight: bold;
  color: #0D382A;
  background-color: #FFF;
  width: 64.53%;
  padding: 0.5rem 0;
  font-size: 1rem;
  text-align: center;
  border-radius: 100px;
  margin: auto;
}
main #main .area-header h1 {
  text-align: center;
  width: 45.07%;
  margin: 10px auto 0;
}
main #main .area-main {
  position: relative;
  height: 350px;
}
@media screen and (min-width: 768px) {
  main #main .area-main {
    height: 700px;
  }
}
main #main .area-main h2 {
  position: absolute;
  top: 13%;
  left: -4%;
  z-index: 1;
  width: 59.47%;
}
main #main .area-main p {
  position: absolute;
  top: 5%;
  right: -6.67%;
  width: 67.2%;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
main #main .area-feature {
  position: relative;
}
main #main .area-feature h2 {
  position: relative;
  background-color: #2B5242;
  color: #FFF;
  font-size: 0.875rem;
  font-weight: bold;
  padding: 0.5rem 0;
  text-align: center;
  margin: auto;
  width: 64.53%;
  border-radius: 6px;
  z-index: 1;
}
main #main .area-feature ul {
  position: relative;
  width: calc(91.2% - 3.4rem);
  margin: auto;
  background-color: #FFF;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  margin-top: -1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2rem 1.7rem 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2.5rem;
}
main #main .area-feature li {
  font-size: 0.75rem;
  text-align: center;
  font-weight: bold;
}
main #main .area-feature li img {
  display: inline-block;
  margin-bottom: 0.5rem;
}
main #main .area-notice {
  font-size: 0.625rem;
  color: #666;
  width: 91.2%;
  margin: 0.5rem auto 0;
}
main #main .area-notice ul li {
  text-indent: -0.65rem;
  margin-left: 0.65rem;
}
main #trouble {
  position: relative;
  background-image: url(../img/bg_border.png);
  background-size: 40px;
  background-color: #B7D0BE;
}
main #trouble .h1-wrap {
  position: absolute;
  top: -6rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  overflow: hidden;
  z-index: 1;
  padding: 3rem 0;
}
main #trouble h1 {
  background-color: #B7D0BE;
  font-size: 1.62rem;
  text-align: center;
  padding: 1.5rem 0 0.5rem;
  -webkit-transform: rotate(-6deg);
          transform: rotate(-6deg);
  width: 120%;
  margin-left: -10%;
  background-image: url(../img/bg_border.png);
  background-size: 40px;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  main #trouble h1 {
    top: -4em;
  }
}
main #trouble h1 .marker-y {
  background-color: #FFEB00;
  line-height: 1;
}
main #trouble h1 .text-xl {
  font-size: 2.87rem;
}
main #trouble h1 .text-l {
  font-size: 1.9375rem;
}
main #trouble .wrap {
  padding-top: 0;
}
main #trouble .trouble {
  position: relative;
  height: 25rem;
  padding: 10% 0 0;
}
@media screen and (min-width: 768px) {
  main #trouble .trouble {
    height: 25rem;
  }
}
main #trouble .trouble ul li {
  position: absolute;
  z-index: 1;
}
main #trouble .trouble ul li.nukege {
  top: 7rem;
  left: 1rem;
  width: 36.15%;
}
main #trouble .trouble ul li.dihada {
  top: 4rem;
  right: 0.5rem;
  width: 39.98%;
}
main #trouble .trouble ul li.fukete {
  bottom: 4rem;
  left: 1rem;
  width: 37.6%;
}
main #trouble .trouble ul li.kouka {
  bottom: 5rem;
  right: 1rem;
  width: 39.73%;
}
main #trouble #attention {
  background-color: #FFF;
  border-radius: 10px;
  width: 91.2%;
  margin: auto;
}
main #trouble #attention h2 {
  background-color: #CC0000;
  border-radius: 10px 10px 0 0;
  text-align: center;
  color: #FFEB00;
  font-size: 1.6875rem;
  font-weight: bold;
  padding: 0.75rem 0;
}
main #trouble #attention h2 img {
  width: 2.5rem;
  vertical-align: middle;
  display: inline-block;
  margin-right: 0.5rem;
  margin-top: -4px;
}
main #trouble #attention p {
  color: #CC0000;
  font-size: 1.25rem;
  text-align: center;
  margin-top: 1rem;
  font-weight: bold;
}
main #trouble #attention p span {
  font-size: 1.5rem;
  text-decoration: underline;
}
main #trouble #attention .img {
  padding: 0.5rem;
}
main #trouble #solving {
  background-color: #51816B;
  border-radius: 10px;
  width: calc(91.2% - 2rem);
  margin: 1rem auto 0;
  padding: 1rem;
}
main #trouble #solving h2 {
  color: #FFF;
  font-weight: bold;
  font-size: 1.125rem;
}
main #trouble #solving p {
  background-color: #FFF;
  padding: 0.5rem;
  font-size: 0.75rem;
  width: 50%;
  border-radius: 10px;
  margin-top: 0.5rem;
}
main #trouble #solving p span {
  font-weight: bold;
}
main #trouble .area-img {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  width: 53%;
}
@media screen and (min-width: 768px) {
  main #trouble .area-img {
    width: 12rem;
    bottom: 0;
  }
}
main #price h1 {
  font-size: 1.5rem;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  text-align: center;
}
main #price h1 span {
  font-size: 1.875rem;
  text-decoration: underline;
  color: #CC0000;
}
main #price .table {
  margin: 1rem auto 0;
  width: 91.2%;
}
main #price .area-notice {
  margin: 0.5rem auto 0;
}
main #price .area-notice ul li {
  text-indent: -1.6rem;
  margin-left: 1.6rem;
}
main #plan {
  position: relative;
}
main #plan .bg .bg01 {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-130%);
          transform: translateX(-130%);
  width: 63.49%;
  max-width: 600px;
}
main #plan .bg .bg02 {
  position: absolute;
  top: 0;
  right: 50%;
  -webkit-transform: translateX(130%);
          transform: translateX(130%);
  width: 63.49%;
  max-width: 600px;
}
main #plan .logo {
  width: 45.08%;
  margin: auto;
  padding: 30% 0 0;
}
main #plan h1 {
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  text-align: center;
  font-size: 1.5rem;
  color: #0D382A;
  line-height: 1.25;
  margin-top: 2rem;
}
main #plan h1 .text-xl {
  font-size: 3.875rem;
}
main #plan h1 .text-l {
  font-size: 2.625rem;
}
main #plan .slider-plan {
  margin-top: 2rem;
}
main #plan .slider-plan .slick-list {
  overflow: inherit;
}
main #plan .slider-plan .slider-list {
  position: relative;
  margin: 0 20px;
  background-color: #FFF;
  border-radius: 10px;
  padding-bottom: 2rem;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
main #plan .slider-plan .slider-list .header {
  background-color: #0D382A;
  padding: 1.5rem 0;
  border-radius: 10px 10px 0 0;
  text-align: center;
}
main #plan .slider-plan .slider-list .header .badge {
  background-color: #CC0000;
  border-radius: 50%;
  height: 4.5rem;
  width: 5rem;
  color: #fff;
  font-family: "Oswald", "Noto sans JP", sans-serif;
  line-height: 1;
  text-align: center;
  padding: 0.5rem 0 0;
  position: absolute;
  top: -1rem;
  left: -1rem;
}
main #plan .slider-plan .slider-list .header .badge span {
  font-size: 1.875rem;
}
main #plan .slider-plan .slider-list .header .tit_sub {
  background-color: #FFF;
  display: inline-block;
  margin: auto;
  text-align: center;
  padding: 3px 1rem;
  border-radius: 100px;
  font-weight: bold;
}
main #plan .slider-plan .slider-list .header h2 {
  font-size: 1.875rem;
  color: #FFF;
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
}
main #plan .slider-plan .slider-list .area-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 90%;
  margin: 20px auto 0;
  gap: 0.25rem;
}
main #plan .slider-plan .slider-list .area-price.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
main #plan .slider-plan .slider-list .area-price .regular {
  color: #666;
}
main #plan .slider-plan .slider-list .area-price .regular .title {
  font-size: 0.625rem;
}
main #plan .slider-plan .slider-list .area-price .regular .price {
  font-family: "Oswald", "Noto sans JP", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: bold;
}
main #plan .slider-plan .slider-list .area-price .regular .price span {
  font-size: 1.875rem;
  text-decoration: line-through;
  margin-right: 5px;
  display: inline-block;
}
main #plan .slider-plan .slider-list .area-price .tryangle {
  background: #CCC;
  height: 25.9807621135px;
  width: 25px;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
}
main #plan .slider-plan .slider-list .area-price .sale {
  color: #666666;
}
main #plan .slider-plan .slider-list .area-price .sale .price {
  font-family: "Oswald", "Noto sans JP", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: bold;
  color: #CC0000;
  position: relative;
}
main #plan .slider-plan .slider-list .area-price .sale .price span {
  font-size: 3.75rem;
  margin-right: 5px;
  display: inline-block;
}
main #plan .slider-plan .slider-list .area-price .sale .price span.tax {
  font-size: 0.625rem;
  position: absolute;
  bottom: 1.5rem;
  right: 0;
  margin-right: 0;
}
main #plan .slider-plan .slider-list .area-price .sale .area-notice {
  text-align: center;
}
main #plan .slider-plan .slider-list .component {
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
  width: 91.2%;
  margin: 10px auto 0;
}
main #plan .slider-plan .slider-list .component ul li {
  border: 1px solid #999;
  border-radius: 5px;
  text-align: center;
  font-size: 0.7rem;
  line-height: 2.8;
  margin-top: 10px;
}
main #plan .slider-plan .slider-list .pack h3 {
  width: 91.2%;
  margin: 1rem auto 0;
  text-align: center;
  color: #0D382A;
}
main #plan .slider-plan .slider-list .pack h3 span {
  font-weight: bold;
}
main #plan .slider-plan .slider-list .pack h3 span::before {
  content: "";
  display: inline-block;
  height: 1.5rem;
  width: 2px;
  background-color: #0D382A;
  margin-right: 1rem;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  margin-bottom: -0.5rem;
}
main #plan .slider-plan .slider-list .pack h3 span::after {
  content: "";
  display: inline-block;
  height: 1.5rem;
  width: 2px;
  background-color: #0D382A;
  margin-left: 1rem;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  margin-bottom: -0.5rem;
}
main #plan .slider-plan .slider-list .pack table {
  width: 91.2%;
  margin: 1rem auto 0;
  border-top: 1px solid #CCC;
}
main #plan .slider-plan .slider-list .pack table tbody tr {
  border-bottom: 1px solid #CCC;
}
main #plan .slider-plan .slider-list .pack table tbody tr th {
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  vertical-align: middle;
  width: 6rem;
}
main #plan .slider-plan .slider-list .pack table tbody tr th span {
  display: block;
  font-size: 1rem;
}
main #plan .slider-plan .slider-list .pack table tbody tr td {
  padding: 1rem 0 1rem 0.5rem;
  font-weight: bold;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-setprice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-setprice .price {
  position: relative;
  font-size: 0.875rem;
  color: #777;
  line-height: 1;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-setprice .price .text-xl {
  font-size: 1.875rem;
  font-family: "Oswald", "Noto sans JP", sans-serif;
  margin-right: 5px;
  color: #0D382A;
  font-weight: 500;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-setprice .price .tax {
  position: absolute;
  bottom: 1rem;
  right: -0.15rem;
  font-size: 0.5rem;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-setprice .tax-price {
  font-size: 0.67rem;
  color: #777;
  line-height: 1;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-str {
  margin: 0.5rem 0 0;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-str li {
  padding: 0.25rem 0.5rem;
  color: #FFF;
  display: inline-block;
  font-size: 0.75rem;
  border-radius: 100px;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-str li.postage {
  background-color: #EAB421;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-str li.off5 {
  background-color: #398ED8;
}
main #plan .slider-plan .slider-list .pack table tbody tr td .area-str li.off10 {
  background-color: #D84B39;
}
main #plan .slider-plan .slider-list .pack table tbody tr.three th {
  background-color: #568375;
}
main #plan .slider-plan .slider-list .pack table tbody tr.six th {
  background-color: #296250;
}
main #plan .slider-plan .slider-list .pack table tbody tr.twelve th {
  background-color: #0D382A;
}
main #plan .slider-plan .slider-list.acce .header {
  background-color: #990001;
}
main #plan .slider-plan .slider-list.acce .header .tit_sub {
  color: #990001;
}
main #plan .slider-plan .slider-list.acce table tbody tr.three th {
  background-color: #E06666;
}
main #plan .slider-plan .slider-list.acce table tbody tr.six th {
  background-color: #990001;
}
main #plan .slider-plan .slider-list.acce table tbody tr.twelve th {
  background-color: #660000;
}
main #plan .slider-plan .slider-list.prevent .header {
  background-color: #083763;
}
main #plan .slider-plan .slider-list.prevent .header .tit_sub {
  color: #083763;
}
main #plan .slider-plan .slider-list.prevent table tbody tr.three th {
  background-color: #3D84C6;
}
main #plan .slider-plan .slider-list.prevent table tbody tr.six th {
  background-color: #0C5393;
}
main #plan .slider-plan .slider-list.prevent table tbody tr.twelve th {
  background-color: #083763;
}
main #plan .area-btn {
  text-align: center;
  margin-top: 1rem;
}
main #plan .area-btn .btn-sub {
  display: inline-block;
  margin: auto;
  border: 1px solid #0D382A;
  font-size: 0.625rem;
  line-height: 1.5rem;
  text-decoration: none;
  color: #0D382A;
  font-weight: bold;
  position: relative;
  padding: 0.1rem 2rem;
}
main #plan .area-btn .btn-sub::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 1px;
  background-color: #0D382A;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0.5rem;
}
main #plan .area-btn .btn-sub::after {
  content: "";
  display: block;
  height: 0.75rem;
  width: 1px;
  background-color: #0D382A;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0.875rem;
}
main #result {
  background-color: #B7D0BE;
  background-image: url(../img/bg_border.png);
  background-size: 40px;
}
main #result .tit_sub {
  text-align: center;
}
main #result .tit_sub p {
  color: #FFF;
  font-weight: bold;
  border-radius: 100px;
  background-color: #51816B;
  display: inline-block;
  padding: 0.25rem 1rem;
}
main #result h1 {
  font-size: 1.875rem;
  font-family: "Noto Serif JP", serif;
  color: #0D382A;
  font-weight: bold;
  text-align: center;
}
main #result ul {
  margin-top: 1rem;
}
main #result ul li {
  position: relative;
  width: calc(91.2% - 2rem);
  margin: 1rem auto;
  background-color: #FFF;
  border-radius: 10px;
  border: 4px solid #0D382A;
  padding-bottom: 2rem;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  padding: 1rem;
}
main #result ul li .badge {
  background-color: #0D382A;
  border-radius: 50%;
  width: 4rem;
  line-height: 4rem;
  color: #fff;
  text-align: center;
  position: absolute;
  top: -1rem;
  left: -1rem;
  font-size: 1.5rem;
  font-weight: bold;
}
main #result ul li h2 {
  font-size: 1.25rem;
  color: #0D382A;
  font-weight: bold;
  text-align: center;
}
main #result ul li h2 span {
  font-size: 0.7rem;
}
main #result ul li .img {
  margin-top: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
main #result ul li .img .tryangle {
  background: #B7D0BE;
  height: 43.3012701892px;
  width: 25px;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
}

main #result div.medical-content {
  margin-top: 20px;
}
main #result div.medical-content dl {
  font-size: 0.8rem;
}

main #result div.medical-content dl dt {
  @media only screen and (min-width : 767px){
    float: left;
    font-size: 0.5rem;
    width: 120px;
  }
}

main #result div.medical-content dl dd {
  padding-left: 20px;
  padding-bottom: 10px;
  @media only screen and (min-width : 767px){
    font-size: 0.5rem;
    margin-left: 120px;
  }
}
main #result div.medical-content .medical-content-caution-tag {
  font-size: 0.4rem;
  margin-left: 10px;
  @media only screen and (min-width : 767px){
    font-size: 0.4rem;
    margin-left: 10px;
  }
}
main #result div ul.medical-content-caution {
  margin-top: 10px;
}
main #result div ul.medical-content-caution li {
  border: none;
  box-shadow: none;
  width: 100%;
  border-radius: unset;
  padding: 0;
  font-size: 0.6rem;
  margin: 3px 0;
  @media only screen and (min-width : 767px){
    font-size: 0.3rem;
  }
}

main #reason {
  background-color: #51816B;
  padding: 2rem 0;
}
main #reason .wrap {
  background-color: #0D382A;
  width: calc(91.2% - 2rem);
  border-radius: 10px;
  padding: 2rem 1rem 1rem;
}
main #reason .wrap h1 {
  font-size: 1.5rem;
  color: #FFF;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
main #reason .wrap h1 .text-xl {
  display: inline-block;
  font-size: 3.875rem;
  margin-right: 0.5rem;
}
main #reason .wrap h1 .textc-y {
  color: #FFEB00;
}
main #reason .wrap h1 .text-l {
  font-size: 2.625rem;
}
main #reason .wrap ul li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF;
  border-radius: 10px;
  gap: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
}
main #reason .wrap ul li .area-img {
  width: 25.53%;
}
main #reason .wrap ul li .area-text {
  width: 64.47%;
}
main #reason .wrap ul li .area-text h2 {
  font-size: 0.75rem;
  background-color: #51816B;
  color: #FFF;
  font-weight: bold;
  border-radius: 100px;
  text-align: center;
  padding: 0.25rem 0;
}
main #reason .wrap ul li .area-text p {
  font-weight: bold;
  margin-top: 0.25rem;
}
main #reason .wrap ul li .area-text p span {
  display: block;
  color: #CC0000;
  font-size: 1.25rem;
}
main #reason .wrap ul li::before {
  display: block;
  position: absolute;
  top: -0.15rem;
  left: -0.15rem;
  font-family: "oswald", sans-serif;
  font-size: 3.75rem;
  color: #B7D0BE;
  font-weight: bold;
  line-height: 1;
}
main #reason .wrap ul li:nth-child(1)::before {
  content: "1";
}
main #reason .wrap ul li:nth-child(2)::before {
  content: "2";
}
main #reason .wrap ul li:nth-child(3)::before {
  content: "3";
}
main #reason .wrap ul li:nth-child(4)::before {
  content: "4";
}
main #reason .wrap ul li:nth-child(5)::before {
  content: "5";
}
main #reason .wrap ul li:nth-child(5) p span {
  font-size: 1rem;
}
main #step {
  background-size: 40px;
}
main #step .tit_sub {
  text-align: center;
}
main #step .tit_sub p {
  color: #FFF;
  font-weight: bold;
  border-radius: 100px;
  background-color: #51816B;
  display: inline-block;
  padding: 0.25rem 1rem;
}
main #step h1 {
  font-size: 1.5rem;
  font-family: "Noto Serif JP", serif;
  color: #0D382A;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  margin-top: 1rem;
}
main #step h1 .text-xl {
  display: inline-block;
  font-size: 3.875rem;
  margin-right: 0.5rem;
}
main #step h1 .text-l {
  font-size: 2.625rem;
}
main #step ul {
  margin-top: 1rem;
}
main #step ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 91.2%;
  margin: 1rem auto 0;
  border-radius: 10px;
  background-color: #FFF;
}
main #step ul li .area-img {
  width: 32.53%;
}
main #step ul li .area-text {
  width: calc(67.47% - 2rem);
  padding: 0 1rem;
}
main #step ul li .area-text h2 {
  font-size: 1.25rem;
  font-family: "noto serif jp", serif;
  font-weight: bold;
  color: #0D382A;
}
main #step ul li .area-text p {
  font-size: 0.75rem;
}
main #step ul li::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #B7D0BE;
  height: 0.9526279442rem;
  width: 2rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
}
main #step ul li:last-child::before {
  display: none;
}
main #support {
  background-color: #B7D0BE;
}
main #support h1 {
  font-size: 1.25rem;
  font-weight: bold;
  color: #0D382A;
  text-align: center;
}
main #support .area-support {
  background-color: #FFF;
  border-radius: 10px;
  width: 91.2%;
  margin: 2rem auto 0;
  position: relative;
  padding: 2rem 0 1.25rem;
}
main #support .area-support h2 {
  background-color: #0D382A;
  border-radius: 100px;
  color: #FFF;
  width: 80%;
  margin: 0 auto 0;
  position: absolute;
  top: -1rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
  padding: 0.25rem 0;
}
main #support .area-support ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
main #support .area-support ul li {
  text-align: center;
  margin-right: 0.5rem;
  padding-right: 0.5rem;
  border-right: 1px solid #ccc;
}
main #support .area-support ul li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}
main #support .area-support ul li h3 {
  font-size: 0.625rem;
  border: 1px solid #0D382A;
  border-radius: 100px;
  text-align: center;
  display: inline-block;
  padding: 0.1rem 1rem;
}
main #support .area-support ul li .img {
  margin: auto;
  margin-top: 0.5rem;
}
main #support .area-support ul li .caption {
  font-size: 0.75rem;
  font-weight: bold;
  color: #0D382A;
  margin-top: 0.5rem;
  display: inline-block;
  border-bottom: 3px solid #FFEB00;
}
main #support .area-support ul li:nth-child(1) .img {
  width: 60%;
  height: 3rem;
}
main #support .area-support ul li:nth-child(2) .img {
  width: 50%;
  height: 3rem;
}
main #support .area-support ul li:nth-child(2) .img img {
  margin-top: 0.5rem;
}
main #support .area-support ul li:nth-child(3) .img {
  width: 60%;
  height: 3rem;
}
main #support .area-support ul li:nth-child(3) .img img {
  margin-top: 0.75rem;
}
main #support .area-counselling {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #51816B;
  width: calc(91.2% - 2rem);
  margin: 1rem auto 0;
  padding: 1rem 1rem 0;
  border-radius: 10px;
  gap: 1rem;
}
main #support .area-counselling .area-text .area-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
main #support .area-counselling .area-text .area-title p {
  width: 2.5rem;
}
main #support .area-counselling .area-text .area-title h2 {
  font-weight: bold;
  color: #FFF;
  line-height: 1.25;
  font-size: 0.875rem;
}
main #support .area-counselling .area-text .area-title h2 span {
  color: #FFEB00;
}
main #support .area-counselling .area-text .caption {
  background-color: #FFF;
  border-radius: 10px;
  font-size: 0.75rem;
  padding: 0.5rem;
  margin-top: 0.5rem;
}
main #support .area-counselling .area-img {
  width: 30.4%;
}
main #construct {
  margin-top: 2rem;
  background-color: #C6C6C6;
}
main #construct .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
main #construct .header h1 {
  font-size: 1.8125rem;
  font-weight: bold;
  margin-top: 1.5rem;
  color: #0D382A;
}
main #construct .header h1 span {
  background-color: #0D382A;
  color: #FFEB00;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin-right: 0.25rem;
}
main #construct .header p {
  width: 35.67%;
}
main #construct .slider-construct {
  margin-top: -2rem;
}
main #construct .slider-construct .slick-list {
  overflow: inherit;
}
main #construct .slider-construct .slider-list {
  background-color: #FFF;
  margin: 0 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  padding: 1.5rem;
}
main #construct .slider-construct .slider-list .question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  font-size: 1.25rem;
  color: #0D382A;
  font-weight: bold;
  gap: 1rem;
}
main #construct .slider-construct .slider-list .question dt {
  font-size: 1.5rem;
  line-height: 1;
}
main #construct .slider-construct .slider-list .anser {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  color: #0D382A;
  gap: 1rem;
  margin-top: 0.5rem;
}
main #construct .slider-construct .slider-list .anser dt {
  color: #CC0000;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}
main #construct .slider-construct .slider-list .anser dd {
  font-size: 1rem;
  font-weight: normal;
  font-size: 0.75rem;
}
main #construct .slider-construct .slider-list .anser dd .area-notice {
  width: 100%;
}
main #construct .slider-construct .slider-list .anser dd .ng-list {
  background-color: #efefef;
  padding: 1rem;
  border-radius: 10px;
}
main #construct .slider-construct .slider-list .anser dd .ng-list li {
  margin-left: 1rem;
  text-indent: -0.75rem;
}
main #construct .slider-construct .slider-list .anser dd .about {
  background-color: #efefef;
  padding: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
}
main #safe {
  padding-top: 1.5rem;
}
main #safe .area-safe {
  width: 91.2%;
  margin: 0 auto;
  background-color: #FFF;
  border-radius: 10px;
  position: relative;
}
main #safe .area-safe h1 {
  text-align: center;
  position: absolute;
  top: -1rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
}
main #safe .area-safe h1 span {
  background-color: #51816B;
  border-radius: 100px;
  padding: 0.25rem 2rem;
  color: #FFF;
  font-weight: bold;
}
main #safe .area-safe p {
  padding: 2rem 2rem;
  font-size: 0.75rem;
}
/* main #faq {
  padding: 0 1rem;
} */
main #faq .wrap h1 {
  text-align: center;
  font-size: 1.875rem;
  font-family: "noto serif jp", serif;
  font-weight: bold;
  color: #716058;
}
main #faq .wrap > ul > li {
  border-radius: 2px;
  padding: 1rem 2rem 1rem 1rem;
  margin-top: 1rem;
  position: relative;
}
main #faq .wrap > ul > li dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  font-size: 0.65rem;
}
main #faq .wrap > ul > li dl dt {
  width: 6%;
  color: #6a6a6a;
}
main #faq .wrap > ul > li dl dd {
  width: 90%;
}
main #faq .wrap > ul > li dl.question dd {
  position: relative;
}
main #faq .wrap > ul > li dl.question dd::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 2px;
  background-color: #6a6a6a;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -1.7rem;
}
main #faq .wrap > ul > li dl.question dd::after {
  content: "";
  display: block;
  height: 0.75rem;
  width: 2px;
  background-color: #6a6a6a;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -1.35rem;
}
main #faq .wrap > ul > li dl.anser {
  border-top: 1px dotted #ffc0e5;
  margin-top: 1rem;
  padding-top: 1rem;
  display: none;
}
main #faq .wrap > ul > li dl.anser dd .area-notice {
  width: 100%;
}
main #faq .wrap > ul > li.on::after {
  display: none;
}
main #faq .wrap > ul > li.on dd::after {
  display: none !important;
}
main #faq .wrap > ul > li.on .anser {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
main #faq .wrap .area-btn {
  text-align: center;
  margin-top: 1rem;
}
main #faq .wrap .area-btn .btn-more {
  display: inline-block;
  border-radius: 100px;
  border: 1px solid #6a6a6a;
  font-size: 0.875rem;
  padding: 0.5rem 3rem;
  background-color: #FFF;
  color: #6a6a6a;
  text-decoration: none;
  font-weight: bold;
}

/***************
 * PCとSPの表示切り替え
***************/

.for-pc { display: flex; }
.for-sp { display: none; }

@media only screen and (max-width : 767px){
  .for-pc { display: none; }
  .for-sp { display: flex; }
}

/***************
 * フッター
***************/
footer .area-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
footer .area-footer h1 {
  width: 33.33%;
}
footer .area-footer ul {
  font-size: 0.875rem;
}
footer .area-footer ul li {
  margin-top: 0.5rem;
}
footer .area-footer ul li a {
  text-decoration: none;
  color: #0D382A;
}
footer small {
  display: block;
  text-align: center;
  margin-top: 2rem;
  font-size: 0.75rem;
  color: #666;
}/*# sourceMappingURL=index.css.map */