@charset "utf-8";

.lowerBtn{
  background-color: #fff;
  color: #4d4d4d;
  font-size: 12px;
  padding-block: 1em;
  padding-right: 1em;
}
.lowerBtn::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: 11px;
  height: 10px;
  background-color: #666;
  -webkit-mask-image: url(../../img/common/icon_arrow.svg);
  mask-image: url(../../img/common/icon_arrow.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  transition: .4s ease;
  z-index: 1;
}
.lowerBtn::before{
  background-color: #ff8733;
}

.clipImg{
  filter: blur(5px);
  clip-path: inset(0 0 100% 0);
  transition: 1.8s cubic-bezier(0.24, 0.53, 0.2, 1);
}
.clipImg.inview{
  filter: blur(0);
  clip-path: inset(0);
}

.introSecImg img {
  /*clip-path: inset(0 0 100% 0);*/
  transition: 1s cubic-bezier(0.22, 0.44, 0.36, 1);
}
.introSecImg img.inview {
  clip-path: inset(0);
}

.introFigure[data-move="l"] {
  animation: floating01 3s ease-in-out infinite alternate-reverse;
}
.introFigure[data-move="r"] {
  animation: floating02 3.4s ease-in-out infinite alternate-reverse;
}
@keyframes floating01 {
  0% {
    transform: translate(-10%,-8%) scale(.95);
  }
  50% {
    transform: translateX(0%, 8%) scale(1);
  }
  100% {
    transform: translateX(-8%, 10%) scale(1.05);
  }
}
@keyframes floating02 {
  0% {
    transform: translate(-8%,10%) scale(.95);
  }
  50% {
    transform: translateX(8%, 0%) scale(1);
  }
  100% {
    transform: translateX(-10%, -8%) scale(1.05);
  }
}

@media (hover: hover) and (pointer: fine) {
  .lowerBtn:hover{
    border-color: #444;
  }
  .lowerBtn:hover::after{
    background-color: #fff;
  }
}

@media screen and (max-width: 768px) {
  .lowerBtn{
    font-size: 12px;
  }
}

/* loading
---------------------------------------------- */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: .6s;
  z-index: 10001;
}
.loading.is-hide {
  opacity: 0;
  visibility: hidden;
}
.loading__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 1s;
  z-index: 1;
}
.loading.is-active .loading__icon {
  opacity: 1;
}
.loading__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff6900;
  transition: .8s;
  z-index: 0;
}
.loading.is-active02 .loading__bg {
  opacity: 0;
}

/* intro
---------------------------------------------- */
.intro {
  padding-block: clamp(150px, 8.46rem + 3.88vw, 210px) clamp(80px, 3.18rem + 7.77vw, 200px);
  position: relative;
  z-index: 0;
}

.introSec {
  position: relative;
  z-index: 0;
}

.introSecHead,
.introSecBody {
  max-width: 1560px;
}

.introSec__copy {
  font-size: clamp(22px, 0.21rem + 2.43vw, 50px);
  letter-spacing: 0.05em;
  line-height: 1.78;
  position: relative;
  z-index: 0;
}
.introSec__copy::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 100px;
  transform: rotate(45deg);
  transform-origin: bottom;
  background-color: #ff6900;
  z-index: 0;
}

.introFigure {
  position: absolute;
  z-index: -1;
}
.introFigure--gray {
  width: 122px;
}

/* introSec01 */
.introSec01 .introSecHead {
  display: grid;
  grid-template-columns: 1fr calc(650 / 1560 * 100%);
  gap: 70px 5%;
}
.introSec01 .introHead {
  padding-top: 12%;
}
.introSec01 .introSec__copy {
  padding-left: 3em;
  opacity: 0;
  transform: translate(-10px, 0);
  transition: 1s 2.8s cubic-bezier(0.22, 0.44, 0.36, 1);
}
.loaded .introSec01 .introSec__copy {
  opacity: 1;
  transform: translate(0, 0);
}
.introSec01 .introSec__copy::before {
  top: -15%;
  left: 0;
}

.introSec01 .introSecHead .introSecImg img {
  transition-delay: 3s;
}
.loaded .introSec01 .introSecHead .introSecImg img {
  clip-path: inset(0);
}

