@import url('../../define.css');

/* ==========================================================================
  # Variable
  ========================================================================== */

.layout {
  --spacing-2xs: 0.125rem; /* (4px * 0.5) / 16px = 2px / 16px = 0.125rem */
  --spacing-xs: 0.25rem; /* (8px * 0.5) / 16px = 4px / 16px = 0.25rem */
  --spacing-sm: 0.375rem; /* (12px * 0.5) / 16px = 6px / 16px = 0.375rem */
  --spacing-md: 0.5rem; /* (16px * 0.5) / 16px = 8px / 16px = 0.5rem */
  --spacing-lg: 0.75rem; /* (24px * 0.5) / 16px = 12px / 16px = 0.75rem */
  --spacing-xl: 1rem; /* (32px * 0.5) / 16px = 16px / 16px = 1rem */
  --spacing-2xl: 1.5rem; /* (48px * 0.5) / 16px = 24px / 16px = 1.5rem */
  --spacing-3xl: 2rem; /* (64px * 0.5) / 16px = 32px / 16px = 2rem */
  --spacing-4xl: 3rem; /* (96px * 0.5) / 16px = 48px / 16px = 3rem */
  --spacing-5xl: 4rem; /* (128px * 0.5) / 16px = 64px / 16px = 4rem */
  --spacing-6xl: 6rem; /* (192px * 0.5) / 16px = 96px / 16px = 6rem */
  --spacing-7xl: 8rem; /* (256px * 0.5) / 16px = 128px / 16px = 8rem */
  --spacing-header: 3.75rem; /* 60px / 16px = 3.75rem */

  @media only screen and (min-width: 1200px) and (min-height: 481px) {
    --spacing-2xs: 0.25rem; /* 4px / 16px = 0.25rem */
    --spacing-xs: 0.5rem; /* 8px / 16px = 0.5rem */
    --spacing-sm: 0.75rem; /* 12px / 16px = 0.75rem */
    --spacing-md: 1rem; /* 16px / 16px = 1rem */
    --spacing-lg: 1.5rem; /* 24px / 16px = 1.5rem */
    --spacing-xl: 2rem; /* 32px / 16px = 2rem */
    --spacing-2xl: 3rem; /* 48px / 16px = 3rem */
    --spacing-3xl: 4rem; /* 64px / 16px = 4rem */
    --spacing-4xl: 6rem; /* 96px / 16px = 6rem */
    --spacing-5xl: 8rem; /* 128px / 16px = 8rem */
    --spacing-6xl: 12rem; /* 192px / 16px = 12rem */
    --spacing-7xl: 16rem; /* 256px / 16px = 16rem */
    --spacing-header: 8.125rem; /* 130px / 16px = 8.125rem */
  }
}

/* ==========================================================================
  # Reset
  ========================================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  line-height: 0;
}

/* ==========================================================================
  # Base
  ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  letter-spacing: 0.05em;
  line-height: 1.5;
  font: var(--alias-typography-label-sizeM-normal);
  color: var(--alias-color-text-main);
  background-color: var(--alias-color-background-content-default);
}

img {
  width: 100%;
  vertical-align: middle;
}

button {
  padding: 0;
  border: none;
  text-align: start;
  font-size: inherit;
  background: none;
  cursor: pointer;
}

label {
  cursor: pointer;
}

/* ==========================================================================
  # Component
  ========================================================================== */

/* --------------------------------------------------------------------------
  ## Button
  -------------------------------------------------------------------------- */

.button-wrap {
  max-width: 180px;
  width: 100%;
}

.button-wrap--full {
  max-width: none;
  width: 100%;
}

