/* ------------------------------------------------------
 *  全般
 * ------------------------------------------------------ */

:root {
    --base-font-pixel: 16;

    /* 画面幅768pxで約16px */
    font-size: calc(var(--base-font-pixel) / 768 * 100vw);

    /* 一番外側のpadding */
    --outer-padding: 3rem;

    /* スマホレイアウトの最大サイズ */
    --sp-max-size: 768px;

    /* PCレイアウトの最小サイズ */
    --pc-min-size: 1024px;

    /* 画面残体の描画幅 */
    --max-width: 100vw;

    /* サイズ指定用変数 */
    --size-3: calc((3 / var(--base-font-pixel)) * 1rem);
    --size-4: calc((4 / var(--base-font-pixel)) * 1rem);
    --size-6: calc((6 / var(--base-font-pixel)) * 1rem);
    --size-8: calc((8 / var(--base-font-pixel)) * 1rem);
    --size-9: calc((9 / var(--base-font-pixel)) * 1rem);
    --size-10: calc((10 / var(--base-font-pixel)) * 1rem);
    --size-12: calc((12 / var(--base-font-pixel)) * 1rem);
    --size-14: calc((14 / var(--base-font-pixel)) * 1rem);
    --size-16: calc((16 / var(--base-font-pixel)) * 1rem);
    --size-18: calc((18 / var(--base-font-pixel)) * 1rem);
    --size-20: calc((20 / var(--base-font-pixel)) * 1rem);
    --size-22: calc((22 / var(--base-font-pixel)) * 1rem);
    --size-24: calc((24 / var(--base-font-pixel)) * 1rem);
    --size-26: calc((26 / var(--base-font-pixel)) * 1rem);
    --size-28: calc((28 / var(--base-font-pixel)) * 1rem);
    --size-30: calc((30 / var(--base-font-pixel)) * 1rem);
    --size-32: calc((32 / var(--base-font-pixel)) * 1rem);
    --size-36: calc((36 / var(--base-font-pixel)) * 1rem);
    --size-40: calc((40 / var(--base-font-pixel)) * 1rem);
    --size-44: calc((44 / var(--base-font-pixel)) * 1rem);
    --size-48: calc((48 / var(--base-font-pixel)) * 1rem);
    --size-56: calc((56 / var(--base-font-pixel)) * 1rem);
    --size-60: calc((60 / var(--base-font-pixel)) * 1rem);
    --size-64: calc((64 / var(--base-font-pixel)) * 1rem);
    --size-72: calc((72 / var(--base-font-pixel)) * 1rem);
    --size-77: calc((77 / var(--base-font-pixel)) * 1rem);
    --size-80: calc((80 / var(--base-font-pixel)) * 1rem);
    --size-84: calc((84 / var(--base-font-pixel)) * 1rem);
    --size-88: calc((88 / var(--base-font-pixel)) * 1rem);
    --size-96: calc((96 / var(--base-font-pixel)) * 1rem);
    --size-100: calc((100 / var(--base-font-pixel)) * 1rem);
    --size-104: calc((104 / var(--base-font-pixel)) * 1rem);
    --size-112: calc((112 / var(--base-font-pixel)) * 1rem);
    --size-120: calc((120 / var(--base-font-pixel)) * 1rem);
    --size-136: calc((136 / var(--base-font-pixel)) * 1rem);
    --size-144: calc((144 / var(--base-font-pixel)) * 1rem);
    --size-152: calc((152 / var(--base-font-pixel)) * 1rem);
    --size-160: calc((160 / var(--base-font-pixel)) * 1rem);
    --size-176: calc((176 / var(--base-font-pixel)) * 1rem);
    --size-180: calc((180 / var(--base-font-pixel)) * 1rem);
    --size-192: calc((192 / var(--base-font-pixel)) * 1rem);
    --size-200: calc((200 / var(--base-font-pixel)) * 1rem);
    --size-208: calc((208 / var(--base-font-pixel)) * 1rem);
    --size-220: calc((220 / var(--base-font-pixel)) * 1rem);
    --size-232: calc((232 / var(--base-font-pixel)) * 1rem);
    --size-240: calc((240 / var(--base-font-pixel)) * 1rem);
    --size-248: calc((248 / var(--base-font-pixel)) * 1rem);
    --size-272: calc((272 / var(--base-font-pixel)) * 1rem);
    --size-280: calc((280 / var(--base-font-pixel)) * 1rem);
    --size-300: calc((300 / var(--base-font-pixel)) * 1rem);
    --size-312: calc((312 / var(--base-font-pixel)) * 1rem);
    --size-320: calc((320 / var(--base-font-pixel)) * 1rem);
    --size-330: calc((330 / var(--base-font-pixel)) * 1rem);
    --size-336: calc((336 / var(--base-font-pixel)) * 1rem);
    --size-344: calc((344 / var(--base-font-pixel)) * 1rem);
    --size-360: calc((360 / var(--base-font-pixel)) * 1rem);
    --size-380: calc((380 / var(--base-font-pixel)) * 1rem);
    --size-392: calc((392 / var(--base-font-pixel)) * 1rem);
    --size-400: calc((400 / var(--base-font-pixel)) * 1rem);
    --size-448: calc((448 / var(--base-font-pixel)) * 1rem);
    --size-480: calc((480 / var(--base-font-pixel)) * 1rem);
    --size-500: calc((500 / var(--base-font-pixel)) * 1rem);
    --size-530: calc((530 / var(--base-font-pixel)) * 1rem);
    --size-552: calc((552 / var(--base-font-pixel)) * 1rem);
    --size-620: calc((620 / var(--base-font-pixel)) * 1rem);
    --size-650: calc((650 / var(--base-font-pixel)) * 1rem);
    --size-660: calc((660 / var(--base-font-pixel)) * 1rem);
    --size-768: calc((768 / var(--base-font-pixel)) * 1rem);
    --size-800: calc((800 / var(--base-font-pixel)) * 1rem);
    --size-812: calc((812 / var(--base-font-pixel)) * 1rem);
    --size-850: calc((850 / var(--base-font-pixel)) * 1rem);
    --size-900: calc((900 / var(--base-font-pixel)) * 1rem);
    --size-1216: calc((1216 / var(--base-font-pixel)) * 1rem);

    /* headerロゴのサイズ */
    --header-logo-size: 67px;

    --box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

  --is-mobile: 1;
  @media screen and (min-width: 1024px) {
    --is-mobile: 0;
  }
}

