@charset "utf-8"; #header .navArea ul.navi a.p_home:before {background: #ddd;} #header .navArea ul.navi a.p_home:hover:before {background: transparent;} /* ----------------------------------------------------------- #topImg ----------------------------------------------------------- */ #topImg {min-height: 100%;min-height: 100vh;width: 96%;z-index: 2;position: relative;background: #fefefe;margin: 0 auto;} /* ----- .catchArea ----- */ #topImg .catchArea { position: absolute; bottom: 0; right: 0; left: 0; text-align: center; z-index: 2; } #topImg .catchArea h2 { font-size: 12px; font-family: 'Catamaran', sans-serif; font-weight:300; letter-spacing: 8px; line-height: 50px; } #topImg .catchArea h2 span { font-size: 11px;font-family: 'Open Sans'; vertical-align:0; font-weight:300;} /* ----- .arrowArea ----- */ #topImg .arrowArea {position: absolute;bottom: 100px;right: 0;width: 10%;z-index: 2;} #topImg .arrowArea a { position: absolute; top: -90px; left: 0; bottom: 0; right: 0; z-index: 3; } /* span */ #topImg .arrowArea span { display: block; height: 60px; text-align: center; position: relative; z-index: 2; } #topImg .arrowArea span:before { position: absolute; top: 0; left: 50%; bottom: 0; width: 0; content: ""; border-left: #ddd 1px dotted; z-index: -2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #topImg .arrowArea:hover span:before { border-left: #fff 1px solid; top: 0px; } /* .dot */ #topImg .arrowArea span .dot {position: absolute;top: 0;left: 50%;width: 1px;height: 20px;/*margin-left:-1px;*/background: #f0f0f0;background: #f0f0f0;z-index: -2;z-index: 1;-webkit-animation: scroll-next 4s infinite;-moz-animation: scroll-next 1s infinite;-o-animation: scroll-next 4s infinite;animation: scroll-next 1s infinite;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;} #topImg .arrowArea:hover span .dot { background: transparent; } /* .arrow */ #topImg .arrowArea .arrow { position: absolute; bottom: -15px; left: 50%; margin-left: -3px; width: 7px; height: 7px; border-bottom: #fefefe 1px solid; border-left: #fefefe 1px solid;/*opacity:0; */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; opacity: 0; /*font-family: 'themify'; content: "\e64b"*/ z-index: 3; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #topImg .arrowArea:hover .arrow { opacity: 1; bottom: -8.5px; bottom: 0px; border-bottom: #fafafa 1px solid; border-left: #fafafa 1px solid; } /* .txt */ #topImg .arrowArea span .txt {position: absolute;top: -45px;left: 0;right: 0;width: auto;color: #fff;font-size: 11px;font-family: 'Catamaran', sans-serif;font-weight:300;text-transform: uppercase;letter-spacing: 4px;line-height: 0;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;} #topImg .arrowArea:hover span .txt { /*letter-spacing:5px; */ } /* ----- .img ----- */ #topImg .img {position: absolute;top: 30px;left: 0;bottom: 50px;right: 0;background-size: cover;z-index: -1;} @media only screen and (max-width: 768px) { /* ----- .img ----- */ #topImg .img {position: absolute;top: 60px;left: 2%;bottom: 50px;right: 2%;background-size: cover;z-index: -1;} } /* ----- .bg ----- */ #topImg .bg001 { background: url(../images/home/mainslider/1.jpg) bottom center no-repeat; } #topImg .bg002 { background: url(../images/home/mainslider/2.jpg) bottom center no-repeat; } #topImg .bg003 { background: url(../images/home/mainslider/3.jpg) bottom center no-repeat; } #topImg .bg004 { background: url(../images/home/mainslider/4.jpg) top center no-repeat; } /* #topImg .bg005 { background: url(../images/home/mainslider/5.jpg) bottom center no-repeat; } #topImg .bg006 { background: url(../images/home/mainslider/6.jpg) center center no-repeat; } */ /* ----- .slick-dots ----- */ #topImg .mainImg { min-height: 100%; width: 100%; background-size: cover !important; } /* ----- .mainSlider ----- */ .mainSlider { } #topImg .slick-list, #topImg .slick-track { height: 100%; } /* --- Arrows --- */ #topImg .slick-prev, #topImg .slick-next { font-size: 0; line-height: 0; position: absolute; /*top: 50%;*/ top: 50%; display: block; width: 55px; height: 55px; padding: 0; margin-top: -25px; /*lte IE 8*/ -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: #111; border: #111 1px solid; border: none; outline: none; background: none;/*background: #111;*/ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 2; } #topImg .slick-prev:before, #topImg .slick-next:before { font-family: 'themify'; font-size: 20px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #topImg .slick-prev { left: -5%; border-right: none; } #topImg .slick-prev:before { content: "\e64a" } #topImg .slick-next { right: -5%; border-left: none; } #topImg .slick-next:before { content: "\e628"; } #topImg .slick-prev:hover, #topImg .slick-next:hover { color: #fefefe; background: #b09d7c; } #topImg .slick-prev:hover:before, #topImg .slick-prev:focus:before, #topImg .slick-next:hover:before, #topImg .slick-next:focus:before { opacity: 1; } /* ----- .slick-dots ----- */ #topImg .slick-dots { position: absolute; top: 50%; bottom:auto; left: -5.25%; list-style: none; display: block; text-align: center; padding: 0px; width: 5%; height: auto; z-index: 100; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); margin-top: -25px; } #topImg .slick-dots li { position: relative; display: block; height: 20px; width: 100%; margin: 25px auto 0; padding: 0; cursor: pointer; text-align: center; } #topImg .slick-dots li button { border: 0; background: #fefefe; display: block; height: 20px; width: 30px; padding: 0; /*overflow: hidden; */ line-height: 20px; font-size: 0; color: transparent; cursor: pointer; position: relative; z-index: 2; margin: 0 auto; text-align: center; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;} #topImg .slick-dots li button:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight:300; color: #111; z-index: -1; letter-spacing: 2px; } #topImg .slick-dots li:first-child button:after { border: #297d58 2px solid;border-radius: 50%;width: 10px;height: 10px; content: ""; } #topImg .slick-dots li:nth-child(2) button:after { border: #297d58 2px solid;border-radius: 50%;width: 10px;height: 10px; content: ""; } #topImg .slick-dots li:nth-child(3) button:after { border: #297d58 2px solid;border-radius: 50%;width: 10px;height: 10px; content: ""; } #topImg .slick-dots li:nth-child(4) button:after { border: #297d58 2px solid;border-radius: 50%;width: 10px;height: 10px; content: ""; } /* #topImg .slick-dots li:nth-child(5) button:after { content: "〇"; } #topImg .slick-dots li:nth-child(6) button:after { content: "〇"; } */ #topImg .slick-dots li button:focus { outline: none; } #topImg .slick-dots li.slick-active button {outline: none;background: #297d58;border-radius: 50%;width: 15px;height: 15px;} /* #topImg .slick-dots li button:before { position: absolute; top: 45%; right: 100%; left: 0; content: ""; border-top: transparent 2px solid; z-index: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.7; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;} */ #topImg .slick-dots li button:before { } #topImg .slick-dots li:hover button:before { right: 0; /* border-top: #297d58 2px solid;*/ opacity: 1; } #topImg .slick-dots li.slick-active button:before { position: absolute; top: 45%; right: 0; left: 0; content: ""; border:none; /* border-top: #7eccd6 2px solid;*/ z-index: 1; opacity: 1; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } /* ----- .slick-dots ----- */ #topImg .slick-dots { position: absolute; top: auto; bottom:10px; left: 0; right:0; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; height: auto; z-index: 100; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); margin-top: 0; } #topImg .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 2%; padding: 0; cursor: pointer; text-align: center; } #topImg .slick-dots li button { border: 0; background: #fefefe; background:none; display: block; height: 20px; width: 20px; padding: 0; /*overflow: hidden; */ line-height: 20px; font-size: 0; color: transparent; cursor: pointer; position: relative; z-index: 2; margin: 0 auto; text-align: center; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } #topImg .slick-dots li button:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 11px; color: #fefefe; z-index: -1; letter-spacing: 1.5px; } } @media only screen and (max-width: 800px) { #topImg { min-height: 100%; /*min-height:70%;*/ } /* ----- .catchArea ----- */ #topImg .catchArea { position: absolute; bottom: 0; } #topImg .catchArea h2 { font-size:12px; letter-spacing: 5px; line-height: 50px; } #topImg .catchArea h2 span { vertical-align:0; } /* ----- .arrowArea ----- */ #topImg .arrowArea { display:none; } /* ----- .img ----- */ #topImg .img { position: absolute; top: 50px; left: 0; bottom: 50px; right: 0; background-size: cover; z-index: -1; } /* ----- .slick-dots ----- */ #topImg .mainImg { min-height: 100%; width: 100%; background-size: cover !important; } /* ----- .mainSlider ----- */ .mainSlider { } #topImg .slick-list, #topImg .slick-track { height: 100%; } /* ----- .slick-dots ----- */ #topImg .slick-dots { position: absolute; top: auto; bottom:10px; left: 0; right:0; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; height: auto; z-index: 100; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); margin-top: 0; } #topImg .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 2%; padding: 0; cursor: pointer; text-align: center; } #topImg .slick-dots li button { border: 0; background: #fefefe; background:none; display: block; height: 20px; width: 20px; padding: 0; /*overflow: hidden; */ line-height: 20px; font-size: 0; color: transparent; cursor: pointer; position: relative; z-index: 2; margin: 0 auto; text-align: center; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } #topImg .slick-dots li button:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 11px; color: #fefefe; z-index: -1; letter-spacing: 1.5px; } } @media only screen and (max-width: 738px) { #topImg .catchArea h2 { font-size:11px; text-indent:10px; } /* ----- .bg ----- */ #topImg .bg001 { background: url(../images/home/mainslider/1sp.jpg) center center no-repeat; } #topImg .bg002 { background: url(../images/home/mainslider/2sp.jpg) bottom center no-repeat; } #topImg .bg003 { background: url(../images/home/mainslider/3sp.jpg) bottom center no-repeat; } #topImg .bg004 { background: url(../images/home/mainslider/4sp.jpg) top center no-repeat; } /* #topImg .bg005 { background: url(../images/home/mainslider/5sp.jpg) bottom left no-repeat; } #topImg .bg006 { background: url(../images/home/mainslider/6sp.jpg) center center no-repeat; } */ } @media only screen and (max-width: 414px) { #topImg .catchArea h2 { font-size:10px;} #topImg .slick-dots li button:after { font-weight:600;} } @media only screen and (max-width: 380px) { #topImg .catchArea h2 { letter-spacing: 4px;} } @media only screen and (max-width: 320px) { #topImg .catchArea h2 { letter-spacing: 3px;} } /* ----------------------------------------------------------- #catchLink ----------------------------------------------------------- */ #catchLink{ padding: 59px 0 0; margin: -59px 0 0; } /* ----------------------------------------------------------- #catch ----------------------------------------------------------- */ #catch {padding:40px 0 90px;padding: 30px 0 0px;text-align:center;background:#fefefe;/* width: 1000px; *//* margin: 0 auto; */} @media only screen and (max-width: 1024px) { #catch { padding:30px 5% 80px; } } @media only screen and (max-width: 800px) { #catch { padding:30px 5% 80px; } } @media only screen and (max-width: 738px) { #catch { padding: 30px 5% 70px;} } @media only screen and (max-width: 414px) { #catch { padding: 20px 5% 60px;} } /* --- h3 --- */ #catch h3 {/* font-size:25px; *//* font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; *//* letter-spacing:3px; *//* line-height:2; */margin-top: 10px;font-size: 20px;font-family: 'Catamaran', sans-serif;font-weight: 700;letter-spacing: 2px;line-height: 1.2;} #catch h3 br.spblock { display:none; } #catch h3.en {font-size: 13px;font-family: 'Catamaran', sans-serif;font-weight:700;letter-spacing:2px;line-height: 1.0;} #catch h3.jp {font-size: 20px;font-weight: bold;letter-spacing: 3px;line-height: 1.0;} @media only screen and (max-width: 1024px) { #catch h3 { margin-top:15px; font-size: 22px;} } @media only screen and (max-width: 800px) { #catch h3 {margin-top:15px;font-size: 30px;font-family: 'Catamaran', sans-serif;font-weight: 600;} } @media only screen and (max-width: 738px) { #catch h3 { font-size: 18px; letter-spacing: 2px; line-height: 1.8; margin-top:10px;} #catch h3 br.spblock { display:block; } } @media only screen and (max-width: 414px) { #catch h3 { font-size: 16px; letter-spacing: 2px; line-height: 1.8; text-align: center; } } /* --- .iconIllust --- */ #catch .iconIllust {width: 500px;height: auto;margin: 0 auto;/* background:url(../images/home/illust_logo.png) center center no-repeat; */background-size:200px 196px;position:relative;z-index:0;} @media only screen and (max-width: 738px) { #catch .iconIllust { width: 150px; height: 150px; background-size:150px 150px;} } @media only screen and (max-width: 414px) { #catch .iconIllust { width: 120px; height: 120px; background-size:120px 120px;} } /* --- .txtArea --- */ #catch .txtArea { margin:25px auto 0; max-width:700px; } #catch .txtArea p{font-size:14px; line-height:2.4; letter-spacing:2px; margin-top:1em;} @media only screen and (max-width: 738px) { #catch .txtArea { margin: 20px auto 0; padding:0 2.5%; text-align:left; } #catch .txtArea p { font-size: 13px; line-height: 2; letter-spacing: 1px; margin-top: 1em; } #catch .txtArea p br { display:none; } } /* フレックスボックス -----------------------------------------------------------------*/ #catch .catch_ex { /* display: -webkit-box; */ display: -ms-flexbox; /* display: -webkit-flex; */ /* display: flex; */ -ms-flex-wrap: wrap; /* -webkit-flex-wrap: wrap; */ /* flex-wrap: wrap; */ /* -webkit-box-align: center; */ -ms-flex-align: center; /* -webkit-align-items: center; */ /* align-items: center; */ /* border: 1px solid #eee; */ /* padding: 0em; */ /* margin: 0 auto; */ } #catch .catch_ex a{ width:100%; margin: 0 auto; } #catch .catch_ex a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } #catch .catch_ex > div { flex: 1 0 300px; } #catch .catch_ex img{ padding: 20px; max-width: 400px; width: 100%; } #catch .catch_ex h1 { padding: 5px 0; font-size: 32px; line-height: 1.5; text-align: center; font-family: serif; color: #666; letter-spacing: 10px; } #catch .catch_ex p{ padding: 5px 0; font-size:20px; line-height: 1.5; text-align: center; font-family: serif; color: #666; letter-spacing: 10px; } @media only screen and (max-width: 330px) { #catch .catch_ex > div { flex: 1 0 260px; } } @media only screen and (max-width: 414px) { #catch .txtArea p { font-size: 12px;} #catch .catch_ex p{padding-top: 10px;font-size:14px;line-height: 1.5;letter-spacing: 10px;} } /* --- .illustArea --- */ .illustArea { margin: 45px auto 0; max-width:650px; height:auto; } @media only screen and (max-width: 800px) { .illustArea { margin: 40px auto 0; } } @media only screen and (max-width: 738px) { .illustArea { margin: 35px auto 0;} } @media only screen and (max-width: 414px) { .illustArea { margin: 30px auto 0;} } /* ----------------------------------------------------------- #photography ----------------------------------------------------------- */ #photography {padding: 10px 0;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */background:#fefefe;/* background: url(../images/noise.png) repeat #fefefe; */} #photography:before {position: absolute;top: -1px;left: 0%;right: 0%;height: 0;content: "";border-top: #ededed 1px solid;z-index: 2;} @media only screen and (max-width: 800px) { #photography { padding: 0 0 80px; } } @media only screen and (max-width: 738px) { #photography { padding: 0 0 70px; background: url(../images/noise2.png) repeat #fefefe;} } @media only screen and (max-width: 414px) { #photography{ padding: 0 0 60px; } } /* ----- .headlineImg ----- */ #photography .headlineImg { background: url(../images/home/bg_photography.jpg) center center no-repeat; background-size: cover; padding: 200px 0; text-align: center; color: #fefefe; position:relative; z-index:1; } #photography .headlineImg:before{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: #111; opacity: 0.2; z-index: 2; } #photography .headlineImg h2.en { font-size: 45px; font-family: 'Catamaran', sans-serif; font-weight:800; line-height: 1; letter-spacing: 5px; position: relative; z-index: 3;} #photography .headlineImg h2.jp { font-size: 15px; font-weight: bold; letter-spacing: 5px; line-height: 1; margin-top: 20px; position: relative; z-index: 3; } @media only screen and (max-width: 1024px) { #photography .headlineImg { padding: 175px 0; } } @media only screen and (max-width: 800px) { #photography .headlineImg { padding: 150px 0;margin: 0; } #photography .headlineImg h2.en { font-size: 35px; letter-spacing: 4px; position: relative; z-index: 3; } #photography .headlineImg h2.jp { font-size: 14px; font-weight: bold; letter-spacing: 4px; line-height: 1; margin-top: 15px; position: relative; z-index: 3; } } @media only screen and (max-width: 738px) { #photography .headlineImg { background: url(../images/home/bg_photographySp.jpg) center center no-repeat; background-size: cover; padding: 125px 0; } #photography .headlineImg h2.en { font-size: 30px; letter-spacing: 3px; position: relative; z-index: 3; } } @media only screen and (max-width: 414px) { #photography .headlineImg { padding: 80px 0; } #photography .headlineImg h2.en { font-size: 23px; letter-spacing: 3px; position: relative; z-index: 3; } #photography .headlineImg h2.jp { font-size: 12px; font-weight: bold; letter-spacing: 3px; line-height: 1; margin-top: 10px; position: relative; z-index: 3; } } /* ----------------------------------------------------------- #instagram ----------------------------------------------------------- */ #photography {padding: 0px 5%;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */} #photography:before { position: absolute; top: -1px; left: 5%; right: 5%; height: 0; content: ""; border-top: #ededed 1px solid; z-index: 2; } @media only screen and (max-width: 800px) { #photography { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #photography { padding: 70px 5%; } } @media only screen and (max-width: 414px) { #photography { padding: 60px 5%; } } /* ----- .headline ----- */ #photography .headline { margin-bottom: 45px; text-align: center; } #photography .headline h2.en {font-size:50px;/* font-family: 'Satisfy', cursive; */letter-spacing:0;line-height: 1;} #photography .headline h3 { font-size: 14px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing: 2px; line-height:1; margin-top:20px;} #photography .headline h3 b { font-weight:600;letter-spacing: 2px;} @media only screen and (max-width: 800px) { #photography .headline { margin-bottom: 40px; } #photography .headline h2.en { font-size:40px; } #photography .headline h3 { margin-top:15px;} } @media only screen and (max-width: 738px) { #photography .headline { margin-bottom: 30px; } #photography .headline h2.en { font-size:35px; } } @media only screen and (max-width: 414px) { #photography .headline h2.en { font-size:30px; } #photography .headline h3 { font-size: 13px;margin-top:10px;} } /* ----- .photographyArea ----- */ #photography .photographyArea { margin: 0; } /* .photographyBox */ #photography .photographyBox {width: 100%;/* float: left; *//* display: block; */margin: 20px 1% 80px;/* position: relative; */z-index: 2;background:#fefefe;/* border:#ededed 1px solid; */padding: 30px 30px 30px 30px;/* background: #fafafa; */margin: 0 auto;max-width: 1200px;} /* -#photography .photographyBox:nth-child(even) {padding:30px 0 60px 30px;} */ /* ----- .txtArea ----- */ #photography .photographyBox .txtArea {/* position:absolute; *//* top:0; *//* left:0; *//* bottom:0; */width: 100%;z-index: 1;display: block;} /* #photography .photographyBox:nth-child(even) .txtArea { left:auto; right:0; } */ /* .photographyhHead */ #photography .photographyhHead {display: block;text-align: center;/* position: absolute; */z-index: 2;margin-top: 50px;-o-transform: translate(-50%, -50%);/* transform: translate(-50%, -50%); */} /* .iconIllust */ #photography .photographyhHead .iconIllust {width:90px;height:90px;margin:20px auto 0;position:relative;z-index:0;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;} #photography .photographyhHead .iconIllust:before {position:absolute;top:0;right:0;bottom:0;left:0;display:block;content:"";border:#f0f0f0 1px solid;z-index:2;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;} #photography .photographyhHead .iconIllust_location {/* background: url(../images/photography/location/icon.png) center center no-repeat; *//* background-size:80px 80px; */} #photography .photographyhHead .iconIllust_wedding { background:url(../images/photography/wedding/icon.png) center center no-repeat; background-size:80px 80px; } #photography .photographyhHead .iconIllust_family { background:url(../images/photography/family/icon.png) center center no-repeat; background-size:80px 80px; } /* h2,h3 */ #photography .photographyhHead h2 {font-size: 12px; font-family: 'Catamaran', sans-serif; font-weight:500; letter-spacing: 2.5px; line-height:1.8; position:relative; z-index:4; } #photography .photographyhHead h3.en {font-size: 13px;font-family: 'Catamaran', sans-serif;font-weight:700;letter-spacing:2px;line-height: 1.8;} #photography .photographyhHead h3.jp {font-size: 20px;font-weight: bold;letter-spacing: 3px;line-height: 1.8;} /* .catchArea */ #photography .catchArea {margin-top: 10px;} #photography .catchArea h4 { font-size: 13px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif;letter-spacing: 1px; line-height: 2; } /* .linkAreaHead */ #photography .photographyhHead .linkAreaHead { margin-top:20px; } #photography .photographyhHead .linkAreaHead a {width: 160px;font-size:13px;z-index: 1000;} /* ----- .imgArea ----- */ #photography .photographyBox { width: 100%; max-width: 1200px; padding: 5% 2%; display: flex; } #photography .photographyBox .imgArea {flex: 1 0 0; margin: 0.4em 2em; z-index: 2;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;/* max-height: 201px; */} #photography .photographyBox .imgArea img {max-height:201px; width: auto} /*#photography .photographyBox:nth-child(even) .imgArea { float: left; }*/ /* ----- .imgArea ----- */ #photography .photographyBox .imgArea2 {flex: 1 0 0; margin: 0.4em 2em; z-index: 2;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;max-height: 201px;} #photography .photographyBox .imgArea2 img {max-height:201px;width: auto;} /* ----- .imgArea ----- #photography .photographyBox .imgArea {float: left;width: 70%; z-index: 2;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;} #photography .photographyBox .imgArea img {max-height:201px; width: auto} #photography .photographyBox .imgArea2 {float: right;width: 30%; z-index: 2;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;max-height: 201px;} #photography .photographyBox .imgArea2 img {max-height:201px;width: auto;} */ /*#photography .photographyBox:nth-child(even) .imgArea { float: left; }*/ .main { margin-bottom: 10px; } .side { } .main, .side { padding: 2%; } @media ( min-width : 600px ){ .flexbox { display: -webkit-flex; display: flex; } .main { margin: 0 10px 0 0; } } @media only screen and (max-width: 800px) { /* ----- .photographyArea ----- */ #photography .photographyArea { margin: 0 5%; } #photography .photographyBox, #photography .photographyBox:nth-child(even) {margin: 70px 1% 70px;padding:0;border: #ededed 1px solid;background:#fefefe;overflow:hidden;} /* #photography .photographyhHead h3.jp:after {content:''; position: absolute; left:2.5%; top:34px; width:95%; background:#000; 10px;height:1.5px;-webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out} */ /* ----- .txtArea ----- */ #photography .photographyBox .txtArea, #photography .photographyBox:nth-child(even) .txtArea { position:static; width: 100%; padding:35px 5% 50px; } /* .photographyhHead */ #photography .photographyBox .photographyhHead {display:block;text-align: center;position: static;-moz-transform: /*translate(0, 0);-ms-transform: translate(0, 0);-o-transform: translate(0, 0); transform: translate(0, 0); */} #photography .catchArea { display:block; } /* .linkAreaHead */ #photography .photographyBox .photographyhHead .linkAreaHead { margin-top:20px; } #photography .photographyhHead .iconIllust { width:100px; height:100px; } #photography .photographyhHead .iconIllust_location, #photography .photographyhHead .iconIllust_wedding, #photography .photographyhHead .iconIllust_family{background-size:90px 90px; } /* ----- .imgArea ----- */ #photography .photographyBox .imgArea { float: none; width: 100%; padding:30px 5% 0; padding:0; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } #photography .photographyBox:nth-child(even) .imgArea { float: none; } } @media only screen and (max-width: 738px) { #photography .photographyBox, #photography .photographyBox:nth-child(even) { margin: 60px 0 0; } /* ----- .txtArea ----- */ #photography .photographyBox .txtArea, #photography .photographyBox:nth-child(even) .txtArea {padding:30px 5% 45px;} #photography .photographyhHead .iconIllust { width:70px; height:70px; margin:15px auto 0;} #photography .photographyhHead .iconIllust_location, #photography .photographyhHead .iconIllust_wedding, #photography .photographyhHead .iconIllust_family{background-size:60px 60px; } #photography .catchArea h4 { font-size: 12px; } #photography .photographyBox .photographyhHead .linkAreaHead {margin-top:15px;z-index: 100;} } @media only screen and (max-width: 500px) { #photography .photographyBox, #photography .photographyBox:nth-child(even) { width: 100%; margin: 50px 0 0; } #photography .photographyhHead .linkAreaHead a {z-index: 10000;} } /* ----- .gallerySlider ----- */ .gallerySlider { margin: 0; padding-bottom: 0; } /* --- li --- */ .gallerySlider li { margin: 0; position: relative; background: #fefefe; z-index:3; } /* --- .imgArea --- */ .gallerySlider li .imgArea { overflow: hidden; position: relative; z-index: 4; background: #fefefe; } .gallerySlider li .imgArea:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #fefefe; z-index: 5; opacity: 0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } .gallerySlider li:hover .imgArea:before { content: ""; background: #e4f5fd; opacity: 0.8; } .gallerySlider li .imgArea img { -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .gallerySlider li:hover .imgArea img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); opacity: 0.5; } /* Arrow */ .gallerySlider .slick-prev, .gallerySlider .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 60px; height: 60px; padding: 0; /*lte IE 8*/ -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: #111; border: #ddd 1px solid; border: none; background: #fefefe; outline: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index: 2; } .gallerySlider .slick-prev:before, .gallerySlider .slick-next:before { font-family: 'themify'; font-size: 12px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .gallerySlider .slick-prev { left: 0; margin-left: -30px; } .gallerySlider .slick-prev:before { content: "\e64a"; } .gallerySlider .slick-next { margin-right: -30px; right: 0; } .gallerySlider .slick-next:before { content: "\e649"; } /* --- .slick-dots --- */ .gallerySlider .slick-dots { bottom: -33px; } .gallerySlider .slick-dots li { position: relative; height: 6px; width: 6px; margin: 0 10px; padding: 0; cursor: pointer; text-align: center; } /* --- .linkArea --- */ #photography .linkArea {margin-bottom: 70px;/* position:relative; */z-index: 0;} @media only screen and (max-width: 800px) { /* --- Arrows --- */ .gallerySlider .slick-prev, .gallerySlider .slick-next { width: 40px; height: 40px; } .gallerySlider .slick-prev { left: auto; right:46px; } .gallerySlider .slick-next { right: 5px; } #photography .photographyBox:nth-child(even) .gallerySlider .slick-prev { left: 5px; right:auto; } #photography .photographyBox:nth-child(even) .gallerySlider .slick-next { left:46px; right: auto; } } @media only screen and (max-width: 800px) { .gallerySlider { margin: 0 -1px 41px; padding-bottom: 0;} .gallerySlider .slick-dots { position: absolute; top:auto; bottom: -40px;right:0; left: 0; width: 100%; height: 6px; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .gallerySlider .slick-dots li { position: relative; display: inline-block; height: 6px; width: 6px; margin: 0px 10px; padding: 0; cursor: pointer; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; border:none; } /* --- .linkArea --- */ #photography .linkArea { margin-top:60px; } } @media only screen and (max-width: 738px) { .gallerySlider { margin: 0 -1px 31px; } .gallerySlider .slick-dots, #photography .photographyBox:nth-child(even) .gallerySlider .slick-dots { bottom: -30px;} /* --- .linkArea --- */ #photography .linkArea { margin-top:50px; } } @media only screen and (max-width: 414px) { #photography .linkArea { margin-top:40px; } } /* ----------------------------------------------------------- #release ----------------------------------------------------------- */ #release {padding: 30px 5%;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */background: #eee;} #release:before { position: absolute; top: -1px; left: 5%; right: 5%; height: 0; content: ""; border-top: #eee 0px solid; z-index: 2; } @media only screen and (max-width: 800px) { #release { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #release { padding: 70px 5%; } } @media only screen and (max-width: 414px) { #release { padding: 60px 5%; } } /* ----- .headline ----- */ #release .headline { margin-bottom: 45px; text-align: center; } #release .headline h2.en {font-size:50px;/* font-family: 'Satisfy', cursive; */letter-spacing:0;line-height: 1;} #release .headline h3 { font-size: 14px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing: 2px; line-height:1; margin-top:20px;} #release .headline h3 b { font-weight:600;letter-spacing: 2px;} @media only screen and (max-width: 800px) { #release .headline { margin-bottom: 40px; } #release .headline h2.en { font-size:40px; } #release .headline h3 { margin-top:15px;} } @media only screen and (max-width: 738px) { #release .headline { margin-bottom: 30px; } #release .headline h2.en { font-size:35px; } } @media only screen and (max-width: 414px) { #release .headline h2.en { font-size:30px; } #release .headline h3 { font-size: 13px;margin-top:10px;} } /* --- .nameArea --- */ #release .nameArea { margin: 0; position: relative; z-index: 2; } #release .nameArea:before { position: absolute; top: 7px; left: 0; bottom: 7px; right:0; content: ""; border: #ddd 1px solid; background: #fefefe;z-index: -2; } /* #release .nameArea:after { position: absolute; top: 0; left: 7px; bottom: 0; right:7px; content: ""; border: #ddd 1px dotted; z-index: -2; }*/ /* --- .inner --- */ #release .nameArea .inner { padding:70px 5%; } /* .imgArea */ #release .nameArea .imgArea {float:left;width: 22%;margin: 1%;padding: 40px;position:relative;z-index:1;} #release .nameArea .imgArea {float:left;width: 22%;margin: 1%;padding: 40px;position:relative;z-index:1;} #release .nameArea .imgArea:before { position:absolute; top:0; right:10px; left:10px; bottom:0; content:""; border-top:#ddd 1px solid; border-bottom:#ddd 1px solid;z-index:2; } #release .nameArea .imgArea:after { position:absolute; top:10px; right:0; left:0; bottom:10px; content:""; border-right:#ddd 1px solid; border-left:#ddd 1px solid;z-index:2; } #release .nameArea .imgArea img {/* border:#fafafa 1px solid; */} #release .nameArea .imgReco { /* display: flex; */ /* flex-wrap: wrap; */ /* border: 1px solid #eee; */ padding: 1em; /* background: #fff; */ /* justify-content: center; */ /* 子要素をflexboxにより中央に配置する */ } @charset "utf-8"; #header .navArea ul.navi a.p_home:before {background: #ddd;} #header .navArea ul.navi a.p_home:hover:before {background: transparent;} /* ----------------------------------------------------------- #topImg ----------------------------------------------------------- */ #topImg {min-height: 100%;min-height: 100vh;width: 96%;z-index: 2;position: relative;background: #fefefe;margin: 0 auto;} /* ----- .catchArea ----- */ #topImg .catchArea { position: absolute; bottom: 0; right: 0; left: 0; text-align: center; z-index: 2; } #topImg .catchArea h2 { font-size: 12px; font-family: 'Catamaran', sans-serif; font-weight:300; letter-spacing: 8px; line-height: 50px; } #topImg .catchArea h2 span { font-size: 11px;font-family: 'Open Sans'; vertical-align:0; font-weight:300;} /* ----- .arrowArea ----- */ #topImg .arrowArea {position: absolute;bottom: 100px;right: 0;width: 10%;z-index: 2;} #topImg .arrowArea a { position: absolute; top: -90px; left: 0; bottom: 0; right: 0; z-index: 3; } /* span */ #topImg .arrowArea span { display: block; height: 60px; text-align: center; position: relative; z-index: 2; } #topImg .arrowArea span:before { position: absolute; top: 0; left: 50%; bottom: 0; width: 0; content: ""; border-left: #ddd 1px dotted; z-index: -2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #topImg .arrowArea:hover span:before { border-left: #fff 1px solid; top: 0px; } /* .dot */ #topImg .arrowArea span .dot {position: absolute;top: 0;left: 50%;width: 1px;height: 20px;/*margin-left:-1px;*/background: #f0f0f0;background: #f0f0f0;z-index: -2;z-index: 1;-webkit-animation: scroll-next 4s infinite;-moz-animation: scroll-next 1s infinite;-o-animation: scroll-next 4s infinite;animation: scroll-next 1s infinite;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;} #topImg .arrowArea:hover span .dot { background: transparent; } /* .arrow */ #topImg .arrowArea .arrow { position: absolute; bottom: -15px; left: 50%; margin-left: -3px; width: 7px; height: 7px; border-bottom: #fefefe 1px solid; border-left: #fefefe 1px solid;/*opacity:0; */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; opacity: 0; /*font-family: 'themify'; content: "\e64b"*/ z-index: 3; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #topImg .arrowArea:hover .arrow { opacity: 1; bottom: -8.5px; bottom: 0px; border-bottom: #fafafa 1px solid; border-left: #fafafa 1px solid; } /* .txt */ #topImg .arrowArea span .txt {position: absolute;top: -45px;left: 0;right: 0;width: auto;color: #fff;font-size: 11px;font-family: 'Catamaran', sans-serif;font-weight:300;text-transform: uppercase;letter-spacing: 4px;line-height: 0;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;} #topImg .arrowArea:hover span .txt { /*letter-spacing:5px; */ } /* ----- .img ----- */ #topImg .img {position: absolute;top: 30px;left: 0;bottom: 50px;right: 0;background-size: cover;z-index: -1;} @media only screen and (max-width: 768px) { /* ----- .img ----- */ #topImg .img {position: absolute;top: 60px;left: 2%;bottom: 50px;right: 2%;background-size: cover;z-index: -1;} } /* ----- .bg ----- */ #topImg .bg001 { background: url(../images/home/mainslider/1.jpg) bottom center no-repeat; } #topImg .bg002 { background: url(../images/home/mainslider/2.jpg) bottom center no-repeat; } #topImg .bg003 { background: url(../images/home/mainslider/3.jpg) bottom center no-repeat; } #topImg .bg004 { background: url(../images/home/mainslider/4.jpg) top center no-repeat; } /* #topImg .bg005 { background: url(../images/home/mainslider/5.jpg) bottom center no-repeat; } #topImg .bg006 { background: url(../images/home/mainslider/6.jpg) center center no-repeat; } */ /* ----- .slick-dots ----- */ #topImg .mainImg { min-height: 100%; width: 100%; background-size: cover !important; } /* ----- .mainSlider ----- */ .mainSlider { } #topImg .slick-list, #topImg .slick-track { height: 100%; } /* --- Arrows --- */ #topImg .slick-prev, #topImg .slick-next { font-size: 0; line-height: 0; position: absolute; /*top: 50%;*/ top: 50%; display: block; width: 55px; height: 55px; padding: 0; margin-top: -25px; /*lte IE 8*/ -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: #111; border: #111 1px solid; border: none; outline: none; background: none;/*background: #111;*/ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 2; } #topImg .slick-prev:before, #topImg .slick-next:before { font-family: 'themify'; font-size: 20px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #topImg .slick-prev { left: -5%; border-right: none; } #topImg .slick-prev:before { content: "\e64a" } #topImg .slick-next { right: -5%; border-left: none; } #topImg .slick-next:before { content: "\e628"; } #topImg .slick-prev:hover, #topImg .slick-next:hover { color: #fefefe; background: #b09d7c; } #topImg .slick-prev:hover:before, #topImg .slick-prev:focus:before, #topImg .slick-next:hover:before, #topImg .slick-next:focus:before { opacity: 1; } /* ----- .slick-dots ----- */ #topImg .slick-dots { position: absolute; top: 50%; bottom:auto; left: -5.25%; list-style: none; display: block; text-align: center; padding: 0px; width: 5%; height: auto; z-index: 100; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); margin-top: -25px; } #topImg .slick-dots li { position: relative; display: block; height: 20px; width: 100%; margin: 25px auto 0; padding: 0; cursor: pointer; text-align: center; } #topImg .slick-dots li button { border: 0; background: #fefefe; display: block; height: 20px; width: 30px; padding: 0; /*overflow: hidden; */ line-height: 20px; font-size: 0; color: transparent; cursor: pointer; position: relative; z-index: 2; margin: 0 auto; text-align: center; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;} #topImg .slick-dots li button:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight:300; color: #111; z-index: -1; letter-spacing: 2px; } #topImg .slick-dots li:first-child button:after { border: #297d58 2px solid;border-radius: 50%;width: 10px;height: 10px; content: ""; } #topImg .slick-dots li:nth-child(2) button:after { border: #297d58 2px solid;border-radius: 50%;width: 10px;height: 10px; content: ""; } #topImg .slick-dots li:nth-child(3) button:after { border: #297d58 2px solid;border-radius: 50%;width: 10px;height: 10px; content: ""; } #topImg .slick-dots li:nth-child(4) button:after { border: #297d58 2px solid;border-radius: 50%;width: 10px;height: 10px; content: ""; } /* #topImg .slick-dots li:nth-child(5) button:after { content: "〇"; } #topImg .slick-dots li:nth-child(6) button:after { content: "〇"; } */ #topImg .slick-dots li button:focus { outline: none; } #topImg .slick-dots li.slick-active button {outline: none;background: #297d58;border-radius: 50%;width: 15px;height: 15px;} /* #topImg .slick-dots li button:before { position: absolute; top: 45%; right: 100%; left: 0; content: ""; border-top: transparent 2px solid; z-index: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.7; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;} */ #topImg .slick-dots li button:before { } #topImg .slick-dots li:hover button:before { right: 0; /* border-top: #297d58 2px solid;*/ opacity: 1; } #topImg .slick-dots li.slick-active button:before { position: absolute; top: 45%; right: 0; left: 0; content: ""; border:none; /* border-top: #7eccd6 2px solid;*/ z-index: 1; opacity: 1; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } /* ----- .slick-dots ----- */ #topImg .slick-dots { position: absolute; top: auto; bottom:10px; left: 0; right:0; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; height: auto; z-index: 100; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); margin-top: 0; } #topImg .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 2%; padding: 0; cursor: pointer; text-align: center; } #topImg .slick-dots li button { border: 0; background: #fefefe; background:none; display: block; height: 20px; width: 20px; padding: 0; /*overflow: hidden; */ line-height: 20px; font-size: 0; color: transparent; cursor: pointer; position: relative; z-index: 2; margin: 0 auto; text-align: center; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } #topImg .slick-dots li button:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 11px; color: #fefefe; z-index: -1; letter-spacing: 1.5px; } } @media only screen and (max-width: 800px) { #topImg { min-height: 100%; /*min-height:70%;*/ } /* ----- .catchArea ----- */ #topImg .catchArea { position: absolute; bottom: 0; } #topImg .catchArea h2 { font-size:12px; letter-spacing: 5px; line-height: 50px; } #topImg .catchArea h2 span { vertical-align:0; } /* ----- .arrowArea ----- */ #topImg .arrowArea { display:none; } /* ----- .img ----- */ #topImg .img { position: absolute; top: 50px; left: 0; bottom: 50px; right: 0; background-size: cover; z-index: -1; } /* ----- .slick-dots ----- */ #topImg .mainImg { min-height: 100%; width: 100%; background-size: cover !important; } /* ----- .mainSlider ----- */ .mainSlider { } #topImg .slick-list, #topImg .slick-track { height: 100%; } /* ----- .slick-dots ----- */ #topImg .slick-dots { position: absolute; top: auto; bottom:10px; left: 0; right:0; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; height: auto; z-index: 100; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); margin-top: 0; } #topImg .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 2%; padding: 0; cursor: pointer; text-align: center; } #topImg .slick-dots li button { border: 0; background: #fefefe; background:none; display: block; height: 20px; width: 20px; padding: 0; /*overflow: hidden; */ line-height: 20px; font-size: 0; color: transparent; cursor: pointer; position: relative; z-index: 2; margin: 0 auto; text-align: center; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } #topImg .slick-dots li button:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 11px; color: #fefefe; z-index: -1; letter-spacing: 1.5px; } } @media only screen and (max-width: 738px) { #topImg .catchArea h2 { font-size:11px; text-indent:10px; } /* ----- .bg ----- */ #topImg .bg001 { background: url(../images/home/mainslider/1sp.jpg) center center no-repeat; } #topImg .bg002 { background: url(../images/home/mainslider/2sp.jpg) bottom center no-repeat; } #topImg .bg003 { background: url(../images/home/mainslider/3sp.jpg) bottom center no-repeat; } #topImg .bg004 { background: url(../images/home/mainslider/4sp.jpg) top center no-repeat; } /* #topImg .bg005 { background: url(../images/home/mainslider/5sp.jpg) bottom left no-repeat; } #topImg .bg006 { background: url(../images/home/mainslider/6sp.jpg) center center no-repeat; } */ } @media only screen and (max-width: 414px) { #topImg .catchArea h2 { font-size:10px;} #topImg .slick-dots li button:after { font-weight:600;} } @media only screen and (max-width: 380px) { #topImg .catchArea h2 { letter-spacing: 4px;} } @media only screen and (max-width: 320px) { #topImg .catchArea h2 { letter-spacing: 3px;} } /* ----------------------------------------------------------- #catchLink ----------------------------------------------------------- */ #catchLink{ padding: 59px 0 0; margin: -59px 0 0; } /* ----------------------------------------------------------- #catch ----------------------------------------------------------- */ #catch {padding:40px 0 90px;padding: 30px 0 0px;text-align:center;background:#fefefe;/* width: 1000px; *//* margin: 0 auto; */} @media only screen and (max-width: 1024px) { #catch { padding:30px 5% 80px; } } @media only screen and (max-width: 800px) { #catch { padding:30px 5% 80px; } } @media only screen and (max-width: 738px) { #catch { padding: 30px 5% 70px;} } @media only screen and (max-width: 414px) { #catch { padding: 20px 5% 60px;} } /* --- h3 --- */ #catch h3 {/* font-size:25px; *//* font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; *//* letter-spacing:3px; *//* line-height:2; */margin-top: 10px;font-size: 20px;font-family: 'Catamaran', sans-serif;font-weight: 700;letter-spacing: 2px;line-height: 1.2;} #catch h3 br.spblock { display:none; } #catch h3.en {font-size: 13px;font-family: 'Catamaran', sans-serif;font-weight:700;letter-spacing:2px;line-height: 1.0;} #catch h3.jp {font-size: 20px;font-weight: bold;letter-spacing: 3px;line-height: 1.0;} @media only screen and (max-width: 1024px) { #catch h3 { margin-top:15px; font-size: 22px;} } @media only screen and (max-width: 800px) { #catch h3 {margin-top:15px;font-size: 30px;font-family: 'Catamaran', sans-serif;font-weight: 600;} } @media only screen and (max-width: 738px) { #catch h3 { font-size: 18px; letter-spacing: 2px; line-height: 1.8; margin-top:10px;} #catch h3 br.spblock { display:block; } } @media only screen and (max-width: 414px) { #catch h3 { font-size: 16px; letter-spacing: 2px; line-height: 1.8; text-align: center; } } /* --- .iconIllust --- */ #catch .iconIllust {width: 500px;height: auto;margin: 0 auto;/* background:url(../images/home/illust_logo.png) center center no-repeat; */background-size:200px 196px;position:relative;z-index:0;} @media only screen and (max-width: 738px) { #catch .iconIllust { width: 150px; height: 150px; background-size:150px 150px;} } @media only screen and (max-width: 414px) { #catch .iconIllust { width: 120px; height: 120px; background-size:120px 120px;} } /* --- .txtArea --- */ #catch .txtArea { margin:25px auto 0; max-width:700px; } #catch .txtArea p{font-size:14px; line-height:2.4; letter-spacing:2px; margin-top:1em;} @media only screen and (max-width: 738px) { #catch .txtArea { margin: 20px auto 0; padding:0 2.5%; text-align:left; } #catch .txtArea p { font-size: 13px; line-height: 2; letter-spacing: 1px; margin-top: 1em; } #catch .txtArea p br { display:none; } } /* フレックスボックス -----------------------------------------------------------------*/ #catch .catch_ex { /* display: -webkit-box; */ display: -ms-flexbox; /* display: -webkit-flex; */ /* display: flex; */ -ms-flex-wrap: wrap; /* -webkit-flex-wrap: wrap; */ /* flex-wrap: wrap; */ /* -webkit-box-align: center; */ -ms-flex-align: center; /* -webkit-align-items: center; */ /* align-items: center; */ /* border: 1px solid #eee; */ /* padding: 0em; */ /* margin: 0 auto; */ } #catch .catch_ex a{ width:100%; margin: 0 auto; } #catch .catch_ex a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } #catch .catch_ex > div { flex: 1 0 300px; } #catch .catch_ex img{ padding: 20px; max-width: 400px; width: 100%; } #catch .catch_ex h1 { padding: 5px 0; font-size: 32px; line-height: 1.5; text-align: center; font-family: serif; color: #666; letter-spacing: 10px; } #catch .catch_ex p{ padding: 5px 0; font-size:20px; line-height: 1.5; text-align: center; font-family: serif; color: #666; letter-spacing: 10px; } @media only screen and (max-width: 330px) { #catch .catch_ex > div { flex: 1 0 260px; } } @media only screen and (max-width: 414px) { #catch .txtArea p { font-size: 12px;} #catch .catch_ex p{padding-top: 10px;font-size:14px;line-height: 1.7;letter-spacing: 2px;} } /* --- .illustArea --- */ .illustArea { margin: 45px auto 0; max-width:650px; height:auto; } @media only screen and (max-width: 800px) { .illustArea { margin: 40px auto 0; } } @media only screen and (max-width: 738px) { .illustArea { margin: 35px auto 0;} } @media only screen and (max-width: 414px) { .illustArea { margin: 30px auto 0;} } /* ----------------------------------------------------------- #photography ----------------------------------------------------------- */ #photography {padding: 10px 0;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */background:#fefefe;/* background: url(../images/noise.png) repeat #fefefe; */} #photography:before {position: absolute;top: -1px;left: 0%;right: 0%;height: 0;content: "";border-top: #ededed 1px solid;z-index: 2;} @media only screen and (max-width: 800px) { #photography { padding: 0 0 80px; } } @media only screen and (max-width: 738px) { #photography { padding: 0 0 70px; background: url(../images/noise2.png) repeat #fefefe;} } @media only screen and (max-width: 414px) { #photography{ padding: 0 0 60px; } } /* ----- .headlineImg ----- */ #photography .headlineImg { background: url(../images/home/bg_photography.jpg) center center no-repeat; background-size: cover; padding: 200px 0; text-align: center; color: #fefefe; position:relative; z-index:1; } #photography .headlineImg:before{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: #111; opacity: 0.2; z-index: 2; } #photography .headlineImg h2.en { font-size: 45px; font-family: 'Catamaran', sans-serif; font-weight:800; line-height: 1; letter-spacing: 5px; position: relative; z-index: 3;} #photography .headlineImg h2.jp { font-size: 15px; font-weight: bold; letter-spacing: 5px; line-height: 1; margin-top: 20px; position: relative; z-index: 3; } @media only screen and (max-width: 1024px) { #photography .headlineImg { padding: 175px 0; } } @media only screen and (max-width: 800px) { #photography .headlineImg { padding: 150px 0;margin: 0; } #photography .headlineImg h2.en { font-size: 35px; letter-spacing: 4px; position: relative; z-index: 3; } #photography .headlineImg h2.jp { font-size: 14px; font-weight: bold; letter-spacing: 4px; line-height: 1; margin-top: 15px; position: relative; z-index: 3; } } @media only screen and (max-width: 738px) { #photography .headlineImg { background: url(../images/home/bg_photographySp.jpg) center center no-repeat; background-size: cover; padding: 125px 0; } #photography .headlineImg h2.en { font-size: 30px; letter-spacing: 3px; position: relative; z-index: 3; } } @media only screen and (max-width: 414px) { #photography .headlineImg { padding: 80px 0; } #photography .headlineImg h2.en { font-size: 23px; letter-spacing: 3px; position: relative; z-index: 3; } #photography .headlineImg h2.jp { font-size: 12px; font-weight: bold; letter-spacing: 3px; line-height: 1; margin-top: 10px; position: relative; z-index: 3; } } /* ----------------------------------------------------------- #instagram ----------------------------------------------------------- */ #photography {padding: 0px 5%;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */} #photography:before { position: absolute; top: -1px; left: 5%; right: 5%; height: 0; content: ""; border-top: #ededed 1px solid; z-index: 2; } @media only screen and (max-width: 800px) { #photography { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #photography { padding: 70px 5%; } } @media only screen and (max-width: 414px) { #photography {padding: 30px 5%;} } /* ----- .headline ----- */ #photography .headline { margin-bottom: 45px; text-align: center; } #photography .headline h2.en {font-size:50px;/* font-family: 'Satisfy', cursive; */letter-spacing:0;line-height: 1;} #photography .headline h3 { font-size: 14px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing: 2px; line-height:1; margin-top:20px;} #photography .headline h3 b { font-weight:600;letter-spacing: 2px;} @media only screen and (max-width: 800px) { #photography .headline { margin-bottom: 40px; } #photography .headline h2.en { font-size:40px; } #photography .headline h3 { margin-top:15px;} } @media only screen and (max-width: 738px) { #photography .headline { margin-bottom: 30px; } #photography .headline h2.en { font-size:35px; } } @media only screen and (max-width: 414px) { #photography .headline h2.en { font-size:30px; } #photography .headline h3 { font-size: 13px;margin-top:10px;} } /* ----- .photographyArea ----- */ #photography .photographyArea { margin: 0; } /* .photographyBox */ #photography .photographyBox {width: 100%;/* float: left; *//* display: block; */margin: 20px 1% 80px;/* position: relative; */z-index: 2;background:#fefefe;/* border:#ededed 1px solid; */padding: 30px 30px 30px 30px;/* background: #fafafa; */margin: 0 auto;max-width: 1200px;} /* -#photography .photographyBox:nth-child(even) {padding:30px 0 60px 30px;} */ /* ----- .txtArea ----- */ #photography .photographyBox .txtArea {/* position:absolute; *//* top:0; *//* left:0; *//* bottom:0; */width: 100%;z-index: 1;display: block;} /* #photography .photographyBox:nth-child(even) .txtArea { left:auto; right:0; } */ /* .photographyhHead */ #photography .photographyhHead {display: block;text-align: center;/* position: absolute; */z-index: 2;margin-top: 50px;-o-transform: translate(-50%, -50%);/* transform: translate(-50%, -50%); */} /* .iconIllust */ #photography .photographyhHead .iconIllust {width:90px;height:90px;margin:20px auto 0;position:relative;z-index:0;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;} #photography .photographyhHead .iconIllust:before {position:absolute;top:0;right:0;bottom:0;left:0;display:block;content:"";border:#f0f0f0 1px solid;z-index:2;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;} #photography .photographyhHead .iconIllust_location {/* background: url(../images/photography/location/icon.png) center center no-repeat; *//* background-size:80px 80px; */} #photography .photographyhHead .iconIllust_wedding { background:url(../images/photography/wedding/icon.png) center center no-repeat; background-size:80px 80px; } #photography .photographyhHead .iconIllust_family { background:url(../images/photography/family/icon.png) center center no-repeat; background-size:80px 80px; } /* h2,h3 */ #photography .photographyhHead h2 {font-size: 12px; font-family: 'Catamaran', sans-serif; font-weight:500; letter-spacing: 2.5px; line-height:1.8; position:relative; z-index:4; } #photography .photographyhHead h3.en {font-size: 13px;font-family: 'Catamaran', sans-serif;font-weight:700;letter-spacing:2px;line-height: 1.8;} #photography .photographyhHead h3.jp {font-size: 20px;font-weight: bold;letter-spacing: 3px;line-height: 1.8;} /* .catchArea */ #photography .catchArea {margin-top: 10px;} #photography .catchArea h4 { font-size: 13px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif;letter-spacing: 1px; line-height: 2; } /* .linkAreaHead */ #photography .photographyhHead .linkAreaHead { margin-top:20px; } #photography .photographyhHead .linkAreaHead a {width: 160px;font-size:13px;z-index: 1000;} /* ----- .imgArea ----- */ #photography .photographyBox { width: 100%; max-width: 1200px; padding: 5% 2%; display: flex; } #photography .photographyBox .imgArea {flex: 1 0 0; margin: 0.4em 2em; z-index: 2;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;/* max-height: 201px; */} #photography .photographyBox .imgArea img {max-height:201px; width: auto} /*#photography .photographyBox:nth-child(even) .imgArea { float: left; }*/ /* ----- .imgArea ----- */ #photography .photographyBox .imgArea2 {flex: 1 0 0; margin: 0.4em 2em; z-index: 2;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;max-height: 201px;} #photography .photographyBox .imgArea2 img {max-height:201px;width: auto;} /* ----- .imgArea ----- #photography .photographyBox .imgArea {float: left;width: 70%; z-index: 2;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;} #photography .photographyBox .imgArea img {max-height:201px; width: auto} #photography .photographyBox .imgArea2 {float: right;width: 30%; z-index: 2;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;max-height: 201px;} #photography .photographyBox .imgArea2 img {max-height:201px;width: auto;} */ /*#photography .photographyBox:nth-child(even) .imgArea { float: left; }*/ .main { margin-bottom: 10px; } .side { } .main, .side { padding: 2%; } @media ( min-width : 600px ){ .flexbox { display: -webkit-flex; display: flex; } .main { margin: 0 10px 0 0; } } .boxFlexible { position: relative; margin: 5em auto 3em; padding: 1em 1em; border: solid 3px #297d58; max-width:800px; } .boxFlexible .box-title { position: absolute; display: inline-block; top: -37px; left: 10px; padding: 0 15px; height: 35px; line-height: 35px; vertical-align: middle; font-size: 20px; /* background: #297d58; */ color: #297d58; font-weight: bold; /* border-radius: 5px 5px 0 0; */ font-weight:600; } .boxFlexible .box-title:before{position: absolute;top: 0;left: -10px;bottom: 0;width: 25px;font-size: 20px;text-align: left;font-family: 'FontAwesome';content: "\f15c";font-weight: normal;} .boxFlexible p { margin: 0; padding: 0; font-size: 17px; line-height: 1.6; } @media only screen and (max-width: 800px) { /* ----- .photographyArea ----- */ #photography .photographyArea { margin: 0 5%; } #photography .photographyBox, #photography .photographyBox:nth-child(even) {margin: 70px 1% 70px;padding:0;border: #ededed 1px solid;background:#fefefe;overflow:hidden;} /* #photography .photographyhHead h3.jp:after {content:''; position: absolute; left:2.5%; top:34px; width:95%; background:#000; 10px;height:1.5px;-webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out} */ /* ----- .txtArea ----- */ #photography .photographyBox .txtArea, #photography .photographyBox:nth-child(even) .txtArea { position:static; width: 100%; padding:35px 5% 50px; } /* .photographyhHead */ #photography .photographyBox .photographyhHead {display:block;text-align: center;position: static;-moz-transform: /*translate(0, 0);-ms-transform: translate(0, 0);-o-transform: translate(0, 0); transform: translate(0, 0); */} #photography .catchArea { display:block; } /* .linkAreaHead */ #photography .photographyBox .photographyhHead .linkAreaHead { margin-top:20px; } #photography .photographyhHead .iconIllust { width:100px; height:100px; } #photography .photographyhHead .iconIllust_location, #photography .photographyhHead .iconIllust_wedding, #photography .photographyhHead .iconIllust_family{background-size:90px 90px; } /* ----- .imgArea ----- */ #photography .photographyBox .imgArea { float: none; width: 100%; padding:30px 5% 0; padding:0; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } #photography .photographyBox:nth-child(even) .imgArea { float: none; } } @media only screen and (max-width: 738px) { #photography .photographyBox, #photography .photographyBox:nth-child(even) { margin: 60px 0 0; } /* ----- .txtArea ----- */ #photography .photographyBox .txtArea, #photography .photographyBox:nth-child(even) .txtArea {padding:30px 5% 45px;} #photography .photographyhHead .iconIllust { width:70px; height:70px; margin:15px auto 0;} #photography .photographyhHead .iconIllust_location, #photography .photographyhHead .iconIllust_wedding, #photography .photographyhHead .iconIllust_family{background-size:60px 60px; } #photography .catchArea h4 { font-size: 12px; } #photography .photographyBox .photographyhHead .linkAreaHead {margin-top:15px;z-index: 100;} } @media only screen and (max-width: 500px) { #photography .photographyBox, #photography .photographyBox:nth-child(even) {width: 100%;margin: 0px 0 0;} #photography .photographyhHead .linkAreaHead a {z-index: 10000;} } /* ----- .gallerySlider ----- */ .gallerySlider { margin: 0; padding-bottom: 0; } /* --- li --- */ .gallerySlider li { margin: 0; position: relative; background: #fefefe; z-index:3; } /* --- .imgArea --- */ .gallerySlider li .imgArea { overflow: hidden; position: relative; z-index: 4; background: #fefefe; } .gallerySlider li .imgArea:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #fefefe; z-index: 5; opacity: 0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } .gallerySlider li:hover .imgArea:before { content: ""; background: #e4f5fd; opacity: 0.8; } .gallerySlider li .imgArea img { -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .gallerySlider li:hover .imgArea img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); opacity: 0.5; } /* Arrow */ .gallerySlider .slick-prev, .gallerySlider .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 60px; height: 60px; padding: 0; /*lte IE 8*/ -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: #111; border: #ddd 1px solid; border: none; background: #fefefe; outline: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index: 2; } .gallerySlider .slick-prev:before, .gallerySlider .slick-next:before { font-family: 'themify'; font-size: 12px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .gallerySlider .slick-prev { left: 0; margin-left: -30px; } .gallerySlider .slick-prev:before { content: "\e64a"; } .gallerySlider .slick-next { margin-right: -30px; right: 0; } .gallerySlider .slick-next:before { content: "\e649"; } /* --- .slick-dots --- */ .gallerySlider .slick-dots { bottom: -33px; } .gallerySlider .slick-dots li { position: relative; height: 6px; width: 6px; margin: 0 10px; padding: 0; cursor: pointer; text-align: center; } /* --- .linkArea --- */ #photography .linkArea {margin-bottom: 70px;/* position:relative; */z-index: 0;} @media only screen and (max-width: 800px) { /* --- Arrows --- */ .gallerySlider .slick-prev, .gallerySlider .slick-next { width: 40px; height: 40px; } .gallerySlider .slick-prev { left: auto; right:46px; } .gallerySlider .slick-next { right: 5px; } #photography .photographyBox:nth-child(even) .gallerySlider .slick-prev { left: 5px; right:auto; } #photography .photographyBox:nth-child(even) .gallerySlider .slick-next { left:46px; right: auto; } } @media only screen and (max-width: 800px) { .gallerySlider { margin: 0 -1px 41px; padding-bottom: 0;} .gallerySlider .slick-dots { position: absolute; top:auto; bottom: -40px;right:0; left: 0; width: 100%; height: 6px; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .gallerySlider .slick-dots li { position: relative; display: inline-block; height: 6px; width: 6px; margin: 0px 10px; padding: 0; cursor: pointer; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; border:none; } /* --- .linkArea --- */ #photography .linkArea { margin-top:60px; } } @media only screen and (max-width: 738px) { .gallerySlider { margin: 0 -1px 31px; } .gallerySlider .slick-dots, #photography .photographyBox:nth-child(even) .gallerySlider .slick-dots { bottom: -30px;} /* --- .linkArea --- */ #photography .linkArea { margin-top:50px; } } @media only screen and (max-width: 414px) { #photography .linkArea { margin-top:40px; } } /* ----------------------------------------------------------- #release ----------------------------------------------------------- */ #release {padding: 30px 5%;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */background: #eee;} #release:before { position: absolute; top: -1px; left: 5%; right: 5%; height: 0; content: ""; border-top: #eee 0px solid; z-index: 2; } @media only screen and (max-width: 800px) { #release { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #release { padding: 70px 5%; } } @media only screen and (max-width: 414px) { #release { padding: 60px 5%; } } /* ----- .headline ----- */ #release .headline { margin-bottom: 45px; text-align: center; } #release .headline h2.en {font-size:50px;/* font-family: 'Satisfy', cursive; */letter-spacing:0;line-height: 1;} #release .headline h3 { font-size: 14px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing: 2px; line-height:1; margin-top:20px;} #release .headline h3 b { font-weight:600;letter-spacing: 2px;} @media only screen and (max-width: 800px) { #release .headline { margin-bottom: 40px; } #release .headline h2.en { font-size:40px; } #release .headline h3 { margin-top:15px;} } @media only screen and (max-width: 738px) { #release .headline { margin-bottom: 30px; } #release .headline h2.en { font-size:35px; } } @media only screen and (max-width: 414px) { #release .headline h2.en { font-size:30px; } #release .headline h3 { font-size: 13px;margin-top:10px;} } /* --- .nameArea --- */ #release .nameArea { margin: 0; position: relative; z-index: 2; } #release .nameArea:before { position: absolute; top: 7px; left: 0; bottom: 7px; right:0; content: ""; border: #ddd 1px solid; background: #fefefe;z-index: -2; } /* #release .nameArea:after { position: absolute; top: 0; left: 7px; bottom: 0; right:7px; content: ""; border: #ddd 1px dotted; z-index: -2; }*/ /* --- .inner --- */ #release .nameArea .inner { padding:70px 5%; } /* .imgArea */ #release .nameArea .imgArea {float:left;width: 22%;margin: 1%;padding: 40px;position:relative;z-index:1;} #release .nameArea .imgArea {float:left;width: 22%;margin: 1%;padding: 40px;position:relative;z-index:1;} #release .nameArea .imgArea:before { position:absolute; top:0; right:10px; left:10px; bottom:0; content:""; border-top:#ddd 1px solid; border-bottom:#ddd 1px solid;z-index:2; } #release .nameArea .imgArea:after { position:absolute; top:10px; right:0; left:0; bottom:10px; content:""; border-right:#ddd 1px solid; border-left:#ddd 1px solid;z-index:2; } #release .nameArea .imgArea img {/* border:#fafafa 1px solid; */} #release .nameArea .imgReco { /* display: flex; */ /* flex-wrap: wrap; */ /* border: 1px solid #eee; */ padding: 1em; /* background: #fff; */ /* justify-content: center; */ /* 子要素をflexboxにより中央に配置する */ } .item_Reco { /* background: #f9f9f9; */ padding: 2%; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; width: 33.33%; float: left; } .item_banner .item_Reco { width: 40%; } @media only screen and (max-width: 800px) { .item_banner .item_Reco { width: 100%; } } @media only screen and (max-width: 800px) { #release .nameArea:before { border: #eee 0px solid; } #release .nameArea .imgReco { background: #eee; } .item_Reco { /* background: #f9f9f9; */ padding: 2%; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; width: 98%; margin: 1%; float: left; border:1px solid #eee; } } @media only screen and (max-width: 500px) { .item_Reco { /* background: #f9f9f9; */ padding: 2%; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; width: 98%; margin: 1%; float: left; border:1px solid #eee; } } .item_Reco a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .item_Reco h3 {font-size: 12px;font-family: 'Catamaran', sans-serif;font-weight: 500;letter-spacing: 2.5px;line-height: 1.8;text-align: center;position: relative;z-index: 4;margin-top: 5px;} .item_Reco h4 { font-size: 20px; font-family: 'Playfair Display',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 400; letter-spacing: 2px; line-height: 1.6; text-align: center; margin: 5px 0 25px; padding-bottom: 10px; position: relative; z-index: 2; } .item_Reco h4 b {display:block;font-size:15px;font-weight:normal;vertical-align:0;margin-top:2px;font-family: 'Catamaran', sans-serif;} .item_Reco h4:after { position: absolute; bottom: 0; left: 50%; width: 50px; height: 0; margin-left: -25px; content: ""; /* border-top: #ddd double; */ z-index: -1; border-top: #ddd solid 1px; } .item_Reco .linkAreaHead { margin-top: 20px; } .item_Reco .linkAreaHead a{ width: 160px; font-size: 13px; } /* ----------------------------------------------------------- #newsarea ----------------------------------------------------------- */ #newsarea {padding: 30px 5%;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */background: #f6f7f9;} #newsarea:before { position: absolute; top: -1px; left: 5%; right: 5%; height: 0; content: ""; border-top: #eee 0px solid; z-index: 2; } @media only screen and (max-width: 800px) { #newsarea { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #newsarea { padding: 70px 5%; } } @media only screen and (max-width: 414px) { #newsarea { padding: 60px 5%; } } /* ----- .headline ----- */ #newsarea .headline { margin-bottom: 45px; text-align: center; } #newsarea .headline h2.en {font-size:50px;/* font-family: 'Satisfy', cursive; */letter-spacing:0;line-height: 1;} #newsarea .headline h3 { font-size: 14px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing: 2px; line-height:1; margin-top:20px;} #newsarea .headline h3 b { font-weight:600;letter-spacing: 2px;} @media only screen and (max-width: 800px) { #newsarea .headline { margin-bottom: 40px; } #newsarea .headline h2.en { font-size:40px; } #newsarea .headline h3 { margin-top:15px;} } @media only screen and (max-width: 738px) { #newsarea .headline { margin-bottom: 30px; } #newsarea .headline h2.en { font-size:35px; } } @media only screen and (max-width: 414px) { #newsarea .headline h2.en { font-size:30px; } #newsarea .headline h3 { font-size: 13px;margin-top:10px;} } #newsarea .nameArea .top_news { /* display: flex; */ /* flex-wrap: wrap; */ border: 1px solid #eee; padding: 0.5em; background: #fff; /* justify-content: center; */ /* 子要素をflexboxにより中央に配置する */ } .item_news h2 { font-size: 18px; /* border-top: 1px solid #eee; */ border-bottom: 1px solid #eee; margin-bottom: 20px; text-align: left; padding-left: 10px; } .item_news_title { /* background: #f9f9f9; */ padding: 3%; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; /* width: 8%; */ float: left; font-size: 18px; font-family: serif; } @media only screen and (max-width: 800px) { .item_news_title { padding: 5% 1%; } } .item_news_title img { width: 42px; } /*縦書き*/ .item_news_title h2{ -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } .item_news { /* background: #f9f9f9; */ padding: 2%; padding-left: 0; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; width: 50%; float: left; } @media only screen and (max-width: 800px) { #release .nameArea:before { border: #eee 0px solid; } #release .nameArea .top_news { background: #e9ebee; } .item_news { /* background: #f9f9f9; */ padding: 2%; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; width: 70%; margin: 1% 1% 30px; float: left; /* border:1px solid #eee; */ } } @media only screen and (max-width: 414px) { .item_news { /* background: #f9f9f9; */ padding: 1%; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; width: 80%; margin: 1% 1% 30px; float: left; /* border:1px solid #eee; */ } } /* .txtArea */ #release .nameArea .txtArea { float:right; width:50%; text-align:left;} #release .nameArea .txtArea .txtBox { margin:0 auto; max-width:450px; } #release .nameArea .txtArea h3 {font-size: 12px; font-family: 'Catamaran', sans-serif; font-weight:500; letter-spacing: 2.5px; line-height:1.8; text-align:center;position:relative; z-index:4; } #release .nameArea .txtArea h4 { font-size: 25px; font-family: 'Playfair Display',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight:400; letter-spacing: 2px; line-height: 1.6; text-align:center; margin:5px 0 25px; padding-bottom:25px; position:relative; z-index:2; } #release .nameArea .txtArea h4 b { display:block; font-size:15px; font-weight:normal; vertical-align:0; margin-top:2px; } #release .nameArea .txtArea h4:after { position:absolute; bottom:0; left:50%; width:50px; height:0; margin-left:-25px; content:""; border-top:#ddd double; z-index:-1; } #release .nameArea .txtArea p {font-size: 14px; line-height: 2.4; letter-spacing: 2px;} #release .nameArea .sign { margin-top:30px; width:100%; height:65px; background:url(../images/about/sign.png) center right no-repeat; } @media only screen and (max-width: 1024px) { #release .nameArea .imgArea { padding: 30px; } #release .nameArea .txtArea p {font-size: 13px; line-height: 2.2; letter-spacing: 1px;} } @media only screen and (max-width: 800px) { #release .nameArea .inner { padding:60px 6%; } #release .nameArea .imgArea { width:40%; padding:15px; } #release .nameArea .txtArea { width:55%;} #release .nameArea .txtArea h4 { font-size: 22px;margin:0 0 20px; padding-bottom:20px; } #release .nameArea .txtArea h4 b { font-size:14px; margin-top:0; } } @media only screen and (max-width: 738px) { #release .nameArea .inner { padding:50px 7.5%; } /* .imgArea */ #release .nameArea .imgArea { float:none; width:65%; margin:0 auto; padding:10px; } /* .txtArea */ #release .nameArea .txtArea { float:none; width:100%; margin-top:30px; } #release .nameArea .txtArea .txtBox { max-width:1000px; padding:0 2.5%; } #release .nameArea .txtArea h4 { font-size: 20px; } #release .nameArea .txtArea h4 b { display:block; font-size:15px; font-weight:normal; vertical-align:0; } #release .nameArea .txtArea p {font-size: 12px; line-height: 2; letter-spacing: 1px;} } /* ----------------------------------------------------------- #instagram ----------------------------------------------------------- */ #instagram {padding: 30px 5% 90px;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */} #instagram:before { position: absolute; top: -1px; left: 5%; right: 5%; height: 0; content: ""; border-top: #ededed 1px solid; z-index: 2; } @media only screen and (max-width: 800px) { #instagram { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #instagram { padding: 70px 5%; } } @media only screen and (max-width: 414px) { #instagram { padding: 60px 5%; } } /* ----- .headline ----- */ #instagram .headline { margin-bottom: 45px; text-align: center; } #instagram .headline h2.en {font-size:50px;/* font-family: 'Satisfy', cursive; */letter-spacing:0;line-height: 1;} #instagram .headline h3 { font-size: 14px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing: 2px; line-height:1; margin-top:20px;} #instagram .headline h3 b { font-weight:600;letter-spacing: 2px;} @media only screen and (max-width: 800px) { #instagram .headline { margin-bottom: 40px; } #instagram .headline h2.en { font-size:40px; } #instagram .headline h3 { margin-top:15px;} } @media only screen and (max-width: 738px) { #instagram .headline { margin-bottom: 30px; } #instagram .headline h2.en { font-size:35px; } } @media only screen and (max-width: 414px) { #instagram .headline h2.en { font-size:30px; } #instagram .headline h3 { font-size: 13px;margin-top:10px;} } /* ----- ul.imageInstagram ----- */ ul.imageInstagram { margin: 5px -8px 0; padding: 0; font-size: 0; } ul.imageInstagram li { list-style: none; margin: 0; padding: 0; display: inline-block; width: 25%; position: relative; border: transparent 8px solid; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; overflow: hidden; z-index: 0; } /*ul.imageInstagram li { list-style: none; margin: 0; padding: 0; float: left; width: 20%; position: relative; border: transparent 8px solid; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; overflow: hidden; z-index: 0; }*/ ul.imageInstagram li .imgArea { border: #ededed 1px solid; padding: 10px; background: #fefefe; position: relative; z-index: 1;} ul.imageInstagram li .imgArea .inner { overflow: hidden; position:relative; z-index:1; } ul.imageInstagram li .imgArea:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #fefefe; z-index: 2; opacity: 0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } ul.imageInstagram li:hover .imgArea:before { content: ""; background: #ededed; z-index: 2; opacity: 0.8; } ul.imageInstagram li .imgArea:after {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 50px;height: 50px;font-family: 'themify';font-family: 'FontAwesome';font-size: 25px;content: "\f16d";/* content: "\e73d"; */color: #fefefe;background: #fefefe;z-index: 3;opacity: 0;text-align: center;line-height: 50px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;-webkit-transform: /*rotate(-60deg)*/scale(0.8, 0.8);-moz-transform: /*rotate(-60deg)*/ scale(0.8, 0.8);-o-transform: /*rotate(-60deg)*/scale(0.8, 0.8);-ms-transform: /*rotate(-60deg)*/ scale(0.8, 0.8);transform: /*rotate(-60deg)*/scale(0.8, 0.8);} ul.imageInstagram li:hover .imgArea:after { color:#999; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); -moz-transform: rotate(0deg) scale(1, 1); -o-transform: rotate(0deg) scale(1, 1); -ms-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); } ul.imageInstagram li img { display: block; width: 100%; height: auto; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; background: #fefefe; } ul.imageInstagram li:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /*ul.imageInstagram li:first-child { width: 40%; } ul.imageInstagram li:first-child .imgArea { padding: 15px; } ul.imageInstagram li:nth-child(8) { display: none; }*/ /* ----- .il-photo__likes ----- */ .il-photo__likes { position: absolute; bottom: 3px; left: 7px; color: #7eccd6; font-size: 11px;font-family: 'Catamaran', sans-serif; font-weight:300; height: 20px; line-height: 20px; padding: 0; letter-spacing:1px; z-index: 11; } .il-photo__likes:before { font-size: 11px; font-family: 'themify'; content: "\e634"; padding-right: 5px; } #instagram .linkArea .btn:after {font-size: 10px;font-size: 18px;/* content: "\e73d"; */right: auto;left:15px;} @media only screen and (max-width: 800px) { /* ----- ul.imageInstagram ----- */ ul.imageInstagram { margin: 3px -3px 0; padding: 0; } ul.imageInstagram li { width: 50%; border: transparent 3px solid; } ul.imageInstagram li .imgArea { padding: 10px; } ul.imageInstagram li .imgArea .inner { overflow: hidden; } ul.imageInstagram li .imgArea:before { display:none; } ul.imageInstagram li .imgArea:after { display:none; } ul.imageInstagram li:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } ul.imageInstagram li:first-child { width: 50%; } ul.imageInstagram li:first-child .imgArea { padding: 10px; } ul.imageInstagram li:nth-child(8) { display: inline-block; } } /* ----------------------------------------------------------- keyframes ----------------------------------------------------------- */ @-webkit-keyframes scroll-next { 0% { -ms-transform:translateX(0)translateY(0px); -webkit-transform:translateX(0)translateY(0px); -moz-transform:translateX(0)translateY(0px); transform:translateX(0)translateY(0px); opacity:0 } 80% { opacity:0.7 } 90% { opacity:0 } 100% { -ms-transform:translateX(0)translateY(40px); -webkit-transform:translateX(0)translateY(40px); -moz-transform:translateX(0)translateY(40px); transform:translateX(0)translateY(40px); opacity:1 } } @-moz-keyframes scroll-next { 0% { -ms-transform:translateX(0)translateY(0px); -webkit-transform:translateX(0)translateY(0px); -moz-transform:translateX(0)translateY(0px); transform:translateX(0)translateY(0px); opacity:1 } 80% { opacity:0.7 } 90% { opacity:0 } 100% { -ms-transform:translateX(0)translateY(40px); -webkit-transform:translateX(0)translateY(40px); -moz-transform:translateX(0)translateY(40px); transform:translateX(0)translateY(40px); opacity:0 } } @-ms-keyframes scroll-next { 0% { -ms-transform:translateX(0)translateY(0px); -webkit-transform:translateX(0)translateY(0px); -moz-transform:translateX(0)translateY(0px); transform:translateX(0)translateY(0px); opacity:1 } 80% { opacity:0.7 } 90% { opacity:0 } 100% { -ms-transform:translateX(0)translateY(40px); -webkit-transform:translateX(0)translateY(40px); -moz-transform:translateX(0)translateY(40px); transform:translateX(0)translateY(40px); opacity:0 } } @keyframes scroll-next { 0% { -ms-transform:translateX(0)translateY(0px); -webkit-transform:translateX(0)translateY(0px); -moz-transform:translateX(0)translateY(0px); transform:translateX(0)translateY(0px); opacity:1 } 80% { opacity:0.7 } 90% { opacity:0 } 100% { -ms-transform:translateX(0)translateY(40px); -webkit-transform:translateX(0)translateY(40px); -moz-transform:translateX(0)translateY(40px); transform:translateX(0)translateY(40px); opacity:0 } } .item_Reco h3 {font-size: 12px;font-family: 'Catamaran', sans-serif;font-weight: 500;letter-spacing: 2.5px;line-height: 1.8;text-align: center;position: relative;z-index: 4;margin-top: 5px;} .item_Reco h4 { font-size: 20px; font-family: 'Playfair Display',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 400; letter-spacing: 2px; line-height: 1.6; text-align: center; margin: 5px 0 25px; padding-bottom: 10px; position: relative; z-index: 2; } .item_Reco h4 b {display:block;font-size:15px;font-weight:normal;vertical-align:0;margin-top:2px;font-family: 'Catamaran', sans-serif;} .item_Reco h4:after { position: absolute; bottom: 0; left: 50%; width: 50px; height: 0; margin-left: -25px; content: ""; /* border-top: #ddd double; */ z-index: -1; border-top: #ddd solid 1px; } .item_Reco .linkAreaHead { margin-top: 20px; } .item_Reco .linkAreaHead a{ width: 160px; font-size: 13px; } /* ----------------------------------------------------------- #newsarea ----------------------------------------------------------- */ #newsarea {padding: 30px 5%;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */background: #f6f7f9;} #newsarea:before { position: absolute; top: -1px; left: 5%; right: 5%; height: 0; content: ""; border-top: #eee 0px solid; z-index: 2; } @media only screen and (max-width: 800px) { #newsarea { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #newsarea { padding: 70px 5%; } } @media only screen and (max-width: 414px) { #newsarea { padding: 60px 5%; } } /* ----- .headline ----- */ #newsarea .headline { margin-bottom: 45px; text-align: center; } #newsarea .headline h2.en {font-size:50px;/* font-family: 'Satisfy', cursive; */letter-spacing:0;line-height: 1;} #newsarea .headline h3 { font-size: 14px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing: 2px; line-height:1; margin-top:20px;} #newsarea .headline h3 b { font-weight:600;letter-spacing: 2px;} @media only screen and (max-width: 800px) { #newsarea .headline { margin-bottom: 40px; } #newsarea .headline h2.en { font-size:40px; } #newsarea .headline h3 { margin-top:15px;} } @media only screen and (max-width: 738px) { #newsarea .headline { margin-bottom: 30px; } #newsarea .headline h2.en { font-size:35px; } } @media only screen and (max-width: 414px) { #newsarea .headline h2.en { font-size:30px; } #newsarea .headline h3 { font-size: 13px;margin-top:10px;} } #newsarea .nameArea .top_news { /* display: flex; */ /* flex-wrap: wrap; */ border: 1px solid #eee; padding: 0.5em; background: #fff; /* justify-content: center; */ /* 子要素をflexboxにより中央に配置する */ } .item_news h2 { font-size: 18px; /* border-top: 1px solid #eee; */ border-bottom: 1px solid #eee; margin-bottom: 20px; text-align: left; padding-left: 10px; } .item_news_title { /* background: #f9f9f9; */ padding: 3%; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; /* width: 8%; */ float: left; font-size: 18px; font-family: serif; } @media only screen and (max-width: 800px) { .item_news_title { padding: 5% 1%; } } .item_news_title img { width: 42px; } /*縦書き*/ .item_news_title h2{ -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } .item_news { /* background: #f9f9f9; */ padding: 2%; padding-left: 0; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; width: 50%; float: left; } @media only screen and (max-width: 800px) { #release .nameArea:before { border: #eee 0px solid; } #release .nameArea .top_news { background: #e9ebee; } .item_news { /* background: #f9f9f9; */ padding: 2%; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; width: 70%; margin: 1% 1% 30px; float: left; /* border:1px solid #eee; */ } } @media only screen and (max-width: 414px) { .item_news { /* background: #f9f9f9; */ padding: 1%; /* border-radius: 5px; */ /* flex: 1 0 200px; */ margin: 0 0; text-align: center; width: 80%; margin: 1% 1% 30px; float: left; /* border:1px solid #eee; */ } } /* .txtArea */ #release .nameArea .txtArea { float:right; width:50%; text-align:left;} #release .nameArea .txtArea .txtBox { margin:0 auto; max-width:450px; } #release .nameArea .txtArea h3 {font-size: 12px; font-family: 'Catamaran', sans-serif; font-weight:500; letter-spacing: 2.5px; line-height:1.8; text-align:center;position:relative; z-index:4; } #release .nameArea .txtArea h4 { font-size: 25px; font-family: 'Playfair Display',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight:400; letter-spacing: 2px; line-height: 1.6; text-align:center; margin:5px 0 25px; padding-bottom:25px; position:relative; z-index:2; } #release .nameArea .txtArea h4 b { display:block; font-size:15px; font-weight:normal; vertical-align:0; margin-top:2px; } #release .nameArea .txtArea h4:after { position:absolute; bottom:0; left:50%; width:50px; height:0; margin-left:-25px; content:""; border-top:#ddd double; z-index:-1; } #release .nameArea .txtArea p {font-size: 14px; line-height: 2.4; letter-spacing: 2px;} #release .nameArea .sign { margin-top:30px; width:100%; height:65px; background:url(../images/about/sign.png) center right no-repeat; } @media only screen and (max-width: 1024px) { #release .nameArea .imgArea { padding: 30px; } #release .nameArea .txtArea p {font-size: 13px; line-height: 2.2; letter-spacing: 1px;} } @media only screen and (max-width: 800px) { #release .nameArea .inner { padding:60px 6%; } #release .nameArea .imgArea { width:40%; padding:15px; } #release .nameArea .txtArea { width:55%;} #release .nameArea .txtArea h4 { font-size: 22px;margin:0 0 20px; padding-bottom:20px; } #release .nameArea .txtArea h4 b { font-size:14px; margin-top:0; } } @media only screen and (max-width: 738px) { #release .nameArea .inner { padding:50px 7.5%; } /* .imgArea */ #release .nameArea .imgArea { float:none; width:65%; margin:0 auto; padding:10px; } /* .txtArea */ #release .nameArea .txtArea { float:none; width:100%; margin-top:30px; } #release .nameArea .txtArea .txtBox { max-width:1000px; padding:0 2.5%; } #release .nameArea .txtArea h4 { font-size: 20px; } #release .nameArea .txtArea h4 b { display:block; font-size:15px; font-weight:normal; vertical-align:0; } #release .nameArea .txtArea p {font-size: 12px; line-height: 2; letter-spacing: 1px;} } /* ----------------------------------------------------------- #instagram ----------------------------------------------------------- */ #instagram {padding: 30px 5% 90px;position: relative;z-index: 1;/* border-top: #a3d9e0 1px solid; */} #instagram:before { position: absolute; top: -1px; left: 5%; right: 5%; height: 0; content: ""; border-top: #ededed 1px solid; z-index: 2; } @media only screen and (max-width: 800px) { #instagram { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #instagram { padding: 70px 5%; } } @media only screen and (max-width: 414px) { #instagram { padding: 60px 5%; } } /* ----- .headline ----- */ #instagram .headline { margin-bottom: 45px; text-align: center; } #instagram .headline h2.en {font-size:50px;/* font-family: 'Satisfy', cursive; */letter-spacing:0;line-height: 1;} #instagram .headline h3 { font-size: 14px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing: 2px; line-height:1; margin-top:20px;} #instagram .headline h3 b { font-weight:600;letter-spacing: 2px;} @media only screen and (max-width: 800px) { #instagram .headline { margin-bottom: 40px; } #instagram .headline h2.en { font-size:40px; } #instagram .headline h3 { margin-top:15px;} } @media only screen and (max-width: 738px) { #instagram .headline { margin-bottom: 30px; } #instagram .headline h2.en { font-size:35px; } } @media only screen and (max-width: 414px) { #instagram .headline h2.en { font-size:30px; } #instagram .headline h3 { font-size: 13px;margin-top:10px;} } /* ----- ul.imageInstagram ----- */ ul.imageInstagram { margin: 5px -8px 0; padding: 0; font-size: 0; } ul.imageInstagram li { list-style: none; margin: 0; padding: 0; display: inline-block; width: 25%; position: relative; border: transparent 8px solid; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; overflow: hidden; z-index: 0; } /*ul.imageInstagram li { list-style: none; margin: 0; padding: 0; float: left; width: 20%; position: relative; border: transparent 8px solid; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; overflow: hidden; z-index: 0; }*/ ul.imageInstagram li .imgArea { border: #ededed 1px solid; padding: 10px; background: #fefefe; position: relative; z-index: 1;} ul.imageInstagram li .imgArea .inner { overflow: hidden; position:relative; z-index:1; } ul.imageInstagram li .imgArea:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #fefefe; z-index: 2; opacity: 0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } ul.imageInstagram li:hover .imgArea:before { content: ""; background: #ededed; z-index: 2; opacity: 0.8; } ul.imageInstagram li .imgArea:after {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 50px;height: 50px;font-family: 'themify';font-family: 'FontAwesome';font-size: 25px;content: "\f16d";/* content: "\e73d"; */color: #fefefe;background: #fefefe;z-index: 3;opacity: 0;text-align: center;line-height: 50px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;-webkit-transform: /*rotate(-60deg)*/scale(0.8, 0.8);-moz-transform: /*rotate(-60deg)*/ scale(0.8, 0.8);-o-transform: /*rotate(-60deg)*/scale(0.8, 0.8);-ms-transform: /*rotate(-60deg)*/ scale(0.8, 0.8);transform: /*rotate(-60deg)*/scale(0.8, 0.8);} ul.imageInstagram li:hover .imgArea:after { color:#999; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); -moz-transform: rotate(0deg) scale(1, 1); -o-transform: rotate(0deg) scale(1, 1); -ms-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); } ul.imageInstagram li img { display: block; width: 100%; height: auto; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; background: #fefefe; } ul.imageInstagram li:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /*ul.imageInstagram li:first-child { width: 40%; } ul.imageInstagram li:first-child .imgArea { padding: 15px; } ul.imageInstagram li:nth-child(8) { display: none; }*/ /* ----- .il-photo__likes ----- */ .il-photo__likes { position: absolute; bottom: 3px; left: 7px; color: #7eccd6; font-size: 11px;font-family: 'Catamaran', sans-serif; font-weight:300; height: 20px; line-height: 20px; padding: 0; letter-spacing:1px; z-index: 11; } .il-photo__likes:before { font-size: 11px; font-family: 'themify'; content: "\e634"; padding-right: 5px; } #instagram .linkArea .btn:after {font-size: 10px;font-size: 18px;/* content: "\e73d"; */right: auto;left:15px;} @media only screen and (max-width: 800px) { /* ----- ul.imageInstagram ----- */ ul.imageInstagram { margin: 3px -3px 0; padding: 0; } ul.imageInstagram li { width: 50%; border: transparent 3px solid; } ul.imageInstagram li .imgArea { padding: 10px; } ul.imageInstagram li .imgArea .inner { overflow: hidden; } ul.imageInstagram li .imgArea:before { display:none; } ul.imageInstagram li .imgArea:after { display:none; } ul.imageInstagram li:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } ul.imageInstagram li:first-child { width: 50%; } ul.imageInstagram li:first-child .imgArea { padding: 10px; } ul.imageInstagram li:nth-child(8) { display: inline-block; } } /* ----------------------------------------------------------- keyframes ----------------------------------------------------------- */ @-webkit-keyframes scroll-next { 0% { -ms-transform:translateX(0)translateY(0px); -webkit-transform:translateX(0)translateY(0px); -moz-transform:translateX(0)translateY(0px); transform:translateX(0)translateY(0px); opacity:0 } 80% { opacity:0.7 } 90% { opacity:0 } 100% { -ms-transform:translateX(0)translateY(40px); -webkit-transform:translateX(0)translateY(40px); -moz-transform:translateX(0)translateY(40px); transform:translateX(0)translateY(40px); opacity:1 } } @-moz-keyframes scroll-next { 0% { -ms-transform:translateX(0)translateY(0px); -webkit-transform:translateX(0)translateY(0px); -moz-transform:translateX(0)translateY(0px); transform:translateX(0)translateY(0px); opacity:1 } 80% { opacity:0.7 } 90% { opacity:0 } 100% { -ms-transform:translateX(0)translateY(40px); -webkit-transform:translateX(0)translateY(40px); -moz-transform:translateX(0)translateY(40px); transform:translateX(0)translateY(40px); opacity:0 } } @-ms-keyframes scroll-next { 0% { -ms-transform:translateX(0)translateY(0px); -webkit-transform:translateX(0)translateY(0px); -moz-transform:translateX(0)translateY(0px); transform:translateX(0)translateY(0px); opacity:1 } 80% { opacity:0.7 } 90% { opacity:0 } 100% { -ms-transform:translateX(0)translateY(40px); -webkit-transform:translateX(0)translateY(40px); -moz-transform:translateX(0)translateY(40px); transform:translateX(0)translateY(40px); opacity:0 } } @keyframes scroll-next { 0% { -ms-transform:translateX(0)translateY(0px); -webkit-transform:translateX(0)translateY(0px); -moz-transform:translateX(0)translateY(0px); transform:translateX(0)translateY(0px); opacity:1 } 80% { opacity:0.7 } 90% { opacity:0 } 100% { -ms-transform:translateX(0)translateY(40px); -webkit-transform:translateX(0)translateY(40px); -moz-transform:translateX(0)translateY(40px); transform:translateX(0)translateY(40px); opacity:0 } }