@charset "UTF-8";
:root {
  --breakPoint-tablet-ls: 1024px;
  --breakPoint-tablet: 768px;
  --breakPoint-sp-l: 480px;
  --breakPoint-sp: 375px;
  --breakPoint-minWidth: 320px;
}

:root {
  --clr-base-darkred: #c2180d;
  --clr-base-darkred-rgb: 194, 24, 13;
  --clr-base-red: #fb261f;
  --clr-base-red-rgb: 251, 38, 31;
  --clr-base-orange: #f39800;
  --clr-base-orange-rgb: 243, 152, 0;
  --clr-base-yellow: #ffe800;
  --clr-base-yellow-rgb: 255, 232, 0;
  --clr-base-green: #6cc183;
  --clr-base-green-rgb: 108, 193, 131;
  --clr-base-blue: #3f8bbe;
  --clr-base-blue-rgb: 63, 139, 190;
  --clr-base-aqua: #76fde0;
  --clr-base-aqua-rgb: 118, 253, 224;
  --clr-base-purple: #5137a1;
  --clr-base-purple-rgb: 81, 55, 161;
  --clr-base-white: #fff;
  --clr-base-white-rgb: 255, 255, 255;
  --clr-base-gray: #808080;
  --clr-base-gray-rgb: 128, 128, 128;
  --clr-base-black: #191919;
  --clr-base-black-rgb: 25, 25, 25;
  --clr-dark-darkblue: #005ed4;
  --clr-dark-darkblue-rgb: 0, 94, 212;
  --clr-light-lightgreen: #88e788;
  --clr-light-lightgreen-rgb: 136, 231, 136;
  --clr-light-lightseagreen: #20b2aa;
  --clr-light-lightseagreen-rgb: 32, 178, 170;
  --clr-light-lightyellow: #fcfc55;
  --clr-light-lightyellow-rgb: 252, 252, 85;
  --clr-light-lightorange: #ffdbbb;
  --clr-light-lightorange-rgb: 255, 219, 187;
  --clr-light-lightpink: #ffb5c0;
  --clr-light-lightpink-rgb: 255, 181, 192;
  --clr-light-lightblue: #90d5ff;
  --clr-light-lightblue-rgb: 144, 213, 255;
  --clr-light-lightpurple: #dab1da;
  --clr-light-lightpurple-rgb: 218, 177, 218;
  --clr-light-lightgray: #f2f2f2;
  --clr-light-lightgray-rgb: 242, 242, 242;
  --clr-pastel-pastelgreen: #80ef80;
  --clr-pastel-pastelgreen-rgb: 128, 239, 128;
  --clr-pastel-pastelyellow: #ffee8c;
  --clr-pastel-pastelyellow-rgb: 255, 238, 140;
  --clr-pastel-pastelorange: #ffc067;
  --clr-pastel-pastelorange-rgb: 255, 192, 103;
  --clr-pastel-pastelpink: #ffc5d3;
  --clr-pastel-pastelpink-rgb: 255, 197, 211;
  --clr-pastel-pastelred: #ff746c;
  --clr-pastel-pastelred-rgb: 255, 116, 108;
  --clr-pastel-pastelblue: #b3ebf2;
  --clr-pastel-pastelblue-rgb: 179, 235, 242;
  --clr-pastel-pastelpurple: #b39eb5;
  --clr-pastel-pastelpurple-rgb: 179, 158, 181;
}

/*
Theme Name: 0310510 Portfolio
Description: 0310510 Portfolio 2025
Author: Masato Goto
Author URI: https://re-side.net/
Version: 2.2.1
*/
:root {
  --gnav-height: 72px;
  --header-margin-value: 8px;
  --element-width: calc(100% - (var(--element-marginColumn) * 2));
  --element-minWidth: calc(var(--breakPoint-minWidth) - (var(--element-marginColumn) * 2));
  --element-marginColumn: 16px;
  --border-radius-xl-value: 32px;
  --border-radius-l-value: 24px;
  --border-radius-value: 16px;
  --border-radius-s-value: 8px;
  --border-radius-xs-value: 4px;
  --box-shadow-color: rgba(25, 25, 25, 0.16);
  --box-shadow-value: 0 2px 5px var(--box-shadow-color);
  --text-shadow-color: rgba(25, 25, 25, 0.16);
  --text-shadow-value: 0 1px 2px var(--text-shadow-color);
  --base-fontSize: 16px;
  --hover-opacity-value: 0.8;
  --hover-opacity-transition: 0.2s;
}