.introSec01 .introSecBody {
  display: flex;
  align-items: flex-end;
  gap: 60px calc(160 / 1560 * 100%);
  margin-top: calc(-390 / 1560 * 100%);
}
.introSec01 .introSecBody .introSecImg01 {
  width: calc(559 / 1560 * 100%);
  margin-bottom: calc(170 / 1560 * 100%);
}
.introSec01 .introSecBody .introSecImg02 {
  width: calc(720 / 1560 * 100%);
}

.introSec01 .introFigure01 {
  width: calc(265 / 1920 * 100%);
  top: 18%;
  left: 30%;
}
.introSec01 .introSecBody .introSecImg01 .introFigure {
  bottom: -7%;
  left: -10%;
}
.introSec01 .introSecBody .introSecImg02 .introFigure {
  width: calc(411 / 720 * 100%);
  bottom: -40%;
  right: -20%;
}

/* introSec02 */
.introSec02 {
  margin-top: clamp(150px, 6.34rem + 12.94vw, 350px);
}
.introSec02 .introSecHead {
  display: grid;
  grid-template-columns: calc(650 / 1560 * 100%) 1fr;
  gap: 70px calc(260 / 1560 * 100%);
}
.introSec02 .introHead {
  margin-top: calc(150 / 650 * 100%);
}
.introSec02 .introSec__copy {
  padding-right: 1em;
}
.introSec02 .introSec__copy::before {
  bottom: -5%;
  right: 25%;
}

.introSec02 .introSecBody {
  display: flex;
  align-items: flex-end;
  gap: 60px calc(130 / 1560 * 100%);
  margin-top: calc(-380 / 1560 * 100%);
}
.introSec02 .introSecBody .introSecImg01 {
  width: calc(620 / 1560 * 100%);
  margin-left: calc(160 / 1560 * 100%);
}
.introSec02 .introSecBody .introSecImg02 {
  width: calc(559 / 1560 * 100%);
  margin-bottom: calc(160 / 1560 * 100%);
}

.introSec02 .introSecHead .introSecImg .introFigure {
  width: calc(305 / 650 * 100%);
  top: -18%;
  left: 30%;
  z-index: 1;
}
.introSec02 .introSecBody .introSecImg01 .introFigure {
  width: calc(360 / 720 * 100%);
  bottom: -40%;
  left: -20%;
}
.introSec02 .introSecBody .introSecImg02 .introFigure {
  top: -7%;
  right: -10%;
}

/* introSec03 */
.introSec03 {
  margin-top: clamp(150px, 6.49rem + 12.3vw, 340px);
}
.introSec03 .introSecHead {
  display: grid;
  grid-template-columns: 1fr calc(559 / 1560 * 100%);
  gap: 70px 5%;
}
.introSec03 .introSec__copy {
  padding-left: 3em;
}
.introSec03 .introSec__copy::before {
  top: -15%;
  left: 0;
}

.introSec03 .introSecBody {
  display: flex;
  align-items: flex-end;
  gap: 60px calc(160 / 1560 * 100%);
  margin-top: calc(-170 / 1560 * 100%);
}
.introSec03 .introSecBody .introSecImg01 {
  width: calc(740 / 1560 * 100%);
  margin-bottom: calc(200 / 1560 * 100%);
}
.introSec03 .introSecBody .introSecImg02 {
  width: calc(500 / 1560 * 100%);
}

.introSec03 .introSecHead .introFigure {
  top: -8%;
  left: -15%;
  z-index: 1;
}
.introSec03 .introSecBody .introSecImg01 .introFigure {
  width: calc(392 / 740 * 100%);
  top: -30%;
  right: -20%;
}
.introSec03 .introSecBody .introSecImg02 .introFigure {
  width: calc(283 / 500 * 100%);
  bottom: -40%;
  right: -30%;
  z-index: 1;
}


.introBtnBox {
  margin-top: 180px;
}
.introBtnBox__text {
  font-size: clamp(22px, 0.21rem + 2.43vw, 50px);
  letter-spacing: 0.05em;
  line-height: 1.78;
  text-align: center;
}

