@charset "UTF-8";
@import url("global.css");
body {
  background-color: #F5F3F0;
}

#toparea {
  height: min(100vh,800px);
  position: relative;
  overflow: hidden;
}
#toparea::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../concept/img/zarazara.png") no-repeat left center;
  background-size: cover;
  z-index: 1;
  opacity: .5;
}
#toparea .bg {
  height: 100%;
}
#toparea .bg img.objectfit {
  object-position: 5% 50%;
}
#toparea .topcatch {
  position: absolute;
  z-index: 2;
  left: 14%;
  top: 50%;
  translate: 0 -50%;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: .08em;
  opacity: 0;
  color: #fff;
  font-size: clamp(30px, 3.8vw, 45px);
  font-weight: 400;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#toparea .topcatch small {
  display: inline-block;
  font-size: 50%;
  letter-spacing: .08em;
}
#toparea .topcatch span {
  opacity: 0;
  display: inline-block;
}
#toparea .topcatch.appeartext span {
  animation: text_anime 1s ease-out 0s both;
}

@keyframes text_anime {
  0% {
    opacity: 0;
    transform: translate(-5px, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.sectitle {
  display: flex;
  align-items: center;
  line-height: 1.5;
}
.sectitle span {
  display: block;
}
.sectitle .en {
  font-size: clamp(15px, 2vw, 18px);
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: #727272;
}
.sectitle .en::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 10px;
  background-color: #727272;
  display: block;
}
.sectitle .en::after {
  content: "";
  width: 60px;
  height: 1px;
  background-color: #c8c8c8;
  display: block;
  margin-inline: 15px;
}
.sectitle .ja {
  font-size: 17px;
  font-weight: 700;
}

.conceptbody {
  position: relative;
  padding-block: 120px 170px;
}
.conceptbody .concept {
  max-width: 640px;
  margin-inline: auto min(360px,23vw);
}
.conceptbody .concept .sectitle {
  margin-bottom: 40px;
}
.conceptbody .concept .text {
  line-height: 2;
  font-size: 106%;
}
.conceptbody .concept .text p + p {
  margin-top: 30px;
}
.conceptbody .image {
  position: absolute;
  overflow: hidden;
  z-index: 3;
}
.conceptbody .image figure {
  height: 105%;
}
.conceptbody .image1 {
  top: 110px;
  left: 0;
  width: 20%;
  height: 440px;
}
.conceptbody .image2 {
  top: max(-120px,calc(-1 * 8vw));
  right: 50%;
  margin-right: -44%;
  width: 26%;
  max-width: 490px;
  height: min(440px,30vw);
}
.conceptbody .image3 {
  bottom: 80px;
  right: 3%;
  width: 15%;
  max-width: 290px;
  height: 270px;
}

#area {
  max-width: 1400px;
  margin: 0 auto 120px;
  background-color: #3E4443;
  color: #fff;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  padding: 70px 0 70px min(90px,6.5vw);
}
#area .bg {
  position: absolute;
  top: 0;
  height: 127%;
  right: min(0px,calc(100vw - 1400px));
  z-index: 0;
}
#area .bg img {
  object-position: top right;
}
#area .main {
  position: relative;
  max-width: 680px;
  z-index: 1;
}
#area .main .catch {
  font-size: 27px;
  font-weight: 600;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1.7;
  margin-bottom: 20px;
  word-break: keep-all;
}
#area .main .text {
  letter-spacing: .02em;
}
#area .main .area {
  border: #727272 1px solid;
  border-radius: 3px;
  padding: 30px 20px 30px 40px;
  margin-top: 50px;
}
#area .main .area .title {
  display: flex;
  align-items: flex-end;
  opacity: .7;
  line-height: 25px;
}
#area .main .area .title .en {
  display: flex;
  align-items: flex-end;
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 600;
}
#area .main .area .title .en::after {
  content: "";
  display: block;
  width: 1px;
  background-color: #fff;
  height: 20px;
  margin-inline: 15px;
}
#area .main .area .title .ja {
  font-size: 15px;
  font-weight: 700;
}
#area .main .area dl {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
#area .main .area dl dt {
  background-color: #fff;
  white-space: nowrap;
  color: #303030;
  border-radius: 3px;
  padding: 2px 11px 4px 12px;
  font-size: 14px;
  font-weight: 700;
}
#area .main .area dl dd {
  font-size: 14px;
  padding-top: 1px;
}

.bgimage {
  height: 640px;
  overflow: hidden;
}
.bgimage figure {
  height: 105%;
}

