:root {
  /* Color styles */
  --main: #00B4AB;
  --black: #222223;
  --white: #FFFFFF;
  --beige-25: #fdfcfb;
  --beige-50: #FCFAF8;
  --beige-100: #F7F2EE;
  --mono---gray-50: #f4f4f6;
  --mono---gray-100: #E1E1E5;
  --mono---gray-200: #C8C8CC;
  --mono---gray-300: #AFAFB2;
  --mono---gray-400: #969699;
  --mono---gray-500: #7D7D80;
  --mono---gray-600: #646466;
  --teal---color--primary-100: #C9FBDF;
  --teal---color--primary-200: #94F7C9;
  --teal---color--primary-300: #5DE8B5;
  --teal---color--primary-400: #34D2A7;
  --teal---color--primary-500: #00B494;
  --teal---color--primary-600: #009A8D;
  --teal---color--primary-700: #008081;
  --teal---color--primary-800: #005D68;
  --teal---color--primary-900: #004556;
  --green---color--success-100: #EFFDD4;
  --green---color--success-200: #DBFBAB;
  --green---color--success-300: #BEF37F;
  --green---color--success-400: #A1E75E;
  --green---color--success-500: #77D82D;
  --green---color--success-600: #5AB920;
  --green---color--success-700: #419B16;
  --green---color--success-800: #2B7D0E;
  --green---color--success-900: #1C6708;
  --blue---color--info-100: #CEECFF;
  --blue---color--info-200: #9DD6FF;
  --blue---color--info-300: #6DBBFF;
  --blue---color--info-400: #48A2FF;
  --blue---color--info-500: #0C79FF;
  --blue---color--info-600: #085DDB;
  --blue---color--info-700: #0645B7;
  --blue---color--info-800: #033093;
  --blue---color--info-900: #02227A;
  --yellow---color--warning-100: #FFF7CC;
  --yellow---color--warning-200: #FFED99;
  --yellow---color--warning-300: #FFE066;
  --yellow---color--warning-400: #FFD33F;
  --yellow---color--warning-500: #FFBF00;
  --yellow---color--warning-600: #DB9E00;
  --yellow---color--warning-700: #B77F00;
  --yellow---color--warning-800: #936300;
  --yellow---color--warning-900: #7A4E00;
  --red---color--danger-100: #FFDFD3;
  --red---color--danger-200: #FFB9A9;
  --red---color--danger-300: #FF8A7E;
  --red---color--danger-400: #FF5E5D;
  --red---color--danger-500: #FF283A;
  --red---color--danger-600: #DB1D3E;
  --red---color--danger-700: #B7143F;
  --red---color--danger-800: #930C3C;
  --red---color--danger-900: #7A073A;
  /* Effect styles */
  --shadow50: 0px 4.75px 14.25px 0px rgba(8, 18, 26, 0.06);
  --shadow100: 0px 4.75px 14.25px 0px rgba(8, 18, 26, 0.12);
  --shadow200: 0px 4.75px 14.25px 0px rgba(8, 18, 26, 0.24);
  --shadow300: 0px 4.75px 14.25px 0px rgba(8, 18, 26, 0.48);
  /* @link https://utopia.fyi/type/calculator?c=375,16,1.2,960,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.64rem, calc(0.73rem + -0.15vw), 0.69rem);
  --step--1: clamp(0.80rem, calc(0.85rem + -0.09vw), 0.83rem);
  --step-0: clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);
  --step-1: clamp(1.20rem, calc(1.17rem + 0.14vw), 1.25rem);
  --step-2: clamp(1.44rem, calc(1.36rem + 0.34vw), 1.56rem);
  --step-3: clamp(1.73rem, calc(1.58rem + 0.62vw), 1.95rem);
  --step-4: clamp(2.07rem, calc(1.84rem + 1.01vw), 2.44rem);
  --step-5: clamp(2.49rem, calc(2.13rem + 1.54vw), 3.05rem);
}

* {
  box-sizing: border-box;
  color: var(--black);
}

body {
  font-family: 'Lato', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
  --border: 1px solid #efefef;
  --padding: calc(1rem * 1.4);
  --padding-sm: calc(1rem * 1);
  --border-thick: 0px;
  letter-spacing: 0.1em;
  margin: 0;
}

main {
  padding: 1rem;
}

a {
  transition: 0.5s ease;
}

a * {
  transition: 0.5s ease;
}

a:hover {
  opacity: 0.7;
  cursor: pointer;
  transition: 0.5s ease;
}

a:hover .item__thumbnail__img {
  box-shadow: var(--shadow50);
  transition: 0.5s ease;
}

img {
  max-width: 100%;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1em;
  letter-spacing: 0.08em;
}

h1, h2, h3 {
  letter-spacing: 0.12em;
  line-height: 1.5;
  font-weight: 700;
}

.content_container {
  margin: 0 auto;
}

.wrapper {
  border-width: var(--border-thick);
  border: var(--border-thick) solid;
  padding: var(--padding);
}

/* Box
-----------------------------------------------------------------------*/
.box {
  display: block;
  padding: var(--padding);
  border-width: var(--border-thick);
  border: var(--border-thick) solid #efefef;
  /* ↓ For high contrast mode */
  outline: var(--border-thick) solid transparent;
  outline-offset: calc(var(--border-thick) * -1);
  text-decoration: none;
}

/* The Stack
-----------------------------------------------------------------------*/
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  --space: 3rem;
}

