@charset "utf-8";
:root {
  --black: #383838;
  color: var(--black);
  --font-color   : #212121;
  --font-size    : clamp(.875rem, 1vw, 1.125rem);
  --bg-img       : url("/img/bg08.png");
  --pd-content   : clamp(1.506027rem, 15vw, 220px);
  --pd-more      : 24px 64px;
  --title-size   : clamp(1.506027rem, 1.3vw, 2.25rem);
  --border-color : #d1d1d1;
}

html { scroll-behavior: smooth; }
body { margin: 0; color: var(--black); font-size: var(--font-size); font-family: mr-eaves-modern, sans-serif; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
/* body > *:not(.loadingBox) { opacity: 0; } */
body.loaded > *:not(.loadingBox) { opacity: 1; }
a { color: var(--black); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; }
.none { display: none; }
h1,ul,p { margin: 0; padding: 0; }
p { line-height: 2; letter-spacing: 1px; }
li { list-style: none; }
button { padding: 0; border: 0; font-size: var(--font-size); font-family: mr-eaves-modern, sans-serif; }
button:focus { outline: none; }
img { max-width: 100%; }
h2 { font-size: initial; }
.grid { display: grid; }
.flex { display: flex; }
.bg { position: relative; }

.bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1%;
  width: 101%;
  height: 100%;
  background-image: var(--bg-img);
  background-size: 10%;
  background-repeat: repeat;
  animation: loop .2s linear infinite;
  overflow: hidden;
  opacity: .4;
  z-index: -1;
}

@-webkit-keyframes loop {
  0% {
    background-position: 0;
    background-size: 9%
  }

  25% {
    background-size: 9.4%
  }

  50% {
    background-size: 9.2%
  }

  75% {
    background-size: 9.6%
  }

  to {
    background-position: 50%;
    background-size: 9.5%
  }
}

@keyframes loop {
  0% {
    background-position: 0;
    background-size: 9%
  }

  25% {
    background-size: 9.4%
  }

  50% {
    background-size: 9.2%
  }

  75% {
    background-size: 9.6%
  }

  to {
    background-position: 50%;
    background-size: 9.5%
  }
}

.stalker {
  pointer-events: none;
  position: fixed;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: rgba(0,0,0,0.8);
  border-radius: 50%;
  transform: translate(0,0);
  transition: transform .2s, width .5s, height .5s, top .5s, left .5s, background-color .5s;
  transition-timing-function: ease-out;
  z-index: 999;
}

.stalker.onLink {
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.3);
}

header {
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-height: 80px;
  height: 80px;
  padding: 0 1.25rem;
}

header .logoBox {
  /* display: none; */
}

.logoBox {
  display: flex;
  /* max-width: 240px; */
  /* width: 17.5vw; */
  /* min-width: 160px; */
  align-items: center;
  /* transform-origin:0 50%;
  transform: scale(1.3);
  transition: .5s; */
  /* height: 2.5rem; */
}

.logoBox.s {
  transform: scale(1);
}

.logoBox > img {
  width: auto;
  height: 100%;
}

.nav.linkBox {
  grid-auto-flow: column;
  grid-gap: 20px;
  align-items: center;
  font-size: var(--font-size);
}

.nav.linkBox li {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
}

.nav .timeticketLink {
  display: flex;
  gap: 4px;
}

.nav .timeticketLink img {
  max-width: 14px;
}

.nav.linkBox li a{
  font-weight: bold;
}

.profileBtn {
  background: none;
  cursor: pointer;
}

.linkBoxItemInsta img,
.linkBoxItemTwitter img {
  width: 100%;
}

.linkBoxItemInsta,
.linkBoxItemTwitter {
  /* width: 40px; */
}

.linkBoxItemInsta > a,
.linkBoxItemTwitter > a
{
  display: flex;
  /* padding: 8px; */
}

.linkBoxItemLine {
  width: auto;
}