.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: var(--spacing-xs);
  outline: solid 1px var(--alias-color-onPrimary);
  outline-offset: calc(var(--spacing-xs) * -1);
  text-align: center;
  font-weight: 700;
  color: var(--alias-color-onPrimary);
  background-color: var(--alias-color-primary);
  transition-timing-function: var(--global-timingFunction-easeOut);
  transition-duration: var(--global-duration-300);

  &::before {
    position: absolute;
    bottom: var(--spacing-xs);
    right: var(--spacing-xs);
    display: block;
    width: 10px;
    height: 10px;
    content: '';
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    background-color: var(--alias-color-onPrimary);
  }
}

.button--primary {
  background-color: var(--alias-color-primary);

  &:hover {
    background-color: var(--alias-color-primary-pressed);
  }
}

.button--secondary {
  color: var(--alias-color-primary);
  background-color: var(--alias-color-onPrimary);
  box-shadow: 0 0 0 1px var(--alias-color-primary);
    outline-color: var(--alias-color-primary);
    &::before {
      background-color: var(--alias-color-primary);
    }

  &::before {
    background-color: var(--alias-color-primary);
  }

  &:hover {
    background-color: var(--alias-color-primaryTint);
    color: var(--alias-color-primary);
    border-color: var(--alias-color-primary);
  }
}

