/* ここから初期設定 ---------------------------------------------------------*/
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

ul,
ol,
dl {
  list-style: none;
}

body {
  overflow-x: hidden;
  width: 100%;
}

:root {
  --boxBg: #fff;
  --boxBorder: black 2px solid;
  --boxOutline: black 2px solid;
  --font: "DotGothic16", sans-serif;
}

html {
  font-size: 62.5%;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

/* ここまで初期設定 ---------------------------------------------------------*/

/* ここからローディング------------------------------------------------------ */
#home__splash {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.loading__image {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 40%;
  left: 50%;
  animation: bounds 2s forwards steps(2);
}

@keyframes bounds {
  0% {
    transform: translate(-80px, -10%) scaleX(-1);
  }

  20% {
    transform: translate(-60px, 0%) scaleX(-1);
  }

  40% {
    transform: translate(-40px, -10%) scaleX(-1);
  }

  60% {
    transform: translate(-20px, 0%) scaleX(-1);
  }

  80% {
    transform: translate(0px, -10%) scaleX(-1);
  }

  100% {
    transform: translate(20px, 0%) scaleX(-1);
  }
}

.home__loading-text {
  color: #fff;
  font-family: "DotGothic16", sans-serif;
  font-size: 2rem;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.home__loading-text span {
  opacity: 0;
  animation: textanimation 0.2s forwards;
}

@keyframes textanimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.home__loading-text span:nth-child(2) {
  animation-delay: 0.3s;
}
.home__loading-text span:nth-child(3) {
  animation-delay: 0.6s;
}
.home__loading-text span:nth-child(4) {
  animation-delay: 0.9s;
}
.home__loading-text span:nth-child(5) {
  animation-delay: 1.2s;
}
.home__loading-text span:nth-child(6) {
  animation-delay: 1.5s;
}
.home__loading-text span:nth-child(7) {
  animation-delay: 1.8s;
}
.home__loading-text span:nth-child(8) {
  animation-delay: 2.1s;
}

@media (max-width: 767px) {
  .home__loading-text {
    position: absolute;
    color: #fff;
    font-family: "DotGothic16", sans-serif;
    font-size: 1.5rem;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
  }
}
/* ここまでローディング------------------------------------------------------ */

/* ここから初期設定---------------------------------------------------------------- */

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

ul,
ol,
dl {
  list-style: none;
}

html {
  font-size: 62.5%;
  width: 100vw;
  height: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
}

:root {
  --boxBg: #fff;
  --boxBorder: black 2px solid;
  --boxOutline: black 2px solid;
}

/* ここまで初期設定---------------------------------------------------------------- */

.brank--sp {
  display: none;
}

/* ここからローディング------------------------------------------------------------- */
#subpage__splash {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: 9999;
  width: 100%;
  height: 100%;
}

.subpage__loading {
  position: absolute;
  top: 50%;
  left: calc(50% - 30px);
  width: 60px;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side, #fff 90%, #000) 0 /
    calc(100% / 3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: l1 1s steps(4) infinite;
}
@keyframes l1 {
  to {
    clip-path: inset(0 -34% 0 0);
  }
}
/* ここからローディング------------------------------------------------------------- */
/* ここからヘッダー・現在位置表示---------------------------------------------------- */
.header {
  display: none;
  position: fixed;
  background-color: #fff;
  z-index: 10;
  height: 70px;
  width: 100%;
  max-width: 100vw;
  top: 0;
  left: 0;
  border-radius: 10px;
  border: 2px solid #413528;
  outline: 2px solid #413528;
  outline-offset: -5px;
}

.header--inner {
  font-family: "DotGothic16", sans-serif;
  height: 70px;
  display: flex;
  justify-content: space-between;
  padding-left: 50px;
  padding-right: 50px;
  align-items: center;
}
.header__logo {
  height: 80px;
}

.header__nav-list {
  display: flex;
}

.header__nav-item {
  font-size: 2rem;
  letter-spacing: 0.5rem;
  margin-right: -0.5rem;
  margin-left: 100px;
  font-weight: bold;
  position: relative;
}

.header__nav-item::before {
  font-family: "DotGothic16", sans-serif;
  position: absolute;
  opacity: 0;
  margin-right: 20px;
  font-size: 2rem;
  left: -30px;
}

.header__nav-item:hover::before {
  content: ">";
  font-family: sans-serif;
  animation: blinking 0.5s steps(1) infinite alternate;
}

@keyframes blinking {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.header__toggle-menu {
  display: block;
}
.subpage__current {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 999;
  height: 70px;
  background-color: #ffffff;
  border: #413528 2px solid;
  border-radius: 10px;
  outline: #413528 2px solid;
  outline-offset: -5px;
}

.header.subpage__header {
  display: none;
}

.subpage__current-text {
  padding-top: 20px;
  font-size: 1.5rem;
  padding-left: 30px;
  padding-right: 30px;
  font-family: "DotGothic16", sans-serif;
  font-weight: bold;
}
/* ここまでヘッダー・現在位置表示---------------------------------------------------- */

/* 共通ボタン */
.button-area {
  width: 150px;
  height: 4rem;
  background-color: mediumaquamarine;
  border-radius: 10px;
  text-align: center;
  margin: 50px auto 150px auto;
  display: grid;
  place-items: center;
  transition-duration: 0.5s;
  border: solid 2px #413528;
  outline: solid 2px #413528;
  outline-offset: -5px;
}

.button-area:hover {
  background-color: rgb(193, 209, 203);
  color: #fff;
}

.button-area__text {
  font-family: "DotGothic16", sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  position: relative;
  color: #251606;
}

.icon-down {
  display: inline-block;
  animation: wiggle 0.8s infinite steps(3);
}
@keyframes wiggle {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  75% {
    transform: translateY(3px);
  }
}

.icon-left {
  display: inline-block;
  animation: wiggleLeft 0.8s infinite steps(3);
  margin-right: 10px;
}
@keyframes wiggleLeft {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  pointer-events: none;
  background-image: radial-gradient(circle, transparent 0%, black 100%);
  transform: scale(0);
  transition: transform 3s ease;
  z-index: 999999;
}

#overlay.active {
  transform: scale(3); /* 十分に大きくして画面全体を覆う */
  pointer-events: auto;
}

/* ここからフッター -------------------------------------------------------------- */
footer {
  margin-top: 0;
}

.footer {
  width: 100%;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}
.footer--inner {
  margin: 0 100px 0 50px;
  padding-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.footer__logo {
  width: 150px;
}

.footer__nav-list {
  display: flex;
}

.footer__nav-item {
  font-size: 2rem;
  margin-left: 70px;
  font-weight: bold;
  letter-spacing: 0.5rem;
  font-family: "DotGothic16", sans-serif;
  position: relative;
}
.footer__nav-item::before {
  font-family: "DotGothic16", sans-serif;
  position: absolute;
  opacity: 0;
  margin-right: 10px;
  font-size: 2rem;
  left: -30px;
}
.footer__nav-item:hover::before {
  content: ">";
  opacity: 1;
  font-family: sans-serif;
  animation: blinking 1s steps(1) infinite;
}
@keyframes blinking {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.footer__copyright {
  text-align: center;
  margin: 50px auto 0 auto;
  letter-spacing: 0.5rem;
  font-size: 1.2rem;
  font-family: "DotGothic16", sans-serif;
  font-weight: bold;
  padding-bottom: 50px;
}
.footer__image--bottom {
  margin-right: 0;
  padding-bottom: 50px;
  width: 200px;
  right: 0;
}

.footer.subpage__footer {
  height: 150px;
  padding-top: 15px;
  border-top: #635c54 ridge 5px;
  background-image: none;
  background-color: #fff;
}

.subpage__footer .footer--inner {
  height: 100px;
  padding-top: 0;
}
.subpage__footer .footer__logo img {
  height: 70px;
}
.subpage__footer .footer__image--bottom {
  display: none;
}
.subpage__footer .footer__copyright {
  margin-top: 0;
  padding-bottom: 0;
}

/* ここまでフッター -------------------------------------------------------------- */
/* ここからページトップボタン-------------------------------------- */
#page-top-button {
  border: #000 1px solid;
  outline: #000 1px solid;
  outline-offset: -3px;
  border-radius: 5px;
  background-color: #fff;
  position: fixed;
  padding: 5px;
  bottom: 20px;
  right: 20px;
  font-family: var(--font);
  text-align: center;
  font-weight: bold;
  color: #000;
  z-index: 2;
  transform: translateX(100px);
  opacity: 0;
}
#page-top-button img {
  width: 30px;
  height: 30px;
}

#page-top-button.leftMove {
  animation: leftAnime 0.5s forwards;
}

