comingsoon@charset "utf-8";



/********************** 共通 *******************************/

/* main */
main{}
main p{ margin-bottom: 1em;}
main img{ width:100%;}

/* container */
.container{max-width:1000px;width:94%;margin:0 auto;}
.container.large{ max-width: 1200px;}

/* font size */
.small{font-size: 0.8em;padding-left: 0.3em;}

/* color */
.yellow{color: #FFD800;}

/* margin */
.no_margin{margin: 0 !important;}


.tit{color: var(--keyc1);font-size: min(4em,5vw);font-weight: bold;line-height: 1.5em;margin-bottom: calc(40px + 2vw); position: relative;z-index: 1; text-align: center;}
.tit:after{content: "";position: absolute;background-image: url(../images/title_deco.svg);width: min(16vw,210px);height: min(8vw,40px);background-position: center;background-size: contain;background-repeat: no-repeat;bottom: -34px;left: 50%;transform: translateX(-50%);}   

.bg_box{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1; overflow: hidden;}
.bg_box .c_outer{position: absolute;top: 33.33%;left: 50%;transform: translate(-50%, -50%);}
.bg_box .bg_01{width: min(80vw, 1200px);-webkit-animation: rotate-anime_l 46s linear infinite;animation: rotate-anime_l 46s linear infinite;}
.bg_box .bg_02{width: min(104vw, 1600px);-webkit-animation: rotate-anime_r 46s linear infinite;animation: rotate-anime_r 46s linear infinite;}

.btn{ position: relative;display: block; border: 1px solid var(--keyc1); background-color: #fff; color: var(--keyc1); padding: 1em ; background-image: url("../images/contents_deco_left.svg"),url("../images/contents_deco_right.svg"); background-repeat: no-repeat; background-position:left top,right bottom; background-size: auto 50%; margin: 0 
auto; width: 100%; max-width: 800px;font-weight: bold;font-size: 22px;line-height: 1.5em;}
.btn::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    right: 4%;
    width: 6px;
    height: 6px;
    border: 1px solid;
    border-color: transparent var(--keyc1) var(--keyc1) transparent;
    transform: rotate(-45deg);
}

@media only screen and (max-width: 768px){
    /* main */
    main{ height:100%;}
    
    .container{width:90%;}
    
    .tit{ font-size: 9vw;}
    .tit:after{ bottom: -5vw; width: 35vw; height: 5vw;}
    
    .bg_box{ position: absolute;}
    .bg_box .c_outer{ top:32%;}
    .bg_box .bg_01{width: 110vw;}
    .bg_box .bg_02{width: 130vw}
    
    .btn{ font-size: 20px;}
}

/******* top *******/

/************ kv ************/
.kv{width: 100%;position: relative;padding:calc(3.5vw + 50px) 0 3.5vw;overflow: hidden;}
.kv .tit_box{width: 60%; max-width: 900px; margin: 0 auto 2vw;}
.kv .tit_box .main_tit{width: 100%;margin: 0 auto; line-height: 0;}
.kv .tit_box .main_tit2{width: 50%;margin: -4% auto 3.5%; line-height: 0;}
.kv .tit_box .date_box{display: flex;justify-content: space-between; margin-bottom: 1.5vw;}
.kv .tit_box .date_box p{width: 47%; margin: 0;}


.kv .anniv_logo{ position: absolute; right: 2%; top: calc(2% + 40px);; width: 12%; max-width: 190px;}

@keyframes rotate-anime_r {
	0%  {transform: rotate(0);}
	100%  {transform: rotate(360deg);}
}
@keyframes rotate-anime_l {
	0%  {transform: rotate(0);}
	100%  {transform: rotate(-360deg);}
}

