:root {
  --color-text: #222222;
  --color-muted: #555555;
  --color-orange: #f39a2e;
  --color-red: #e10600;
  --color-yellow: #fff200;
  --color-blue: #4f9fbe;
  --color-blue-deep: #3e92b4;
  --color-line: #e4e4e4;
  --color-beige: #f6e6cc;
  --color-info: #d9eef6;
  --font:
    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic',
    Meiryo, sans-serif;
  --gradient-btn: linear-gradient(
    100deg,
    #ff9342 0%,
    #e56cc8 46%,
    #7484e8 100%
  );
  --gradient-footer: linear-gradient(
    100deg,
    #f08c3c 0%,
    #e07cc4 42%,
    #7b88ea 100%
  );
  --header-height: 84px;
  --header-offset: var(--header-height);
  /* 1rem の基準（px）。margin / padding / font-size は plusuppo と同じ流体指定。
	   PC は 1200px 基準。font-size は clamp(0.7倍, vw, rem)、余白は min(vw, rem)。
	   max-width 内の変更は 430px 基準の min(vw, rem)。 */
  --FontSize: 16;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
/* ルート html に font: inherit を当てると font-family が初期化されるため、body 以下に限定 */
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  font: inherit;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-offset) + 12px);
}

html {
  width: 100%;
  font-size: calc(var(--FontSize) / 16 * 100%);
  line-height: 1.5;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #3c3c3c;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
::selection {
  background: #ccc;
  color: #fff;
}
::-moz-selection {
  background: #ccc;
  color: #fff;
}
.spacer {
  clear: both;
  font-size: 0px;
}

a {
  color: inherit;
}

p {
}

h1,
h2,
h3,
h4 {
  line-height: 1.45;
  font-weight: 700;
}

button,
input,
textarea {
  font-family: inherit;
}

.br--sp {
  display: none;
}
.br--pc {
  display: block;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* アイコン */
.icon {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.icon-badge {
  display: inline-grid;
  place-items: center;
  width: clamp(3.2rem, 6.667vw, 4.8rem);
  height: clamp(3.2rem, 6.667vw, 4.8rem);
  flex: 0 0 auto;
}

.icon-badge .icon {
  width: 100%;
  height: 100%;
}


@media (max-width: 768px) {
  .icon-badge {
    width: min(16.28vw, 70px);
    height: min(16.28vw, 70px);
  }

  .br--sp {
    display: block;
  }
  .br--pc {
    display: none;
  }
}