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

/* COMMON SETTING
-------------------------------------------------------------------- */
:root {
  /* 変更する場合content.css側も */
  --size-base: 1rem; /* 16px想定 */
  --size-12: 0.75rem; /* 12px */
  --size-14: 0.875rem; /* 14px */
  --size-16: 1rem; /* 16px */
  --size-18: 1.125rem; /* 18px */
  --size-20: 1.25rem; /* 20px */
  --size-24: 1.5rem; /* 24px */
  --size-32: 2rem; /* 32px */
  --size-40: 2.5rem; /* 40px */
  --size-48: 3rem; /* 48px */

  --color-skyBlue: #87ceeb;
  --color-base: #FFF;
  --color-main: #52585f;
  --color-main-hover: #444;
  --color-background: #ecf7fc;
  --color-textBlack: #363a3f; /* color-base と4.5:1以上のコントラスト比を確保（WCAG2.2 AA） */
  --color-textWhite: #FFF; /* color-main および color-main-hover と4.5:1以上のコントラスト比を確保（WCAG2.2 AA） */
  --color-ui: #949494;       /* color-base と3:1以上のコントラスト比を確保（WCAG2.2 AA） */
  --color-accent: #2196C4; /* color-base, color-main, color-background と3:1以上のコントラスト比を確保（WCAG2.2 AAA） */
  --color-caution: #A62D35;/* color-base と4.5:1以上のコントラスト比を確保（WCAG2.2 AA） */
  --color-caution--bg: #F3DDDF;

  --contentsWidth: 980px;
  --targetMinHeight: 24px;  /* 24px以上推奨（WCAG2.2 AA） 44px以上推奨（WCAG2.2 AAA） */
}



/* ELEMENTS
-------------------------------------------------------------------- */

:where(a, button, input, select, textarea):focus-visible {
  position: relative;
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  z-index: 10000;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition: none !important;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 100%; /* = 1rem ≒ 16px（ユーザー設定尊重） */
  scroll-padding-top: 200px;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  margin: 0 auto;
  font-family: Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
  font-size: var(--size-16);
  color: var(--color-textBlack);
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;/* フォントレンダリング設定: 1x解像度ではsubpixel、2x以上の解像度ではgrayscale */
}

input[type=text],
input[type=submit],
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  line-height: 1.5;
}

select {
  cursor: pointer;
  appearance: none;
  background: var(--color-background) url(../img/icon/icoSelect.svg) no-repeat right 0.5em center/0.75em;
  padding: 8px 1.5em 8px 8px;
}

video,
img {
  max-width: 100%;
  height: auto;
}



/* COMPONENTS
-------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}



/* HEADER
-------------------------------------------------------------------- */
.p-header {
  background-color: var(--color-base);
  flex: 0 0 auto;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
}

.p-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-shadow: 0 0 24px 0 rgb(0 0 0 / 4%);
  gap: 16px;
  max-width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 1023px) {
  .p-header__inner {
    height: 80px;
    min-height: 44px;
    padding: 16px;
  }
}

.p-headerLogo {
  flex: 0 0 auto;
  margin-right: auto;
  padding: 16px 24px 8px;
}

@media screen and (max-width: 1023px) {
  .p-headerLogo {
    flex: initial;
    padding: 0;
  }
}

@media screen and (max-width: 1023px) {
  .p-headerLogo__pc {
    display: none;
  }
}

.p-headerLogo__sp {
  display: none;
}

@media screen and (max-width: 1023px) {
  .p-headerLogo__sp {
    display: block;
  }
}

.p-headerLogo a {
  display: block;
}

.p-lang__form {
  flex: 0 0 auto;
}

@media screen and (max-width: 1023px) {
  .p-lang__form {
    background-color: var(--color-base);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
  }
}

.p-lang__select {
  background-color: transparent;
  border: var(--color-main) solid 1px;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: var(--size-14);
}

@media screen and (max-width: 1023px) {
  .p-lang__select {
    font-size: var(--size-18);
    height: var(--size-40);
    margin: auto;
  }
}

.p-linkList {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 24px 48px;
}

@media screen and (max-width: 1023px) {
  .p-linkList {
    flex-direction: column;
    align-items: flex-start;
  }
}

