@charset "utf-8";

.mv {
  position: relative;
}

.mv__containar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.mv__logo {
  width: 21%;
  min-width: 350px;
}

.mv__plane {
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: #fff;
  margin: 2.3em;
}

.mv__scroll {
  position: absolute;
  bottom: 3.4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  z-index: 3;
}

/*============================
.concept
============================*/
.concept {
  background: url("../image/concept_bg.webp") repeat center top;
  background-size: cover;
  padding: 9.4% 0 9.5%;
}

.concept__inner {
  max-width: 1200px;
}

.concept__photo {
  width: 48%;
  margin-top: 16.5%;
}

.cut__concept-a {
  position: absolute;
  top: -35%;
  right: 8%;
  width: 25%;
  height: 41%;
  z-index: 3;
}

.concept__photo-main {
  width: 95%;
  z-index: 2;
}

.concept__photo-main:before {
  top: -15%;
  left: -15%;
  width: 35%;
  height: 25%;
  background-image: url("../image/pattern_concept01.svg");
  z-index: -1;
}

.concept__photo-main:after {
  bottom: -8%;
  right: -10%;
  width: 31%;
  height: 31%;
  background-image: url("../image/pattern_concept02.svg");
  z-index: -1;
}

.concept__photo-sub {
  position: relative;
  z-index: 2;
  width: 38%;
  transform: rotate(-7deg);
  margin-left: -6.3%;
  margin-top: -6.3%;
}

.concept__text {
  width: 45%;
}

.cut__concept-b {
  position: absolute;
  bottom: -20%;
  right: 0%;
  width: 26%;
  height: 36%;
}

.concept__figure {
  width: 80%;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.concept__ttl {
  position: relative;
  z-index: 3;
  margin: -6.5% 0 4.5%;
}

.concept-texbox {
  width: 80%;
  margin: 0 auto;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  line-height: 2;
}

.concept__text-plane {
  margin-bottom: 0.3em;
}

.concept__text-break {
  margin-bottom: 1em;
}



/*============================
plan
============================*/
/* PLAN共通 */
#plan {
  background: url("../image/plan_bg.webp") repeat center top;
  background-size: cover;
  padding-bottom: 10%;
}

.plan__hero {
  background: url("../image/plan_hero.webp") no-repeat center top;
  background-size: cover;
  padding-top: 48%;
}

.plan__inner {
  width: 90%;
  max-width: 910px;
  margin: 0 auto;
}

.plan__ttlbox {
  text-align: center;
  margin-top: -5.1%;
  margin-bottom: 14%;
}

.plan__hero-ttl {
  width: 37%;
  margin: 0 auto;
}

.cut__plan__hero-a {
  position: absolute;
  left: 10%;
  top: -10%;
  width: 17%;
  height: 60%;
  z-index: 3;
}

.cut__plan__hero-b {
  position: absolute;
  right: 10%;
  right: 10%;
  top: 0%;
  width: 16%;
  height: 44%;
  z-index: 3;
}

.plan__plane {
  font-size: 1.5rem;
  letter-spacing: 0.07em;
  line-height: 2;
  margin-top: 1.1em;
}

.plan__cts {
  position: relative;
  flex-wrap: wrap;
  align-items: flex-start;
}

.plan__cts:not(:last-child) {
  margin-bottom: 38%;
}

.plan__photo {
  width: 50%;
  z-index: 1;
}

.plan__textbox {
  width: 50%;
}

.plan__ttl {
  position: relative;
  z-index: 5;
  margin-left: -20px;
}


.plan__bottom {
  padding-left: 9.9%;
}

.plan__bottom-text {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2;
  margin-top: 1.3em;
}

.plan__price {
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 1.25em;
  font-weight: 300;
}

.plan__tax {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  line-height: 2;
}

.plan__include {
  display: inline-block;
  font-size: 1.3rem;
  padding: 0 1em 1em;
  background: url("../image/hukidashi.png") no-repeat center bottom;
  background-size: contain;
  margin-top: 1.2em;
}