.stack>*+* {
  margin-top: var(--space);
}

.stack>.heading--h2+.heading--h3 {
  margin-top: 0;
}

.stack>.heading--h2+.paragraph {
  margin-top: 0;
}

/* The Center
-----------------------------------------------------------------------*/
.center {
  box-sizing: content-box;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 60rem;
  /* ↓ Intrinsic Centering: That is, centering elements based on their natural, content-based widths. */
  /* display: flex;
  flex-direction: column;
  align-items: center; */

  /* ↓ Gutters (i.e. 1em) */
  /* padding-left: 1em;
  padding-right: 1em; */
}

/* The Cluster
-----------------------------------------------------------------------*/
.cluster {
  --space: 1rem;
  overflow: hidden;
}

.cluster>* {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: calc(var(--space) / 2 * -1);
}

.cluster>*>* {
  margin: calc(var(--space) / 2);
}

/* The Sidebar
-----------------------------------------------------------------------*/

/* ↓ targets the intermediary wrapper */
.sidebar {
  overflow: hidden;
  --space: 1em;
  --side-width: 20rem;
  --content-min: 50%;
}

.sidebar>* {
  display: flex;
  flex-wrap: wrap;
}

.sidebar>*>* {
  flex-basis: var(--side-width);
  flex-grow: 1;
  /* ↓ applies to both elements */
}

/* ↓ if is a right sidebar (side: right) -> :first-child */
.sidebar>*> :last-child {
  /* ↓ grow from nothing */
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(var(--content-min) - var(--space));
}

/* The Switcher
-----------------------------------------------------------------------*/
.switcher {
  --threshold: 30rem;
  --space: 1rem;
  --large: calc(1 + 7 / 10);
}

.switcher>* {
  display: flex;
  flex-wrap: wrap;
  /* ↓ Multiply by -1 to make negative */
  margin: calc(var(--space) / 2 * -1);
}

.switcher>*>* {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - (100% - var(--space))) * 999);
  /* ↓ Half the value to each element, combining to make the whole */
  margin: calc(var(--space) / 2);
}

/* .switcher > * > :nth-child(1) {
  flex-grow: var(--large);
} */

.switcher>*> :nth-last-child(n + 4),
.switcher>*> :nth-last-child(n + 4)~* {
  flex-basis: 100%;
}

/* The Cover
-----------------------------------------------------------------------*/
.cover {
  --padding: 1rem;
  --min-height: 50vh;
  --space: 1rem;
  display: flex;
  flex-direction: column;
  min-height: var(--min-height);
  /* ↓ noPad padding: 0; */
  padding: var(--padding);
}

.cover>* {
  margin-top: var(--space);
  margin-bottom: var(--space);
}

/* ↓ h2 is the centered selector but can be any selector */
.cover> :first-child:not(h2) {
  margin-top: 0;
}

.cover> :last-child:not(h2) {
  margin-bottom: 0;
}

/* ↓ h2 is the centered selector but can be any selector */
.cover>h2 {
  margin-top: auto;
  margin-bottom: auto;
}