.p-linkList__item {
  display: flex;
  background: url(../img/icon_chevron_right-white.svg) no-repeat left top 0.55em/1.5em;
  padding-left: 1.5em;
}

.p-linkList__transition {
  color: var(--color-base);
  padding: 0.5em 0;
  min-height: var(--targetMinHeight);
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  .p-linkList__transition:hover {
    text-decoration: underline;
  }
}

.p-linkList__transition span {
  margin-left: 8px;
}

@scope (.p-header) {
  .p-linkList {
    flex: 1;
    padding: 16px 24px;
  }

  @media screen and (max-width: 1023px) {
    .p-linkList {
      background-color: var(--color-base);
      padding: 24px 32px;
      gap: 0;
    }
  }

  .p-linkList__item {
    background-image: url(../img/icon_chevron_right.svg);
    font-size: var(--size-14);
  }

  @media screen and (max-width: 1023px) {
    .p-linkList__item {
      font-size: var(--size-16);
      width: 100%;
    }
  }

  .p-linkList__transition {
    color: var(--color-textBlack);
    text-align: center;
    font-weight: 500;
  }
}

.p-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
}

@scope(.p-header) {
  .p-search {
    flex: 0 1 auto;
    padding: 16px 24px;
  }

  @media screen and (max-width: 1023px) {
    .p-search {
      background-color: var(--color-base);
    }

    .p-linkList + .p-search {
      padding-top: 0;
      padding-bottom: var(--size-32);
    }
  }
}

@media screen and (max-width: 1023px) {
  .p-search {
    justify-content: center;
  }
}

.p-search form {
  display: contents;
}

.p-search__form {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border: var(--color-main) solid 1px;
}

@media screen and (max-width: 767px) {
  .p-search__form {
    justify-content: center;
  }
}

.p-search .clpg-searchbox-input {
  flex: 1 1 auto;
  padding: 4px;
  width: 100%;
}

.clpg-searchbox-button {
  flex: 0 0 auto;
  width: var(--size-32);
  height: var(--size-32);
  margin-left: 8px;
  border: none;
  cursor: pointer;
}

.p-spNavBtn {
  display: none;
  width: var(--size-32);
  height: var(--size-32);
}

@media screen and (max-width: 1023px) {
  .p-spNavBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
  }
}

.p-spNavBtn__inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.p-spNavBtn__inner span {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto 0;
  width: 100%;
  height: 2px;
  background: var(--color-textBlack);
  transition: background-color 0.3s;
}

.is-spNavOpen .p-spNavBtn__inner span {
  background: transparent;
  transition: background-color 0.3s;
}

.p-spNavBtn__inner span::before,
.p-spNavBtn__inner span::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-textBlack);
}

.p-spNavBtn__inner span::before {
  top: calc(var(--size-16) * -0.5);
  transition: top 0.3s, transform 0.3s;
}

.is-spNavOpen .p-spNavBtn__inner span::before {
  top: 0;
  transform: rotateZ(-45deg);
  transform-origin: center;
}

.p-spNavBtn__inner span::after {
  bottom: calc(var(--size-16) * -0.5);
  transition: bottom 0.3s, transform 0.3s;
}

.is-spNavOpen .p-spNavBtn__inner span::after {
  bottom: 0;
  transform: rotateZ(45deg);
  transform-origin: center;
}



/* MAINAREA
-------------------------------------------------------------------- */
.p-pageWrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



/* NAVIGATIONS
-------------------------------------------------------------------- */
.p-glNavWrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