@media (max-width: 768px) {
  :root {
    --gnav-height: 48px;
    --base-fontSize: 15px;
  }
}
@media (max-width: 375px) {
  :root {
    --base-fontSize: 14px;
  }
}
/* ----------
JavaScript 判定
---------- */
.noscript-fallback {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.noscript-fallback-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--element-width);
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 16px;
  padding-bottom: 16px;
}
.noscript-fallback-text > p {
  text-align: center;
  line-height: 1.5;
  font-weight: 400;
  font-size: inherit;
}

/* JS 無効/読み込めない時 */
.no-js #globalHeader,
.no-js #globalFooter,
.no-js .main {
  display: none;
}
.no-js .noscript-fallback {
  display: block;
}

/* JS 有効時 */
.js-enabled .noscript-fallback {
  display: none;
}

.link.is-external::after {
  content: "\f08e";
  line-height: inherit;
  letter-spacing: initial;
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  font-size: 0.8em;
}
.link.is-external:not(.is-button)::after {
  padding-left: 0.2em;
}
.link.is-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: var(--border-radius-value);
  background: #3f8bbe;
  color: #fff;
  font-size: calc(var(--base-fontSize) - 1px);
  padding: 0.5em 16px;
}
.link.is-button.is-external {
  padding-right: 28px;
}
.link.is-button.is-external::after {
  position: absolute;
  right: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover::after,
  .link:hover .link__text {
    opacity: 0.8;
    transition: opacity 0.24s 0s ease-out;
  }
}
.link__text {
  line-height: 1.32;
  font-weight: 500;
  font-size: inherit;
  color: inherit;
}

body {
  position: relative;
  width: 100%;
  min-width: 320px;
  font-family: "Montserrat", "M PLUS Rounded 1c", sans-serif;
  font-optical-sizing: auto;
  font-size: var(--base-fontSize);
  letter-spacing: 1.2px;
  -webkit-text-size-adjust: 100%;
  background: #f2f2f2;
  color: #191919;
}

