#mainimage {
position: relative;
z-index: 1;
background-image: url("../image/mainimage_sp.jpg");
background-size: cover;
margin: 0px auto 0 auto;
padding: 120px 0 120px 0;
box-sizing: border-box;
display: block;
width: 100%;
}
#mainimage:after {
content: '';
display: block;
width: 100%;
height: 80px;
background-image: url("../image/header_bg.png");
background-size: cover;
vertical-align: middle;
position: absolute;
bottom: 0;
transform: rotate(180deg);
z-index: 3;
}
#mainimage h2 {
position: relative;
z-index: 10;
width: 20%;
display: block;
margin: 0px auto 0 auto;
}
#mainimage .icon1,
#mainimage .icon2,
#mainimage .icon3,
#mainimage .icon4 {
position: absolute;
z-index: 10;
width: 18%;
}
#mainimage .p1,
#mainimage .p2,
#mainimage .p3,
#mainimage .bt {
position: absolute;
z-index: 10;
width: 30%;
}
#mainimage .illust1 {
position: absolute;
z-index: 10;
width: 25%;
}
#mainimage .bt {
width: 38%;
top: 380px;
right: 3%;
}
#mainimage .bt img {
display: block;
width: 100%;
transition: 
transform 0.6s ease,
filter 0.6s ease,
box-shadow 0.6s ease;
}
#mainimage .bt img:hover {
 filter: brightness(1.4) drop-shadow(0 0 30px rgba(255,241,0,0.8));
}
#mainimage .icon1 {
top: 120px;
left: 60%;
}
#mainimage .icon2 {
top: 150px;
left: 80%;
}
#mainimage .icon3 {
top: 200px;
left: 5%;
}
#mainimage .icon4 {
top: 250px;
left: 20%;
}
#mainimage .p1 img,
#mainimage .p2 img,
#mainimage .p3 img {
width: 100%;
height: auto;
border-radius: 8px;
}
#mainimage .p1 {
top: 150px;
left: 10%;
z-index: 9;
}
#mainimage .p2 {
top: 200px;
left: 65%;
z-index: 9;
}
#mainimage .p3 {
top: 300px;
left: 5%;
z-index: 9;
}
#mainimage .illust1 {
top: 400px;
left: 5%;
z-index: 9;
}
.icon1 img,
.icon2 img,
.icon3 img,
.icon4 img {
animation: fuwaWind 7s ease-in-out infinite;
transform-origin: center bottom;
will-change: transform;
}
@keyframes fuwaWind {
0%   { transform: rotate(0deg); }
12%  { transform: rotate(5deg); }
25%  { transform: rotate(-8deg); }
37%  { transform: rotate(2deg); }
50%  { transform: rotate(-5deg); }
62%  { transform: rotate(1.5deg); }
75%  { transform: rotate(-1deg); }
87%  { transform: rotate(8deg); }
100% { transform: rotate(0deg); }
}

#page {
position: relative;
z-index: 5;
}
#page .marquee {
overflow: hidden;
white-space: nowrap;
width: 100%;
}
#page .marquee__inner {
display: inline-flex;
color: #f8f2e8;
animation: marqueeAnim 25s linear infinite;
}
#page .marquee__inner span {
padding-right: 3rem; /* 文章の間隔（お好み） */
display: inline-block;
font-family: poppins, sans-serif;
font-weight: 800;
font-size: clamp(3.125rem, -4.732rem + 19.64vw, 10rem);
line-height: 1em;
}
@keyframes marqueeAnim {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%); /* ★2つのテキストの半分ぶん流す */
}
}
#page .copy {
width: 95%;
margin: 0px auto 0 auto;
padding: 0px 0 80px 0;
background-image: url("../image/copy_bg.png");
background-size: 60%;
background-position: 90% bottom;
}
#page .copy p {
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 2em;
margin: 2em auto 0 auto;
}

#simple_slider {
  overflow: hidden;
  width: 100%;
  margin: 40px auto 0 auto;
}
/* スライダー本体 */
.slider-track {
  display: flex;
  width: max-content;
  animation: slide-right 50s linear infinite;
}
/* UL */
#simple_slider ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}
/* 各アイテム */
#simple_slider li {
  flex: 0 0 auto;
  margin: 0px 8px;
}
/* 画像をレスポンシブに */
#simple_slider img {
  display: block;
  width: 100%;
  max-width: 220px; /* PC時の最大幅 */
  height: auto;
  border-radius: 16px;
}
/* アニメーション */
@keyframes slide-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
/* ▼ スマホ（〜768px） */
@media screen and (max-width: 768px) {
  #simple_slider li {
    margin: 0 4px;
  }
  #simple_slider img {
    max-width: 140px; /* スマホでは小さめに */
  }
}