body {
  &.loading {
    &::before {
      content: "";
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      z-index: 2;
      position: fixed;
    }
    &::after {
      content: "";
      color: #fff;
      position: fixed;
      z-index: 3;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 100px;
      background-image: url(../../common/img/loading.gif);
      background-size: 100px;
    }
  }
}

body > h1 {
	position:absolute;
	bottom:5em;
	bottom:7em;
	left:0;
	font-size:0.64em;
	width:100%;
	text-align:center;
	color:#fff;
	z-index:10;
}
/* pcのみ、spのみ表示される要素に指定 */

.pc-container {
    display: none;;
}

/* .sp-container {
} */

/* ハンバーガーメニュー等の仕込み */
.body-without-header {
    position: relative;
}

.outer-container {
    width: 100%;
    padding: var(--outer-padding) 0;
}

.outer-container > *:not(.pc-container, .sp-container),
.outer-container > .pc-container > *,
.outer-container > .sp-container > * {
    padding: 0 var(--outer-padding);
}

/* フッターのブログ見出しのような大きいサイズの見出し */
.large-heading,
.outer-container .large-heading {
    padding-bottom: 2rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
}
.sub-title {
  margin-top: 1rem;
}

/* 適用することで直下の二要素を等幅の二列にする */
.column-2-container {
    display: flex;
}
.column-2-container > * {
    width: 50%;
}