/* bnr */
.bnr_area{}
.bnr_area ul{display: flex;justify-content: center;}
.bnr_area ul li{width: 31.33%;margin: 0 1%;}
.bnr_area ul li a{background-image: url(../images/bnr.png);background-position: center;background-repeat: no-repeat;background-size: 100%;display: flex;justify-content: center;align-items: center;height: 8.8vw;font-size: min(15px,1.1vw);color: #000;font-weight: bold;line-height: 1.5em;padding: 0 1em;}

@media only screen and (max-width: 768px){
    .kv { padding: 10vw 0;}
    .kv .tit_box{ width: 75%; margin: 0 auto;}
    .kv .tit_box .main_tit{ width: 100%;}
    .kv .tit_box .main_tit2{ margin: -2% auto 8%; width: 80%;}
    .kv .anniv_logo{ max-width: inherit; width: 18%; top: calc(1%); left: 1%;}
    
    .kv .tit_box .date_box{ display: inherit;}
    .kv .tit_box .date_box p{ width:100%;margin:0 auto 2.5vw;}
    
}


/************ news ************/
.news{padding: 4vw 0;position: relative;margin-bottom: 6vw;}
.news:after{content: "";position: absolute;width: 100%;height: 100%;z-index: -1;left: 0;top: 0;background-color: #fffdf74f;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(5px);}
.news .container{display: flex;align-items: center;justify-content: space-between;}
.news .container > .left{width: 30%;text-align: left;}
.news .container > .left .tit{position: relative;color: var(--keyc1);font-size: min(4em,5vw);font-weight: bold;line-height: 1.5em;}
.news .container > .left .tit:after{content: "";position: absolute;background-image: url(../images/title_deco.svg);width: min(16vw,210px);height: min(8vw,40px);background-position: center;background-size: contain;background-repeat: no-repeat;bottom: -34px;left: 0;}
.news .container > .right{width: 66%;}
.news .news_list{}
.news .news_list li{margin-bottom: 1.5vw;}
.news .news_list li a{color: #5F5F5F;display: flex;align-items: center;text-align: left;}
.news .news_list li a .left{display: flex;flex-direction: column;width: 6em;padding-right: 2em;text-align: center;border-right: 1px solid #C9C9C9;}
.news .news_list li a .left .year{}
.news .news_list li a .left .date{color: var(--keyc1);font-size: 1.5em;line-height: 1em;}
.news .news_list li a .left .day{}
.news .news_list li a .right{width: calc(100% - 6em);height: 100%;padding-left: 2em;}
.news .more_btn{display: block;color: var(--keyc1);font-weight: 700;font-size: min(1.3em,2vw);border-top: 2px solid var(--keyc1);border-bottom: 2px solid var(--keyc1);padding: 0.7em 0;position: relative;}
.news .more_btn:before,
.news .more_btn:after{position: absolute;content: "";background-position: center;background-repeat: no-repeat;background-size: contain;width: min(28px,3vw);height: min(19px,3vw);top: 50%;left: 50%;transition: 0.2s;}
.news .more_btn:before{background-image: url(../images/news_arrow_left.svg);transform: translate(-580%,-50%);}
.news .more_btn:after{background-image: url(../images/news_arrow_right.svg);transform: translate(500%,-50%);}
.news .more_btn:hover:before{transform: translate(-600%,-50%);}
.news .more_btn:hover:after{transform: translate(520%,-50%);}


/************ about ************/
#about{background-color: #312D2A;padding: 3vw 0;}
#about .container{ max-width: inherit;position: relative; z-index: 1;}
#about .about_main{position: relative;padding: 2vw 0;font-size: 1.1em;line-height:
2em;}
#about .about_main:after{position: absolute;content: "";background-image: url(../images/about_bg_pc.webp);background-size: contain;background-position: center;background-repeat: no-repeat;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;opacity: 0.05;pointer-events: none;}


#about .stit{ font-weight: bold; color:var(--keyc1); margin-bottom: 1.5em;
    font-size: max(20px,2vw); line-height: 1.7em;}

#about .about_main p{color: #fff;margin-bottom: 2em;}

#about .txt_anime{display: flex;color: var(--keyc1);opacity: 0.4;}
#about .txt_anime p{margin: 0;white-space: nowrap;font-weight: bold;}
#about .txt_anime p:before{content: "SaGa LOUNGE 35th Anniversary SaGa LOUNGE 35th Anniversary SaGa LOUNGE 35th Anniversary SaGa LOUNGE 35th Anniversary SaGa LOUNGE 35th Anniversary SaGa LOUNGE 35th Anniversary "; display: block;}
#about .txt_anime.top{margin-bottom: 1vw;}
#about .txt_anime.top p{-webkit-animation: left_move 60s linear infinite;animation: left_move 60s linear infinite;}
#about .txt_anime.bottom{margin-top: 1vw;}
#about .txt_anime.bottom p{-webkit-animation: right_move 60s linear infinite;animation: right_move 60s linear infinite;}

@keyframes left_move{
	0% {transform: translateX(0%);}
	100% {transform: translateX(-100%);}
}
@keyframes right_move{
	0% {transform: translateX(-100%);}
	100% {transform: translateX(0%);}
}

@media only screen and (max-width: 768px){
    #about .about_main{ font-size: 16px; line-height: 1.7em; text-align: left;}
    #about .about_main:after{ ;background-image: url(../images/about_bg_sp.webp);}
    #about .stit{ font-size:4.4vw; text-align: center;}
    
}

/************ tickets ************/
#tickets{padding: 6vw 0 10vw ;}

#tickets .lead{ margin-bottom: 3vw;}

#tickets .price { border-top: 1px solid #ccc; margin-bottom: 3vw;}
#tickets .price dl{ display: flex; align-items: center; border-bottom: 1px solid #ccc; font-weight: bold; font-size: 20px; line-height: 1.5em;}
#tickets .price dt{ width: 30%; padding: 1em 2em; background-color: rgba(0,0,0,0.7); color: #fff;}
#tickets .price dd{ width: 70%; padding: 1em 2em; background-color: rgba(255,255,255,0.7); }

#tickets .howtobuy{ border: 1px solid var(--keyc1);background-color: rgba(255,255,255,0.7); margin-bottom: 3vw;}
#tickets .howtobuy .sstit{ background-color: var(--keyc1); color: #fff; padding: 1em 0; margin-bottom: 2em;}
#tickets .howtobuy .flowbtn a{ display: block; border: 1px solid var(--keyc1); color: var(--keyc1); padding: 1em; font-weight: bold; font-size: 22px; line-height: 1.5em;  width: 70%; margin: 0 auto 2em;}

#tickets .notice{ border: 1px solid #ccc; background-color: #f0ead8; text-align: left; padding: 2.5% 5%; height: 30em; overflow-y: auto; font-size: 14px; line-height: 1.7em;}
#tickets .notice h4{ margin-bottom: 1em; font-weight: bold; text-align: center;}
#tickets .notice ul{ list-style: disc; padding-left: 1.5em;}
#tickets .notice li{ margin-bottom: 0.25em;}
#tickets .notice .notice_blk{ border-top:  1px solid #aaa; padding: 1em 0;}

#tickets .notice a{ text-decoration: underline; color: #c00;}

.app_dl{ background-color: #eee;width: 90%; margin: 0 auto 3vw; padding: 2.5% 5%;}
.app_dl .app_stit{ margin-bottom: 1.5em; border-bottom: 1px solid #ccc; padding-bottom: 0.5em;}
.dl_link{ display: flex;align-items: center; width: 80%; margin: 0 auto;}
.dl_link .left{ width: 35%; padding-right: 10%;}
.dl_link .left img{ width: 100%; margin: 0 auto;}
.dl_link .right{ width: 65%;}
.dl_link .right ul{ display: flex; align-items: center;}
.dl_link .right ul li img{ width: 90%; }

@media only screen and (max-width: 768px){
    #tickets{ padding: 10vw 0;}
    #tickets .lead{ text-align: left;}
    
    #tickets .price{ margin-bottom: 20px;}
    #tickets .price dl{font-size: 16px; line-height: 1.5em;}
    #tickets .price dt{ width: 30%; padding: 1em 0;}
    #tickets .price dd{ width: 70%; padding: 1em 0; }
    
    #tickets .howtobuy{ font-size: 14px; line-height: 1.5em;}
    #tickets .howtobuy .sstit{ font-size: 18px;}
    #tickets .howtobuy .how_lead{ padding: 0 5%; }
    #tickets .howtobuy .flowbtn a{ width: 100%; text-align: center; font-size: 20px; }
    
    #tickets .notice{ height: 100vw; padding: 5%;}
    
    .app_dl{ padding: 5%; margin-bottom: 5%;}
    .dl_link{ display: inherit; width: 100%;}
    .dl_link .left{ width: 45%; padding-right: 0; margin: 0 auto 5px;}
    .dl_link .right{ width: 100%;}
}

/************ contents ************/
#cont{margin-bottom:10vw; padding-top: 6vw; margin-top: -6vw;}
#cont .container{ max-width: 1400px;}

#cont ul{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 4vw;}
#cont .cont_wrap li{ width: 32.33%; margin-right: 1.5%; margin-bottom: 2%; background-color: #fff; position: relative; border: 1px solid #b19812;}
#cont .cont_wrap li:nth-child(3n){ margin-right: 0;}

#cont .cont_wrap li:before,
#cont .cont_wrap li:after{ content: ""; display: block; width: 45%; height: 45%; position: absolute;background-size: contain; background-repeat: no-repeat;}
#cont .cont_wrap li:before{ background-image: url("../images/contents_deco_left.svg"); left: 0; top: 0;}
#cont .cont_wrap li:after{ background-image: url("../images/contents_deco_right.svg"); right: 0; bottom: 0; background-position: right bottom;}

#cont .cont_blk{ padding: 8% 10% 10%; text-align: left; font-size: 15px; line-height: 1.7em; pointer-events: inherit; z-index: 2;}
#cont .cont_blk h3{ font-size: 20px; line-height: 1.7em; text-align: center; color: var(--keyc1);  position: relative; padding: 40px 0;}
#cont .cont_blk h3 span{ position: absolute; display: block; left: 50%; top: 40%; transform: translate(-50%,-50%); font-size: 140px; color: #f6f3df;}
#cont .cont_blk h3 strong{ position: relative;}

#cont .map{}
#cont .map ul{ display: flex; margin-bottom: 2vw;}
#cont .map li{ width: 50%; color: #fff; padding: 2%; font-size: 18px; line-height: 1.5em;}
#cont .map li p{ margin-bottom: 1em;}

#cont .map li .mcs{height: 20vw;display: flex;align-items: center;justify-content: center;}
#cont .map li .mcs span{border: 1px solid #eee; padding: 0.2em 1em 0.3em; font-size: 0.8em; line-height: 1em;}
#cont .map li.tokyo{background-color: rgba(177,152,18,0.5);}
#cont .map li.osaka{background-color: rgba(177,0,18,0.50);}

#cont .map li figure{ line-height: 0; }

@media only screen and (max-width: 768px){
    #cont{ padding: 10vw 0; margin-top: 0; margin-bottom: 0;}
    
    #cont ul{ display: inherit; margin-bottom: 30px;}
    #cont .cont_wrap li{ width: 100%; margin-right: 0; margin-bottom: 15px;}
    #cont .cont_blk{ padding: 4% 10%;}
    #cont .cont_blk h3 span{ font-size: 120px;}
    
    #cont .map ul{ margin-bottom: 10px; display: inherit;}
    #cont .map li{ width: 100%; min-height: 58vw; padding: 5%; }
    #cont .map li .mcs{ height: 30vw;}
    #cont .map .note{ font-size: 14px; line-height: 1.7em;}
}

/************ goods ************/
#goods{margin-bottom:10vw;padding-top: 6vw; margin-top: -6vw;}

.goods{ padding: calc(50px + 5vw) 0 5vw;}
.goods .container{ max-width: 1600px;}
.goods_wrap ul{ display: flex; flex-wrap: wrap; margin-bottom: 7vw;}
.goods_wrap ul li{ width: 32%;  margin-bottom: 3%; /*display: flex;*/ margin-right: 2%;}
.goods_wrap ul li:nth-child(3n){ margin-right: 0;}
.goods_wrap ul li .txt{ line-height: 1.5em;}

.goods_wrap ul li figure{ line-height: 0; margin-bottom: 0.5em; width: 100%;}
.goods_wrap ul li figure img{ border: 1px solid #ccc;}
.goods_wrap ul li .txt{ width: 100%; text-align: left; /*padding-left: 5%;*/ font-size: 14px; line-height: 1.5em;}
.goods_wrap ul li .txt h3{ font-weight: bold; font-size: 16px; line-height: 1.5em;}
.goods_wrap ul li .txt .gprice{ /*border-bottom: 1px solid var(--keyc1); padding-bottom: 1em;*/ margin-bottom: 1em; font-size: 16px; line-height: 1.7em; color:var(--keyc1); font-weight: bold;}
.goods_wrap ul li .txt .senkou{ display: inline-flex; background-color:var(--keyc1); color: #fff; font-size: 13px; line-height: 1em; padding:0.25em 1em 0.4em; margin-bottom: 0.5em;}

.st_goods{ border: 3px solid var(--keyc1); padding: 4% 5%; margin-bottom: 5vw;}
.st_goods .link a{ display: block; background-color:var(--keyc1); color: #fff; padding: 1em 0; font-weight: bold;}

.cd_wrap{}
.cd_wrap ul{display: flex; flex-wrap: wrap;}
.cd_wrap ul li{ width: 18.4%;  margin-bottom: 3%; margin-right: 2%; text-align: left;}
.cd_wrap ul li:nth-child(5n){ margin-right: 0;}
.cd_wrap h3{ font-size: 14px;line-height: 1.5em; margin-bottom: 0.5em;}
.cd_wrap  .gprice{  margin-bottom: 1em; font-size: 14px; line-height: 1.5em; color:var(--keyc1); font-weight: bold;}

#goods .comingsoon{ border: 1px solid #aaa; display: inline-block; line-height: 1.5em; padding: 0.3em 3em 0.5em;}

@media only screen and (max-width: 768px){
    #goods{ padding: 10vw 0;}
    
    .goods_wrap ul{ display: inherit;}
    .goods_wrap ul li{ width: 100%; margin-bottom: 40px; display: inherit;}
    .goods_wrap ul li figure{  width: 100%; margin-bottom: 10px;}
    .goods_wrap ul li .txt{ width: 100%; padding: 0;}
    .goods_wrap ul li .txt h3{ font-size: 18px; line-height: 1.5em;}
    
    .cd_wrap ul li{ width: 48%;  margin-right: 4%; }
    .cd_wrap ul li:nth-child(5n){ margin-right: 4%;}
    .cd_wrap ul li:nth-child(2n){ margin-right: 0;}
}

/************ flow ************/
.flow{ text-align: left;}
.flow p{ margin-bottom: 1em;}
.flow .tit{ font-size:3em; }
.flow .lead{ text-align: center; margin-bottom: 2em;}
.flow_blk{  padding: 4%; background-color: #fff; margin-bottom: 2em;}
.flow_blk .flow_sstit{ text-align: center; font-size: 30px; line-height: 1.5em; color: var(--keyc1); margin-bottom: 1em;}

.flow_blk .row1{ display: flex;}
.flow_blk .row1 .left{ width: 40%;}
.flow_blk .row1 .right{ width: 60%; padding-left: 5%;}

.flow .app_dl{ width: 100%; text-align: center;}

@media only screen and (max-width: 768px){
    .flow { font-size: 14px; line-height: 1.5em;}    
    .flow .tit{ font-size: 2em;}
    .flow .lead{ text-align: left; margin-bottom: 1em;}
    .flow_blk .flow_sstit{ font-size: 20px; margin-bottom: 10px;}
    
    .flow_blk .row1{ display: inherit;}
    .flow_blk .row1 .left{ width: 100%; margin-bottom: 1em;}
    .flow_blk .row1 .right{ width: 100%; padding-left: 0;}
}


/******* top animation *******/

/* loading */
#loading {position: fixed;top: 0%;left: 0%;height: 100%;width: 100%;z-index: 20000;transition: 0.8s;background-color: #fff;}
#loading .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.4); width: min(240px, 30vw); height: auto; opacity: 0; animation: logoAnime 1.0s; animation-fill-mode:both;}
#loading.open {opacity: 0;pointer-events: none;}
@keyframes logoAnime {
    0%{transform: translate(-50%, -50%) scale(1.4); opacity: 0; filter: blur(10px);}
    100%{transform: translate(-50%, -50%) scale(1.0); opacity: 1; filter: blur(0px);}
}



/******* lower page *******/

/* page tit */
.page_tit{padding: 5em 0;}
.page_tit .main_tit{font-family: var(--font2);font-size: 8em;font-weight: bold;line-height: 1em;}

@media only screen and (max-width: 768px){
	.page_tit{padding: 2em 0;}
	.page_tit .main_tit{font-size: 4em;}
}

/* Coming soon */
.cs{ color: #000; padding: 300px 0; margin: 0;}

@media only screen and (max-width: 768px){
	.cs{ padding: 240px 0;}
}

/* single */
.single{text-align:left;overflow:hidden;position:relative;}
.single .date{font-size: 1em;font-family: var(--font2);font-weight: bold;letter-spacing: 0.04em;line-height: 1.5em;margin-bottom: 0.5em;}
.single .tit{font-size: 1.5em;font-weight: bold;margin-bottom: 1.5em;background-color: #000;color: #fff;padding: 0.2em 0.6em;}

.single .txt_box{padding-bottom: 30px;word-break: break-all;}
.single .txt_box p{margin-bottom: 1.5em;}
.single .txt_box .catch{ font-size: 18px; font-weight: bold; line-height: 1.5em; margin-bottom: 30px;}
.single .txt_box a{color: var(--keyc);text-decoration:underline;display: inline-block;margin-bottom:12px;font-weight: bold;}
.single .txt_box img{ max-width:100%; width:auto; height:auto; display: block; margin-bottom:24px;}

.single .txt_box h1,
.single .txt_box h2,
.single .txt_box h3,
.single .txt_box h4,
.single .txt_box h5{ font-weight: bold; line-height: 1.4em; margin-bottom: 12px; letter-spacing: 0;}
.single .txt_box h1{ font-size: 26px;}
.single .txt_box h2{ font-size: 20px;border-left: 3px solid var(--keyc);padding: 0.5em 0 0.5em 1em;margin: 2em 0 1em;}
.single .txt_box h3{ font-size: 22px;}
.single .txt_box h4{ font-size: 20px;}
.single .txt_box h5{ font-size: 18px;}
.single .txt_box ol,
.single .txt_box ul{ margin-bottom: 2em;}
.single .txt_box ol{ list-style-type: decimal; padding-left: 1.5em;}
.single .txt_box li{ padding-left:0.5em; margin-bottom: 1em;}

.single .txt_box blockquote{ border:1px solid #000; padding: 3%; margin-bottom: 2em;}
.single .txt_box blockquote p:last-of-type{ margin-bottom: 0;}

.single .txt_box hr{ margin: 3em 0; height: 1px; background-color: #ccc; border: none;}

.single .back_btn{font-family: var(--font2);background-color: var(--keyc);color: #000;display: block;text-align: center;font-weight: bold;line-height: 1.5em;padding: 1.5em 1em;}

@media only screen and (max-width: 768px){
	.single{}
	.single .tit{font-size: 1.2em;margin-bottom: 1em;}
	.single .date{}
	.single .txt_box{ padding-bottom: 12px;}
	.single .txt_box p{}
	.single .txt_box .catch{ font-size: 16px; line-height: 1.5em;}
	.single .txt_box a{}

	.single .txt_box h1{ font-size: 20px;}
	.single .txt_box h2{ font-size: 18px;}
	.single .txt_box h3{ font-size: 18px;}
	.single .txt_box h4{ font-size: 18px;}
	.single .txt_box h5{ font-size: 16px;}

	.single .txt_box hr{ margin: 2em 0;}
}





/* =colorbox
------------------------------------------------------------------------------------------*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#b19813;}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#fff; position:relative; z-index:10000;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#fff;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}

.pop_block{ padding: 5%; 
background-image:url("../images/contents_deco_left.svg"),url("../images/contents_deco_right.svg"),url("../images/main_bg.jpg"); background-position: left top,right bottom,center; background-repeat: no-repeat; background-size: min(50%,240px),min(50%,240px),cover;}

.pop_block img{ max-width: 100%;}

@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}