/* ▼ 小さいスマホ（〜480px） */
@media screen and (max-width: 480px) {
  #simple_slider img {
    max-width: 110px;
  }
}

#page .body {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
padding: 30px 0 30px 0;
}
#page .page_bg {
background-image: url("../image/page_bg.png");
background-repeat: repeat;
}
#page .page_bg:before {
content: '';
display: inline-block;
width: 100%;
height: 40px;
background-image: url("../image/bg1.png");
background-size: cover;
vertical-align: middle;
position: relative;
}
#page .page_bg:after {
content: '';
display: inline-block;
width: 100%;
height: 40px;
background-image: url("../image/bg2.png");
background-size: cover;
vertical-align: middle;
position: relative;
}

#page h3 {
color: #2c8f45;
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1.3em;
position: relative;
}
#page h3 b {
line-height: 1.2em;
font-family: poppins, sans-serif;
font-weight: 800;
font-size: 30px;
}
#page h3.icon:before {
content: '';
display: inline-block;
width: 15px;
height: 18px;
background-image: url("../image/navi_icon6.png");
background-size: contain;
vertical-align: middle;
margin-right: 8px;
position: relative;
top: -2px;
}

#page .button {
margin: 0px auto 0 auto;
text-align: center;
}
#page .button a {
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
color: #40382e;
text-decoration: none;
font-size: clamp(1rem, 0.714rem + 0.71vw, 1.25rem);
line-height: 1.5em;
background-color: #d4ff00;
border-radius: 100vh;
padding: 0.8em 4em 0.8em 4em;
position: relative;
}
#page .button a:hover {
color: #FFFFFF;
background-color:#FF0004;
}

#policy {
margin: 50px auto 0 auto;
}
#policy ul.policy {
margin: 20px auto 0 auto;
}
#policy ul.policy li {
}
#policy ul.policy li img {
border-radius: 16px;
width: 100%;
height: auto;
}
#policy ul.policy li h4 {
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.5em;
padding: 1em 0 0 0;
}
#policy ul.policy li h4 b {
font-family: poppins, sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(1.25rem, 0.107rem + 2.86vw, 2.25rem);
line-height: 1.8em;
margin-right: 0.2em;
}
#policy ul.policy li dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#policy ul.policy li dt {
font-family: "poppins", sans-serif;
font-weight: 600;
font-style: normal;
color: #2c8f45;
font-size: clamp(1.125rem, 0.268rem + 2.14vw, 1.875rem);
line-height: 1.5em;
width: 30%;
border-bottom: 1px solid #2c8f45;
padding: 0.5em 0.5em 0.5em 0.5em;
box-sizing: border-box;
}
#policy ul.policy li dt::first-letter {
font-size: 1.4em; 
}
#policy ul.policy li dd {
font-size: clamp(0.875rem, 0.589rem + 0.71vw, 1.125rem);
line-height: 1.7em;
width: 70%;
border-bottom: 1px solid #B4B4B4;
padding: 0.5em 0.5em 0.5em 0.5em;
box-sizing: border-box;
}
#policy .box {
position: relative;
width: 100%;
margin: 20px auto 0;
padding: 20px 0 0px 0;
overflow: hidden; /* 念のため */
z-index: 0;
}
#policy .box::after {
content: "";
display: block;
position: relative;
inset: 0;
width: 200px;
height: 138px;
margin: 30px auto 0 auto;
background-image: url("../image/policy_bg.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100%;
z-index: -1;
transform-origin: bottom center;
animation: yura-bg 4s ease-in-out infinite;
}
@keyframes yura-bg {
0%   { transform: rotate(0deg); }
12%  { transform: rotate(1deg); }
25%  { transform: rotate(-1deg); }
37%  { transform: rotate(1deg); }
50%  { transform: rotate(-1deg); }
62%  { transform: rotate(1); }
75%  { transform: rotate(-1deg); }
87%  { transform: rotate(1deg); }
100% { transform: rotate(0deg); }
}