@media screen and (max-width: 1023px) {
  .p-glNavWrapper {
    background: var(--color-main);
    border-top: var(--color-ui) solid 1px;
    position: absolute;
    display: none;
    z-index: 9999;
    width: 100%;
    margin: 0;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}




.p-glNav {
  padding: 16px 24px;
}

@media screen and (max-width: 1023px) {
  .p-glNav {
    padding: 0;
  }

  .p-glNav :is(a, button):focus-visible {
    outline-color: var(--color-base);
  }
}

.p-linkList + .p-glNav {
  width: 100%;
}

.p-glNav__list {
  gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

@media screen and (max-width: 1023px) {
  .p-glNav__list {
    display: block;
  }
}

.p-glNav__item {
  font-size: var(--size-16);
}

@media screen and (max-width: 1023px) {
  .p-glNav__item {
    border-top: rgba(255, 255, 255, 0.4) solid 1px;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--size-18);
  }
}

@media screen and (max-width: 1023px) {
  .p-glNav__item.js-glNavTrigger .p-glNav__transition {
    width: calc(100% - var(--size-48));
  }

  .p-glNav__transition,
  .p-glNav__childTransition,
  .p-glNav__grandchildTransition {
    outline-offset: -4px;
  }
}

.p-glNav__transition {
  position: relative;
  color: var(--color-textBlack);
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  padding: 0.75em 0.5em;
  min-height: var(--targetMinHeight);
  width: 100%;
}

@media screen and (max-width: 1023px) {
  .p-glNav__transition {
    display: block;
    color: var(--color-base);
    padding: 16px 32px;
    flex: 1 1 auto;
    width: inherit;
  }
}

.p-glNav__transition:focus-visible {
  outline-color: var(--color-accent);
}

.p-glNav__transition::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  transition: width 0.3s;
}

