@charset "UTF-8";
/** --------------------------------------------------
 * variable
 */

:root {
/*
 * primitive
 */

/* color */
--color-black:   #000;
--color-black60: #6e6e6e;
--color-black40: #4c4c4c;
--color-black20: #2a2a2a;

--color-gray:   #808080;
--color-gray90: #e1e1e1;
--color-gray50: #ccc;
--color-gray30: #656E75;

--color-white:   #fff;
--color-white90: #f5f5f5;

/*--color-red: #E60013;*/
--color-red: #B81C15;
--color-red-rgb: 230, 0, 19;

--color-pink:   #FFBCC2;
--color-pink90: #F8F4F4;
--color-pink60: #CC2346;
--color-pink20: #A83D3D;

--color-win-r: #EED0D6;
--color-win-g: #BCD4C7;
--color-win-b: #A6C2D1;
--color-win-y: #E8E3D0;

--color-bluetext: #2D344E;

/* font-family */
--font-family-en1: "Anton";
--font-family-ja1: "YakuHanJP_Narrow", "Noto Sans JP";
--font-family-ico: "tabler-icons";

/* font-size */
--font-size-max: 36px;
--font-size-exl: 28px;
--font-size-xxl: 24px;
--font-size-xlg: 22px;
--font-size-xl:  20px;
--font-size-lg:  18px;
--font-size-md:  16px;
--font-size-rg:  15px;
--font-size-sm:  14px;
--font-size-xs:  13px;
--font-size-xxs: 12px;
--font-size-exs: 11px;
--font-size-min: 10px;

--font-ratio-ltd: 2.667em;
--font-ratio-max: 2.134em;
--font-ratio-exl: 1.867em;
--font-ratio-xxl: 1.6em;
--font-ratio-xlg: 1.467em;
--font-ratio-xl:  1.334em;
--font-ratio-lg:  1.2em;
--font-ratio-md:  1.067em;
--font-ratio-rg:  1em;
--font-ratio-sm:  0.934em;
--font-ratio-xs:  0.867em;
--font-ratio-xxs: 0.8em;
--font-ratio-exs: 0.734em;
--font-ratio-min: 0.667em;

/* font-weight */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold:   700;
--font-weight-black:  900;

/* line-height */
--line-height-xxl: 2.4;
--line-height-xl:  2.0;
--line-height-lg:  1.8;
--line-height-md:  1.625;
--line-height-rg:  1.5;
--line-height-sm:  1.45;
--line-height-xs:  1.3;
--line-height-xxs: 1.2;
--line-height-exs: 1.1;
--line-height-non: 1.0;

/* spacing */
--spacing-xxl: 3em;
--spacing-xl:  2.5em;
--spacing-ll:  2.25em;
--spacing-lg:  2em;
--spacing-ml:  1.75em;
--spacing-md:  1.5em;
--spacing-rm:  1.25em;
--spacing-rg:  1em;
--spacing-sr:  0.875em;
--spacing-sm:  0.75em;
--spacing-xs:  0.666em;
--spacing-xxs: 0.5em;
--spacing-exs: 0.25em;

--spacer-10:  0.667em;
--spacer-11:  0.734em;
--spacer-12:  0.8em;
--spacer-13:  0.867em;
--spacer-14:  0.934em;
--spacer-15:  1em;
--spacer-16:  1.067em;
--spacer-20:  1.334em;
--spacer-21:  1.4em;
--spacer-24:  1.6em;
--spacer-26:  1.734em;
--spacer-28:  1.867em;
--spacer-30:  2em;
--spacer-32:  2.134em;
--spacer-36:  2.4em;
--spacer-40:  2.667em;
--spacer-42:  2.8em;
--spacer-45:  3em;
--spacer-48:  3.2em;
--spacer-50:  3.334em;
--spacer-52:  3.467em;
--spacer-60:  4em;
--spacer-64:  4.267em;
--spacer-70:  4.667em ;
--spacer-72:  4.8em;
--spacer-80:  5.334em;
--spacer-90:  6em;
--spacer-96:  6.4em;
--spacer-120: 8em;
--spacer-128: 8.534em;

/* border-radius */
--radius-sm: 2px;
--radius-rg: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-full: 9999em;

/* shadow */
--shadow-sm: 0  1px  2px rgba(0, 0, 0, 0.05);
--shadow-rg: 0  1px  3px rgba(0, 0, 0, 0.1);
--shadow-md: 0  4px  6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

/* z-index */
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-modal: 1030;
--z-index-toast: 1040;

--min-width: 375;


/*
 * theme
 */
--theme-color-light: var(--color-white);
--theme-color-dark:  var(--color-black);
--theme-color-dark60:    var(--color-black60);
--theme-color-neutral90: var(--color-white);
--theme-color-neutral80: var(--color-white90);
--theme-color-neutral70: var(--color-gray90);
--theme-color-neutral60: var(--color-gray50);
--theme-color-neutral50: var(--color-gray);
--theme-color-neutral40: var(--color-blcok60);
--theme-color-neutral30: var(--color-blcok40);
--theme-color-neutral20: var(--color-blcok20);
--theme-color-neutral10: var(--color-black);

--theme-color-primary:   var(--color-red);
--theme-color-primary-rgb:   var(--color-red-rgb);

--theme-color-secondary:   var(--color-pink);
--theme-color-secondary90: var(--color-pink90);
--theme-color-secondary60: var(--color-pink60);
--theme-color-secondary20: var(--color-pink20);

--theme-color-danger:  var(--color-red);
--theme-color-warning: var(--color-red);
--theme-color-success: var(--color-red);
--theme-color-info:    var(--color-gray30);

--theme-color-member-r: var(--color-gray90);
--theme-color-member-g: var(--color-win-g);
--theme-color-member-b: var(--color-win-b);
--theme-color-member-y: var(--color-win-y);
--theme-member-text-color: var(--color-bluetext);

/**
 * semantic
 */
--body-typography-font: var(--font-weight-normal) var(--font-size-rg)/var(--line-height-rg) var(--font-family-ja1), sans-serif;
--body-typography-color: var(--theme-color-dark);
--body-background-color: var(--theme-color-light);

--common-font-family-primary:   var(--font-family-ja1);
--common-font-family-secondary: var(--font-family-en1);

--common-color-light:     var(--theme-color-light);
--common-color-dark:      var(--theme-color-dark);
--common-color-gray:      var(--theme-color-neutral70);
--common-color-primary:   var(--theme-color-primary);
--common-color-secondary: var(--theme-color-secondary);
--common-color-danger:    var(--theme-color-danger);
--common-color-warning:   var(--theme-color-warning);
--common-color-success:   var(--theme-color-success);
--common-color-info:      var(--theme-color-info);
--common-color-posi:      var(--theme-color-primary);
--common-color-nega:      var(--theme-color-neutral50);

--common-font-icon:  var(--font-family-ico);

--common-divider: var(--theme-color-neutral70);
--common-divider-dark: var(--theme-color-dark60);
--common-border-color: var(--theme-color-neutral60);
--common-bg-gray: var(--theme-color-neutral80);

--logo-width: 14.2rem;
--logo-aspect: 142 / 46;
--logo-margin: calc((4/15) * 1em)
--logo-font-size: var(--font-size-xxs);
--logo-font-weight: var(--font-weight-normal);
--logo-line-height: var(--line-height-non);


/* title */
--title-font-family: var(--common-font-family-primary);
--title-color: var(--theme-color-dark);
--title-margin-bottom: var(--spacing-md);

--title-primary-size: calc(var(--font-size-xl) * 2);
--title-primary-weight: var(--font-weight-black);
--title-primary-lineheight: var(--line-height-xs);

/* tag */
--tag-radius: var(--radius-rg);
--tag-text-color: var(--theme-color-light);
--tag-bg-color: var(--theme-color-secondary60);
--tag-lineheight: var(--line-height-sm);

/* marquee */
--marquee-text: 1;
--marquee-direction: -1;

/* member color */
--member-color-1: var(--theme-color-member-r);
--member-color-2: var(--theme-color-member-b);
--member-color-4: var(--theme-color-member-g);
--member-color-5: var(--theme-color-member-y);

--member-text-color: var(--theme-member-text-color);

/**
 * calc
 */
 --scale-x1: 1;
 --scale-x2: 2;
 --scale-x3: 3;
 --scale-x4: 4;
 --scale-x5: 5;
 --scale-x0h: 0.5;
 --scale-x1h: 1.5;
 --scale-x2h: 2.5;
 --scale-x3h: 3.5;
 --scale-x4h: 4.5;

 --amplify-x1: var(--scale-x1);
 --amplify-x2: var(--scale-x1);
 --amplify-x3: var(--scale-x1);
 --amplify-x4: var(--scale-x1);
 --amplify-x5: var(--scale-x1);
 --amplify-x0h: var(--scale-x1);
 --amplify-x1h: var(--scale-x1);
 --amplify-x2h: var(--scale-x1);
 --amplify-x3h: var(--scale-x1);
 --amplify-x4h: var(--scale-x1);

 --header-height: 7.5rem;

}
@media (min-width: 768px) {
:root {
--amplify-x1: var(--scale-x1);
--amplify-x2: var(--scale-x2);
--amplify-x3: var(--scale-x3);
--amplify-x4: var(--scale-x4);
--amplify-x5: var(--scale-x5);
--amplify-x0h: var(--scale-x0h);
--amplify-x1h: var(--scale-x1h);
--amplify-x2h: var(--scale-x2h);
--amplify-x3h: var(--scale-x3h);
--amplify-x4h: var(--scale-x4h);
--header-height: 11.5rem;
}
}

