@charset "utf-8";
/* -----------------------------------------------
 home SP CSS
-------------------------------------------------- */
p.red{
 color: #e60012;
}

@media screen and (max-width: 851px) {/* 以下 */
a{
 cursor: pointer;
}
header{
 width: 100%;
 color: #333;
 position: relative;
 background: url(../img/header-bg.jpg) no-repeat center top;
 background-size: cover;
}

header .inner{
 padding: 5%;
}
article .inner{
 max-width: 90%;
 padding-left: 4%;
 padding-right: 4%;
 margin-left: auto;
 margin-right: auto;
 overflow: hidden;
}
/* ------------------------------------- */
article .inner{
 max-width: 96%;
 margin-left: auto;
 margin-right: auto;
}
/* group_1 
------------------------------ */
.group_1 .inner{
 border: 8px solid #41b052;
 border-radius: 50px;
 padding: 7% 5%;
 z-index: 1;
 overflow: hidden;
}
.group_1{
 padding-top: 10vw !important;
 position: relative;
 margin-bottom: 6vw;
}
.group_1 h2{
 text-align: center;
 position: absolute;
 z-index: 2;
 top: 9%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.group_1 h3{
 text-align: center;
}
.group_1 h3{
 font-family: "Noto Sans JP", sans-serif;
 font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.375rem);
 color: #009e41;
 font-weight: 700;
 margin-bottom: 20px;
 line-height: 1.6;
}
.group_1 .title_2{
 text-align: center;
 margin-top: 4vw;
 margin-bottom: 4vw;
}
.group_1 ul{
 max-width: 90%;
 margin: 0 auto;
 display: grid;
  justify-items: center;
  align-content: stretch;
  grid-template-columns: 48% 48%;
  justify-content: space-between;
}

/* group_2 
------------------------------ */
.group_2{
 padding-top: 4vw;
 margin-bottom: 5vw;
 line-height: 1.6;
}
.group_2 .sub_group_1{
 display: flex;
 gap: 2%;
 margin-bottom: 2vw;
}
.group_2 .sub_group_1 .text{
 font-family: "Noto Sans JP", sans-serif;
 font-size: clamp(1rem, 0.9125rem + 0.4vw, 1.125rem);
}

.group_2 .sub_group_1 img{
 width: 50px; /* 画像の幅を固定 */
 height: 50px; /* 高さ自動（比率を維持） */
 flex-shrink: 0; /* Flexの縮小設定を無効にする */
}
.group_2 .sub_group_2{
 margin-bottom: 4vw;
 text-align: center;
}
.group_2 .sub_group_3,
.group_2 .sub_group_4{
 text-align: center;
}
.group_2 .sub_group_5{
 margin-bottom: 5vw;
 background: url(../img/g3-bg.png) no-repeat center bottom;
 background-size: 100% auto;
 padding-bottom: 5vw;
 padding-top: 5vw;
}
.group_2 .sub_group_5 .title_2{
 text-align: center;
 margin-bottom: 2vw;
}
.group_2 .sub_group_5 .text_1{
 font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.375rem);
 text-align: center;
 margin-bottom: 2.7vw;
 font-family: "Noto Sans JP";
 font-weight: 600;
 color: #fff;
}
.group_2 .sub_group_5 .text_2{
 font-size: clamp(0.7rem, 0.85rem + 0.8vw, 1rem);
 text-align: center;
 font-family: "M PLUS Rounded 1c";
 font-weight: 700;
 margin-bottom: 1.5vw;
 color: #fff;
}

.group_2 .sub_group_5 ul{
 max-width: 80%;
 margin-left: auto;
 margin-right: auto;
 display: grid;
  justify-items: center;
  align-content: stretch;
  grid-template-columns: 46% 46%;
  justify-content: space-between;
}
.group_2 .sub_group_5 .os{
 font-size: 60%;
 color: #fff;
}