@media screen and (max-width: 1023px) {
  .p-glNav__transition::after {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .p-glNav__transition:hover::after {
    width: calc(100% - 16px);
  }
}

.p-glNav__transition:focus-visible::after {
  width: calc(100% - 16px);
}

.p-glNav__transition.is-glNavCurrent {
  background-color: var(--color-background);
}

@media (hover: hover) and (pointer: fine) {
  .p-glNav__transition:hover {
    background-color: var(--color-background);
  }
}

.p-glNav__transition.is-glNavCurrent::after {
  width: calc(100% - 16px);
}

@media screen and (max-width: 1023px) {
  .p-glNav__transition.is-glNavCurrent,
  .p-glNav__transition.is-glNavCurrent + .p-glNav__childOpenBtn {
    background-color: var(--color-textBlack);
  }
}

.p-glNav__child {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-main);
  padding: 32px 48px;
  box-shadow: 0 0.3em 0.5em 0.1em rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

@media screen and (max-width: 1023px) {
  .p-glNav__child {
    width: 100%;
    padding: 16px 0;
    position: static;
    box-shadow: none;
  }
}

.p-glNav__child :is(a, button):focus-visible {
  outline-color: var(--color-base);
}

.p-glNav__childOpenBtn {
  display: none;
  flex: 0 0 auto;
}

@media screen and (max-width: 1023px) {
  .p-glNav__childOpenBtn {
    display: block;
    outline-offset: -4px;
  }
}

.p-glNav__childOpenIcon {
  color: var(--color-base);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: var(--size-48);
  height: var(--size-48);
  font-size: var(--size-20);
}

.p-glNav__childInner {
  max-width: var(--contentsWidth);
  margin: 0 auto;
}

.p-glNav__childList {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px 48px;
}

@media screen and (max-width: 1023px) {
  .p-glNav__childList {
    display: block;
  }
}

.p-glNav__childTransition {
  color: var(--color-base);
  display: block;
  font-weight: 500;
  padding: 8px 0;
  min-height: var(--targetMinHeight);
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  .p-glNav__childTransition:hover {
    text-decoration: underline;
  }
}

@media screen and (max-width: 1023px) {
  .p-glNav__childTransition {
    padding: 16px 16px 16px 32px;
  }
}

.p-glNav__grandchildList {
  padding-top: 1em;
}

@media screen and (max-width: 1023px) {
  .p-glNav__grandchildList {
    padding-top: 0;
    padding-left: 1em;
  }
}

.p-glNav__grandchildTransition {
  color: var(--color-base);
  display: block;
  padding: 8px 0;
  min-height: var(--targetMinHeight);
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  .p-glNav__grandchildTransition:hover {
    text-decoration: underline;
  }
}

@media screen and (max-width: 1023px) {
  .p-glNav__grandchildTransition {
    padding: 8px 16px 8px 24px;
    padding: 8px 16px 8px 24px;
  }
}

.p-breadNav {
  padding: 16px 80px 16px;
}

@media screen and (max-width: 1023px) {
  .p-breadNav {
    padding: 16px;
  }
}

.p-breadNav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.p-breadNav__item {
  color: var(--color-textBlack);
  font-size: var(--size-14);
}

.p-breadNav__item:not(:first-child)::before {
  content: "/";
  color: var(--color-textBlack);
  margin-right: 1em;
}

.p-breadNav__transition {
  color: var(--color-textBlack);
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  .p-breadNav__transition:hover {
    text-decoration: underline;
  }
}

.p-lowerNav {
  padding: 80px 0;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  font-size: var(--size-14);
  font-weight: 600;
  position: sticky;
  align-self: flex-start;
  top: 108px;
}

@media screen and (max-width: 1023px) {
  .p-lowerNav {
    padding: 0 16px 48px;
    width: 100%;
    position: inherit;
  }
}

.p-lowerNav a {
  display: block;
}

.p-lowerNav__parentTransition {
  color: var(--color-textBlack);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .p-lowerNav__parentTransition:hover {
    color: var(--color-textBlack);
  }
}

.p-lowerNav__childList {
  width: 100%;
  border: solid 2px var(--color-ui);
}

.p-lowerNav__childItem:not(:first-child) {
  border-top: var(--color-base) solid 1px;
}

.p-lowerNav__childTransition {
  color: var(--color-textBlack);
  font-weight: 600;
  display: block;
  padding: 16px;
  transition: background-color .3s;
}

.p-lowerNav__childTransition.is-lowerNavCurrent {
  background-color: var(--color-background);
}

@media (hover: hover) and (pointer: fine) {
  .p-lowerNav__childTransition:hover {
    background-color: var(--color-background);
  }
}

.p-lowerNav__grandchildList {
  gap: 16px;
}

.p-lowerNav__grandchildItem {
  border-top: var(--color-base) solid 1px;
}

.p-lowerNav__grandchildTransition {
  color: var(--color-textBlack);
  padding: 8px 16px 8px 32px;
  transition: background-color .3s;
}

.p-lowerNav__grandchildTransition.is-lowerNavCurrent {
  background-color: var(--color-background);
}

@media (hover: hover) and (pointer: fine) {
  .p-lowerNav__grandchildTransition:hover {
    background-color: var(--color-background);
  }
}



/* CLPG DEFAULT STYLE
-------------------------------------------------------------------- */

@scope (.clpg-page-content) {
  .p-attachment__summary {
    display: block;
  }
  
  .p-attachment__download {
    position: relative;
  }
  
  @media (hover: hover) and (pointer: fine) {
    .p-attachment__download:focus-visible .p-attachment__size,
    .p-attachment__download:hover .p-attachment__size {
      display: block;
    }
  }
  
  .p-attachment__size {
    display: none;
    position: absolute;
  }
  
  .p-pager {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .p-pager__list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  
  .p-pager__item {
    padding: 0;
    margin: 0;
    background: none;
  }
  
  .p-articleLoop__title {
    margin: 0;
    padding: 0;
  }
  
  .p-articleLoop__description {
    margin: 0;
  }
}

@scope (.clpg-form-container) {
  label {
    display: inline-block;
    cursor: pointer;
    margin: 4px 8px;
  }
  
  @media screen and (max-width: 1023px) {
    label {
      margin: 8px;
    }
  }
  
  input[type=checkbox],
  input[type=radio] {
    display: inline-block;
    margin-right: 8px;
    vertical-align: baseline;
    width: 1em;
    height: 1em;
  }

  @media screen and (max-width: 1023px) {
    th {
      display: block;
    }
  }
  
  @media screen and (max-width: 1023px) {
    td {
      display: block;
    }
  }
  
  .clpg-form-text-w30 {
    width: 10%;
  }
  
  .clpg-form-text-w60 {
    margin: 0 3px;
    width: 5em;
  }
  
  .clpg-form-text-w60:first-child {
    margin: 0 3px 0 0;
  }
  
  .clpg-form-text-w90 {
    width: 8em;
  }
  
  .clpg-form-text-w120 {
    width: 40%;
  }
  
  .clpg-form-text-w150 {
    width: 40%;
  }
  
  .clpg-form-text-w180 {
    width: 60%;
  }
  
  .clpg-form-text-w240 {
    width: 70%;
  }
  
  .clpg-form-text-w300 {
    width: 80%;
  }
  
  .clpg-form-text-w360 {
    width: 90%;
  }
  
  .clpg-form-text-w420 {
    width: 95%;
  }
  
  .clpg-form-textarea-w400h35 {
    width: 95%;
    height: 35px;
  }
  
  @media screen and (max-width: 1023px) {
    .clpg-form-textarea-w400h35 {
      width: 100%;
    }
  }
  
  .clpg-form-textarea-w400h50 {
    width: 95%;
    height: 50px;
  }
  
  @media screen and (max-width: 1023px) {
    .clpg-form-textarea-w400h50 {
      width: 100%;
    }
  }
  
  .clpg-form-textarea-w400h70 {
    width: 95%;
    height: 70px;
  }
  
  @media screen and (max-width: 1023px) {
    .clpg-form-textarea-w400h70 {
      width: 100%;
    }
  }
  
  .clpg-form-textarea-w400h100 {
    width: 95%;
    height: 100px;
  }
  
  @media screen and (max-width: 1023px) {
    .clpg-form-textarea-w400h100 {
      width: 100%;
    }
  }
  
  .clpg-form-textarea-w400h150 {
    width: 95%;
    height: 150px;
  }
  
  @media screen and (max-width: 1023px) {
    .clpg-form-textarea-w400h150 {
      width: 100%;
    }
  }
  
  .clpg-form-textarea-w470h200 {
    width: 95%;
    height: 200px;
  }
  
  @media screen and (max-width: 1023px) {
    .clpg-form-textarea-w470h200 {
      width: 100%;
    }
  }
  
  .clpg-form-textarea-w525h360 {
    width: 95%;
    height: 360px;
  }
  
  @media screen and (max-width: 1023px) {
    .clpg-form-textarea-w525h360 {
      width: 100%;
    }
  }
}




/* FOOTER
-------------------------------------------------------------------- */
.p-footer {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-main);
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 64px;
  max-width: 100%;
  margin: 0 auto;
  padding: 48px 80px;
}

@media screen and (max-width: 1023px) {
  .p-footer {
    padding: 48px 24px;
  }
}

@media screen and (max-width: 1023px) {
  .p-footer {
    gap: 48px;
  }
}

.p-footer :is(a, button):focus-visible {
  outline-color: var(--color-base);
}

.p-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 64px;
}