.linkBoxItemLine > a {
  display: flex;
  align-items: center;
}

.heroImgBox {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  /* width: fit-content; */
  height: calc(100vh - 6.25rem);
  height: calc(100svh - (10.65625rem));
  text-align: center;
  overflow: hidden;
}

.heroImgBox .imgBox {
  position: relative;
  display: flex;
  padding-inline: 20px;
  height: 100svh;
}

.heroImgBox .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heroImgBox .textBox {
  box-sizing: border-box;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  padding: 16px 0;
  /* background: #fefefe; */
  font-size: clamp(1.25rem, 1.47vw, 1.5rem);
  font-weight: bold;
  /* color: #ccc; */
  line-height: 1;
  text-align: left;
  /* mix-blend-mode: color-dodge; */
  /* transform: translateX(50%); */
  /* transition: .5s; */
}

.heroImgBox .textBox p{
  /* transform: translateX(-5vw); */
  line-height: initial;
}

.loaded .heroImgBox .textBox {
  /* transform: translateX(0); */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 496px;
  gap: 20px;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.heroImgBox .textContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: fit-content;
  margin: auto;
}

.heroImgBox .logoBox {
  display: flex;
  position: relative;
  align-items: center;
  max-width: 600px;
  width: 100%;
  transform: none;
}

.heroImgBox .logoBox .catch{
  font-size: min(18vw,17rem);
  color: #27434c;
}

.heroImgBox .arrowBox {
  position: absolute;
  bottom: 0;
}

.heroImgBox .bigLogo {
  box-sizing: border-box;
  grid-column: 1 / 3;
  margin: -32px 0 0;
  padding: 16px 0;
  z-index: 1;
  position: relative;
  overflow: hidden;
}

.heroImgBox .bigLogo > img {
  transform: translateY(200%);
  transition: 1s;
}

.loaded .heroImgBox .bigLogo > img {
  transform: translateY(0) scale(1.05);
}

/* .heroImgBox > img.running {
  animation-name: scaleImg;
  animation-duration: 2s;
  animation-fill-mode: forwards;
} */

.heroImgBox > img.running.deleting {
  opacity: 0;
  transition: .5s;
}

@keyframes scaleImg {
  0% {
    transform: scale(1);
  }

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

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0
  }

}

.mvTxtBox .mvTxt{
  margin: 0;
  padding-inline: 1.25rem;
  font-size: 5.65625rem;
  line-height: 1;
  text-align: right;
}

.aboutApp {
  /* padding: 155px 0; */
  /* padding-block-start: 2.5rem; */
}

.aboutAppInner {
  text-align: right;
  padding-inline: 1.25rem;
  /* width: fit-content; */
  /* margin: auto; */
}

.aboutApp .titleBox {
  display: flex;
  align-items: end;
  gap: 8px;
  line-height: 1;
}

.aboutApp .titleBox p{
  line-height: 1;
}

.aboutApp .gray {
  color: #92959F;
}

.aboutApp .small {
  display: flex;
  margin: 20px 0 0;
}

.aboutApp .textBox {
  /* margin: 60px 0 0;  */
}

.aboutApp .textItem.en {
  margin: 25px 0 0;
  font-size: .75rem;
}

/* .intro {
  display: grid;
  place-content: center;
  height: calc(100vw / 3 - 20px);
} */