#policy .box h4 {
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 700;
color: #2c8f45;
font-size: 20px;
line-height: 1.5em;
padding: 0 0 1em 0;
}
#policy .box p {
color: #2A2A2A;
font-size: 16px;
line-height: 1.5em;
}
#policy .button {
margin: 20px auto 30px auto;
}
#policy .button a:after {
content: "→";
font-size: 1.2em;
font-weight: 700;
position: absolute;
top: 25%;
right: 15%;
}

#menu {
margin: 40px auto 40px auto;
position: relative;
display: block;
}
#menu ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 95%;
margin: 0px auto 0 auto;
}
#menu ul li {
border: 2px solid #DFDFDF;
box-sizing: border-box;
width: 48%;
margin-bottom: 20px;
}
#menu a {
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
color: #2A2A2A;
text-decoration: none;
font-size: clamp(1rem, 0.429rem + 1.43vw, 1.5rem);
line-height: 1.5em;
position: relative;
display: block;
padding: 0.5em 0 0.5em 0;
}
#menu a:before {
content: '';
display: block;
width: 60px;
height: 53px;
background-size: contain;
vertical-align: middle;
position: relative;
margin: 0px auto 0.5em auto;
}
#menu ul li:nth-of-type(1) a:before {
background-image: url("../image/menu1.png");
}
#menu ul li:nth-of-type(2) a:before {
background-image: url("../image/menu2.png");
}
#menu ul li:nth-of-type(3) a:before {
background-image: url("../image/menu3.png");
}
#menu ul li:nth-of-type(4) a:before {
background-image: url("../image/menu4.png");
}
#menu a:after {
content: '';
display: block;
width: 25px;
height: 25px;
background-image: url("../image/menu_icon.png");
background-size: contain;
vertical-align: middle;
position: relative;
margin: 10px auto 0 auto;
bottom: 5px;
transition: all 0.3s ease 0s;
}
#menu a:hover:after {
bottom: 0;
}
#menu a:hover {
color: #A1A1A1;
}

#worry {
margin: 50px auto 0 auto;
position: relative;
padding: 30px 0 20px 0;
text-align: center;
z-index:0;
background: #fdeecb;
overflow: visible;
}
#worry::before {
content: "";
position: absolute;
left: 50%;
top: -5vw;
width: 200vw;
height: 50vw;
background: #fdeecb;
border-radius: 50%;
transform: translateX(-50%);
z-index: -1;
}
#worry h3 {
color: #FF2F00;
font-family: zen-maru-gothic, sans-serif;
font-weight: 900;
font-size: 26px;
line-height: 1.3em;
}
#worry h3:before {
background-image: none;
}
#worry ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 30px auto 0 auto;
padding-bottom: 30px;
}
#worry ul:after {
content: '';
display: block;
width: 200px;
height: 94px;
margin: 0px auto 0 auto;
background-image: url("../image/worry_bg.png");
background-size: contain;
vertical-align: middle;
position: absolute;
bottom: 30px;
}
#worry ul li {
margin: 0 0 0px 0;
}
#worry ul li:nth-of-type(1) {
order: 1;
width: 45%;
}
#worry ul li:nth-of-type(2) {
order: 5;
margin: 0 0 0 auto;
width: 35%;
}
#worry ul li:nth-of-type(3) {
order: 4;
width: 35%;
}
#worry ul li:nth-of-type(4) {
order: 3;
width: 60%;
}
#worry ul li:nth-of-type(5) {
order: 2;
width: 50%;
}
#worry::after {
content: "";
position: absolute;
left: 50%;
bottom: -30px;           /* 三角が下に飛び出す高さ調整 */
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 30px solid transparent;  /* 左の傾斜 */
border-right: 30px solid transparent; /* 右の傾斜 */
border-top: 30px solid #fdeecb;       /* 背景色と同じ */
z-index: 1;
}

