/*mystyle.css*/
html {
  font-size: 62.5%;
  letter-spacing: 0.2em;
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 9.6rem;
  font-weight: 400;
  font-family: "Dawning of a New Day", sans-serif;
}

p {
  font-size: 2rem;
  line-height: 2;
}

.wrap-all {
  color: #7b7b7b;
  font-size: 2rem;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

header {
  color: #fff;
  font-size: 2rem;
  width: 100%;
  height: 90px;
  background-image: url(/wp-content/themes/AKWORKS_theme/library/images/common/background_header.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
}

.menu-wrap {
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  display: inline-block;
  margin: 0 0 0 15px;
  text-align: center;
  cursor: pointer;
}

.logo {
  width: 65%;
  height: auto;
}

nav ul {
  font-size: 2rem;
  width: 100%;
  padding-left: 0;
  list-style-type: none;
}

nav li {
  border: 3px solid #fff;
  margin: 0px 20px;
  padding: 10px 30px;
}

nav li:hover {
  opacity: 0.8;
}

img {
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transitionDefault);
  -webkit-tap-highlight-color: transparent;
}

section {
  padding: 150px 0;
}

/* animation */

#loading {
  position: fixed;
  inset: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loading.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loading img {
  width: 400px;
  height: auto;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.5s forwards;
}

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

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* animation */

/* main visual */
section#mainVisual {
  position: relative;
  padding: 0;
}

.swiper-pc,
.swiper-sp {
  display: none;
  /* JSで表示切替 */
}

.mv-pc .swiper-wrapper {
  display: flex;
}

.catch-text {
  font-family: "ryumin-pr6n", serif;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 1;
}

.catch-text p {
  color: #000;
  font-size: 3.6rem;
  letter-spacing: 0.2em;
}

/* main visual */

/* concept */
.concept {
  background-image: url(/wp-content/themes/AKWORKS_theme/library/images/common//bgimage01.png),
    url(/wp-content/themes/AKWORKS_theme/library/images/common//bgimage02.png),
    url(/wp-content/themes/AKWORKS_theme/library/images/common//bgimage03.png);
  background-position: 100% -770px, 0 20.5%, 100% 55%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 35% auto, 35% auto, 35% auto;
  overflow: hidden;
}

.concept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5em;
  align-items: start;
  position: relative;
  min-height: 1100px;
  padding-left: 100px;
}

.text-right .concept-title {
  color: #ded3ca;
  transform: translateY(-110px);
}

.text-right--1 p {
  transform: translateY(-120px);
}

.text-left--1 p {
  transform: translateY(100px);
}

.text-right--2 p {
  transform: translate(150px, -300px);
}

.image-right--1 {
  transform: translateY(-350px);
  z-index: 1;
  position: relative;
}

.image-left--2 {
  width: 120%;
  transform: translateY(-720px);
  z-index: 0;
  position: relative;
}

.image-left {
  grid-column: 1 / 2;
}

.image-right {
  grid-column: 2 / 3;
}

.text-right {
  grid-column: 2 / 3;
  text-align: left;
}

.concept-three-images {
  display: flex;
  justify-content: flex-start;
  gap: 3em;
  margin-top: -500px;
  margin-right: 150px;
}

.concept-three-images .image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.concept-three-images .image-center {
  transform: translateY(150px);
}

.concept-text {
  margin: 350px auto 300px;
  text-align: center;
}

.concept-two-images {
  position: relative;
  margin: 0 auto 450px;
}

.img-left {
  display: block;
  position: relative;
  z-index: 2;
  width: 50%;
  left: 3%;
  height: auto;
}

.img-right {
  position: absolute;
  top: 23%;
  left: 47%;
  z-index: 1;
  width: 50%;
  height: auto;
}

.swiper-pagination-bullet-active {
  background-color: #cddbcd !important;
}

/* concept */

/* price */
section#price-sec {
  text-align: center;
}

h2.price-title {
  color: #ced9e1;
  margin-bottom: -35px;
}

.menu-wrapper {
  background-image: url(/wp-content/themes/AKWORKS_theme/library/images/common/background_price.png);
  padding: 120px;
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 35%;
  background-color: #fff;
  border-radius: 30px;
  margin: 0 auto;
  padding: 50px;
}

h3 {
  font-size: 3.2rem;
  font-weight: 500;
}

.menu-item h3::after {
  content: "";
  display: block;
  width: 350px;
  height: 1px;
  background-color: #ced9e1;
  margin: 10px auto;
}

p.price {
  font-family: "Darker Grotesque", sans-serif;
  font-size: 3.2rem;
  font-weight: 500;
}

h4 {
  font-size: 2.4rem;
  font-weight: 500;
  margin: 40px 0 12px;
}

p.time,
p.delivery {
  font-size: 2rem;
}

p.time,
p.trip span {
  font-family: "Darker Grotesque", sans-serif;
}

.time,
.delivery,
.trip {
  margin: 0;
}

/* .menu .menu-item h3,
.menu .menu-item .price,
.menu .menu-item h4 {
  color: #ced9e1;
} */

.menu-item-box {
  display: flex;
  flex-direction: column;
  text-align: left;
}

span.size {
  font-size: 1.8rem;
}

.time span.size {
  font-size: 1.6rem;
  font-weight: 300;
}

.trip span.size {
  font-size: 1.6rem;
}

/* price */

/* reservation */
section#reservation {
  font-size: 2.4rem;
  text-align: center;
}