/** --------------------------------------------------
 * setting
 */
html {
  font-size: 62.5%;
  scroll-padding-block-start: var(--header-height);
}
body {
  overflow-y: scroll;
  background-color: var(--body-background-color);
  /*color: var(--body-typography-color);*/
  color: var(--color-black);
  font: var(--body-typography-font);
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, sans-serif;
  &.is-nav-open {
    position: fixed;
    width: 100%;
    height: 100%;
  }
}

:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(em,address) {
  font-style: normal;
}
:where(figure) {
  margin: 0;
  padding: 0;
}
:where(main > section) {
  padding-block: calc(4em * var(--amplify-x1h));
}



/** --------------------------------------------------
 * layout
 */

 .l-wrapper {
  width: 100%;
}

.l-main,
.l-address,
.f-nav {
  font-size: var(--font-size-rg);
}

.l-main.l-main--adjust_1 {
	padding-top: 108px;
}

.l-container,
.l-container--list,
.l-strongblog-container {
  width: 100%;
  max-width: 75em;
  margin-inline: auto;
  padding-inline: calc(1em * var(--amplify-x1h));
}
.l-container--detail {
  width: 100%;
  max-width: 75em;
  margin-inline: auto;
  padding-block-end: calc(4.8em * var(--amplify-x2));
  padding-inline: calc(1em * var(--amplify-x1h));
}
.l-container--form {
  padding-block: calc(4em * var(--amplify-x1h)) calc(6.4em * var(--amplify-x1h));
}
.l-container--list,
.l-strongblog-container {
  container-type: inline-size;
  container-name: strongblog-container;
}
.l-container--list,
.l-container--addside,
.l-strongblog-container {
  padding-block: calc(4em * var(--amplify-x1h));
}
.l-sidenav:has(.c-toc) {
  display: none;
}

@media screen and (max-width: 1200px) {
	.l-main.l-main--adjust_1 {
		padding-top: 80px;
	}
}


@media (min-width: 768px) and (max-width: 1024px) {
  .l-main,
  .l-address,
  .f-nav {
    font-size: min(var(--font-size-rg), calc((12/768) * 100vw));
  }
}
@media (min-width: 768px) {
  .l-container--form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5.34em;
  }
  .l-container--detail {
    padding-block-start: calc(4em * var(--amplify-x1h));
  }
  .l-container--addside {
    display: grid;
    grid-template-columns: 17.6em 51.2em;
    gap: 5.34em;
  }
  .l-sidenav:has(.c-toc) {
    display: block;
  }
}


/** --------------------------------------------------
 * component
 *
 * logo
 * icon
 * title
 * button / link
 * text
 * paragraph
 * scroll text
 * card
 * tag
 * category
 * form
 * toc
 * step
 * pagination
 *
 */

.c-logo {
  font-size:   var(--logo-font-size);
  font-weight: var(--logo-font-weight);
  line-height: var(--logo-line-height);
  & img {
    width: 100%;
    max-width: var(--logo-width);
    aspect-ratio: var(--logo-aspect);
    margin-block-start: var(--logo-margin);
  }
}
.c-logo__link {
  display: flex;
  align-items: center;
  gap: 1em;
}
.c-logo__text {
  display: block;
  width: fit-content;
  line-height: var(--line-height-xxs);
}


/**
 * icon
 */
[class*="c-icon-"]::before {
  content: "";
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: var(--font-ratio-xl);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-full);
  background-repeat: no-repeat;
  background-size: 1em auto;
  background-color: var(--common-color-primary);
  background-position: center center;
}
[class*="c-icon-arw"]::before,
[class*="c-icon-arw"]::after {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width:  2em;
  height: 2em;
  margin-block: .5em;
  border-radius: 100%;
  font-size: var(--font-ratio-sm);
  font-family: var(--common-font-icon);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-non);
  transition: .3s;
}
.c-icon-arw-t::before,
.c-icon-arw-r::before,
.c-icon-arw-b::before {
  display: none;
}

.c-icon-assignment::before {
  /* content: "\eaa6"; */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-flag%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M5%205a5%205%200%200%201%207%200a5%205%200%200%200%207%200v9a5%205%200%200%201%20-7%200a5%205%200%200%200%20-7%200v-9z%22%20%2F%3E%3Cpath%20d%3D%22M5%2021v-7%22%20%2F%3E%3C%2Fsvg%3E');
}
.c-icon-reason::before {
  /* content: "\febc"; */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-bubble-text%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M7%2010h10%22%20%2F%3E%3Cpath%20d%3D%22M9%2014h5%22%20%2F%3E%3Cpath%20d%3D%22M12.4%203a5.34%205.34%200%200%201%204.906%203.239a5.333%205.333%200%200%201%20-1.195%2010.6a4.26%204.26%200%200%201%20-5.28%201.863l-3.831%202.298v-3.134a2.668%202.668%200%200%201%20-1.795%20-3.773a4.8%204.8%200%200%201%202.908%20-8.934a5.33%205.33%200%200%201%204.287%20-2.16%22%20%2F%3E%3C%2Fsvg%3E');
}
.c-icon-suggestion::before {
  /* content: "\f074"; */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-checklist%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M9.615%2020h-2.615a2%202%200%200%201%20-2%20-2v-12a2%202%200%200%201%202%20-2h8a2%202%200%200%201%202%202v8%22%20%2F%3E%3Cpath%20d%3D%22M14%2019l2%202l4%20-4%22%20%2F%3E%3Cpath%20d%3D%22M9%208h4%22%20%2F%3E%3Cpath%20d%3D%22M9%2012h2%22%20%2F%3E%3C%2Fsvg%3E');
}
.c-icon-function::before {
  /* content: "\eb20"; */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-settings%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M10.325%204.317c.426%20-1.756%202.924%20-1.756%203.35%200a1.724%201.724%200%200%200%202.573%201.066c1.543%20-.94%203.31%20.826%202.37%202.37a1.724%201.724%200%200%200%201.065%202.572c1.756%20.426%201.756%202.924%200%203.35a1.724%201.724%200%200%200%20-1.066%202.573c.94%201.543%20-.826%203.31%20-2.37%202.37a1.724%201.724%200%200%200%20-2.572%201.065c-.426%201.756%20-2.924%201.756%20-3.35%200a1.724%201.724%200%200%200%20-2.573%20-1.066c-1.543%20.94%20-3.31%20-.826%20-2.37%20-2.37a1.724%201.724%200%200%200%20-1.065%20-2.572c-1.756%20-.426%20-1.756%20-2.924%200%20-3.35a1.724%201.724%200%200%200%201.066%20-2.573c-.94%20-1.543%20.826%20-3.31%202.37%20-2.37c1%20.608%202.296%20.07%202.572%20-1.065z%22%20%2F%3E%3Cpath%20d%3D%22M9%2012a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200%22%20%2F%3E%3C%2Fsvg%3E');
}
.c-icon-voice::before {
  /* content: "\eb4d"; */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-user%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M8%207a4%204%200%201%200%208%200a4%204%200%200%200%20-8%200%22%20%2F%3E%3Cpath%20d%3D%22M6%2021v-2a4%204%200%200%201%204%20-4h4a4%204%200%200%201%204%204v2%22%20%2F%3E%3C%2Fsvg%3E');
}
/* modifier: chevron */
.c-icon-arw-r::after {
  content: "\ea61";
}
.c-icon-arw-l::before {
  content: "\ea60";
}