/* group_3 
------------------------------ */
/* group_4 
------------------------------ */
.group_4{
 background-color: #41b053;
 padding: 5vw 0;
}
.group_5 .title,
.group_4 .title{
 margin-bottom: 5vw;
}
.group_4 ul li{
 text-align: left;
 margin-bottom: 3vw;
 padding-left: 7.8%;
}
.group_4 ul{
 margin-bottom: 3vw;
}
.group_4 .sub_group_2{
 text-align: center;
 max-width: 85%;
 margin-left: auto;
 margin-right: auto;
}
.group_5{
 padding: 5vw 0;
}
.group_5 .text{
 max-width: 90%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 3vw;
 line-height: 1.6;
 font-family: "Noto Sans JP", sans-serif;
 font-size: clamp(1rem, 0.9125rem + 0.4vw, 1.125rem);
}
.group_6{
 background-color: #01913a;
 padding: 7vw 0;
}
.group_6 .inner{
 background-color: #fff;
 border-radius: 30px;
 padding: 3%;
}
.group_6 .inner_box{
 padding-left: 12%;
}
.group_6 h2{
 text-align: center;
 margin-bottom: 3vw;
 max-width: 90%;
 margin-left: auto;
 margin-right: auto;
}
.group_6 h3{
 font-family: "Noto Sans JP", sans-serif;
 font-size: clamp(1.25rem, 0.625rem + 1.25vw, 1.5625rem);
 color: #009e41;
 font-weight: 700;
 margin-bottom: 2vw;
}
.group_6 .sub_group_3,
.group_6 .sub_group_2,
.group_6 .sub_group_1{
 display: flex;
 gap: 20px;
}
.group_6 .sub_group_1{
 margin-bottom: 5vw;
}
.group_6 .sub_group_1 img{
 min-width: 50px;
}
.group_6 .sub_group_2{
 background-color: #569cd7;
 border-radius: 20px;
 padding: 15px;
 color: #fff;
 margin-bottom: 5vw;
 font-size: clamp(1rem, 0.9125rem + 0.4vw, 1.125rem);
 line-height: 1.6;
}
.group_6 .sub_group_3{
 background-color: #8ec220;
 border-radius: 20px;
 padding: 15px;
 color: #fff;
 font-size: clamp(1rem, 0.9125rem + 0.4vw, 1.125rem);
 line-height: 1.6;
 margin-bottom: 5vw;
}
.group_6 .sub_group_3 img,
.group_6 .sub_group_2 img{
 min-width: 50px;
}
.group_6 .child_3{
 background: url(../img/g6-bg-sp.png) no-repeat 2.8% bottom;
 background-size: 7% auto;
}

/* group_7 
------------------------------ */
.group_7{
 padding: 7vw 0;
 background-color: #8dc21f;
}
.group_7 h2{
 max-width: 95%;
 margin: 3vw auto;
 text-align: center;
}
.group_7 .inner{
 background-color: #fff;
 border-radius: 30px;
 padding: 3%;
}
.group_7 .grid{
 max-width: 85%;
 margin: 0 auto 3vw auto;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}
.group_7 p.text{
 font-size: clamp(1rem, 0.75rem + 0.5vw, 1.125rem);
 line-height: 1.6;
 margin-bottom: 25px;
}
/* youtube
---------------------------------------- */
.slider{
 margin-bottom: 20px;
}

.youtube {
  height: 100%;
  max-width: 200px;
}
.youtube iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
.slider li{
 margin-left: 10px;
 margin-right: 10px;
}
.slider .title{
 text-align: center;
 margin-bottom: 20px;
}
.slider .title img{
 max-width: 90%;
 margin-left: auto;
 margin-right: auto;
}
.slick-slide{
 width: 200px;
}
.slider .slick-prev {
    background: url(../img/prev-btn.png) no-repeat center center;
    background-size: auto;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    border: none;
    position: absolute;
    left: 20%;
    top: 50%;
    z-index: 50;
    background-size: 100% auto;
}
.slider .slick-next {
    background: url(../img/next-btn.png) no-repeat center center;
    background-size: auto;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    border: none;
    position: absolute;
    top: 50%;
    right: 20%;
    z-index: 50;
    background-size: 100% auto;
  }

/* ------------------------------------------------------------------ */
}/*----------------------------------------------------------- SP end */