@charset "UTF-8";
/*----------------------------------------------------------------------
Reset Style
----------------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
}

img {
  border: 0;
  vertical-align: bottom;
  font-size: 0;
  line-height: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: 600;
  line-height: 1.5;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type='checkbox'],
input[type='radio'] {
  display: none;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/*----------------------------------------------------------------------
Default Style
----------------------------------------------------------------------*/
/* Global */
html, body {
  height: 100%;
}

html {
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: aliased;
  font-size: 62.5%;
  /*10px*/
}

body {
  color: #4D4D4D;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.8;
  font-family: "Arial","Noto Sans JP", Meiryo, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

strong {
  font-weight: 600;
}

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

div#wrap {
  width: 100%;
  margin: 0 auto;
}

/* ベースリンクカラー
----------------------------------------------------*/
a {
  color: #00b08d;
  text-decoration: none;
  transition: all .2s ease;
}

/* 共通
----------------------------------------------------*/
/*ボタン*/
.btn {
  text-align: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  font-weight: 600;
  font-size: 1.8rem;
}
.btn a {
  display: block;
  color: #FFF;
  text-decoration: none;
  background-color: #EF8200;
  border-radius: 12px;
  padding: 16px 20px;
}
.btn a:active, .btn a:hover {
  background-color: #E86200;
}

/*タイトル*/
.sec-ttl {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 16px;
}

.sec-txt {
  margin-bottom: 1em;
}

/*枠*/
.inr {
  padding: 30px 20px;
}

/* ページ内ジャンプ */
.page-jump {
  padding-top: 60px;
  margin-top: -60px;
}

/* ヘッダー
----------------------------------------------------*/
header {
  position: fixed;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background: #FFF;
  z-index: 1000;
  top: 0;
  left: 0;
  /*グローバルナビ*/
}
header .hdr-inr {
  padding: 10px;
  width: 100%;
}
header .hdr-inr .hdr-logo-box .hdr-logotxt {
  font-size: 0.9rem;
  line-height: 1.5;
}
header .hdr-inr .hdr-logo-box .hdr-logo {
  width: 248px;
  height: auto;
}
header .hdr-inr .hdr-logo-box .hdr-logo a {
  display: block;
}
header .hdr-inr .hdr-logo-box .hdr-logo a:hover {
  opacity: 0.7;
}
header .hdr-btn,
header .hdr-tpj-logo {
  display: none;
}
header .nav-box {
  /* アイコンがクリックされたら真ん中の線を透明にする */
  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  /* アイコンがクリックされたらメニューを表示 */
}
header .nav-box .drawer-hidden {
  display: none;
}
header .nav-box .drawer-open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  /* 重なり順を一番上にする */
  cursor: pointer;
  background: #FFF;
}
header .nav-box .drawer-open span,
header .nav-box .drawer-open span::before,
header .nav-box .drawer-open span::after {
  content: '';
  display: block;
  height: 2px;
  width: 24px;
  background: #00b08d;
  transition: 0.5s;
  position: absolute;
}
header .nav-box .drawer-open span::before {
  bottom: 10px;
}
header .nav-box .drawer-open span::after {
  top: 10px;
}
header .nav-box #drawer-input:checked ~ .drawer-open span {
  background: rgba(24, 178, 226, 0);
}
header .nav-box #drawer-input:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
header .nav-box #drawer-input:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
header .nav-box .global-nav {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 60px;
  right: -100%;
  /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #FFF;
  transition: .5s;
  font-weight: 600;
}
header .nav-box .global-nav .nav {
  list-style: none;
  padding-left: 0;
  text-align: center;
  padding-top: 10px;
}
header .nav-box .global-nav .nav li a {
  color: #4D4D4D;
  padding: 12px 20px;
  display: block;
  text-decoration: none;
}
header .nav-box .global-nav .nav li a:active, header .nav-box .global-nav .nav li a:hover {
  color: #00b08d;
}
header .nav-box .global-nav .nav-btn {
  text-align: center;
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
header .nav-box .global-nav .nav-btn li + li {
  margin-top: 15px;
}
header .nav-box .global-nav .nav-btn li a {
  color: #FFF;
  padding: 12px 20px;
  display: block;
  text-decoration: none;
  background: #EF8200;
  border-radius: 12px;
}
header .nav-box #drawer-input:checked ~ .global-nav {
  right: 0px;
  /* メニューを画面に入れる */
}

/*バーガーメニュー開いた時背景固定*/
/*body.fixed {
	width: 100%;
	height: 100%;
	position: fixed;
}*/
/* フッター
----------------------------------------------------*/
footer {
  padding: 30px 20px;
  position: relative;
}
footer .ftr-info {
  text-align: center;
  line-height: 1.5;
}
footer .ftr-info .ftr-logo {
  width: 200px;
  margin: 0 auto 10px;
}
footer .ftr-info .ftr-name {
  font-size: 1.5rem;
}
footer .ftr-info .ftr-adress {
  font-size: 1.3rem;
}
footer .ftr-info .ftr-tel span {
  font-size: 2.0rem;
}
footer .ftr-copy {
  text-align: center;
  font-size: 1.3rem;
  margin-top: 10px;
}
footer .backtotop {
  position: absolute;
  top: -20px;
  right: 10px;
}
footer .backtotop a {
  display: block;
  position: relative;
  width: 60px;
  height: 60px;
  background: #4D4D4D;
  border-radius: 50vh;
}
footer .backtotop a::after {
  display: block;
  content: "";
  position: absolute;
  top: 54%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-top: solid 3px #FFF;
  border-right: solid 3px #FFF;
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
}