@keyframes leftAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#page-top-button.rightMove {
  animation: rightAnime 0.5s forwards;
}
@keyframes rightAnime {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(100px);
  }
}

/* ここまでページトップボタン-------------------------------------- */
/* ここからレスポンシブ ---------------------------------------------------------- */
/* ここからタブレット ------------------------------------------------ */
@media (max-width: 1023px) {
  .header {
    display: block;
    background-color: #fff;
    position: fixed;
    z-index: 10;
    top: 0;
    opacity: 1;
    width: 100%;
    height: 70px;
    width: calc(100% - 5px);
    border: #413528 1.5px solid;
    border-radius: 10px;
  }

  .header--inner {
    font-family: "DotGothic16", sans-serif;
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 40px);
    align-items: center;
    position: relative;
  }
  .header__logo {
    height: 80px;
  }
  .header__nav {
    position: absolute;
    background-color: #fff;
    top: 70px;
    right: -100%;
    width: 50%;
    height: 50vh;
    border: #413528 2px solid;
    outline: #413528 2px solid;
    outline-offset: -5px;
    border-radius: 10px;
    transition: all 0.6s;
  }

  .header__nav.menuopen {
    right: -5%;
  }

  .header__nav-list {
    display: flex;
    flex-direction: column;
    padding-left: 50px;
  }

  .header__nav-item {
    font-size: 2.4rem;
    letter-spacing: 0.5rem;
    margin-right: -0.5rem;
    padding-top: 50px;
    margin-left: 50px;
    font-weight: bold;
  }

  .header__nav-item::before {
    content: ">";
    font-family: sans-serif;
    margin-right: 10px;
    animation: blinking 1s infinite ease-in-out;
  }

  @keyframes blinking {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .header__toggle-menu {
    display: block;
  }

  /* ここまで固定ヘッダー */

  /* ここからハンバーガーメニュー */
  .header__toggle-menu {
    display: block;
    position: relative;
    background: inherit;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 5px;
  }

  .header__toggle-menu span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
    background: #251606;
    width: 45%;
  }

  .header__toggle-menu span:nth-of-type(1) {
    top: 13px;
  }

  .header__toggle-menu span:nth-of-type(2) {
    top: 19px;
  }

  .header__toggle-menu span:nth-of-type(3) {
    top: 25px;
  }

  .header__toggle-menu span:nth-of-type(3)::after {
    content: "Menu";
    font-family: var(--font);
    position: absolute;
    top: 5px;
    color: #251606;
    font-size: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
  }

  .header__toggle-menu.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }

  .header__toggle-menu.active span:nth-of-type(2) {
    opacity: 0;
  }

  .header__toggle-menu.active span:nth-of-type(3) {
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }

  .header__toggle-menu.active span:nth-of-type(3)::after {
    content: "Close"; /*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
    top: 5px;
    left: 4px;
  }

  /* ここまでハンバーガーメニュー */
}
/* ここまでタブレット ------------------------------------------------ */

