/*
Theme Name: CALL&RESPONSE コーポレートサイト
Author: 株式会社Attrablom
Author URI: https://attrablom.co.jp
Description: CALL&RESPONSE コーポレートサイト
Requires at least: 6.8.1
Tested up to: 6.8.1
Requires PHP: 7.2
Version: 1.0.0
License: 
License URI: 
*/

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

:root {
  --spacing: 1px;
  --color-gray-200: 56, 56, 56; /* #383838 */
  --color-gray-300: 87, 87, 87; /* #575757 */
  --color-gray-400: 157, 157, 157; /* #9D9D9D */
  --color-gray-600: 217, 217, 217; /* #D9D9D9 */
  --color-gray-700: 237, 237, 237; /* #EDEDED */

  --color-accent: 255, 127, 0; /* #FF7F00 */
  --color-danger: 244, 51, 51; /* #F43333 */
  --color-white: 252, 252, 252; /* #FCFCFC */
  --color-dark: 26, 26, 26; /* #1A1A1A */

  --translate-x: 0;
  --translate-y: 0;

  --border-style: solid;

  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-transition-duration: 150ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Noto Sans JP";
}

html {
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    display: none;
  }

  background-color: rgb(var(--color-white));
  color: rgb(var(--color-dark));
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: rgb(var(--color-dark));
}

p {
  line-height: 2;
}

dt {
  font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  &:focus {
    outline: solid rgb(var(--color-accent));
  }
}

input[type="checkbox"] {
  accent-color: rgb(var(--color-accent));
}

button {
  border: none;
  background-color: transparent;
  color: rgb(var(--color-dark));
  cursor: pointer;
}

a {
  color: rgb(var(--color-accent));
  word-break: break-word;
}

