@charset "utf-8";
html, body, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
list-style:none;
font-weight:normal;
font-style:normal;
}

* {
margin:0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

html,body {
height:100%;
margin:0;
padding:0;
min-height:100%;
box-sizing: border-box;
background:#f4e2fb;
}

html{
height:100%;
margin-bottom:1px;
-webkit-overflow-scrolling: touch;
}

body {
overflow: initial;
}

@-ms-viewport {
width: auto;
}

img {
max-width : 100% ;
height : auto ;
vertical-align:bottom;
}

.main_wrap {
width: 100%;
max-width: 1600px;
max-height: 864px;
margin: 0 auto;
}

.first_anniv_main {
width: 100%;
height: 0;
padding-top: 148.8%;
background: url("../image/main.jpg") center top no-repeat, #e7e2fb;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
z-index: 1;
position: relative;
}

h1,h2 {
width: 100%;
position: absolute;
bottom:0;
left: 0;
}

h1 { z-index: 3; }
h2 { z-index: 2; }

@media screen and (min-width: 601px) {
.first_anniv_main {
width: 100%;
height: 0;
padding-top: 54%;
background: url("../image/main_pc.jpg") center top no-repeat, #e7e2fb;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
z-index: 1;
position: relative;
}
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼　movie　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
.movie_1st_anniv {
width: 100%;
background: url("../image/movie_bg.png?v2") , #FFFFFF;
background-position: left bottom;
background-repeat: no-repeat;
background-size: contain;
}

.outer {
width: 92%;
max-width: 885px;
margin: -2.3em auto 0 auto;
box-sizing: border-box;
padding: 5px;
background: #8f29a1;
position: relative;
z-index: 1;
}

@media screen and (min-width: 601px) {
.outer {
margin: -2% auto 0 auto;
}
}

.inner {
width: 105%;
height: 57px;
position: absolute;
left: -1px;
bottom: -2px;
background: #f4e2fb;
z-index: -1;
}

.swiper {
width: 100%;
box-sizing: border-box;
padding-bottom: 55px;
}


.swiper-slide {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #fff;

/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
z-index: 10;
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}


.swiper-slide  iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

.swiper-slide.pv::after {
display: none;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap,18px);
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 0;
}

:root {
--swiper-theme-color: #fff;
}

.swiper-pagination {
z-index: 100;
}

.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,13px));
height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,13px));
/*border: 2px solid #810f95;*/
background: var(--swiper-pagination-bullet-inactive-color,#a1a1a1);
opacity: 1;
}

@media screen and (min-width: 601px) {
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,16px));
height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,16px));
border: 2px solid #810f95;
}
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color,var(--swiper-theme-color));
}

