@charset "utf-8";

/* main ------------- */
#loading { position:fixed; top:0; bottom:0; left:0; right:0; z-index:99999; width:100%; height:100%;
  background:#892c41; }
#loading .load_box { position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:79px; margin:auto; text-align:center; }

#main { position: relative; height: 100vh; background-color: #892c41; z-index: 0; }
#main::after { content: ""; display: block; position: absolute; top: 59%; left: auto; right: 0; width: 74%; height: calc(100vh - 59% + 100px); background-color: #6d2b39; z-index: -100; }

.slide_img01,.slide_img02 { overflow: hidden; }

.slide_img01 { width: 60%;  height: 43vh; margin-top: 0; position: absolute;}
.slide_img02 { width: 70%;  height: 43vh; margin: 4vh 0 0 auto; position: absolute; }
.slide_img01 li { width: 60%;  height: 43vh; position: relative; margin-top: 0; }
.slide_img02 li { width: 70%;  height: 43vh; position: relative; margin: 4vh 0 0 auto; }

.slide_img01 li span { position: absolute; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover;  }
.slide_img02 {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
.slide_img02 li span { position: absolute; display: block; width: 100%; height: 100%; background-repeat: no-repeat; -webkit-transform: rotate(180deg);transform: rotate(180deg); background-size: cover; }

.slide_img01 li.slide1 span { background-image: url("../img/top/slide_img01.jpg"); }
.slide_img01 li.slide2 span { background-image: url("../img/top/slide_img02.jpg"); }
.slide_img02 li.slide3 span { background-image: url("../img/top/slide_img03.jpg"); }
.slide_img02 li.slide4 span { background-image: url("../img/top/slide_img04.jpg"); }

/* news ------------- */
#news { position: absolute; width: 100%; bottom:-65px; height: 165px; padding: 1em; background: rgba(255,255,255,0.7); overflow: hidden; overflow-y: auto; }
#news h2 { width: 100%; line-height: 1.4; color: #8c1a34; }
#news .en { font-size:2.2em; }
#news .honoka { font-size:1.1em; }
#news div { flex: 1; }

/* contents ------------- */
#contents { padding-top: 3em; background-color: #892c41; z-index: -1; overflow: hidden; }

/* concept ------------- */
.concept { position: relative; }
.concept > div { position: relative; margin: auto 0 auto auto; padding: 5.7em 0; background-color:#eee3de; background-image: url(../img/top/bg_concept.png); background-repeat: no-repeat; background-position: bottom right; }
.concept > div::before { content: "Concept"; position: absolute; top: -1em; left: 6%; font-family: 'muralscript',serif; font-size: 4.5em; color:#cd909b!important; letter-spacing: 3px; }
.concept::before { content: ""; position: absolute; top: -3em; right: -2.5em; width: 10vh; height: 14vh; max-height: 428px; max-width: 313px;background: url(../img/top/bg_contents.png) no-repeat 0 0 / 100%; z-index: 1; }
.concept > div > div { margin-left: 6%; }
.concept h2 { margin-bottom: 1em; font-size: 2.9em; filter: drop-shadow(1px 1px 10px #eee3de); }
.concept p {  filter: drop-shadow(1px 1px 10px #eee3de); }
.concept p.honoka {  text-shadow: 0 0 #2b0b00; }
.concept::after {  content: "";  position: absolute; bottom: -17%; left: -3.5em; width: 13vh; height: 27vh; max-height: 587px; max-width: 282px; background: url(../img/top/bg_contents_concept.png) no-repeat 0 0 / 100%; z-index: 2; }

/* point ------------- */
.point { position: relative; padding: 4.5em 0; background-image: url(../img/bg.png); background-color: #eee3de; z-index:0; }
.point::before { content: "Appeal point"; position: absolute; top: -1em; left: 0; right: 0; font-family: 'muralscript',serif; color:#cd909b; font-size: 4.5em; text-align: center; letter-spacing: 3px; }
/* .point ul { padding: 6.5em 0 4em; } */
.point li{ position: relative; max-width: 263px; width: 31%; height: auto; margin: 1% 1% 0; text-align: center; }
.point li::after{ content: ""; display: block; padding-top: 100%; background-color: #fff; border-radius: 50%; background-image: url(../img/top/bg_point01.png); background-repeat: no-repeat; background-position: bottom; }
.point li .sub { font-size: 146%; letter-spacing: 1px; text-shadow: 0 0 #2b0b00; }
.point ul li:nth-child(2)::after { background-image: url(../img/top/bg_point02.png); }
.point ul:nth-of-type(2) li:nth-child(1)::after { background-image: url(../img/top/bg_point03.png); }
.point ul:nth-of-type(2) li:nth-child(2)::after { background-image: url(../img/top/bg_point04.png); }
.point ul:nth-of-type(2) li:nth-child(3)::after { background-image: url(../img/top/bg_point05.png); }
.point li .sub .small { letter-spacing: -4px; }
.point li div { position: absolute; top:0; left: 0; right:0; line-height: 1.4; }
.point h2 { font-size: 1.5em; color: #2b0b00; }
/* .point ul::before { content: ""; position: absolute; top: 0; right: 0; width: 26%; height: 70%; max-height: 175px; max-width: 172px;background: url(../img/top/bg_point01.png) no-repeat 0 0 / 100%; }
.point ul::after { content: ""; position: absolute; bottom:0; left: 0; width: 26%; height: 70%; max-height: 156px; max-width: 215px;background: url(../img/top/bg_point02.png) no-repeat 0 0 / 100%; -webkit-transform:translateY(10px) rotate( -180deg ); transform:translateY(10px) rotate(-180deg ); } */
.point_list li p { margin-bottom: .5em; letter-spacing: 1.5px; color: #a3325b; }
.point::after {  content: "";  position: absolute; bottom: 0;  left: 0; width: 42vh;  height: 28vh;  max-width: 825px;  max-height: 550px;background-size: 100%; background-image: url(../img/top/point_furisode02.png); background-repeat: no-repeat; z-index: -1; }
/* .point .inner::before { content: ""; position: absolute; top: -1em;  left: 0;  width: 10vh;  height: 17vh;  max-height: 274px;  max-width: 200px;background: url(../img/top/bg_contents_point.png) no-repeat 0 0 / 100%; } */

/* catalog ------------- */
.catalog { position: relative; padding: 4em 0 3em; z-index: 1; }
.catalog::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 88%; height: 74%; background-color: #713540; z-index: -100; }
.catalog .inner::before { content: "Furisode catalog"; position: absolute; top: -1.5em; font-family: 'muralscript',serif; font-size: 3.5em; color:#e9b8c1; letter-spacing: 3px; }
.catalog h2 { font-size: 1.5em; color: #fff; }
.catalog ul { margin: auto; }
.catalog li { width:32%; margin-top: 2%; }
.catalog ul::before { content: ""; position: absolute; top: -8%; right: -17%; width: 10vh; height: 14vh; max-height: 428px; max-width: 313px;background: url(../img/top/bg_contents.png) no-repeat 0 0 / 100%; }
.catalog::before { content: ""; position: absolute; bottom: 5%; left: 0; width: 10vh; height: 17vh; max-height: 470px;  max-width: 292px; background: url(../img/top/bg_contents_catalog.png) no-repeat 0 0 / 100%; }

/* plan ------------- */
.plan { position: relative; padding: 4em 0; z-index: 1; }
.plan .inner::before { content: "Special Photo Plan"; position: absolute; top: -1.5em; right:0; font-family: 'muralscript',serif; font-size: 2.8em;  color: #cd909b; letter-spacing: 3px; }
.plan .title {  font-size: 1.35em; }
.plan ul li {  width: 100%; margin-top: 2.5%; }
.plan ul li .navTitle {  font-size: 1.2em; }
.plan ul li .navTitle span { padding: .5em 1em;  background: rgba(255,255,255,0.8); }
.plan ul li div { position: absolute; top: 10%; }
.plan ul li a {  display: block;  position: relative;  overflow: hidden;  width: 100%; line-height: 2.5; }
.plan ul li a:hover { color: #2b0b00; }
.plan ul:nth-of-type(2) li { width: 49%; }
.plan ul:nth-of-type(2) li a {  padding-top: 100%;}
.plan ul:nth-of-type(2) li img { position: absolute;  top: 50%;  left: 50%;  max-width: 150%;  max-height: 150%;  -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);  -webkit-transition: all .2s;  transition: all .2s; }
.plan ul li figcaption {  display: grid;  align-items: center;  position: absolute;  bottom: 0;  width: 100%; height: 45px; background-color: #fff;  text-align: center; overflow: hidden; font-size: 1.1em; text-shadow: 0 0 #2b0b00; }
.plan ul li:nth-child(2) figcaption { font-size: 1.17em; }

.plan_icon {  position: relative;  padding: .5em 1em .5em 2.5em;  color: #fff;  background-color: #ce818f; }
.plan_icon::before {  content: '';  position: absolute;  top: 25%;  left: 1em;  width: 1.5em;  height: 1.5em;  background-repeat: no-repeat;  background-size: 75%; }
.plan_icon::before {  background-image: url(../img/plan/lunch_icon.png); }
.plan_icon::before {  background-image: url(../img/plan/studio_icon.png); }

.plan .inner::after {  content: "";  position: absolute; bottom: 0;  left: -10%; width: 10vh;  height: 10vh;  max-width: 200px;  max-height: 196px;background-size: 100%; background-image: url(../img/top/bg_contents02.png); background-repeat: no-repeat; z-index: -1; }
.plan::before { content: ""; position: absolute; bottom: 3%; right: 0; width: 15vh; height: 14vh; max-width: 283px;
    max-height: 252px; background-size: 100%;  background-image: url(../img/top/bg_contents_plan.png);  background-repeat: no-repeat;  z-index: -1; }
.plan::after { content: ""; display: block; position: absolute; top: 0; right: 0; width: 74%; height: 74%; background-color: #eee3de; background-image: url(../img/bg.png); overflow: hidden; z-index: -100; }


/* button_area ------------- */
.button_area { margin-top: 1em; font-size: 2em; line-height: 1.5; }
.button_area li { position: relative; width: 100%; background: #000; z-index: 1;}
.button_area li a { display: block; padding: 17% 0; overflow: hidden; text-align: center; color: #fff;  position: relative; text-decoration: none; z-index: 1; }
.button_area li .bg_img { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: no-repeat center / cover; opacity: 0.8; }
.button_area li:nth-child(1) .bg_img { background-image: url(../img/top/bg_flow.jpg); background-position: top; }
.button_area li:nth-child(2) .bg_img { background-image: url(../img/top/bg_calender.jpg); }
.button_area li h4 span { filter: drop-shadow(0 0 5px black); }


/* common------------------------*/
.secBox { margin-top: 11em; }
.btn { margin-left: auto; margin-right: 0; }

.button {  margin-top: 1em; }

/* title */
h2.title { margin-bottom: .5em; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
/* #header.scroll { position: fixed; height: 6em; transition: all 1s; } */
#header.scroll .sitename { left: 1.5em; width: 30%; max-width: 180px; margin-top: 1em; }


#news { width: 56.5%; }
#news h2 { width: 25%; text-align: center; }
#news h2 span { display: block; }

.concept > div { width: 90%; }
.concept > div::before { font-size: 7em; letter-spacing: 5px; }
.concept::before {  top: -8em; right:-9vh;  width: 13vh;  height: 19vh; }
.concept::after {  bottom: -38%;  left: -6vh;  width: 17vh;  height: 36vh; }

.point::after { width: 47vh; height: 31vh; }
.point >.inner { width: 68%; margin-left: 2%; }
.point h2 { font-size: 1.9em; }
.point::before { font-size: 7em; letter-spacing: 5px; }
.point figure { position: absolute; top:22%; right:-18%; width: 51%; max-width: 762px; }
.point ul:nth-of-type(1) { margin-top: 3em; }
.point ul:nth-of-type(2) { margin-bottom: 3em; }

.catalog h2 { font-size: 1.9em; }
.catalog .inner::before { font-size: 7em; letter-spacing: 5px; }
.catalog ul::before {  top: -10%;  width: 17vh;  height: 24vh; }
.catalog::before { width: 15vh; height: 25vh; }

.plan .title { font-size: 1.9em; }
.plan .inner::before { font-size: 5.5em; letter-spacing: 5px; }
.plan ul li { width: 49.25%; }
.plan ul:nth-of-type(2) li { width: 24%; }
.plan ul li { margin-top: 1.5%; }
.plan .inner::after { width: 14vh;  height: 13vh; }
.plan::before { width: 21vh; height: 19vh; }

.button_area li { width: 50%; }

.button {  margin-top: 1.5em; }
.secBox {  margin-top: 9em; }
}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
.sitename { left: 56.5%; margin-top: 1.5em; }

/* main */
.slide_img01 { top: 0;  left: 0; width: 43.5%;  height: calc(100vh - 140px); }
.slide_img02 { top:130px; right: 0; width: 43.5%;  height: calc(100vh - 130px); margin: 0;  }
.slide_img01 li { top: 0;  left: 0;  width: 43.5%;  height: calc(100vh - 140px); }
.slide_img02 li { right: 0;  width: 43.5%;  height: calc(100vh - 130px);  margin: 0; }
.slide_img01 li.slide1 span { background-position: right top; }
.slide_img01 li.slide2 span { background-position: center top; }
/* .slide_img02 li.slide3 span { background-position-y: bottom; }
.slide_img02 li.slide4 span { background-position-y: bottom; } */
.concept::before { width: 17vh;  height: 24vh; right: -11vh; }
/* .concept::after {  bottom: -42%;  left: -7%;  width: 16vh;  height: 34vh; } */


/* .point .inner::before { width: 18vh;  height: 26vh; } */
.point_list li p { font-size: 160%; }
.point li .sub { font-size: 130%; }
.point ul:last-child li:nth-child(2) .sub { font-size: 117%; }
.point figure { top:20%; }

.catalog ul::before { right: -14%; }

.plan ul li .navTitle {  font-size: 1.5em; }
.plan .inner::before { font-size: 7em; }

}

/* 1200px以上(PC) */
@media screen and (min-width: 1200px) {
.concept::before { right: -8vh; width: 19vh; height: 27vh; }
.concept::after {  bottom: -42%;  left: -3%;  width: 22vh;  height: 46vh; }

.point >.inner {  margin-left: 10%;  width: 58%; max-width: 800px; }
.point::after { width: 80vh; height: 53vh; }
.point ul::before,.point ul::after { right:-7%; }
.point li h2 { font-size: 1.9em; }

.catalog::after { width: 74%; }
.catalog ul { width: 100%; }
.catalog ul::before { top: -6%; right: -20%; width: 30vh; height: 41vh; }
.catalog::before { width: 31vh; height: 52vh; }

.plan .inner::after { width: 21vh;  height: 20vh; }
.plan::before { width: 31vh; height: 27vh; }

.button_area { margin-top: 2em;  font-size: 3em; }

.secBox { margin-top: 11em; }
}

/* 1400px以上(PC) */
@media screen and (min-width: 1400px) {
  .concept::after  { bottom: -58%; left: -3%; width: 31vh; height: 65vh; }
}

/* 1600px以上(PC) */
@media screen and (min-width: 1600px) {
  .slide_img01 li.slide2 span { background-position: right; }
  .point li .sub { font-size: 140%; }
  .point ul:last-child li:nth-child(2) .sub { font-size: 130%; }
  .point::after { width: 88vh; height: 60vh; }
  .point figure { right:-7%; }
}
/* 1700px以上(PC) */
@media screen and (min-width: 1700px) {
  .point >.inner {  margin-left: 17%; }
}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {

.slide_img02 li.slide3 span,.slide_img02 li.slide4 span { background-position: center; }
}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {

#main{ padding-top: 0; }
#main::after { width: 100%; top:45%; height: calc(100vh - 59% + 180px); }

#news { width: 100%; }

.slide_img01 { width: 60%;  height: 43vh; margin-top: 0; }
.slide_img02 { bottom:100px; right: 0; width: 70%;  height: 43vh; margin: 4vh 0 0 auto;  }
.slide_img01 li { top: 0;  left: 0;  height: calc(100vh - 140px); }
.slide_img02 li { right: 0;  height: calc(100vh - 130px);  margin: 0; }
.slide_img02 li.slide3 span { background-position-y: 40vh; }
.slide_img02 li.slide4 span { background-position-y: 40vh; }
.slide_img01 li span,.slide_img02 li span { background-size: 100%; }

.point ul li::after { background-size: 40%; }
.point ul li:nth-child(2)::after { background-size: 55%; }
.point ul:nth-of-type(2) li::after { background-size: 66%; }
.point ul:nth-of-type(2) li:nth-child(2)::after { background-size: 50%; }
.point ul:nth-of-type(2) li:nth-child(3)::after { background-size: 60%; }
.point li .sub { font-size: 107%; letter-spacing: 0; }

.button { font-size: 1em; }
}

@media screen and (min-width:600px) and ( max-width:960px) {
.concept > div { background-position-x: 78%; }
.concept h2 {  font-size: 2.5em; }
.plan::after { top:1em; width: 88%; padding: 3.5em 0;  height: 65%; }

}
@media screen and (min-width:600px) and ( max-width:1200px) {
.plan::after { top:1em; width: 88%; padding: 3.5em 0;  height: 65%; }

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){

.secBox { margin-top: 6em; }
#loading .load_box { width:80%; }

/* main------------------------*/
#main::after { top:45%; width: 100%; height: calc(100vh - 59% + 150px); }
.slide_img01 { position: relative; width: calc(100% - 6em); }
.slide_img02 { width: calc(100% - 6em); bottom:65px; }
.slide_img01 li span,.slide_img02 li span { background-position: top; background-size: 100%; }
/* .slide_img01 li.slide2 span { background-position-y: top; }
.slide_img02 li.slide3 span { background-position-y: bottom; } */
/* .slide_img02 li.slide3 span { background-position-y: 120%; }
.slide_img02 li.slide4 span { background-position-y: 120%; } */

/* news------------------------*/
#news { bottom:-75px; height: 140px; padding: .5em 1em; }
#news .honoka { margin-left: 2%; }
#newsList li{ height: auto; }

#contents { padding-top: 6em; }

.concept > div { padding: 6em 0 0; background-image: none; }
.concept h2 { font-size: 1.75em; }

/* .point .inner::before { left: -3em; } */
.point { padding: 3em 0; }
.point::before { font-size: 4em; }
.point ul::after { top:3%; }
.point ul li::after { background-size: 40%; }
.point ul li:nth-child(2)::after { background-size: 55%; }
.point ul:nth-of-type(2) li::after { background-size: 66%; }
.point ul:nth-of-type(2) li:nth-child(2)::after { background-size: 50%; }
.point ul:nth-of-type(2) li:nth-child(3)::after { background-size: 60%; }
.point li { width: 46%; margin: 2% 2% 0; }
.point_list li p { font-size: 1.1em; }
.point figure { width: 80%; margin: -40% -28% 0 auto; }

.catalog { padding: 2em 0 0; }

.plan { padding: 1.5em 0; }
.plan::after { width: 90%; height: 80%; }


.button_area li a { padding: 14% 0; }

}

@media screen and (max-width: 320px){
.point li { width: 47%; margin: auto 1.5% 9%; }
.point_list li p { font-size: 120%; }
.point li .sub { font-size: 1em; }
}