.reservation p {
  font-size: 2.4rem;
  margin: 220px 0 130px;
}

.line a {
  color: #fff;
  background-color: #ded3ca;
  padding: 20px 35px;
}

.line a:hover {
  opacity: 0.8;
}

/* reservation */

#footer {
  background-image: url(/wp-content/themes/AKWORKS_theme/library/images/common/background_footer.png);
  padding: 124px 0 94px;
  text-align: center;
}

.comment {
  color: #653131;
  font-size: 2.4rem;
  margin-bottom: 56px;
}

.photographer {
  color: #653131;
  margin-bottom: 174px;
}

.photographer .job {
  margin-bottom: 0;
  opacity: 24%;
}

.photographer .name {
  margin-top: 0;
  font-size: 2.4rem;
}

.copyright::before {
  content: "";
  display: block;
  width: 350px;
  height: 1px;
  background-color: #fff;
  margin: 10px auto;
}

.copyright {
  color: #fff;
}

@media screen and (max-width: 1440px) {
  .image-right--1 {
    transform: translateY(-250px);
  }

  .image-left--2 {
    transform: translateY(-550px);
  }

  .menu {
    width: 45%;
  }
}

@media screen and (max-width: 1280px) {
  .catch-text {
    top: 6%;
    left: 5%;
  }

  .catch-text p {
    font-size: 2.6rem;
  }

  p {
    font-size: 1.8rem;
    line-height: 2;
  }

  .concept {
    background-position: 100% -510px, 0 18.5%, 100% 50%;
  }

  .image-right--1 {
    transform: translateY(-250px);
  }

  .image-left--2 {
    width: 125%;
    transform: translateY(-550px);
  }

  .text-right--1 p {
    transform: translateY(-180px);
  }

  .text-left--1 p {
    transform: translateY(0px);
  }

  .text-right--2 p {
    transform: translate(80px, -280px);
  }

  .menu {
    width: 45%;
  }

  #footer {
    padding: 60px 0 30px;
  }

  .photographer {
    margin-bottom: 100px;
  }
}

@media screen and (max-width: 1024px) {
  section {
    padding: 100px 0;
  }

  .concept {
    background-position: 100% -440px, 0 17%, 100% 50%;
  }

  .concept-grid {
    gap: 3em;
  }

  p {
    font-size: 1.4rem;
  }

  /* .text-right--1 p {
        transform: translateY(-200px);
    } */

  .image-right--1 {
    transform: translateY(-200px);
  }

  .text-left--1 p {
    transform: translateY(-30px);
  }

  .image-left--2 {
    transform: translateY(-500px);
  }

  .text-right--2 p {
    transform: translate(80px, -250px);
  }

  .concept-text {
    margin: 220px auto 70px;
  }

  .concept-three-images {
    margin-top: -400px;
  }

  .menu {
    width: 65%;
  }
}

