@charset "UTF-8";
/*================================================================
 *FILE          :page-accessibility-statement.css
 *DESCRIPTION   :resetはressを使用。環境変数とmixinは_mixin.scss内に記述。
                 それぞれfoundationよりインポート。
 *AUTHOR        :
 *--------------------------------------------------------------
 *(C)
=================================================================*/
/*================================================================
 *FILE					:_components.scss
 *DESCRIPTION   :全ページ共通コンポーネント カスタムCSS
 *AUTHOR				:
 *--------------------------------------------------------------
 *(C)
=================================================================*/
/*
ページネーション
------------------------------------*/
/*
View More
------------------------------------*/
/*
共通 Main Visual（brands, about, who we are）
------------------------------------*/
/*
Button
------------------------------------*/
/*
c-title
------------------------------------*/
/*
c-modal
------------------------------------*/
/*
iframeCookieAccept
------------------------------------*/
.c-button {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: rotate 0.1s ease;
  transition: rotate 0.1s ease; }
  .c-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    rotate: -10deg; }
  @media print, screen and (max-width: 767px) {
    .c-button {
      rotate: -16deg; } }
  @media print, screen and (min-width: 768px) {
    .c-button {
      rotate: -10deg; } }
  .c-button.c-button-white {
    rotate: 10deg; }
  @media (hover: hover) {
    .c-button:hover:not(.c-button-white) .c-buttonWrap {
      rotate: -15deg; }
    .c-button:hover:not(.c-button-white) .c-buttonIcon .bar {
      fill: #BCB3A3; }
    .c-button:hover:not(.c-button-white) .c-buttonIcon .line {
      fill: #BCB3A3; }
    .c-button:hover:not(.c-button-white) .c-buttonIcon .circle {
      fill: #E4E0D9; }
    .c-button:hover:not(.c-button-white) .c-buttonText {
      color: #B91E1E; }
    .c-button:hover.c-button-white .c-buttonWrap {
      rotate: -20deg; } }
  .c-button-white .c-button {
    rotate: 10deg; }

.c-buttonWrap {
  -webkit-transition: rotate 0.1s ease;
  transition: rotate 0.1s ease; }

.c-buttonIcon {
  display: block;
  color: inherit;
  color: #B91E1E; }
  @media print, screen and (max-width: 767px) {
    .c-buttonIcon {
      width: calc(174 / 375 * 100vw); } }
  @media print, screen and (min-width: 768px) {
    .c-buttonIcon {
      width: calc(222 / 1280 * 100vw); } }
  .c-buttonIcon .bar,
  .c-buttonIcon .line,
  .c-buttonIcon .circle {
    -webkit-transition: fill 0.1s ease;
    transition: fill 0.1s ease;
    fill: #B91E1E; }
  .c-button-white .c-buttonIcon .bar {
    fill: #BCB3A3; }
  .c-button-white .c-buttonIcon .line {
    fill: #BCB3A3; }
  .c-button-white .c-buttonIcon .circle {
    fill: #E4E0D9; }

.c-buttonText {
  color: #F1F0EE;
  font-weight: 800;
  letter-spacing: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: color 0.1s ease;
  transition: color 0.1s ease;
  white-space: nowrap; }
  @media print, screen and (max-width: 767px) {
    .c-buttonText {
      font-size: calc(16 / 375 * 100vw);
      translate: calc(-50% - calc(18 / 375 * 100vw)) -50%;
      letter-spacing: 0.04em; } }
  @media print, screen and (min-width: 768px) {
    .c-buttonText {
      font-size: calc(18 / 1280 * 100vw);
      translate: calc(-50% - calc(24 / 1280 * 100vw)) -50%; } }
  .c-button-white .c-buttonText {
    color: #B91E1E; }

.c-title {
  color: #2b2b2b;
  font-family: "Manrope", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  width: 100%;
  text-align: left; }
  @media print, screen and (max-width: 767px) {
    .c-title {
      font-size: calc(48 / 375 * 100vw);
      letter-spacing: 0; } }
  @media print, screen and (min-width: 768px) {
    .c-title {
      font-size: calc(90 / 1280 * 100vw); } }
  .c-title.c-title-white {
    color: #E4E0D9; }
  @media print, screen and (max-width: 767px) {
    .c-title.c-title-small {
      font-size: calc(38 / 375 * 100vw); } }
  @media print, screen and (min-width: 768px) {
    .c-title.c-title-small {
      font-size: calc(80 / 1280 * 100vw); } }
  @media print, screen and (max-width: 767px) {
    .c-title.c-title-tiny {
      font-size: calc(38 / 375 * 100vw); } }
  @media print, screen and (min-width: 768px) {
    .c-title.c-title-tiny {
      font-size: calc(60 / 1280 * 100vw); } }

@media print, screen and (max-width: 767px) {
  .accessibilitySection {
    margin: calc(136 / 375 * 100vw) 0 calc(64 / 375 * 100vw); } }

@media print, screen and (min-width: 768px) {
  .accessibilitySection {
    margin: clamp(100px, calc(208 / 1280 * 100vw), 208px) auto clamp(120px, calc(120 / 1280 * 100vw), 120px);
    max-width: 1280px; } }

@media print, screen and (max-width: 767px) {
  .accessibility_inner {
    padding: 0 calc(20 / 375 * 100vw); } }

@media print, screen and (min-width: 768px) {
  .accessibility_inner {
    padding: 0 clamp(44px, calc(146 / 1280 * 100vw), 146px) 0 clamp(20px, calc(45 / 1280 * 100vw), 45px); } }

@media print, screen and (min-width: 768px) {
  .accessibilityTitle {
    font-size: clamp(48px, calc(80 / 1280 * 100vw), 80px); } }

@media print, screen and (max-width: 767px) {
  .accessibilityContent {
    margin-top: calc(56 / 375 * 100vw); } }

@media print, screen and (min-width: 768px) {
  .accessibilityContent {
    margin-top: clamp(40px, calc(80 / 1280 * 100vw), 80px);
    max-width: clamp(448px, calc(784 / 1280 * 100vw), 784px);
    margin-left: auto; } }

@media print, screen and (max-width: 767px) {
  .accessibilityText {
    font-size: calc(14 / 375 * 100vw); } }

@media print, screen and (min-width: 768px) {
  .accessibilityText {
    font-size: clamp(5px, calc(14 / 1280 * 100vw), 14px); } }

.accessibilityButton .c-button {
  rotate: -5deg; }

@media print, screen and (max-width: 767px) {
  .accessibilityButton {
    margin-top: calc(40 / 375 * 100vw); } }

@media print, screen and (min-width: 768px) {
  .accessibilityButton {
    margin-top: clamp(20px, calc(41 / 1280 * 100vw), 41px); }
    .accessibilityButton .c-buttonIcon {
      width: clamp(150px, calc(222 / 1280 * 100vw), 222px); }
    .accessibilityButton .c-buttonText {
      font-size: clamp(10px, calc(18 / 1280 * 100vw), 18px);
      translate: calc(-50% - clamp(10px, calc(24 / 1280 * 100vw), 24px)) -50%; } }