#policy {
  --headerheight: 90px;
  margin-top: 130px;
}
#policy .sectitle .ja {
  font-size: 34px;
  margin-top: 52px;
}
#policy .policy {
  display: flex;
  position: relative;
  margin-top: 120px;
}
#policy .policy .imagebox {
  width: 50%;
  flex-shrink: 0;
  position: relative;
}
#policy .policy .imagebox .image {
  position: sticky;
  height: calc(100vh - var(--headerheight));
  top: var(--headerheight);
}
#policy .policy .imagebox .image .imagelist {
  position: relative;
  height: 100%;
  width: 100%;
}
#policy .policy .imagebox .image .imagelist li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.8s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.8s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: grayscale(10);
  opacity: 0;
}
#policy .policy .imagebox .image .imagelist li.show {
  filter: none;
  opacity: 1;
}
#policy .policy .imagebox .image .imagelist li:first-child {
  opacity: 1;
}
#policy .policy .policyblock {
  position: relative;
  z-index: 1;
  width: 50%;
  text-align: left;
  box-sizing: border-box;
  padding-inline: 9vw;
}
#policy .policy .policyblock #policytext ul {
  counter-reset: number 0;
  padding-top: 50vh;
}
#policy .policy .policyblock #policytext ul li {
  counter-increment: number 1;
  height: 100vh;
  padding-bottom: 50vh;
  align-content: center;
  transition: all .7s linear 0s;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(30px);
}
#policy .policy .policyblock #policytext ul li:last-of-type {
  padding-bottom: 0;
}
#policy .policy .policyblock #policytext ul li.show {
  opacity: 1;
  filter: none;
  transform: none;
}
#policy .policy .policyblock #policytext ul li .spimage {
  display: none;
}
#policy .policy .policyblock #policytext ul li .title {
  font-size: min(30px,2.5vw);
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
  margin-bottom: 30px;
}
#policy .policy .policyblock #policytext ul li .title::before {
  content: "Policy 0" counter(number);
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  display: block;
}
#policy .policy .policyblock #policytext ul li .text {
  line-height: 2;
}
#policy .policy .policyblock #policytext ul li .text p + p {
  margin-top: 20px;
}