/**
 * title
 */
.c-title,
.c-title--centering {
  position: relative;
}
:where(.c-title, .c-title--centering) .c-heading::before {
  content: attr(data-label);
  display: block;
  padding-block: calc(.75em + .2em) .75em;
  font-family: var(--common-font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-rg);
}
:where(.c-title, .c-title--centering) .c-heading::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--font-ratio-xl);
  height: .3rem;
  background-color: var(--common-color-primary);
}
:where(.c-title--centering) .c-heading::after {
  right: 0;
  margin-inline: auto;
}
.c-heading {
  font-size: 1em;
  .c-title--centering & {
    text-align: center;
  }
}
.c-heading__text {
  display: block;
  margin-block-end: .6em;
  font-size: min(var(--title-primary-size), calc((30/var(--min-width)) * 100vw));
  font-weight: var(--title-primary-weight);
  line-height: var(--title-primary-lineheight);
  &:not(.no-flex) {
    display: flex;
    flex-direction: column;
  }
  .c-title--centering & {
    justify-content: center;
  }
}
.c-heading__text ruby > rt {
  font-size: .8rem !important;
}

.c-heading__text--xx1 { font-size: var(--font-ratio-xx1); line-height: 1.3; }
.c-heading__text--x1  { font-size: var(--font-ratio-x1);  line-height: 1.3; }
.c-heading__text--lg  { font-size: var(--font-ratio-lg);  line-height: 1.3; }
.c-heading__text--md  { font-size: var(--font-ratio-md);  line-height: 1.2; }
.c-heading__text--rg  { font-size: var(--font-ratio-rg);  line-height: 1.2; }
.c-heading__text--sm  { font-size: var(--font-ratio-sm);  line-height: 1.2; }
.c-heading__text--xs  { font-size: var(--font-ratio-xs);  line-height: 1.2; }
.c-heading__text--xxs { font-size: var(--font-ratio-xxs); line-height: 1.2; }
.c-heading__text--exs { font-size: var(--font-ratio-exs); line-height: 1.2; }
.c-heading__text--min { font-size: var(--font-ratio-min); line-height: 1.2; }

/* title bar */
.c-title-bar {
  position: relative;
  width: 100%;
  margin-block-end: .6em;
  border-radius: var(--radius-rg);
  background-color: var(--theme-color-secondary90);
  font-size: var(--font-ratio-xl);
}
.c-title-bar__heading {
  width: 100%;
  padding: .666em .8em;
  font-size: 1em;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xs);
}
.c-title-bar__text {
  display: block;
  border-inline-start: .3rem solid var(--common-color-primary);
  padding-inline-start: .4em;
}

/* title article */
.c-title-article {
  margin-block-end: var(--spacer-13);
  padding-block-start: calc(var(--spacer-36) * var(--amplify-x1h));
  border-block-start: .1rem solid var(--common-border-color);
  font-size: 1em;
}
.c-heading-article {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacer-10);
  font-size: 1em;
  font-weight: var(--font-weight-normal);
  &::before {
    flex-shrink: 0;
    width: var(--spacer-42);
    background-size: var(--font-ratio-exl) auto;
  }
}
.c-heading-article__text {
  flex-grow: 1;
  margin-block-start: .125em;
  font-size: var(--font-ratio-xlg);
}

/* title icon */
.c-title-icon {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .8em;
  &::before {
    content: "";
    display: block;
    width: 6em;
    height: auto;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}
.c-title-icon__heading {
  width: 100%;
  font-size: 1em;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xs);
}

@media (max-width: 767px) {
  .c-title-icon__text {
    display: flex;
    flex-direction: column;
    font-size: min(var(--font-size-xxl), calc((20/var(--min-width)) * 100vw));
  }
}
@media (min-width: 768px) {
  .c-heading__text {
    font-size: min(var(--title-primary-size), var(--font-ratio-ltd));
  }
  .c-heading__text ruby > rt {
    font-size: var(--font-size-exs) !important;
  }
  .c-heading-article {
    gap: var(--spacer-12);
    &::before {
      width: var(--spacer-52);
      background-size: var(--font-ratio-ltd) auto;
    }
  }
  .c-heading-article__text {
    font-size: var(--font-ratio-exl);
  }
  .c-title-icon::before {
    width: 4em;
  }
  .c-title-icon__text {
    font-size: 1.8666em;
  }
}
@media (min-width: 1025px) {
  .c-heading__text {
    font-size: var(--font-ratio-ltd);
  }
}

.c-catch__heading {
  display: flex;
  flex-direction: column;
  font-size: 1em;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-md);
}
.c-catch__text {
  font-size: calc(var(--font-ratio-lg) * var(--amplify-x2));
}


/**
 * button / link
 */
.c-button,
.c-button--nega {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  gap: 1em;
  padding: calc(1em - .1rem) calc(1.77em - .1rem);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xl);
  &:not(.c-button--nega) {
    border: .1rem solid var(--common-color-primary);
    background-color: var(--common-color-primary);
    color: var(--common-color-light);
  }
  &::before,
  &::after {
    font-family: var(--common-font-icon);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-non);
  }
  &.c-icon-arw-r {
    min-width: 17.6em;
    justify-content: space-between;
    &::after {
      background-color: var(--common-color-light);
      color: var(--common-color-primary);
    }
  }
  &:disabled {
    pointer-events: none;
    border-color: var(--common-divider);
    background-color: var(--common-bg-gray);
    &::after {
      opacity: .75;
      color: var(--common-color-gray);
    }
  }
}
.c-button--nega {
  justify-content: space-between;
  border: .1rem solid var(--common-color-nega);
  background-color: var(--common-color-nega);
  color: var(--common-color-light);
  &::before {
    background-color: var(--common-color-light);
    color: var(--common-color-nega);
  }
}
@media (min-width: 768px) {
  .c-button.c-icon-arw-r .c-button__text {
    font-size: 1.067em;
  }
}
@media (any-hover:hover) {
  .c-button,
  .c-button--nega {
    cursor: pointer;
    transition: background .3s, color .3s;
  }
  .c-button:not(:disabled):hover {
    background-color: var(--common-color-light);
    color: var(--common-color-primary);
  }
  .c-button.c-icon-arw-r:not(:disabled):hover::after {
    background-color: var(--common-color-primary);
    color: var(--common-color-light);
  }
  .c-button--nega:hover {
    background-color: var(--common-color-light);
    color: var(--common-color-nega);
  }
  .c-button--nega.c-icon-arw-l:hover::before {
    background-color: var(--common-color-nega);
    color: var(--common-color-light);
  }
}
.c-button__wrap {
  display: flex;
  justify-content: center;
  margin-block-start: calc(2.667em * var(--amplify-x2));
  gap: 1em;
}