#solution {
width: 90%;
margin: 50px auto 0 auto;
}
#solution h3 {
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.5em;
color: #40382E;
position: relative;
display: inline;
}
#solution h4 {
color: #FF2F00;
font-family: zen-maru-gothic, sans-serif;
font-weight: 900;
font-size: 25px;
line-height: 1.3em;
margin: 1em 0 0 0;
}
#solution ul {
margin: 30px auto 0 auto;
width: 100%;
}
#solution ul li {
background-color: #FFF6E1;
border-radius: 10px;
box-sizing: border-box;
padding: 2em 1em 2em 1em;
margin-bottom: 20px;
}
#solution ul li:nth-of-type(3) {
margin-right: 0%;
}
#solution ul li h5 {
color: #FF6A00;
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: clamp(1.125rem, 0.807rem + 1.59vw, 2rem);
line-height: 1.3em;
position: relative;
}
#solution ul li h5 br {
display: none;
}
#solution ul li h5:after {
content: '';
display: block;
width: 120px;
height: 80px;
background-image: url("../image/solution1.png");
background-size: contain;
vertical-align: middle;
position: relative;
margin: 20px auto 20px auto;
}
#solution ul li:nth-of-type(2) h5:after {
background-image: url("../image/solution2.png");
}
#solution ul li:nth-of-type(3) h5:after {
background-image: url("../image/solution3.png");
}
#solution ul li:nth-of-type(4) h5:after {
background-image: url("../image/solution4.png");
}
#solution ul li:nth-of-type(5) h5:after {
background-image: url("../image/solution5.png");
}
#solution ul li p {
color: #40382E;
font-size: clamp(0.875rem, 0.807rem + 0.34vw, 1.063rem);
line-height: 1.7em;
text-align: left;
}

.contact_area {
margin: 50px auto 0 auto;
background-image: url("../image/contact_bg.jpg");
background-size: contain;
padding: 40px 0 0 0;
}
.contact_area .box {
margin: 0px auto 0 auto;
width: 90%;
background-image: url("../image/contact_bg2.png");
background-size: contain;
display: block;
height: 180px;
}
.contact_area h3 {
color: #FFF !important;
margin: 0px auto 0 auto;
padding: 50px 0 0 0;
line-height: 2em !important;
}
.contact_area h3 b {
color: #FFF;
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: 17px;
position: relative;
}
.contact_area .button {
margin: 50px auto 0 auto !important;
}
.contact_area .button a {
padding: 1em 2em 1em 2em !important;
position: relative;
border: 3px solid #d4ff00;
box-sizing: border-box;
}
.contact_area .button a:before {
content: '';
display: inline-block;
width: 30px;
height: 22px;
background-image: url("../image/contact_bt_icon.png");
background-size: contain;
vertical-align: middle;
position: relative;
top: -2px;
margin-right: 15px;
}
.contact_area .button a:hover {
border: 3px solid #FFF;
box-sizing: border-box;
}

#service {
margin: 100px auto 0 auto;
}
#service .box {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
padding: 0px 0 50px 0;
}
#service .box h4 {
color: #40382E;
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.3em;
text-align: center;
margin: 2em auto 3em auto;
}
#service .box h4 b {
font-size: 24px;
line-height: 2em;
font-weight: 700;
}
#service .box ul.reason {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
border-left: 2px solid #FFF;
position: relative;
}
#service .box ul.reason li {
width: 33%;
text-align: center;
border-right: 2px solid #FFF;
position: relative;
padding: 0 0.5em 10px 0.5em;
box-sizing: border-box;
}
#service .box ul.reason li p {
color: #2c8f45;
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.3em;
position: relative;
padding: 30px 0 0 0;
}
#service .box ul.reason li:before {
font-family: "poppins", sans-serif;
font-weight: 600;
font-style: normal;
font-size: 50px;
color: #FFF;
position: absolute;
left: 10%;
top: -5%;
}
#service .box ul.reason li:nth-of-type(1):before {
content: "1";
}
#service .box ul.reason li:nth-of-type(2):before {
content: "2";
}
#service .box ul.reason li:nth-of-type(3):before {
content: "3";
}
#service .box ul.reason li:after {
content: '';
display: block;
width: 80px;
height: 53px;
background-size: contain;
vertical-align: middle;
position: relative;
margin: 20px auto 0 auto;
}
#service .box ul.reason li:nth-of-type(1):after {
background-image: url("../image/Services1.png");
}
#service .box ul.reason li:nth-of-type(2):after {
background-image: url("../image/Services2.png");
margin: 30px auto 0 auto;
}
#service .box ul.reason li:nth-of-type(3):after {
background-image: url("../image/Services3.png");
margin: 30px auto 0 auto;
}
#service .box dl {
align-items: center;
margin: 50px auto 0 auto;
}
#service .box dl:before {
content: '';
display: inline-block;
width: 80px;
height: 125px;
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
position: relative;
top: 0;
float: left;
}
#service .box dl:nth-of-type(1):before {
background-image: url("../image/Services_no1.png");
}
#service .box dl:nth-of-type(2):before {
background-image: url("../image/Services_no2.png");
float: left;
}
#service .box dl:nth-of-type(3):before {
background-image: url("../image/Services_no3.png");
}
#service .box dt {}
#service .box dd {}
#service .box dl .text {
width:100%;
box-sizing: border-box;
}
#service .box dl .photo {
width: 70%;
margin: 1em auto 0 auto;
}
#service .box dl:nth-of-type(2) dt.photo {
width: 70%;
margin: 0 0 0 auto;
text-align: right;
}