.pagejump {
  padding-top: 100px;
  margin-top: -100px;
}

/*----------------------------------------------------------------------
トップページ
----------------------------------------------------------------------*/
/* hero-area
----------------------------------------------------*/
.hero-area {
  padding-top: 60px;
  background-image: url("../img/hero_bgi.png");
  background-repeat: no-repeat;
  background-position: top 60px center;
  background-size: cover;
}
.hero-area .hero-inr {
  padding: 30px 20px;
}
.hero-area .hero-inr .hero-txtbox .hero-subttl {
  font-size: 2.2rem;
  font-weight: 600;
  background: #00b08d;
  color: #FFF;
  padding: 5px 10px;
  line-height: 1.5;
  display: inline-block;
  margin-bottom: 10px;
}
.hero-area .hero-inr .hero-txtbox .hero-copy {
  font-size: 2.7rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.hero-area .hero-inr .hero-txtbox .hero-copy > span {
  display: inline-block;
}
.hero-area .hero-inr .hero-zu {
  width: 90%;
  margin: 0 auto;
  display: block;
}

/* issue-area
----------------------------------------------------*/
.issue-area {
  padding-top: 30px;
  background: #e5f7f4;
  background: linear-gradient(0deg, #e5f7f4 0%, #e5f7f4 75%, white 75%, white 100%);
}
.issue-area .issue-inr {
  position: relative;
}
.issue-area .issue-inr .is-box {
  align-items: stretch !important;
}
.issue-area .issue-inr .is-box .is-detail .issue {
  width: 280px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 2.0rem;
  font-weight: 600;
  background-color: #ECF1F1;
  border-radius: 12px;
  line-height: 1.5;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.issue-area .issue-inr .is-box .is-detail .issue::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: #ECF1F1;
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}
.issue-area .issue-inr .is-box .is-detail .solution {
  padding: 40px 20px 30px;
  position: relative;
}
.issue-area .issue-inr .is-box .is-detail .solution::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background-color: #e5f7f4;
  border-radius: 50vh;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.issue-area .issue-inr .is-box .is-detail .solution::after {
  content: "";
  display: block;
  width: 32px;
  height: 38px;
  background-image: url("../img/arrow.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32px 38px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr {
  background-color: #FFF;
  padding: 40px 20px 20px;
  border-radius: 12px;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr h4 {
  font-size: 2.0rem;
  color: #00b08d;
  text-align: center;
  margin-bottom: 15px;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point {
  display: flex;
  justify-content: center;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point div {
  width: 30%;
  aspect-ratio: 1 / 1;
  text-align: center;
  border-radius: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
  font-size: 1.4rem;
  margin-bottom: 15px;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point div:nth-of-type(n+2) {
  margin-left: 5%;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point .solution-p-g {
  border: 1px solid #00ae8c;
  color: #00ae8c;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point .solution-p-o {
  border: 1px solid #EF8200;
  color: #EF8200;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point .solution-p-b {
  border: 1px solid #036EB7;
  color: #036EB7;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-txt {
  font-size: 1.4rem;
  margin-bottom: 1em;
  line-height: 1.5;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-txt dt:nth-of-type(n+2) {
  margin-top: 0.75em;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-txt .solution-txt-staff {
  color: #036eb8;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-txt .solution-txt-manager {
  color: #ea5514;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-txt .solution-txt-residents {
  color: #43a5a0;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img {
  position: relative;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img a {
  display: block;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img a img {
  border-radius: 12px;
  border: 1px solid #CCC;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img .solution-img01a {
  width: 90%;
  margin-bottom: 56px;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img .solution-img01b {
  width: 80%;
  position: absolute;
  right: 0;
  bottom: 36px;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img .solution-img04a {
  width: 80%;
  margin-bottom: 70px;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img .solution-img04b {
  width: 80%;
  position: absolute;
  right: 0;
  bottom: 36px;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img .solution-zoom {
  margin-top: 8px;
  position: relative;
  padding-left: 26px;
  color: #00b08d;
}
.issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img .solution-zoom::before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  left: 0;
  top: 50%;
  background-image: url("../img/icon_zoom.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.issue-area .issue-inr .arrows-prev {
  position: absolute;
  display: block;
  top: 45px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50vh;
  background-color: #00b08d;
  z-index: 10;
}
.issue-area .issue-inr .arrows-prev::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid #FFF;
  border-left: 2px solid #FFF;
  transform: translateY(-50%) translateX(50%) rotate(-45deg);
}
.issue-area .issue-inr .arrows-next {
  position: absolute;
  display: block;
  top: 45px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50vh;
  background-color: #00b08d;
  z-index: 10;
}
.issue-area .issue-inr .arrows-next::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
}

/* bfms-area
----------------------------------------------------*/
.bfms-area .bfms-ttl {
  text-align: center;
  margin-bottom: 16px;
  font-size: 2.0rem;
}
.bfms-area .bfms-ttl img {
  width: 270px;
}
.bfms-area .bfms-subttl {
  font-size: 1.8rem;
  color: #00b08d;
  margin-bottom: 1em;
}
.bfms-area .bfms-subttl br {
  display: none;
}
.bfms-area .bfms-box .bfms {
  background: #e5f7f4;
  border-radius: 12px;
  padding: 20px;
}
.bfms-area .bfms-box .bfms .bfms-ttlbox {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.bfms-area .bfms-box .bfms .bfms-ttlbox h3 {
  font-size: 2.2rem;
  order: 2;
}
.bfms-area .bfms-box .bfms .bfms-ttlbox .bfms-icon {
  width: 80px;
  background: #FFF;
  border-radius: 50vh;
  margin-right: 15px;
  order: 1;
}
.bfms-area .bfms-box .bfms-arrow {
  width: 50px;
  transform: rotate(90deg);
  margin: 13px auto;
}

/* function-area
----------------------------------------------------*/
.function-area .tab .tablist {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.function-area .tab .tablist .tablist_switch {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.5rem;
  color: #4D4D4D;
}
.function-area .tab [role="tab"][aria-selected="true"] {
  color: #00b08d;
  font-weight: 600;
  font-size: 1.7rem;
}
.function-area .tab [role="tabpanel"] {
  display: none;
}
.function-area .tab [role="tabpanel"].is-open {
  display: block;
}
.function-area .function-box .function {
  background: #e5f7f4;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.function-area .function-box .function .function-icon {
  width: 86px;
  margin: 20px auto;
}
.function-area .function-box .function h3 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 10px;
}
.function-area .function-box .function .function-detail {
  margin-top: 1em;
}
.function-area .function-box .function .function-detail summary {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00b08d;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  font-size: 1.8rem;
}
.function-area .function-box .function .function-detail summary::-webkit-details-marker {
  display: none;
}
.function-area .function-box .function .function-detail summary .toggle {
  display: block;
  width: 20px;
  height: 20px;
  background: #00b08d;
  border-radius: 50vh;
  position: relative;
  margin-left: 4px;
}
.function-area .function-box .function .function-detail summary .toggle::before, .function-area .function-box .function .function-detail summary .toggle::after {
  content: "";
  display: block;
  width: 11px;
  height: 2px;
  background: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all .2s ease;
}
.function-area .function-box .function .function-detail summary .toggle::before {
  transform: translateX(-50%) translateY(-50%);
}
.function-area .function-box .function .function-detail summary .toggle::after {
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.function-area .function-box .function .function-detail .function-img {
  margin-top: 20px;
  position: relative;
}
.function-area .function-box .function .function-detail .function-img a {
  display: block;
}
.function-area .function-box .function .function-detail .function-img .function-img01a {
  width: 90%;
}
.function-area .function-box .function .function-detail .function-img .function-img01b {
  width: 40%;
  position: absolute;
  right: 0;
  top: 30px;
}
.function-area .function-box .function .function-detail .function-img img {
  border-radius: 12px;
  border: 1px solid #CCC;
}
.function-area .function-box .function .function-detail .function-img .function-zoom {
  margin-top: 8px;
  position: relative;
  padding-left: 26px;
  color: #00b08d;
}
.function-area .function-box .function .function-detail .function-img .function-zoom::before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  left: 0;
  top: 50%;
  background-image: url("../img/icon_zoom.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.function-area .function-box .function .function-detail[open] summary .toggle::after {
  opacity: 0;
}

/* contact-area
----------------------------------------------------*/
.contact-area {
  background-image: url("../img/hero_bgi.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
.contact-area .contact-box div {
  text-align: center;
  font-weight: 600;
  font-size: 1.8rem;
}
.contact-area .contact-box div + div {
  margin-top: 20px;
}
.contact-area .contact-box div a {
  color: #FFF;
  padding: 16px 20px;
  display: block;
  text-decoration: none;
  background: #EF8200;
  border-radius: 12px;
}
.contact-area .contact-box div a:active, .contact-area .contact-box div a:hover {
  background: #E86200;
}

/* howtouse-area
----------------------------------------------------*/
.howtouse-area .howtouse-box .howtouse {
  background: #e5f7f4;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.howtouse-area .howtouse-box .howtouse:nth-last-of-type(1) {
  margin-bottom: 0;
}
.howtouse-area .howtouse-box .howtouse .howtouse-icon {
  width: 88px;
  margin: 15px auto;
}
.howtouse-area .howtouse-box .howtouse h3 {
  text-align: center;
  font-size: 2.2rem;
}
.howtouse-area .howtouse-box .howtouse h4 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #00b08d;
}

/* case-area
----------------------------------------------------*/
.case-area {
  background: #e5f7f4;
}
.case-area .case-box .case-imgbox {
  margin-bottom: 20px;
}
.case-area .case-box .case-imgbox h3 {
  margin-bottom: 16px;
}
.case-area .case-box .case-imgbox h3 > span {
  display: block;
  width: 250px;
  height: auto;
}
.case-area .case-box .case-imgbox > div {
  margin-bottom: 20px;
}
.case-area .case-box .case-imgbox > div img {
  border-radius: 12px;
}
.case-area .case-box .case-imgbox p {
  font-size: 1.8rem;
}
.case-area .case-box .case-txt > div:nth-of-type(1) {
  margin-bottom: 20px;
}
.case-area .case-box .case-txt > div h4 {
  font-size: 2.0rem;
}

/* plan-area
----------------------------------------------------*/
.plan-area {
  background: #e5f7f4;
}
.plan-area .plan-box {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plan-area .plan-box .plan-cost {
  background: #00b08d;
  border-radius: 50vh;
  padding: 20px;
  text-align: center;
  font-weight: 600;
  line-height: 1.5;
  width: 45%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-area .plan-box .plan-cost h3 {
  text-align: center;
  font-size: 2.2rem;
  color: #FFF;
}
.plan-area .plan-box .plan-plus {
  font-size: 3.2rem;
  text-align: center;
  width: 10%;
}

/* faq-area
----------------------------------------------------*/
.faq-area {
  background: #e5f7f4;
}
.faq-area .faq-box .faq {
  margin-bottom: 10px;
}
.faq-area .faq-box .faq summary {
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
  background: #FFF;
  padding: 16px 32px 16px 40px;
  position: relative;
  line-height: 1.5;
}
.faq-area .faq-box .faq summary::-webkit-details-marker {
  display: none;
}
.faq-area .faq-box .faq summary::before {
  content: "Q";
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 2.4rem;
  color: #00b08d;
}
.faq-area .faq-box .faq summary .toggle {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50vh;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.faq-area .faq-box .faq summary .toggle::before, .faq-area .faq-box .faq summary .toggle::after {
  content: "";
  display: block;
  width: 11px;
  height: 2px;
  background: #00b08d;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all .2s ease;
}
.faq-area .faq-box .faq summary .toggle::before {
  transform: translateX(-50%) translateY(-50%);
}
.faq-area .faq-box .faq summary .toggle::after {
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.faq-area .faq-box .faq div {
  background: #FFF;
  padding: 16px 20px 20px 40px;
  position: relative;
}
.faq-area .faq-box .faq div::before {
  content: "A";
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 2.4rem;
  color: #EF8200;
  font-weight: 600;
}
.faq-area .faq-box .faq[open] summary .toggle::after {
  opacity: 0;
}

/*=====================================================================
タブレット
=====================================================================*/
@media (min-width: 560px) {
  /* 共通
  ----------------------------------------------------*/
  /*タイトル*/
  .sec-ttl {
    font-size: 3.2rem;
  }

  .sec-txt {
    text-align: center;
  }
  .sec-txt span {
    display: inline-block;
  }

  /*枠*/
  .inr {
    padding: 50px 24px;
  }

  .br-sp {
    display: none;
  }

  /* ヘッダー
  ----------------------------------------------------*/
  header .hdr-inr .hdr-tpj-logo {
    display: block;
    width: 120px;
    position: absolute;
    top: 12px;
    right: 70px;
  }
  header .hdr-inr .hdr-btn {
    display: block;
    width: 120px;
    position: absolute;
    top: 14px;
    right: 210px;
    text-align: center;
    font-weight: 600;
  }
  header .hdr-inr .hdr-btn > a {
    display: block;
    color: #FFF;
    background: #ef8200;
    border-radius: 8px;
  }
  header .hdr-inr .hdr-btn > a:hover {
    background: #e86200;
  }
  header .hdr-inr .nav-box .global-nav .nav {
    padding-top: 30px;
  }
  header .hdr-inr .nav-box .global-nav .nav li a {
    padding: 16px 20px;
  }
  header .hdr-inr .nav-box .global-nav .nav-btn {
    padding-left: 0px;
    padding-right: 0px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
  }
  header .hdr-inr .nav-box .global-nav .nav-btn li {
    width: 47%;
  }
  header .hdr-inr .nav-box .global-nav .nav-btn li + li {
    margin-top: 0px;
  }
  header .hdr-inr .nav-box .global-nav .nav-btn li a {
    padding: 12px 20px;
  }

  /*----------------------------------------------------------------------
  トップページ
  ----------------------------------------------------------------------*/
  /* hero-area
  ----------------------------------------------------*/
  .hero-area .hero-inr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
  }
  .hero-area .hero-inr .hero-txtbox {
    width: 56%;
  }
  .hero-area .hero-inr .hero-txtbox .hero-copy {
    font-size: 3.2rem;
  }
  .hero-area .hero-inr .hero-zu {
    width: 40%;
    margin-right: 0;
  }

  /* issue-area
  ----------------------------------------------------*/
  .issue-area {
    padding-top: 0px;
    padding-bottom: 30px;
    background: linear-gradient(0deg, #e5f7f4 0%, #e5f7f4 78%, white 78%, white 100%);
  }
  .issue-area .issue-inr {
    position: relative;
  }
  .issue-area .issue-inr .is-box .is-detail .issue {
    margin: 0 auto 50px;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr {
    min-height: 690px;
    display: flex;
    flex-direction: column;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-txt {
    font-size: 1.5rem;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img {
    margin-top: auto;
  }

  /* bfms-area
  ----------------------------------------------------*/
  .bfms-area .bfms-ttl {
    text-align: center;
    margin-bottom: 16px;
    font-size: 2.4rem;
  }
  .bfms-area .bfms-ttl img {
    width: 380px;
  }
  .bfms-area .bfms-subttl {
    font-size: 2.2rem;
    text-align: center;
  }
  .bfms-area .bfms-subttl br {
    display: block;
  }
  .bfms-area .bfms-box {
    display: flex;
    justify-content: space-between;
  }
  .bfms-area .bfms-box .bfms {
    width: 30%;
  }
  .bfms-area .bfms-box .bfms .bfms-ttlbox {
    display: block;
    text-align: center;
  }
  .bfms-area .bfms-box .bfms .bfms-ttlbox h3 {
    font-size: 2.2rem;
    margin-bottom: 10px;
  }
  .bfms-area .bfms-box .bfms .bfms-ttlbox .bfms-icon {
    margin: 0 auto;
  }
  .bfms-area .bfms-box .bfms p {
    font-size: 1.4rem;
  }
  .bfms-area .bfms-box .bfms-arrow {
    width: 5%;
    transform: rotate(0deg);
    margin: 0;
    display: flex;
    align-items: center;
  }

  /* function-area
  ----------------------------------------------------*/
  .function-area .tab .tablist {
    justify-content: center;
  }
  .function-area .tab .tablist .tablist_switch {
    font-size: 1.8rem;
    padding: 10px 20px;
  }
  .function-area .tab [role="tab"][aria-selected="true"] {
    font-size: 2.2rem;
  }
  .function-area .function-box {
    display: flex;
    flex-wrap: wrap;
  }
  .function-area .function-box .function {
    width: 47%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
  }
  .function-area .function-box .function:nth-of-type(2n) {
    margin-left: 6%;
  }
  .function-area .function-box .function .function-icon {
    width: 72px;
    margin: 15px auto;
  }
  .function-area .function-box .function .function-detail {
    margin-top: auto;
  }
  .function-area .function-box .function .function-detail summary {
    padding-top: 1em;
  }

  /* contact-area
  ----------------------------------------------------*/
  .contact-area .contact-box div {
    width: 47%;
    font-size: 2.0rem;
    margin-left: auto;
    margin-right: auto;
  }
  .contact-area .contact-box div + div {
    margin-top: 0px;
  }

  /* howtouse-area
  ----------------------------------------------------*/
  .howtouse-area .howtouse-box {
    display: flex;
    justify-content: space-between;
  }
  .howtouse-area .howtouse-box .howtouse {
    width: 31.5%;
    margin-bottom: 0px;
    padding: 15px;
  }
  .howtouse-area .howtouse-box .howtouse .howtouse-icon {
    width: 72px;
    margin: 10px auto;
  }
  .howtouse-area .howtouse-box .howtouse h3 {
    font-size: 2.0rem;
  }
  .howtouse-area .howtouse-box .howtouse h4 {
    font-size: 1.7rem;
  }

  /* case-area
  ----------------------------------------------------*/
  .case-area .case-box .case-imgbox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .case-area .case-box .case-imgbox h3 {
    width: 100%;
    margin-bottom: 16px;
    display: block;
  }
  .case-area .case-box .case-imgbox h3 > span {
    display: block;
    width: 250px;
    height: auto;
  }
  .case-area .case-box .case-imgbox > div {
    margin-bottom: 20px;
    width: 47%;
  }
  .case-area .case-box .case-imgbox > div img {
    border-radius: 12px;
  }
  .case-area .case-box .case-imgbox p {
    width: 47%;
  }
  .case-area .case-box .case-txt > div:nth-of-type(1) {
    margin-bottom: 20px;
  }
  .case-area .case-box .case-txt > div h4 {
    font-size: 2.0rem;
  }

  /* plan-area
  ----------------------------------------------------*/
  .plan-area .plan-box {
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 440px;
  }
  .plan-area .plan-box .plan-cost {
    width: 180px;
  }
  .plan-area .plan-box .plan-cost h3 {
    font-size: 2.2rem;
  }
  .plan-area .plan-box .plan-plus {
    font-size: 4.0rem;
    text-align: center;
    width: 16%;
  }
}
/*=====================================================================
デスクトップ
=====================================================================*/
@media (min-width: 961px) {
  /*電話番号無効-*/
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }

  /* 共通
  ----------------------------------------------------*/
  /*タイトル*/
  .sec-ttl {
    font-size: 3.6rem;
  }

  .sec-txt {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }

  /*枠*/
  .inr {
    padding: 0px;
    max-width: 1080px;
    width: 96%;
    margin: 0 auto;
  }

  /* ページ内ジャンプ */
  .page-jump {
    padding-top: 100px;
    margin-top: -100px;
  }

  /* ヘッダー
  ----------------------------------------------------*/
  header {
    height: 100px;
    display: block;
  }
  header .hdr-inr {
    max-width: 1280px;
    width: 96%;
    margin: 0 auto;
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }
  header .hdr-inr .hdr-logo-box {
    margin-top: 8px;
  }
  header .hdr-inr .hdr-logo-box .hdr-logotxt {
    font-size: 1.4rem;
  }
  header .hdr-inr .hdr-logo-box .hdr-logo {
    width: 432px;
  }
  header .hdr-inr .hdr-tpj-logo {
    width: 160px;
    position: absolute;
    top: 12px;
    right: 0px;
  }
  header .hdr-inr .hdr-tpj-logo a {
    display: block;
  }
  header .hdr-inr .hdr-tpj-logo a:hover {
    opacity: 0.7;
  }
  header .hdr-inr .hdr-btn {
    width: 140px;
    top: 16px;
    right: 180px;
    text-align: center;
  }
  header .hdr-inr .nav-box {
    width: calc(100% - 30%);
  }
  header .hdr-inr .nav-box .drawer-hidden,
  header .hdr-inr .nav-box .drawer-open {
    display: none;
  }
  header .hdr-inr .nav-box .global-nav {
    height: auto;
    font-weight: 600;
    background: none;
    position: absolute;
    bottom: 10px;
    right: 0;
    width: calc(100% - 442px);
  }
  header .hdr-inr .nav-box .global-nav .nav {
    padding-top: 0;
    display: flex;
    justify-content: flex-end;
    font-size: 1.6rem;
  }
  header .hdr-inr .nav-box .global-nav .nav li + li {
    margin-left: 2em;
  }
  header .hdr-inr .nav-box .global-nav .nav li a {
    padding: 0;
  }
  header .hdr-inr .nav-box .global-nav .nav-btn {
    display: none;
  }

  /*----------------------------------------------------------------------
  トップページ
  ----------------------------------------------------------------------*/
  /* hero-area
  ----------------------------------------------------*/
  .hero-area {
    padding-top: 100px;
  }
  .hero-area .hero-inr {
    width: 96%;
    max-width: 1280px;
    padding: 80px 0;
    margin: 0 auto;
  }
  .hero-area .hero-inr .hero-txtbox {
    width: 60%;
  }
  .hero-area .hero-inr .hero-txtbox .hero-subttl {
    font-size: 3.2rem;
    margin-bottom: 16px;
    padding: 4px 16px;
  }
  .hero-area .hero-inr .hero-txtbox .hero-copy {
    font-size: 6.2rem;
  }
  .hero-area .hero-inr .hero-zu {
    width: 36%;
    margin-right: 0;
  }

  /* issue-area
  ----------------------------------------------------*/
  .issue-area {
    padding-top: 80px;
    padding-bottom: 80px;
    background: linear-gradient(0deg, #e5f7f4 0%, #e5f7f4 74%, white 74%, white 100%);
  }
  .issue-area .issue-inr {
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
  }
  .issue-area .issue-inr .is-box .is-detail .issue {
    margin: 0 auto 60px;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr {
    min-height: 695px;
    display: flex;
    flex-direction: column;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr h4 {
    font-size: 2.4rem;
    line-height: 1.2;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-mtb {
    margin-top: 20px;
    margin-bottom: 24px;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point {
    display: flex;
    justify-content: center;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point div {
    width: 31.5%;
    aspect-ratio: 1 / 1;
    text-align: center;
    border-radius: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point div:nth-of-type(n+2) {
    margin-left: 2.75%;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-txt {
    font-size: 1.6rem;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img {
    margin-top: auto;
  }

  /* bfms-area
  ----------------------------------------------------*/
  .bfms-area {
    padding-top: 80px;
    padding-bottom: 0px;
  }
  .bfms-area .bfms-ttl {
    font-size: 3.0rem;
    margin-bottom: 30px;
  }
  .bfms-area .bfms-ttl img {
    width: 480px;
  }
  .bfms-area .bfms-subttl {
    font-size: 2.6rem;
  }
  .bfms-area .bfms-box .bfms {
    padding: 30px;
  }
  .bfms-area .bfms-box .bfms .bfms-ttlbox h3 {
    font-size: 2.4rem;
    margin-bottom: 10px;
  }
  .bfms-area .bfms-box .bfms .bfms-ttlbox .bfms-icon {
    width: 114px;
  }
  .bfms-area .bfms-box .bfms p {
    font-size: 1.6rem;
  }

  /* function-area
  ----------------------------------------------------*/
  .function-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .function-area .tab .tablist {
    justify-content: center;
  }
  .function-area .tab .tablist .tablist_switch {
    font-size: 2.0rem;
    padding: 16px 30px;
  }
  .function-area .tab .tablist [role="tab"][aria-selected="true"] {
    font-size: 2.6rem;
  }
  .function-area .function-box .function {
    width: 30%;
    margin-right: 5%;
  }
  .function-area .function-box .function:nth-of-type(2n) {
    margin-left: 0;
  }
  .function-area .function-box .function:nth-of-type(3n) {
    margin-right: 0;
  }
  .function-area .function-box .function .function-icon {
    width: 86px;
    margin: 20px auto;
  }

  /* contact-area
  ----------------------------------------------------*/
  .contact-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .contact-area .contact-box {
    display: flex;
    justify-content: space-between;
    width: 920px;
    margin: 0 auto;
  }
  .contact-area .contact-box div {
    width: 47%;
    font-size: 2.0rem;
  }
  .contact-area .contact-box div + div {
    margin-top: 0px;
  }

  /* howtouse-area
  ----------------------------------------------------*/
  .howtouse-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .howtouse-area .howtouse-box .howtouse {
    width: 30%;
    padding: 30px;
  }
  .howtouse-area .howtouse-box .howtouse .howtouse-icon {
    width: 100px;
    margin: 15px auto;
  }
  .howtouse-area .howtouse-box .howtouse h3 {
    font-size: 2.4rem;
  }
  .howtouse-area .howtouse-box .howtouse h4 {
    font-size: 2.0rem;
  }

  /* case-area
  ----------------------------------------------------*/
  .case-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .case-area .case-box {
    display: flex;
    justify-content: space-between;
  }
  .case-area .case-box .case-imgbox {
    margin-bottom: 0px;
    width: 47%;
    display: block;
  }
  .case-area .case-box .case-imgbox > div {
    display: block;
    width: 100%;
  }
  .case-area .case-box .case-imgbox > div img {
    border-radius: 12px;
  }
  .case-area .case-box .case-imgbox p {
    width: 100%;
    font-size: 1.8rem;
  }
  .case-area .case-box .case-txt {
    width: 47%;
  }
  .case-area .case-box .case-txt h3 {
    font-size: 2.4rem;
  }
  .case-area .case-box .case-txt h4 {
    font-size: 2.0rem;
  }

  /* plan-area
  ----------------------------------------------------*/
  .plan-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .plan-area .plan-box {
    margin: 0 auto 40px;
  }
  .plan-area .plan-box .plan-cost h3 {
    font-size: 2.4rem;
  }

  /* faq-area
  ----------------------------------------------------*/
  .faq-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .faq-area .faq-box {
    width: 800px;
    margin: 0 auto;
  }
  .faq-area .faq-box .faq {
    margin-bottom: 20px;
  }
  .faq-area .faq-box .faq summary {
    font-size: 1.8rem;
    padding-left: 50px;
  }
  .faq-area .faq-box .faq summary::before {
    font-size: 3.0rem;
    left: 15px;
    top: 6px;
  }
  .faq-area .faq-box .faq summary .toggle {
    width: 13px;
    height: 13px;
    right: 20px;
  }
  .faq-area .faq-box .faq summary .toggle::before, .faq-area .faq-box .faq summary .toggle::after {
    width: 13px;
  }
  .faq-area .faq-box .faq div {
    padding-left: 50px;
  }
  .faq-area .faq-box .faq div::before {
    top: 5px;
    left: 15px;
    font-size: 3.0rem;
  }
}
/*=====================================================================
印刷
=====================================================================*/
@media print {
  @page {
    margin: 10mm;
    size: 210mm 297mm;
    /* A4縦サイズの場合 */
  }
  body {
    -webkit-print-color-adjust: exact;
    /* 印刷時でも背景色や背景画像を表示 */
    width: 1280px;
    /* 印刷時の全ページ幅を統一（px数値はお好みで） */
    margin: 0 auto;
    zoom: 0.8;
    /* なるべく多くのブラウザで切れないようにするため */
  }

  /* 共通
  ----------------------------------------------------*/
  /*タイトル*/
  .sec-ttl {
    font-size: 3.6rem;
  }

  .sec-txt {
    font-size: 1.8rem;
  }

  /*枠*/
  .inr {
    padding: 0px;
    max-width: 1080px;
    width: 96%;
    margin: 0 auto;
  }

  /* ページ内ジャンプ */
  .page-jump {
    padding-top: 100px;
    margin-top: -100px;
  }

  /* ヘッダー
  ----------------------------------------------------*/
  header {
    height: 100px;
    display: block;
    position: static;
  }
  header .hdr-inr {
    max-width: 1280px;
    width: 96%;
    margin: 0 auto;
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }
  header .hdr-inr .hdr-logo-box {
    margin-top: 8px;
  }
  header .hdr-inr .hdr-logo-box .hdr-logotxt {
    font-size: 1.4rem;
  }
  header .hdr-inr .hdr-logo-box .hdr-logo {
    width: 432px;
  }
  header .hdr-inr .hdr-tpj-logo {
    width: 160px;
    position: absolute;
    top: 12px;
    right: 0px;
  }
  header .hdr-inr .nav-box {
    width: calc(100% - 30%);
  }
  header .hdr-inr .nav-box .drawer-hidden,
  header .hdr-inr .nav-box .drawer-open {
    display: none;
  }
  header .hdr-inr .nav-box .global-nav {
    height: auto;
    font-weight: 600;
    background: none;
    position: absolute;
    bottom: 10px;
    right: 0;
  }
  header .hdr-inr .nav-box .global-nav .nav {
    padding-top: 0;
    display: flex;
    justify-content: flex-end;
    font-size: 1.6rem;
  }
  header .hdr-inr .nav-box .global-nav .nav li + li {
    margin-left: 2em;
  }
  header .hdr-inr .nav-box .global-nav .nav li a {
    padding: 0;
  }
  header .hdr-inr .nav-box .global-nav .nav-btn {
    display: none;
  }

  /*----------------------------------------------------------------------
  トップページ
  ----------------------------------------------------------------------*/
  /* hero-area
  ----------------------------------------------------*/
  .hero-area {
    padding-top: 0;
    background-repeat: no-repeat;
    background-position: top 0px center;
    background-size: cover;
  }
  .hero-area .hero-inr {
    width: 96%;
    max-width: 1280px;
    padding: 60px 0;
    margin: 0 auto;
  }
  .hero-area .hero-inr .hero-txtbox {
    width: 60%;
  }
  .hero-area .hero-inr .hero-txtbox .hero-subttl {
    font-size: 3.2rem;
    margin-bottom: 16px;
    padding: 4px 16px;
  }
  .hero-area .hero-inr .hero-txtbox .hero-copy {
    font-size: 6.0rem;
  }
  .hero-area .hero-inr .hero-zu {
    width: 36%;
    margin-right: 0;
  }

  /* issue-area
  ----------------------------------------------------*/
  .issue-area {
    padding: 60px 0;
    background: linear-gradient(0deg, #e5f7f4 0%, #e5f7f4 75%, white 75%, white 100%);
  }
  .issue-area .issue-inr {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
  }
  .issue-area .issue-inr .is-box .is-detail {
    width: 20%;
  }
  .issue-area .issue-inr .is-box .is-detail .issue {
    margin: 0 auto 60px;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr {
    min-height: 695px;
    display: flex;
    flex-direction: column;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr h4 {
    font-size: 2.2rem;
    line-height: 1.2;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-mtb {
    margin-top: 20px;
    margin-bottom: 24px;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point {
    display: flex;
    justify-content: center;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point div {
    width: 31.5%;
    aspect-ratio: 1 / 1;
    text-align: center;
    border-radius: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-point div:nth-of-type(n+2) {
    margin-left: 2.75%;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-txt {
    font-size: 1.6rem;
  }
  .issue-area .issue-inr .is-box .is-detail .solution .solution-inr .solution-img {
    margin-top: auto;
  }

  /* bfms-area
  ----------------------------------------------------*/
  .bfms-area {
    padding-top: 80px;
    padding-bottom: 0px;
  }
  .bfms-area .bfms-ttl {
    font-size: 3.0rem;
    margin-bottom: 30px;
  }
  .bfms-area .bfms-ttl img {
    width: 480px;
  }
  .bfms-area .bfms-subttl {
    font-size: 2.6rem;
  }
  .bfms-area .bfms-box .bfms {
    padding: 30px;
  }
  .bfms-area .bfms-box .bfms .bfms-ttlbox h3 {
    font-size: 2.4rem;
    margin-bottom: 10px;
  }
  .bfms-area .bfms-box .bfms .bfms-ttlbox .bfms-icon {
    width: 114px;
  }
  .bfms-area .bfms-box .bfms p {
    font-size: 1.6rem;
  }

  /* function-area
  ----------------------------------------------------*/
  .function-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .function-area .tab .tablist {
    justify-content: center;
  }
  .function-area .tab .tablist .tablist_switch {
    font-size: 2.0rem;
    padding: 16px 30px;
  }
  .function-area .tab .tablist [role="tab"][aria-selected="true"] {
    font-size: 2.6rem;
  }
  .function-area .function-box .function {
    width: 30%;
    margin-right: 5%;
  }
  .function-area .function-box .function:nth-of-type(2n) {
    margin-left: 0;
  }
  .function-area .function-box .function:nth-of-type(3n) {
    margin-right: 0;
  }
  .function-area .function-box .function .function-icon {
    width: 86px;
    margin: 20px auto;
  }

  /* contact-area
  ----------------------------------------------------*/
  .contact-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .contact-area .contact-box {
    display: flex;
    justify-content: space-between;
    width: 920px;
    margin: 0 auto;
  }
  .contact-area .contact-box div {
    width: 47%;
    font-size: 2.0rem;
  }
  .contact-area .contact-box div + div {
    margin-top: 0px;
  }

  /* howtouse-area
  ----------------------------------------------------*/
  .howtouse-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .howtouse-area .howtouse-box .howtouse {
    width: 30%;
    padding: 30px;
  }
  .howtouse-area .howtouse-box .howtouse .howtouse-icon {
    width: 100px;
    margin: 15px auto;
  }
  .howtouse-area .howtouse-box .howtouse h3 {
    font-size: 2.2rem;
  }
  .howtouse-area .howtouse-box .howtouse h4 {
    font-size: 1.9rem;
  }

  /* case-area
  ----------------------------------------------------*/
  .case-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .case-area .case-box {
    display: flex;
    justify-content: space-between;
  }
  .case-area .case-box .case-imgbox {
    margin-bottom: 0px;
    width: 47%;
    display: block;
  }
  .case-area .case-box .case-imgbox > div {
    display: block;
    width: 100%;
  }
  .case-area .case-box .case-imgbox > div img {
    border-radius: 12px;
  }
  .case-area .case-box .case-imgbox p {
    width: 100%;
    font-size: 1.8rem;
  }
  .case-area .case-box .case-txt {
    width: 47%;
  }
  .case-area .case-box .case-txt h3 {
    font-size: 2.4rem;
  }
  .case-area .case-box .case-txt h4 {
    font-size: 2.0rem;
  }

  /* plan-area
  ----------------------------------------------------*/
  .plan-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .plan-area .plan-box {
    margin: 0 auto 40px;
  }
  .plan-area .plan-box .plan-cost h3 {
    font-size: 2.4rem;
  }

  /* faq-area
  ----------------------------------------------------*/
  .faq-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .faq-area .faq-box {
    width: 800px;
    margin: 0 auto;
  }
  .faq-area .faq-box .faq {
    margin-bottom: 20px;
  }
}