@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:#fff;
}

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

body {
overflow: initial;
min-width: auto!important;
}

@-ms-viewport {
width: auto;
}

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


/*====================================================
main
====================================================*/
.content {
width: 100%;
height: 100%;
background: url("../images/sp/bg.png") no-repeat top center/100% auto, #fee6b8;
padding-bottom: 10px;
position: relative;
}

.kv {
width: 100%;
max-width: 1600px;
margin: 0 auto;
text-align: center;
}

.tr {
display: none;
}

@media screen and (min-width: 601px) {
.content {
background: url("../images/pc/bg1600.png") no-repeat center top/100% auto;
padding-bottom: 10px;
}

.tr {
display: block;
width: 18vw;
max-width: 318px;
max-height: 165px;
position: absolute;
top:55.5%;
left: -6vw;
}
}

@media screen and (min-width: 860px) {
.tr {
left: -9vw;
}
}

@media screen and (min-width: 1200px) {
.tr {
left: -9%;
}
}

@media screen and (min-width: 1600px) {
.content {
background: url("../images/pc/bg.png") no-repeat center top/1920px 5257px;
padding-bottom: 10px;
}

.tr {
top:56.5%;
left: 50%;
margin-left: -930px;
}
}



/*====================================================
thankyou
====================================================*/
.thankyou {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding:0;
z-index: 0;
}

.msg {
width: 100%;
}

.msg2 {
margin: 15% 5.5% 5% 5.5%;
}

@media screen and (min-width: 601px) {
.thankyou {
max-width: 1600px;
margin: 0 auto 0;
display: flex;
justify-content: center;
}

.msg2 {
width: 45%;
margin: 11.8% 0 17.2% 14%;
/*width: 49%;*/
}

.movie_camlist {
width: 55%;
/*width: 49%;*/
max-width: 737px;
margin: 14% 12% 0% 5%;
}
}

@media screen and (min-width: 1600px) {
.movie_camlist {
	
}
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼　movie　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
.outer {
width: 88%;
max-width: 620px;
margin: 0 auto;
box-sizing: border-box;
padding: 0;
position: relative;
z-index: 1;
}

@media screen and (min-width: 601px) {
.outer {
width: 38.75vw;
max-width: 620px;
margin:0 auto 0;
/*margin:3.75vw auto 0;*/
}

.swiper {
padding-bottom: 30px;
}
}

.inner {
width: calc(100% + 10px);
height: calc((100% + 10px) - 48px);
position: absolute;
left: -5px;
right: 0;
top:-5px;
bottom:0;
background:transparent;
z-index: 10000;
/*border: 5px solid #f492b8;*/
border: 5px solid;
border-image: linear-gradient(to bottom right, #fcf1a6, #f8a961, #fcf1a6) 1;
pointer-events: none;
}


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


.swiper-slide {
position: relative;
width: 100%;
height: 0;
padding-bottom: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;
/*border: 5px solid #a4b4d2;
box-sizing: border-box;*/
}

.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-pagination {
z-index: 100;
}

.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,15px);
}

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


.swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap,9px);
background-color: transparent;
background-image: url("../images/triangle_non.svg");
background-repeat: no-repeat;
background-size: contain;
border-radius: unset;
width: 11px;
height: 13px;
opacity: 1;
}

.swiper-pagination-bullet-active {

background-image: url("../images/triangle.svg");
width: 11px;
height: 13px;
}

.swiper-slide img {
height: auto;
width: 100%;
}


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

@media screen and (min-width: 1600px) {
.outer {
width: 100%;
}
}

/*====================================================
campaign
====================================================*/
.campaignhd {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding-top: 13.7% ;
z-index: 0;
}

.msg {
width: 100%;
}

@media screen and (min-width: 601px) {
.campaignhd {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding:0;
z-index: 0;
}
}

/*====================================================
campaing list
====================================================*/
.sec_anniv_campaign {
margin-bottom: 20px;
width: 100%;
}