#service .box dl h5 {
color: #2c8f45;
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: clamp(1.125rem, 0.761rem + 1.82vw, 2.125rem);
line-height: 1.5em;
margin-bottom: 1em;
}
#service .box dl h5 br {
display: none;
}
#service .box dl p {
color: #40382E;
font-size: clamp(0.875rem, 0.807rem + 0.34vw, 1.063rem);
line-height: 1.7em;
text-align: left;
}
#service .box dl img {
width: 100%;
height: auto;
}
#service .box dl:nth-of-type(2) h5 {
padding-top: 0.5em;
}

#process {
width: 90%;
margin: 50px auto 0 auto;
text-align: left;
position: relative;
}
#process .button {
margin: 0px auto 0px auto;
position: absolute;
right: 0;
top: 10px;
}
#process .button a {
padding: 0.5em 3em 0.5em 2em;
}
#process .button a:after {
content: "→";
font-size: 1.2em;
font-weight: 700;
position: absolute;
top: 20%;
right: 15%;
}
#process .link {
padding: 20px 0 40px 0;
}
#process .link .button {
margin: 0px auto 0px auto;
position: relative;
right: auto;
top: auto;
}
#process .link .button a:after {
right: 10%;
}
#process .Work1,
#process .Work2 {
margin: 40px auto 0 auto;
}
#process .Work2 {
margin: 40px auto 0 auto;
}
#process .title {
color: #2c8f45;
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
line-height: 1.5em;
border: 1px solid #2c8f45;
border-radius: 6px;
padding: 0.8em 0 0.8em 1em;
margin-bottom: 1em;
cursor: pointer;
transition: all 0.5s ease 0s;
}
#process .title:hover {
background-color: #2c8f45;
color: #FFF;
}
.title:hover .tg-toggle {
background: #FFF;
}
.title .tg-toggle {
display: block;
vertical-align: middle;
color: #919191;
line-height: 1;
width: 1.2em;
height: 0.1em;
background: #919191;
position: relative;
float: right;
margin-top: 15px;
right: 15px;
}
.title .tg-toggle::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform: rotate(90deg);
}
.title.active .tg-toggle {
display: block;
vertical-align: middle;
color: #919191;
position: relative;
width: 20px;
height: 20px;
background: none;
margin-top: 4px;
}
.title.active .tg-toggle::before,
.title.active .tg-toggle::after { /* 共通設定 */
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px; /* 棒の幅（太さ） */
height: 30px; /* 棒の高さ */
background: #919191;
}
.title.active:hover .tg-toggle::before,
.title.active:hover .tg-toggle::after {
background: #FFF;
}
.title.active .tg-toggle::before {
transform: translate(-50%,-50%) rotate(45deg);
}
.title.active .tg-toggle::after {
transform: translate(-50%,-50%) rotate(-45deg);
}
#process .detail {
display: none;
}
#process .detail dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 30px auto 50px auto;
width: 95%;
}
#process .detail dt {
color: #40382E;
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
line-height: 1.3em;
text-align: left;
background-color: #F6F6F6;
margin-bottom: 30px;
padding: 1em 0.5em 0.7em 0.7em;
box-sizing: border-box;
width: 30%;
position: relative;
border-right: #40382E 2px solid;
}
#process .detail dd {
font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
line-height: 1.7em;
text-align: left;
background-color: #F6F6F6;
margin-bottom: 30px;
padding: 0.9em 1em 0.9em 1em;
box-sizing: border-box;
width: 70%;
position: relative;
}
#process .detail dd:after {
content: '';
box-sizing: border-box;
display: block;
position: absolute;
width: 20px;
height: 20px;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #B0B0B0;
transform: rotate(135deg);
bottom: -20px;
left: 25%;
}
#process .detail dd:last-child:after {
content: none;
}