/* The Grid
-----------------------------------------------------------------------*/
.grid {
  --min: 15rem;
  --space: 1rem;
  align-content: start;
  display: grid;
  gap: var(--space);
  grid-template-columns: 100%;
}

/* needs javascript for when the container size is wider than the grid width */
.grid.aboveMin {
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
}

/* The Frame
-----------------------------------------------------------------------*/
.frame {
  padding-bottom: calc(var(--n) / var(--d) * 100%);
  position: relative;
}

.frame916 {
  --n: 9;
  --d: 16;
}

.frame43 {
  --n: 3;
  --d: 4;
}

.frame-square {
  --n: 1;
  --d: 1;
}

.frame>* {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame>img,
.frame>video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The Reel
-----------------------------------------------------------------------*/

.reel {
  --space: 1rem;
  --itemWidth: auto;
  --height: auto;
  --thumbColor: #fff;
  display: flex;
  /* ↓ For images, which may be very large or use differing aspect ratios, we may want to set the Reel’s height. */
  height: var(--height);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--thumbColor) var(--mono---gray-100);
}

.reel::-webkit-scrollbar {
  height: 0.5rem;
}

.reel::-webkit-scrollbar-track {
  background-color: var(--mono---gray-100);
  border-radius: 12px;
}

.reel::-webkit-scrollbar-thumb {
  box-shadow: var(--shadow100);
  border-radius: 100px;
  border-radius: 12px;
  border-right: 2px solid transparent; /* 透明なボーダーをつける */
  border-left: 2px solid transparent; /* 透明なボーダーをつける */
  background-clip: padding-box; /* 背景を切り取る */
  background-color: var(--mono---gray-400);
  background-image: linear-gradient(var(--mono---gray-100) 0,
      var(--mono---gray-100) 0.125rem,
      var(--thumbColor) 0.125rem,
      var(--thumbColor) 0.375rem,
      var(--mono---gray-100) 0.375rem);
}

*+.reel {
  margin-top: 3rem;
}

.reel>* {
  flex: 0 0 var(--itemWidth);
}

.reel>img {
  height: 32rem;
  flex-basis: auto;
  width: auto;
}

.reel>.box {
  width: 85%;

}

.reel>*+* {
  margin-left: var(--space);
}

.reel.overflowing {
  padding-bottom: var(--space);
}

/* sndhryk
-----------------------------------------------------------------------*/

.header-image {
  height: 2.5rem;
}

/* 見出しのスタイル */

.heading__wrapper {
  margin-bottom: 6rem;
}

.items+.heading__wrapper {
  margin-top: 8rem
}

.heading--top {
  margin: 6rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  align-self: stretch;
  color: var(--black);
  text-align: left;

  /* Type/Max/Strong/Step 5 */

  font-size: var(--step-3);
  font-style: normal;
  font-weight: 700;
  line-height: 175%;
  /* 4.57763rem */
  letter-spacing: 0.08em;
}

.heading--h1 {
  display: block;
  margin: 5rem 0 2rem;
  color: var(--black);
  text-align: left;

  /* Type/Max/Strong/Step 4 */
  font-size: var(--step-5);
  font-style: normal;
  font-weight: 700;
  line-height: 200%;
  /* 3.66213rem */
  letter-spacing: 0.08em;
}

.heading--h2 {
  display: block;
  margin: 8rem 0rem 3rem;
  gap: 0.625rem;
  color: var(--black);
  text-align: left;

  /* Type/Max/Strong/Step 3 */
  font-size: var(--step-4);
  font-style: normal;
  font-weight: 700;
  line-height: 200%;
  /* 2.92969rem */
  letter-spacing: 0.08em;
}



.heading--h3 {
  display: block;
  margin-top: 5rem;
  color: var(--black);
  text-align: left;

  /* Type/Max/Strong/Step 2 */
  font-size: var(--step-3);
  font-style: normal;
  font-weight: 700;
  line-height: 200%;
  /* 2.92969rem */
  letter-spacing: 0.08em;
}

.heading--h4 {
  display: block;
  margin-top: 6rem;
  color: var(--black);
  text-align: left;

  /* Type/Max/Strong/Step 1 */
  font-size: var(--step-2);
  font-style: normal;
  font-weight: 700;
  line-height: 200%;
  /* 2.92969rem */
  letter-spacing: 0.08em;
}