/* link */
.c-link {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  position: relative;
  width: fit-content;
  cursor: pointer;
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width:  calc(2em * var(--amplify-x2));
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--common-color-primary);
  }
  &::after {
    content: "\ea61";
    position: relative;
    display: grid;
    place-content: center;
    width: calc(1.5em * var(--amplify-x2));
    height: calc(1.5em * var(--amplify-x2));
    color: var(--common-color-light);
    font-size: var(--font-ratio-xl);
    font-family: var(--common-font-icon);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-non);
  }
}
.c-link__text {
  position: relative;
  margin-inline: 1em 2em;
  text-decoration: underline;
}
.c-link__wrap {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: calc(1.334em * var(--amplify-x2));
  gap: 1em;
}
@media (any-hover: hover) {
  .c-link::before {
    transition: .3s;
  }
  .c-link:hover::before {
    width: 100%;
  }
  .c-link__text {
    transition: color .3s .1s;
    .c-link:hover & {
      color: var(--common-color-light);
      text-decoration: none;
    }
  }
}

.c-textlink[target]::after {
  content: "\ea99";
  margin-inline-start: .375rem;
  font-family: var(--common-font-icon);
}
.c-textlink__text {
  text-decoration: underline;
}
@media (any-hover: hover) {
  .c-textlink {
    transition: .3s;
    &:hover .c-textlink__text {
      text-decoration: none;
    }
  }
}


/**
 * text
 */
.c-intro,
.c-intro--centering {
  line-height: var(--line-height-lg);
  & > * + * {
    margin-block-start: 1.25em;
  }
}
@media (min-width: 768px) {
  .c-intro--centering {
    text-align: center;
  }
}


/**
 * scrol text
 */
@keyframes marqueetext {
    0% { background-position: left center; }
  100% { background-position: calc(var(--marquee-text) * (1.5em * var(--marquee-direction))) center; }
}
.c-scrolltext {
  position: relative;
  margin-block-start: calc(4.125em * var(--amplify-x2));
  background-color: var(--common-bg-gray);
  &::before {
    content: "";
    opacity: .45;
    z-index: -1;
    display: block;
    position: absolute;
    top: -.875em;
    left: 0;
    width: 100%;
    height: 1em;
    background-repeat: repeat;
    background-size: calc(var(--marquee-text) * 1.5em) auto;
    animation: marqueetext calc(var(--marquee-text) * .975s) infinite linear;
    font-size: calc(4.125em * var(--amplify-x2));
  }
}


/**
 * paragraph
 */
 .c-prg {
  margin-block-start: 1em;
  line-height: var(--line-height-lg);
  & > * + * {
    margin-block-start: 1.8em;
  }
}
.c-prg__figure {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 37.334em;
  margin-block: calc(2em * var(--amplify-x2));
  margin-inline: auto;
  & > * {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .c-prg {
    margin-block-start: 2em;
  }
}

.c-standby {
  padding-block: calc(var(--spacer-40) * var(--amplify-x2));
  text-align: center;
}

/**
 * figure
 */
.c-figure,
.c-figure-article {
  max-width: 100%;
  & img,
  & svg,
  & iframe {
    max-width: 100%;
    height: auto;
  }
}


/**
 * list table
 */
.c-list-table {
  width: 100%;
}

.c-list-table__row {
  padding-block: calc(1.084em * var(--amplify-x2));
  border-block-end: .1rem solid var(--common-border-color);
  line-height: var(--line-height-lg);
  &:first-of-type {
    border-block-start: .1rem solid var(--common-border-color);
  }
  & > * {
    padding-block: .5em;
  }
}
.c-list-table__head {
  font-weight: var(--font-weight-bold);
}
.c-list-table__item:not(:first-of-type) {
  margin-block-start: 1.5em;
}

/**
 * card
 */
.c-card {
  display: grid;
  align-items: flex-start;
  width: 100%;
}
.c-card__figure {
  width: 100%;
  background-color: var(--common-color-gray);
  & > * {
    display: block;
    width: 100%;
    height: auto;
    padding: calc(.56em * var(--amplify-x2));
    background-color: var(--card-bg-color, transparent);
    transition: background .3s;
    aspect-ratio: 16 / 9;
    & * {
      object-fit: cover;
      width:  100%;
      height: 100%;
      background-color: var(--common-color-light);
      box-shadow: 0 .2em .4em rgba(0,0,0,.16);
    }
  }
}
.c-list-title {
  font-weight: var(--font-weight-medium);
}
.c-list-title__text {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .c-card {
    grid-template-columns: min(9em ,33%) 1fr;
    grid-template-rows: auto 1fr;
    column-gap: .6em;
    margin-block-start: 1em;
  }
  .c-card__figure {
    grid-row: span 2;
  }
  .c-list-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: .933em;
  }
  .c-list-title__text {
    font-size: min(var(--font-size-lg), calc((14/var(--min-width))* 100vw));
  }
}
@media (min-width: 768px) {
  .c-card {
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  .c-list-title {
    margin-block-start: 1rem;
    font-size: 1em;
    line-height: var(--line-height-md);
  }
  .c-list-title__text {
    font-size: min(var(--font-size-lg), 1.2em);
  }
}
@media (any-hover: hover) {
  .c-card:has(a:hover) .c-list-title__text {
    text-decoration: none;
  }
}


/**
 * tag
 */
.c-tag {
  display: inline-grid;
  grid-template-columns: 1em 1fr;
  align-items: flex-start;
  padding-block: .333em;
  padding-inline: .333em .6em;
  border-radius: var(--tag-radius);
  background-color: var(--tag-bg-color);
  color: var(--tag-text-color);
  line-height: var(--tag-lineheight);
  &::before {
    content: "・";
  }
}
.c-tag__items {
  display: flex;
  flex-wrap: wrap;
  margin-block-end: .5em;
  gap: .5em;
  font-size: .5em;
}
.c-tag__item {
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .c-tag__items {
    margin-block-start: 2.9em;
    font-size: var(--font-ratio-exs);
  }
}


/**
 * category
 */
.c-categories {
  width: 100%;
}
.c-categories__row {
  width: 100%;
  padding: .75em;
  border-radius: var(--radius-rg);
  background-color: var(--common-bg-gray);
  & + & {
    margin-block-start: .8em;
  }
}
.c-categories__head {
  font-weight: var(--font-weight-bold);
}
.c-categories__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.666em;
  font-size: .8em;
}
.c-categories__link {
  display: block;
  width: fit-content;
  padding: 1em 1.666em;
  border-radius: var(--radius-full);
  border: .1rem solid var(--common-border-color);
  background-color: var(--common-color-light);
  font-size: 1em;
  line-height: var(--line-height-non);
  text-align: center;
  white-space: nowrap;
  &.--current {
    border-color: var(--common-color-primary);
    background-color: var(--common-color-primary);
    color: var(--common-color-light);
  }
}
@media (max-width: 767px) {
  .c-categories__desc {
    margin-block-start: .75em;
    padding-block-start: .75em;
    border-block-start: .1rem solid var(--common-border-color);
  }
}
@media (min-width: 768px) {
  .c-categories__row {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    padding: 2.668em;
    border-radius: var(--radius-lg);
  }
  .c-categories__head {
    padding-block: .5em;
  }
  .c-categories__desc {
    margin-inline-start: 2.286em;
    padding-inline-start: 2.286em;
    border-inline-start: .1rem solid var(--common-border-color);
  }
}
@media (any-hover: hover) {
  .c-categories__link {
    transition: boder .3s, background .3s, color .3s;
    &:not(.--current):hover {
      border-color: var(--common-color-primary);
      background-color: var(--common-color-primary);
      color: var(--common-color-light);
    }
  }
}


