@charset "UTF-8";
/* ---------------------------------------------------------------------
 special
 * --------------------------------------------------------------------- */
a.anker{
   display: block;
   margin-top:-100px;
   padding-top:100px;
}
 
.pages_main_image{height:auto;position: relative}
.pages_main_image .images{width: 100%;height: auto;min-width: 1200px;}
.pages_main_image .inner{position: absolute;left: 0;right: 0;margin: auto;top: 0}

#body_special{padding-bottom: 60px;}
#body_special img{width: 100%;height: auto}

#body_special .conceptarea{padding: 80px 0;}
#body_special .cgarea{background: url("../images/roov/bg.jpg") no-repeat center center;background-size: cover;padding: 80px 0;}
#body_special .conceptarea li{margin-bottom: 30px}

#body_special h2{color: #333;font-size: 34px;letter-spacing: 0.2em;text-indent: 0.2em;position: relative;padding: 20px 0;margin: 30px 0 50px;font-weight: normal}
#body_special h2::before {  position: absolute;  content: "";  width: 100%;  height: 2px;  background: linear-gradient(to right,  #ffffff 0%,#666666 50%,#ffffff 100%);  top: 0;  left: 0}
#body_special h2::after {  position: absolute;  content: "";  width: 100%;  height: 2px;  background: linear-gradient(to right,  #ffffff 0%,#666666 50%,#ffffff 100%);  bottom: 0;  left: 0}
#body_special .mv{position: relative}
#body_special .name{margin-top: 12px;font-size: 16px;}
#body_special .name span{font-size: 13px}
#body_special .mv .icon{width: 60px; position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);}
#body_special .col40{width: 40%}

#body_special .cgarea2 li{width: 25%;}
#body_special .cgarea2 li a{position: relative;display: block}
#body_special .cgarea2 li a p{position: absolute;left: 0;bottom: 0;width: 100%;padding: 12px;text-align: left; background:rgba(0,0,0,0.5);color: #fff;
box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}


body.fixed {position: fixed;width: 100%;height: 100%;left: 0;top: 0;}
.modal{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100}
.modal__bg{background: rgba(0,0,0,0.8);height: 120vh;position: absolute;left: 0;top: 0; width: 100%;}
.modal__content{background: #fff;padding:0px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 70%;}
.modal__content a{text-decoration: none}
.js-modal-close{position: absolute;top: -40px;right: -40px;font-size: 60px;display: block;color: #fff}
.movie-wrap { position: relative; padding-bottom: 56.25%;height: 0; overflow: hidden;}

.movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.photo-wrap{position: relative}
.photo-wrap p{position: absolute;left: 0;bottom: 0;width: 100%;padding: 12px;text-align: left; background:rgba(0,0,0,0.7);
box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;color: #fff}
.photo-wrap img{width: 100%;height: auto}


/*===============================================================================
===============================================================================*/
@media screen and (min-width: 768px) { /*PC設定*/
.contents_innner {
padding-top: 100px;
margin-top:-100px;}
}
/*===============================================================================
===============================================================================*/
@media screen and (max-width: 767px) {/*スマホ設定*/


#body_special h2{width: 100%;margin: 10px auto}

#body_special .conceptarea{padding: 40px 0 40px}
#body_special .cgarea{padding: 40px 0 40px}

#body_special h2{font-size: 20px;padding: 14px 0;}
#body_special h2::before,
#body_special h2::after{background-size: 100%}

#body_special .col2{width: 90%;margin: 20px auto 0}
#body_special .col4{width: 48%;margin: 20px auto 0}
#body_special .col40{width: 70%;margin: 20px auto 0}
#body_special .cgarea2 li{width: 48%;margin: 20px auto 0}

#body_special .cgarea2 li a p,
.photo-wrap p{padding: 6px;font-size: 12px}

.js-modal-close{position: absolute;top: -60px;right: 0px;font-size: 60px;display: block;color: #fff}
.modal__content{padding: 0px;width: 96%;}
}