@charset "utf-8";
@media print, screen and (max-width:768px){
/*=========================================================================
STYLE BASIC
=========================================================================*/
.for_pc {display: none !important;}




/*=========================================================================
HEADER
=========================================================================*/
#Header {
height:80px;
width:100%; 
position: fixed;
z-index: 9;
left: 0;
top: 0;
background-image: url('../img/sp_bg_header.png');
background-size: 100%;
background-position: left center;
}

@media print, screen and (max-width:480px){
#Header, #headContainer {height:14vw; }
#Header {background-size:cover;}
}


/*=========================================================================
HEADER：GLOBAL NAVI
=========================================================================*/
.global_navi {
width: 86%;
height: 100vh;
top:0;
padding-top: 80px;
-ms-box-shadow: -3px 6px 9px 3px rgba(0,0,0,.1);
-moz-box-shadow: -3px 6px 9px 3px rgba(0,0,0,.1);
-webkit-box-shadow: -3px 6px 9px 3px rgba(0,0,0,.1);
box-shadow: -3px 6px 9px 3px rgba(0,0,0,.1);
}
/* ---------------------------------------------------------------- */
.global_navi:before {
right: 6%;
top: 75%;
width:30%;
height: 30%;
max-width: 110px;
}

@media print, screen and (max-width:480px){
.global_navi:before {top: 65%;}

}


/* ---------------------------------------------------------------- */
.menu-trigger {width:8vw; height: 60px; right: 8%; max-width: 43px;}


@media print, screen and (max-width:480px){
.menu-trigger {width:10vw; height:14vw; right: 8%;  }
}

/* ---------------------------------------------------------------- */
.menu-trigger span {width: 100%;left: 0%; height: 2px;}

.menu-trigger span:nth-child(1) {top: 38%;}
.menu-trigger span:nth-child(2) {top: 65%;}
.menu-trigger span:nth-child(3) {top: 92%;}
.menu-trigger.active span:nth-child(1) , .menu-trigger.active span:nth-child(3) {top: 65%; }


@media print, screen and (max-width:480px){
.menu-trigger span {height: 1.8px;}
.menu-trigger span:nth-child(1) {top: 31%;}
.menu-trigger span:nth-child(2) {top: 53%;}
.menu-trigger span:nth-child(3) {top: 75%;}
.menu-trigger.active span:nth-child(1) , .menu-trigger.active span:nth-child(3) {top: 53%; }
}

/* ---------------------------------------------------------------- */
ul.navi_list {padding: 0 6% 6%;}
ul.navi_list li {width:100%; font-weight: 400;}
ul.navi_list li a, ul.navi_list li span {font-size: 19px;padding: 3.5% 0;}

@media print, screen and (max-width:767px){
ul.navi_list a, ul.navi_list li span {font-size:2.4739vw !important;}
}

@media print, screen and (max-width:480px){
ul.navi_list a, ul.navi_list li span {font-size:3.958vw !important; padding: 4.5% 0;}
}


/* ---------------------------------------------------------------- */
ul.navi_list li a:before,
ul.navi_list li a:after {width: 5%; max-width: 14px;}


/*=========================================================================
FOOTER
=========================================================================*/
#Footer:before{
background-size: calc(100% / 7);
top: -2.2vw;
width: 100%;
height: 2.2vw;
}

/* ---------------------------------------------------------------- */
#Footer .section_basic {padding-bottom: 6%;}

/* ---------------------------------------------------------------- */
ul.credit_list {margin-bottom:8%;}
ul.credit_list li {font-size:2.08vw; margin-bottom: 1%;}

@media print, screen and (max-width:480px){
ul.credit_list li{font-size:2.917vw;}
}

/* ---------------------------------------------------------------- */
.copy {font-size:1.432vw;}


@media print, screen and (max-width:480px){
.copy {font-size:2.29vw;}
}



/* ---------------------------------------------------------------- */
#sns_iconBox {width: 100%; margin-bottom: 12%;}

/* ---------------------------------------------------------------- */
ul#sns_iconLink li {width: 12%; margin-right: 13%;}



/*=========================================================================
MODAL PAGE
=========================================================================*/
#modalWrapper {width: 100% !Important; height: auto; }