#system {
margin: 50px auto 0 auto;
}
#system .box {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
padding: 20px 0 40px 0;
}
#system h4 {
text-align: center;
font-weight: 700;
color: #40382E;
font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
line-height: 1.7em;
margin: 2em auto 2em auto;
}
#system .image {
margin: 0px auto 20px auto;
}
#system .support {
background-image: url("../image/support_bg.png");
background-repeat: repeat;
border-radius: 20px;
text-align: center;
padding: 2em 0 5px 0;
}
#system .support h5 {
font-weight: 700;
color: #FFF;
font-size: clamp(1.125rem, 0.67rem + 1.8vw, 2rem);
line-height: 1.3em;
padding: 0 1em 0 1em;
}
#system .support ul {
width: 90%;
margin: 20px auto 0 auto;
}
#system .support ul li {
margin: 0px auto 20px auto;
background-color: rgba(255,255,255,0.4);
width: 100%;
border-radius: 16px;
font-weight: 700;
color: #000;
font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
line-height: 1.5em;
padding: 1.5em 1em 1em 1em;
box-sizing: border-box;
position: relative;
}
#system .support ul li br {
display: none;
}
#system .support ul li:after {
content: '';
display: block;
width: 80px;
height: 71px;
background-image: url("../image/system_illust1.png");
background-size: contain;
vertical-align: middle;
position: relative;
margin: 20px auto 0 auto;
}
#system .support ul li:nth-of-type(2):after {
background-image: url("../image/system_illust2.png");
}
#system .support ul li:nth-of-type(3):after {
background-image: url("../image/system_illust3.png");
}

#schedule {
margin: 40px auto 0 auto;
}
#schedule .box {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
padding: 20px 0 40px 0;
}
#schedule h4 {
text-align: center;
font-weight: 700;
color: #40382E;
font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
line-height: 1.5em;
margin: 2em auto 2em auto;
}
#schedule h4 b {
font-weight: 400;
font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem);
}
#schedule dl {
}
#schedule dt {
}
#schedule dd {

}
#flow {
margin: 20px auto 0 auto;
}
#flow > .box {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
padding: 20px 0 0px 0;
}
#flow h4 {
text-align: center;
font-weight: 700;
color: #40382E;
font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
line-height: 1.7em;
margin: 2em auto 1em auto;
}
#flow ul {
margin: 20px auto 0 auto;
}
#flow ul li {
width: 100%;
position: relative;
margin-bottom: 40px;
}
#flow ul li:last-child {
margin-bottom: 0;
}
#flow ul li:before {
content: '';
display: block;
width: 40px;
height: 68px;
background-image: url("../image/step1.png");
background-size: contain;
vertical-align: middle;
position: absolute;
top: 0;
}
#flow ul li:nth-of-type(2):before {
background-image: url("../image/step2.png");
}
#flow ul li:nth-of-type(3):before {
background-image: url("../image/step3.png");
}
#flow ul li:after {
content: '';
box-sizing: border-box;
display: block;
position: absolute;
width: 20px;
height: 20px;
border-style: solid;
border-width: 5px 5px 0 0;
border-color: #c5c3c0;
transform: rotate(135deg);
bottom: -30px;
left: 45%;
}
#flow ul li:last-child:after {
content: none;
}
#flow ul li h5 {
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size:20px;
line-height: 1.3em;
padding: 0em 0 2em 3em;
position: relative;
margin: 0 auto 0 auto;
}
#flow ul li:nth-of-type(1) h5,
#flow ul li:nth-of-type(2) h5 {
padding: 1em 0 2em 3em;
}
#flow ul li:nth-of-type(3) h5 {
padding: 0.5em 0 2em 3em;
}
#flow ul li h5:after {
content: '';
display: block;
width: 80px;
height: 70px;
background-image: url("../image/step_icon1.png");
background-size: contain;
vertical-align: middle;
position: relative;
top: 0em;
float: right;
}
#flow ul li:nth-of-type(2) h5:after {
background-image: url("../image/step_icon2.png");
}
#flow ul li:nth-of-type(3) h5:after {
background-image: url("../image/step_icon3.png");
}
#flow ul li p {
color: #40382E;
font-size: clamp(0.813rem, 0.722rem + 0.45vw, 1.063rem);
line-height: 1.3em;
}
#flow .contact_area {
padding-bottom: 40px;
}