.conceptBtn {
  max-width: 350px;
  background-color: #ff8733;
  border: 1px solid #ff8733;
  color: #fff;
  font-size: 24px;
  letter-spacing: 0.075em;
  margin-top: 50px;
  margin-inline: auto;
  padding-block: 1em;
  padding-right: 0.5em;
}
.conceptBtn::before {
  background-color: #fff;
}
.conceptBtn .text {
  position: relative;
  z-index: 0;
}
.conceptBtn .text::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -24%;
  transform: translateY(-50%);
  width: 11px;
  height: 10px;
  background-color: #fff;
  -webkit-mask-image: url(../../img/common/icon_arrow.svg);
  mask-image: url(../../img/common/icon_arrow.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  transition: .4s ease;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .conceptBtn:hover {
    color: #ff6900;
  }
  .conceptBtn:hover .text::after {
    background-color: #ff6900;
  }
}

@media screen and (max-width: 960px) {
  .introSec__copy::before {
    height: 80px;
  }
}

@media screen and (max-width: 768px) {
  .introSecHead,
  .introSecBody {
    width: 100%;
    max-width: 560px;
  }

  .introHead {
    width: calc(320 / 375 * 100%);
    margin-inline: auto;
  }

  .introSec__copy::before {
    height: 40px;
  }

  .introFigure--gray {
    width: 73px;
  }

  /* introSec01 */
  .introSec01 .introSecHead {
    display: flex;
    flex-direction: column-reverse;
  }
  .introSec01 .introHead {
    padding-top: 0;
  }
  .introSec01 .introSec__copy {
    padding-left: 1.5em;
  }
  .introSec01 .introSecHead .introSecImg {
    width: calc(280 / 375 * 100%);
    margin-left: auto;
  }

  .introSec01 .introSecBody {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 70px;
  }
  .introSec01 .introSecBody .introSecImg01 {
    width: calc(240 / 375 * 100%);
    margin-bottom: 0;
  }
  .introSec01 .introSecBody .introSecImg02 {
    width: calc(300 / 375 * 100%);
    margin-left: auto;
  }

  .introSec01 .introFigure01 {
    width: calc(106 / 375 * 100%);
    top: 48%;
    left: 50%;
    z-index: 1;
  }
  .introSec01 .introSecBody .introSecImg01 .introFigure {
    width: calc(48 / 240 * 100%);
    bottom: -7%;
    left: 10%;
  }
  .introSec01 .introSecBody .introSecImg02 .introFigure {
    width: calc(160 / 300 * 100%);
    top: -50%;
    bottom: auto;
    right: -30%;
  }

  /* introSec02 */
  .introSec02 .introSecHead {
    grid-template-columns: 1fr;
  }
  .introSec02 .introSecHead .introSecImg {
    width: calc(280 / 375 * 100%);
  }
  .introSec02 .introHead {
    margin-top: 0;
  }
  .introSec02 .introSec__copy {
    padding-inline: 2em;
  }
  .introSec02 .introSec__copy::before {
    bottom: -5%;
    right: 18%;
  }

  .introSec02 .introSecBody {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-top: 60px;
  }
  .introSec02 .introSecBody .introSecImg01 {
    width: calc(260 / 375 * 100%);
    margin-left: 0;
  }
  .introSec02 .introSecBody .introSecImg02 {
    width: calc(240 / 375 * 100%);
    margin-left: auto;
    margin-bottom: 0;
  }

  .introSec02 .introSecHead .introSecImg .introFigure {
    width: calc(122 / 280 * 100%);
    left: 25%;
  }
  .introSec02 .introSecBody .introSecImg01 .introFigure {
    width: calc(143 / 260 * 100%);
    bottom: -40%;
    right: -20%;
    left: auto;
  }
  .introSec02 .introSecBody .introSecImg02 .introFigure {
    top: -9%;
    right: auto;
    left: -15%;
  }

  /* introSec03 */
  .introSec03 .introSecHead {
    display: flex;
    flex-direction: column-reverse;
  }
  .introSec03 .introSec__copy {
    padding-left: 2em;
  }
  .introSec03 .introSecHead .introSecImg {
    width: calc(280 / 375 * 100%);
    margin-left: auto;
  }

  .introSec03 .introSecBody {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 70px;
  }
  .introSec03 .introSecBody .introSecImg01 {
    width: calc(320 / 375 * 100%);
    margin-bottom: 0;
  }
  .introSec03 .introSecBody .introSecImg02 {
    width: calc(240 / 375 * 100%);
    margin-left: auto;
  }

  .introSec03 .introSecHead .introFigure {
    width: calc(74 / 280 * 100%);
    top: 10%;
    left: -15%;
  }
  .introSec03 .introSecBody .introSecImg01 .introFigure {
    width: calc(105 / 320 * 100%);
    top: -20%;
    right: -10%;
  }
  .introSec03 .introSecBody .introSecImg02 .introFigure {
    width: calc(98 / 240 * 100%);
    right: auto;
    bottom: -30%;
    left: -20%;
  }


  .introBtnBox {
    margin-top: 100px;
  }

  .conceptBtn {
    max-width: 260px;
    font-size: 18px;
    margin-top: 30px;
  }
}