.plan__list {
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  margin-top: 1em;
  flex-wrap: wrap;
}

.plan__list-item {
  position: relative;
  padding-left: 1em;
}

.plan__list-item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.63em;
  height: 0.63em;
  border-radius: 50%;
}

.plan__list-item {
  width: 50%;
  margin-bottom: 0.8em;
}

.plan__list-item:last-child {
  width: 100%;
}

.plan__list-item::before {
  background-color: #F8ACD0;
}

.price__photo-sub {
  position: absolute;
  width: 47%;
  left: 41%;
  bottom: -22%;
  transform: rotate(-6deg);
  z-index: 2;
}

/* LIGHT */

.cut__plan__light {
  position: absolute;
  bottom: -26%;
  left: 0;
  width: 26%;
  height: 30%;
  z-index: 4;
}

.plan__light .plan__photo:before {
  bottom: -15%;
  left: -15%;
  width: 35%;
  height: 25%;
  background-image: url("../image/pattern_light01.svg");
  z-index: -1;
}

.plan__light .plan__list-item {
  width: 50%;
}

.plan__light .plan__list-item:last-child {
  width: 100%;
}

.plan__light .price__photo-sub:before {
  bottom: -10%;
  right: -5%;
  width: 35%;
  height: 25%;
  background-image: url("../image/pattern_light02.svg");
}

/* STANDARD */
.cut__plan__standard {
  position: absolute;
  bottom: -20%;
  left: 48%;
  width: 28%;
  height: 28%;
  z-index: 5;
}

.plan__standard .plan__textbox {
  position: relative;
  z-index: 5;
}

.plan__standard .plan__ttl {
  position: absolute;
  top: -60PX;
  left: 0;
  width: 165%;
  z-index: 3;
}

.plan__standard .plan__bottom {
  padding-left: 5.4%;
  padding-right: 1%;
  margin-top: 20%;
}

.plan__standard .plan__photo:before {
  background-image: url("../image/pattern_standard01.svg");
  width: 30%;
  height: 21%;
  right: -10%;
  top: -10%;
}

.plan__standard .plan__photo:after {
  background-image: url("../image/pattern_standard03.svg");
  width: 30%;
  height: 18%;
  right: -10%;
  bottom: -10%;
}

.plan__standard .plan__list-item.plan__list-item-hair {
  width: 50%;
}

.plan__standard .price__photo-sub {
  width: 52%;
  left: 2%;
  bottom: -17%;
}

.plan__standard .price__photo-sub:after {
  background-image: url("../image/pattern_standard02.svg");
  width: 30%;
  height: 40%;
  left: -10%;
  bottom: -14%;
  z-index: -1;
}

/* PLUS */
.plan__plus {
  z-index: 1;
}

.plan__plus .plan__textbox {
  position: relative;
  z-index: 1;
}

.plan__plus-recommend {
  position: absolute;
  width: 13%;
  height: 18%;
  left: -5%;
  top: -16%;
}

/* .plan__plus:before { 
  background-image: url("../image/recomend.svg");
  
}*/

.cut__plan__plus {
  position: absolute;
  bottom: -20%;
  left: 2%;
  width: 25%;
  height: 23%;
  z-index: 3;
}

.plan__plus .plan__ttl {
  position: absolute;
  top: -60px;
  left: 0;
  transform: translateX(-50%);
  width: 160%;
  z-index: 5;
}

.plan__plus .plan__bottom {
  margin-top: 20%;
}

.plan__plus .plan__list-item {
  width: 100%;
}

.plan__plus .plan__photo:after {
  bottom: -11%;
  left: -18%;
  width: 35%;
  height: 22%;
  background-image: url("../image/pattern_plus02.svg");
  z-index: -1;
}

.plan__plus .price__photo-sub {
  width: 50%;
  transform: rotate(-6deg);
  bottom: -30%;
  left: auto;
  right: 5%;
}

