@charset "Shift_JIS";

/*==========================================
  CSS custom properties
=============================================*/
:root {
  --color-black: #000;
  --color-black-rgb: 0 0 0;
  --color-deep-red: #b50402;
  --color-mufg-red: #e60000;
  --color-light-red01: #dc5a5b;
  --color-light-red02: #ea9c9d;
  --color-light-red03: #feeff0;
  --color-link-blue: #2e6783;
  --color-mufg-gray: #5a5a5a;
  --color-mufg-gray-75per: #838383;
  --color-mufg-gray-50per: #acacac;
  --color-mufg-gray-50per-rgb: 172 172 172;
  --color-gray: #b5b6b6;
  --color-gray01: #bfbfbf;
  --color-gray02: #ccc;
  --color-gray03: #d6d6d6;
  --color-light-gray01: #f0f2f7;
  --color-light-gray02: #f2f2f2;
  --color-white: #fff;
  --color-white-rgb: 255 255 255;
  --color-cv-yellow: #fff0d0;
  --color-cyan-20per: #cceff9;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --icon-size-small: 16px;
  --icon-size-medium: 20px;
  --icon-size-large: 24px;
  --icon-size-x-large: 56px;
  --content-main-width: 1200px;
  --content-sub-1160w: 1160px;
  --content-sub-1050w: 1050px;
  --content-sub-1000w: 1000px;
  --content-sub-914w: 914px;
  --content-sub-800w: 800px;
  --modal-720w: 720px;
  --content-print-min-width: 1130px;
  --content-main-inline-padding: 25px;
  --bg-ico-chevron-right: url(../image/ico-chevron-right.svg) no-repeat center / contain;
  --bg-ico-chevron-left: url(../image/ico-chevron-left.svg) no-repeat center / contain;
  --bg-ico-pdf: url(../image/ico-pdf.svg) no-repeat center / contain;
  --overlay-type01: rgb(var(--color-black-rgb) / 0.7);
  --box-shadow-type01: 0 5px 10px 0 rgb(var(--color-black-rgb) / 0.1);
  --box-shadow-type02: 0 5px 10px 0 rgb(var(--color-black-rgb) / 0.16);
  --box-shadow-type03: 0 0 10px 0 rgb(var(--color-black-rgb) / 0.1);
  --box-shadow-type04: 0 10px 28px 0 rgb(var(--color-black-rgb) / 0.16);
  --box-shadow-type05: 0 -16px 28px 0 rgb(var(--color-black-rgb) / 0.1);
  --box-shadow-type06: 0 5px 10px 0 rgb(var(--color-black-rgb) / 0.08);
  --box-shadow-type07: 0 5px 10px 0 rgb(var(--color-black-rgb) / 0.12);
  --box-shadow-type08: 0 5px 8px 0 rgb(var(--color-black-rgb) / 0.05);
  --drop-shadow-type01: drop-shadow(0 5px 10px rgb(var(--color-black-rgb) / 0.12));
  --drop-shadow-type02: drop-shadow(0 0 5px rgb(var(--color-black-rgb) / 0.16));
  --drop-shadow-type03: drop-shadow(0 1px 10px rgb(var(--color-black-rgb) / 0.05));
  --opacity-hover-50per: 0.5;
  --z-layer-max: 100;
  --z-layer-30: 30;
  --z-layer-20: 20;
  --z-layer-10: 10;
  --line-height-large: 1.7;
  --line-height-medium: 1.5;
  --line-height-small: 1.4;
  --heading-lv1: 3.2rem;
  --heading-lv2: 2.8rem;
  --heading-lv3: 2.4rem;
  --heading-lv4: 2rem;
  --heading-lv5: 1.8rem;
  --text-x-large: 1.8rem;
  --text-large: 1.6rem;
  --text-medium: 1.4rem;
  --note-large: 1.2rem;
  --note-medium: 1rem;
  --header-sub-top-height: 54px;
  --header-sub-bottom-height: 56px;
  --header-main-menu-height: 68px;
  --header-simple-height: 54px;
  --footer-simple-height: 78px;
  --button-simple-height: 88px;
  /* Customize Focus Style */
  --outline-width: 3px;
}


/* Link
----------------*/
.c-link {
  transition: opacity 0.4s 0s ease;
  text-decoration: underline;
  color: var(--color-link-blue);
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .c-link:hover {
    opacity: var(--opacity-hover-50per);
    text-decoration: none;
  }
}

@media (hover: none) {
  .c-link:active {
    opacity: var(--opacity-hover-50per);
    text-decoration: none;
  }
}

[class^="c-"]:not(.c-link-layout)>.c-link {
  font-size: inherit;
}

.c-link[href^="tel:"] {
  font-size: 3.6rem;
  font-weight: 700;
}

@media all and (min-width: 768px), print {
  .c-link[href^="tel:"] {
    color: var(--color-black);
    text-decoration: none;
  }
}

[class*="c-link--ico"]::after {
  content: "";
  display: inline-block;
  height: var(--icon-size-large);
  margin-inline: 4px;
  position: relative;
  top: calc((1em * var(--line-height-medium) - var(--icon-size-large)) / 2);
  /* Necessary if the componees are nested, e.g. if they are used in a list componee. */
  vertical-align: text-top;
  width: var(--icon-size-large);
}

.c-link--ico-blank::after {
  background: var(--bg-ico-blank);
  height: var(--icon-size-small);
  top: calc((1em * var(--line-height-medium) - var(--icon-size-small)) / 2);
  width: var(--icon-size-small);
}

.c-link--ico-pdf::after {
  background: var(--bg-ico-pdf);
}