@charset "UTF-8";
/* settings
---------------------------------------------------*/
/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/* Base
-------------------------------- */
/***** 初期値 *****/
:root {
  /* 色設定 */
  --color-black: #000;
  --color-gray: #666;
  --color-light-gray: #E6E6E6;
  --color-accent1: #00325C;
  --color-accent1-sub: #002342;
  --color-accent2: #D9A000;
  --color-accent3: #ce0351;
  --color-accent4: #234447;

  --bg-color0: black;
  --bg-color1: #1A0B05;
  --bg-color2: #f1f1f1;
  --bg-color3: #F9E7D6;

  --bg-grd-color1: linear-gradient(
    to top,
    #FFE2C2,
    #FCF2E8
  );
  --accent-grd-color1: linear-gradient(
    to left,
    var(--color-accent1),
    var(--color-accent1-sub)
  );
  --accent-grd-color2: linear-gradient(
    to right,
    var(--color-accent2),
    var(--color-accent2-sub)
  );

  /* フォント */
  --font-color-base: #333;
  --font-family-head: "Noto Serif JP", serif;
  --font-family-main: "Noto Sans JP", sans-serif;
  --font-family-en: "Noto Serif JP", serif;

  /* スタイル */
  --tx-shadow1: 1px 1px 1px rgba(0,0,0,.3);
  --box-shadow1: 2px 2px 5px rgba(0,0,0,.3);
  --line-gray: 1px solid #A0A0A0;
  --line-gray2: 2px solid #A0A0A0;
  --cover-color: rgb(6 44 93 / 34%);
}

@media screen and (max-width: 1200px) {
  html {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 80% !important;
  }
}

/***** デフォルト設定 *****/

/* 背景色設定 */
.bg-accent1 {
  background: var(--color-accent1);
}
.bg-grd-accent1 {
  background: var(--accent-grd-color1);
}
.bg--light-gray {
  background: var(---color-light-gray);
}
.bg-w {
  background: white;
}
.bg-w_95 {
  background: rgba(255,255,255,.9);
}
.bg-y_95 {
  background: rgba(254,203,6,.9);
}

/* マージン設定 */
.mg-t3 { margin-top: 3rem; }
.mg-b3 { margin-bottom: 3rem; }
@media screen and (max-width: 768px) {
  .mg-t3 { margin-top: 1.5rem; }
  .mg-b3 { margin-bottom: 1.5rem; }
}

/* パディング設定 */
.pd-l1 { padding-left: 1rem; }
.pd-l2 { padding-left: 2rem; }

/* テキスト設定 */
.tx-c { text-align: center; }
.tx-l { text-align: left; }
.tx-r { text-align: right; }

.color1 {
    color: var(--color-accent1);
}
.color-w {
    color: white;
}

p {
  color: var(--font-color-base);
  line-height: 2;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

div,span,p,a,li,dt,dd {
  font-family: var(--font-family-main);
  color: var(--font-color-base);
}
h2,h3,h4,h5,h6 {
  font-family: var(--font-family-head);
  font-weight: 400;
  color: #333;
}

a {
  color: var(--color-accent4);
  text-decoration: none;
  transition: 1s;
}
a:hover {
  opacity: 0.7;
}

/* その他 */
.tx-white {
  color: white;
}
.opacity1 {
  opacity: 0.1;
}
.opacity2 {
  opacity: 0.2;
}
.opacity3 {
  opacity: 0.3;
}
.opacity5 {
  opacity: 0.5;
}
.opacity8 {
  opacity: 0.8;
}
.opacity9 {
  opacity: 0.9;
}

.pd-tb6vw {
  padding: 6vw 0;
}
.pd-tb8vw {
  padding: 8vw 0;
}
.pd-tb10vw {
  padding: 10vw 0;
}
.pd-tb12vw {
  padding: 12vw 0;
}
@media screen and (max-width: 768px) {
  .pd-tb8vw {
    padding: 12vw 0;
  }
  .pd-tb10vw {
    padding: 16vw 0;
  }
  .pd-tb12vw {
    padding: 18vw 0;
  }
}

@media screen and (max-width: 768px) {
  .sp-od1 {
    order: 1;
  }
  .sp-od2 {
    order: 2;
  }
}

.pc { display: block }
.sp { display: none }
.pc-inline { display: inline-block }
.sp-inline { display: none }
@media screen and (max-width: 768px) {
  .pc { display: none }
  .sp { display: block }
  .pc-inline { display: none }
  .sp-inline { display: inline-block }
}

/* flex設定 */
.flex-t-c {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-t-sa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.flex-t-l {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.flex-t-sb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex-s-c {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}
.flex-c-c {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.flex-c-l {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
}
.flex-c-r {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: right;
}
.flex-c-sa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.flex-c-sb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.flex-b-c {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}
.flex-st-c {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

/* width */
.w100 { width: 100%; }
.w90 { width: 90%; }
.w80 { width: 80%; }
.w70 { width: 70%; }
.w60 { width: 60%; }
.w50 { width: 50%; }
.w40 { width: 40%; }
.w30 { width: 30%; }
.w20 { width: 20%; }
.w10 { width: 10%; }

@media screen and (max-width: 768px) {
  .w90, .w80, .w70, .w60, .w50, .w40 {
    width: 100%;
  } 
}

/* margin */
.mg-b5 {
    margin-bottom: 5rem !important;
}

/* text */
span.supplement {
  display: inline-block;
  font-size: 78%;
  color: #666;
}