/**
 * form
 */
 .c-form {
  position: relative;
  &::before {
    content: "";
  }
  & input[type="text"],
  & input[type="email"],
  & input[type="tel"],
  & input[type="number"],
  & input[type="url"],
  & select,
  & textarea {
    width: 100%;
    max-width: 45em;
    min-height: calc(3.5625em * var(--amplify-x1h));
    padding: calc(.46875em * var(--amplify-x1h))  calc(.65625em * var(--amplify-x1h));
    text-align: left;
    border-radius: var(--radius-md);
    border: .1rem solid var(--common-divider);
    background-color: var(--common-color-light);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: var(--font-size-md);
    transform: none;
    transition: none;
  }
  & textarea {
    height: 15em;
  }
  & .c-intro > *:not(.c-heading) {
    font-size: var(--font-ratio-sm);
  }
}
.c-select__wrap {
  position: relative;
  width: 100%;
  max-width: 45em;
  margin-block-start: 1em;
  font-size: var(--font-size-md);
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: .1rem;
    width:  2.5em;
    height: 2.5em;
    background-color: var(--common-color-light);
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-chevron-down%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M6%209l6%206l6%20-6%22%20%2F%3E%3C%2Fsvg%3E');
    background-position: center;
    background-size: 60%;
    pointer-events: none;
  }
  & .c-select {
    width: 100%;
    padding-inline-end: 2.5em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: none;
  }
}
.c-radio__label,
.c-checkbox__label {
  cursor: pointer;
  &  > input {
    display: none;
  }
}
.c-radio__text,
.c-checkbox__text {
  display: inline-grid;
  position: relative;
  grid-template-columns: auto 1fr;
  gap: .5em;
  &::before {
    content: "";
    display: block;
    width:  1.5em;
    height: 1.5em;
    border: .1rem solid currentColor;
  }
  &::after {
    content: "";
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--common-color-primary);
    font-family: var(--common-font-icon);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-non);
  }
  input:checked + &::after {
    opacity: 1;
  }
}
.c-radio__text::before {
  border-radius: var(--radius-full);
}
.c-radio__text::after {
  content: "\f671";
  padding: .25em;
  font-size: 1em;
}
.c-checkbox__text::before {
  border-radius: var(--radius-rg);
}
.c-checkbox__text::after {
  content: "\ea5e";
  font-size: 1.5em;
}
@media (min-width: 1025px) {
  .c-form {
    position: relative;
    &::before {
      content: "";
    }
    & input[type="text"],
    & input[type="email"],
    & input[type="tel"],
    & input[type="number"],
    & select,
    & textarea {
      padding: calc(.625em * var(--amplify-x2)) calc(.875em * var(--amplify-x2));
    }
  }
}

/* form: list */
.c-form__items {
  margin-block-start: 4em;
  border-block-start: .1rem solid var(--common-border-color);
}
.c-form__item {
  position: relative;
  padding-block-start: 3.2em;
  &:first-of-type {
    padding-block-start: 5em;
  }
}
.c-form__head {
  font-size: 1.067em;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-rg);
}
.c-form__desc {
  margin-block-start: 1em;
}
.c-form__pretext {
  margin-block-start: .75em;
  font-size: .875em;
  &.--danger,
  &.--warning,
  &.--success,
  &.--info {
    display: grid;
    grid-template-columns: 2em 1fr;
    &::before {
      content: "";
      display: block;
      margin-block-start: -.175em;
      font-family: var(--common-font-icon);
      font-size: 1.5em;
    }
  }
  &.--danger::before {
    content: "\f6f0";
    color: var(--common-color-danger);
  }
  &.--warning::before {
    content: "\f6f0";
    color: var(--common-color-warning);
  }
  &.--success::before {
    content: "\f746";
    color: var(--common-color-success);
  }
  &.--info::before {
    content: "\eac6";
    color: var(--common-color-info);
  }
}
.c-form__label {
  display: flex;
  flex-direction: row-reverse;
  width: fit-content;
  gap: 1em;
  font-size: 1em;
  &.--required::before {
    content: "必須";
    width: 4.28em;
    border-radius: var( --radius-rg);
    background-color: var(--common-color-primary);
    color: var(--common-color-light);
    font-size: .6875em;
    line-height: 2.4;
    text-align: center;
  }
}

.c-agreement {
  padding-block-start: 2.134em;
  text-align: center;
}

.c-submit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
  padding-block-start: calc(2.666em * var(--amplify-x2));
  text-align: center;
}
@media (min-width: 768px) {
  .c-submit {
    flex-direction: row-reverse;
  }
}


/**
 * toc
 */
.c-toc {
  width: 100%;
}
.c-toc__head {
  display: block;
  margin-block-end: 1.6em;
  font-size: 1em;
  font-weight: var(--font-weight-bold);
  &::before {
    content: "-";
    margin-inline-end: .333em;
    font-weight: var(--font-weight-bold);
  }
}
.c-toc__desc {
  position: relative;
  font-size: .875em;
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: .3rem;
    height: 100%;
    background-color: var(--common-border-color);
  }
}

.c-toc-list__link {
  display: block;
  position: relative;
  padding-block: .5em;
  padding-inline-start: 1em;
  border-inline-start: .3rem solid transparent;
  text-decoration: none;
  .c-toc-list__item--lv2 & {
    padding-inline-start: 2em;
  }
  .c-toc-list__item--lv3 & {
    padding-inline-start: 3em;
  }
  .c-toc-list__item--lv4 & {
    padding-inline-start: 4em;
  }
  .c-toc-list__item--lv5 & {
    padding-inline-start: 5em;
  }
  &[aria-current],
  .is-active &  {
    border-inline-start-color: var(--common-color-primary);
    color: var(--common-color-primary);
    font-weight: bold;
  }
}
@media (min-width: 768px) {
  .c-toc {
    z-index: 1;
    position: sticky;
    top: var(--header-height);
    left: 0;
  }
}


/**
 * step
 */
.c-step-form {
  width: 100%;
  padding: calc(1em * var(--amplify-x2)) calc(1.143em * var(--amplify-x2));
  border-radius: var(--radius-md);
  border: .1rem solid var(--common-color-dark);
  font-size: .75em;
  line-height: var(--line-height-non);
}
.c-step-form__items {
  counter-reset: list-counter;
}
.c-step-form__item {
  position: relative;
  & + &{
    margin-block-start: calc(.7em * var(--amplify-x2));
    padding-top: calc(.7em * var(--amplify-x2));
    border-top: .1rem solid var(--common-border-color);
  }
}
.c-step-form__label {
  counter-increment: list-counter;
  opacity: 0.3;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1em;
  color: var(--common-color-dark);
  &::before {
    content: counter(list-counter,decimal-leading-zero);
    z-index: 1;
    position: relative;
    display: grid;
    place-content: center;
    width:  2.545em;
    height: 2.545em;
    border-radius: var(--radius-full);
    background-color: var(--common-color-dark);
    color: var(--common-color-light);
    font-size: .786em;
    font-family: var(--common-font-family-secondary);
    font-weight: var(--font-weight-normal);
  }
  .--current & {
    opacity: 1;
  }
  .--current &::before {
    background-color: var(--common-color-primary);
  }
  .--complete & {
    opacity: .8;
  }
}
@media (max-width: 767px) {
  .c-step-form {
    margin-block: -2.5em 2.5em;
  }
}
@media (min-width: 768px) {
  .c-step-form {
    z-index: 1;
    position: sticky;
    top: calc(7.34em + 1em);
    flex-shrink: 0;
    max-width: 20em;
    font-size: var(--font-ratio-sm);
  }
}


/**
 * c-strongblog-pagination: overwrite
 */
 .c-strongblog-pagination {
  margin-top: 3.25em;
  font-size: 1.067em;

  &::before {
    content: "";
  }
}
.c-strongblog-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-column-gap: .375em;
}

