@charset "UTF-8";
/* CSS Document */


/*========= root ========*/

:root {
  --Color-GAred:#c50219;
  --Color-UI_red:#950006;
  --Color-color_bg:#FCFCFB;
  --Color-pink:#FEE2DC;
  --monotone-black:#000000;
  --Mono-extraDarkGray:#333333;
  --Mono-darkGray:#919191;
  --Mono-gray:#C3C3C3;
  --Mono-LightGray:#D9D9D9;
  --Mono-smoke:#F4F3F1;
  --Mono-white:#FFFFFF;
  --Mono-alphaBlack50:rgba(0, 0, 0, 0.5);
  --Mono-alphaBlack05:rgba(0, 0, 0, 0.05);

  --font-size-42: calc(42 / 16 * 1rem);
  --font-size-32: calc(32 / 16 * 1rem);
  --font-size-24: calc(24 / 16 * 1rem);
  --font-size-20: calc(20 / 16 * 1rem);
  --font-size-16: 1rem; /* 簡略化 */
  --font-size-14: calc(14 / 16 * 1rem);
  --font-size-12: calc(12 / 16 * 1rem);
  --font-size-10: calc(10 / 16 * 1rem);

  --gutter-1x:8px;
  --gutter-2x:16px;
  --gutter-3x:24px;
  --gutter-4x:32px;
  --gutter-5x:40px;
  --gutter-6x:54px;
  --gutter-7x:66px;
  --gutter-8x:64px;
  --gutter-9x:72px;
  --gutter-10x:80px;
  --gutter-16x:128px;

}
@media (max-width: 767px) {
  :root {
    --font-size-base: 16px;
    --font-size-42: clamp(1.5rem, 4vw, 2.625rem);   /* 24px - 42px */
    --font-size-32: clamp(1.5rem, 4vw, 2rem);       /* 24px - 32px */
    --font-size-24: clamp(1.25rem, 3.333vw, 1.5rem);  /* 20px - 24px */
    --font-size-20: clamp(1.125rem, 3vw, 1.25rem);    /* 18px - 20px */
    --font-size-16: clamp(0.875rem, 2.333vw, 1rem);   /* 16px - 14px */
    --font-size-14: clamp(0.8125rem, 2.167vw, 0.8125rem);/* 14px - 13px (固定値) */
    --font-size-12: clamp(0.75rem, 2vw, 0.75rem);    /* 12px - 12px (固定値)*/
    --font-size-10: clamp(0.625rem, 1.5vw, 0.625rem);    /* 10px - 10px (固定値)*/

    --gutter-1x:0.5rem;
    --gutter-2x:1rem;
    --gutter-3x:1.5rem;
    --gutter-4x:2rem;
    --gutter-5x:2.5rem;
    --gutter-6x:3rem;
    --gutter-7x:3.5rem;
    --gutter-8x:4rem;
    --gutter-9x:4.5rem;
    --gutter-10x:5rem;
    --gutter-16x:8rem;
  }
}

a {text-decoration: none;}

/*========= wrap ========*/
[class^="wrap__w"] {
    padding: 0 2rem;
    margin: var(--gutter-16x) auto;
}
.wrap__w1100 {
    /* max-width:1100px; */
    max-width: calc(1100px + 4rem);
}
.wrap__w750 {
   /*  max-width: 750px; */
    max-width:calc(750px + 4rem);
} 
.wrap__w700 {
    /* max-width: 700px; */
    max-width:calc(700px + 4rem);
}
@media screen and (max-width: 767px) {
    [class^="wrap__w"] {
        max-width: 100%;
        box-sizing: border-box;
        margin: var(--gutter-5x) auto;
    }
}


/*========= font ========*/
.page__sub * {
    font-size: var(--font-size-16);
    line-height: 1.8;
}
.page__sub h1 {
    font-size: var(--font-size-42);
    line-height: 1.2;
    font-weight: bold;
}
.page__sub h2 {
    font-size: var(--font-size-32);
    font-weight: bold;
}
.page__sub h3 {
    font-size: var(--font-size-24);
    font-weight: bold;
}
.page__sub .txt_large {
    font-size: var(--font-size-20);
}
.page__sub .txt_small {
    font-size: var(--font-size-14);
}
.page__sub .txt_exSmall {
    font-size: var(--font-size-12);
}

/*===========================
 layout 
 ==========================*/

/*========= page title ========*/
.page__sub .page__ttl {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: var(--gutter-2x, 16px);
    padding: 8.75rem 1rem;
 }

.page__sub .page__ttl picture {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.page__sub .page__ttl picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page__sub .page__ttl h1, .page__sub .page__ttl h2, 
.page__sub .sub_ttl {
  position: relative; /* z-indexを有効にするため */
  z-index: 1;
  margin: 0;
}
.page__sub .sub_ttl{
    color: var(--color-darkGray);
    font-size: var(--font-size-14);
    letter-spacing: 2.8px;
    line-height: 1;
    text-transform: uppercase;
}

/*========= breadcrumb ========*/
.breadcrumb {
   padding: var(--gutter-3x, 24px) var(--gutter-2x, 16px);
   border-bottom: 1px solid var(--Mono-LightGray, #D9D9D9);
   line-height: 1.2;
   font-size: 0;
}
.breadcrumb li, .breadcrumb li a{
    font-size: var(--font-size-12);
    color: var(--monotone-black);
}
.breadcrumb *{
    font-size: var(--font-size-12);
    color: var(--monotone-black);
}
.breadcrumb li.current {
    font-weight: 700;
}

.breadcrumb li {
    display: inline-block;
    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 15rem;
     padding-right: 1.25rem;
     position: relative;
}
.breadcrumb li:last-child {
    max-width: 600px;
}
.breadcrumb li a { 
    display: block;
    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: inherit;
}
.breadcrumb li::after {
   content:">";
    padding:0 8px;
    position: absolute;
    top:0;
    right: 0;
    transition: color 0.3s ease-in-out; 
}
.breadcrumb li.current::after {
    content: none;
}
.breadcrumb li a:hover {
    color: var(--Color-GAred);
}
@media screen and (max-width: 767px) {
    .breadcrumb li:last-child {
        max-width: 100%;
    }
}

/*========= introduction ========*/
.page__sub .page__intro {
    text-align: center;
    line-height: 2;
}
@media screen and (max-width: 767px) {
    .page__sub .page__intro {
        text-align: left;
    }
}