#globalHeader {
  z-index: 99;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.global__header.global__nav-drawermenu-open .global__nav-background {
  height: calc(100dvh - 16px);
  background: white;
  transition: height var(--gnav-flyout-rate) 0s ease-out, background var(--gnav-flyout-rate) 0s ease-out;
}
.global__header.global__nav-drawermenu-open .global__nav-drawermenu {
  visibility: visible;
  pointer-events: auto;
}
.global__header.global__nav-drawermenu-open .global__nav-drawermenu-trigger-button-bread--top {
  top: 22px;
  transform: rotate(45deg);
  background: #fb261f;
  transition: top 0.12s 0s linear, background 0.32s 0.12s ease-out, transform 0.32s 0.12s ease-out;
}
.global__header.global__nav-drawermenu-open .global__nav-drawermenu-trigger-button-bread--middle {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.12s linear, opacity 0.12s 0s linear;
}
.global__header.global__nav-drawermenu-open .global__nav-drawermenu-trigger-button-bread--bottom {
  top: 22px;
  transform: rotate(-45deg);
  background: #fb261f;
  transition: top 0.12s 0s linear, background 0.32s 0.12s ease-out, transform 0.32s 0.12s ease-out;
}
.global__header.global__nav-drawermenu-open .global__nav-drawermenu-item {
  opacity: 1;
  transform: translateY(0);
}
.global__header.global__nav-drawermenu-open .global__nav-curtain {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--gnav-flyout-rate) 0s ease-out;
}
.global__header:not(.global__nav-drawermenu-open) .global__nav-drawermenu {
  transition: visibility 0s var(--gnav-flyout-rate) linear;
}
.global__header:not(.global__nav-drawermenu-open) .global__nav-drawermenu-content {
  transition: height 0.44s 0.16s ease-out, background 0.2s 0.6s;
}
.global__header:not(.global__nav-drawermenu-open) .global__nav-drawermenu-trigger-button-bread--top, .global__header:not(.global__nav-drawermenu-open) .global__nav-drawermenu-trigger-button-bread--bottom {
  transition: top 0.12s 0.32s ease-out, background 0.32s 0s linear, transform 0.32s 0s linear;
}
.global__header:not(.global__nav-drawermenu-open) .global__nav-drawermenu-trigger-button-bread--middle {
  transition: opacity 0.12s 0.24s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .global__header:not(.global__nav-drawermenu-open) .global__nav-drawermenu-trigger-button {
    transition: background 0.16s 0s ease-out;
  }
  .global__header:not(.global__nav-drawermenu-open) .global__nav-drawermenu-trigger-button:hover {
    background: #fff;
    transition: background 0.24s 0s ease-out;
  }
}
.global__header:not(.global__nav-drawermenu-open) .global__nav-curtain {
  transition: visibility 0s var(--gnav-flyout-rate) linear, opacity var(--gnav-flyout-rate) 0s ease-out;
}
.global__footer {
  position: relative;
  padding-top: 32px;
  padding-bottom: 32px;
}
.global__footer-greeting {
  text-align: center;
  line-height: 1.5;
  font-size: 1.2em;
  margin-bottom: 8px;
  padding-right: 16px;
  padding-left: 16px;
}
.global__footer small {
  display: block;
  line-height: 1.32;
  text-align: center;
  padding-right: 16px;
  padding-left: 16px;
}
.global__nav {
  container-type: inline-size;
  container-name: global-nav-container;
  position: relative;
}
.global__nav-background {
  z-index: 2;
  position: relative;
  width: calc(100% - var(--header-margin-value) * 2);
  max-width: 1024px;
  height: var(--gnav-height);
  border-radius: calc(var(--gnav-height) / 2);
  box-shadow: var(--box-shadow-value);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  transition: height var(--gnav-flyout-rate) 0s ease-out, background var(--gnav-flyout-rate) 0s ease-out;
  margin-top: var(--header-margin-value);
  margin-right: auto;
  margin-left: auto;
}
.global__nav-header {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--gnav-height);
  border-radius: inherit;
}
.global__nav-identity {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  max-height: var(--gnav-height);
  border-radius: inherit;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .global__nav-identity:has(.global__nav-identity-link) {
    transition: background 0.16s 0s ease-out;
  }
  .global__nav-identity:has(.global__nav-identity-link):hover {
    background: #fff;
    transition: background 0.24s 0s ease-out;
  }
  .global__nav-identity:has(.global__nav-identity-link):hover .global__nav-title-text, .global__nav-identity:has(.global__nav-identity-link):hover .global__nav-identity-image {
    filter: opacity(0.8);
    transform: scale(1.02);
    transition: all 0.24s 0s ease-out;
  }
  .global__nav-identity:has(.global__nav-identity-link) .global__nav-title-text, .global__nav-identity:has(.global__nav-identity-link) .global__nav-identity-image {
    transition: all 0.16s 0s ease-out;
  }
}
.global__nav-identity-image {
  opacity: 0;
  transform: translateY(calc(-1 * var(--gnav-height)));
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 1/1;
  display: block;
  height: var(--gnav-height);
  content: "";
  border-radius: calc(var(--gnav-height) / 2);
  background-size: contain;
  background-image: url("./assets/img/masatogoto.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}
.global__nav-identity-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
}
.global__nav-title {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  font-weight: 600;
  font-size: 18px;
  overflow: visible;
}
@container global-nav-container (max-width: 480px) {
  .global__nav-title {
    font-size: 16px;
  }
}
.global__nav-title-text {
  display: inline-block;
  line-height: inherit;
  font-weight: inherit;
  font-size: inherit;
  padding-right: 16px;
  padding-left: 16px;
  will-change: transform;
}
.global__nav-menu {
  position: absolute;
  right: 16px;
  display: flex;
  align-items: center;
}
@container global-nav-container (max-width: 768px) {
  .global__nav-menu {
    right: 48px;
  }
}
.global__nav-item {
  position: relative;
  line-height: 1.32;
  border-radius: var(--border-radius-value);
  color: #191919;
  padding: 8px;
}
.global__nav-item:has(.global__nav-item-link) {
  padding: 0;
}
.global__nav-item:has(.global__nav-item-link) .global__nav-item-link {
  padding: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .global__nav-item:has(.global__nav-item-link) {
    transition: background 0.16s 0s ease-out;
  }
  .global__nav-item:has(.global__nav-item-link):hover {
    background: #fff;
    transition: background 0.24s 0s ease-out;
  }
  .global__nav-item:has(.global__nav-item-link):hover .global__nav-item-text {
    opacity: 0.8;
    transition: all 0.24s 0s ease-out;
  }
  .global__nav-item:has(.global__nav-item-link) .global__nav-item-text {
    transition: all 0.16s 0s ease-out;
  }
}
@container global-nav-container (max-width: 768px) {
  .global__nav-item:not(.global__nav--instagram) {
    display: none;
  }
}
.global__nav-item-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  color: inherit;
}
.global__nav-item-text {
  font-weight: 500;
}
.global__nav-curtain {
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  background: rgba(25, 25, 25, 0.2);
}
.global__nav--instagram {
  padding: 0;
}
.global__nav--instagram:has(.global__nav-item-link) .global__nav-item-link {
  padding: 0;
}
.global__nav--instagram .global__nav-item-link {
  width: 48px;
  height: 48px;
}
@container global-nav-container (max-width: 768px) {
  .global__nav--instagram .global__nav-item-link {
    width: 36px;
    height: 36px;
  }
}
.global__nav--instagram .global__nav-item-text::after {
  content: "\f16d";
  display: block;
  line-height: 1;
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 32px;
  letter-spacing: initial;
}
@container global-nav-container (max-width: 768px) {
  .global__nav--instagram .global__nav-item-text::after {
    font-size: 24px;
  }
}
.global__nav-drawermenu {
  /* 上→下 */
  --item-opacity-tsDuration-normal: 0.44s;
  --item-opacity-tsDuration-step-normal: 0s;
  --item-transform-tsDuration-normal: 0.44s;
  --item-transform-tsDuration-step-normal: 0s;
  --item-opacity-tsDelay-normal: 0s;
  --item-opacity-tsDelay-step-normal: 0.06s;
  --item-transform-tsDelay-normal: 0s;
  --item-transform-tsDelay-step-normal: 0s;
  /* 下→上 */
  --item-opacity-tsDuration-reverse: 0.32s;
  --item-opacity-tsDuration-step-reverse: 0s;
  --item-transform-tsDuration-reverse: 0.32s;
  --item-transform-tsDuration-step-reverse: 0s;
  --item-opacity-tsDelay-reverse: 0s;
  --item-opacity-tsDelay-step-reverse: 0.04s;
  --item-transform-tsDelay-reverse: 0.16s;
  --item-transform-tsDelay-step-reverse: 0.04s;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.global__nav-drawermenu-content {
  position: absolute;
  top: var(--gnav-height);
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
}
.global__nav-drawermenu-list {
  font-size: clamp(1rem, 0.7615rem + 1.0178vw, 1.25rem);
  padding-top: 0.5em;
}
.global__nav-drawermenu-item {
  opacity: 0;
  transform: translateY(-1em);
  font-size: inherit;
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
  transition-duration: calc(var(--item-opacity-tsDuration, 0s) + var(--item-number, 0) * var(--item-opacity-tsDuration-step, 0s)), calc(var(--item-transform-tsDuration, 0s) + var(--item-number, 0) * var(--item-transform-tsDuration-step, 0s));
  transition-delay: calc(var(--item-opacity-tsDelay, 0s) + var(--item-number, 0) * var(--item-opacity-tsDelay-step, 0s)), calc(var(--item-transform-tsDelay, 0s) + var(--item-number, 0) * var(--item-transform-tsDelay-step, 0s));
}
.global__nav-drawermenu-item-link {
  display: block;
  color: inherit;
}
.global__nav-drawermenu-item-text {
  display: flex;
  align-items: center;
  min-height: 40px;
  line-height: 1.4;
  font-weight: 500;
  font-size: inherit;
  color: #191919;
  padding: 0.4em 16px;
}
.global__nav-drawermenu-trigger {
  display: none;
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
}
@container global-nav-container (max-width: 768px) {
  .global__nav-drawermenu-trigger {
    display: block;
  }
}
.global__nav-drawermenu-trigger-button {
  width: 48px;
  height: 48px;
  border-radius: inherit;
}
.global__nav-drawermenu-trigger-button-bread {
  position: absolute;
  left: 13px;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: #191919;
}
.global__nav-drawermenu-trigger-button-bread--top {
  top: 15px;
}
.global__nav-drawermenu-trigger-button-bread--middle {
  top: 23px;
}
.global__nav-drawermenu-trigger-button-bread--bottom {
  top: 31px;
}
.global__nav-drawermenu-noscroll {
  overflow: hidden;
}

.main {
  container-type: inline-size;
  container-name: main-container;
  padding-top: var(--header-default-height);
}

.section {
  container-type: inline-size;
  container-name: section-container;
  position: relative;
}
.section__background {
  position: relative;
  width: calc(100% - var(--header-margin-value) * 2);
  max-width: 1024px;
  box-shadow: var(--box-shadow-value);
  border-radius: calc(var(--gnav-height) / 2);
  background: #fff;
  margin-right: auto;
  margin-left: auto;
}
.section__container {
  position: relative;
  width: 100%;
  max-width: 800px;
  border-radius: inherit;
  margin-right: auto;
  margin-left: auto;
  padding-top: 24px;
  padding-bottom: 16px;
}
@container main-container (max-width: 480px) {
  .section__container {
    padding-top: 16px;
    padding-bottom: 0;
  }
}
.section__title {
  line-height: 1.4;
  font-weight: 600;
  font-size: 1.6em;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
}
.section__title h2 {
  line-height: inherit;
  font-weight: inherit;
  font-size: inherit;
}
.section__content {
  position: relative;
  width: 100%;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
}
.section__subtitle {
  line-height: 1.4;
  font-weight: 500;
  font-size: 1.32em;
}

.portfolio__main .profile__introduce {
  text-align: center;
  padding: 3em 16px;
}
.portfolio__main .profile__introduce > p {
  line-height: 1.6;
}
.portfolio__main .profile__introduce > p:not(:last-of-type) {
  margin-bottom: 0.2em;
}
.portfolio__main .profile__image {
  width: 100%;
}
.portfolio__main .profile__image picture {
  display: block;
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 160px;
  background-size: contain;
  background-image: url("./assets/img/masatogoto.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: auto;
  margin-left: auto;
}
.portfolio__main .carrier__content {
  padding: 0;
}
.portfolio__main .carrier__description > p {
  line-height: 1.6;
}
.portfolio__main .carrier__description > p:not(:last-of-type) {
  margin-bottom: 0.2em;
}
.portfolio__main .project__head {
  font-size: 18px;
}
@container acm-item-container (max-width: 480px) {
  .portfolio__main .project__head {
    font-size: 16px;
  }
}
.portfolio__main .project__content:has(.project__slider) {
  display: grid;
  grid-template-areas: "summary slider" "desc desc";
  -moz-column-gap: 16px;
       column-gap: 16px;
}
@container acm-item-container (max-width: 768px) {
  .portfolio__main .project__content:has(.project__slider) {
    grid-template-areas: "slider" "summary" "desc";
  }
}
.portfolio__main .project__content > *:not(:last-child) {
  margin-bottom: 8px;
}
.portfolio__main .project__section {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.portfolio__main .project__section:not(:last-child) {
  margin-bottom: 8px;
}
.portfolio__main .project__section::before {
  line-height: 1.2;
  color: #808080;
  font-weight: 500;
  font-size: 0.8em;
  letter-spacing: initial;
}
.portfolio__main .project__summary {
  grid-area: summary;
}
.portfolio__main .project__summary-list {
  display: flex;
  flex-flow: row wrap;
  gap: 4px;
}
.portfolio__main .project__summary-list:not(:last-of-type) {
  margin-bottom: 4px;
}
.portfolio__main .project__summary-item {
  position: relative;
  line-height: 1.32;
  border-radius: var(--border-radius-value);
  font-weight: 500;
  font-size: 0.8em;
  padding: 0.32em 8px;
}
.portfolio__main .project__summary-ps::before {
  content: "役割";
}
.portfolio__main .project__summary-ps-item {
  background: #6cc183;
  color: #fff;
}
.portfolio__main .project__summary-la {
  display: none;
}
.portfolio__main .project__summary-la::before {
  content: "言語";
}
.portfolio__main .project__summary-la-item {
  background: #f39800;
  color: #fff;
}
.portfolio__main .project__summary-fc::before {
  content: "機能";
}
.portfolio__main .project__summary-fc-item {
  background: #ffe800;
  color: rgba(25, 25, 25, 0.9);
}
.portfolio__main .project__summary-pf::before {
  content: "プラットフォーム";
}
.portfolio__main .project__summary-pf-item {
  background: #3f8bbe;
  color: #fff;
}
.portfolio__main .project__summary-cms::before {
  content: "CMS";
}
.portfolio__main .project__summary-cms-item {
  background: #3f8bbe;
  color: #fff;
}
.portfolio__main .project__summary-tl::before {
  content: "ツール";
}
.portfolio__main .project__summary-tl-item {
  background: #808080;
  color: #fff;
}
.portfolio__main .project__summary-fw::before {
  content: "フレームワーク";
}
.portfolio__main .project__summary-fw-item {
  background: #fb261f;
  color: rgba(255, 255, 255, 0.9);
}
.portfolio__main .project__slider {
  grid-area: slider;
}
.portfolio__main .project__slider-list {
  width: 100%;
  max-width: 240px;
}
.portfolio__main .project__slider-item {
  width: 100%;
  aspect-ratio: 3/2;
}
.portfolio__main .project__slider-item:first-of-type {
  background: red;
}
.portfolio__main .project__slider-item:nth-of-type(2) {
  background: gray;
}
.portfolio__main .project__slider-item:nth-of-type(3) {
  background: blue;
}
.portfolio__main .project__slider-item:nth-of-type(4) {
  background: yellow;
}
.portfolio__main .project__slider-item:last-of-type {
  background: orange;
}
.portfolio__main .project__description {
  grid-area: desc;
  line-height: 1.5;
  font-size: 0.9em;
}
.portfolio__main .project__description > p {
  line-height: inherit;
  font-size: inherit;
}
.portfolio__main .project__description > p:not(:last-of-type) {
  margin-bottom: 0.2em;
}
.portfolio__main .project__name {
  line-height: 1.4;
  font-weight: 500;
  font-size: 1.12em;
}
.portfolio__main .project__period {
  display: none;
  line-height: 1.32;
  font-weight: 500;
}
.portfolio__main .project__period::before {
  content: "期間";
}
.portfolio__main .project__industry {
  line-height: 1.32;
  font-weight: 400;
}
.portfolio__main .project__industry::before {
  content: "業種";
}
.portfolio__main .project__link {
  margin-top: 8px;
}
.portfolio__main .skill__content {
  padding: 0;
}
.portfolio__main .skill__list {
  display: flex;
  flex-flow: row wrap;
  gap: 4px;
}
.portfolio__main .skill__list:not(:last-of-type) {
  margin-bottom: 4px;
}
.portfolio__main .skill__list-la .skill__name {
  background: #f39800;
  color: #fff;
}
.portfolio__main .skill__list-pf .skill__name {
  background: #3f8bbe;
  color: #fff;
}
.portfolio__main .skill__list-tl .skill__name {
  background: #808080;
  color: #fff;
}
.portfolio__main .skill__list-lic .skill__name {
  background: #6cc183;
  color: #fff;
}
.portfolio__main .skill__item {
  position: relative;
}
.portfolio__main .skill__name {
  position: relative;
  display: inline-block;
  line-height: 1.32;
  border-radius: var(--border-radius-value);
  font-weight: 500;
  font-size: 0.9em;
  padding: 0.32em 8px;
}
.portfolio__main .skill__detail {
  text-align: center;
  line-height: 1.32;
  font-weight: 500;
  font-size: 0.8em;
  color: #808080;
}
.portfolio__section:first-of-type {
  padding-top: 8px;
}
.portfolio__section:not(:last-of-type) {
  margin-bottom: 16px;
}
.portfolio__section .acm-head {
  z-index: 2;
  position: sticky;
  top: var(--header-default-height);
  border-radius: calc(var(--gnav-height) / 2);
  background: #fff;
}
.portfolio__section .acm-content {
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
}

/* ----------
ACM
---------- */
:root {
  --acm-anchor-width: 48px;
  --acm-anchor-width-sp: 48px;
  --acm-anchor-height: 44px;
  --acm-anchor-height-sp: 40px;
  --acm-count-minWidth: var(--acm-anchor-width);
  --acm-count-minWidth-sp: var(--acm-anchor-width-sp);
  --acm-expanded-opacity-dulation: 0.44s;
  --acm-expanded-opacity-delay: 0.36s;
  --acm-expanded-transform-dulation: 0.36s;
  --acm-expanded-transform-delay: 0.2s;
  --acm-expanded-height-dulation: 0.2s;
  --acm-expanded-height-delay: 0s;
  --acm-collapsed-opacity-dulation: 0.2s;
  --acm-collapsed-opacity-delay: 0s;
  --acm-collapsed-transform-dulation: 0.56s;
  --acm-collapsed-transform-delay: 0s;
  --acm-collapsed-height-dulation: 0.36s;
  --acm-collapsed-height-delay: 0.2s;
}

.acm-expandable.acm-expanded .acm-anchor::after {
  content: "\f077";
}
.acm-expandable.acm-expanded .acm-content {
  transform: translateY(0);
  transition: transform var(--acm-expanded-transform-dulation) var(--acm-expanded-transform-delay) ease-out;
}
.acm-expandable.acm-expanded .acm-content-container {
  opacity: 1;
  transition: opacity var(--acm-expanded-opacity-dulation) var(--acm-expanded-opacity-delay) ease-out, max-height var(--acm-expanded-height-dulation) var(--acm-expanded-height-delay) ease-out;
}
.acm-expandable .acm-head:has(.acm-anchor):has(.acm-link):has(.acm-count) .acm-text {
  padding-right: 0;
}
.acm-expandable .acm-head:has(.acm-anchor):has(.acm-link):has(.acm-count) .acm-count-wrap {
  min-width: auto;
}
.acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):has(.acm-count) .acm-text {
  width: 100%;
}
.acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):has(.acm-count) .acm-anchor, .acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):not(:has(.acm-count)) .acm-anchor {
  width: 100%;
  text-align: left;
}
@container acm-item-container (max-width: 375px) {
  .acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):has(.acm-count) .acm-anchor, .acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):not(:has(.acm-count)) .acm-anchor {
    min-height: var(--acm-anchor-height-sp);
  }
}
.acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):has(.acm-count) .acm-anchor::before, .acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):not(:has(.acm-count)) .acm-anchor::before {
  display: none;
}
.acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):has(.acm-count) .acm-anchor::after, .acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):not(:has(.acm-count)) .acm-anchor::after {
  flex-shrink: 0;
  display: table;
  width: var(--acm-anchor-width);
  text-align: center;
  margin-left: auto;
}
@container acm-item-container (max-width: 375px) {
  .acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):has(.acm-count) .acm-anchor::after, .acm-expandable .acm-head:has(.acm-anchor):not(:has(.acm-link)):not(:has(.acm-count)) .acm-anchor::after {
    width: var(--acm-anchor-width-sp);
  }
}
.acm-expandable .acm-anchor {
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--acm-anchor-width);
  min-height: var(--acm-anchor-height);
}
@container acm-item-container (max-width: 375px) {
  .acm-expandable .acm-anchor {
    width: var(--acm-anchor-width-sp);
    min-height: var(--acm-anchor-height-sp);
  }
}
@media (hover: hover) and (pointer: fine) {
  .acm-expandable .acm-anchor:hover::after {
    opacity: var(--hover-opacity-value);
    transition: opacity var(--hover-opacity-transition) ease-out;
  }
}
.acm-expandable .acm-anchor:disabled {
  display: none;
}
.acm-expandable .acm-anchor::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  width: 1px;
  height: 50%;
  background: #f2f2f2;
}
@container acm-item-container (max-width: 375px) {
  .acm-expandable .acm-anchor::before {
    height: calc(var(--acm-anchor-height-sp) / 2);
  }
}
.acm-expandable .acm-anchor::after {
  position: relative;
  content: "\f078";
  line-height: 1;
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  font-size: 15px;
  color: inherit;
}
.acm-expandable .acm-content {
  transform: translateY(-100%);
  transition: transform var(--acm-collapsed-transform-dulation) var(--acm-collapsed-transform-delay) ease-out;
}
.acm-expandable .acm-content-container {
  opacity: 0;
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--acm-collapsed-opacity-dulation) var(--acm-collapsed-opacity-delay) ease-out, max-height var(--acm-collapsed-height-dulation) var(--acm-collapsed-height-delay) ease-out;
}
.acm-item {
  --acm-base-fontSize: var(--base-fontSize);
  container-type: inline-size;
  container-name: acm-item-container;
  position: relative;
}
.acm-item:not(:first-of-type) {
  padding-top: 1px;
}
.acm-item:not(:first-of-type)::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  content: "";
  height: 1px;
  background: #f2f2f2;
}
.acm-head {
  position: relative;
  display: flex;
  align-items: center;
  font-size: inherit;
  color: #191919;
}
@media (hover: hover) and (pointer: fine) {
  .acm-head:hover:has(.acm-link) .acm-text, .acm-head:hover:has(.acm-link) .acm-count {
    opacity: var(--hover-opacity-value);
    transition: opacity var(--hover-opacity-transition) ease-out;
  }
  .acm-head:hover:not(:has(.acm-link)) .acm-anchor::after, .acm-head:hover:not(:has(.acm-link)) .acm-text, .acm-head:hover:not(:has(.acm-link)) .acm-count {
    opacity: var(--hover-opacity-value);
    transition: opacity var(--hover-opacity-transition) ease-out;
  }
}
.acm-content {
  font-size: var(--acm-base-fontSize);
}
.acm-text {
  display: flex;
  align-items: center;
  line-height: 1.32;
  color: inherit;
  font-weight: 500;
  font-size: inherit;
  word-break: break-all;
  padding-top: 0.5em;
  padding-right: 16px;
  padding-bottom: 0.5em;
  padding-left: 16px;
}
.acm-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--acm-anchor-height);
  color: inherit;
}
@container acm-item-container (max-width: 375px) {
  .acm-link {
    min-height: var(--acm-anchor-height-sp);
  }
}
.acm-count-wrap {
  flex-shrink: 0;
  width: -moz-fit-content;
  width: fit-content;
  min-width: var(--acm-count-minWidth);
  line-height: 0;
  text-align: center;
  margin-left: auto;
  padding: 0.4em 8px;
}
@container acm-item-container (max-width: 375px) {
  .acm-count-wrap {
    min-width: var(--acm-count-minWidth-sp);
  }
}
.acm-count-wrap .count {
  margin-left: 0;
}