ul.sec_anniv_camlist {
list-style: none;
display: flex;
justify-content: center;
width: 82%;
margin: -10px auto 0;
}

ul.sec_anniv_camlist li{
margin-left: -10px;
}

@media screen and (min-width: 601px) {
ul.sec_anniv_camlist {
width: 92%;
}

ul.sec_anniv_camlist li {
width: 35%;
max-width: 227px;
}
}




/*====================================================
sakura
====================================================*/
@media screen and (min-width: 601px) {
.cam1_wrap {
width: 100%;
max-width: 1600px;
display: flex;
justify-content: center;
margin: -7% auto -62vw !important;
padding: 0 0 0 15px;
position: relative;
}

.cam1_outer {
order: 1;
}

.p2 {
order: 2;
width: 45%;
max-width: 693px;
max-height: 619px;
/*max-width: 702px;
max-height: 626px;*/
z-index: 1;
/*margin-left: -2%;*/
margin-top: 8%;
}
}

/*
@media screen and (min-width: 1600px) {
.cam1_wrap {
margin: -130px auto 610px;
}
}
*/
/*====================================================
campaign1
====================================================*/
.cam1_outer {
width: 100%;
height: 131vw;
background: url("../images/sp/cam1_bg.png") no-repeat top center/auto 100%;
margin-top: -22vw;
/*margin-bottom: 95vw;
padding:36vw 1vw 18.4vw;
margin-bottom: 42vw;*/
padding:36vw 1vw 18.4vw;
position: relative;
z-index: 2;
}

ul.sec_anniv_cam1 {
list-style: none;
padding: 0 0 0 1%;
margin: 0;
}

ul.sec_anniv_cam1 li {
line-height: 1 !important;
margin-top: 2%;
}
ul.sec_anniv_cam1 li.cs0709 {
line-height: 1 !important;
margin-top: 0px;
}


.detail {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
width: 28.93333333vw;
max-width: 320px;
height: 8vw;
max-height: 48px;
padding-right: 1em;
font-size: 0.7em;
color: #fff;
text-align: center;
overflow-wrap: anywhere;
background-color: transparent;
border: 1px solid #b59ccd;
position: relative;
margin-left: 14.4vw;
margin-top: 2.2666666vw;
}

.detail::before { 
content: "";
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
width: 6px;
height: 6px;
border-top: 1px solid #fff; 
border-right: 1px solid #fff; 
transform: rotate(45deg);
}


@media (any-hover: hover) {
  .detail {
    transition: background-color 0.2s;
  }

  .detail:hover {
    background-color: #3c1c57;
  }
}

@media screen and (min-width: 460px) {
.detail {
font-size: 0.8em;
}
}

@media screen and (min-width: 601px) {
.cam1_outer {
width: 53%;
max-width: 100%;
height: 64vw;
max-height: 100%;
background: url("../images/pc/cam1_bg.png") no-repeat top center/auto 100%;
background-position: top -30%; 
margin-top: 0%;
margin-left: -1%;
margin-bottom: 42vw;
padding: 19% 7% 0% 9% !important;
z-index: 10;
}

.detail {
margin-left:0;
margin-top: 0.5em;
font-size: 0.7em;
width: 13.5625vw;
max-width: 217px;
height: 5vw;
max-height: 48px;
}
	
ul.sec_anniv_cam1 {
list-style: none;
padding: 0 0 0 4%;
margin: 0;
}

}

@media screen and (min-width: 960px) {
.detail {
font-size: 0.9em;
}
}