.c-strongblog-pagination__item:not(.-prev):not(.-next) {
  border-radius: var(--radius-full);
  border: .1rem solid transparent;
  background-color: transparent;
  &.-current {
    pointer-events: none;
    border-style: dashed;
    border-color: currentColor;
    background-color: transparent;
  }
}
.c-strongblog-pagination__item:not(:has(a)) {
  display: grid;
  place-content: center;
  width:  2.25em;
  height: 2.25em;
  font-size: 1em;
  pointer-events: none;
}

.c-strongblog-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  2.25em;
  height: 2.25em;
  border-radius: var(--radius-full);
  font-size: 1em;
  font-weight: 500;
  color: currentColor;
  text-decoration: none;
  & svg {
    display: none;
  }
  &.-current {
    color: currentColor;
  }
  .-prev &,
  .-next & {
    display: flex;
  }
  .-prev &::before {
    content: "\ea19";
  }
  .-next &::after {
    content: "\ea1f";
  }
  .-prev &::before,
  .-next &::after {
    display: grid;
    place-content: center;
    width:  1.666em;
    height: 1.666em;
    border-radius: var(--radius-full);
    border: .1rem solid var(--common-color-dark);
    background-color: var(--common-color-dark);
    color: var(--common-color-light);
    font-family: var(--common-font-icon);
    font-size: .75em;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-non);
  }
}
@container strongblog-container (min-width: 850px) {
  .c-strongblog-pagination {
    margin-top: 5em;
  }
  .c-strongblog-pagination__list {
    grid-column-gap: 1em;
    align-items: center;
  }
  .c-strongblog-pagination__item:not(:has(a)):not(.-prev):not(.-next),
  .c-strongblog-pagination__link {
    width:  3em;
    height: 3em;
  }
  .c-strongblog-pagination__item.-prev,
  .c-strongblog-pagination__item.-next,
  .-prev .c-strongblog-pagination__link,
  .-next .c-strongblog-pagination__link{
    width: auto;
    height: unset;
  }
  .c-strongblog-pagination__link {
    display: flex;
    align-items: center;
    gap: .5em;
  }
  .-prev .c-strongblog-pagination__link::after {
    content: "前のページ";
    text-decoration: underline;
  }
  .-next .c-strongblog-pagination__link::before {
    content: "次のページ";
    text-decoration: underline;
  }
}
@media (any-hover: hover) {
  .c-strongblog-pagination__item:not(:has(a)):hover {
    background-color: currentColor;
  }
  .c-strongblog-pagination__item.-prev:hover,
  .c-strongblog-pagination__item.-next:hover {
    background-color: transparent;
  }
  .c-strongblog-pagination__item,
  .c-strongblog-pagination__link,
  .c-strongblog-pagination__link::before,
  .c-strongblog-pagination__link::after {
    transition: .3s;
  }
  .c-strongblog-pagination__item:not(.-prev):not(.-next):hover {
    border-color: var(--common-color-dark);
  }
  .-prev .c-strongblog-pagination__link:hover::after,
  .-next .c-strongblog-pagination__link:hover::before {
    text-decoration: none;
  }
  .-prev .c-strongblog-pagination__link:hover::before,
  .-next .c-strongblog-pagination__link:hover::after {
    background-color: var(--common-color-light);
    color: var(--common-color-dark);
  }
}


/** --------------------------------------------------
 * header
 */
.l-header {
  z-index: 3000;
  position: fixed;
  top: 0;
  left:  0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 136.6rem;
  padding: .666em .75em;
}
.l-header__container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-radius: var(--radius-rg);
  background-color: var(--common-color-light);
  box-shadow: 0 .2em .4em rgba(0,0,0,.16);
}

.h-logo {
  flex-shrink: 0;
}

.h-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.h-nav__items {
  display: none;
}

.h-btn {
  &::before {
    content: "\fa47";
    font-size: 1.666em;
  }
}

@media (max-width: 767px) {
  .h-logo {
    margin: .75em 1.5em;
    font-size: .5em;
    & img {
      width: calc(14.2rem * .75);
    }
  }
  .h-btn {
    padding: .5em;
    & .c-button__text {
      display: none;
    }
  }
}
@media (max-width: 359px) {
  .l-header .c-logo__text {
    display: none;
  }
}
@media (min-width: 768px) {
  .l-header {
    padding: var(--spacer-20) var(--spacer-28);
  }
  .h-logo {
    margin: var(--spacer-13) var(--spacer-28);
  }
  .h-nav {
    margin-inline-end: 1.133em;
  }
  .h-btn {
    gap: .266em;
    &::before {
      font-size: var(--font-ratio-xl);
    }
  }
}
@media (min-width: 1025px) {
  .h-logo {
    & img {
      width: min(14.2rem, calc(((142*0.8)/1024) * 100vw));
    }
    & .c-logo__link {
      min-height: 4.919rem;
    }
    & .c-logo__text {
      font-size: min(var(--font-size-exs), calc((9/1024) * 100vw));
    }
  }
  .h-nav {
    font-size: min(var(--font-size-rg), calc((11.25/1024) * 100vw));
  }
  .h-nav__items {
    display: flex;
    gap: clamp(.8em, calc((24/1200) * 100vw), 1.6em);
    margin-inline-end: 1.6em;
    font-weight: var(--font-weight-medium);
  }
  .h-nav__link {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: calc(100% + .5em);
      left: 0;
      right: 0;
      margin: auto;
      width: 100%;
      height: .3rem;
      border-radius: var(--radius-full);
      background-color: var(--common-color-primary);
      transform: scaleX(0);
      transition: transform .3s;
    }
    .h-nav__item:hover &::before {
      transform: scaleX(1);
    }
  }
  .h-snav {
    position: relative;
    & .h-nav__link {
      display: flex;
      align-items: center;
      &::after {
        content: "\ea5f";
        margin-inline-start: .4rem;
        color: var(--common-color-primary);
        font-family: var(--common-font-icon);
        font-size: var(--font-ratio-xl);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-non);
      }
    }
  }
  .h-snav__wrap {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left:  50%;
    width: fit-content;
    padding-block-start: 2em;
    transform: translateY(.666em) translateX(-50%);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
    &::before {
      content: "";
      display: block;
      width:  1em;
      height: 1em;
      margin-inline: auto;
      background-color: var(--common-color-light);
      clip-path:polygon(50% 0, 100% 100%, 0 100%);
    }
    .h-snav.is-hover & {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) translateX(-50%);
      transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
    }
  }
  .h-snav__items {
    padding: 1.5em;
    border-radius: var(--radius-rg);
    background-color: var(--common-color-light);
    box-shadow: 0 .2em .4em rgba(0,0,0,.16);
    white-space: nowrap;
  }
  .h-snav__item {
    padding-block-end: .5em;
    border-block-end: .1rem solid var(--common-border-color);
    & + & {
      margin-block-start: .75em;
    }
  }
  .h-snav__link {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    &::before {
      content: "\ea1f";
      display: flex;
      justify-content: center;
      align-items: center;
      width:  1.25em;
      height: 1.25em;
      margin-block-start: .25em;
      border-radius: 100%;
      background-color: var(--common-color-primary);
      color: var(--common-color-light);
      font-family: var(--common-font-icon);
      font-size: var(--font-size-xs);
      line-height: var(--line-height-non);
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: calc(100% + .5em);
      left: 0;
      width: 100%;
      height: .1rem;
      background-color: var(--common-color-primary);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .3s;
    }
    &:hover::after {
      transform: scaleX(1);
    }
  }
}
@media (min-width: 1201px) {
  .h-nav {
    font-size: min(var(--font-size-rg), calc((15/1366) * 100vw));
  }
  .h-nav__items {
    gap: clamp(1.6em, calc((36/1366) * 100vw), 2.0em);
    margin-inline-end: 2.5em;
  }
}