.booking {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 50px 0;
  /* background-image: linear-gradient(125deg,#ffe0f8,#a9c9ff); */
  background-image: linear-gradient(125deg,#ffaded,#6aa2ff);
  /* background: linear-gradient(270deg, #00daef, #bc67ff); */
	background-size: 200% 200%;
  align-items: center;
  animation: MoveGrad 5s ease infinite;
}

@keyframes MoveGrad {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.booking-atom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  width: 100%;
  height: 71px;
  padding: 0 50px;
  background-image: linear-gradient(90deg,#31c1bc,#36b906 50%,#31c1bc);
  background-size: 200% 100%;
  border-radius: 40px;
  color: #fefefe;
  transition: .2s;
  box-shadow: 0 3px 30px hsl(0deg 0% 71% / 30%);
}

.booking-atom:hover {
  text-decoration: none;
  /* background-image: linear-gradient(90deg,#36b906,#31c1bc 50%,#36b906); */
}

.booking-atom > img {
  max-width: 21px;
}

.booking-atom > span {
  font-size: 1.2rem;
}

/* section {
  padding: 40px 60px;
} */

/* section.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  background: #f1f8ff;
  color: #11263c;
  position: relative;
  overflow: hidden;
} */

/* section.about::before {
  content: "";
  position: absolute;
  box-shadow: inset 0 0 0 75vw #111;
  top: 50%;
  left: 50%;
  width: 150vw;
  padding-top: 150vw;
  border-radius: 50%;
  transform: translate(-50%, -50%);
} */

/* section.about.run::before {
  pointer-events: none;
  will-change: box-shadow, transform;
  animation: fade 1875ms forwards alternate;
} */

@keyframes fade {
  0% {
    box-shadow: inset 0 0 0 75vw #111;
  }
  20% {
    box-shadow: inset 0 0 0 75vw #111;
  }
  100% {
    box-shadow: inset 0 0 0 0 #111;
  }
}

#service {
  margin: 160px 0 0;
}

#service .titleBox {
  width: fit-content;
  margin: auto;
  text-align: center;
}

#service .titleBox .gray {
  color: #92959F;

}

.service {
  box-sizing: border-box;
  max-width: 1440px;
  padding: 0 0 0 220px;
  padding: 0 0 0 var(--pd-content);
  margin: 72px auto 0;
}

.service.product {
  padding: 0 var(--pd-content) 0 0;
}

.service .content {
  display: grid;
  gap: 80px;
  grid-template-columns: repeat(2, 1fr);
}

.service .content .textBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--font-size);
}

.service .content .textBox .title {
  font-size: clamp(20px, 4vw, 2.25rem);
}

.service .content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service .link,
.about .link {
  width: fit-content;
  margin: 24px 0 0;
  /* background-color: #efefef; */
  border: 1px solid var(--font-color);
  border-radius: 40px;
}

.service .link a,
.about .link a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 40px;
  line-height: 2;
}

.service .link img,
.about .link img {
  width: 16px;
}

.about {
  box-sizing: border-box;
  max-width: 1440px;
  padding: 0 var(--pd-content) 0 var(--pd-content);
  margin: 160px auto 0;
}

.about .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.about .content .title {
  font-size: var(--title-size);
}

.about.narita .content img {
  border-radius: 50% 57% 50% 68%;
}

.about.narita .textBox .title {
  margin-top: 0;
}

.about.narita .textBox .position {
  font-weight: bold;
}

/* .aboutInner {
  max-width: 90%;
  width: fit-content;
  margin: auto;
} */

/* .aboutTitle {
  font-size: min(4vw, 80px);
  line-height: 1.2;
  font-feature-settings: "palt" 1;
  margin: 0 0 40px;
} */

/* .aboutText {
  font-size: 2rem;
  font-weight: bold;
  line-height: 2;
} */

/* .about .linkBox {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 32px auto 0;
  width: 160px;
  height: 160px;
  padding: 16px 0 0;
  border-radius: 160px;
  background: #11263c;
} */

/* .about .flexBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  gap: 80px;
  margin: auto;
}

.about .linkBox > a {
  font-size: 1rem;
  font-weight: bold;
  color: #fefefe;
  text-decoration: none;
}

.about .linkBox > svg {
  max-width: 40px;
  width: 100%;
  max-height: max-content;
  transition: .5s;
}

.about .linkBox:hover > svg {
  transform: translateY(8px);
} */

