@charset "utf-8";

/*====================================================================================================
  WHOLE
====================================================================================================*/
:root {
  --content-margin: clamp(53px, 4.2vw + 37px, 80px); /* pc:80px 381px以下で約2/3 */

/* ベースカラー */
	--color-base: #fff;
	--color-font: #363636;

/* テーマカラー */
	--color-primary: #4DA635;
	--color-accent: #F29C38;
  --color-yellow: #F8E996;

  /*　枠の太さの基準値（PC時22px） */
  --frame-size: 22px;
}

* { margin: 0; padding: 0;}

/* 画面全体のスクロールとゴムバンドバウンスを完全にロック */
html, body {
  width: 100%;
  height: 100%;
  height: 100dvh; /* iOS Safariのアドレスバー考慮 */
  overflow: hidden;
  background-color: var(--color-primary) !important;
  margin: 0;
  font-size: 16px;
}

body {
  padding: var(--frame-size);
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: var(--color-font);
  line-height: 1.8;
  font-weight: 500;
  display: flex;
  flex-direction: column;
}

/* 最前面に固定される額縁 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  border: var(--frame-size) solid var(--color-primary);
  z-index: 99990;
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6, th, strong { font-weight: 700;}

ul { list-style: none;}

img { width: 100%; height: auto; vertical-align: bottom; border: none;}

.pc { display:block;}
.tb { display: none;}
.sm { display:none;}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none
}

[id] { scroll-margin-top: var(--header-height);}

@media only screen and (min-width: 1024px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
	}
}
a { color: var(--color-font); text-decoration: none;}
a:hover { opacity: 0.85;}

/* フォントサイズ16px以下のジャギー補正 */
.bellow16 {
  transform: rotate(0.04deg);
}

@media only screen and (max-width: 1024px) {
  .pc {display:none;}
  .tb {display:block;}
  .sm {display:none;}
}

@media only screen and (max-width: 780px) {
  :root {
    --frame-size: 14px;
  }
  .pc {display:none;}
  .sm {display:block;}
}


/*====================================================================================================
  #BASE
====================================================================================================*/
#base {
  margin: 0;
  position: relative;
  /* 上部は白色、下部はフッター（緑色）に合わせたグラデーションで隙間のチラつきを防止 */
  background: linear-gradient(to bottom, var(--color-base) 0%, var(--color-base) calc(100% - 300px), var(--color-primary) 100%);
  border-radius: 0 var(--frame-size) var(--frame-size) var(--frame-size);
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior-y: none; /* #base 内のバウンス（伸縮）動作を停止 */
  z-index: 0;

  /* PCでのスクロールバー非表示 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#base::-webkit-scrollbar {
  display: none;
}

/*====================================================================================================
  #HEADER
====================================================================================================*/
#header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;  
  padding-inline: 0;
  pointer-events: none;
  z-index: 99999;
}
#header a { text-decoration: none;}

/*---------------------------------------------------------------------------
  .logo
---------------------------------------------------------------------------*/
#header .logo_wrap {
  width: 100%;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
#header .logo {
  width: clamp(161px, 10.69vw + 119.32px, 301px); /* 161px:390px,301px:1700px */
  aspect-ratio: 301 / 96;
  height: auto;
  margin: 0;
  pointer-events: auto;
  background-color: #fff;
  clip-path: url(#logo_shape);
  background-image: url(../image/logo-bg.svg);
  -webkit-clip-path: url(#logo_shape); /* Safari対応 */
  padding: clamp(10px, 1vw, 15px) clamp(16px, 2vw, 30px) clamp(12px, 1.5vw, 20px) clamp(10px, 1vw, 15px);
  transform: scale(1.01);  /* 画面幅可変時の隙間予防 */
}
#header .logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
#header .logo img {
  width: clamp(122px, 7.39vw + 82.09px, 224px); /* 122px:540px,140px:1920px */
  aspect-ratio: 224 / 42;
  height: auto;
}

#header .sub_logo {
  width: clamp(191px, 20.31vw + 111.81px, 457px); /* 191px:390px,457px:1700px */
  margin-right: clamp(10px, 2vw, 30px);
  margin-top: 0.5rem;
}
#header .sub_logo img {
  width: 100%;
  height: auto;
  padding-top: 0.5rem;
}

@media screen and (max-width: 780px) {
  #header .sub_logo {
    margin-top: -0.3rem;
  }
}

/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer {
  width: 100%;
  background-color: var(--color-primary);
  padding-top: 32px;
}
#footer .f_inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  margin-bottom: 145px;
}
ul.f_info {
  width: 100%;
  max-width: 754px;
  margin-inline: auto;
}
ul.f_info li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-base);
  font-size: clamp(1rem, 0.926rem + 0.31vw, 1.25rem); /* 16px:390px,20px:1700px */
  font-weight: 800;
  padding-block: 1em;
}
ul.f_info li a {
  color: inherit;
  text-decoration: none;
}
ul.f_info li small {
  font-size: 14px;
  font-weight: 700;
}
ul.f_info li:nth-child(1),
ul.f_info li:nth-child(2) {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.7);
}
ul.f_info li > :nth-child(2) {
  display: flex;
  align-items: center;
}
ul.f_info li:nth-child(1) img,
ul.f_info li:nth-child(2) img {
  width: 31px;
  height: auto;
  margin-right: 0.2em;
}
ul.f_info li:nth-child(3) img {
  width: 23px;
  height: auto;
  margin-right: 0.4em;
}
.copyright {
  font-size: 12px;
  color: var(--color-base);
  text-align: center;
  line-height: 1;
  padding-bottom: var(--frame-size);
}

@media screen and (max-width: 780px) {
  #footer ul.f_info li {
    flex-direction: column;
    text-align: center;
  }
  #footer ul.f_info li small {
    display: block;
  }
}
@media screen and (max-width: 780px) {
  #footer .f_inner {
    margin-bottom: 2rem;
  }
}


/* ---------------------------------------------------------------------------
  SUBPAGE FOOTER
--------------------------------------------------------------------------- */
#subpage #footer {
  width: 100%;
  background-color: var(--color-primary);
  margin-top: calc(var(--frame-size) * -1);
  padding-top: calc(32px + var(--frame-size));
  position: relative;
  z-index: 0;
}
#subpage #footer .ext {
  text-align: center;
  color: var(--color-base);
}