@charset "utf-8";

/* -----------------------------------------------------------
    疑似クラス・疑似要素
----------------------------------------------------------- */

:root {
  --text-color: #151B1C;
  --text-gray: #627072;
  --base-color: #;
  --main-color: #2B99C7;
  --accent-color: #11749D;
  --accent-color2: #2B99C7;
  --accent-color3: #fff;
  --accent-color4: #E0F3FA;
  --gray-color: #F7F9FC;
  --gray-color2: #EAF0F8;
  --blue-color: #2B99C7;
  --blue-color2: #CFE2FC;
  --green-color: #2B99C7;
  --green-color2: #E5F3F8;
  --dark-color: #083C52;
  --gd-color:linear-gradient(135deg, #E4EA7C 0%, #2B99C7 100%);

}
.white-color{
  color: #fff;
}
.txt-color{
  color: var(--text-color);
}
.text-gray{
  color: var(--text-gray);
}
.base-color{
  color: var(--base-color);
}
.main-color{
  color: var(--main-color);
}
.accent-color{
  color: var(--accent-color);
}
.accent-color2{
  color: var(--accent-color2);
}
.accent-color3{
  color: var(--accent-color3);
}
.accent-color4{
  color: var(--accent-color4);
}
.gray-color2{
  color: var(--gray-color2);
}
.blue-color{
  color: var(--blue-color);
}
.blue-color2{
  color: var(--blue-color2);
}
.green-color{
  color: var(--green-color);
}
.green-color2{
  color: var(--green-color2);
}
.dark-color{
  color: var(--dark-color);
}
.gd-color{
  background: linear-gradient(135deg, #E4EA7C 0%, #2B99C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.bg-main{
  background: var(--gd-color);
}
.bg-accent4{
  background: var(--accent-color4);
}
.bg-gray{
  background: var(--gray-color);
}
.bg-gray2{
  background: var(--gray-color2);
}
.bg-white{
  background: #fff;
}
.bg-blue{
  background: var(--blue-color);
}
.bg-green2{
  background: var(--green-color2);
}
.bg-gd-light{
  background: transparent linear-gradient(121deg, rgba(228, 234, 124, 0.2) 0%, rgba(43, 153, 199, 0.2) 100%) 0% 0% no-repeat padding-box;
}
.bg-texture{
  background: url(../img/common/texture-green-bg.webp);
  background-repeat: repeat;
  background-size: 10%;
}
@keyframes gradationAnim1{
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}
.bg-liner{
  background: linear-gradient(-45deg, #2B99C7, #E4EA7C);
  background-size: 200% auto;
  animation: gradationAnim1 7s ease infinite;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  transition: all linear 0.1s;
  color: var(--main-color);
}

a:active {
  color: var(--text-color);
  text-decoration: none;
}

::placeholder {
  color: #C6C6C6;
}

#wrapper::-webkit-scrollbar {
    width: 12px;
}

#wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/*-----------------------------------------------------------
  フォント 
------------------------------------------------------------*/
* {min-height: 0vw;}
.f-thin{
  font-weight: 300;
}
.f-medium{
  font-weight: 500;
}
.f-semibold{
  font-weight: 600;
}
.f-bold{
  font-weight: 700;
}
.f-black{
  font-weight: 900;
}

.en{
  font-family: "Poppins", sans-serif;
}

.ja{
  font-family: "Shippori Mincho", serif;
  font-style: normal;
}

.indent{
  text-indent: -1em;
  padding-left: 1em;
}
.indent-2{
  text-indent: -2em;
  padding-left: 2em;
}

/* -----------------------------------------------------------
    タグ
----------------------------------------------------------- */

html {
  font-size:62.5%; /* 分かりやすくするために1remを10pxに */
  overflow-y: scroll; /* スクロールバーの有無によるズレ対策 */
}

body {
  font-family:"Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "YuGothic", "メイリオ", "Meiryo", sans-serif;
  /* 明朝体の場合 font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "YuMincho", "メイリオ", "Meiryo", serif;*/
  background: var(--base-color);
  color: var(--text-color);
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0;
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  /* font-feature-settings: "palt" 1; */
  background: #F7F9FC;
}

::-ms-clear {
  display: none; /* IEのテキストボックスとパスワード入力欄の「×」を消すため */
}

a {
  display: block;
  color: inherit;
	text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  backface-visibility: hidden; /* Chromeのホバー時1pxのずれ解消のため */
}

section {
  padding-top: 12.0rem;
}

textarea {
  width: 100%;
  height: 27.0rem;
  resize: vertical;
  padding: 1.5rem;
  border: none;
  background: #f5f5f5;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  padding: 1.5rem;
  border: none;
  background: #f5f5f5;
}

input[type="email"] {
  width: 100%;
}

input[type="reset"],
input[type="submit"],
input[type="button"] {
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
  padding: 1.5rem 0;
  appearance: none;
  -webkit-appearance: none;
}

input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  cursor: pointer;
  opacity:0.8;
  transition: all linear 0.3s;
}

address {
  font-style: normal;
}

/* -----------------------------------------------------------
    ボーダーラディウス
----------------------------------------------------------- */

.border-radius-20{
  border-radius: 20px;
}
.border-radius-16{
  border-radius: 16px;
}
.border-radius-10{
  border-radius: 10px;
}
.border-radius-5{
  border-radius: 5px;
}
.border-radius-3{
  border-radius: 3px;
}
/* -----------------------------------------------------------
    フレックスボックス
----------------------------------------------------------- */

.flex {
  display: -webkit-box;
  display: flex;
}


.flex.column{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}
.flex.c-reverse{
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  flex-direction: column-reverse;
}
.flex.row-reverse{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse;
}
.flex.row{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
}
.flex.space-between {
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.flex.space-evenly{
  justify-content: space-evenly;
}
.flex.space-arond{
  justify-content: space-around;
}
.flex.justify-start{
  -webkit-box-pack: start;
  justify-content: flex-start;
}
.flex.justify-end {
  -webkit-box-pack: end;
  justify-content: flex-end;
}
.flex.justify-center {
  -webkit-box-pack: center;
  justify-content: center;
}
.flex.align-start{
  -webkit-box-align: start;
  align-items: flex-start;
}
.flex.align-bottom {
  -webkit-box-align: end;
  align-items: flex-end;
}
.flex.align-center{
  -webkit-box-align: center;
  align-items: center;
}
.flex.align-stretch {
  -webkit-box-align: stretch;
  align-items: stretch;
}
.flex.baseline{
  -webkit-box-align: baseline;
  align-items: baseline;
}
.flex.wrap {
  flex-wrap: wrap;
}
.flex.r-reverse{
  flex-direction: row-reverse;
}

.flex-box-50{
  gap: 4rem;
}
.flex-box-50 > * {
  width: 50%;
}
.flex-box-50 .txt p:not(:last-child){
  margin-bottom: 2rem;
}
.flex-box-50 .txt h3{
  margin-bottom: 2rem;
}
.flex-box-50 .txt h5{
  margin-bottom: 2rem;
}
/* -----------------------------------------------------------
    ベースレイアウト
----------------------------------------------------------- */

.d-inline-block {
  display: inline-block;
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.relative {
  position: relative;
}

.w-100per {
  width: 100%;
}

.w-50per {
  width: 50%;
}

.w-fit {
  width: fit-content;
}

.t-center {
  text-align: center;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

.v-middle {
  vertical-align: middle;
}

/* -----------------------------------------------------------
    フォント
----------------------------------------------------------- */

.f-bold {
  font-weight: bold;
}

.kerning {
  margin-right: 1.0rem;
}

.f-size-8 {
  font-size: 0.8rem;
}

.f-size-9 {
  font-size: 0.9rem;
}

.f-size-10 {
  font-size: 1.0rem;
}

.f-size-11 {
  font-size: 1.1rem;
}

.f-size-12 {
  font-size: 1.2rem;
}

.f-size-13 {
  font-size: 1.3rem;
}

.f-size-14 {
  font-size: 1.4rem;
}

.f-size-15 {
  font-size: 1.5rem;
}

.f-size-16 {
  font-size: 1.6rem;
}

.f-size-17 {
  font-size: 1.7rem;
}

.f-size-18 {
  font-size: 1.8rem;
}

.f-size-19 {
  font-size: 1.9rem;
}

.f-size-20 {
  font-size: 2.0rem;
}

.f-size-21 {
  font-size: 2.1rem;
}

.f-size-22 {
  font-size: 2.2rem;
}

.f-size-23 {
  font-size: 2.3rem;
}

.f-size-24 {
  font-size: 2.4rem;
}

.f-size-25 {
  font-size: 2.5rem;
}

.f-size-26 {
  font-size: 2.6rem;
}

.f-size-27 {
  font-size: 2.7rem;
}

.f-size-28 {
  font-size: 2.8rem;
}

.f-size-29 {
  font-size: 2.9rem;
}

.f-size-30 {
  font-size: 3.0rem;
}

.f-size-31 {
  font-size: 3.1rem;
}

.f-size-32 {
  font-size: 3.2rem;
}

.f-size-33 {
  font-size: 3.3rem;
}

.f-size-34 {
  font-size: 3.4rem;
}

.f-size-35 {
  font-size: 3.5rem;
}

.f-size-36 {
  font-size: 3.6rem;
}

.f-size-37 {
  font-size: 3.7rem;
}

.f-size-38 {
  font-size: 3.8rem;
}

.f-size-39 {
  font-size: 3.9rem;
}

.f-size-40 {
  font-size: 4.0rem;
}

.f-size-41 {
  font-size: 4.1rem;
}

.f-size-42 {
  font-size: 4.2rem;
}

.f-size-43 {
  font-size: 4.3rem;
}

.f-size-44 {
  font-size: 4.4rem;
}

.f-size-45 {
  font-size: 4.5rem;
}

.f-size-46 {
  font-size: 4.6rem;
}

.f-size-47 {
  font-size: 4.7rem;
}

.f-size-48 {
  font-size: 4.8rem;
}

.f-size-49 {
  font-size: 4.9rem;
}

.f-size-50 {
  font-size: 5.0rem;
}

.f-size-51 {
  font-size: 5.1rem;
}

.f-size-52 {
  font-size: 5.2rem;
}

.f-size-53 {
  font-size: 5.3rem;
}

.f-size-54 {
  font-size: 5.4rem;
}

.f-size-55 {
  font-size: 5.5rem;
}

.f-size-56 {
  font-size: 5.6rem;
}

.f-size-57 {
  font-size: 5.7rem;
}

.f-size-58 {
  font-size: 5.8rem;
}

.f-size-59 {
  font-size: 5.9rem;
}

.f-size-60 {
  font-size: 6.0rem;
}

.f-size-61 {
  font-size: 6.1rem;
}

.f-size-62 {
  font-size: 6.2rem;
}

.f-size-63 {
  font-size: 6.3rem;
}

.f-size-64 {
  font-size: 6.4rem;
}

.f-size-65 {
  font-size: 6.5rem;
}

.f-size-66 {
  font-size: 6.6rem;
}

.f-size-67 {
  font-size: 6.7rem;
}

.f-size-68 {
  font-size: 6.8rem;
}

.f-size-69 {
  font-size: 6.9rem;
}

.f-size-70 {
  font-size: 7.0rem;
}

.f-size-71 {
  font-size: 7.1rem;
}

.f-size-72 {
  font-size: 7.2rem;
}

.f-size-73 {
  font-size: 7.3rem;
}

.f-size-74 {
  font-size: 7.4rem;
}

.f-size-75 {
  font-size: 7.5rem;
}

.f-size-76 {
  font-size: 7.6rem;
}

.f-size-77 {
  font-size: 7.7rem;
}

.f-size-78 {
  font-size: 7.8rem;
}

.f-size-79 {
  font-size: 7.9rem;
}

.f-size-80 {
  font-size: 8.0rem;
}

.f-size-81 {
  font-size: 8.1rem;
}

.f-size-82 {
  font-size: 8.2rem;
}

.f-size-83 {
  font-size: 8.3rem;
}

.f-size-84 {
  font-size: 8.4rem;
}

.f-size-85 {
  font-size: 8.5rem;
}

.f-size-86 {
  font-size: 8.6rem;
}

.f-size-87 {
  font-size: 8.7rem;
}

.f-size-88 {
  font-size: 8.8rem;
}

.f-size-89 {
  font-size: 8.9rem;
}

.f-size-90 {
  font-size: 9.0rem;
}

.f-size-91 {
  font-size: 9.1rem;
}

.f-size-92 {
  font-size: 9.2rem;
}

.f-size-93 {
  font-size: 9.3rem;
}

.f-size-94 {
  font-size: 9.4rem;
}

.f-size-95 {
  font-size: 9.5rem;
}

.f-size-96 {
  font-size: 9.6rem;
}

.f-size-97 {
  font-size: 9.7rem;
}

.f-size-98 {
  font-size: 9.8rem;
}

.f-size-99 {
  font-size: 9.9rem;
}

.f-size-100 {
  font-size: 10.0rem;
}

.f-size-101 {
  font-size: 10.1rem;
}

.f-size-102 {
  font-size: 10.2rem;
}

.f-size-103 {
  font-size: 10.3rem;
}

.f-size-104 {
  font-size: 10.4rem;
}

.f-size-105 {
  font-size: 10.5rem;
}

.f-size-106 {
  font-size: 10.6rem;
}

.f-size-107 {
  font-size: 10.7rem;
}

.f-size-108 {
  font-size: 10.8rem;
}

.f-size-109 {
  font-size: 10.9rem;
}

.f-size-110 {
  font-size: 11.0rem;
}

.f-size-111 {
  font-size: 11.1rem;
}

.f-size-112 {
  font-size: 11.2rem;
}

.f-size-113 {
  font-size: 11.3rem;
}

.f-size-114 {
  font-size: 11.4rem;
}

.f-size-115 {
  font-size: 11.5rem;
}

.f-size-116 {
  font-size: 11.6rem;
}

.f-size-117 {
  font-size: 11.7rem;
}

.f-size-118 {
  font-size: 11.8rem;
}

.f-size-119 {
  font-size: 11.9rem;
}

.f-size-120 {
  font-size: 12.0rem;
}

.f-size-121 {
  font-size: 12.1rem;
}

.f-size-122 {
  font-size: 12.2rem;
}

.f-size-123 {
  font-size: 12.3rem;
}

.f-size-124 {
  font-size: 12.4rem;
}

.f-size-125 {
  font-size: 12.5rem;
}

.f-size-126 {
  font-size: 12.6rem;
}

.f-size-127 {
  font-size: 12.7rem;
}

.f-size-128 {
  font-size: 12.8rem;
}

.f-size-129 {
  font-size: 12.9rem;
}

.f-size-130 {
  font-size: 13.0rem;
}

.f-size-131 {
  font-size: 13.1rem;
}

.f-size-132 {
  font-size: 13.2rem;
}

.f-size-133 {
  font-size: 13.3rem;
}

.f-size-134 {
  font-size: 13.4rem;
}

.f-size-135 {
  font-size: 13.5rem;
}

.f-size-136 {
  font-size: 13.6rem;
}

.f-size-137 {
  font-size: 13.7rem;
}

.f-size-138 {
  font-size: 13.8rem;
}

.f-size-139 {
  font-size: 13.9rem;
}

.f-size-140 {
  font-size: 14.0rem;
}

.f-size-141 {
  font-size: 14.1rem;
}

.f-size-142 {
  font-size: 14.2rem;
}

.f-size-143 {
  font-size: 14.3rem;
}

.f-size-144 {
  font-size: 14.4rem;
}

.f-size-145 {
  font-size: 14.5rem;
}

.f-size-146 {
  font-size: 14.6rem;
}

.f-size-147 {
  font-size: 14.7rem;
}

.f-size-148 {
  font-size: 14.8rem;
}

.f-size-149 {
  font-size: 14.9rem;
}

.f-size-150 {
  font-size: 15.0rem;
}

.f-size-151 {
  font-size: 15.1rem;
}

.f-size-152 {
  font-size: 15.2rem;
}

.f-size-153 {
  font-size: 15.3rem;
}

.f-size-154 {
  font-size: 15.4rem;
}

.f-size-155 {
  font-size: 15.5rem;
}

.f-size-156 {
  font-size: 15.6rem;
}

.f-size-157 {
  font-size: 15.7rem;
}

.f-size-158 {
  font-size: 15.8rem;
}

.f-size-159 {
  font-size: 15.9rem;
}

.f-size-160 {
  font-size: 16.0rem;
}

.f-size-161 {
  font-size: 16.1rem;
}

.f-size-162 {
  font-size: 16.2rem;
}

.f-size-163 {
  font-size: 16.3rem;
}

.f-size-164 {
  font-size: 16.4rem;
}

.f-size-165 {
  font-size: 16.5rem;
}

.f-size-166 {
  font-size: 16.6rem;
}

.f-size-167 {
  font-size: 16.7rem;
}

.f-size-168 {
  font-size: 16.8rem;
}

.f-size-169 {
  font-size: 16.9rem;
}

.f-size-170 {
  font-size: 17.0rem;
}

.f-size-171 {
  font-size: 17.1rem;
}

.f-size-172 {
  font-size: 17.2rem;
}

.f-size-173 {
  font-size: 17.3rem;
}

.f-size-174 {
  font-size: 17.4rem;
}

.f-size-175 {
  font-size: 17.5rem;
}

.f-size-176 {
  font-size: 17.6rem;
}

.f-size-177 {
  font-size: 17.7rem;
}

.f-size-178 {
  font-size: 17.8rem;
}

.f-size-179 {
  font-size: 17.9rem;
}

.f-size-180 {
  font-size: 18.0rem;
}

.f-size-181 {
  font-size: 18.1rem;
}

.f-size-182 {
  font-size: 18.2rem;
}

.f-size-183 {
  font-size: 18.3rem;
}

.f-size-184 {
  font-size: 18.4rem;
}

.f-size-185 {
  font-size: 18.5rem;
}

.f-size-186 {
  font-size: 18.6rem;
}

.f-size-187 {
  font-size: 18.7rem;
}

.f-size-188 {
  font-size: 18.8rem;
}

.f-size-189 {
  font-size: 18.9rem;
}

.f-size-190 {
  font-size: 19.0rem;
}

.f-size-191 {
  font-size: 19.1rem;
}

.f-size-192 {
  font-size: 19.2rem;
}

.f-size-193 {
  font-size: 19.3rem;
}

.f-size-194 {
  font-size: 19.4rem;
}

.f-size-195 {
  font-size: 19.5rem;
}

.f-size-196 {
  font-size: 19.6rem;
}

.f-size-197 {
  font-size: 19.7rem;
}

.f-size-198 {
  font-size: 19.8rem;
}

.f-size-199 {
  font-size: 19.9rem;
}

.f-size-200 {
  font-size: 20.0rem;
}


/*-----------------------------------------------------------
    表示・非表示・改行 
------------------------------------------------------------*/

.pc-none,
.tablet-only,
.sp-only {
  display: none;
}

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

.pc-none,
.tablet-only {
  display: block;
}
.pc-only{
  display: none;
}
.tablet-none{
  display: none;
}
}

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

  .sp-only {
    display: block;
  }
  .sp-none{
    display: none;
  }
  .tablet-only{
    display: none;
  }
  .tablet-none{
    display: block;
  }

}


/* -----------------------------------------------------------
    タブレット・スマホ時
----------------------------------------------------------- */

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

.hamburger-menu{
  display: block;
}
:hover {
  opacity: 1; /* ボタン等を押した時に2回押さないと効かないバグ対策 */
}
html {
  font-size:60%;
}

.flex.row-reverse {
  flex-direction: column;
}
.flex.row{
  flex-direction: column;
}

.flex.flex-box-50{
  flex-direction: column;
}
.flex-box-50 > *{
  width: 100%;
}

}
@media screen and (max-width:960px) {
  .flex-box-50 > * {
    width: 100%;
  }
}

/* -----------------------------------------------------------
    スマホ時
----------------------------------------------------------- */

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

html {
  font-size:55%;
}


}