/* ここからスマホ --------------------------------------------------- */
@media (max-width: 767px) {
  .brank--sp {
    display: block;
  }
  /* ここからヘッダーの調整 ------------------------------------------------- */
  .header {
    background-color: #fff;
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    height: 70px;
    border: #413528 1.5px solid;
    border-radius: 10px;
  }

  .header--inner {
    font-family: "DotGothic16", sans-serif;
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    align-items: center;
  }
  .header__logo {
    height: 80px;
  }
  .header__nav {
    position: absolute;
    top: 70px;
    right: -100%;
    height: auto;
    min-height: 200px;
    border-radius: 10px;
    background-color: #fff;
    border: var(--boxBorder);
    outline: var(--boxOutline);
    outline-offset: -5px;
    transition: all 0.6s;
  }

  .header__nav.menuopen {
    right: 0;
  }

  .header__nav-list {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    top: 50%;
  }

  .header__nav-item {
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    margin-right: -0.5rem;
    padding-top: 30px;
    margin-left: 50px;
    font-weight: bold;
  }

  .header__nav-item::before {
    content: ">";
    font-family: sans-serif;
    margin-right: 10px;
    font-size: 1.5rem;
    animation: blinking 0.5s infinite ease-in-out;
  }

  @keyframes blinking {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .header__toggle-menu {
    display: block;
  }

  /* ここまでヘッダーの調整 ------------------------------------------------- */

  .button-area {
    margin-bottom: 100px;
  }

  /* ここからフッターの調整 ------------------------------------------------- */
  footer {
    background-color: #fff;
  }

  .footer--inner {
    margin-right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: center;
  }
  .footer__nav-list {
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: 20px 0 50px 0;
    padding-left: 0;
  }
  .footer__nav-item {
    padding-top: 15px;
    margin-left: 0;
  }
  .footer__nav-item::before {
    display: none;
  }

  .footer__image {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer--inner {
    margin-right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: center;
  }
  .footer__nav-list {
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: 20px 0 50px 0;
    padding-left: 0;
  }
  .footer__nav-item {
    padding-top: 15px;
    margin-left: 0;
  }
  .footer__nav-item::before {
    display: none;
  }

  .footer__image {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .subpage__footer {
    height: 200px;
  }
  .subpage__footer .footer__logo {
    width: 70px;
    height: 70px;
  }

  .subpage__footer .footer__nav-list {
    flex-direction: row;
  }

  .subpage__footer .footer__nav-item {
    padding-top: 0;
    font-size: 1.2rem;
    letter-spacing: normal;
    padding-left: 30px;
  }

  .subpage__footer .footer--inner {
    height: 70px;
    flex-direction: row;
    align-items: start;
    justify-content: center;
  }

  /* ここまでフッターの調整 ------------------------------------------------- */
}

/* ここからindex.html---------------------------------------------------- */

/* ここからヘッダー ----------------------------------------------*/

/* ここから共通素材(動く三角) ------------------------------------*/
.icon-down {
  display: inline-block;
  animation: wiggle 0.8s infinite steps(3);
}
@keyframes wiggle {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  75% {
    transform: translateY(3px);
  }
}

.icon-left {
  display: inline-block;
  animation: wiggleLeft 0.8s infinite steps(3);
  margin-right: 10px;
}
@keyframes wiggleLeft {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
/* ここまで共通素材(動く三角) ------------------------------------*/

.home__main {
  max-width: 100%;
  background-image: linear-gradient(
    0deg,
    rgba(175, 154, 255, 1),
    rgba(255, 201, 151, 1) 24%,
    rgba(170, 231, 243, 1)
  );
  padding-bottom: 50px;
}

/* ここからファーストビュー--------------------------------------- */
.home__first-view {
  background-image: url(../images/image_fv-bg.png);

  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin: 0;
  margin-bottom: 100px;
  color: #251606;
}
/* ここから左側のナビゲーション(PCのみ)--------------------- */
.home__nav {
  font-family: "DotGothic16", sans-serif;
  width: 350px;
  letter-spacing: 0.3rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 30px;
  background-color: gray;
  color: #fff;
  height: 100vh;
}

.home__nav-img {
  opacity: 0.3;
  margin-left: 10px;
  margin-right: 15px;
  width: 120px;
  object-position: center;
  height: 70vh;
  object-fit: cover;
}
.home__nav-list {
  font-size: 2.5rem;
}
.home__nav-item {
  margin-top: 50px;
  position: relative;
}

.home__nav-item::before {
  font-family: "DotGothic16", sans-serif;
  position: absolute;
  opacity: 0;
  margin-right: 20px;
  font-size: 1.5rem;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
}
.home__nav-item:hover::before {
  content: ">";
  font-family: sans-serif;
  opacity: 0.7;
  font-size: 1.5rem;
  animation: blinking 0.5s infinite steps(1);
}
@keyframes blinking {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
/* ここまで左側のナビゲーション(PCのみ)--------------------- */
/* ここからヒーローコンテンツ------------------------------ */
.home__hero {
  flex: 1;

  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  padding-left: 100px;
  height: 100vh;
}
.home__hero-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: 50px;
}

/* ここからサイトタイトル・キャッチコピー------------ */
.home__hero-content--top {
  display: flex;
}

.home__hero-title h2 {
  font-family: "Pixelify Sans", sans-serif;
  margin-right: 50px;
  font-weight: bold;
  font-size: 6rem;
  letter-spacing: 1rem;
}
.home__hero-title p {
  font-family: "Pixelify Sans", sans-serif;
  font-size: 3rem;
  letter-spacing: 0.5rem;
}
.home__hero-title_br--sp {
  display: none;
}

.home__hero-catchcopy {
  font-size: 2rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "DotGothic16", sans-serif;
  border-radius: 10px;
  border: 2px solid #413528;
  outline: 2px solid #413528;
  outline-offset: -5px;
  padding: 30px;
  background-color: #fff;
  margin-right: 50px;
}
/* ここまでサイトタイトル・キャッチコピー------------ */
/* ここからページ内リンクボタン・画像---------------- */

.home__hero-content-bottom {
  display: flex;
  margin-top: 50px;
}
.home__start-button-area {
  font-size: 2rem;
  font-family: "DotGothic16", sans-serif;
  background-color: #fff;
  padding: 30px;
  margin-right: 30px;
  border: #413528 2px solid;
  outline: #413528 2px solid;
  outline-offset: -5px;
  border-radius: 10px;
}

.home__start-button-item {
  position: relative;
}
.home__start-button-item::before {
  position: absolute;
  font-size: 1.5rem;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
}
.home__start-button-item:hover:before {
  content: ">";
  font-family: sans-serif;
  animation: blink 0.5s infinite steps(1);
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.home__hero-button--wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.home__hero-img--bottom {
  height: 100px;
  object-fit: contain;
}
/* ここまでページ内リンクボタン・画像---------------- */
/* ここまでヒーローコンテンツ------------------------------ */
/* ここまでファーストビュー--------------------------------------- */

/* ここからworksのエリア------------------------------------------ */
/* ここからセクションタイトル----------------------------- */
.home__works-title {
  width: 300px;
  object-fit: cover;
  margin-left: 10%;
}
.home__works--inner {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home__works-img {
  transform: scaleY(-1);
  width: 200px;
}
/* ここまでセクションタイトル----------------------------- */
/* ここからギャラリー ------------------------------------*/
.gallery {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.gallery img {
  border: #b39d42 2px solid;
}
.slider-01 {
  grid-area: 1 / 1 / 3 / 2;
}
.slider-02 {
  grid-area: 3 / 1 / 6 / 2;
}
.slider-03 {
  grid-area: 4 / 2 / 6 / 3;
}
.slider-04 {
  grid-area: 1 / 2 / 4 / 3;
}
.slider-05 {
  grid-area: 2 / 3 / 5 / 4;
}
.slider-06 {
  grid-area: 2 / 4 / 3 / 5;
}
.slider-07 {
  grid-area: 1 / 3 / 2 / 5;
}

.gallery.fadeUp {
  animation: fadeUp 0.5s forwards ease-in-out;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery.fadeDown {
  animation: fadeDown 0.5s forwards ease-in-out;
}
@keyframes fadeDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(50px);
  }
}

.gallery li {
  margin-bottom: 20px;
  list-style: none;
}

.gallery img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
/* ここまでギャラリー ------------------------------------*/
/* ここまでworksのエリア------------------------------------------ */

/* ここからprofileのエリア-----------------------------------------*/
/* ここからセクションタイトル----------------------------- */
.home__profile-title-container {
  width: 80%;
  max-width: 1000px;
  margin-bottom: 50px;
  margin: 0 10% 30px 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home__profile-title {
  width: 300px;
}
.home__profile-title--decoration {
  height: 100px;
}
/* ここまでセクションタイトル----------------------------- */
/* ここからセクション内のコンテンツ------------------------ */
.home__profile-content {
  display: flex;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 80%;
  justify-content: space-between;
  margin-bottom: 50px;
  color: #251606;
}

/* ここから名前とイラスト ---------------------*/
.home__profile-image {
  min-width: 120px;
  object-fit: cover;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.home__profile-image img {
  width: 100px;
}

.home__profile-name {
  font-size: 2rem;
  font-family: "DotGothic16", sans-serif;
  margin-bottom: 50px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  border: var(--boxBorder);
  outline: var(--boxOutline);
  outline-offset: -5px;
}

.home__profile-pixel-image {
  animation: wiggle 3s infinite steps(1);
}
/* ここまで名前とイラスト ---------------------*/
/* ここから”つよみ” --------------------------*/
.home__profile-strength-title,
.home__profile-strength ul {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-family: "DotGothic16", sans-serif;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  border: var(--boxBorder);
  outline: var(--boxOutline);
  outline-offset: -5px;
}

.home__profile-strength li {
  text-align: left;
  font-size: 1.2rem;
  padding: 15px;
}

.home__profile-strength li span {
  color: rgb(0, 0, 120);
  margin-right: 15px;
}
/* ここまで”つよみ” --------------------------*/
/* ここから”おぼえているわざ” -----------------*/
.home__profile-skills {
  min-width: 200px;
}

.home__profile-skills p {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-family: "DotGothic16", sans-serif;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  border: var(--boxBorder);
  outline: var(--boxOutline);
  outline-offset: -5px;
}
.home__profile-skills-list {
  list-style: none;
  margin-top: 10px;
  font-family: "DotGothic16", sans-serif;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  border: var(--boxBorder);
  outline: var(--boxOutline);
  outline-offset: -5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.home__profile-skills img {
  width: 30px;
}
.home__profile-skills-item {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
}
.home__profile-skills-item p {
  font-size: 1.5rem;
}
.home__profile-skills dl {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  margin-left: 15px;
}

.home__profile-skills dl:first-child {
  padding-top: 15px;
}

.home__profile-skills-item dd {
  font-family: "DotGothic16", sans-serif;
  margin-left: 10px;
}

/* ここまで”おぼえているわざ” -----------------*/

.home__profile-text {
  width: 70%;
  margin-right: auto;
  margin-left: auto;
  font-family: "DotGothic16", sans-serif;
  font-size: 1.5rem;
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  border: #413528 2px solid;
  outline: #413528 2px solid;
  outline-offset: -5px;
}
/* ここまでセクション内のコンテンツ------------------------ */
/* ここまでprofileのエリア-----------------------------------------*/

/* ここまでcontactのエリア-----------------------------------------*/
/* ここからセクションタイトル----------------------------- */
.home__contact-title--wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.home__contact-title--decoration {
  width: 300px;
  object-fit: contain;
  margin-right: 50px;
}

.home__contact-title img {
  width: 300px;
  margin-bottom: 50px;
}
/* ここまでセクションタイトル----------------------------- */
/* ここからセクション内のコンテンツ------------------------ */
.home__contact-content {
  background-color: #fff;
  padding: 40px;
  border-radius: 10px;
  border: #413528 2px solid;
  outline: #413528 2px solid;
  outline-offset: -5px;
  display: flex;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  justify-content: space-around;
}

.home__contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "DotGothic16", sans-serif;
  letter-spacing: 0.5rem;
}

.home__contact-form-icon {
  width: 40px;
  margin-top: 20px;
}

.home__contact-sns-title {
  font-family: "DotGothic16", sans-serif;
  letter-spacing: 0.5rem;
  font-weight: bold;
  font-size: 1.5rem;
}

.home__contact-sns {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home__contact-sns-logo img {
  width: 40px;
  margin-top: 20px;
}

.home__contact-x-logo,
.home__contact-instagram-logo {
  margin-left: 40px;
}
/* ここからセクション内のコンテンツ------------------------ */
/* ここまでcontactのエリア-----------------------------------------*/

/* ここからフッター------------------------------------------------*/
.footer {
  width: 100%;
  background-color: rgb(175, 154, 255);
  background-image: url(../images/image_footer-bg.png);
  background-repeat: no-repeat;
  background-position: top;
  background-blend-mode: normal;
  background-size: cover;
}

.footer--inner {
  margin: 0 100px 0 50px;
  padding-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.footer__logo {
  width: 150px;
}

.footer__nav-list {
  display: flex;
}

.footer__nav-item {
  font-size: 2rem;
  margin-left: 70px;
  font-weight: bold;
  letter-spacing: 0.5rem;
  font-family: "DotGothic16", sans-serif;
  position: relative;
}
.footer__nav-item::before {
  font-family: "DotGothic16", sans-serif;
  position: absolute;
  opacity: 0;
  margin-right: 10px;
  font-size: 2rem;
  left: -30px;
}
.footer__nav-item:hover::before {
  content: ">";
  opacity: 1;
  font-family: sans-serif;
  animation: blinking 0.5s steps(1) infinite;
}
@keyframes blinking {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.footer__copyright {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.5rem;
  font-size: 1.2rem;
  font-family: "DotGothic16", sans-serif;
  font-weight: bold;
  padding-bottom: 50px;
}
.footer__image--bottom {
  margin-right: 0;
  padding-bottom: 50px;
  width: 200px;
  right: 0;
}
/* ここまでフッター------------------------------------------------*/
/* ここから「はじめに」クリック後のモーダル------------------------- */
#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxMiddleLeft,
#cboxMiddleRight,
#cboxBottomLeft,
#cboxBottomCenter,
#cboxBottomRight {
  width: 0;
  height: 0;
  padding: 0; /*念のためパディングも0に*/
  overflow: hidden; /*万が一コンテンツがはみ出ても非表示にする*/
}

/* 背景透過時にコンテンツが透けて見えるのを防ぐ */
#cboxContent {
  background-color: #fff; /* 必要に応じて背景色を設定 */
}
/* ここまで「はじめに」クリック後のモーダル------------------------- */

/* ここまでPC版レイアウト------------------------------------------------------- */

/* ここからレスポンシブ ---------------------------------------------------------*/
/* ここからタブレット */
@media (max-width: 1023px) {
  .header {
    background-color: #fff;
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    height: 70px;
    border: #413528 1.5px solid;
    border-radius: 10px;
  }

  .header--inner {
    font-family: "DotGothic16", sans-serif;
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 40px);
    align-items: center;
    position: relative;
  }
  .header__logo {
    height: 80px;
  }
  .header__nav {
    position: absolute;
    top: 70px;
    right: -100%;
    width: 50%;
    height: 50vh;
    border-radius: 10px;
    background-color: #fff;
    border: var(--boxBorder);
    outline: var(--boxOutline);
    outline-offset: -5px;
    transition: all 0.6s;
  }

  .header__nav.menuopen {
    right: -5%;
  }

  .header__nav-list {
    display: flex;
    flex-direction: column;
    padding-left: 50px;
  }

  .header__nav-item {
    font-size: 2.4rem;
    letter-spacing: 0.5rem;
    margin-right: -0.5rem;
    padding-top: 50px;
    margin-left: 50px;
    font-weight: bold;
  }

  .header__nav-item::before {
    content: ">";
    font-family: sans-serif;
    margin-right: 10px;
    animation: blinking 0.5s infinite ease-in-out;
  }

  @keyframes blinking {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .header__toggle-menu {
    display: block;
  }

  /* ここまで固定ヘッダー */

  /* ここからハンバーガーメニュー */
  .header__toggle-menu {
    display: block;
    position: relative;
    background: inherit;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 5px;
  }

  .header__toggle-menu span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
    background: #251606;
    width: 45%;
  }

  .header__toggle-menu span:nth-of-type(1) {
    top: 13px;
  }

  .header__toggle-menu span:nth-of-type(2) {
    top: 19px;
  }

  .header__toggle-menu span:nth-of-type(3) {
    top: 25px;
  }

  .header__toggle-menu span:nth-of-type(3)::after {
    content: "Menu";
    font-family: "Pixelify Sans", sans-serif;
    position: absolute;
    top: 5px;
    color: #251606;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
  }

  .header__toggle-menu.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }

  .header__toggle-menu.active span:nth-of-type(2) {
    opacity: 0;
  }

  .header__toggle-menu.active span:nth-of-type(3) {
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }

  .header__toggle-menu.active span:nth-of-type(3)::after {
    content: "Close"; /*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
    top: 5px;
    left: 4px;
  }

  /* ここまでハンバーガーメニュー */
  .home__nav {
    display: none;
  }

  .home__first-view {
    padding-top: 70px;
    height: 100vh;
  }

  .home__hero {
    justify-content: center;
    height: 100vh;
  }
  .home__hero-content {
    display: flex;
  }
  .home__hero-content-bottom {
    display: flex;
  }

  .gallery {
    columns: 3;
  }
}
/* ここからスマホ */
@media (max-width: 767px) {
  .header {
    background-color: #fff;
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    height: 70px;
    border: #413528 1.5px solid;
    border-radius: 10px;
  }

  .header--inner {
    font-family: "DotGothic16", sans-serif;
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    align-items: center;
  }
  .header__logo {
    height: 80px;
  }
  .header__nav {
    position: absolute;
    top: 70px;
    right: -100%;
    height: auto;
    min-height: 200px;
    border-radius: 10px;
    background-color: #fff;
    border: var(--boxBorder);
    outline: var(--boxOutline);
    outline-offset: -5px;
    transition: all 0.6s;
  }

  .header__nav.menuopen {
    right: 0;
  }

  .header__nav-list {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    top: 50%;
  }

  .header__nav-item {
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    margin-right: -0.5rem;
    padding-top: 30px;
    margin-left: 50px;
    font-weight: bold;
  }

  .header__nav-item::before {
    content: ">";
    font-family: sans-serif;
    margin-right: 10px;
    font-size: 1.5rem;
    animation: blinking 0.5s infinite ease-in-out;
  }

  @keyframes blinking {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .header__toggle-menu {
    display: block;
  }

  /* ここまで固定ヘッダー */
  .home {
    width: 100%;
    margin-top: 0;
  }

  .home__first-view {
    margin-top: 0;
    padding-top: 70px;
    height: 100vh;
    width: 100%;
    margin-bottom: 15px;
    align-items: start;
  }
  .home__nav {
    display: none;
  }

  .home__hero {
    height: auto;
    max-height: calc(100vh - 70px);
    width: 80%;
    padding-left: 0;
    justify-content: center;
  }

  .home__hero-content {
    flex-direction: column;
    width: 80%;
    margin: 30px auto 0 auto;
    height: 100%;
  }

  .home__hero-content--top {
    flex-direction: column;
  }
  .home__hero-content-bottom {
    flex-direction: column;
    margin-top: 0;
  }

  .home__hero-title {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .home__hero-title h2 {
    font-size: 5rem;
    letter-spacing: 0.2rem;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .home__hero-title_br--sp {
    display: block;
  }

  .home__hero-catchcopy {
    margin-top: 20px;
    writing-mode: horizontal-tb;
    text-orientation: inherit;
    padding: 5px;
    font-size: 1.6rem;
    padding: 10px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
  }
  .home__hero-button--wrapper {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .home__start-button-area {
    width: 40%;
    padding: 10px;
    font-size: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    text-align: center;
  }
  .home__start-button-item::before {
    display: none;
  }

  .home__nav {
    display: none;
  }

  .home__works {
    margin-top: 70px;
  }

  .home__works-title {
    width: 200px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
  }

  .home__works-img {
    display: none;
  }

  .gallery {
    columns: 2;
  }

  .button-area {
    margin-bottom: 100px;
  }

  .home__profile-title {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .home__profile-content {
    display: block;
  }

  .home__profile-image {
    margin: 0 auto 70px auto;
    width: 100%;
  }

  .home__profile-image img {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
  }

  .home__profile-name {
    width: 50%;
    min-width: 110px;
    margin-bottom: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .home__profile-title--decoration {
    display: none;
  }

  .home__profile-strength {
    margin-bottom: 50px;
  }

  .home__profile-skills p {
    border-radius: 10px;
    background-color: #fff;
    border: var(--boxBorder);
    outline: var(--boxOutline);
    outline-offset: -5px;
    padding: 10px;
  }

  .home__contact-title--wrapper {
    margin-top: 100px;
    height: 100px;
  }

  .home__contact-title {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .home__contact-title--decoration {
    display: none;
  }

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

  .home__contact-sns {
    margin-top: 50px;
  }

  .footer {
    background-size: cover;
    background-position: right top;
  }

  .footer--inner {
    margin-right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: center;
  }
  .footer__nav-list {
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: 20px 0 50px 0;
    padding-left: 0;
  }
  .footer__nav-item {
    padding-top: 15px;
    margin-left: 0;
  }
  .footer__nav-item::before {
    display: none;
  }

  .footer__image {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ここからcolorbox-------------------------------- */
#cboxContent {
  background: none;
}

#cboxOverlay {
  background: #000;
}
#cboxLoadedContent {
  color: #fff;
  background-color: #251606;
  border: #fff 2px solid;
  border-radius: 10px;
  outline: #fff 2px solid;
  outline-offset: -5px;
  padding: 15px;
  width: 50vw;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  height: 50%;
}

#colorbox,
#cboxOverlay,
#cboxWrapper {
  overflow: visible;
}
#cboxTitle {
  color: #fff;
}

#inline-content {
  padding-top: 20px;
  text-align: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.inline--wrapper {
  display: none;
}

.inline__name {
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
}

.inline__image {
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
}

.inline__text {
  font-family: var(--font);
  font-size: 1.5rem;
  width: 100%;

  margin: 15px 5px 20px 5px;
  text-align: left;
}

.inline__fixed-text {
  font-family: var(--font);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.inline__fixed-text--sp {
  display: none;
}

@media (max-width: 1023px) {
  .inline__fixed-text--pc {
    display: none;
  }
  .inline__fixed-text--sp {
    display: block;
  }
}
/* ここまでcolorbox-------------------------------- */
/* ここまでindexページ--------------------------------------------------------------------- */
/* ここからworksページ -------------------------------------------------------------------- */
.post-type-archive-works {
  background-image: url(../images/image_works-bg.png);
  background-repeat: repeat;
  background-size: 200px;
  width: 100%;
  overflow-x: hidden;
}

.works__main {
  margin: 100px auto;
  padding-bottom: 100px;
  width: 80%;
  max-width: 1200px;
}

/* ここからページタイトル --------------------------------------------- */
.works__title--wrapper {
  margin-top: 70px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border: #413528 solid 2px;
  outline: #413528 solid 2px;
  outline-offset: -5px;
  border-radius: 10px;
}

.works__title-image--pc {
  display: block;
  height: 250px;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
}
.works__title-image--sp {
  display: none;
}

.works__title-text {
  padding-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  font-family: "DotGothic16", sans-serif;
  font-size: 1.5rem;
  text-align: center;
}
/* ここまでページタイトル --------------------------------------------- */

/* ここから共通のタブエリア設定 ---------------------------------------- */
.works__tab {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  font-family: "DotGothic16", sans-serif;
  font-weight: bold;
}

/* タブ------------------------------------------- */
.works__tab li a {
  display: block;
  background: #ccc;
  margin: 0 2px;
  padding: 15px 30px;
  border: #413528 2px solid;
  border-radius: 3px;
  outline: #413528 2px solid;
  outline-offset: -5px;
  font-size: 1.5rem;
}
.works__tab li.active a {
  background: #fff;
}

.works__tab li.active a::before {
  content: ">";
  font-family: sans-serif;
  animation: blinking infinite 0.5s steps(1);
  color: #251606;
  margin-right: 5px;
}
@keyframes blinking {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
/* タブ----------------------------------------- */

/* タブの中身 ---------------------------------- */
.works__tab-area {
  width: 100%;
  display: none;
  opacity: 0;
  background: #fff;
  padding: 20px 20px;
  border: #251606 2px solid;
  border-radius: 3px;
  outline: #251606 2px solid;
  outline-offset: -5px;
  font-family: "DotGothic16", sans-serif;
}

.works__tab-area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes displayAnime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.works__tab-area h2 {
  font-size: 2rem;
  letter-spacing: 1rem;
  margin-left: 1rem;
  margin-bottom: 5px;
}

.works__tab-area p {
  font-size: 1.5rem;
  margin-left: 1rem;
}

.works__tab-area dl {
  display: flex;
  padding-top: 30px;
}

.works__tab-area dt {
  width: 7%;
  object-fit: contain;
  font-size: 1.8rem;
}

.works__tab-area dd {
  font-size: 1.5rem;
  padding-left: 30px;
  width: 90%;
}
/* タブの中身 ---------------------------------- */
/* ここまで共通のタブエリア設定 ---------------------------------------- */

/* ここからweb部分----------------------------------------------------- */
.works__web {
  margin-top: 100px;
}

/* ここからセクションタイトル --------------------------------- */
.works__section-title {
  width: 30%;
  background-color: #fff;
  border: #413528 solid 2px;
  outline: #413528 solid 2px;
  outline-offset: -5px;
  border-radius: 10px;
}

.works__section-title--pc {
  height: 150px;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.works__section-title--sp {
  display: none;
}

.works__section-title-text {
  font-family: "DotGothic16", sans-serif;
  font-weight: bold;
  text-align: center;
  padding-bottom: 25px;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
}
/* ここまでセクションタイトル --------------------------------- */

/* ここから概要----------------------------------------------- */
.works__about-item {
  margin-top: 15px;
  font-size: 1.5rem;
}

.works__about-item a {
  color: rgb(0, 0, 120);
  text-decoration: underline;
}
/* ここまで概要----------------------------------------------- */
/* ここからこだわり------------------------------------------- */

.commitment-tab-area dl {
  flex-direction: column;
}

.commitment-tab-area dt {
  width: 100%;
  font-weight: bold;
  font-size: 1.8rem;
}
/* ここまでこだわり------------------------------------------- */
/* ここから使用言語------------------------------------------- */
.works__language-title {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.5rem;
}
/* ここから使用言語------------------------------------------- */
/* ここまでweb部分----------------------------------------------------- */
/* ここからgraphic部分------------------------------------------------- */
.works__graphic {
  margin-top: 100px;
}

.acf-works-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
}

.acf-works {
  width: 200px;
  height: auto;
  color: #000;
  background-color: #fff;
  border: var(--boxBorder);
  outline: var(--boxOutline);
  outline-offset: -5px;
  border-radius: 10px;
  padding: 10px;
  font-size: 1.2rem;
  margin: 10px;
  text-align: center;
}

.pagination-container {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.acf-works img {
  margin-top: 15px;
}

/* ここまでフライヤー ----------------------------------------- */

/* ここからその他 --------------------------------------------- */
.works__other-item {
  width: 150px;
  padding: 5px;
  aspect-ratio: 1 / 1;
  border: #b39d42 2px solid;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

.works__other-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
}

.modal__stamp img {
  width: 150px;
}
.modal__stamp a {
  color: blue;
  text-decoration: underline;
}

.modal__logo img {
  height: 150px;
  object-fit: cover;
}

.modal__logo-mine {
  width: 150px;
  object-fit: contain;
}
.modal__logo-mine--rectangle {
  width: 200px;
  object-fit: contain;
}

.modal__banner {
  width: 200px;
}

.modal__banner-rectangle {
  width: 200px;
  height: auto;
  object-fit: contain;
  margin-left: 50px;
}

.modal__spacecat img {
  width: 200px;
}

.modal__other-image {
  width: 200px;
}
/* ここまでその他 --------------------------------------------- */

/* ここから凡例 ----------------------------------------------- */
.works__grid--wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.works__grid-item--first {
  grid-area: 1 / 1 / 2 / 2;
}
.works__grid-item--second {
  grid-area: 1 / 2 / 2 / 3;
}
.works__grid-item--third {
  grid-area: 2 / 1 / 3 / 2;
}
.works__grid-item--fourth {
  grid-area: 2 / 2 / 3 / 3;
}
.works__grid-item--fifth {
  grid-area: 3 / 1 / 4 / 2;
}
/* ここまで凡例 ---------------------------------------- */
/* ここまでgraphic部分------------------------------------------- */

/* レスポンシブ-------------------------------------------------------------- */
/* タブレット---------------------------------------------------- */
@media (max-width: 1023px) {
  .works__title-image--pc {
    display: none;
  }

  .works__title-image--sp {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 250px;
    object-fit: contain;
  }
}
/* タブレット---------------------------------------------------- */
/* スマホ-------------------------------------------------------- */
@media (max-width: 768px) {
  .works__title--wrapper {
    width: 100%;
  }

  .works__title-image--pc {
    display: none;
  }
  .works__title-image--sp {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .works__title-text {
    padding: 0 20px 20px 20px;
  }

  .works__section-title {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    height: 200px;
  }

  .works__section-title--pc {
    display: none;
  }

  .works__section-title--sp {
    display: block;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
  }

  .works__section-title-text {
    letter-spacing: 0;
    width: 100%;
  }

  .works__tab {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    justify-content: space-between;
  }

  .works__tab-area {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .works__tab li a {
    padding: 5px 15px;
    font-size: 1.2rem;
  }

  .works__tab-area h2 {
    letter-spacing: normal;
  }

  .works__tab-area dl {
    flex-direction: column;
  }

  .works__tab-area dt {
    width: 100%;
    padding-bottom: 5px;
  }

  #language.works__tab-area dl {
    flex-direction: row;
  }

  #language.works__tab-area dd {
    padding-left: 10px;
  }

  #language.works__tab-area dt {
    width: 50px;
  }

  #example.works__tab-area dl {
    width: 90%;
    flex-direction: row;
    align-items: center;
    padding-top: 0;
  }

  #example dl img {
    width: 30px;
  }

  #language.works__tab-area dt,
  #example.works__tab-area dd {
    font-size: 1.5rem;
    padding: 0;
  }

  .modal {
    padding-top: 50px;
  }

  .modal-content {
    max-height: 80vh;
    position: relative;
  }

  .modal-content span {
    font-size: 1.2rem;
  }

  .modal-content h2 {
    font-size: 2rem;
    width: 80%;
  }

  .modal__image-box {
    margin-top: 20px;
    flex-direction: column;
  }
  .modal__image-box img {
    margin-top: 15px;
  }

  .modal__flyer-image {
    width: 200px;
    padding-right: 0;
    padding-bottom: 10px;
  }

  .modal__text {
    margin-left: 0;
    text-align: start;
  }

  .works__modal-icon-box {
    justify-content: start;
  }

  .works__other-item {
    width: 120px;
  }

  .modal__logo img {
    height: 120px;
  }
  .modal__banner-rectangle {
    margin-left: 0;
    object-fit: contain;
  }
}
/* スマホ-------------------------------------------------------- */
/* ここまでworksページ ------------------------------------------------------------------- */

/* ここからprofileページ ------------------------------------------------------------------- */
.profile__main {
  padding-top: 70px;
  background-image: url(../images/profile-bg.png);
  background-repeat: repeat;
  background-size: 100px;
  padding-bottom: 100px;
}

/* ここからタイトル----------------------------------------------------- */
.profile__title-area {
  margin-top: 70px;
  width: 50%;
  min-width: 400px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  border: #413528 2px solid;
  border-radius: 10px;
  outline: #413528 2px solid;
  outline-offset: -5px;
}

.profile__title-img {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.profile__title-img--sp {
  display: none;
}

.profile__title-text {
  font-size: 2rem;
  font-family: "DotGothic16", sans-serif;
  text-align: center;
  margin-bottom: 30px;
}
/* ここまでタイトル----------------------------------------------------- */
/* ここからコンテンツ--------------------------------------------------- */
/* ここから名前・経歴・趣味--------------------------------- */
.profile__content {
  margin-top: 50px;
  width: 80%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.profile__overview--wrapper {
  height: auto;
  display: flex;
}
/* 名前・イラスト----------------------------------------- */
.profile__name-area {
  height: 300px;
  background-color: #fefefe;
  padding: 20px;
  border: #413528 2px solid;
  border-radius: 10px;
  outline: #413528 2px solid;
  outline-offset: -5px;
  font-family: "DotGothic16", sans-serif;
}

.profile__name-area img {
  height: 200px;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}
.profile__name h2 {
  font-size: 1.8rem;
  letter-spacing: 0.5rem;
}
.profile__name p {
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  font-weight: bold;
}
/* 名前・イラスト----------------------------------------- */
/* アコーディオンパネルの設定------------------------------ */
.profile__accordion-area {
  font-family: "DotGothic16", sans-serif;
  list-style: none;
  width: 96%;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
}

.profile__accordion-area li {
  margin: 10px 0;
  background-color: #fefefe;
  border: #413528 2px solid;
  border-radius: 10px;
  outline: #413528 2px solid;
  outline-offset: -5px;
}

/*常に見えてるタイトル-------------------------------------------------*/
.profile__accordion-title {
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 3% 3% 3% 50px;
  transition: all 0.5s ease;
}

/* アイコン------------------------------------------------------------ */
.profile__accordion-title::before,
.profile__accordion-title::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 2px;
  background-color: #413528;
  transition: transform 0.3s ease-in-out; /* アニメーションの移行を指定 */
}

.profile__accordion-title::before {
  top: 48%;
  left: 15px;
  transform: rotate(0deg);
}
.profile__accordion-title.box-close::before {
  transform: rotate(45deg);
}

.profile__accordion-title::after {
  top: 48%;
  left: 15px;
  transform: rotate(90deg);
}

.profile__accordion-title.box-close::after {
  transform: rotate(-45deg);
}
/* アイコン------------------------------------------------------------ */
/* アコーディオンパネル内部 --------------------------------------------- */
.profile__accordion-box {
  display: none;
  margin: 0 3% 3% 3%;
  padding: 3%;
  font-size: 1.4rem;
}

.profile__accordion-box p {
  margin-top: 20px;
}

.profile__accordion-box-title {
  font-size: 1.8rem;
  font-weight: bold;
}

.profile__accordion-box p:first-child {
  margin-top: 0;
}

.profile__accordion-title.profile__accordion-box-close
  + .profile__accordion-box {
  display: block; /* または display: inline-block; */
}
/* アコーディオンパネル内部 --------------------------------------- */
/* ここまでアコーディオンパネルの共通設定------------------------------ */

/* 経歴 -------------------------------------------------------- */
.profile__career {
  position: relative;
}

/* ステマネの補足 ----------------------------------- */
.profile__career-supplement {
  display: none;
  position: absolute;
  width: 70%;
  right: 0;
  padding: 10px;
  z-index: 1;
  background-color: #ffffff;
  border: #413528 2px solid;
  border-radius: 10px;
  outline: #413528 2px solid;
  outline-offset: -5px;
}

.profile__career-supplement.active {
  display: block;
}

.profile__career-supplement-target {
  color: rgb(0, 0, 120);
  cursor: pointer;
  text-decoration: underline;
}
/* ステマネの補足 ----------------------------------- */
/* ここまで名前・経歴・趣味--------------------------------- */

/* ここからつよみ・スキル ----------------------------------------- */
.profile__skills,
.profile__strength {
  width: 80%;
  margin-top: 70px;
  font-family: "DotGothic16", sans-serif;
  margin-left: auto;
  margin-right: auto;
}
.profile__skills-title,
.profile__strength-title {
  width: 30%;
  background-color: #fefefe;
  padding: 10px;
  border: #413528 2px solid;
  border-radius: 10px;
  outline: #413528 2px solid;
  outline-offset: -5px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

/* つよみ ---------------------------------------- */
.profile__strength-list {
  width: 100%;
  background-color: #fefefe;
  padding: 10px;
  border: #413528 2px solid;
  border-radius: 10px;
  outline: #413528 2px solid;
  outline-offset: -5px;
}

.profile__strength-item {
  padding-top: 15px;
  padding-left: 15px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
}

.profile__strength-item span {
  font-weight: bold;
  font-size: 1.2rem;
  margin-right: 20px;
  position: relative;
  color: rgb(0, 0, 120);
}

.profile__strength-list-caption--pc {
  text-align: center;
}

.profile__strength-list-caption--sp {
  text-align: center;
  display: none;
}

/* 各項目の詳細 ------------------------------------------------ */
.profile__strength-description {
  position: absolute;
  z-index: 99;
  width: 300px;
  left: 200px;
  transform: translateX(50%);
  background-color: #fefefe;
  padding: 10px;
  border: #413528 2px solid;
  border-radius: 10px;
  outline: #413528 2px solid;
  outline-offset: -5px;
  display: none;
}

/* ホバーすると出現----------------------------------------------- */
.profile__strength-label:hover + .profile__strength-description {
  display: block;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ホバーすると出現----------------------------------------------- */

.profile__strength-description span {
  margin-left: 10px;
}

.profile__close-button {
  display: none;
}
/* 各項目の詳細 ------------------------------------------------ */
/* つよみ ------------------------------------------------------------ */
/* スキル ------------------------------------------------------------ */
.profile__skills-list {
  width: 100%;
  background-color: #fefefe;
  padding: 10px;
  border: #413528 2px solid;
  border-radius: 10px;
  outline: #413528 2px solid;
  outline-offset: -5px;
  display: flex;
  flex-wrap: wrap;
}

.profile__skills-item {
  display: flex;
  width: 30%;
  min-width: 300px;
  max-width: 500px;
  align-items: center;
  margin: 10px;
}

.profile__skills-item img {
  height: 30px;
  width: 30px;
}
.profile__skills-item p {
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  padding-left: 10px;
}

/* タイプ表示 ---------------------------------------- */
.profile__skills-category {
  width: 90px;
  border-radius: 5px;
  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.5),
    inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
  color: #fefefe;
  padding: 2px 5px;
  font-size: 1.2rem;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
  font-weight: bold;
  text-align: center;
  margin-right: 10px;
}

.coading-skill {
  background-color: rgb(173, 45, 45);
}

.design-skill {
  background-color: rgb(43, 43, 135);
  letter-spacing: 0.2rem;
}

.other-skill {
  background-color: rgb(14, 88, 14);
  letter-spacing: 0.2rem;
}
/* タイプ表示 ---------------------------------------- */
/* ここまでつよみ・スキル ----------------------------------------- */

/* ここまでPC---------------------------------------------------------------------------- */
/* ここからタブレット--------------------------------------------------------------------- */
@media (max-width: 1023px) {
  body {
    max-width: 100vw;
  }
  /* タイトルの調整------------------------------------------------- */
  .profile__title-img--sp {
    display: block;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .profile__title-img--pc {
    display: none;
  }

  .profile__title-img {
    width: 200px;
  }

  .profile__title-area {
    min-width: 0;
    width: 300px;
  }
  /* タイトルの調整------------------------------------------------- */
  /* ここから概要の調整 --------------------------------------------- */
  .profile__overview--wrapper {
    display: block;
  }

  .profile__name-area {
    text-align: center;
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .profile__name-area img {
    height: 100px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
  }
  .profile__accordion-area li {
    width: 95%;
  }
  .profile__career-supplement {
    width: 100%;
  }
  /* ここまで概要の調整 --------------------------------------------- */
  /* ここからつよみ・スキルの調整 ------------------------------------ */
  .profile__skills-title,
  .profile__strength-title {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .profile__strength-list,
  .profile__skills-list {
    margin-top: 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* つよみの調整 ------------------------------------------- */
  .profile__strength-list:last-child {
    padding-bottom: 20px;
  }

  .profile__strength-list-caption--pc {
    display: none;
  }

  .profile__strength-list-caption--sp {
    display: block;
    margin-top: 15px;
  }

  .profile__close-button {
    display: block;
    margin-top: 15px;
    text-align: center;
    font-size: 1rem;
  }

  .profile__strength-item {
    position: relative;
  }

  .profile__strength-description.active {
    display: block;
    position: absolute;
    top: 25%;
    left: 50px;
    font-size: 1.2rem;
  }

  .profile__description-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .profile__description-title span {
    color: blue;
    margin-left: 15px;
  }
  /* つよみの調整 ------------------------------------------- */
  /* スキルの調整 ------------------------------------------- */
  .profile__skills-list {
    flex-direction: column;
    align-items: center;
  }

  .profile__skills-category p {
    font-size: 1.2rem;
  }
  .profile__skills-item {
    width: 100%;

    margin-bottom: 10px;
  }

  .profile__skills-item p {
    font-size: 1.2rem;
  }
  /* スキルの調整 ------------------------------------------- */
  /* ここまでつよみ・スキルの調整 ------------------------------------ */
}
/* ここまでタブレット ----------------------------------------------------------------------- */

/* ここからスマホ --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body {
    max-width: 100vw;
  }

  /* タイトルの調整----------------------------------------------------- */
  .profile__title-img--sp {
    display: block;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .profile__title-img--pc {
    display: none;
  }

  .profile__title-img {
    width: 200px;
  }

  .profile__title-area {
    min-width: 0;
    width: 300px;
  }
  /* タイトルの調整----------------------------------------------------- */
  /* 概要の調整----------------------------------------------------- */
  .profile__overview--wrapper {
    display: block;
  }

  .profile__name-area {
    text-align: center;
    width: 200px;
    height: auto;
  }

  .profile__name-area img {
    height: 100px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
  }

  .profile__accordion-area li {
    width: 95%;
  }
  .profile__career-supplement {
    width: 100%;
  }
  /* 概要の調整----------------------------------------------------- */
  /* つよみ・スキルの調整 ------------------------------------------- */
  .profile__skills-title,
  .profile__strength-title {
    width: 100%;
  }

  /* つよみ ------------------------------------------ */
  .profile__strength-list:last-child {
    padding-bottom: 20px;
  }

  .profile__strength-list-caption--pc {
    display: none;
  }

  .profile__strength-list-caption--sp {
    display: block;
    margin-top: 15px;
  }

  .profile__close-button {
    display: block;
    margin-top: 15px;
    text-align: center;
    font-size: 1rem;
  }

  .profile__strength-label {
    position: relative;
  }

  .profile__strength-description.active {
    display: block;
    position: absolute;
    left: -50%;
    width: 250px;
    top: 50px;
    font-size: 1.2rem;
  }

  .profile__description-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .profile__description-title span {
    color: #000;
    margin-left: 15px;
  }
  /* つよみ ------------------------------------------ */
  /* スキル ------------------------------------------ */
  .profile__skills-list {
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
  .profile__skills-item {
    margin-bottom: 10px;
  }

  .profile__skills-item img {
    display: none;
  }
  /* スキル ------------------------------------------ */
  /* つよみ・スキルの調整 ------------------------------------------- */
}
/* ここまでprofileページ ------------------------------------------------------------------- */
/* ここからcontactページ ------------------------------------------------------------------- */
.contact__main {
  background-image: url(../images/image_contact-bg.png);
  background-repeat: repeat;
  background-size: 100px;
  padding-top: 120px;
  padding-bottom: 50px;
}
.contact__br--sp {
  display: none;
}

/* ここからタイトルエリア ------------------------------------------------- */
.contact__title-area {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border: black 2px solid;
  border-radius: 10px;
  outline: black 2px solid;
  outline-offset: -5px;
  min-width: 400px;
}

.contact__title-image--pc {
  display: block;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

.contact__title-image--sp {
  display: none;
}

.contact__title-area p {
  font-size: 2rem;
  font-family: "DotGothic16", sans-serif;
  text-align: center;
  margin-bottom: 30px;
}
/* ここまでタイトルエリア ------------------------------------------------- */

.contact__form-area,
#contact__sns {
  width: 80%;
  margin: 50px auto;
  background-color: #fff;
  border: black 2px solid;
  border-radius: 10px;
  outline: black 2px solid;
  outline-offset: -5px;
  font-size: 1.5rem;
  padding: 20px;
  font-family: "DotGothic16", sans-serif;
}

/* ここからフォームエリア ------------------------------------------------- */
.contact__form-title {
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px auto;
}

.contact__form-title img {
  width: 50px;
  object-fit: cover;
  margin-right: 20px;
}

.contact__form-content {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

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

.contact__inline-trigger {
  color: blue;
  text-decoration: underline;
}

/* ここから埋め込みフォーム ------------------------------- */
#wpcf7-f6-o1 {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#wpcf7-f6-o1 p {
  margin-top: 30px;
}

.required {
  font-size: 1.2rem;
  padding: 2px;
  background: #be1d1d;
  color: #fff;
  border-radius: 5px;
  margin-right: 10px;
}

#wpcf7-f6-o1 input[type="text"],
#wpcf7-f6-o1 input[type="email"] {
  margin-top: 10px;
}

#wpcf7-f6-o1 textarea {
  width: 100%;
  padding: 10px 10px;
  margin-top: 10px;
}

.form-question {
  padding: 10px;
  width: 150px;
  border: var(--boxBorder);
  background-color: var(--boxBg);
  outline: var(--boxOutline);
  outline-offset: -5px;
  border-radius: 10px;
  font-size: 1.2rem;
}

.wpcf7-spinner {
  display: none;
}

#submit-button {
  padding: 10px;
  width: 100px;
  border: var(--boxBorder);
  background-color: var(--boxBg);
  outline: var(--boxOutline);
  outline-offset: -5px;
  height: auto;
  border-radius: 10px;
  margin-top: 15px;
}

#wpcf7-f6-o1 input[type="submit"] {
  background: none;
  border: none;
  font-family: var(--font);
  text-decoration: underline;
  cursor: pointer;
}

#wpcf7-f6-o1 input[type="submit"]:disabled {
  text-decoration: none;
  cursor: not-allowed;
}

#submit-button p {
  margin-top: 0;
  font-size: 1.2rem;
}
/* ここから埋め込みフォーム ------------------------------- */

/* ここまでフォームエリア ------------------------------------------------- */
/* ここからSNS ----------------------------------------------------------- */
.contact__sns-title {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 1rem;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 30px;
}

.contact__sns-title img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-right: 20px;
}

.contact__sns-list {
  display: flex;
  justify-content: space-around;
}

.contact__sns-item {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact__sns-label {
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  margin-right: -0.5rem;
}

.contact__sns-item img {
  width: 50px;
}
/* ここまでSNS ----------------------------------------------------------- */

/* ここからプライバシーポリシー -------------------------------------------- */
.contact__privacy-policy {
  display: none;
}

#privacy#inline-content {
  padding: 15px;
  font-size: 1.2rem;
}

#privacy#inline-content h2 {
  margin-top: 10px;
}

.contact__privacy-date {
  margin-top: 15px;
}

.contact__privacy-close--pc {
  margin-top: 15px;
  font-size: 1rem;
  text-align: center;
}

.contact__privacy-close--sp {
  display: none;
  margin-top: 15px;
  font-size: 1rem;
  text-align: center;
}
/* ここまでプライバシーポリシー -------------------------------------------- */
/* ここまでPC --------------------------------------------------------------------- */

/* ここからタブレット -------------------------------------------------------------- */
@media (max-width: 1023px) {
  .contact__title-area {
    min-width: 0;
    width: 70%;
    margin-bottom: 50px;
  }

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

  .contact__form-title h2 {
    font-size: 1.5rem;
  }
  .contact__br--sp {
    display: block;
  }

  .contact__submit-button {
    flex-direction: column;
    width: 80%;
    margin-top: 15px;
  }

  .contact__sns-list {
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
  }
  .contact__sns-item {
    width: 100%;
    padding-bottom: 30px;
  }
  .contact__form-item textarea {
    height: 200px;
    border-radius: 10px;
  }

  .contact__privacy-close--pc {
    display: none;
  }

  .contact__privacy-close--sp {
    display: block;
  }
}
/* ここまでタブレット -------------------------------------------------------------- */

/* ここからスマホ ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .contact__title-area {
    min-width: 0;
    width: 70%;
    margin-bottom: 50px;
  }

  .contact__title-image--pc {
    display: none;
  }

  .contact__title-image--sp {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  .contact__form-title {
    flex-direction: column;
  }

  .contact__form-title h2 {
    font-size: 1.5rem;
  }

  #wpcf7-f6-o1 input[type="text"],
  #wpcf7-f6-o1 input[type="email"] {
    width: 80%;
  }

  #wpcf7-f6-o1 textarea {
    width: 85%;
  }

  .contact__sns-list {
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
  }
  .contact__sns-item {
    width: 100%;
    padding-bottom: 30px;
  }
  .contact__form-item textarea {
    height: 200px;
    border-radius: 10px;
  }

  .contact__privacy-close--pc {
    display: none;
  }

  .contact__privacy-close--sp {
    display: block;
  }
}
/* ここまでスマホ ------------------------------------------------------------------ */

/* ここまでcontactページ ------------------------------------------------------------------- */

/* ここから投稿ページ */
.single-main {
  padding-top: 100px;
  background: url(../images/pattern_melon.png);
  background-size: 200px;
  background-repeat: repeat;
  padding-bottom: 50px;
}

.single-works-title {
  font-size: 2rem;
  font-family: var(--font);
  text-align: center;
  letter-spacing: 0.5rem;
  margin-left: -0.5rem;
  border: var(--boxBorder);
  outline: var(--boxOutline);
  background-color: #fff;
  outline-offset: -5px;
  border-radius: 10px;
  width: 350px;
  max-width: 80%;
  padding: 20px;
  margin: 30px auto;
}

.single-works-img {
  display: block;
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(2px 9px 13px #000000);
}

.single-works-caption {
  width: 70%;
  max-width: 80%;
  font-size: 1.5rem;
  font-family: var(--font);
  text-align: center;
  border: var(--boxBorder);
  outline: var(--boxOutline);
  background-color: #fff;
  outline-offset: -5px;
  border-radius: 10px;
  padding: 20px;
  margin: 30px auto 0 auto;
}

.single-pagenation {
  display: flex;
  justify-content: space-between;
  width: 50%;
  font-size: 1.2rem;
  margin: 20px auto;
  border: var(--boxBorder);
  outline: var(--boxOutline);
  background-color: #fff;
  outline-offset: -5px;
  border-radius: 10px;

  padding: 10px 20px;
}

.category-label {
  font-size: 1.2rem;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .single-works-img {
    width: 80%;
  }
}