/* news
---------------------------------------------- */
.news{
  background-color: #f5f3ef;
  padding-block: clamp(70px, 3.62rem + 3.24vw, 120px) clamp(80px, 4.39rem + 2.59vw, 120px);
}

.newsWrap{
}
.newsHead{
  width: calc(240 / 1200 * 100%);
}
.news .secTtl{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 1em;
  text-align: left;
}
.newsBtn{
  width: calc(240 / 1200 * 100%);
  max-width: 160px;
  margin-top: 50px;
}

.newsBody{
  width: calc(900 / 1200 * 100%);
}
.newsList{
  border-top: 1px solid #ece8df;
}
.newsItem{
  border-bottom: 1px solid #ece8df;
}
.newsItem:nth-child(2){ animation-delay: .3s; }
.newsItem:nth-child(3){ animation-delay: .6s; }
.newsLink{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px calc(30 / 840 * 100%);
  padding: 30px;
  transition: .4s ease;
  z-index: 0;
}
.newsLink::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  width: 10px;
  height: 9px;
  background-color: #4d4d4d;
  -webkit-mask-image: url(../../img/common/icon_arrow.svg);
  mask-image: url(../../img/common/icon_arrow.svg);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  transition: .4s ease;
  z-index: 1;
}
.newsTime{
  font-size: 14px;
  color: #8f8f8f;
}

.newsHeading {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.9;
}

.newsBnr {
  margin-bottom: 150px;
}

@media (hover: hover) and (pointer: fine) {
  .newsLink:hover{
    background-color: #fafafa;
  }
  .newsLink:hover::after{
    transform: translateY(-50%) translateX(10px);
    background-color: #ff964c;
  }
}

@media screen and (max-width: 768px) {
  .newsHead{
    float: none;
    width: 100%;
  }
  .news .secTtl {
    display: block;
    text-align: center;
  }
  .newsBtn{
    float: none;
    width: 100%;
    max-width: 200px;
    margin: 30px auto 0;
  }

  .newsBody{
    float: none;
    width: 100%;
    margin-top: 30px;
  }

  .newsLink{
    flex-direction: column;
    align-items: flex-start;
    padding: 17px 1em 10px;
  }
  .newsLink::after{
    right: 4%;
    width: 11px;
    height: 10px;
  }
  .newsTime{
    font-size: 12px;
  }
  .newsHeading{
    font-size: 12px;
  }

  .newsBnr {
    margin-top: 20px;
  }
}

/* instagramArea
---------------------------------------------- */
.instagramArea {
  padding-block: clamp(70px, 3.62rem + 3.24vw, 120px) clamp(80px, 4.39rem + 2.59vw, 120px);
}
.instagramArea__title {
  font-size: 30px;
  letter-spacing: 0.05em;
  text-align: center;
}
.instaFeedList {
  margin-top: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.instaFeedListItem {
  width: 23.75%;
  max-width: 285px;
}
.instaFeedListItem img {
    display: block;
    width: 100%;
    aspect-ratio: 1080 / 1350;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
  .instagramArea__title {
    font-size: 20px;
  }
  .instaFeedList {
    margin-top: 35px;
    gap: 4vw;
  }
  .instaFeedListItem {
    flex: 1 1 47%;
  }
  .instaFeedListItem img {
  }
}