@media screen and (min-width: 601px) {
.movie_1st_anniv {
background: none;
}
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼　news　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
.news_1st_anniv {
width: 100%;
margin-top: -5px;
}

.news_wrap{
width: 100%;
margin-top: -3.7em;
}

@media screen and (min-width: 601px) {
.news_1st_anniv {
width: 100%;
margin-top: -5px;
text-align: center;
}

.news_wrap {
max-width: 1200px;
height: 47vw;
max-height: 560px;
margin:  0 auto;
display: flex;
}
}

@media screen and (min-width: 1200px) {
.news_wrap {
margin:  -115px auto 0 auto;
}
}

/*----------------------- news1 -----------------------*/
.news1 {
width: 100%;
height: 0;
padding-top: 86.14%;
background: url("../image/news1_bg.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.news1 h1 {
width: 100%;
position: absolute;
top:-0.5em;
left: 0;
z-index: 1;
}

.news1 h2 {
width: 100%;
position: absolute;
top: 35%;
left: 0;
z-index: 2;
}

.news1 p.n1t1 {
width: 100%;
position: absolute;
top: 67%;
left: 0;
z-index: 3;
}

.news1 p.n1t2 {
width: 100%;
font-size: 0.8em;
position: absolute;
top: 84%;
left: 0;
padding: 0 2.1em;
text-align: left;
line-height: 1.3;
z-index: 4;
}

@media screen and (min-width: 601px) {
.news1 {
width: 100%;
height: 0;
padding-top: 140.77%;
background: url("../image/news1_bg_pc.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.news1 h1 {
top: 0;
left: 0;
z-index: 1;
}

.news1 h2 {
top: 7.5%;
left: 0;
}

.news1 p.n1t1 {
top: 15.5%;
left: 0;
}

.news1 p.n1t2 {
font-size: 0.9em;
top: 24.5%;
left: 0;
padding: 0 2.1em;
}
}

/*----------------------- news2 -----------------------*/
.news2 {
margin-top: 30px;
width: 100%;
height: 0;
padding-top: 120.27%;
background: url("../image/news2_bg.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.news2 h1 {
width: 100%;
position: absolute;
top: -1.5em;
left: 0;
z-index: 1;
}

.news2 h2 {
width: 100%;
position: absolute;
top: 19%;
left: 0;
}

.ur_movie {
width:80%;
position: absolute;
top:52%;
left: 50%;
margin-left: -40%;
z-index: 100;
}

video {
top:0;
width: 100%;
height: 100%;
}

.video_dots{
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
margin-top: 15px;
}

.video_dots li{
margin: 0 18px;
}
.video_dots button{
outline: none;
background-color: #a1a1a1;
width: 16px;
height: 17px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
overflow: hidden;
text-indent: -10000px;
cursor: pointer;
border: 2px solid #810f95;
}

.slick-active button{
  background-color: #ffffff;
  color: #fff;
}

@media screen and (min-width: 601px) {
.news2 {
margin-top: 0;
width: 100%;
height: 0;
padding-top: 120.27%;
background: url("../image/news2_bg_pc.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.news2 h1 {
top: 8px;
left: 0;
}

.news2 h2 {
top: 8.8%;
left: 0;
}

.ur_movie {
width:87%;
position: absolute;
top:20%;
left: 50%;
margin-left: -42%;
}

}

/*----------------------- news3 -----------------------*/
.news3 {
margin-top: 35px;
width: 100%;
height: 0;
padding-top: 120.4%;
background: url("../image/news3_bg.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.news3 h1 {
width: 100%;
position: absolute;
top: -1.9em;
left: 0;
z-index: 1;
}

.news3 h2 {
width: 100%;
position: absolute;
top: 19%;
left: 0;
}

@media screen and (min-width: 601px) {
.news3 {
margin-top: 0;
width: 100%;
height: 0;
padding-top: 141.86%;
background: url("../image/news3_bg_pc.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}


.news3 h1 {
top: 0;
left: 0;
}

.news3 h2 {
top: 7.5%;
left: 0;
}

}

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼　message　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
.message {
width:100%;
text-align: center;
z-index: 1;
margin-top: -1.5em;
}

@media screen and (min-width: 601px) {
.message {
margin-top: 0;
}
}

@media screen and (min-width: 1200px) {
.message {
margin-top: 0;
}
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼　campaign　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
.campaign_1st_anniv {
width: 100%;
max-width: 710px;
margin: 0 auto;
padding-bottom: 50px;
background: #f4e2fb;
}

.cam1 {
margin-top: -1.4em;
width: 100%;
height: 0;
padding-top: 138.94%;
background: url("../image/cam1_bg.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.cam1 h1 {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.cam1 h2 {
width: 100%;
position: absolute;
top: 22%;
left: 0;
z-index: 2;
}

ul.cam1_li {
list-style: none;
width: 100%;
position: absolute;
top:31%;
left:0;
z-index: 3;
}

.cam1_item {
width: 100%;
height: 0;
padding-top: 60.67%;
background: url("../image/cam1_item.png") center bottom no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
position: absolute;
bottom:0;
left:0;
z-index: 4;
}

@media screen and (min-width: 601px) {
.cam1 {
margin-top: -2.7em;
width: 100%;
height: 0;
padding-top: 114.37%;
background: url("../image/cam1_bg_pc.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.cam1 h2 {
width: 100%;
position: absolute;
top: 23%;
left: 0;
}

ul.cam1_li {
list-style: none;
width: 100%;
position: absolute;
top: 29%;
left:0;
}

.cam1_item {
width: 100%;
height: 0;
padding-top: 52.54%;
background: url("../image/cam1_item_pc.png") center bottom no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
position: absolute;
bottom:0;
left:0;
}

}

/*----------------------- cam2 -----------------------*/
.cam2 {
margin-top: -3.5em;
width: 100%;
height: 0;
padding-top: 94.27%;
background: url("../image/cam2_bg.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.cam2 h1 {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.cam2 h2 {
width: 100%;
position: absolute;
top: 35%;
left: 0;
z-index: 2;
}

ul.cam2_li {
list-style: none;
width: 100%;
position: absolute;
top:43%;
left:0;
z-index: 3;
}

.cam2_li_outer {
position: relative;
}

.cam2_txt {
position: absolute;
bottom: 5px;
left: 10%;
font-size: 2.6vw;
color: #1e1e1e;
z-index: 4;
}

.cam2_item {
width: 100%;
height: 0;
padding-top: 32.4%;
background: url("../image/cam2_item.png") center bottom no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
position: absolute;
bottom:0;
left:0;
z-index: 5;
}

@media screen and (min-width: 601px) {
.cam2 {
margin-top: -6em;
width: 100%;
height: 0;
padding-top: 79.72%;
background: url("../image/cam2_bg_pc.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.cam2 h2 {
top: 32%;
left: 0;
}

ul.cam2_li {
top:41%;
left:0;
}


.cam2_txt {
position: absolute;
bottom: 8px;
left: 18%;
font-size: 0.9em;
}

.cam2_item {
width: 100%;
height: 0;
padding-top: 30%;
background: url("../image/cam2_item_pc.png") center bottom no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
position: absolute;
bottom:0;
left:0;
}

}

/*----------------------- cam3 -----------------------*/
.cam3 {
margin-top: -2em;
width: 100%;
height: 0;
padding-top: 84.67%;
background: url("../image/cam3_bg.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.cam3 h1 {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.cam3 h2 {
width: 100%;
position: absolute;
top: 37%;
left: 0;
z-index: 2;
}

ul.cam3_li {
list-style: none;
width: 100%;
position: absolute;
top:49%;
left:0;
z-index: 3;
}

@media screen and (min-width: 601px) {
.cam3 {
margin-top: -4em;
width: 100%;
height: 0;
padding-top: 71.83%;
background: url("../image/cam3_bg_pc.png") top center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
background-position: center top;
position: relative;
}

.cam3 h2 {
top: 35%;
left: 0;
}

ul.cam3_li {
top:46%;
left:0;
}
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼　footer　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
.nogifra_logo {
width: 100%;
padding: 60px 0 48px;
background: rgb(231,226,251);
background: linear-gradient(180deg, rgba(244,226,251,1) 0%, rgba(255,255,255,1) 30%);
text-align: center;
}

.nogifra_logo img {
width: 75%;
max-width: 476px;
}

.sec-regist {
background: #fff;
}


@media screen and (min-width: 601px) {
.nogifra_logo {
padding: 60px 0 80px;
}

.nogifra_logo img {
width: 35%;
}
}


@media screen and (min-width: 960px) {
.nogifra_logo {
padding: 130px 0 145px;
background: rgb(231,226,251);
background: linear-gradient(180deg, rgba(244,226,251,1) 0%, rgba(255,255,255,1) 20%);
text-align: center;
}
}