.itemsMainImgBox {
  & img {
    width: 100%;
    max-height: 100vh;
    object-fit: cover;
  }
}

.itemsTitle {
  margin: 0;
  font-size: 15rem;
  text-align: center;
  line-height: 1;
}

.youtubeApp {
  padding: 80px;
}

.youtubeTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
  color: #ccc;
}

.youtubeItem {
  margin: 40px 0 0;
  text-align: center;
}

.reviews {
  padding: 80px 0;
  background: #11263c;
  color: #fefefe;
}

.reviewsTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
}

.reviewsContentBox {
  box-sizing: border-box;
  width: min(70% , 640px);
  margin: auto;
  padding: 60px 40px;
  font-size: var(--font-size);
}

.reviewsList {
  display: grid;
  gap: 120px;
}

.reviews .tx {
  font-size: var(--font-size);
  line-height: 1.8;
}

.reviews .name {
  text-align: center;
  color: #ccc;
  font-size: var(--font-size);
}

.reviews .quotationImg {
  margin: 40px 0 0;
  text-align: center;
}

.reviewsListItem {
  display: grid;
  gap: 16px;
}

.reviews .linkBox {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 32px auto 0;
  width: 160px;
  height: 160px;
  padding: 16px 0 0;
  border-radius: 160px;
  background: #f1f8ff;  
}

.reviews .linkBox > a {
  font-size: var(--font-size);
  font-weight: bold;
  color: #11263c;
  text-decoration: none;
}

.reviews .linkBox > a > span {
  display: block;
  transition: .5s;
}

.reviews .linkBox:hover > a > span {
  transform: translateX(4px);
}

.reviews .linkBox > svg {
  max-width: 40px;
  width: 100%;
  max-height: max-content;
  transition: .5s;
}

.worksApp {
  margin-block-start: 1.1rem;
}

.worksTitle {
  display: none;
}

.moreBox {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1 / 3;
  /* height: 25vw; */
  min-height: calc(100vw / 3 - 20px);
  /* min-height: calc(375px / 2); */
  /* padding: 40px; */
  position: relative;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

#service .moreBox,
#about .moreBox {
  margin: 160px 0 0;
  border-top: 1px solid var(--border-color);
}

/* #about .moreBox {
  border-bottom: 0;
} */

.moreBox a {
  box-sizing: border-box;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  max-width: 1200px;
  width: 100%;
  height: 100%;
  padding: var(--pd-more);
  /* border-radius: 40px; */
  font-size: var(--font-size);
  font-weight: bold;
  overflow: hidden;
}

.moreBox .title {
  font-size: clamp(20px, 4vw, 2.25rem);
}

.moreBox .para {
  font-weight: normal;
}

.moreBox:hover a {
  color: #fefefe;
}

.moreBox .icon {
  display: flex;
  gap: 4px;
  align-self: center;
  justify-self: flex-end;
  align-items: center;
  width: 160px;
  height: 4px;
  position: relative;
}

.moreBox .icon::before {
  content: "";
  width: 160px;
  height: 1px;
  background-color: #212121;
  transform: translateX(-24px);
  transition: .2s;
}

.moreBox:hover .icon::before {
  background-color: #fefefe;
  transform: none;
}

.moreBox .icon::after {
  content: "Works";
  font-size: 1.5rem;
  font-family: mr-eaves-xl-modern, sans-serif;
}

#service .moreBox .icon::after {
  content: "Service";
}

#about .moreBox .icon::after {
  content: "About";
}

.moreBox:hover .icon::after {
  /* border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #fefefe; */
  color: #fefefe;
}

.moreBox .text span {
  display: block;
  transition: .3s;
  position: relative;
}

/* .moreBox .text span::after {
  content: "写真をもっとみる";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-200%);
  white-space: nowrap;
} */

#service .moreBox .text span::after {
  content: "";
}

#about .moreBox .text span::after {
  content: "";
}

