@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : gallery.css
Description : ギャラリーページCSS
===================================================================== */
/*width*/
/*tan-3.1*/
/*margin top*/
/*color*/
/* =====================================================================
*    コンテンツ
* =================================================================== */
@media screen and (max-width: 699px) {
  #main .mainInner {
    padding-bottom: 10.15%;
  }
  #main .h1_tit {
    background: url(../images/gallery/sp/h1_tit.png) no-repeat;
    background-size: cover;
    margin: 0 auto 6.25%;
    width: 46.5625%;
    height: 0;
    padding-top: 13.6%;
    text-indent: -9999px;
    overflow: hidden;
  }
  #main .gallery_area{
    width: 90.625%;
    margin: 0 auto 11.71875%;
    background: #fff;
    position: relative;
    z-index: 0;
  }
  #main .gallery_area.nakamura{
    border: 2px solid #e50065;
  }
  #main .gallery_area.fujisaki{
    border: 2px solid #2ea6dd;
  }
  #main .gallery_area:before{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 15px;
    right: -2.5%;
    z-index: -1;
  }
  #main .gallery_area.nakamura:before{
    background: #e50065;
  }
  #main .gallery_area.fujisaki:before{
    background: #2ea6dd;
  }
  #main .gallery_area .gallery_area_inner{
    background: #fff;
  }
  #main .inner {
    padding: 4.6875% 3.125% 9.375%;
  }
  #main .gallery_area .h2_tit{
    text-indent: -9999px;
    overflow: hidden;
    height: 0;
  }
  #main .gallery_area.nakamura .h2_tit{
    background: url(../images/gallery/sp/h2_tit_a.png) no-repeat;
    background-size: cover;
    margin: 0 auto 3.5%;
    width: 71%;
    padding-top: 20.7%;
  }
  #main .gallery_area.fujisaki .h2_tit{
    background: url(../images/gallery/sp/h2_tit_f.png) no-repeat;
    background-size: cover;
    margin: 0 auto 4.5%;
    width: 94.62%;
    padding-top: 19.2%;
  }
  #main .gallery_area.nakamura .g_text{
    margin: 0 auto 6.8125%;
    width: 98%;
    text-align: center;
    font-size: 1.1rem;
    color: #2ea6dd;
    font-weight: bold;
  }
  #main .gallery_area.fujisaki .g_text{
    margin: 0 auto 6.8125%;
    width: 98%;
    text-align: center;
    font-size: 1.1rem;
    color: #e50065;
    font-weight: bold;
}
  #main .gallery_area .gallery_list{
    letter-spacing: -.4em;
  }
  #main .gallery_area .gallery_list li{
    letter-spacing: normal;
    display: inline-block;
    width: 46.66%;
    cursor: pointer;
    vertical-align: top;
  }
  #main .gallery_area .gallery_list li:not(:nth-of-type(2n+1)){
    margin-left: 6%;
  }
  #main .gallery_area .gallery_list li:not(:nth-of-type(-n+2)){
    margin-top: 5.55%;
  }
  #main .gallery_area .gallery_list li img{
    width: 100%;
    height: auto;
  }
  #main .other_gallery_area{
    margin-top: 10.15%;
  }
  #main .other_gallery_area a{
    display: block;
    text-indent: -9999px;
    margin: 0 auto;
    height: 0;
  }
  #main .other_gallery_area .bnr_f{
    background: url(../images/gallery/sp/bnr_f.png);
    background-size: cover;
    width: 90.625%;
    padding-top: 23%;
  }
  #main .other_gallery_area .bnr_a{
    background: url(../images/gallery/sp/bnr_a.png);
    background-size: cover;
    width: 90.9375%;
    padding-top: 22.1%;
  }
  .modal_box {
    position: fixed;
    z-index: 7777;
    display: none;
    width: 90.625%;
    margin: 0;
    padding: 4.375% 3.9% 3.4375%;
    background: #fff;
    box-sizing: border-box;
  }
  .modal_box .img_area{
    width: 100%;
    margin: 0 auto 20px;
    text-align: center;
  }
  .modal_box .img_area img{
    width: 60%;
    height: auto;
  }
  .modal_box .txt_area{
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }
  .modal_box .link_area{
    position: absolute;
    bottom: -55px;
    left: 0;
    width: 100%;
  }
  .modal_box .link_area .modal_link{
    width: 46.01875%
  }
  .modal_box .link_area .modal_link.left{
    float: left;
  }
  .modal_box .link_area .modal_link.right{
    float: right;
  }
  .modal_box .link_area .modal_link a{
    width: 100%;
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 3.125% 0;
    cursor: pointer;
  }
  .modal_box .link_area .modal_link.left a{
    text-align: left;
  }
  .modal_box .link_area .modal_link.right a{
    text-align: right;
  }
  .modal_box.nakamura .link_area .modal_link a{
    background: #e50065;
  }
  .modal_box.fujisaki .link_area .modal_link a{
    background: #2ea6dd;
  }
  .modal_box .link_area .modal_link a span{
    display: inline-block;
    line-height: 1.6;
  }
  .modal_box .link_area .modal_link.left a span{
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin: 0 3% 0 5.3%;
  }
  .modal_box .link_area .modal_link.right a span{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin: 0 5.3% 0 3%;
  }
  .modal_box .link_area:after{
    display: block;
    content: '';
    clear: both;
  }
  .modal_box .close_area{
    position: absolute;
    top: -50px;
    right: 0;
  }
  .modal_box .close_area a{
    display: block;
    width: 45px;
    margin: 0 auto;
    height: 45px;
    text-indent: -9999px;
    position: relative;
  }
  .modal_box.nakamura .close_area a{
    background: #e50065;
  }
  .modal_box.fujisaki .close_area a{
    background: #2ea6dd;
  }
  .modal_box .close_area a:before,
  .modal_box .close_area a:after{
    display: block;
    background: #fff;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 25px;
    height: 4px;
  }
  .modal_box .close_area a:before{
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  .modal_box .close_area a:after{
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
  }
  .modal_bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6666;
    display: none;
    width: 100%;
    height: 120%;
    background-color: rgba(0,0,0,0.6);
  }

}