.modal_content {background: #f9f5f2; height: auto;}
/*
dl.modal_container {display: -webikit-flex; display: flex; flex-wrap: wrap; padding:3% 3% 9%; }
dl.modal_container dt {width: 39%; margin-right: 5.5%;}
dl.modal_container dd {width: 55.5%;}
*/
/* ---------------------------------------------------------------- */


dl.modal_container {display: block; padding: 3% 9% 6%; width: 100%; height: auto; }
dl.modal_container dt, dl.modal_container dd {width: 100%;}
dl.modal_container dt {margin: 0 auto;}



/* ---------------------------------------------------------------- */
.modal_photo {margin-bottom: 4%;}

.modal_title {font-size:28px; margin-bottom: 4%;}
.modal_cap {font-size:22px; margin-bottom: 1%;}

@media print, screen and (max-width:767px){
.modal_title {font-size:3.645vw;}
.modal_cap {font-size:2.86vw; }
}

@media print, screen and (max-width:640px){
.modal_title {font-size:4.37vw;}
.modal_cap {font-size:3.86vw;}
}

@media print, screen and (max-width:480px){
.modal_title {font-size:7.12vw;}
.modal_cap {font-size:4.5vw;}
}


/* ---------------------------------------------------------------- */
dl.modal_container .btn_basic {margin: 0;}
dl.modal_container dd, dl.modal_container dd p {font-size:14px;}
dl.modal_container .btn_basic, dl.modal_container .btn_basic a {font-size:14px;}
dl.modal_container dd p  {margin-bottom: 1.4em;}


@media print, screen and (max-width:480px){
dl.modal_container dd, dl.modal_container dd p {font-size:3.5vw;}
dl.modal_container .btn_basic, dl.modal_container .btn_basic a {font-size:3.2vw;}

}


/* ---------------------------------------------------------------- */
.fancybox-prev,
.fancybox-next {width:5% !important; height: 30% !important; top: 30% !important; }
.fancybox-prev {left: -3% !important;}
.fancybox-next{	right: -3% !important;}
.fancybox-prev span,
.fancybox-next span { width: 100% !important; height: 100% !important;}



@media print, screen and (max-width:480px){
.fancybox-prev,
.fancybox-next {width:2% !important; top: 10% !important;  background: #ccc;}
.fancybox-prev {left: -5% !important;}
.fancybox-next{	right: -5% !important;}
}
.fancybox-prev span,
.fancybox-next span { width: 100% !important; height: 100% !important;}


/* ---------------------------------------------------------------- */

.btn_box {margin-top: 3%; margin-bottom: 4%;}
.btn_sns {width: 8%; margin-left: 3% !important;}
.btn_sns:first-child {margin-left: 0 !important;}


/* ---------------------------------------------------------------- */
dl.modal_container .stage_box {padding-bottom: 5%; margin-bottom: 5%;}


/* ---------------------------------------------------------------- */
.one_period {margin-bottom: 6%;}

/* ---------------------------------------------------------------- */
dl.modal_container .one_period:first-of-type {margin-top: 6%;} 


/* ---------------------------------------------------------------- */
ul.modal_photo_list {margin-bottom: 4%;}


ul.modal_photo_list li {width: 29%; margin:0 4% 4% 0;}
ul.modal_photo_list li:nth-of-type(3n) {margin-right: 0;}

ul.modal_photo_list li img {margin-bottom: 2%;}
ul.modal_photo_list li p {font-size: 13px; text-align: center;}


@media print, screen and (max-width:480px){
ul.modal_photo_list li {width: 48%; margin:0 4% 4% 0;}
ul.modal_photo_list li:nth-of-type(3n) {margin-right: 4%;}
ul.modal_photo_list li:nth-of-type(even) {margin-right: 0;}
ul.modal_photo_list li p {font-size:2.7vw;}
}


/* ---------------------------------------------------------------- */
.p_cover {padding: 6%;}

/* ---------------------------------------------------------------- */
.photo_list_cap {font-size:14px !important; margin-bottom: .5em !important;}


@media print, screen and (max-width:480px){
.photo_list_cap {font-size:3.5vw !important;}
}



}