.plan__plus .price__photo-sub:after {
  background-image: url("../image/pattern_plus01.svg");
  top: -50%;
  right: -10%;
  width: 26%;
  height: 61%;
  z-index: 1;

}

/* LUXE */
.plan__luxe {
  z-index: 3;
}

.plan__luxe:before {
  background-image: url("../image/pattern_luxe02.svg");
  top: -10%;
  right: -12%;
  width: 17%;
  height: 38%;
  z-index: 4;
}

.cut__plan__luxe {
  position: absolute;
  bottom: -25%;
  right: 2%;
  width: 33%;
  height: 34%;
  z-index: 4;
}

.plan__luxe .plan__textbox {
  position: relative;
  z-index: 5;
}

.plan__luxe .plan__ttl {
  position: absolute;
  top: -70px;
  margin-left: 0;
  width: 120%;
  z-index: 6;
}

.plan__luxe .plan__bottom {
  padding-right: 2%;
  margin-top: 24%;
}

.plan__luxe .plan__list-item-sns {
  width: 100%;
}

.plan__luxe .price__photo-sub {
  width: 50%;
  left: 5%;
  bottom: -28%;
}

.plan__luxe .price__photo-sub:before {
  background-image: url("../image/pattern_luxe01.svg");
  width: 40%;
  height: 60%;
  left: -9%;
  bottom: -14%;
  z-index: -1;
  transform: rotate(6deg);
}

.plan__luxe .plan__photo:before {
  background: url("../image/pattern_luxe02.svg");
  width: 40%;
  height: 34%;
  right: -25%;
  top: -10%;
}

/* STUDIO */

.plan__studio .plan__ttl {
  position: absolute;
  top: -14%;
  left: auto;
  right: 0;
  width: 62%;
}

.cut__plan__stuio {
  position: absolute;
  bottom: -26%;
  left: 15%;
  width: 20%;
  height: 29%;
  z-index: 3;
}

.plan__studio .plan__photo:before {
  background-image: url("../image/pattern_studio01.svg");
  top: -10%;
  left: -13%;
  width: 36%;
  height: 31%;
  z-index: -1;
}

.plan__studio .plan__bottom {
  padding-right: 0;
  margin-top: 20%;
}

.plan__studio .plan__list-item {
  width: 100%;
}

.plan__studio .price__photo-sub {
  width: 50%;
  left: auto;
  right: 4%;
  bottom: -26%;
  transform: rotate(-6deg);
}

.plan__studio .price__photo-sub:after {
  background-image: url("../image/pattern_studio02.svg");
  bottom: -6%;
  right: -3%;
  width: 29%;
  height: 20%;
  z-index: -1;
  transform: rotate(5deg);
}

.plan__studio .plan__list-item::before {
  background-color: #8DC7CF;
}

/* ORDERMADE */
.plan__ordermade {
  margin-bottom: 20% !important;
  z-index: 1;
}

.plan__ordermade:before {
  background-image: url("../image/pattern_order01.svg");
  top: -9%;
  right: -11%;
  width: 20%;
  height: 18%;
  z-index: 3;
}

.plan__ordermade .plan__textbox {
  flex: 1;
  padding-left: 1%;
}

.plan__ordermade .plan__ttl {
  position: absolute;
  top: -10%;
  left: 0;
  width: 71%;
  margin-left: 0;
}

.plan__ordermade .plan__bottom {
  padding-left: 0;
  padding-top: 13%;
}

.plan__ordermade .plan__photo {
  width: 62%;
}

.plan__ordermade .plan__photo:before {
  background-image: url("../image/pattern_order01.svg");
  top: -26%;
  right: -17%;
  width: 31%;
  height: 47%;
  z-index: -1;
}

.plan__ordermade-middle {
  justify-content: space-between;
}

.plan__ordermade-photo-a {
  position: relative;
  width: 42%;
  margin-top: -15%;
  margin-left: 0%;
  transform: rotate(-7deg);
  position: relative;
  z-index: 1;
}

