@charset "utf-8";
html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 280px;
  background-color: #D9D9D9;
  font-family: "BIZ UDPMincho", serif;
  font-size: 16px;
  color: #4D1316;
  user-select: none;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}
header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url(../img/background_image.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

main {
  width: 100%;
  margin-top: 100vh;
  padding-top: 55vh;
  background: linear-gradient(0deg, #ffffff 0%, #ffffff 90%, rgb(255, 255, 255, 0) 100%);
}

footer {
  height: 45vh;
  padding: 85px 10px 0;
  background-color: #4D1316;
  color: #ffffff;
  position: relative;
  z-index: 0;
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(../img/footer_cover.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(1) opacity(0.3);
}
footer .content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
footer .logoImage {
  width: 230px;
  height: 130px;
  object-fit: cover;
}
footer .content ul {
  font-size: 12px;
}
footer .content li {
  margin-top: 10px;
}
footer #copyright {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 10px;
}
footer #copyright span {
  margin: 0 5px;
}

/* スクロールデザイン */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background-color: #D9D9D9;
}
::-webkit-scrollbar-thumb {
  background-color: #4D1316;
}

/* スクロールアニメーション */
@keyframes balloon {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-120px) rotate(10deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.scrollAnimation {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.scrollAnimation p {
  width: 60px;
  text-align: center;
  text-transform: capitalize;
  font-size: 12px;
  position: relative;
}
.scrollAnimation p::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  width: 60px;
  height: 60px;
  background: url(../img/red_balloon.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(5px 4px 9px #4e4e4e);
  animation-name: balloon;
  animation-delay: 0s;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transition: background-color 1s, box-shadow 1s;
}

/* トップスクロール */
.topScroll {
  position: sticky;
  bottom: 0;
  z-index: 10;
  width: 100%;
  height: 40px;
  margin-top: 10vh;
  background-color: #4D1316;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 1s;
}
#upScroll {
  opacity: 1;
}
.topScroll a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.topScroll img {
  width: 35px;
}
@media screen and (min-width:620px) {
  .topScroll {
    width: 120px;
    margin-left: auto;
  }
}

/* ナビゲーション */
.mainNav {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 100vh;
  padding-top: calc(5vh + 150px);
}
.mainNav ul {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.mainNav li {
  width: 100%;
  height: 80px;
  border-bottom: 1px solid rgb(77, 19, 22, 0.4);
  text-transform: capitalize;
  font-weight: 700;
}
.mainNav li a {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: padding 1s;
}
.mainNav li a:hover {
  padding: 0 0 0 30px;
}
@media screen and (min-width:620px) {
  .mainNav {
    width: 100%;
  }
  .mainNav li {
    width: auto;
  }
  .mainNav li a:hover {
    padding: 0 30px;
  }
}

/* トップ（ヘッダー） */
.pageTitle {
  height: 100%;
}
.pageTitle h1 {
  width: 100%;
  height: 80vh;
  padding-top: 5vh;
  display: flex;
  justify-content: center;
  align-items: start;
}
.pageTitle h1 img {
  width: 100%;
  max-width: 390px;
  height: 150px;
  object-fit: cover;
}

/* 各セクション（共通） */
main .contents {
  width: 100%;
  min-height: 300px;
  padding: 0 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s 0.1s, padding-top 1s 0.1s, visibility 0.1s;
}
main .visible {
  padding-top: 95px;
  opacity: 1;
  visibility: visible;
}
main .content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
main .contents h2 {
  width: 100%;
  height: 95px;
  border-bottom: 3px solid rgb(77, 19, 22);
  overflow: hidden;
  position: relative;
}
main .subtitle  {
  height: 120px;
}

/* sec1 */
#sec1 h3 {
  display: flex;
  justify-content: start;
  align-items: end;
  width: 100%;
  height: 300px;
  margin-top: 30px;
  padding: 20px;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  position: relative;
  z-index: 0;
}
#sec1 h3::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 300px;
  background: url(../img/concept_image.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
#sec1 p {
  margin-top: 20px;
  line-height: 3;
  font-size: 14px;
}

/* sec2 */
#sec2 iframe {
  width: 100%;
  height: 430px;
  margin-top: 30px;
}
#sec2 p {
  margin-top: 30px;
  line-height: 1.5;
}
#sec2 a {
  display: block;
  text-decoration: underline;
}
#sec2 ul {
  margin-top: 30px;
}
#sec2 li {
  margin-top: 10px;
  line-height: 1.5;
  font-size: 14px;
}