@media screen and (max-width: 1023px) {
  .p-footer__inner {
    flex-wrap: wrap;
    gap: 48px;
  }
}

.p-footer__item {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
}

@media screen and (max-width: 1023px) {
  .p-footer__item {
    width: 100%;
  }
}

.p-footerCompany {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.p-footerLogo {
  color: var(--color-base);
  font-weight: 600;
}

.p-footerLogo__transition {
  display: inline-block;
}

.p-footer__address {
  color: var(--color-base);
  font-size: var(--size-16);
}

.p-footerNavi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 48px;
}

@media screen and (max-width: 1023px) {
  .p-footerNavi {
    flex-wrap: wrap;
    gap: 48px;
  }
}

@media screen and (max-width: 1023px) {
  .p-footerNavi__item {
    width: 100%;
  }
}

@media screen and (max-width: 1023px) {
  .p-footerNavi__item--copyright {
    order: 2;
  }
}

.p-footer__copyright {
  flex: 1 0 auto;
  width: 100%;
  font-size: var(--size-14);
  line-height: 1.2;
  color: var(--color-base);
}

.p-snsArea__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

.p-snsArea__transition {
  display: block;
  min-height: var(--targetMinHeight);
  transition: opacity 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .p-snsArea__transition:hover {
    opacity: 0.7;
  }
}

.p-toTop {
  position: absolute;
  top: 0;
  right: 24px;
  transform: translateY(-50%);
}

.p-toTop__transition {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: var(--color-base);
  background: var(--color-main);
  width: var(--size-48);
  height: var(--size-48);
  border-radius: 9999px;
  transition: background-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .p-toTop__transition:hover {
    background-color: var(--color-base);
    color: var(--color-main);
  }
}