@media screen and (max-width: 768px) {
  section {
    padding: 70px 0;
  }

  .catch-text p {
    color: #000;
    font-size: 2.6rem;
  }

  .concept {
    background-position: 100% -255px, 0 17%, 100% 50%;
  }

  .concept-grid {
    gap: 2em;
    padding-left: 30px;
  }

  .text-right--1 p {
    width: 90%;
  }

  .text-left--1 p {
    transform: translateY(-80px);
  }

  .image-left--2 {
    transform: translateY(-400px);
  }

  .text-right--2 p {
    width: 73%;
    transform: translate(65px, -225px);
  }

  .concept-three-images {
    gap: 1em;
    margin-top: -300px;
  }

  .concept-three-images .image-center {
    transform: translateY(60px);
  }

  .concept-text {
    width: 61%;
    margin: 150px auto 70px;
  }

  .menu {
    width: 85%;
  }

  h4 {
    margin: 30px 0 12px;
  }
}

@media screen and (max-width: 480px) {
  #loading img {
    width: 300px;
    height: auto;
  }

  header {
    height: 75px;
  }

  .logo {
    width: 40%;
  }

  nav.gmenu {
    display: none;
  }

  .catch-text {
    top: 3%;
  }

  .catch-text p {
    font-size: 1.8rem;
  }

  .catch-text span {
    margin: 0;
  }

  h2 {
    font-size: 6rem;
  }

  .concept {
    background-position: 100% -145px, 0 28%, 100% 60%;
    background-size: 50% auto, 65% auto, 70% auto;
    padding-top: 150px;
  }

  .concept-grid {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    gap: 2em;
    min-height: auto;
  }

  /* .concept-item {
        transform: none !important;
        text-align: center;
    } */

  .text-right .concept-title {
    transform: translate(-110px, -500px);
  }

  .text-right--1 p {
    width: 55%;
    text-align: left;
    transform: translate(170px, -180px);
  }

  .image-left--1 {
    margin-right: 40px;
  }

  .image-right--1 {
    margin-left: 100px;
    transform: translateY(-300px);
  }

  .text-left--1 p {
    text-align: left;
    transform: translateY(290px);
  }

  .image-left--2 {
    width: 90%;
    transform: translateY(-150px);
  }

  .text-right--2 p {
    width: 63%;
    text-align: left;
    transform: translate(168px, -145px);
  }

  .concept-item img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .text-right,
  .text-left {
    text-align: center;
    padding: 0 1em;
  }

  .concept-three-images {
    gap: 1em;
    margin-top: -100px;
    margin-right: 30px;
  }

  .concept-three-images .image-center {
    transform: translateY(30px);
  }

  .concept-text {
    width: 60%;
    text-align: left;
    margin: 130px auto 150px;
  }

  .concept-two-images {
    margin: 0 auto 250px;
  }

  .img-left {
    width: 70%;
  }

  .img-right {
    top: 83%;
    left: 27%;
    width: 70%;
  }

  h2.price-title {
    margin-bottom: -15px;
  }

  .menu-wrapper {
    padding: 50px;
  }

  .menu {
    width: 70%;
  }

  h3 {
    font-size: 1.8rem;
  }

  .menu-item h3::after {
    width: 260px;
  }

  p.price {
    font-size: 1.8rem;
  }

  p.time {
    font-size: 1.8rem;
    font-weight: 500;
  }

  .time span.size {
    font-size: 1.2rem;
  }

  h4 {
    font-size: 1.4rem;
  }

  p.delivery {
    font-size: 1.4rem;
  }

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

  .trip span.size {
    font-size: 1rem;
  }

  section#reservation {
    font-size: 1.2rem;
    padding-top: 30px;
  }

  .reservation p {
    font-size: 1.4rem;
    margin: 70px 0 70px;
  }

  .comment {
    font-size: 1.4rem;
  }

  .photographer .job {
    font-size: 1.2rem;
  }

  .photographer .name {
    font-size: 1.4rem;
  }

  .copyright {
    font-size: 1rem;
  }
}

@media screen and (max-width: 412px) {
  .text-right--1 p {
    width: 56%;
    transform: translate(150px, -180px);
  }

  .text-left--1 p {
    text-align: left;
    transform: translateY(260px);
  }
}