/**
 * drawer: button
 */
 .c-mobilemenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 3.25em;
  height: auto;
  aspect-ratio: 1 / 1;
  border: none;
  padding: 0;
  color: var(--common-color-primary);
  line-height: var(--line-height-non);
  cursor: pointer;
  &::before {
    content: "";
    display: block;
    width:  calc((26/15) * 1em);
    height: calc((18/15) * 1em);
    margin-block-start: calc((10/15) * 1em);
    margin-block-end: calc((4/15) * 1em);
    background-image: linear-gradient(180deg, var(--common-color-primary) 0, var(--common-color-primary) calc((2/15) * 1em), transparent calc((2/15) * 1em), transparent calc((8/15) * 1em));
    background-size: 100% calc((8/15) * 1em);
    background-repeat: repeat;
  }
}
.c-mobilemenu__text {
  font-size:   var(--font-size-min);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-rg);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .c-mobilemenu {
    margin-inline-start: calc((14/15) * 1em);
  }
}


/** --------------------------------------------------
 * footer
 */
.l-footer {
  position: relative;
  background-color: var(--common-color-light);
}
.l-footer__container {
  overflow: hidden;
  width: 100%;
  padding-inline: 1em;
}
.l-footer__inner {
  width: 100%;
  max-width: 117.6rem;
  margin-inline: auto;
  .l-footer__container:first-of-type & {
    padding-block-start: 4em;
  }
  .l-footer__container:last-of-type & {
    padding-block: 1em;
    border-block-start: .1rem solid var(--common-divider);
    font-size: var(--font-size-exs);
  }
}
.f-info__items,
.f-address {
  line-height: var(--line-height-rg);
}
.f-address {
  margin-block-start: 2em;
}
.f-address__head {
  font-size: 1.1167em;
  font-weight: var(--font-weight-bold);
}
.f-address__desc {
  margin-block-start: .125em;
}
.f-nav,
.ex-nav {
  display: none;
}
.ex-nav__link[target="_blank"]::after {
  content: "\ea99";
  margin-inline-start: .375rem;;
  font-family: var(--common-font-icon);
}
@media (max-width: 767px) {
  .f-info__items,
  .f-address {
    font-size: var(--font-size-xxs);
  }
  .f-info__items {
    margin-block-start: calc((32/12) * 1em);
  }
}
@media (min-width: 768px) {
  .l-footer__inner {
    display: grid;
    width: 100%;
    .l-footer__container:first-of-type & {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }
    .l-footer__container:last-of-type & {
      display: grid;
      grid-template-columns: 1fr auto;
      padding-block: calc((24/11) * 1em);
    }
  }

  .f-nav,
  .ex-nav {
    display: block;
  }

  .f-nav__items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    min-width: 43em;
    max-height: 18em;
    column-gap: 3.5em;
    row-gap: 2.5em;
  }
  .f-nav__link {
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
  .f-snav__items {
    display: flex;
    flex-direction: column;
    margin-block-start: 1em;
    gap: 1em;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-rg);
  }
  .f-snav__link {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }

  .ex-nav__items {
    display: flex;
    gap: calc((20/11) * 1em);
  }
  .ex-nav__text {
    text-decoration: underline;
    .ex-nav__link:hover & {
      text-decoration: none;
    }
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .f-logo {
    grid-column: span 1;
    grid-row: span 2;
  }
  .f-info {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 3em;
    margin-block-end: 3em;
  }
  .f-info__items,
  .f-address {
    font-size: var(--font-size-xxs);
  }
  .f-info__items {
    grid-column: span 2;
  }
  .f-address {
    grid-column: span 1;
  }
}
@media (min-width: 1025px) {
  .l-footer__container:first-of-type .l-footer__inner {
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .f-info__items,
  .f-address {
    font-size: min(var(--font-size-xxs), calc((10/1024) * 100vw));
    line-height: var(--line-height-md);
  }
  .f-info__items {
    margin-block-start: calc((32/12) * 1em);
  }
  .f-nav {
    flex-grow: 1;
    margin-inline-start: auto;
    font-size: min(var(--font-size-md), calc((14/1024) * 100vw));
  }
  .f-snav__items {
    font-size: min(var(--font-size-xs), calc((11/1024) * 100vw));
  }
}


/*
 * page top
 */
 .c-pagetop {
  /* z-index: 2000;
  position: sticky;
  bottom: 0;
  right: 0;
  left: 0; */
  position: relative;
  width: 100%;
  max-width: 117.6rem;
  margin: auto;
  pointer-events: none;
}
.c-pagetop__link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: fit-content;
  margin-inline-start: auto;
  padding: 1em;
  font-family: var(--common-font-family-secondary);
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-non);
  text-transform: uppercase;
  pointer-events: auto;
  &::after {
    content: "\ea25";
    font-family: var(--common-font-icon);
    font-size: 1.5em;
  }
}


/**
 * copyright
 */
 .c-copyright {
  display: block;
  font-size: 1em;
  text-transform: uppercase;
  text-align: center;
}


/** --------------------------------------------------
 * nav global
 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0) }
  to   { opacity: 0; transform: translateY(3rem) }
}

@keyframes headerFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 1; transform: translateY(calc(-100% - 3rem)); }
}
@keyframes headerFadeIn {
  from { opacity: 1; transform: translateY(calc(-100% - 3rem)) }
  to   { opacity: 1; transform: translateY(0) }
}

@keyframes fadeInBackdrop {
  from { background-color: rgba(0, 0, 0, 0); }
  to { background-color: rgba(0, 0, 0, 0.5); }
}
@keyframes fadeOutBackdrop {
  from { background-color: rgba(0, 0, 0, 0.5); }
  to { background-color: rgba(0, 0, 0, 0); }
}

dialog {
  display: none;
 }
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

dialog[open] {
  display: block;
  animation: fadeIn .3s ease-out normal;
}

dialog[open]::backdrop {
  animation: fadeInBackdrop .3s ease-out normal;
}

.is-nav-closing dialog {
  animation: fadeOut .3s ease-out normal;
}

.is-nav-closing dialog::backdrop {
  animation: fadeOutBackdrop .3s ease-out normal;
}

.l-header {
  opacity: 1;
}
.is-nav-open .l-header {
  opacity: 0;
  animation: headerFadeOut .3s ease-out normal;
}
.is-nav-closing .l-header {
  animation: headerFadeIn .3s ease-out normal;
}

.g-nav {
  position: fixed;
  top: 0;
  left:  0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 100dvh;
  max-width: 1366px;
  padding: .666em .75em;
  border: 0;
  background-color: transparent;
  & .ex-nav__items {
    flex-direction: column;
    gap: calc((20/11) * 1em);
  }
  & .ex-nav__link {
    font-size: 1em;
    & .ex-nav__text {
      text-decoration: underline;
    }
    &:hover .ex-nav__text {
      text-decoration: none;
    }
  }
}
.g-nav__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: fit-content;
  max-height: 100%;
  border-radius: var(--radius-rg);
  background-color: var(--common-color-light);
  box-shadow: 0 .2em .4em rgba(0,0,0,.16);
}
.g-nav__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.g-nav__content {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
.g-nav__closer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.8em;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline-end: .25em;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--common-color-dark);
  color: var(--common-color-light);
  line-height: var(--line-height-non);
  cursor: pointer;
  &::before {
    content: "\eb55";
    font-family: var(--common-font-icon);
    font-size: 2em;
    line-height: 1;
  }
  &:hover {
    background-color: var(--common-color-dark);
    color: var(--common-color-light);
  }
  & .c-button__text {
    display: none;
  }
}
.g-nav__content {
  padding: .75em 1.5em 1.5em;
}
.g-nav__link {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--common-color-primary);
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
}
.g-snav__items {
  display: flex;
  flex-direction: column;
  margin-block-start: 1em;
  gap: 1em;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-rg);
}
.g-snav__link {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

.g-nav-figure {
  display: none;
}

@media (max-width: 767px) {
  .g-nav-logo {
    margin: .75em 1.5em;
    font-size: .5em;
    & img {
      width: calc(142px * .75);
    }
  }
  .g-nav__items {
    padding-block-end: 1.5em;
  }
  .g-nav__item {
    margin-block-start: 1.5em;
  }
  .g-nav .ex-nav__items {
    display: flex;
    gap: 1.25em;
    margin-block-start: 2.5em;
    padding-block-start: 2.5em;
    border-block-start: .1rem solid var(--common-divider);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-rg);
  }
}
@media (min-width: 768px) {
  .g-nav {
    padding: 2rem 2.8rem;
  }
  .g-nav-logo {
    margin: 1.3rem 2.8rem;
  }
  .g-nav__items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    min-width: 36em;
    max-height: 36.5em;
    row-gap: 2em;
    padding-block: 2em;
  }
  .g-nav-figure {
    display: block;
    width: 100%;
    padding: 1.5em 30% 1.5em 1.5em;
    border-radius: var(--radius-rg);
    background-color: var(--common-color-primary);
    background-image: url(../../common_img/nav-img.webp), url(../../common_img/nav-bg.webp);
    background-repeat: no-repeat;
    background-size: 12em, auto 150%;
    background-position: right bottom, left 65% top 25%;
    text-align: center;
  }
  .g-nav-figure__link {
    display: block;
  }
  .g-nav-figure__caps {
    max-width: 32rem;
    margin-block-start: .5em;
    color: var(--common-color-light);
    font-weight: var(--font-weight-bold);
  }
  .g-nav-figure__inner {
    width: 100%;
    max-width: 32rem;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: var(--common-color-dark);
    & iframe {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}
@media (min-width: 1025px) {
  .g-nav-logo {
    & .c-logo__text {
      font-size: min(var(--font-size-exs), calc((9/1024) * 100vw));
    }
  }
  .g-nav__closer {
    margin-inline-end: calc((17/15) * 1em);
  }
  .g-nav__content {
    display: grid;
    grid-template-columns: 36% 58%;
    gap: 6%;
  }
  .g-nav__items {
    max-height: 42.5em;
  }
  .g-nav {
    font-size: min(var(--font-size-rg), calc((12/1024) * 100vw));
  }
  .g-nav__link {
    font-size: var(--font-ratio-xl);
  }
  .g-nav-figure {
    width: 100%;
    height: 100%;
    padding: 1.5em;
    background-repeat: no-repeat;
    background-size: 15em, auto 150%;
    background-position: right bottom, left 65% top 25%;
  }
  .g-nav-figure__caps,
  .g-nav-figure__inner {
    max-width: 56rem;
  }
}
@media (min-width: 1200px) {
  .g-nav__items {
    max-height: 40em;
  }
}


/** --------------------------------------------------
 * page title
 */