.rating-form {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-top: 32px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
  border-radius: 12px;
}
.rating-form__legend {
  font-weight: 500;
  margin-bottom: 8px;
}
.rating-form__radios {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 4px;
}
.rating-form__radio {
  position: relative;
}
.rating-form__radio > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rating-form__radio > input:checked + span {
  background: #111;
  color: #fff;
  border-color: #111;
}
.rating-form__radio > span {
  cursor: pointer;
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: var(--border-radius-s-value);
  border: 1px solid #ccc;
  background: #fff;
  letter-spacing: initial;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .rating-form__radio > span:hover {
    border-color: #666;
  }
}
.rating-form__comment {
  margin-top: 8px;
}
.rating-form__comment > textarea {
  resize: vertical;
  width: 100%;
  line-height: 1.5;
  border-radius: var(--border-radius-s-value);
  border: 1px solid #ccc;
  font-size: 16px;
  padding: 8px 16px;
}
.rating-form__submit {
  display: block;
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: none;
  font-weight: 500;
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  margin-top: 8px;
  transition: background 0.2s, color 0.2s;
}
.rating-form__submit.is-enabled {
  background: #111;
  color: #fff;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .rating-form__submit.is-enabled:hover {
    background: #000;
  }
}
.rating-form__message {
  text-align: center;
  width: var(--element-width);
  font-style: italic;
  font-weight: 500;
  font-size: 0.9em;
  color: #191919;
  margin-right: auto;
  margin-left: auto;
  margin-top: 32px;
}
.rating-form__message--success {
  color: #191919;
}
.rating-form__message--error {
  color: #fb261f;
}
.rating-form .cf-turnstile {
  margin-top: 8px;
  margin-bottom: 8px;
}/*# sourceMappingURL=style.css.map */