@media screen and (min-width: 700px) {
  #main{
    display: block;
  }
  #main .mainInner {
    padding: 86px 0 56px;
    background: url(../images/top/main_bg.png);
  }
  #main .h1_tit {
    background: url(../images/gallery/h1_tit.png) no-repeat;
    background-size: cover;
    margin: 0 auto 58px;
    width: 249px;
    height: 72px;
    text-indent: -9999px;
    overflow: hidden;
  }
  #main .gallery_area{
    width: 996px;
    margin: 0 auto;
    background: #fff;
    position: relative;
    z-index: 1;
  }
  #main .gallery_area.nakamura{
    border: 2px solid #e50065;
  }
  #main .gallery_area.fujisaki{
    border: 2px solid #2ea6dd;
  }
  #main .gallery_area:before{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 15px;
    right: -15px;
    z-index: -1;
  }
  #main .gallery_area.nakamura:before{
    background: #e50065;
  }
  #main .gallery_area.fujisaki:before{
    background: #2ea6dd;
  }
  #main .gallery_area .gallery_area_inner{
    background: #fff;
  }
  #main .inner {
    margin: 0 auto;
    width: 900px;
    padding: 48px 0 50px;
  }
  #main .gallery_area .h2_tit{
    text-indent: -9999px;
    overflow: hidden;
  }
  #main .gallery_area.nakamura .h2_tit{
    background: url(../images/gallery/h2_tit_a.png) no-repeat;
    background-size: cover;
    margin: 0 auto 25px;
    width: 417px;
    height: 116px;
  }
  #main .gallery_area.fujisaki .h2_tit{
    background: url(../images/gallery/h2_tit_f.png) no-repeat;
    background-size: cover;
    margin: 0 auto 30px;
    width: 541px;
    height: 110px;
  }
  #main .gallery_area.nakamura .g_text{
  margin: 0 auto 60px;
  width: 98%;
  text-align: center;
  font-size: 2.1rem;
  color: #2ea6dd;
  font-weight: bold;
}
#main .gallery_area.fujisaki .g_text{
  margin: 0 auto 60px;
  width: 98%;
  text-align: center;
  font-size: 2.1rem;
  color: #e50065;
  font-weight: bold;
}
  #main .gallery_area .gallery_list{
    letter-spacing: -.4em;
  }
  #main .gallery_area .gallery_list li{
    letter-spacing: normal;
    display: inline-block;
    width: 275px;
    cursor: pointer;
    vertical-align: top;
  }
  #main .gallery_area .gallery_list li:not(:nth-of-type(3n+1)){
    margin-left: 37px;
  }
  #main .gallery_area .gallery_list li:not(:nth-of-type(-n+3)){
    margin-top: 30px;
  }
  #main .gallery_area .gallery_list li img{
    width: 100%;
    height: auto;
  }
  #main .other_gallery_area{
    margin-top: 50px;
  }
  #main .other_gallery_area a{
    display: block;
    text-indent: -9999px;
    margin: 0 auto;
    width: 488px;
  }
  #main .other_gallery_area .bnr_f{
    background: url(../images/gallery/bnr_f.png);
    background-size: cover;
    height: 124px;
  }
  #main .other_gallery_area .bnr_a{
    background: url(../images/gallery/bnr_a.png);
    background-size: cover;
    height: 120px;
  }
  .modal_box {
    position: fixed;
    z-index: 7777;
    display: none;
    width: 70%;
    max-width: 780px;
    margin: 0;
    padding: 45px 50px 20px;
    background: #fff;
    box-sizing: border-box;
  }
  .modal_box .img_area{
    width: 55%;
    margin: 0 auto 20px;
    text-align: center;
  }
  .modal_box .img_area img{
    width: 100%;
    height: auto;
  }
  .modal_box .txt_area{
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
  }
  .modal_box .link_area{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 122px;
    margin: auto 0;
    width: 100%;
  }
  .modal_box .link_area .modal_link.left{
    float: left;
  }
  .modal_box .link_area .modal_link.right{
    float: right;
  }
  .modal_box .link_area .modal_link a{
    width: 92px;
    display: block;
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 30px 0 16px;
    cursor: pointer;
  }
  .modal_box.nakamura .link_area .modal_link a{
    background: #e50065;
  }
  .modal_box.fujisaki .link_area .modal_link a{
    background: #2ea6dd;
  }
  .modal_box .link_area .modal_link a span{
    display: block;
    font-size: 35px;
    line-height: 1.6;
  }
  .modal_box .link_area .modal_link.left a span{
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .modal_box .link_area .modal_link.right a span{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .modal_box .link_area:after{
    display: block;
    content: '';
    clear: both;
  }
  .modal_box .close_area{
    position: absolute;
    top: -50px;
    right: 0;
  }
  .modal_box .close_area a{
    display: block;
    width: 45px;
    margin: 0 auto;
    height: 45px;
    text-indent: -9999px;
    position: relative;
  }
  .modal_box.nakamura .close_area a{
    background: #e50065;
  }
  .modal_box.fujisaki .close_area a{
    background: #2ea6dd;
  }
  .modal_box .close_area a:before,
  .modal_box .close_area a:after{
    display: block;
    background: #fff;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 25px;
    height: 4px;
  }
  .modal_box .close_area a:before{
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  .modal_box .close_area a:after{
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
  }
  .modal_bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6666;
    display: none;
    width: 100%;
    height: 120%;
    background-color: rgba(0,0,0,0.6);
  }
}