/* .moreBox:hover .text span {
  transform: translateY(-200%);
} */

.moreBox:hover .text span::after {
  transform: translateY(200%);
}

.moreBox .bg {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: url("/photo/_MG_0006.webp");
  background-size: cover;
  background-position: center;
  filter: brightness(50%);
  opacity: 0;
  transition: .9s;
}

#service .moreBox .bg {
  background-image: url("/photo/_MG_8933.webp");
}

#about .moreBox .bg {
  background-image: url("/photo/_L8A0615.webp");
}

.moreBox:hover .bg {
  opacity: 1;
}

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

.itemsApp .titleBox h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 5vw;
  line-height: 2;
}

.itemsApp .itemsBox {
  max-width: 860px;
  margin: 150px auto;
}

.itemsApp .itemTitle {
  /* font-size: 1.25rem; */
  font-size: 1rem;
}

.itemsApp .itemPrice {
  font-size: 1rem;
  font-size: .875rem;
}

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

.itemsApp .itemsListItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.itemsApp .itemsListItem .imgBox {
  box-shadow: 1px 1px 1px 1px #dcdcdc;
}

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

.itemsApp .itemPrice {
  font-weight: bold;
  font-family: mr-eaves-modern;
}

.price {
  padding: 0;
}

.price .title {
  text-align: center;
  color: #ccc;
  font-size: 2rem;
}

.priceInner {
  padding: 60px 0;
  background: #f1f8ff;
}

.priceList {
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1440px;
  margin: 40px auto 0;
}

.priceListItem {
  box-sizing: border-box;
  max-width: 400px;
  padding: 0 0 32px;
  font-size: var(--font-size);
  background: #fefefe;
  box-shadow: 0 3px 30px rgb(90 90 90 / 16%);
}

.priceListItemTitle {
  font-size: 2rem;
  font-weight: bold;
  color: #6c5ded;
  letter-spacing: 1px;
  font-feature-settings: "palt" 1;
  text-align: center;
  margin: 8px 0 0;
}

.priceListItemCopy {
  margin: 24px 0 0;
  text-align: center;
  font-weight: bold;
}

.priceListItemNote {
  width: fit-content;
  margin: 16px auto 0;
  font-size: .9rem;
  background: #f2f2f2;
  line-height: 1;
  padding: 8px 12px 6px;
  border-radius: 80px;
}

.priceListItemPrice {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 0;
  text-align: center;
}

.priceListItemPrice .price {
  font-size: 2.8rem;
  box-sizing: border-box;
  font-weight: bold;
  color: #6c5ded;
}

.prieListItemImg > img {
  width: 100%;
}

.priceListItemList {
  width: 320px;
  margin: 20px auto;
  padding-top: 22px;
  border-top: 1px solid #ccc;
}

.priceListItemList li {
  line-height: 1.85;
  position: relative;
}

.priceListItemList li::before {
  content: '';
  display: inline-block;
  left: 0;
  width: 8px;
  height: 8px;
  margin: 0 8px 0 0;
  border-radius: 8px;
  background-color: #6c5ded;
  /* position: absolute; */
}

.photoBox {
  /* grid-template-columns: repeat(auto-fit,minmax(375px,400px)); */
  /* grid-template-columns: repeat(auto-fit,minmax(375px,48%)); */
  /* grid-template-columns: repeat(4,1fr); */
  grid-template-columns: repeat(auto-fit,30px);
  grid-template-columns: repeat(auto-fit,60px);
  /* gap: 20px; */
  gap: .125rem;
  justify-content: end;
  /* grid-auto-rows: 300px; */
  /* grid-gap: 40px; */
  /* justify-content: space-evenly; */
  /* max-width: 1440px; */
  /* margin: 40px auto; */
  width: calc(100% - 40px);
  margin: 0 auto 2.5rem;
}

.photoBox .gridItem:nth-of-type(odd) {
  /* margin: -40px 0 0; */
}