.heading--h5 {
  display: block;
  margin-top: 2rem;
  color: var(--black);
  text-align: left;

  /* Type/Max/Strong/Step 1 */
  font-size: var(--step-0);
  font-style: normal;
  font-weight: 700;
  line-height: 200%;
  /* 2.92969rem */
  letter-spacing: 0.08em;
}

/* ヘッダーのスタイル */
header {
  width: 100%;
  z-index: 100;
  padding: 1rem;
  align-self: stretch;
}

/* テキストのスタイル */

.large_paragraph {
  text-align: left;
  color: var(--black);

  /* Type/Max/Prose/Step 1 */
  font-size: var(--step-1);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 2.125rem */
  letter-spacing: 0.12em;
}

.paragraph {
  text-align: left;
  color: var(--black);

  /* Type/Max/Prose/Step 1 */
  font-size: var(--step-0);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 2.125rem */
  letter-spacing: 0.08em;
}



/* フッターのスタイル */
footer {
  display: flex;
  margin-top: 12rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.footer-wrapper {
  display: flex;
  background: var(--white);
  padding: 2rem;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  align-self: stretch;
  border-top: 1px solid var(--mono---gray-100);
}

.footer__note {
  color: var(--mono---gray-400);

  /* Type/Max/Default/Step -1 */
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 1.2rem */
  letter-spacing: 0.08em;
}

.footer__navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.footer__caption {
  color: var(--black);

  /* Type/Max/Default/Step 0 */
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 1.5rem */
  letter-spacing: 0.08em;
}

.footer__aside {
  text-align: center;
}

nav ul {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

nav li {
  display: flex;
  padding-bottom: 0px;
  align-items: flex-start;
  gap: 0.625rem;
}

nav a {
  color: var(--black);

  /* Type/Max/Strong/Step 1 */
  font-size: var(--step-1);
  font-style: normal;
  font-weight: 700;
  line-height: 200%;
  /* 2.34375rem */
  letter-spacing: 0.08em;
  text-decoration: none;
}

.current :after {
  content: "";
  margin: 0 auto;
  display: block;
  width: 100%;
  height: 0.25rem;
  border-radius: 100px;
  margin-top: 0.25em;
  background: var(--main);
}

/* メインコンテンツのスタイル */

/* about */

.about__profile>*+* {
  margin-top: 1rem;
}

.about__profile {

  /* 2.125rem */
  letter-spacing: 0.1rem;
}

.about__sns {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.about__sns img {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.about__sns img:hover {
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: grayscale(0);
}

.about__personality__labels {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.about__personality__labels > *{
  margin: 0;
}

.about__personality__label--mbti {
  display: flex;
  height: 2rem;
  padding: 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--mono-gray-100, #E1E1E5);
  background: #FFF;

  /* Type/Max/Prose/Step 0 */
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 2.125rem */
  letter-spacing: 0.08em;
}

.about__personality__label--strength {
  display: flex;
  height: 2rem;
  padding: 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--mono-gray-100, #E1E1E5);
  background: var(--mono-gray-50, #EDEDF2);

  /* Type/Max/Prose/Step 0 */
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 2.125rem */
  letter-spacing: 0.08em;
}

.about__personality__labels+.about__personality__labels {
  margin-top: 2rem;
}

.about__thumbnail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.about__thumbnail>.heading--h2 {
  margin: 0;

  /* Type/Max/Strong/Step 2 */
  font-size: var(--step-2);
  font-style: normal;
  font-weight: 700;
  line-height: 200%;
  /* 2.92969rem */
  letter-spacing: 0.08em;
}

.img__profile img {
  box-shadow: var(--shadow300) inset;
  border-radius: 100rem;
  width: 10rem;
  height: 10rem;
}

/* Works */

.items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}

.item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-direction: row-reverse;
  text-decoration: none;
  pointer-events: none;
}

.item:has(.done) {
  pointer-events: auto;
}

.item:hover .item__readmore {
  background-color: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
  ;
  transition: 0.5s ease;
}

.item__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  flex-basis: 0;
  flex-grow: 1;
}

.item__outline {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-direction: column;
  text-decoration: none;
}

.item__heading {
  color: var(--black);

  /* Type/Max/Strong/Step 3 */
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 130%;
  /* 2.92969rem */
  letter-spacing: 0.08em;
}

.item__lead {
  color: var(--black);

  /* Type/Max/Prose/Step 0 */
  font-size: var(--step-0);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 2.125rem */
  letter-spacing: 0.08em;
}

.item__labels {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 0.5rem;
  align-self: stretch;
  flex-wrap: wrap;
}

.item__label--year {
  display: flex;
  height: 2rem;
  padding: 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--mono-gray-100, #E1E1E5);
  background: #FFF;
  font-weight: bold;

  /* Type/Max/Prose/Step 0 */
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 2.125rem */
  letter-spacing: 0.08em;
}

.item__label--skill {
  display: flex;
  height: 2rem;
  padding: 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--mono-gray-100, #E1E1E5);
  background: var(--mono-gray-50, #EDEDF2);

  /* Type/Max/Prose/Step 0 */
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 2.125rem */
  letter-spacing: 0.05rem;
}

.item__thumbnail__img {
  outline: var(--border-thick) solid;
  display: block;
  outline-offset: calc(var(--border-thick) * -1);
  margin-inline: auto;
  border-radius: 1.5rem;

  /* shadow100 */
  box-shadow: var(--shadow200);
}

.item__readmore__container {
  display: flex;
  justify-content: flex-start;
  align-self: stretch;
}

.item__readmore {
  border: 1px solid var(--black);
  ;
  color: var(--mono---gray-100);
  background-color: var(--black);
  padding: 0.1rem 0.4rem;
  border-radius: 0.1rem;

  /* Type/Max/Prose/Step 0 */
  font-size: var(--step-0);
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  /* 2.125rem */
  letter-spacing: 0.08em;

  visibility: hidden;
  display: inline;
}

.done {
  visibility: visible;
}

.works__img {
  border-radius: 1.5rem;
  /* shadow100 */
  box-shadow: var(--shadow100);
}

.works__img__caption {
  margin-top: 1rem;
  color: var(--mono---gray-600);

  /* Type/Max/Prose/Step 0 */
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 400;
  line-height: 175%;
  /* 2.125rem */
  letter-spacing: 0.08em;

}

.works__list {
  list-style-type: disc !important;
  padding: 1.5rem;
  background-color: var(--mono---gray-50);
  border-radius: 1.5rem;
}

.works__list li {
  padding: .3em .3em .3em 0;
}

.works__list li::marker {
  color: #00b4ab;
}

/* アニメーションここから */

/***上にかぶせる背景***/
.mask {
  position: fixed;
  /*固定表示*/
  top: 0;
  left: 0;
  width: 100vw;
  /*画面幅*/
  height: 100vh;
  /*画面の高さ*/
  background-color: var(--white);
  /*背景色*/
  z-index: 999;
  /*最前面に*/
  animation: fadeOut 0.8s forwards;
  /*フェードアウト*/
  animation-delay: 1.5s;
  /*ロゴ画像のアニメーション後に*/
}

/*フェードアウトアニメーション*/
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/***ロゴ画像***/
.mask img {
  position: absolute;
  width: 8rem;
  height: 8rem;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: bound 0.5s forwards;
  /*任意のアニメーション*/
  animation-delay: 0.6s;
  /*好みで遅延*/
}

/*鼓動する*アニメーション*/
@keyframes bound {
  30% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0.9);
  }
}

/* アニメーションここまで */

/* ツールチップここから */

.tooltip {
  /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  font-size: 0.9em;
}

.description_bottom {
  /* ツールチップのスタイル */
  width: 150px;
  /* 横幅 */
  position: absolute;
  top: 80%;
  /* Y軸の位置 */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  /* テキストとの距離 */
  padding: 8px;
  border-radius: 8px;
  /* 角の丸み */
  background-color: var(--mono---gray-500);
  backdrop-filter: saturate(180%) blur(20px);
  background: var(--localnav-background-stuck, rgba(20, 20, 20, 0.5));
  font-size: 0.7em;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  visibility: hidden;
  /* ツールチップを非表示に */
  opacity: 0;
  /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all;
  /* マウスオーバー時のアニメーション速度 */
}

.tooltip:hover .description_bottom {
  /* マウスオーバー時のスタイル */
  top: 100%;
  /* Y軸の位置 */
  visibility: visible;
  /* ツールチップを表示 */
  opacity: 1;
  /* 不透明度を100％に */
}

/* ツールチップここまで */