@charset "UTF-8"; /* --------------------------------------------------------------------- movie * --------------------------------------------------------------------- */ /*ヘッダー固定表示時に、アンカーポイントやページ内リンクの位置 */ 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_movie{background: #000;color: #fff} #body_movie h2{margin-bottom: 70px;font-size: 40px;letter-spacing: 0.1em;text-indent: 0.1em;font-weight: normal;color: #ecce7c} #body_movie h2 span{display: block;font-size: 20px;color: #fff} #body_movie h3{font-size: 24px;letter-spacing: 0.1em;text-indent: 0.1em;font-weight: normal;margin-bottom: 50px} #body_movie .mvarea{padding: 160px 0 0} #body_movie .mvarea .mv{width: 938px; margin: auto;position: relative} #body_movie .mvarea .mv .icon{width: 60px; position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);} #body_movie .mvarea .mv img{width: 100%;height: auto} #body_movie .cgarea{padding: 160px 0 0;} #body_movie .cgarea h2{margin-bottom: 50px} #body_movie .cgarea .mv{width: 938px;margin: 0 auto 50px; position: relative} #body_movie .cgarea .mv .icon{width: 60px; position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);} #body_movie .cgarea .mv img{width: 100%;height: auto} #body_movie .d3area{padding: 160px 0 0} #body_movie .d3area h2{padding: 0; margin-bottom: 40px;} #body_movie .d3area ul{width: 1200px;margin: 60px auto 0;} #body_movie .d3area ul li{width: 550px;margin:0 20px 0;position: relative;} #body_movie .d3area ul li img{width: 100%;height: auto} #body_movie .galleryarea{padding: 160px 0 0} #body_movie .galleryarea ul{width: 1200px;margin: auto} #body_movie .galleryarea ul li{width: 20%;margin:0 20px 60px;position: relative} #body_movie .galleryarea ul li img{width: 100%;height: auto} #body_movie .galleryarea ul li p{ background:#666;color: #fff;text-align: left;padding: 6px;width: 100%;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;} @media screen and (max-width: 767px) {/*スマホ設定*/ #body_movie h2{margin-bottom: 30px;font-size: 23px;letter-spacing: 0.1em;text-indent: 0.1em;font-weight: normal;color: #ecce7c} #body_movie h2 span{display: block;font-size: 14px;color: #fff} #body_movie h3{font-size: 17px;margin-bottom: 30px} #body_movie .mvarea, #body_movie .cgarea, #body_movie .planarea, #body_movie .d3area, #body_movie .galleryarea{padding: 60px 0 0} #body_movie .panoramaarea{padding: 60px 0 60px} #body_movie .mvarea .mv, #body_movie .cgarea .mv, #body_movie .d3area .mv{width: 80%; } #body_movie .cgarea h2{margin-bottom: 30px} #body_movie .cgarea .mv{width: 90%;margin: 0 auto 30px; position: relative} #body_movie .d3area h2{padding: 0; margin-bottom: 20px;} #body_movie .d3area h3{padding: 0; margin-bottom: 0;} #body_movie .d3area ul{width: 80%;margin: 0px auto 0;} #body_movie .d3area ul li{width: 100%; margin:20px 0 0;position: relative;} #body_movie .d3area ul li img{width: 100%;height: auto} #body_movie .galleryarea ul{width:100%;margin: auto } #body_movie .planarea ul li{margin-bottom: 20px} #body_movie .planarea ul li p{padding: 10px} #body_movie .galleryarea ul li{width: 45%;margin:0 2% 20px;position: relative} } /*=============================================================================== ===============================================================================*/ .modal-wrap { position: fixed; top: 0; left: 0; z-index: 999999; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0,0,0,0.7);} .modal-wrap.shown { display: flex;} .modal-panel { width:70%; max-width: 1200px; position: relative; z-index: 999999; } .modal-frame { position: relative; width: 100%; padding-top: 56.25%;} .modal-frame iframe { display: none; position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;} .modal-close{position: absolute;top: -80px;right: -50px;font-size: 80px;display: block;cursor: pointer;color: #fff} @media screen and (max-width: 896px) {/*スマホのスタイル*/ .modal-panel { width:96%; } .modal-close{position: absolute;top: -80px;right: 0px;font-size: 60px;display: block;color: #fff} .modal__content{padding: 0px;width: 96%;} .js-modal-close{position: absolute;top: -60px;right: 0px;font-size: 60px;display: block;color: #fff} .modal__content{padding: 0px;width: 96%;} } body.fixed {position: fixed;width: 100%;height: 100%;left: 0;} .modal{display: none;height: 100vh;position: fixed;top: 0;left: 0;width: 100%;z-index: 999999} .modal__bg{background: rgba(0,0,0,0.8);height: 130vh;position: absolute;left: 0;top: 0; width: 100%;z-index: 999999} .modal__content{background: #333;left: 50%;padding:0px;position: absolute;top: 50%;transform: translate(-50%,-50%);width: 70%;z-index: 999999} .modal__content a{text-decoration: none} .js-modal-close{position: absolute;top: -80px;right: -50px;font-size: 80px;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{width: 100%;padding: 12px;text-align: left; background:#666;color: #fff; font-size: 13px; box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;} .photo-wrap img{width: 100%;height: auto} @media screen and (max-width: 767px) {/*スマホ設定*/ .js-modal-close{position: absolute;top: -60px;right: 0px;font-size: 60px;display: block;color: #fff} .modal__content{padding: 0px;width: 96%;} }