.cut__plan__ordermade {
  position: absolute;
  bottom: -18%;
  left: 36%;
  width: 20%;
  height: 100%;
  z-index: 3;
}

.plan__ordermade-photo-b {
  width: 33%;
  margin-top: -3%;
  transform: rotate(7deg);
  position: relative;
  z-index: 3;
  margin-right: -5%;
}

.plan__ordermade-bottom {
  position: relative;
  margin-top: 4%;
}

.plan__ordermade-bottom:before,
.plan__ordermade-bottom:after {
  content: "";
  display: block;
  position: absolute;
  width: 8.3%;
  height: 26.3%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

.plan__ordermade-bottom:before {
  background-image: url("../image/pattern_order03.svg");
  bottom: -1%;
  left: -2.2%;
}

.plan__ordermade-bottom:after {
  background-image: url("../image/pattern_order02.svg");
  top: 22%;
  right: -1%;
}

.plan__ordermade .plan__include {
  transform: rotate(-5deg);
  margin-bottom: 1em;
}

.ordermade__include-container {
  align-items: flex-start;
}

.ordermade__choice {
  position: relative;
  width: 40%;
  font-size: 1.3rem;
  border: 1px solid #333;
  padding: 1.5em;
  box-sizing: border-box;
}

.ordermade__choice:after {
  content: "";
  display: block;
  width: 30%;
  height: 30%;
  position: absolute;
  top: 50%;
  right: -25%;
  transform: translateY(-50%);
  background: url("../image/icon_plus.svg") no-repeat center center;
  background-size: contain;
}

.ordermade__choice-ttl {
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.8em;
}

.ordermade__choice-list {
  flex-wrap: wrap;
}

.ordermade__choice-item {
  width: 48%;
}

.ordermade__choice-item:nth-child(2n) {
  margin-left: 0.6em;
}

.ordermade__choice-item:nth-child(-n+2) {
  margin-bottom: 1.2em;
}

.plan__ordermade .plan__list {
  flex: 1;
  margin-left: 8%;
  margin-top: 0;
}

.plan__ordermade .plan__list-item::before {
  background-color: #C4A0CF;
}

.plan__ordermade .plan__list-item-movie:before,
.plan__ordermade .plan__list-item-dvd:before,
.plan__ordermade .plan__list-item-flower:before {
  top: 14%;
  transform: none;
}

/* OPTION */

.plan__option-ttlbox {
  text-align: center;
}

.plan__option-ttl {
  width: 55%;
  margin: 0 auto;
}

.plan__option-plane {
  margin-top: 2em;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 2;
}

.plan__option-container {
  justify-content: space-between;
  margin-top: 4.6%;
}

.plan__option-list {
  width: 48%;
}

.plan__option-item {
  position: relative;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  padding-left: 1.2em;
  margin-bottom: 1.2em;
}

.plan__option-item:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: #D1BE4F;
}

.plan__option-list:first-child .plan__option-item:first-child:after {
  transform: none;
  top: 13%;
}

.plan__option-item-wrap {
  justify-content: space-between;
}

.option__price {
  font-weight: 400;
}

.bg .bg-wrap {
  position: relative;
  display: inline-block;
  margin-top: 5px;
}

/* gallery */
.gallery {
  /* position: relative; */
  background: url("../image/gallery_bg.webp") repeat center top;
  background-size: cover;
  padding: 4.6% 0 2.9%;
}

.gallery__inner {
  max-width: 1220px;
  width: 98%;
  margin: 0 auto;
}

.gallery__ttlbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 99;
}

.gallery__ttl {
  width: 53%;
}

.gallery__text {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-top: 1.8em;
}

.gallery__ig {
  width: 22.1%;
  margin-top: 1.5em;
}

/* ギャラリー写真 */
.gallery__head {
  position: relative;
  /* aspect-ratio: 16 / 10; */
  min-height: 780px;
}