.button--external {
  background-color: #00a5bb;

  &:hover {
    background-color: color-mix(in srgb, #00a5bb 80%, #000000);
  }
}

.button--kyoto-city {
  background-color: #965faa;

  &:hover {
    background-color: color-mix(in srgb, #965faa 80%, #000000);
  }
}

.button--login {
  background-color: var(--global-color-blue-blue060);

  &:hover {
    background-color: color-mix(in srgb, var(--global-color-blue-blue060) 80%, #000000);
  }
}

/* --------------------------------------------------------------------------
  ## Container
  -------------------------------------------------------------------------- */

.container {
  max-width: 1400px;
  width: calc(100% - 2rem);
  margin-right: auto;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
  ## Section
  -------------------------------------------------------------------------- */

.section {
  display: flex;
  flex-direction: column;
  background-color: var(--global-color-gray-gray000);
}

.section__content {
  padding: var(--spacing-md);
  border: solid 1px var(--alias-color-border-default);
}

@media only screen and (min-width: 1200px) and (min-height: 481px) {
  .section--min-h-aside {
    .section__content {
      min-height: 655px;
    }
  }
}

/* --------------------------------------------------------------------------
  ## bg-content
  -------------------------------------------------------------------------- */

.bg-content {
  padding: var(--spacing-md);
  background-color: var(--global-color-gray-gray030);
}

/* --------------------------------------------------------------------------
  ## PageTitle
  -------------------------------------------------------------------------- */

.page-title {
  padding: 0.75em 1em;
  font: var(--alias-typography-label-sizeXL-bold);
  color: var(--global-color-gray-gray000);
  background: linear-gradient(
    to right,
    var(--global-color-blue-blue100),
    var(--global-color-blue-blue060)
  );
}

@media only screen and (max-width: 480px) {
  .page-title {
    font: var(--alias-typography-label-sizeL-bold);
  }
}

/* --------------------------------------------------------------------------
  ## Typography
  -------------------------------------------------------------------------- */

.typography--text-xxs {
  font: var(--alias-typography-body-sizeXXS-normal);
}

.typography--text-s {
  font: var(--alias-typography-body-sizeS-normal);
}

.typography--link {
  text-decoration: underline;
  color: var(--alias-color-link);

  &:hover,
  &:focus {
    text-decoration: none;
  }
}

.typography--warning {
  color: var(--alias-color-negative);
}

.typography--unorderd-list__item {
  position: relative;
  padding-left: 1em;
  font-size: inherit;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    translate: 0 0.375em;
    display: block;
    content: '';
    width: 0.75em;
    border-radius: 999px;
    aspect-ratio: 1 / 1;
    background-color: currentColor;
  }
}

.typography--section-title {
  width: fit-content;
  padding: 0.75em 1em;
  font-size: var(--alias-typography-label-sizeS-normal);
  color: var(--global-color-gray-gray000);
  background: linear-gradient(
    to right,
    var(--global-color-blue-blue100),
    var(--global-color-blue-blue060)
  );
}

/* --------------------------------------------------------------------------
  ## Hover
  -------------------------------------------------------------------------- */

.hover {
  display: inline-block;
  opacity: 1;
  transition-timing-function: var(--global-timingFunction-easeOut);
  transition-duration: var(--global-duration-300);

  &:hover {
    opacity: 0.7;
  }
}

/* ==========================================================================
  # Layout
  ========================================================================== */

.layout {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.layout__header {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.layout__content {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-header);
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.layout__aside {
  width: 100%;
  flex: 0 0 auto;
}

.layout__main {
  flex-grow: 0;
}

.layout__footer {
  margin-top: auto;
  margin-bottom: 0;
}

@media only screen and (min-width: 1200px) and (min-height: 481px) {
  .layout__content {
    flex-direction: row;
  }

  .layout__aside {
    width: 300px;
  }

  .layout__main {
    flex-grow: 1;
  }
}

/* --------------------------------------------------------------------------
  ## Header
  -------------------------------------------------------------------------- */

.header {
  background-color: var(--alias-color-primaryTint);
}

.header__content {
  display: flex;
  align-items: center;
  min-height: var(--spacing-header);
}

.header__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2xs);
  margin-right: auto;
  margin-left: 0;
}

.header__logo__image {
  max-width: 102px;
  width: 100%;
}

.header__logo__text {
  font: var(--alias-typography-label-sizeS-bold);
}

.header__nav {
  display: none;
}

.header__nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.header__nav__item {
  width: 156px;
}

@media only screen and (min-width: 1200px) and (min-height: 481px) {
  .header__logo {
    flex-direction: column;
    align-items: flex-start;
  }

  .header__logo__image {
    max-width: 230px;
  }

  .header__logo__text {
    font: var(--alias-typography-label-sizeXL-bold);
  }

  .header__nav {
    display: block;
  }
}

/* --------------------------------------------------------------------------
  ## Aside
  -------------------------------------------------------------------------- */

.aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.aside__item {
  width: 100%;
}

@media only screen and (min-width: 481px) and (max-width: 991px) and (min-height: 481px) {
  .aside {
    flex-direction: row;
  }
  .aside__item {
    width: 50%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) and (min-height: 481px) {
  .aside {
    flex-direction: row;
  }
  .aside__item {
    width: 50%;
  }
}

@media only screen and (min-width: 1200px) and (min-height: 481px) {
  .aside {
    flex-direction: column;
  }
  .aside__item {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
  ## Main
  -------------------------------------------------------------------------- */

@media only screen and (min-width: 1200px) and (min-height: 481px) {
  .main {
    height: 100%;
  }
}

/* --------------------------------------------------------------------------
  ## Footer
  -------------------------------------------------------------------------- */

.footer {
  padding: var(--spacing-sm) 1rem;
  background-color: var(--global-color-blue-blue100);
}

.footer__copyright {
  text-align: center;
  font: var(--alias-typography-body-sizeXXS-normal);
  color: var(--global-color-gray-gray000);
}

/* --------------------------------------------------------------------------
  ## GlobalNav
  -------------------------------------------------------------------------- */

.global-nav-toggle {
  z-index: 900;
  position: fixed;
  top: calc(var(--spacing-header) * 0.5);
  right: 1rem;
  translate: 0 -50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--spacing-header) * 0.6666);
  border-radius: 999px;
  background-color: var(--global-color-blue-blue100);
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.global-nav-toggle.is-active {
  .global-nav-toggle__line {
    &::before,
    &::after {
      top: 50%;
      left: 50%;
      translate: -50% -50%;
    }

    &::before {
      rotate: 45deg;
    }

    &::after {
      rotate: -45deg;
    }
  }
}

.global-nav-toggle__line {
  position: relative;
  width: 50%;
  height: 25%;

  &::before,
  &::after {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: 100%;
    height: 2px;
    content: '';
    background-color: var(--global-color-gray-gray000);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  }

  &::before {
    top: 0;
  }

  &::after {
    bottom: 0;
  }
}

.global-nav {
  z-index: 800;
  position: fixed;
  top: var(--spacing-header);
  right: 0;
  visibility: hidden;
  opacity: 0;
  display: block;
  width: 100%;
  height: calc(100dvh - var(--spacing-header));
  background-color: var(--alias-color-primaryTint);
  transition: all 0.2s ease-in-out;
}

.global-nav.is-active {
  visibility: visible;
  opacity: 1;
}

.global-nav__inner {
  overflow-y: auto;
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  height: 100%;
}

.global-nav__item:not(:first-of-type) {
  margin-top: var(--spacing-md);
}

@media only screen and (min-width: 1200px) and (min-height: 481px) {
  .global-nav-toggle {
    display: none;
  }
}

/* ==========================================================================
  # Project
  ========================================================================== */

/* --------------------------------------------------------------------------
  ## Mascot
  -------------------------------------------------------------------------- */

.mascot {
  padding: var(--spacing-md);
  border: solid 1px var(--alias-color-border-default);
  background-color: var(--alias-color-primaryTint);
}

.mascot__title {
  padding: 0.75em 1em;
  text-align: center;
  font-size: var(--alias-typography-label-sizeS-normal);
  color: var(--global-color-gray-gray000);
  background-color: var(--global-color-blue-blue060);
}

.mascot__characters {
  width: min(240px, 90%);
}

.mascot__character__caption {
  margin-top: var(--spacing-xs);
  text-align: center;
  font: var(--alias-typography-label-sizeXXS-normal);
}

/* --------------------------------------------------------------------------
  ## Info
  -------------------------------------------------------------------------- */

.info {
  padding: var(--spacing-md);
  border: solid 1px var(--alias-color-border-default);
  background-color: var(--global-color-gray-gray000);
}

.info__image {
  max-width: 200px;
}

/* --------------------------------------------------------------------------
  ## Terms
  -------------------------------------------------------------------------- */

.terms__use {
  overflow-y: auto;
  height: 350px;
  padding: var(--spacing-md);
  border: solid 1px var(--alias-color-border-light);
}

@media only screen and (min-width: 1200px) and (min-height: 481px) {
  .terms__use {
    height: 470px;
  }
}

/* --------------------------------------------------------------------------
  ## OA
  -------------------------------------------------------------------------- */

.qa-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1em;
  text-align: center;
  border: solid 1px var(--alias-color-primary);
  font: var(--alias-typography-label-sizeS-bold);
  color: var(--alias-color-onPrimary);
  background-color: var(--alias-color-primary);
  transition-timing-function: var(--global-timingFunction-easeOut);
  transition-duration: var(--global-duration-300);
}

.qa-tab:hover,
.qa-tab:focus,
.qa-tab.is-active {
  color: var(--alias-color-primary);
  background-color: var(--alias-color-onPrimary);
}

.qa-panel {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  height: 0;
}

.qa-panel.is-visible {
  visibility: visible;
  height: auto;
  opacity: 1;
}

.qa-accordion__item:not(:first-of-type) {
  margin-top: var(--spacing-md);
}

.qa-accordion__header {
  position: relative;
  padding: var(--spacing-md);
  background-color: var(--global-color-blue-blue020);
  cursor: pointer;

  &:hover {
    filter: brightness(0.95);
  }
}

.qa-accordion__header__text {
  display: flex;
  padding-right: 2em;
  gap: var(--spacing-sm);
  font: var(--alias-typography-label-sizeL-bold);
  color: var(--global-color-blue-blue100);

  &::before {
    content: 'Q';
  }
}

.qa-accordion__button {
  position: absolute;
  top: 50%;
  right: var(--spacing-md);
  translate: 0 -50%;
  display: block;
  width: 2em;
  height: 2em;
  border-radius: 999px;

  &::before,
  &::after {
    position: absolute;
    inset: 0;
    margin: auto;
    display: block;
    width: 50%;
    height: 2px;
    content: '';
    background-color: var(--global-color-blue-blue100);
    transition: all 0.2s ease;
  }

  &::after {
    rotate: 90deg;
  }
}

.qa-accordion__content {
  font: var(--alias-typography-body-sizeS-normal);
  background-color: var(--global-color-blue-blue010);
  overflow: hidden;
  visibility: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    all 0.2s ease,
    max-height 0.6s ease;
}

.qa-accordion__content__inner {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);

  &::before {
    content: 'A';
  }
}

.qa-accordion__item.is-active {
  .qa-accordion__button {
    &::before {
      rotate: 90deg;
      opacity: 0;
    }
    &::after {
      rotate: 180deg;
    }
  }

  .qa-accordion__content {
    visibility: visible;
    opacity: 1;
    transition:
      all 0.2s 0.2s ease,
      max-height 0.6s ease;
  }
}

@media only screen and (max-width: 480px) {
  .qa-accordion__header__text {
    font: var(--alias-typography-label-sizeM-bold);
  }
}

@media (max-width: 635px) {
  .js-tabpanel > ul {
    flex-direction: column;  /* 縦並びに */
    width: 100%;
  }

  .js-tabpanel > ul > li {
    width: 100%;  /* 各liが全幅 */
  }

  .qa-tab {
    width: 100%;  /* ボタンも全幅 */
    box-sizing: border-box;
  }
}


/* ==========================================================================
  # Utility
  ========================================================================== */

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mt-2xl {
  margin-top: var(--spacing-2xl);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.w-1\/5 {
  width: 20%;
}

.w-4\/12 {
  width: 33.33333%;
}

.w-5\/12 {
  width: 41.666667%;
}

.w-6\/12 {
  width: 50%;
}

.w-full {
  width: 100%;
}

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

.font-bold {
  font-weight: 700;
}

.break-words {
  overflow-wrap: break-word;
}

@media only screen and (max-width: 480px) {
  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:w-full {
    width: 100%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) and (min-height: 481px) {
  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:w-5\/12 {
    width: 41.666667%;
  }

  .lg\:w-6\/12 {
    width: 50%;
  }

  .lg\:w-7\/12 {
    width: 58.333333%;
  }
}

@media only screen and (min-width: 1200px) and (min-height: 481px) {
  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:w-5\/12 {
    width: 41.666667%;
  }

  .xl\:w-6\/12 {
    width: 50%;
  }

  .xl\:w-7\/12 {
    width: 58.333333%;
  }
}
.linked-image {
  cursor: pointer;
}
.linked-image:hover {
  opacity: 0.8;
}

/* プルダウン表示・非表示切替 */
.qa-tab-dropdown-wrapper {
  display: none;
  margin-bottom: var(--spacing-md);
}

@media screen and (max-width: 635px) {
  .js-tabpanel > ul {
    display: none;
  }

  .qa-tab-dropdown-wrapper {
    display: block;
  }

  .qa-tab-dropdown {
    width: 100%;
    padding: 0.5em;
    font-size: 1rem;
  }
}

.qa-tab-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 0.75em 1em;
  font-size: 1rem;
  color: var(--alias-color-text-main);
  background-color: #fff;
  border: 1px solid var(--alias-color-border-default);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10"><polyline points="1,1 7,7 13,1" fill="none" stroke="%23333" stroke-width="2"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1em;
  cursor: pointer;
}

.qa-tab-dropdown:focus {
  outline: none;
  border-color: var(--alias-color-primary);
  box-shadow: 0 0 0 2px rgba(52, 140, 243, 0.3);
}