/* sec3 */
#sec3 img {
  width: 100%;
  max-width: 360px;
}
#sec3 .row {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
#sec3 .column {
  max-width: 320px;
  padding-top: 10px;
}
#sec3 .row1 .column:first-child {
  order: 2; /* 最初のcolumnを最後に表示 */
}
#sec3 h3 {
  font-size: 24px;
  font-weight: 700;
}
#sec3 p {
  margin-top: 20px;
  line-height: 1.8;
}
@media screen and (max-width:665px) {
  #sec3 .column,
  #sec3 img {
    max-width: none;
  }
}
#sec3 h4 {
  width: 100%;
  margin-top: 60px;
  padding: 10px 0;
  border-bottom: 1px solid rgb(77, 19, 22, 0.4);
  font-size: 24px;
  font-weight: 700;
}
#sec3 .scroll {
  width: 100%;
  margin-top: 20px;
  overflow: auto;
}
#sec3 .scroll::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
#sec3 table {
  width: 100%;
  table-layout: fixed;
}
#sec3 tr {
  height: 75px;
}
#sec3 tr:nth-child(even) {
  background-color: #ebebeb;
}
/* #sec3 td:nth-child(1) {
  position: sticky;
  left: 0;
} */
#sec3 tr:nth-child(even) td:nth-child(1) {
  background-color: #ebebeb;
}
#sec3 tr:nth-child(odd) td:nth-child(1) {
  background-color: #ffffff;
}
#sec3 .column1 {
  width: 180px;
  padding: 10px;
  padding-left: 0;
}
#sec3 .column2 {
  width: 480px;
  padding: 10px;
}
#sec3 .column2 span {
  display: flex;
  justify-content: start;
  align-items: center;
}
#sec3 .column2 span:nth-child(2),
#sec3 .column2 span:nth-child(3) {
  margin-top: 10px;
}

/* sec4 */
#sec4 .contentBox {
  width: 100%;
  position: relative;
}
#sec4 .price {
  width: 100%;
  height: 260px;
}
#sec4 .price1 {
  margin-top: 10px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  background: url(../img/price_image1.jpg);
  background-position: 50% 80%;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 33%, 0% 75%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 33%, 0% 75%);
}
#sec4 .price2 {
  position: absolute;
  top: 90px;
  left: 0;
  display: flex;
  justify-content: end;
  align-items: end;
  flex-wrap: wrap;
  background: url(../img/price_image2.jpg);
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-clip-path: polygon(0% 42%, 100% 0%, 100% 100%, 0% 85%);
    clip-path: polygon(0% 42%, 100% 0%, 100% 100%, 0% 85%);
}
#sec4 .price3 {
  margin-top: 55px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  background: url(../img/price_image3.jpg);
  background-position: 50% 10%;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-clip-path: polygon(0% 0%, 100% 15%, 100% 40%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 15%, 100% 40%, 0% 100%);
}
#sec4 .price4 {
  position: absolute;
  top: 108px;
  left: 0;
  display: flex;
  justify-content: end;
  align-items: end;
  flex-wrap: wrap;
  background: url(../img/price_image4.jpg);
  background-position: 50% 10%;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-clip-path: polygon(0% 60%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 60%, 100% 0%, 100% 100%, 0% 100%);
}
#sec4 .price h4 {
  width: 100%;
  height: 100%;
  padding: 10px;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  background-color: rgb(63, 63, 63, 0.4);
  /* background: linear-gradient(90deg, rgb(77, 19, 22, 0.8) 0%, rgb(77, 19, 22, 0.8) 75%, rgb(77, 19, 22, 0) 100%); */
}
#sec4 .price1 h4 {
  padding-top: 20px;
}
#sec4 .price2 h4 {
  text-align: end;
  padding-top: 160px;
}
#sec4 .price3 h4 {
  padding-top: 40px;
}
#sec4 .price4 h4 {
  text-align: end;
  padding-top: 160px;
}
#sec4 .price h4 span {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 400;
}
#sec4 .others_price {
  margin-top: 160px;
}
#sec4 .others_price dt {
  margin-top: 50px;
  line-height: 1.5;
  font-size: 24px;
}
#sec4 .others_price dt span {
  display: block;
  font-size: 16px;
}
#sec4 .others_price dd {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  background-color: #ebebeb;
  font-size: 20px;
}

/* sec5 */
#sec5 .officialLine {
  width: 100%;
  height: 100px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sec5 .officialLine a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 200px;
  max-width: 270px;
  height: 55px;
  padding: 0 5px;
  background-color: #00B900;
  box-shadow: 2px 2px 8px -3px #4e4e4e;
  border-radius: 2px;
  color: #ffffff;
}
#sec5 .buttonIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background-color: #ffffff;
  box-shadow: 0 0 8px -2px #4e4e4e inset;
  border-radius: 100%;
}
#sec5 .buttonIcon img {
  width: 30px;
}
#sec5 .content ul {
  margin-top: 20px;
}
#sec5 .content li {
  display: flex;
  justify-content: start;
  align-items: start;
  margin-top: 10px;
  line-height: 1.5;
  font-size: 14px;
}
#sec5 .content li span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  min-width: 25px;
  height: 25px;
  margin-right: 5px;
  transform: rotate(349deg);
  border: 2px solid rgb(77, 19, 22, 0.4);
  border-radius: 100%;
}