/* Web Font */ .jp {font-family:"FOT-筑紫明朝 Pr6 RB";} .jp2{font-family:"FP-こぶりなゴシック StdN W6";} .jp3{font-family:"FP-こぶりなゴシック StdN W3";} .en {font-family:'Karla',sans-serif;} /* 共通 */ #wrapBox,#bottomBox,.btnMore{width:auto;margin:0 15px;} .btnMore{text-align:center;} .btnMore a{display:inline-block;padding:5px 15px;background:#262626;color:#fff;font-family:"FP-こぶりなゴシック StdN W3";} .btnMore a:before{content:">";display:inline;padding-right:5px;} @media all and (min-width:600px){ .btnMore{text-align:right;} } @media all and (min-width:1000px){ #wrapBox, #bottomBox, .btnMore{max-width:1000px;margin:0 auto;} .btnMore a:hover{opacity:0.7;} .btnMore{max-width:1140px;margin:0 auto;} } /* Slider */ #wide{position:relative;width:100%;overflow:hidden;} #wide{position:relative;width:100%;overflow:hidden;} #wide .device{position:relative;left:50%;width:3000px;margin-left:-1505px;} /*#wide .device .arrow-left{position:absolute;top:45%;left:1015px;z-index:2;width:55px;height:55px;margin-top:-35px;background:url(../img/top/prev.png) no-repeat left center;} #wide .device .arrow-right{position:absolute;top:45%;right:1015px;z-index:2;width:55px;height:55px;margin-top:-35px;background:url(../img/top/next.png) no-repeat left center;}*/ #wide .device .arrow-left{position:absolute;top:50%;left:1015px;z-index:2;width:55px;height:55px;margin-top:-25px;background:url(../img/top/prev.png) no-repeat left center;} #wide .device .arrow-right{position:absolute;top:50%;right:1015px;z-index:2;width:55px;height:55px;margin-top:-25px;background:url(../img/top/next.png) no-repeat left center;} #wide .device .swiper-slide-active{margin:0 5px;} @media screen and (max-width:999px){ #wide .device{left:0;width:300%;margin-left:-100%;} #wide .device .arrow-left, #wide .device .arrow-right{display:none;} #wide .device .swiper-slide-active{margin:0;} } #wide .swiper-container{max-height:0;padding-bottom:19.3%;} #wide .swiper-wrapper{margin:0;padding:0;} #wide .swiper-wrapper .swiper-slide{background-size:contain;background-repeat:no-repeat;} #wide .swiper-wrapper .swiper-slide a{display:block;height:100%;text-decoration:none;} #wide .swiper-wrapper .swiper-slide a img{width:100%;max-width:1000px;height:auto;margin:auto;} /* .topNewsTxt */ .topNewsTxt .inner .pickUp01{font-family:"FP-こぶりなゴシック StdN W6";} .topNewsTxt .inner .pickUp02{'Karla',sans-serif;} .topNewsTxt{padding-bottom:15px;background: #FFF;} .topNewsTxt .inner{padding:10px;} .topNewsTxt .inner br{display:none;} .topNewsTxt .inner .pickUp01{display:none;margin-right:5px;color:#000000;} .topNewsTxt .inner .pickUp02{position:relative;display:inline-block;height:22px;padding:0 0 0 8px;margin-right:16px;color:#ffffff;line-height:22px;} .topNewsTxt .inner .pickUp02:after{content:"";display:inline-block;position:absolute;right:-22px;border:#fff 11px solid;border:rgba(0,0,0,0) 11px solid;border-left-style:solid;border-left-width:0 0 0 11px;} .topNewsTxt .inner .pickUp02{background:#0e3262;} .topNewsTxt .inner .pickUp02:after{border-left-color:#0e3262;} @media screen and (min-width:600px){ .topNewsTxt .inner .pickUp01{display:inline-block;} .topNewsTxt .inner .pickUp01:before{content:">";display:inline-block;width:15px;margin-right:5px;vertical-align:top;} } @media screen and (min-width:1000px){.topNewsTxt .inner{width:1000px;margin:0 auto;padding:10px 0;}} /* Free Area */ #freeArea{position:relative;z-index:1;padding:80px 15px 40px;background:url(../img/share/bg.gif);background-size:13px 13px;} #freeArea:before{content:"";display:block;position:absolute;top:0;left:0;right:0;z-index:2;width:100%;height:20px;background:url(../img/top/bg_free.png) no-repeat;background-size:100% 20px;} #freeArea #rte_area{width:100%;max-width:1000px;margin:0 auto;} main#wrapper #rte_area{width:100%;max-width:1000px;margin:0 auto 20px auto;} #freeArea{ padding-top:0px; } /* バナーがないときのスタイル */ @media screen and (min-width:600px){ #freeArea:before{height:35px;background-size:100% 35px;} } @media screen and (min-width:1000px){ #freeArea:before{height:50px;background-size:100% 50px;} } /* #workBox */ #bukkenBox{position:relative;z-index:2;clear:both;padding:15px 0 100px;background:#dddddd;} #bukkenBox:before{content:"";display:block;position:absolute;bottom:100%;left:0;right:0;z-index:4;width:100%;height:50px;background:url(../img/top/bg_search.png) no-repeat center bottom;background-size:100% 50px;} #bukkenBox h2{position:relative;z-index:1;padding:60px 0 15px;margin-bottom:40px;background:url(../img/top/icon_search.png) no-repeat center top;font-size:1.4375em;text-align:center;line-height:1;} #bukkenBox h2 span.en{color:#0e3262;} #bukkenBox h2:before{content:"";display:block;position:absolute;left:50%;bottom:0;width:180px;height:2px;margin-left:-90px;background:#0e3262;} @media screen and (min-width:600px){ #bukkenBox:before{height:35px;background-size:100% 35px;} #bukkenBox h2{margin-bottom:65px;font-size:2em;} } @media screen and (min-width:800px){ // #bukkenBox:after{content:"";display:block;position:absolute;top:-20px;right:20px;z-index:10;width:262px;height:250px;background:url(../img/top/bg_bukken.png) no-repeat;} } @media screen and (min-width:1000px){ #bukkenBox:before{height:50px;background-size:100% 50px;} } @media screen and (min-width:1100px){ #bukkenBox:after{left:50%;right:initial;margin-left:240px;} } #listBox{position:relative;z-index:20;max-width:1000px;margin:0 15px 60px;} #listBox h3{margin-bottom:8px;color:#0e3262;font-family:"FP-こぶりなゴシック StdN W6";} #listBox h3:before{content:"▼";display:inline-block;color:inherit;} #listBox select{width:100%;padding:10px;margin-bottom:10px;box-sizing:border-box;} #listBox #place_box{padding-top:20px;clear:both;} #listBox #place_box input{border:1px solid #0e3262;color:#000;cursor:pointer;display:block;font-size:1.05em;margin:0 auto;padding:10px 70px 10px 90px;position:relative;background:url(../img/pg/search.gif) no-repeat 60px center #fff;} @media screen and (min-width:600px){ #listBox{padding:15px 18px 20px;border:1px solid #757575;background:#ededed;box-shadow:2px 2px 0 #fff inset,-2px -2px 0 #fff inset;} #listBox select{display:block;} #listBox select:last-child{clear:both;} } @media screen and (min-width:600px) and (max-width:799px){ #listBox select{width:48%;} #listBox select:nth-child(odd){float:left;clear:both;} #listBox select:nth-child(even){float:right;} } @media screen and (min-width:800px){ #listBox select{float:left;width:32%;} #listBox select:nth-child(3n+1){clear:both;} #listBox select:nth-child(3n+2){margin-left:2%;margin-right:2%;} } @media screen and (min-width:1000px){ #listBox{margin:0 auto 60px;} } #workBox {position:relative;z-index:15;width:290px;margin:10px auto 30px;} #workBox li{display:block;width:290px;margin-bottom:10px;} #workBox li a{display:table;width:100%;} #workBox li a img, #workBox li a div{height:80px;transition:0.3s ease-in-out;} #workBox li a img{display:block;width:100%;opacity:1;} #workBox li a div{position:relative;z-index:1;display:table-cell;width:100%;background:#0e3262;font-size:1.15em;color:#ffffff;vertical-align:middle;text-align:center;line-height:20px;box-sizing:border-box;} #workBox li a div:after{content:"";position:absolute;top:0;left:50%;z-index:2;display:block;width:130px;height:3px;margin-left:-65px;background:#231814;} #workBox li a:hover img{opacity:0.7;} #workBox li a:hover div{background:#636363;} #workBox li a:hover div:after{display:none;} @media screen and (min-width:600px){ #workBox{margin-bottom:10px;} #workBox li{float:left;margin-left:20px;} } @media screen and (min-width:600px) and (max-width:909px){ #workBox{width:600px;} #workBox li:nth-child(odd){clear:both;margin-left:0;} } @media screen and (min-width:910px) and (max-width:1239px){ #workBox{width:910px;} #workBox li:nth-child(3n+1){clear:both;margin-left:0;} } @media screen and (min-width:1240px){ #workBox{width:1240px;} #workBox li{margin-left:26px;} #workBox li:nth-child(4n+1){clear:both;margin-left:1px;} } /* #eventBox */ #eventBox{position:relative;padding:40px 15px;background:url(../img/top/bg_event.png) no-repeat center top;background-size:cover;} #eventBox:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;width:100%;background:url(../img/share/bg.gif);} #eventBox .inner{position:relative;} #eventBox a{transition:0.3s ease-in-out;} @media screen and (min-width:1240px){ #eventBox .inner{max-width:1240px;margin:0 auto;} } #eventBox h2{position:relative;padding:60px 0 20px;margin-bottom:35px;background:url(../img/top/icon_event.png) no-repeat center top;font-size:1.4375em;color:#fff;text-align:center;line-height:1;} #eventBox h2:before{content:"";position:absolute;top:0;left:50%;display:block;} #eventBox h2:after{content:"";position:absolute;bottom:0;left:50%;display:block;width:180px;height:2px;background:#fff;margin-left:-90px;} #eventBox h2 .en{color:#0e3262;} #eventBox .catch{display:none;} #eventBox ul{list-style:none;margin:0 auto 40px;} #eventBox ul li{max-width:280px;margin:0 auto 15px;} #eventBox ul li a{display:block;width:100%;height:auto;padding:10px;background:#fff;box-sizing:border-box;} #eventBox ul li a .noimg{display:table;width:100%;max-width:260px;background:#ccc;} #eventBox ul li a .noimg:before{content:"no image";display:table-cell;width:100%;font-size:2em;color:#fff;text-align:center;vertical-align:middle;} #eventBox ul li a .ebox1{margin-bottom:15px;} #eventBox ul li a .ebox1 img{display:block;width:100%;max-width:260px;height:auto;transition:0.3s ease-in-out;} #eventBox ul li a:hover .ebox1 img{opacity:0.7;} #eventBox ul li a .ebox2{margin-bottom:15px;} #eventBox ul li a h4{padding-bottom:10px;border-bottom:solid 2px #b6b8b7;font-size:1.05em;color:#4a4742;transition:0.3s ease-in-out;font-family:"FP-こぶりなゴシック StdN W6";} #eventBox ul li a:hover h4{color:#0e3262;} #eventBox ul li a .ebox03{padding:10px 0;} #eventBox ul li a table{border-collapse:separate;border-spacing:0 10px;} #eventBox ul li a th{width:50px;padding:0;font-family:"FP-こぶりなゴシック StdN W6";} #eventBox ul li a th span{display:block;padding:2px 5px;background:#2fb5e8;color:#fff;text-align:center;} #eventBox ul li a td{padding:2px 10px;color:#000;font-family:"FP-こぶりなゴシック StdN W3";} @media screen and (max-width:499px){ #eventBox ul li:nth-child(n+5){display:none;} } @media screen and (min-width:500px){ #eventBox h2{font-size:2em;} #eventBox h2 br{display:none;} #eventBox ul{height:450px;overflow:auto;} #eventBox ul li{float:left;} #eventBox ul li a h4{font-size:1.1em;} } @media screen and (min-width:500px) and (max-width:799px){ #eventBox ul{max-width:615px;} #eventBox ul li{width:48%;} #eventBox ul li:nth-child(odd){margin-right:4%;clear:both;} } @media screen and (min-width:800px) and (max-width:1099px){ #eventBox ul{max-width:900px;} #eventBox ul li{width:calc(100% / 3 - 15px);width:-webkit-calc(100% / 3 - 15px);margin-right:15px;} #eventBox ul li:nth-child(3n+1){clear:both;} } @media screen and (min-width:900px){ #eventBox .catch{display:block;position:absolute;top:0;left:50%;width:100px;height:110px;padding:20px 25px;margin-left:300px;background:#cd9f01;border-radius:75px;font-size:1.2em;color:#fff;text-align:center;font-family:"FP-こぶりなゴシック StdN W6";letter-spacing:0.12em;} #eventBox .catch span{border-bottom:dashed 1px #fff;} } @media screen and (min-width:1100px){ #eventBox ul li{width:calc(25% - 20px);width:-webkit-calc(25% - 20px);margin-right:20px;} #eventBox ul li:nth-child(4n+1){clear:both;} } /* #photo */ #voiceBox{padding:60px 15px 40px;margin:0 auto;} #voiceBox h2{position:relative;z-index:1;padding-bottom:15px;margin-bottom:40px;font-size:1.4375em;text-align:center;line-height:1;} #voiceBox h2 span.en{color:#0e3262;} #voiceBox h2:before{content:"";display:block;position:absolute;left:50%;bottom:0;width:180px;height:2px;margin-left:-90px;background:#0e3262;} #voiceBox .innerBox{margin:0 auto;max-width:1000px;} #voiceBox h3{padding-bottom:7px;border-bottom:1px solid #0e3262;font-size:1.3em;color:#0e3262;} #voiceBox ul{margin:0 auto;} #voiceBox ul li{display:block;width:100%;margin-bottom:20px;} #voiceBox ul li .thumb{position:relative;width:100%;height:0;padding-bottom:75%;margin-bottom:5px;} #voiceBox ul li .thumb img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;} #voiceBox ul li a{display:block;color:#000;text-decoration:none;} #voiceBox ul li h4{margin-bottom:5px;font-family:"FP-こぶりなゴシック StdN W6";} #voiceBox ul li h5{font-size:0.9em;font-family:"FP-こぶりなゴシック StdN W3";} @media screen and (min-width:500px){ // #voiceBox ul{width:100%;} } @media screen and (min-width:600px){ #voiceBox{padding-top:100px;} #voiceBox h2{margin-bottom:65px;font-size:2em;} #voiceBox h2 br{display:none;} } @media screen and (min-width:500px) and (max-width:799px){ #voiceBox ul li{width:calc(50% - 10px);width:-webkit-calc(50% - 10px);margin:0 0 20px;} #voiceBox ul li:nth-child(odd){float:left;clear:both;} #voiceBox ul li:nth-child(even){float:right;} } @media screen and (min-width:800px) and (max-width:1199px){ #voiceBox ul li{float:left;width:calc(100% / 3 - 10px);width:-webkit-calc(100% / 3 - 10px);margin:0 0 20px;} #voiceBox ul li:nth-child(3n+1){clear:both;} } @media all and (min-width:1200px){ #voiceBox{padding:60px 15px 50px;} #voiceBox a{transition:0.2s ease-in-out;} #voiceBox ul li{float:left;width:calc(25% - 10px);width:-webkit-calc(25% - 10px);margin:0 0 20px;} #voiceBox ul li a:hover{opacity:0.7;} } #middleBox{width:100%;margin-bottom:30px;} @media all and (min-width:1000px){ #middleBox{display:table;margin-bottom:70px;} } /* #photo */ #photoBox{padding:15px;background:#a79e97;box-sizing:border-box;} .photo-container{position:relative;margin-bottom:10px;} #photoBox.photoBoxonly .photo-container{overflow:hidden;} .photo-container .innerBox{width:200px;} .photo-container .arrow-left2{position:absolute;top:35%;left:0;z-index:2;width:30px;height:50px;margin-top:-25px;background:url(../img/top/prev2.png) no-repeat left center;} .photo-container .arrow-right2{position:absolute;top:35%;right:0;z-index:2;width:30px;height:50px;margin-top:-25px;background:url(../img/top/next2.png) no-repeat right center;} .photo-container .swiper-slide{opacity:0;transition:0.3s ease-in-out;} #photoBox.photoBoxonly .photo-container .swiper-slide{opacity:1;} .photo-container .swiper-slide-active{opacity:1;} #photoBox .innerBox{max-width:580px;padding:25px 20px;margin:0 auto;background:#fff;overflow:hidden;box-sizing:border-box;} #photoBox.photoBoxonly .innerBox{max-width:80vw;} #photoBox ul li a{display:block;opacity:1;text-decoration:none;} #photoBox h3{padding-bottom:7px;border-bottom:2px solid #cecfcf;margin-bottom:25px;font-size:1.4375em;text-align:center;} #photoBox h3 .en{color:#0e3262;} #photoBox ul li .thumb{ width:100%; margin-bottom:5px; max-height: 220px; overflow: hidden; } #photoBox ul li .thumb img{display:block;width:100%;max-width:380px;height:auto;margin:0 auto;} #photoBox ul li h4, #photoBox ul li h5{max-width:380px;margin:0 auto;} #photoBox ul li h4{margin-bottom:5px;color:#b38a00;font-family:"FP-こぶりなゴシック StdN W6";} #photoBox ul li h5{padding-left:5px;border-left:solid 2px #909191;font-size:0.9em;color:#000;font-family:"FP-こぶりなゴシック StdN W3";line-height:1.2em;} #photoBox .btnMore{max-width:380px;margin:0 auto;} #photoBox.photoBoxonly .btnMore{max-width:9999px;} @media screen and (min-width:320px) and (max-width:599px){ // .photo-container .arrow-left2, // .photo-container .arrow-right2{width:15px;height:25px;top:40%;background-size:15px 25px;} // .photo-container .arrow-left2 {left:-15px;} // .photo-container .arrow-right2{right:-15px;} } @media all and (min-width:600px){ #photoBox{padding:25px 40px;} #photoBox .innerBox{padding:25px 30px;} #photoBox h3{font-size:1.75em;} #photoBox h3 br{display:none;} } @media all and (min-width:1000px){ #photoBox{display:table-cell;width:50%;} #photoBox.photoBoxonly{width:100%;} #photoBox .innerBox{margin-right:0;} #photoBox.photoBoxonly .innerBox{margin-right:auto;} } @media screen and (min-width:1000px) and (max-width:1199px){ // .photo-container .arrow-left2, // .photo-container .arrow-right2{width:15px;height:25px;background-size:15px 25px;} // .photo-container .arrow-left2 {left:-20px;} // .photo-container .arrow-right2{right:-20px;} } /* #voice */ #voiceBox {box-sizing: border-box;} .voice-container{position:relative;margin-bottom:10px;} #voiceBox.voiceBoxonly .voice-container{overflow:hidden;} .voice-container .innerBox{width:200px;} .voice-container .arrow-left4{position:absolute;top:35%;left:0;z-index:2;width:30px;height:50px;margin-top:-25px;background:url(../img/top/prev2.png) no-repeat left center;} .voice-container .arrow-right4{position:absolute;top:35%;right:0;z-index:2;width:30px;height:50px;margin-top:-25px;background:url(../img/top/next2.png) no-repeat right center;} .voice-container .swiper-slide{opacity:0;transition:0.3s ease-in-out;} #voiceBox.voiceBoxonly .voice-container .swiper-slide{opacity:1;} .voice-container .swiper-slide-active{opacity:1;} #voiceBox .innerBox{max-width:1140px;padding:25px 20px;margin:0 auto;background:#fff;overflow:hidden;box-sizing:border-box;} #voiceBox.voiceBoxonly .innerBox{max-width:80vw;} #voiceBox ul li a{display:block;opacity:1;text-decoration:none;} #voiceBox ul li .thumb{ width:100%; margin-bottom:5px; max-height: 220px; overflow: hidden; } #voiceBox ul li .thumb img{display:block;width:100%;max-width:380px;height:auto;margin:0 auto;} #voiceBox ul li h4, #voiceBox ul li h5{max-width:380px;margin:0 auto;} #voiceBox ul li h4{margin-bottom:5px;color:#b38a00;font-family:"FP-こぶりなゴシック StdN W6";} #voiceBox ul li h5{padding-left:5px;border-left:solid 2px #909191;font-size:0.9em;color:#000;font-family:"FP-こぶりなゴシック StdN W3";line-height:1.2em;} #voiceBox.voiceBoxonly .btnMore{max-width:9999px;} #voiceBox ul li:nth-of-type(1){ } @media all and (min-width:600px){ #voiceBox{padding:25px 40px;} #voiceBox .innerBox{padding:25px 30px;} } @media all and (min-width:1000px){ #voiceBox{width:50%;} #voiceBox.voiceBoxonly{width:100%;} } /* #blog */ #blogBox{padding:15px;background:#c6c2ad;box-sizing:border-box;} #blogBox .innerBox{max-width:580px;padding:15px;margin:0 auto;background:#fff;border-top:solid 8px #b38a00;border-bottom:solid 8px #b38a00;box-sizing:border-box;} #blogBox h3{padding-bottom:7px;border-bottom:2px solid #cecfcf;margin-bottom:25px;font-size:1.4375em;text-align:center;} #blogBox h3 .en{color:#0e3262;} #blogBox ul{max-height:300px;overflow-y:auto;} #blogBox li{margin-bottom:10px;} #blogBox li p a{color:#333;} #blogBox li a{text-decoration:none;} #blogBox li .date{position:relative;padding:10px 0 0 ;font-size:0.9em;font-family:"FP-こぶりなゴシック StdN W6";} #blogBox li .date:before{content:"";position:absolute;top:0;left:0;width:60px;height:1px;background:#807d7d;} #blogBox li h4{margin:2px 0 6px;} #blogBox li h4 .area{padding:2px 5px;margin-right:5px;background:#b38a00;font-size:0.9em;color:#fff;font-family:"FP-こぶりなゴシック StdN W3";} #blogBox li h4 a{padding:0 0 10px;font-size:1.1em;font-family:"FP-こぶりなゴシック StdN W6";color:#000;} #blogBox li h4 a:hover{text-decoration:underline;} @media all and (min-width:600px){ #blogBox{padding:25px 40px;} #blogBox h3{font-size:1.75em;} #blogBox h3 br{display:none;} } @media all and (min-width:1000px){ #blogBox{display:table-cell;width:50%;} #blogBox .innerBox{margin-left:0;} #blogBox ul{height:344px;max-height:initial;} } /* #newsBox */ #newsBox{padding:15px;} #newsBox h3{margin-bottom:25px;font-size:1.4375em;text-align:center;} #newsBox h3 .en{color:#0e3262;} #newsBox ul{border-top:1px dashed #6c6a6a;} #newsBox li{padding:30px 0;border-bottom:1px dashed #6c6a6a;} #newsBox li h4{margin-bottom:10px;font-size:1.1em;color:#0e3262;} #newsBox li img{display:block;width:100%;max-width:260px;height:auto;margin:0 auto 15px;} @media all and (min-width:600px){ #newsBox{padding:25px 40px;} #newsBox h3{font-size:2.0em;} #newsBox h3 br{display:none;} #newsBox ul{border-top:1px solid #ada584;} #newsBox li{padding:30px 10px;border-bottom:1px solid #bfbfbf;} #newsBox li img{float:left;margin-right:20px;} } @media all and (min-width:760px) { #home #information-frame { margin-top: 10px!important; // margin-bottom: 50px; } #content { margin-bottom:100px; } } #gallery_area{padding:60px 15px 40px;margin:0 auto;} #gallery_area h2{position:relative;z-index:1;padding-bottom:15px;margin-bottom:20px;font-size:1.4375em;text-align:center;line-height:1;} #gallery_area h2 span.en{color:#0e3262;} #gallery_area h2:before{content:"";display:block;position:absolute;left:50%;bottom:0;width:180px;height:2px;margin-left:-90px;background:#0e3262;} #gallery_area .innerBox{margin:0 auto;max-width:1000px;} @media screen and (min-width:600px){ #gallery_area{padding-top:100px;} #gallery_area h2{margin-bottom:15px;font-size:2em;} #gallery_area h2 br{display:none;} } main#wrapper #gallery_area{width:100%;max-width:1000px;margin:0 auto 20px auto;} #gallery_area table {table-layout:fixed;width:100%;} #gallery_area th,#rte_area td {word-break:break-strict;} #gallery_area th {text-align:center;font-weight:normal;} #gallery_area td {text-align:left;} #gallery_area img { max-width: 100%; height: auto; vertical-align: middle; } @media screen and (max-width: 599px) { #gallery_area tr, #gallery_area th, #gallery_area td { display: block; width: auto; } #gallery_area img { float: none !important; margin: auto; display: block; } main#wrapper #gallery_area { padding:30px 0 0 0 ; } } #area-lp-group img { width: 100%; height: auto; vertical-align: middle; } @media screen and (max-width: 759px) { #area-lp-group { background: #fff; padding: 9.6% 4.2% 2.4%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 0 10px 25px 10px; } #area-lp-group #area-lp-head { margin: 0 auto 5.4%; } #area-lp-group #area-lp-head h2 { display: block; background: url(../images/01top/bnr_modelhouse_sp.png) no-repeat center top; font-size: 0px; line-height: 0px; text-indent: -9999px; list-style-type: none; padding: 112.7778% 0 0; background-size: contain; -webkit-background-size: contain; -moz-background-size: contain; } #area-lp-group #area-lp-head p { display: none; overflow: hidden; height: 0px; } #area-lp-group #area-lp-list { width: 100%; margin: 0 auto; } #area-lp-group #area-lp-list a { display: block; width: 100%; text-align: center; border: 1px solid #CCCCCC; box-shadow: 0 1px 1px #dedede; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 0 0 5.4%; } #area-lp-group #area-lp-list a:nth-child(1) { background: #94A5C0; } #area-lp-group #area-lp-list a:nth-child(2) { background: #85C9C5; } #area-lp-group #area-lp-list a:nth-child(3) { background: #D6C691; } #area-lp-group #area-lp-list .area-detail { } #area-lp-group #area-lp-list .area-detail p { width: 100%; font-size: 1.1rem; line-height: 1.4; font-weight: 500; color: #000000; padding: 0.4em 0.6em; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } } @media print, screen and (min-width: 760px) { #area-lp-group { margin: -50px auto 80px; padding: 10px 0; background: #FFFFFF; } #area-lp-group #area-lp-head { margin: 0 auto 16px; } #area-lp-group #area-lp-head h2 { display: block; background: url(../images/01top/bnr_modelhouse.jpg) no-repeat center top; font-size: 0px; line-height: 0px; text-indent: -9999px; list-style-type: none; padding: 20% 0 0; background-size: contain; -webkit-background-size: contain; -moz-background-size: contain; } #area-lp-group #area-lp-head p { display: none; overflow: hidden; height: 0px; } #area-lp-group #area-lp-list { overflow: hidden; position: relative; zoom: 1; width: 100%; margin: 0 auto; padding-left: 10px; padding-right: 10px; box-sizing: border-box; } #area-lp-group #area-lp-list a { float: left; width: 32.558%; border: 1px solid #CCCCCC; box-shadow: 0 1px 1px #dedede; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 0 1.163% 0 0; -webkit-transition: 0.3s; transition: 0.3s; backface-visibility: hidden; -webkit-backface-visibility: hidden; } #area-lp-group #area-lp-list a:nth-child(3) { margin: 0; } #area-lp-group #area-lp-list a:hover { opacity: 0.6; } #area-lp-group #area-lp-list a:nth-child(1) { background: #94A5C0; } #area-lp-group #area-lp-list a:nth-child(2) { background: #85C9C5; } #area-lp-group #area-lp-list a:nth-child(3) { background: #D6C691; } #area-lp-group #area-lp-list .area-detail { } #area-lp-group #area-lp-list .area-detail p { width: 100%; font-size: 16px; line-height: 1.4; font-weight: 500; color: #000000; text-align: center; padding: 0.4em 0.6em 0.3em; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; display: flex; justify-content: center; align-items: center; } } @media print, screen and (min-width: 760px) and (max-width: 870px) { #area-lp-group { width: 98%; } } @media print, screen and (min-width: 871px) { #area-lp-group { width: 860px; } }