.nextlink {
  max-width: 1000px;
  margin: 140px auto 120px;
}
.nextlink a {
  display: block;
  border-top: #727272 1px solid;
  border-bottom: #727272 1px solid;
  padding: 25px 20px;
  display: flex;
  align-items: center;
  position: relative;
  gap: min(5vw,60px);
}
@media (any-hover: hover) {
  .nextlink a:hover .main .title {
    color: #A49375;
  }
  .nextlink a:hover .button {
    translate: 10px 0;
    background-color: #A49375;
    color: #fff;
  }
}
.nextlink a .image {
  width: 370px;
  max-width: 40%;
  height: 250px;
}
.nextlink a .main {
  padding-bottom: 10px;
}
.nextlink a .main::before {
  content: "Next Page";
  color: #727272;
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 500;
}
.nextlink a .main .title {
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  margin-block: 10px 20px;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.nextlink a .button {
  position: absolute;
  bottom: 25px;
  right: 20px;
  width: 150px;
  line-height: 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-inline: 15px 10px;
  background-color: #fff;
  border-radius: 100px;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 13px;
  font-weight: 700;
}
.nextlink a .button::after {
  content: "\f061";
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  font-size: 11px;
  display: block;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .conceptbody {
    padding-block: 28vw 150px;
  }
  .conceptbody .concept {
    margin-inline: 4vw 0;
  }
  .conceptbody .image1 {
    top: -10vw;
    left: 4vw;
    width: 35%;
    height: 28vw;
  }
  .conceptbody .image2 {
    top: -3vw;
    right: 0;
    margin: 0;
    width: 36%;
    height: 35vw;
  }
  .conceptbody .image3 {
    bottom: 80px;
    right: 3%;
    width: 20%;
    height: 24vw;
  }

  #area {
    padding-left: 5vw;
  }
  #area .bg {
    width: 480px;
    right: calc((200px - 10vw) * -1);
  }
  #area .main {
    max-width: 60%;
  }
  #area .main .area {
    padding-left: 30px;
    margin-top: 40px;
  }

  .bgimage {
    height: 600px;
  }

  #policy .sectitle .ja {
    font-size: 30px;
    margin-top: 45px;
  }
  #policy .policy .policyblock {
    padding-inline: 0;
  }
  #policy .policy .policyblock #policytext {
    width: 35vw;
    margin-inline: auto;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #toparea .topcatch {
    left: 12%;
    top: 23%;
    translate: none;
  }
  #toparea .bg figure {
    height: 110%;
  }

  .conceptbody {
    padding-block: 25vw 90px;
  }
  .conceptbody .concept {
    margin-inline: 0;
  }
  .conceptbody .image figure {
    height: 110%;
  }
  .conceptbody .image1 {
    top: -20vw;
    border-radius: 2px;
  }
  .conceptbody .image2 {
    top: -8vw;
    width: 40%;
    height: 39vw;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }
  .conceptbody .image3 {
    display: none;
  }

  #area {
    margin: 0 auto 100px;
    padding: 60px 5vw;
  }
  #area .bg {
    top: -9%;
    height: 61%;
    right: -20px;
  }
  #area .bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(62, 68, 67, 0) 75%, #3e4443 95%);
  }
  #area .main {
    max-width: none;
  }
  #area .main .catch {
    font-size: 26px;
    width: 55%;
  }
  #area .main .text {
    width: 60%;
  }

  .bgimage {
    height: 440px;
  }
  .bgimage figure {
    height: 110%;
  }

  #policy {
    margin-top: 100px;
  }
  #policy .sectitle .ja {
    font-size: 27px;
    margin-top: 40px;
  }
  #policy .policy {
    margin-top: 80px;
  }
  #policy .policy .policyblock #policytext {
    width: 40vw;
  }
  #policy .policy .policyblock #policytext ul {
    padding-top: 20vh;
  }
  #policy .policy .policyblock #policytext ul li {
    padding-bottom: 30vh;
  }
  #policy .policy .policyblock #policytext ul li .title {
    font-size: min(24px,2.9vw);
  }

  .nextlink {
    margin: 100px auto 80px;
  }
  .nextlink a {
    padding: 25px 10px;
    align-items: stretch;
  }
  .nextlink a .image {
    height: 200px;
  }
  .nextlink a .main {
    padding-block: 15px 0;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #toparea {
    height: min(100vh,560px);
  }
  #toparea .topcatch {
    left: 11%;
    top: 20%;
  }

  .sectitle {
    display: block;
  }
  .sectitle .en {
    margin-bottom: 5px;
  }
  .sectitle .en::before {
    width: 4px;
    height: 4px;
    margin-right: 7px;
  }
  .sectitle .en::after {
    display: none;
  }
  .sectitle .ja {
    font-size: 18px;
  }

  .conceptbody {
    padding-block: 24vw 70px;
  }
  .conceptbody .concept .sectitle {
    margin-bottom: 30px;
  }
  .conceptbody .concept .text p + p {
    margin-top: 20px;
  }
  .conceptbody .concept .text br {
    display: none;
  }
  .conceptbody .image1 {
    top: -25vw;
    left: 5vw;
    width: 35%;
    height: 32vw;
  }
  .conceptbody .image2 {
    width: 45%;
    height: 43vw;
  }
  .conceptbody .image3 {
    display: none;
  }

  #area {
    margin: 0 auto 80px;
    padding: 40px 5vw;
  }
  #area .bg {
    top: -65px;
    height: 360px;
    right: -18px;
  }
  #area .bg::before {
    background: linear-gradient(to bottom, rgba(62, 68, 67, 0) 69%, #3e4443 87%);
  }
  #area .main {
    position: relative;
    max-width: none;
    z-index: 1;
  }
  #area .main .catch {
    font-size: 23px;
    margin-bottom: 25px;
  }
  #area .main .text {
    width: auto;
  }
  #area .main .area {
    margin-top: 35px;
    padding: 25px 5vw;
  }
  #area .main .area dl {
    margin-top: 15px;
    display: block;
  }
  #area .main .area dl dt {
    padding: 1px 11px 3px 12px;
    font-size: 13px;
    width: fit-content;
    margin-bottom: 8px;
  }
  #area .main .area dl dd {
    font-size: 12px;
    padding-top: 0;
  }

  .bgimage {
    display: none;
  }

  #policy {
    margin-top: 0;
  }
  #policy .sectitle .ja {
    font-size: 24px;
    margin-top: 12px;
  }
  #policy .policy {
    display: block;
    margin-top: 40px;
  }
  #policy .policy .imagebox {
    display: none;
  }
  #policy .policy .policyblock {
    width: auto;
    padding-inline: 5vw;
  }
  #policy .policy .policyblock #policytext {
    width: auto;
    margin-inline: auto;
  }
  #policy .policy .policyblock #policytext ul {
    padding-top: 0;
  }
  #policy .policy .policyblock #policytext ul li {
    height: auto;
    padding-bottom: 0;
    align-content: start;
    opacity: 1;
    filter: none;
    transform: none;
    margin-bottom: 70px;
  }
  #policy .policy .policyblock #policytext ul li:last-of-type {
    padding-bottom: 0;
  }
  #policy .policy .policyblock #policytext ul li .spimage {
    display: block;
    overflow: hidden;
    height: auto;
    aspect-ratio: 10 / 7;
    margin-inline: -5vw;
    margin-bottom: 30px;
  }
  #policy .policy .policyblock #policytext ul li .spimage figure {
    height: 110%;
  }
  #policy .policy .policyblock #policytext ul li .title {
    font-size: min(24px,5.5vw);
    margin-bottom: 25px;
  }
  #policy .policy .policyblock #policytext ul li .title::before {
    font-size: 15px;
    margin-bottom: 5px;
  }
  #policy .policy .policyblock #policytext ul li .text {
    line-height: inherit;
  }

  .nextlink {
    margin: 70px auto 60px;
  }
  .nextlink a {
    padding: 22px 10px;
    gap: min(5vw,60px);
  }
  .nextlink a .image {
    height: 100px;
  }
  .nextlink a .main {
    padding-block: 5px 0;
  }
  .nextlink a .main .title {
    font-size: min(18px,4.5vw);
    margin-block: 5px 0;
    transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
    -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .nextlink a .main dd:not([class]) {
    display: none;
  }
  .nextlink a .button {
    bottom: 25px;
    right: 10px;
    width: 120px;
    line-height: 24px;
    padding-inline: 12px 8px;
    font-size: 11px;
  }
  .nextlink a .button::after {
    font-size: 10px;
  }
}

/*# sourceMappingURL=concept.css.map */