/*
    適用することで、指定した要素直下のaタグの押下可能範囲を、
    該当のブロック要素の領域全体に広げる
*/
.wide-anchor {
    position: relative;
}
.wide-anchor > a {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.topic-button.empty {
    visibility: hidden;
}

/*
    横スクロールするコンテナ。
    適用することで直下のul, ol等ブロック要素が持つ子要素を、
    親要素の幅によらず折り返しなしで横並びにし、スクロールで閲覧できるようにする
*/
.scroll-x-container {
    width: 100%;
    overflow-x: scroll;
}
.scroll-x-container > * {
    display: flex;
    justify-content: left;
    column-gap: 1.5rem;
    width: fit-content;
}

/*
    見出しなどの下にある枠線とは言えない長さのグラデーションの横線を付与。
    枠線と同様の位置に表示されるので、padding-bottom等で位置を調整する
*/

.bottom-gradation-line {
    text-align: center;
    position: relative;
}

.bottom-gradation-line::after {
    content: "";
    position: absolute;
    height: 0.2rem;
    width: 5rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #FD419E, #0370EC);
}

/*
    アコーディオン開閉などの、'V'のような矢じりマークを指定要素内の端のほうに付与する
 */

.left-arrowhead-l,
.left-arrowhead-r {
    position: relative;
    padding-left: 2rem;
}

.right-arrowhead-b,
.right-arrowhead-r {
    position: relative;
    padding-right: 2rem;
}

.left-arrowhead-l::before,
.left-arrowhead-r::before,
.right-arrowhead-b::after,
.right-arrowhead-r::after {
    position: absolute;
    top: 50%;
    content: "";
    height: 1rem;
    width: 1rem;
}

.left-arrowhead-l::before,
.left-arrowhead-r::before {
    left: 1rem;
    border-left: solid 0.25rem #000;
    border-top: solid 0.25rem #000;
}

.left-arrowhead-l::before {
    transform: translateY(-50%) rotate(-45deg);
}

.left-arrowhead-r::before {
    transform: translateY(-50%) rotate(135deg);
}

.right-arrowhead-b::after,
.right-arrowhead-r::after {
    right: 1rem;
    border-right: solid 0.25rem #000;
    border-bottom: solid 0.25rem #000;
}

.right-arrowhead-b::after {
    transform: translateY(-75%) rotate(45deg);
}

.right-arrowhead-r::after {
    transform: translateY(-50%) rotate(-45deg);
}

/*
    100vw = 768pxにおけるピクセルサイズを基準として画面幅に比例するフォントサイズ
    必要に応じて追加する
*/

.text-size-12 {
    font-size: var(--size-12);
}
.text-size-14 {
    font-size: var(--size-14);
}
.text-size-16 {
    font-size: var(--size-16);
}
.text-size-18 {
    font-size: var(--size-18);
}
.text-size-20 {
    font-size: var(--size-20);
}
.text-size-22 {
    font-size: var(--size-22);
}
.text-size-24 {
    font-size: var(--size-24);
}
.text-size-26 {
    font-size: var(--size-26);
}
.text-size-28 {
    font-size: var(--size-28);
}
.text-size-30 {
    font-size: var(--size-30);
}
.text-size-32 {
    font-size: var(--size-32);
}
.text-size-36 {
    font-size: var(--size-36);
}
.text-size-40 {
    font-size: var(--size-40);
}
.text-size-44 {
    font-size: var(--size-44);
}
.text-size-48 {
    font-size: var(--size-48);
}

.text-b-700 {
    font-weight: 700;
}
.text-b-500 {
    font-weight: 500;
}

.text-pink {
    color: #ff5cc0;
}

.text-red {
    color: #e20113;
}

.text-white {
    color: #fff;
}

.text-black {
    color: #000;
}
.text-vivid-pink {
  color: #ff277d;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-underline {
    text-decoration: underline;
}
.bg-vivid-pink {
  background-color: #ff277d;
  color: #fff;
}
.pointer-none {
  pointer-events: none;
}
.d-none {
    display: none;
}
.d-block {
  display: block;
}
.d-inline-block {
  display: inline-block;
}
.d-flex {
  display: flex;
  align-items: center;
}
.p-relative {
  position: relative;
}
.d-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.d-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-10 { margin-top: var(--size-10); }
.mt-30 { margin-top: var(--size-30); }
.mt-48 { margin-top: var(--size-48); }
.mt-60 { margin-top: var(--size-60); }

.mb-10 { margin-bottom: var(--size-10);}
.mb-16 { margin-bottom: var(--size-16); }
.mb-24 { margin-bottom: var(--size-24); }
.mb-26 { margin-bottom: var(--size-26); }
.mb-40 { margin-bottom: var(--size-40); }
.mb-48 { margin-bottom: var(--size-48); }
.mb-56 { margin-bottom: var(--size-56); }
.mb-60 { margin-bottom: var(--size-60); }
.mx-auto {
  margin-right: auto;
  margin-left: auto;
}
.pl-1 {
  padding-left: 1rem;
}
.text-right {
  text-align: right;
}
.p-x-20 {
  margin-right: 2rem;
  margin-left: 2rem;
}
.w-100 {
  width: 100%;
}
.p-relative {
  position: relative;
}
.of-hidden {
  overflow: hidden;
}
.ws-pre {
  white-space: pre;
}
.ws-pre-wrap {
  white-space: pre-wrap;
}
button[type="submit"].read-only {
  pointer-events: none;
  opacity: 0.5;
}

/* ------------------------------------------------------
 *  メディアクエリ
 * ------------------------------------------------------ */

@media screen and (min-width: 768px) {
    :root {
        font-size: var(--base-font-pixel);
        --max-width: var(--sp-max-size);
    }

    body {
        padding: 0 calc((100vw - var(--sp-max-size)) / 2);
    }
}

.prSite {
  font-size:18px;
  max-width:1360px;
  padding-top:2em;
  padding-left:4%;
  padding-right:4%;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:4rem;
}
.prSite h2{

}
.prSite dl {
}
.prSite dl dt {
  font-size: 0.8rem;
  margin-bottom: 1em;
  padding-bottom: 1rem;
  border-bottom: 1px solid #999;
  letter-spacing: 2px;
  color: #333;
}
.prSite dl dd {
}
.prSite dl dd a {
  font-size: 0.8rem;
  display:inline-block;
  margin-left:0.5em;
  margin-right:0.5em;
  color: #333;
}

@media only screen and (max-width:750px) {
  .prSite{
    font-size:2.5vw;
  }
}