#faq {
margin: 40px auto 0 auto;
}
#faq .box {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
padding: 20px 0 40px 0;
}
#faq h4 {
text-align: center;
font-weight: 700;
color: #40382E;
font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
line-height: 1.3em;
margin: 2em auto 2em auto;
}
#faq .all {
color: #40382E;
border: 1px solid #2c8f45;
border-radius: 100vh;
text-align: center;
margin: 0px 0 30px auto;
padding: 0.5em 0 0.5em 0;
width: 40%;
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size:clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
line-height: 1.7em;
cursor: pointer;
transition: all 0.5s ease 0s;
}
#faq .all:hover {
background-color: #2c8f45;
color: #FFF;
}
#faq dl {
border: 1px solid #CACACA;
border-radius: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
#faq dl dt {
font-family: zen-maru-gothic, sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1.3em;
padding: 1.2em 0.5em 1.2em 0em;
cursor: pointer;
transition: all 0.5s ease 0s;
position: relative;
box-sizing: border-box;
}
#faq dl dt:before {
content: '';
display: inline-block;
width: 14px;
height: 16px;
background-image: url("../image/faq_icon1.png");
background-size: contain;
vertical-align: middle;
position: relative;
margin-right: 1.5em;
top: -2px;
left: 10px;
}
#faq dl dt .tg-toggle {
margin-top: 10px;
right: 5px;
}
#faq dl dt:hover {
background-color: #2c8f45;
color: #FFF;
border-radius: 10px 10px 0px 0px;
}
#faq dl dt:hover:before {
background-image: url("../image/faq_icon1-2.png");
}
#faq dl dd {
color: #40382E;
font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
line-height: 1.7em;
background-color: #F9F9F9;
padding: 1em 1em 1em 1em;
border-radius: 0px 0px 10px 10px;
position: relative;
display: none;
}
#faq dl dd:before {
content: '';
display: inline-block;
width: 16px;
height: 18px;
background-image: url("../image/faq_icon2.png");
background-size: contain;
vertical-align: middle;
position: relative;
margin-right: 1em;
top: -2px;
left: 5px;
}

#about {
margin: 20px auto 0 auto;
}
#about .box {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
padding: 20px 0 20px 0;
}
#about h4 {
text-align: center;
font-weight: 700;
color: #40382E;
font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
line-height: 1.7em;
margin: 2em auto 2em auto;
}
#about h5 {
text-align: left;
font-weight: 700;
color: #40382E;
font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
line-height: 1.5em;
}
#about .outline {
margin: 0px auto 0 auto;
}
#about dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0px auto 40px auto;
width: 100%;
font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
line-height: 1.5em;
}
#about dl dt {
color: #2c8f45;
width: 100%;
display: block;
box-sizing: border-box;
padding: 1.5em 1em 0.5em 0.5em;
border-bottom: 1px solid #2c8f45;
}
#about dl dt:last-of-type {
border-bottom: 1px solid #2c8f45;
}
#about dl dd {
width: 100%;
box-sizing: border-box;
padding: 0.5em 1em 0.5em 1em;
border-bottom: 1px solid #c5c3c0;
}
#about dl dd:last-of-type {
border-bottom: 1px solid #c5c3c0;
}
#about .map {
display: block;
width: 100%;
margin: 0px auto 0 auto;
}

#contact {
margin: 40px auto 0 auto;
}
#contact .box {
width: 90%;
margin: 0px auto 0 auto;
text-align: left;
padding: 20px 0 0px 0;
}
#contact .outline {
margin: 0px auto 0 auto;
width: 100%;
}
#contact h5 {
text-align: left;
font-weight: 700;
color: #40382E;
font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
line-height: 1.5em;
}
#contact dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 20px auto 40px auto;
width: 100%;
font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
line-height: 1.5em;
}
#contact dl dt {
color: #2c8f45;
width: 100%;
display: block;
box-sizing: border-box;
padding: 1.5em 1em 0.5em 0.5em;
border-bottom: 1px solid #2c8f45;
}
#contact dl dt:last-of-type {
border-bottom: 1px solid #2c8f45;
}
#contact dl dd {
width: 100%;
box-sizing: border-box;
padding: 0.5em 1em 0.5em 1em;
border-bottom: 1px solid #c5c3c0;
}
#contact dl dd:last-of-type {
border-bottom: 1px solid #c5c3c0;
}
#contact .map {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
#contact .map iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}