.photoBox .gridItem:nth-of-type(even) {
  /* margin: 40px 0 0; */
}

.gridItem {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gridItem > img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.worksBox .worksBoxTitle {
  margin: 0;
  padding-inline: 1.25rem;
  font-size: 5.65625rem;
  line-height: 1;
  text-align: right;
}

.worksBox .outlineBox {
  text-align: right;
}

.worksBox .outlineBox .text{
  max-width: 19em;
  margin: 0 0 0 auto;
  padding-inline: 1.25rem;
  /* text-align: left; */
}

.worksItemBox {
  margin-block-start: 2.5rem;
  margin-block-start: 5rem;
  padding-inline: 1.25rem;
}

.worksItemBox .titleBox {
  position: sticky;
  top: 5rem;
  left: 0;
  padding-block-end: 5rem;
}

.worksItemBoxSubTitle {
  margin-block: 0;
  margin-inline-start: .5em;
}

.worksItemBoxTitle {
  margin: 0;
  font-size: 3rem;
  line-height: 1;
}

.worksContents {
  display: flex;
  justify-content: space-between;
}

.creatorBox {
  display: flex;
  gap: 2em;
  margin-inline-start: .5em;
}

.worksContents .imgBox {
  display: grid;
  width: 50%;
  margin: 0 0 0 auto;
  gap: 1rem;
}

.worksContents .imgBox .imgBoxItem {
  display: flex;
}

.worksContents .imgBox .imgBoxItem img {
  width: 100%;
}

.worksItemBox .textBox {
  width: 36em;
  margin-block-start: 2.5rem;
}



/* .price, */
.profile {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100vh;
  background: hsl(210, 100%, 99%);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .price {
  display: grid;
  grid-auto-rows: max-content;
  align-content: center;
  gap: 16px;
} */

/* .price[aria-hidden="true"], */
.profile[aria-hidden="true"] {
  display: none;
}

/* .price .closeBtn, */
.profile .closeBtn {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  padding: 16px;
}

.closeBtn > svg {
  width: 100%;
  height: 100%;
}

.profileBox {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  transform: translateY(-10px);
  gap: 40px;
  line-height: 1.8;
}

.profileBox > .imgBox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profileBox .textBox {
  display: flex;
  align-items: center;
}

.profileBox .textBoxInner {
  width: fit-content;
  margin: auto;
}

.profileBoxName {
  font-weight: bold;
  font-size: 1.4rem;
}

.scrollBox {
  position: fixed;
  right: 0;
  bottom: 0;
}

.arrowInner p {
  font-size: 12px;
  text-align: end;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.arrow {
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: #eee;
  position: relative;
  overflow: hidden;
}

.arrow::before {
  content: '';
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: #000;
  position: absolute;
  top: -150px;
  left: 0;
  -webkit-animation: arrow 2.5s ease 0s infinite normal;
  animation: arrow 2.5s ease 0s infinite normal;
}

footer {
  display: grid;
  align-items: center;
  margin: 100px 0 0 0;
  padding: 0 60px 50px;
  text-align: center;
}

footer .msg {
  margin-top: 80px;
  font-size: 1.4rem;
  font-weight: bold;
}

footer .nav.linkBox {
  display: flex;
  gap: 24px;
  justify-content: center;
  font-weight: bold;
}

footer .nav a {
  font-size: 1.2rem;
}

footer .sns {
  margin: 16px 0 0 0;
}

footer .bigLogo {
  margin: 80px 0 0;
}

@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}

@media screen and (max-width: 767px) {
  header.flex {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 20px;
    justify-content: center;
    padding: 20px 1rem;
    height: initial;
    max-height: initial;
  }

  header .logoBox {
    margin: auto;
    transform: none;
  }

  .nav.linkBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .scrollBox {
    display: none;
  }

  .heroImgBox {
    /* display: none; */
    height: calc(100svh - 8.5625rem);
    position: relative;
  }

  .loaded .heroImgBox .textBox {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    /* opacity: .5; */

    /* position: absolute; */
    /* top: auto; */
    /* bottom: 0; */
    /* width: 50%; */
    background: none;
    /* transform: translate(0px, -100%); */
    /* color: #fefefe; */
    /* font-size: min(7vw, 200px); */
    font-size: clamp(14px, 5vw, 200px);
    /* mix-blend-mode: overlay; */
  }

  .loaded .heroImgBox .textBox .arrowBox {
    display: none;
  }

  .heroImgBox .textBox p {
    transform: translateX(0);
  }

  .heroImgBox .imgBox {
    grid-column: 1 / 3;
  }

  .heroImgBox .imgBox img {
    min-height: 100vw;
    object-fit: cover;
  }

  .mvTxtBox .mvTxt {
    font-size: 3.5625rem;
  }

  .gridItem {
    /* grid-column: 1 / 3; */
  }

  .works {
    padding: 0px ;
  }

  .moreBox {
    height: auto;
  }

  .moreBox a {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 48px 20px;
  }

  .about .content {
    grid-template-columns: auto;
  }

  .aboutAppInner {
    padding: 0 20px;
  }

  .photoBox {
    /* grid-template-columns: 1fr;
    grid-template-columns: 1fr; */
  }

  .photoBox .gridItem:nth-of-type(even),
  .photoBox .gridItem:nth-of-type(odd) {
    margin: 0;
  }

  /* section {
    padding: 40px 20px;
  } */

  .service .content {
    grid-template-columns: auto;
  }

  .service .content .textBox {
    padding: 0 10px 0 0;
  }

  .service.product .content .textBox {
    padding: 0 0 0 10px;
  }

  section.about {
    height: initial;
  }

  .aboutInner {
    max-width: 375px;
  }

  .aboutTitle {
    font-size: min(5.5vw, 24px);
    margin: 0 0 24px;
  }

  .aboutText {
    font-size: 1rem;
    display: inline;
  }

  .about .flexBox {
    gap: 40px;
  }

  .about .linkBox {
    width: 120px;
    height: 80px;
  }

  .about .linkBox > a {
    font-size: .9rem;
  }

  .about .linkBox > svg {
    width: 20px;
  }

  .youtubeApp {
    padding: 40px;
  }

  .youtubeTitle {
    font-size: 1.5rem;
  }

  .youtubeItem > iframe {
    max-width: 100%;
    height: 44.618vw;
  }

  .reviews {
    padding: 40px 0;
  }

  .reviewsTitle {
    font-size: 1.5rem;
  }

  .reviews .quotationImg {
    margin: 20px 0 0 0;
  }

  .reviewsContentBox {
    width: 100%;
    padding: 40px 20px;
  }

  .reviews .tx {
    font-size: 1rem;
  }

  .reviews .name {
    font-size: .9rem;
  }

  .reviewsList {
    gap: 40px;
    max-width: 375px;
    margin: auto;
  }

  .priceList {
    flex-direction: column;
    align-items: center;
    margin: 20px 0 0;
    padding: 0 20px;
  }

  .worksTitle {
    position: static;
    margin: 40px auto 0;
    text-align: center;
    font-size: 2rem;
  }

  .worksContents .imgBox {
    width: 100%;
  }

  .worksItemBox .titleBox {
    position: static;
  }

  .worksItemBox .textBox {
    width: auto;
  }

  .creatorBox {
    flex-direction: column;
    gap: 0;
  }

  .itemsTitle {
    font-size: 5rem;
  }

  .itemsApp .itemsList {
    grid-template-columns: 1fr;
  }

  .itemsApp .itemsBox {
    margin: 1.25rem;
  }

  footer {
    margin: 3.5rem 0 0 0;
    padding: 0 1rem 3.5rem;
  }

}