@media screen and (min-width: 1400px) {
.cam1_outer {
padding: 19% 13% 12% 16%;
margin-top: -2%;
}

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

@media screen and (min-width: 1600px) {
.cam1_outer {
width: 54%;
/*width: 68%;*/
max-width: 850px;
max-width: 100%;
height: 1044px;
max-height: 1044px;
max-height: 100%;
background: url("../images/pc/cam1_bg.png") no-repeat top center/auto 100%;
background-position: top -30%; 
margin-top: 0%;
margin-left: -1%;
padding: 20% 6% 0% 10% !important; 
z-index: 10;
}
}


/*====================================================
campaign1 画像ボタン
====================================================*/
.detail2 {
display: flex;
align-items: center;
justify-content: center;
width: 28.93333333vw;
max-width: 219px;
max-height: 60px;
position: relative;
margin-left: 14.4vw;
margin-top: 1em;
}

.detail2:before { 
content: "";
margin: auto;
position: absolute;
top: 0;
bottom: 0;
}


@media (any-hover: hover) {
  .detail2 {
    transition: background-color 0.2s;
  }

  .detail2:hover {
    background-color: #3c1c57;
  }
}

@media screen and (min-width: 601px) {
.detail2 {
margin-left: 4%;
margin-top: 2%;
width: 13.5625vw;
max-width: 219px;
max-height: 60px;
padding: 0;
}
}

/*====================================================
campaign1 左側のリボン
====================================================*/
.cam1_ribbon_l {
margin-top: 775px;
margin-left: 300px;
width: 100%;
height: 100%;
z-index: 200;
position:absolute;
}

/*====================================================
campaign2
====================================================*/
.cam2_wrap {
width: 100%;
max-width: 1600px;
margin: -16.9333333vw auto 0;
}

.cam2_outer {
width: 100%;
height: 135vw;
background: url("../images/sp/cam2_bg.png") no-repeat top center/auto 100%;
margin-top: -10vw;
/*margin-bottom: 102vw; 0801*/
/*padding: 38vw 0 95vw;*/
padding: 38vw 0 5vw;
position: relative;
z-index: 2;
}

ul.sec_anniv_cam2 {
line-height: 1;
padding: 0 0 0 1%;
}

ul.sec_anniv_cam2 li {
line-height: 1 !important;
margin-top: 2%;
}


/*====================================================
yoda
====================================================*/
@media screen and (min-width: 601px) {
.cam2_wrap {
display: flex;
margin: 11% auto 0;
}

.p3 {
/*width: 45%;
max-width: 714px;*/
/*order: 2;*/
width: 45%;
max-width: 723px;
max-height: 637px;
/*z-index: 1;*/
margin-left: 3%;
margin-top: 3%;	
}


.cam2_outer {
width: 55%;
max-width: 819px;
height: auto;
background: url("../images/pc/cam2_bg.png") no-repeat top center/100% auto;
margin: -12% 0 0 -9%;
padding: 20% 8% 18% 10%;
}

ul.sec_anniv_cam2 {
list-style: none;
padding: 0 0 0 4%;
margin: 0;
}

ul.sec_anniv_cam2 li {
line-height: 1 !important;
margin-top: 2%;
}
}

@media screen and (min-width: 1600px) {
.cam2_wrap {
margin: 12% auto 0;
}

.cam2_outer {
padding: 19% 7% 20% 9% !important; 
}
}


/*====================================================
campaign2 - comming soon
====================================================*/
.cam2_wrap_cs {
width: 100%;
max-width: 1600px;
margin: 107vw auto 0;
}

@media screen and (min-width: 601px) {
.cam2_wrap_cs {
display: flex;
margin: 40vw auto 0;
}}

@media screen and (min-width: 1600px) {
.cam2_wrap_cs {
margin: 710px auto 0;
}
}

/*====================================================
inoue
====================================================*/
.cam3_wrap {
width: 100%;
margin: -15% auto 0 !important;
}


@media screen and (min-width: 601px) {
.cam3_wrap {
width: 100%;
max-width: 1600px;
display: flex;
justify-content: center;
margin: -7% auto 0vw !important;
padding: 0 0 0 15px;
position: relative;
}

.cam3_outer {
order: 1;
}

.p4 {
order: 2;
width: 45%;
max-width: 718px;
max-height: 675px;

z-index: 1;
margin-top: 0;
}
}

/*====================================================
campaign3
====================================================*/
.cam3_outer {
width: 100%;
height: 144vw;
background: url("../images/sp/cam3_bg.png") no-repeat top center/auto 100%;
margin-top: -20vw;
/*margin-bottom: 102vw;*/
/*padding:41vw 1vw 18.4vw;*/
padding:41vw 1vw 0vw;

position: relative;
z-index: 2;
}

ul.sec_anniv_cam3 {
list-style: none;
padding: 0 0 0 1%;
margin: 0;
}

ul.sec_anniv_cam3 li {
line-height: 1 !important;
margin-top: 2%;
}
ul.sec_anniv_cam3 li.cs0812 {
line-height: 1 !important;
margin-top: 0px;
}

@media screen and (min-width: 601px) {
.cam3_outer {
width: 53%;
max-width: 100%;
height: 64vw;
max-height: 100%;
background: url("../images/pc/cam3_bg.png") no-repeat top center/auto 100%;
background-position: top -30%; 
margin-top: 0%;
/*margin-bottom: 42vw;*/
padding: 18% 7% 0% 9% !important;
z-index: 10;
}

.detail {
margin-left:0;
margin-top: 0.5em;
font-size: 0.7em;
width: 13.5625vw;
max-width: 217px;
height: 5vw;
max-height: 48px;
}
	
ul.sec_anniv_cam3 {
list-style: none;
padding: 0 0 0 4%;
margin: 0;
}
}



@media screen and (min-width: 1400px) {
.cam3_outer {
padding: 19% 13% 12% 16%;
margin-top: -2%;
}
}

@media screen and (min-width: 1600px) {
.cam3_outer {
width: 54%;
max-width: 850px;
max-width: 100%;
height: 1044px;
max-height: 1044px;
max-height: 100%;
background: url("../images/pc/cam3_bg.png") no-repeat top center/auto 100%;
background-position: top -30%; 
margin-top: 0%;
padding: 19% 7% 0% 10% !important; 
z-index: 10;
}
}

/*====================================================
campaign4
====================================================*/
.cam4_wrap {
width: 100%;
max-width: 1600px;
margin: -16.9333333vw auto 0;
}

.cam4_outer {
width: 100%;
height: 117vw;
background: url("../images/sp/cam4_bg.png") no-repeat top center/auto 100%;
margin-top: -10vw;
margin-bottom: 14vw;
padding: 38vw 0 5vw;
position: relative;
z-index: 2;
}

ul.sec_anniv_cam4 {
line-height: 1;
padding: 0 0 0 1%;
}

ul.sec_anniv_cam4 li {
line-height: 1 !important;
margin-top: 2%;
}


/*====================================================
kaki
====================================================*/
@media screen and (min-width: 601px) {
.cam4_wrap {
display: flex;
margin: 0 auto 0;
}

.p5 {
width: 45%;
max-width: 723px;
max-height: 637px;
margin-left: 3%;
margin-top: -1%;	
}

.cam4_outer {
width: 55%;
max-width: 819px;
height: auto;
background: url("../images/pc/cam4_bg.png") no-repeat top center/100% auto;
margin: -12% 0 8% -9%;
padding: 20% 8% 18% 10%;
}

ul.sec_anniv_cam4 {
list-style: none;
padding: 0 0 0 4%;
margin: 0;
}

ul.sec_anniv_cam4 li {
line-height: 1 !important;
margin-top: 2%;
}
}

@media screen and (min-width: 1600px) {
.cam4_wrap {
margin: 0 auto 0;
}

.cam4_outer {
padding: 19% 7% 20% 9% !important; 
}
}

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼　footer　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */

.nogifra_logo {
width: 100%;
padding: 75px 0 48px;
background: #fff;
text-align: center;
}

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


@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: #fff;
text-align: center;
}
}