.l-page-title {
  width: 100%;
  padding-block: 7em 2em;
  background-color: var(--common-color-primary);
  background-image: linear-gradient(0deg, rgba(var(--theme-color-primary-rgb), .4) 0%, rgba(var(--theme-color-primary-rgb), .4) 100%), url(../../common_img/bg.webp);
  background-repeat: no-repeat;
  background-blend-mode: luminosity;
  background-position: right 33% top;
  background-size: cover, 300vw auto;
  color: var(--common-color-light);
}
.l-page-title__heading {
  display: flex;
  align-items: baseline;
  font-size: 1em;
  line-height: var(--line-height-non);
  &::after {
    content: attr(data-label);
    display: block;
    margin-inline-start: .75em;
    font-family: var(--common-font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-non);
  }
}
.l-page-title__text {
  display: block;
  font-size: min(calc(var(--font-size-xxl) * 1.333), calc((24/var(--min-width)) * 100vw));
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-non);
}
.l-page-title__desc {
  margin-block-start: 1.154em;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-lg);
}


@media (min-width: 768px) {
  .l-page-title {
    padding-block: 10em 4em;
    background-size: cover, 192rem auto;
    background-position: center top;
  }
  .l-page-title__text {
    font-size: calc(var(--font-size-xxl) * 1.333);
  }
  .l-page-title__desc {
    font-size: .866em;
  }
}
@media (min-width: 1025px) {
  .l-page-title {
    padding-block: 10em 4em;
    background-size: cover, 192rem auto;
    background-position: center top;
  }
  .l-page-title__desc {
    font-size: var(--font-size-rg);
  }
}


/**
 * breadcrumb
 */
 .c-breadcrumb {
  display: none;
}
@media (min-width: 768px) {
  .c-breadcrumb {
    display: block;
  }
  .c-breadcrumb__items {
    display: flex;
    align-items: center;
    gap: .5em;
    padding-block: 2em;
    font-size: .8em;
  }
  .c-breadcrumb__item:not(:first-of-type)::before {
    content: "\ea61";
    margin-inline-end: .5em;
    font-family: var(--common-font-icon);
    color: var(--common-color-primary);
  }
  .c-breadcrumb__link {
    text-decoration: underline;
  }
  .c-breadcrumb__item:last-of-type .c-breadcrumb__text {
    overflow: hidden;
    display: block;
    width: 36em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (any-hover: hover) {
  .c-breadcrumb__link:hover {
    text-decoration: none;
  }
}


/** --------------------------------------------------
 * address
 */
.l-address {
  z-index: 11;
  position: relative;
  width: 100%;
  margin-block-start: calc(1.3em * var(--amplify-x2));
  padding-block:calc(2em * var(--amplify-x2));
  background-color: var(--common-color-primary);
  background-image: linear-gradient(0deg, rgba(var(--theme-color-primary-rgb), .4) 0%, rgba(var(--theme-color-primary-rgb), .4) 100%), url(../../common_img/bg.webp);
  background-repeat: no-repeat;
  background-blend-mode: luminosity;
  background-position: right 33% top;
  background-size: cover, 300vw auto;
  color: var(--common-color-light);
}
.l-address__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(1em * var(--amplify-x4));
  font-size: var(--font-size-xs);
}
.l-address__header {
  flex-shrink: 0;
}
.l-address__content {
  line-height: var(--line-height-lg);
}
.l-address__title::before {
  background-color: var(--common-color-light);
}
.l-address__ico {
  overflow: hidden;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width:  calc((1.5em * var(--amplify-x2)) - .4rem);
  height: calc((1.5em * var(--amplify-x2)) - .4rem);
  margin: auto;
  border-radius: 100%;
  border: .2rem solid var(--common-color-light);;
  background-color: var(--common-color-light);
  color: var(--common-color-primary);
  font-family: var(--common-font-icon);
  font-size: 2.667em;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-non);
  &::after {
    content: "\ea61";
    transition: transform .3s;
  }
}
@media (max-width: 767px) {
  .l-address__header {
    padding-inline-end: 6em;
  }
  .l-address__ico {
    position: absolute;
    top: 1.125em;
    right: 0;
  }
}
@media (min-width: 768px) {
  .l-address {
    background-size: cover, 192rem auto;
    background-position: center top;
  }
  .l-address__link {
    flex-direction: row;
    font-size: .866em;
    padding-inline-end: unset;
  }
  .l-address__content {
    margin-block-start: 4em;
  }
  .l-address__ico {
    position: relative;
    margin-block: 1em 0;
    transition: all .3s;
  }
}
@media (min-width: 1025px) {
  .l-address {
    padding-block:calc(2em * var(--amplify-x3));
  }
  .l-address__link {
    gap: calc(2em * var(--amplify-x4));
    font-size: var(--font-size-rg);
  }
  .l-address__content {
    margin-block-start: auto;
    margin-block-end: 2em;
  }
}
@media (any-hover: hover) {
  .l-address__ico::before {
    content: "\fa47";
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    color: var(--common-color-light);
    font-size: 1.25em;
    transform: translateX(-100%);
    transition: transform .3s;
  }
  .l-address__link:hover .l-address__ico {
    background-color: transparent;
    color: var(--common-color-light);
    &::after {
      transform: translateX(200%);
    }
    &::before {
      transform: translateX(0);
    }
  }
}