/* ===== タイル（位置は固定） ===== */
.tile {
  --x: 10;
  --y: 10;
  --w: 15;
  --i: 1;

  position: absolute;
  left: calc(var(--x)*1%);
  top: calc(var(--y)*1%);
  width: calc(var(--w)*1%);
  z-index: 2;
}

.tile__a {
  --x: -1;
  --y: 18;
  --w: 19.4;
  --i: 1;
}

.tile__b {
  --x: 23;
  --y: 14;
  --w: 9.1;
  --i: 2;
}

.tile__c {
  --x: 30.5;
  --y: 6.5;
  --w: 6.1;
  --i: 3;
}

.tile__d {
  --x: 35.5;
  --y: 16;
  --w: 10;
  --i: 4;
}

.tile__e {
  --x: 43.5;
  --y: -4;
  --w: 13.3;
  --i: 5;
}

.tile__f {
  --x: 66;
  --y: 8;
  --w: 24.8;
  --i: 6;
}

.tile__g {
  --x: 86;
  --y: 21;
  --w: 15.8;
  --i: 7;
}

.tile__h {
  --x: 71;
  --y: 46;
  --w: 11;
  --i: 8;
}

.tile__i {
  --x: 68;
  --y: 62;
  --w: 19.2;
  --i: 9;
}

.tile__j {
  --x: 64;
  --y: 73;
  --w: 7.8;
  --i: 10;
}

.tile__k {
  --x: 50.5;
  --y: 86;
  --w: 12.6;
  --i: 11;
}

.tile__l {
  --x: 39;
  --y: 73;
  --w: 12.5;
  --i: 12;
}

.tile__m {
  --x: 25;
  --y: 62;
  --w: 9;
  --i: 13;
}

.tile__n {
  --x: 15;
  --y: 81;
  --w: 12.9;
  --i: 14;
}

.tile__o {
  --x: 9;
  --y: 60;
  --w: 8.3;
  --i: 15;
}

.tile__p {
  --x: 11.5;
  --y: 45;
  --w: 17;
  --i: 16;
}

.tile__f .tile__pattern {
  position: absolute;
  width: 40%;
  height: 40%;
  top: -27%;
  right: -14%;
}

.tile__i .tile__pattern {
  position: absolute;
  width: 57%;
  height: 47%;
  top: -18%;
  right: -40%;
}

.tile__pattarn-a {
  --x: 12;
  --y: -2;
  --w: 13.5;
  --i: 2;
}

.tile__pattarn-b {
  --x: 59;
  --y: -5;
  --w: 13;
  --i: 5;
}

.tile__pattarn-c {
  --x: 84;
  --y: 68;
  --w: 16.5;
  --i: 9;
}

.tile__pattarn-d {
  --x: -2;
  --y: 63;
  --w: 15.5;
  --i: 15;
}

/* ★マスク */
.tile__mask {
  overflow: hidden;

}

/* ★画像：最初は枠の外 */
.tile__mask img {
  width: 100%;
  height: auto;
  display: block;

  transform: translate(0, 0);
  transition: transform 1.2s cubic-bezier(.25, 1, .5, 1);
  transition-delay: calc(var(--i)*130ms);
}

/* ===== 出現方向（ここ重要） ===== */
.tile[data-from="right"] img {
  transform: translateX(110%);
}

.tile[data-from="left"] img {
  transform: translateX(-110%);
}

.tile[data-from="top"] img {
  transform: translateY(-110%);
}

.tile[data-from="bottom"] img {
  transform: translateY(110%);
}

.tile[data-from="tr"] img {
  transform: translate(110%, -110%);
}

.tile[data-from="tl"] img {
  transform: translate(-110%, -110%);
}

.tile[data-from="br"] img {
  transform: translate(110%, 110%);
}

.tile[data-from="bl"] img {
  transform: translate(-110%, 110%);
}

/* ★表示：元の位置に戻る（フェード無し） */
.stage.is-show .tile img {
  transform: translate(0, 0);
}