a:hover {
  color: rgb(var(--color-accent));
  text-decoration: none;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.-top-24 {
  top: -96px;
}

.top-0 {
  top: 0;
}

.top-5 {
  top: 20px;
}

.top-8 {
  top: 32px;
}

.top-23 {
  top: 92px;
}

.top-24 {
  top: 96px;
}

.top-30 {
  top: 120px;
}

.top-40 {
  top: 160px;
}

.top-80 {
  top: 320px;
}

.top-96 {
  top: 384px;
}

.top-120 {
  top: 480px;
}

.top-160 {
  top: 640px;
}

.top-1\/2 {
  top: 50%;
}

.top-1\/7 {
  top: calc(100% / 7);
}

.top-2\/7 {
  top: calc(100% * 2 / 7);
}

.top-3\/7 {
  top: calc(100% * 3 / 7);
}

.top-4\/7 {
  top: calc(100% * 4 / 7);
}

.top-5\/7 {
  top: calc(100% * 5 / 7);
}

.top-6\/7 {
  top: calc(100% * 6 / 7);
}

.top-\[108px\] {
  top: 108px;
}

.top-\[10\%\] {
  top: 10%;
}

.top-\[30\%\] {
  top: 30%;
}

.top-\[40\%\] {
  top: 40%;
}

.top-\[50\%\] {
  top: 50%;
}

.top-\[70\%\] {
  top: 70%;
}

.top-\[80\%\] {
  top: 80%;
}

.top-\[90\%\] {
  top: 90%;
}

.right-0 {
  right: 0;
}

.right-3 {
  right: 12px;
}

.right-4 {
  right: 16px;
}

.right-5 {
  right: 20px;
}

.right-8 {
  right: 32px;
}

.right-12 {
  right: 48px;
}

.right-1\/11 {
  right: calc(100% / 11);
}

.right-1\/10 {
  right: calc(100% / 10);
}

.right-1\/9 {
  right: calc(100% / 9);
}

.right-1\/8 {
  right: calc(100% / 8);
}

.right-1\/7 {
  right: calc(100% / 7);
}

.right-1\/6 {
  right: calc(100% / 6);
}

.right-1\/5 {
  right: calc(100% / 5);
}

.right-1\/4 {
  right: calc(100% / 4);
}

.right-1\/3 {
  right: calc(100% / 3);
}

.right-\[-5\%\] {
  right: -5%;
}

.right-\[5\%\] {
  right: 5%;
}

.right-\[7\%\] {
  right: 7%;
}

.right-\[10\%\] {
  right: 10%;
}

.bottom-0 {
  bottom: 0;
}

.bottom-3 {
  bottom: 12px;
}

.bottom-5 {
  bottom: 20px;
}

.bottom-\[40px\] {
  bottom: 40px;
}

.-left-20 {
  left: -80px;
}

.left-0 {
  left: 0;
}

.left-2 {
  left: 8px;
}

.left-3 {
  left: 12px;
}

.left-4 {
  left: 16px;
}

.left-5 {
  left: 20px;
}

.left-8 {
  left: 32px;
}

.left-12 {
  left: 48px;
}

.left-1\/11 {
  left: calc(100% / 11);
}

.left-1\/10 {
  left: calc(100% / 10);
}

.left-1\/9 {
  left: calc(100% / 9);
}

.left-1\/8 {
  left: calc(100% / 8);
}

.left-1\/7 {
  left: calc(100% / 7);
}

.left-1\/6 {
  left: calc(100% / 6);
}

.left-1\/5 {
  left: calc(100% / 5);
}

.left-1\/4 {
  left: calc(100% / 4);
}

.left-1\/3 {
  left: calc(100% / 3);
}

.left-\[9px\] {
  left: 9px;
}

.left-\[-5\%\] {
  left: -5%;
}

.left-\[5\%\] {
  left: 5%;
}

.left-\[7\%\] {
  left: 7%;
}

.left-\[10\%\] {
  left: 10%;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-100 {
  z-index: 100;
}

.z-1000 {
  z-index: 1000;
}

.z-10000 {
  z-index: 10000;
}

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

.block {
  display: block;
}

.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-\[120px_1fr\] {
  grid-template-columns: 120px 1fr;
}

.grid-cols-\[200px_minmax\(0\,_1fr\)\] {
  grid-template-columns: 200px minmax(0, 1fr);
}

.grid-cols-\[40\%_60\%\] {
  grid-template-columns: 1fr 60%;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

.gap-5 {
  gap: 20px;
}

.gap-6 {
  gap: 24px;
}

.gap-8 {
  gap: 32px;
}

.gap-10 {
  gap: 40px;
}

.gap-14 {
  gap: 56px;
}

.gap-15 {
  gap: 60px;
}

.gap-16 {
  gap: 64px;
}

.gap-20 {
  gap: 80px;
}

.gap-x-10 {
  column-gap: 40px;
}

.gap-y-6 {
  row-gap: 24px;
}

.gap-y-14 {
  row-gap: 56px;
}

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

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

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

.flex-1 {
  flex: 1;
}

.place-items-center {
  place-items: center;
}

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

.items-end {
  align-items: flex-end;
}

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

.justify-end {
  justify-content: flex-end;
}

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

.justify-between {
  justify-content: space-between;
}

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

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-between {
  justify-content: space-between;
}

.align-self-start {
  align-self: start;
}

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

.align-self-end {
  align-self: end;
}

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

.justify-self-end {
  justify-self: end;
}

.m-0 {
  margin: 0;
}

.my-8 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.my-10 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.my-20 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-5 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 40px;
}

.ml-3 {
  margin-left: 12px;
}

.ml-10 {
  margin-left: 40px;
}

.ml-20 {
  margin-left: 80px;
}

.p-0 {
  padding: 0;
}

.p-2 {
  padding: 8px;
}

.p-3 {
  padding: 12px;
}

.p-4 {
  padding: 16px;
}

.p-5 {
  padding: 20px;
}

.p-8 {
  padding: 32px;
}

.p-10 {
  padding: 40px;
}

.p-20 {
  padding: 80px;
}

.py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-2\.5 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.py-7 {
  padding-top: 28px;
  padding-bottom: 28px;
}

.py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-12 {
  padding-top: 48px;
  padding-bottom: 48px;
}

.py-13 {
  padding-top: 52px;
  padding-bottom: 52px;
}

.py-15 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.py-16 {
  padding-top: 64px;
  padding-bottom: 64px;
}

.py-20 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.py-25 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.py-30 {
  padding-top: 120px;
  padding-bottom: 120px;
}

.py-40 {
  padding-top: 160px;
  padding-bottom: 160px;
}

.py-60 {
  padding-top: 240px;
  padding-bottom: 240px;
}

.px-2 {
  padding-left: 8px;
  padding-right: 8px;
}

.px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.px-5 {
  padding-left: 20px;
  padding-right: 20px;
}

.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.px-7 {
  padding-left: 28px;
  padding-right: 28px;
}

.px-8 {
  padding-left: 32px;
  padding-right: 32px;
}

.px-10 {
  padding-left: 40px;
  padding-right: 40px;
}

.px-20 {
  padding-left: 80px;
  padding-right: 80px;
}

.px-25 {
  padding-left: 100px;
  padding-right: 100px;
}

.px-30 {
  padding-left: 120px;
  padding-right: 120px;
}

.px-40 {
  padding-left: 160px;
  padding-right: 160px;
}

.px-\[10px\] {
  padding-left: 10px;
  padding-right: 10px;
}

.pt-4 {
  padding-top: 16px;
}

.pt-5 {
  padding-top: 20px;
}

.pt-15 {
  padding-top: 60px;
}

.pt-16 {
  padding-top: 64px;
}

.pt-20 {
  padding-top: 80px;
}

.pt-30 {
  padding-top: 120px;
}

.pt-60 {
  padding-top: 240px;
}

.pt-\[92px\] {
  padding-top: 92px;
}

.pt-\[156px\] {
  padding-top: 156px;
}

.pr-25 {
  padding-right: 100px;
}

.pb-3 {
  padding-bottom: 12px;
}

.pb-5 {
  padding-bottom: 20px;
}

.pb-6 {
  padding-bottom: 24px;
}

.pb-8 {
  padding-bottom: 32px;
}

.pb-10 {
  padding-bottom: 40px;
}

.pb-60 {
  padding-bottom: 240px;
}

.pl-2\/5 {
  padding-left: 40%;
}

.pl-5 {
  padding-left: 20px;
}

.pl-10 {
  padding-left: 40px;
}

.p-\[10px\] {
  padding: 10px;
}

.min-w-12 {
  min-width: 12px;
}

.min-w-40 {
  min-width: 40px;
}

.min-w-60 {
  min-width: 60px;
}

.min-w-80 {
  min-width: 80px;
}

.min-w-120 {
  min-width: 120px;
}

.max-w-180 {
  max-width: 180px;
}

.max-w-220 {
  max-width: 220px;
}

.max-w-320 {
  max-width: 320px;
}

.max-w-340 {
  max-width: 340px;
}

.max-w-400 {
  max-width: 400px;
}

.max-w-480 {
  max-width: 480px;
}

.max-w-767 {
  max-width: 767px;
}

.max-w-800 {
  max-width: 800px;
}

.max-w-872 {
  max-width: 872px;
}

.max-w-1200 {
  max-width: 1200px;
}

.max-w-1400 {
  max-width: 1400px;
}

.max-w-1\/2 {
  max-width: 50%;
}

.max-w-4\/5 {
  max-width: 80%;
}

.w-screen {
  width: 100vw;
}

.w-full {
  width: 100%;
}

.w-1\/2 {
  width: 50%;
}

.w-2\/5 {
  width: 40%;
}

.w-3\/5 {
  width: 60%;
}

.w-4\/5 {
  width: 80%;
}

.w-1 {
  width: 1px;
}

.w-2 {
  width: 2px;
}

.w-10 {
  width: 10px;
}

.w-12 {
  width: 12px;
}

.w-20 {
  width: 20px;
}

.w-24 {
  width: 24px;
}

.w-32 {
  width: 32px;
}

.w-40 {
  width: 40px;
}

.w-48 {
  width: 48px;
}

.w-52 {
  width: 52px;
}

.w-56 {
  width: 56px;
}

.w-60 {
  width: 60px;
}

.w-80 {
  width: 80px;
}

.w-100 {
  width: 100px;
}

.w-160 {
  width: 160px;
}

.w-180 {
  width: 180px;
}

.w-148 {
  width: 148px;
}

.w-192 {
  width: 192px;
}

.w-200 {
  width: 200px;
}

.w-220 {
  width: 220px;
}

.w-224 {
  width: 224px;
}

.w-260 {
  width: 260px;
}

.w-300 {
  width: 300px;
}

.w-320 {
  width: 320px;
}

.w-400 {
  width: 400px;
}

.w-440 {
  width: 440px;
}

.w-520 {
  width: 520px;
}

.w-\[12vw\] {
  width: 12vw;
}

.w-\[16vw\] {
  width: 16vw;
}

.w-\[20vw\] {
  width: 20vw;
}

.w-\[36\%\] {
  width: 36%;
}

.w-\[55\%\] {
  width: 55%;
}

.w-\[56\%\] {
  width: 56%;
}

.w-\[58\%\] {
  width: 58%;
}

.w-\[70\%\] {
  width: 70%;
}

.w-\[calc\(100\%-160px\)\] {
  width: calc(100% - 160px);
}

.min-h-dvh {
  min-height: 100dvh;
}

.min-h-200dvh {
  min-height: 200dvh;
}

.min-h-\[112px\] {
  min-height: 112px;
}

.h-vh {
  min-height: 100vh;
}

.h-dvh {
  height: 100dvh;
}

.h-300dvh {
  height: 300dvh;
}

.h-full {
  height: 100%;
}

.h-2\/5 {
  height: 40%;
}

.h-3\/5 {
  height: 60%;
}

.h-1 {
  height: 1px;
}

.h-2 {
  height: 2px;
}

.h-10 {
  height: 10px;
}

.h-12 {
  height: 12px;
}

.h-20 {
  height: 20px;
}

.h-24 {
  height: 24px;
}

.h-32 {
  height: 32px;
}

.h-40 {
  height: 40px;
}

.h-48 {
  height: 48px;
}

.h-50 {
  height: 50px;
}

.h-60 {
  height: 60px;
}

.h-100 {
  height: 100px;
}

.h-128 {
  height: 128px;
}

.h-200 {
  height: 200px;
}

.h-320 {
  height: 320px;
}

.h-1000 {
  height: 1000px;
}

.h-\[36\%\] {
  height: 36%;
}

.h-\[300vh\] {
  height: 300vh;
}

.h-\[calc\(100\%-240px-180px\)\] {
  height: calc(100% - 240px - 180px);
}

.h-\[calc\(100dvh-24px\)\] {
  height: calc(100dvh - 24px);
}

.h-\[calc\(100vh-20px\)\] {
  height: calc(100vh - 20px);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.border-none {
  --border-style: none;
  border-style: none;
}

.border-2 {
  border-style: var(--border-style);
  border-width: 2px;
}

.border-black {
  border-color: rgb(var(--color-dark));
}

/* TODO:ボーダーの色を変える */
.border-accent {
  border: 1px solid rgb(var(--color-accent));
}

.border-dark {
  border: 1px solid rgb(var(--color-dark));
}

.border-gray-400 {
  border: 1px solid rgb(var(--color-gray-400));
}

.border-t-1-gray-300 {
  border-top: 1px solid rgb(var(--color-gray-300));
}

.border-t-1-gray-400 {
  border-top: 1px solid rgb(var(--color-gray-400));
}

.border-b-1-gray-300 {
  border-bottom: 1px solid rgb(var(--color-gray-300));
}

.border-t-1-gray-400 {
  border-top: 1px solid rgb(var(--color-gray-400));
}

.border-b-1-gray-400 {
  border-bottom: 1px solid rgb(var(--color-gray-400));
}

.border-b-2 {
  border-bottom: 2px solid rgb(var(--color-gray-600));
}

.rounded-full {
  border-radius: calc(infinity * 1px);
}

.rounded-xs {
  border-radius: 4px;
}

.rounded-sm {
  border-radius: 6px;
}

.rounded-md {
  border-radius: 8px;
}

.rounded-lg {
  border-radius: 10px;
}

.rounded-xl {
  border-radius: 14px;
}

.rounded-2xl {
  border-radius: 18px;
}

.rounded-3xl {
  border-radius: 26px;
}

.rounded-4xl {
  border-radius: 34px;
}

.rounded-5xl {
  border-radius: 42px;
}

.rounded-t-4xl {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.rounded-tr-4xl {
  border-top-right-radius: 30px;
}

.rounded-b-4xl {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.rounded-bl-4xl {
  border-bottom-left-radius: 30px;
}

.rounded-l-\[20px\] {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.rounded-\[3px\] {
  border-radius: 3px;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-t-\[30px\] {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.rounded-\[40px\] {
  border-radius: 40px;
}

.rounded-l-\[10px\] {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.rounded-tr-\[30px\] {
  border-top-right-radius: 30px;
}

/* 背景 */

.bg-accent {
  background-color: rgb(var(--color-accent));
}

.bg-white {
  background-color: rgb(var(--color-white));
}

.bg-white\/20 {
  background-color: rgba(var(--color-white), 0.2);
}

.bg-white\/50 {
  background-color: rgba(var(--color-white), 0.5);
}

.bg-white\/80 {
  background-color: rgba(var(--color-white), 0.8);
}

.bg-white-blur {
  background-color: rgba(var(--color-white), 0.8);
  backdrop-filter: blur(6px);
}

.bg-black\/50 {
  background-color: rgba(var(--color-dark), 0.5);
}

.bg-black\/90 {
  background-color: rgba(var(--color-dark), 0.9);
}

.bg-dark {
  background-color: rgb(var(--color-dark));
}

.bg-dark\/70 {
  background-color: rgba(var(--color-dark), 0.7);
}

.bg-dark-opacity-50 {
  background-color: rgba(var(--color-dark), 0.5);
}

.bg-dark-opacity-80 {
  background-color: rgba(var(--color-dark), 0.8);
}

.bg-dark-opacity-90 {
  background-color: rgba(var(--color-dark), 0.9);
}

.bg-gray-200 {
  background-color: rgb(var(--color-gray-200));
}

.bg-gray-400 {
  background-color: rgb(var(--color-gray-400));
}

.bg-gray-600 {
  background-color: rgb(var(--color-gray-600));
}

.bg-gray-700 {
  background-color: rgb(var(--color-gray-700));
}

.bg-linear-to-r {
  --gradient-stops: var(--gradient-from), var(--gradient-to);
  background-image: linear-gradient(to right, var(--gradient-stops));
}

.bg-linear-to-b {
  --gradient-stops: var(--gradient-from), var(--gradient-to);
  background-image: linear-gradient(to bottom, var(--gradient-stops));
}

.from-white {
  --gradient-from: rgb(var(--color-white));
}

.from-white\/0 {
  --gradient-from: rgba(var(--color-white), 0);
}

.from-gray-300 {
  --gradient-from: rgb(var(--color-gray-300));
}

.to-white {
  --gradient-to: rgb(var(--color-white));
}

.to-white\/0 {
  --gradient-to: rgba(var(--color-white), 0);
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.backdrop-blur-xs {
  backdrop-filter: blur(4px);
}

/*シャドウ*/
.shadow-\[10px_10px_20px_dark\/15\] {
  box-shadow: 10px 10px 20px rgba(var(--color-dark), 0.15);
}

/* テキスト */

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

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

.text-accent {
  color: rgb(var(--color-accent));
}

.text-danger {
  color: rgb(var(--color-danger));
}

.text-white {
  color: rgb(var(--color-white));
}

.text-white\! {
  color: rgb(var(--color-white)) !important;
}

.text-dark {
  color: rgb(var(--color-dark));
}

.text-dark\! {
  color: rgb(var(--color-dark)) !important;
}

.text-gray-400 {
  color: rgb(var(--color-gray-400));
}

.text-gray-600 {
  color: rgb(var(--color-gray-600));
}

.text-4xl {
  font-size: 40px;
}

.text-12 {
  font-size: 12px;
}

.text-14 {
  font-size: 14px;
}

.text-16 {
  font-size: 16px;
}

.text-18 {
  font-size: 18px;
}

.text-20 {
  font-size: 20px;
}

.text-24 {
  font-size: 24px;
}

.text-26 {
  font-size: 26px;
}

.text-32 {
  font-size: 32px;
}

.text-40 {
  font-size: 40px;
}

.text-48 {
  font-size: 48px;
}

.text-56 {
  font-size: 56px;
}

.text-58 {
  font-size: 58px;
}

.text-60 {
  font-size: 60px;
}

.text-80 {
  font-size: 80px;
}

.text-6xl {
  font-size: 60px;
}

.text-8xl {
  font-size: 80px;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

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

.leading-none {
  line-height: 1;
}

.leading-1\.6 {
  line-height: 1.6;
}

.leading-2 {
  line-height: 2;
}

.leading-2\.2 {
  line-height: 2.2;
}

.leading-2\.5 {
  line-height: 2.5;
}

.tracking-\[4px\] {
  letter-spacing: 4px;
}

.font-noto-sans-jp {
  font-family: "Noto Sans JP";
}

.font-alata {
  font-family: "Alata";
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration-line: underline;
}

.decoration-accent-opacity-30 {
  text-decoration-color: rgba(var(--color-accent), 0.3);
}

.decoration-4 {
  text-decoration-thickness: 4px;
}

.decoration-\[15px\] {
  text-decoration-thickness: 15px;
}

.-underline-offset-6 {
  text-underline-offset: -6px;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 画像 */

.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-3\/4 {
  aspect-ratio: 3 / 4;
}

.aspect-3\/2 {
  aspect-ratio: 3 / 2;
}

.aspect-4\/3 {
  aspect-ratio: 4 / 3;
}

.aspect-16\/9 {
  aspect-ratio: 16 / 9;
}

.aspect-32\/9 {
  aspect-ratio: 32 / 9;
}

.overflow-visible {
  overflow: visible;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* タグ特有 */
.text-decoration-none {
  text-decoration: none;
}

.list-none {
  list-style-type: none;
}

/* SVG */

.fill-\[\#fcfcfc00\] {
  fill: rgba(var(--color-white), 0);
}

.fill-white {
  fill: rgb(var(--color-white));
}

.fill-accent {
  fill: rgb(var(--color-accent));
}

.fill-gray-600 {
  fill: rgb(var(--color-gray-600));
}

.stroke-white {
  stroke: rgb(var(--color-white));
}

.stroke-gray-400 {
  stroke: rgb(var(--color-gray-400));
}

/* その他 */

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.invisible {
  visibility: hidden;
}

.cursor-pointer {
  cursor: pointer;
}

.pointer-events-auto {
  pointer-events: auto;
}

.hidden {
  display: none;
}

/* アニメーション */
.transform {
  transform: translate(-50%, -50%);
}

.origin-center {
  transform-origin: center;
}

.-translate-y-1\/2 {
  transform: translateY(-50%);
}

.transition {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
    --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate,
    filter, -webkit-backdrop-filter, backdrop-filter;
  transition-timing-function: var(
    --default-transition-timing-function
  ); /* cubic-bezier(0.4, 0, 0.2, 1) */
  transition-duration: var(--default-transition-duration); /* 150ms */
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

/* TODO: これはtranslateではなくtransformでは？ */
.translate-x-full {
  translate: 100% var(--translate-y);
  --translate-x: 100%;
}

.translate-x-0 {
  translate: 0 var(--translate-y);
  --translate-x: 0;
}

.translate-x-\[80px\] {
  transform: translateX(80px);
}

.-translate-y-\[100px\] {
  translate: var(--translate-x) -100px;
  --translate-y: -100px;
}

.translate-y-\[100px\] {
  translate: var(--translate-x) 100px;
  --translate-y: 100px;
}

.-translate-x-\[100px\] {
  translate: -100px var(--translate-y);
  --translate-x: -100px;
}

.translate-x-\[100px\] {
  translate: 100px var(--translate-y);
  --translate-x: 100px;
}

.rotate-45 {
  transform: rotate(45deg);
}

.-rotate-45 {
  transform: rotate(-45deg);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 擬似クラス */

.hover\:max-w-4\/5:hover {
  max-width: 80%;
}

.hover\:border-accent:hover {
  border-color: rgb(var(--color-accent));
}

.hover\:text-accent:hover {
  color: rgb(var(--color-accent));
}

.hover\:text-white:hover {
  color: rgb(var(--color-white));
}

.hover\:text-dark:hover {
  color: rgb(var(--color-dark));
}

.hover\:\[\&_span\]\:before\:left-0:hover {
  & span::before {
    left: 0;
  }
}

.before\:content-\[\'\'\]::before {
  content: "";
}

.before\:content-\[attr\(data-text\)\]::before {
  content: attr(data-text);
}

.before\:absolute::before {
  position: absolute;
}

.before\:top-0::before {
  top: 0;
}

.before\:left-\[-100\%\]::before {
  left: -100%;
}

.before\:hidden::before {
  display: none;
}

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

.before\:h-full::before {
  height: 100%;
}

.before\:bg-accent::before {
  background-color: rgb(var(--color-accent));
}

.before\:duration-300::before {
  transition-duration: 300ms;
}

.before\:delay-0::before {
  transition-delay: 0ms;
}

.before\:delay-100::before {
  transition-delay: 100ms;
}

.before\:delay-200::before {
  transition-delay: 200ms;
}

/* セレクタ */
.\[\&_p\]\:m-0 {
  & p {
    margin: 0;
  }
}

.\[\&_svg\]\:w-full {
  & svg {
    width: 100%;
  }
}

.\[\&_svg\]\:h-full {
  & svg {
    height: 100%;
  }
}

.\[\&\.fade-out\]\:opacity-0 {
  &.fade-out {
    opacity: 0;
  }
}

.\[\&_content\]\:hover\:max-w-4\/5:hover {
  & > .content {
    max-width: 80%;
  }
}

/* カスタム */

.uk-open .uk-open\:rotate-90 {
  transform: rotate(90deg);
}

.group-hover\:opacity-100:is(:where(.group):hover *) {
  opacity: 1;
}

.\[writing-mode\:vertical-rl\] {
  writing-mode: vertical-rl;
}

.uk-offcanvas-overlay.uk-open::before {
  background-color: rgba(var(--color-dark), 0.3);
}

@media (width <= 1280px) {
  .xl\:left-3 {
    left: 12px;
  }

  .xl\:grid-cols-\[480px_1fr\] {
    grid-template-columns: 480px 1fr;
  }

  .xl\:gap-3 {
    gap: 12px;
  }

  .xl\:gap-10 {
    gap: 40px;
  }

  .xl\:px-5 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .xl\:px-20 {
    padding-left: 80px;
    padding-right: 80px;
  }

  .xl\:w-\[32\%\] {
    width: 32%;
  }

  .xl\:w-\[63\%\] {
    width: 63%;
  }

  .xl\:text-18 {
    font-size: 18px;
  }

  .xl\:text-24 {
    font-size: 24px;
  }

  .xl\:text-40 {
    font-size: 40px;
  }

  .xl\:\[\&_content\]\:hover\:max-w-9\/10:hover {
    & > .content {
      max-width: 90%;
    }
  }
}

@media (width <= 1024px) {
  .lg\:relative {
    position: relative;
  }

  .lg\:left-auto {
    left: auto;
  }

  .lg\:left-\[48\%\] {
    left: 48%;
  }

  .lg\:right-auto {
    right: auto;
  }

  .lg\:right-\[-10\%\] {
    right: -10%;
  }

  .lg\:right-\[48\%\] {
    right: 48%;
  }

  .lg\:bottom-\[20px\] {
    bottom: 20px;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:grid-cols-none {
    grid-template-columns: none;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:top-20 {
    top: 80px;
  }

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

  .lg\:place-items-center {
    place-items: center;
  }

  .lg\:justify-items-end {
    justify-items: end;
  }

  .lg\:gap-2 {
    gap: 8px;
  }

  .lg\:gap-11 {
    gap: 44px;
  }

  .lg\:my-10 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .lg\:p-0 {
    padding: 0;
  }

  .lg\:p-4 {
    padding: 16px;
  }

  .lg\:py-1 {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .lg\:py-8 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .lg\:py-10 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .lg\:py-20 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .lg\:px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .lg\:px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .lg\:px-10 {
    padding-left: 40px;
    padding-right: 40px;
  }

  .lg\:px-20 {
    padding-left: 80px;
    padding-right: 80px;
  }

  .lg\:pt-2 {
    padding-top: 8px;
  }

  .lg\:pt-10 {
    padding-top: 40px;
  }

  .lg\:pt-20 {
    padding-top: 80px;
  }

  .lg\:pb-0 {
    padding-bottom: 0;
  }

  .lg\:max-w-400 {
    max-width: 366px;
  }

  .lg\:max-w-460 {
    max-width: 460px;
  }

  .lg\:max-w-\[calc\(100vw-80px-80px\)\] {
    max-width: calc(100vw - 160px);
  }

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

  .lg\:w-300 {
    width: 300px;
  }

  .lg\:w-360 {
    width: 360px;
  }

  .lg\:w-\[30\%\] {
    width: 30%;
  }

  .lg\:w-\[40\%\] {
    width: 40%;
  }

  .lg\:w-\[16vw\] {
    width: 16vw;
  }

  .lg\:w-\[20vw\] {
    width: 20vw;
  }

  .lg\:w-\[24vw\] {
    width: 24vw;
  }

  .lg\:w-\[30vw\] {
    width: 30vw;
  }

  .lg\:w-\[calc\(100\%-80px\)\] {
    width: calc(100% - 80px);
  }

  .lg\:min-h-\[92px\] {
    min-height: 92px;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:h-\[calc\(100\%-240px-148px\)\] {
    height: calc(100% - 240px - 148px);
  }

  .lg\:text-14 {
    font-size: 14px;
  }

  .lg\:text-16 {
    font-size: 16px;
  }

  .lg\:text-18 {
    font-size: 18px;
  }

  .lg\:text-20 {
    font-size: 20px;
  }

  .lg\:text-24 {
    font-size: 24px;
  }

  .lg\:text-28 {
    font-size: 28px;
  }

  .lg\:text-32 {
    font-size: 32px;
  }

  .lg\:text-40 {
    font-size: 40px;
  }

  .lg\:text-46 {
    font-size: 46px;
  }

  .lg\:text-48 {
    font-size: 48px;
  }

  .lg\:text-50 {
    font-size: 50px;
  }

  .lg\:text-64 {
    font-size: 64px;
  }

  .lg\:aspect-4\/3 {
    aspect-ratio: 4 / 3;
  }

  .lg\:\[\&_content\]\:hover\:max-w-19\/20:hover {
    & > .content {
      max-width: 95%;
    }
  }
}

@media (width <= 768px) {
  .md\:relative {
    position: relative;
  }

  .md\:top-22 {
    top: 88px;
  }

  .md\:right-0 {
    right: 0;
  }

  .md\:block {
    display: block;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:flex-col-reverse {
    flex-direction: column-reverse;
  }

  .md\:grid-cols-none {
    grid-template-columns: none;
  }

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

  .md\:justify-items-center {
    justify-items: center;
  }

  .md\:items-start {
    align-items: start;
  }

  .md\:gap-0 {
    gap: 0;
  }

  .md\:gap-3 {
    gap: 12px;
  }

  .md\:gap-4 {
    gap: 16px;
  }

  .md\:gap-5 {
    gap: 20px;
  }

  .md\:gap-6 {
    gap: 24px;
  }

  .md\:gap-8 {
    gap: 32px;
  }

  .md\:gap-10 {
    gap: 40px;
  }

  .md\:p-0 {
    padding: 0;
  }

  .md\:p-6 {
    padding: 24px;
  }

  .md\:py-6 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .md\:py-10 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .md\:py-16 {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .md\:py-20 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .md\:py-30 {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .md\:px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:px-2 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .md\:px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .md\:px-4 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .md\:px-8 {
    padding-left: 32px;
    padding-right: 32px;
  }

  .md\:px-10 {
    padding-left: 40px;
    padding-right: 40px;
  }

  .md\:pt-10 {
    padding-top: 40px;
  }

  .md\:pt-20 {
    padding-top: 80px;
  }

  .md\:min-w-40 {
    min-width: 40px;
  }

  .md\:max-w-200 {
    max-width: 200px;
  }

  .md\:max-w-240 {
    max-width: 240px;
  }

  .md\:max-w-400 {
    max-width: 400px;
  }

  .md\:max-w-\[90\%\] {
    max-width: 90%;
  }

  .md\:max-w-none {
    max-width: none;
  }

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

  .md\:w-10 {
    width: 10px;
  }

  .md\:w-32 {
    width: 32px;
  }

  .md\:w-36 {
    width: 36px;
  }

  .md\:w-40 {
    width: 40px;
  }

  .md\:w-60 {
    width: 60px;
  }

  .md\:w-120 {
    width: 120px;
  }

  .md\:w-260 {
    width: 260px;
  }

  .md\:w-\[calc\(100\%-40px\)\] {
    width: calc(100% - 40px);
  }

  .md\:h-32 {
    height: 32px;
  }

  .md\:h-40 {
    height: 40px;
  }

  .md\:h-48 {
    height: 48px;
  }

  .md\:h-180 {
    height: 180px;
  }

  .md\:h-600 {
    height: 600px;
  }

  .md\:min-h-\[68px\] {
    min-height: 68px;
  }

  .md\:rounded-2xl {
    border-radius: 18px;
  }

  .md\:rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .md\:rounded-tr-\[10px\] {
    border-top-right-radius: 10px;
  }

  .md\:rounded-tr-\[30px\] {
    border-top-right-radius: 30px;
  }

  .md\:rounded-\[20px\] {
    border-radius: 20px;
  }

  .md\:text-10 {
    font-size: 10px;
  }

  .md\:text-12 {
    font-size: 12px;
  }

  .md\:text-14 {
    font-size: 14px;
  }

  .md\:text-16 {
    font-size: 16px;
  }

  .md\:text-18 {
    font-size: 18px;
  }

  .md\:text-24 {
    font-size: 24px;
  }

  .md\:text-32 {
    font-size: 32px;
  }

  .md\:text-36 {
    font-size: 36px;
  }

  .md\:text-40 {
    font-size: 40px;
  }

  .md\:text-46 {
    font-size: 46px;
  }
}

@media (width <= 640px) {
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 18px;
  }
  h4,
  h5,
  h6 {
    font-size: 16px;
  }

  .sm\:top-auto {
    top: auto;
  }

  .sm\:top-3 {
    top: 12px;
  }

  .sm\:left-auto {
    left: auto;
  }

  .sm\:left-0 {
    left: 0;
  }

  .sm\:-left-9 {
    left: -36px;
  }

  .sm\:left-\[4\.5px\] {
    left: 4.5px;
  }

  .sm\:right-0 {
    right: 0;
  }

  .sm\:right-3 {
    right: 12px;
  }

  .sm\:right-auto {
    right: auto;
  }

  .sm\:bottom-0 {
    bottom: 0;
  }

  .sm\:bottom-\[28px\] {
    bottom: 28px;
  }

  .sm\:bottom-\[30px\] {
    bottom: 30px;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:block {
    display: block;
  }

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

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:place-items-start {
    place-items: start;
  }

  .sm\:justify-start {
    justify-content: start;
  }

  .sm\:items-start {
    align-items: start;
  }

  .sm\:align-self-center {
    align-self: center;
  }

  .sm\:grid-cols-none {
    grid-template-columns: none;
  }

  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .sm\:gap-1 {
    gap: 4px;
  }

  .sm\:gap-2 {
    gap: 8px;
  }

  .sm\:gap-3 {
    gap: 12px;
  }

  .sm\:gap-4 {
    gap: 16px;
  }

  .sm\:gap-6 {
    gap: 24px;
  }

  .sm\:gap-8 {
    gap: 32px;
  }

  .sm\:gap-10 {
    gap: 40px;
  }

  .sm\:m-auto {
    margin: auto;
  }

  .sm\:ml-0 {
    margin-left: 0;
  }

  .sm\:ml-1 {
    margin-left: 4px;
  }

  .sm\:ml-9 {
    margin-left: 36px;
  }

  .sm\:ml-9 {
    margin-left: 36px;
  }

  .sm\:py-2\.5 {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .sm\:py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .sm\:py-5 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sm\:py-6 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .sm\:py-8 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .sm\:py-10 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .sm\:py-12 {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .sm\:py-20 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
	
  .sm\:px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .sm\:px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sm\:px-4 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sm\:px-5 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sm\:px-7 {
    padding-left: 28px;
    padding-right: 28px;
  }

  .sm\:px-18 {
    padding-left: 72px;
    padding-right: 72px;
  }

  .sm\:px-\[6\%\] {
    padding-left: 6%;
    padding-right: 6%;
  }

  .sm\:pt-5 {
    padding-top: 20px;
  }

  .sm\:pt-10 {
    padding-top: 40px;
  }

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

  .sm\:w-1 {
    width: 1px;
  }

  .sm\:w-5 {
    width: 5px;
  }

  .sm\:w-7 {
    width: 7px;
  }

  .sm\:w-10 {
    width: 10px;
  }

  .sm\:w-12 {
    width: 12px;
  }

  .sm\:w-14 {
    width: 14px;
  }

  .sm\:w-24 {
    width: 24px;
  }

  .sm\:w-28 {
    width: 28px;
  }

  .sm\:w-42 {
    width: 42px;
  }

  .sm\:w-60 {
    width: 60px;
  }

  .sm\:w-160 {
    width: 160px;
  }

  .sm\:w-3\/5 {
    width: 60%;
  }

  .sm\:w-\[50\%\] {
    width: 50%;
  }

  .sm\:w-\[70\%\] {
    width: 70%;
  }

  .sm\:w-\[18vw\] {
    width: 18vw;
  }

  .sm\:w-\[24vw\] {
    width: 24vw;
  }

  .sm\:w-\[26vw\] {
    width: 26vw;
  }

  .sm\:w-\[30vw\] {
    width: 30vw;
  }

  .sm\:w-\[32vw\] {
    width: 32vw;
  }

  .sm\:w-\[calc\(100\%-20px\)\] {
    width: calc(100% - 20px);
  }

  .sm\:w-\[calc\(100\%-80px\)\] {
    width: calc(100% - 80px);
  }

  .sm\:w-\[calc\(100\%-52px\)\] {
    width: calc(100% - 52px);
  }

  .sm\:min-h-\[38px\] {
    min-height: 38px;
  }

  .sm\:h-auto {
    height: auto;
  }

  .sm\:h-5 {
    height: 5px;
  }

  .sm\:h-10 {
    height: 10px;
  }

  .sm\:h-24 {
    height: 24px;
  }

  .sm\:h-30 {
    height: 30px;
  }

  .sm\:h-42 {
    height: 42px;
  }

  .sm\:h-48 {
    height: 48px;
  }

  .sm\:h-50 {
    height: 50px;
  }

  .sm\:h-\[calc\(100\%-80px-94px\)\] {
    height: calc(100% - 80px - 94px);
  }

  .sm\:rounded-\[10px\] {
    border-radius: 10px;
  }

  .sm\:text-10 {
    font-size: 10px;
  }

  .sm\:text-12 {
    font-size: 12px;
  }

  .sm\:text-14 {
    font-size: 14px;
  }

  .sm\:text-16 {
    font-size: 16px;
  }

  .sm\:text-18 {
    font-size: 18px;
  }

  .sm\:text-20 {
    font-size: 20px;
  }

  .sm\:text-24 {
    font-size: 24px;
  }

  .sm\:text-26 {
    font-size: 26px;
  }

  .sm\:text-32 {
    font-size: 32px;
  }

  .sm\:font-medium {
    font-weight: 500;
  }

  .sm\:tracking-\[1px\] {
    letter-spacing: 1px;
  }

  .sm\:tracking-\[2px\] {
    letter-spacing: 2px;
  }

  .sm\:aspect-auto {
    aspect-ratio: auto;
  }

  .sm\:aspect-square {
    aspect-ratio: 1 / 1;
  }

  .sm\:aspect-3\/4 {
    aspect-ratio: 3 / 4;
  }

  .sm\:aspect-9\/16 {
    aspect-ratio: 9 / 16;
  }

  .sm\:aspect-4\/3 {
    aspect-ratio: 4 / 3;
  }

  .sm\:aspect-16\/9 {
    aspect-ratio: 16 / 9;
  }

  .sm\:\[writing-mode\:horizontal-tb\] {
    writing-mode: horizontal-tb;
  }
}