/* CSS Generated by Primer - primercss.com */ @charset "UTF-8"; /* -------------------------------- top -------------------------------- */ #header:not(.on) #headLogo { opacity: 0;visibility: hidden; } #topArea { position:relative; } #topArea #naviBtnArea .footBtn { left: 3%;position: absolute;text-align: center;top: 80%;width: 94%;z-index: 999; } #topArea #naviBtnArea .footBtn img { width: 92%; } #topArea #naviBtnArea #topNavi { left: 7%;position: absolute;top: 60%;z-index: 999; } #topArea #naviBtnArea #topNavi li { float: left;margin-right: 3%;margin-bottom: 3%;width: 45%;line-height: 45%; } #topArea #naviBtnArea #topNavi li img { width:100%; } .infArea .conTitle img { width: 80%; } .infArea .infBox { background: none repeat scroll 0 0 #e3dad2;border-radius: 3px;height: 360px;margin: 5px 0 20px;overflow: auto;padding: 15px 10px; } .infArea .infBox ul li { border-bottom:1px solid #fff;padding: 20px 15px; } .infArea .infBox ul li:first-child { padding: 10px 15px 20px; } .infArea .infBox ul li p, .infArea .infBox ul li a { font-family: "ヒラギノ角ゴ Pro W3","メイリオ","ＭＳ Ｐゴシック",sans-serif;color: #000; } .infArea .infBox ul li .headline a { color: #47362e;font-size: 15px;font-weight: bolder;text-decoration:underline; } .infArea .infBox ul li .headline a:link { color: #47362e; } .infArea .infBox ul li .headline a:hover { text-decoration:none; } .infArea .infBox ul li p.date { margin: 7px 0 2px; } .bnrArea ul li { margin: 0 0 15px;text-align: center; } /**/ .scrollInformation { position: absolute;bottom: 0px;width: 100%;text-align: center;color: #fff;letter-spacing: 0.15em; } .scrollInformation p { margin-bottom: 5px; } .scrollInformation span { position: relative;height: 70px;display: inline-block;overflow: hidden; } .scrollInformation span:before, .scrollInformation span:after { content: "";display: inline-block;background: #fff;width: 2px; } .scrollInformation span:before { height: inherit;opacity: 0.3; } .scrollInformation span:after { height: 30px;position: absolute;top: -30px;left: 0;animation: moveY 1.5s ease-in-out 0s infinite normal;-ms-animation: moveY 1.5s ease-in-out 0s infinite normal;-webkit-animation: moveY 1.5s ease-in-out 0s infinite normal;-moz-animation: moveY 1.5s ease-in-out 0s infinite normal; } @-ms-keyframes moveY { 0% {top:-30px;} 100% {top:100px;} } @-webkit-keyframes moveY { 0% {top:-30px;} 100% {top:100px;} } @-moz-keyframes moveY { 0% {top:-30px;} 100% {top:100px;} } /**/ #topMovie { margin-bottom: 100px;overflow: hidden;position: relative; } #topLogo { position: absolute;top: 30%;width: 100%;text-align: center;z-index: 50; } #topLogo img { width: 200px; } #video { position: absolute;left: 0;top: 0; } .pageTitle { font-size: 300%;margin: 0 auto 50px; } @media screen and (min-width: 768px) { #topLogo { top: 43%; } } /**/ #con02.boxOuter.wide { padding: 0;margin: 100px auto 0; } #con02.boxOuter .box .boxInner img { width: 525px; } #con02.boxOuter .box .boxInner .pageTitle { margin-top: 0px; } #con02.boxOuter .box .boxInner .txt { padding: 0 100px; } #con02.boxOuter .box .boxInner .txt p { color: #C2B5A6;line-height: 2.5;font-size: 110%;margin-bottom: 25px; } @media screen and (min-width: 768px) { .pageTitle { margin: 0 auto 50px; } #con02.boxOuter .box .boxInner { height: 900px;display: flex;justify-content: center;align-items: center; } } /**/ #con03.boxOuter .box .boxInner { background: url(./../images/wedding.jpg) no-repeat center center;height: 900px;position: relative;background-size: cover; } #con03.boxOuter .box .boxInner .txt { position: absolute;top: 15%;left: 20%;text-align: left; } #con03.boxOuter .box .boxInner .txt p { color: #3F483B; line-height: 2.5; margin-bottom: 35px; } #con03.boxOuter .box .boxInner .btnNormalOuter { justify-content: flex-start; } #con03.boxOuter .box .boxInner .btnNormalOuter .btnNormal { padding: 0; } /**/ #con04.boxOuter .box .boxInner { background: url(./../images/bg_new.jpg) no-repeat center center;position: relative;background-size: cover;padding: 100px 0; } #con04.boxOuter .box .boxInner .newsOuter { max-width: 800px;width: 100%;margin: 0 auto; background: #EFEFEF;padding: 35px 0 10px;box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.2);position: relative; } #con04.boxOuter .box .boxInner .newsOuter .pageTitle { margin: 0 auto 25px; } #con04.boxOuter .box .boxInner .newsOuter .news { padding: 0px 100px; } #con04.boxOuter .box .boxInner .newsOuter .news ul {} #con04.boxOuter .box .boxInner .newsOuter .news ul li { border-bottom: 1px solid #707070;padding-bottom: 10px;margin-bottom: 10px; } #con04.boxOuter .box .boxInner .newsOuter .news ul li:first-child { border-top: 1px solid #707070;padding-top: 10px; } #con04.boxOuter .box .boxInner .newsOuter .news ul li a { display: block; position: relative;text-decoration: none !important; } #con04.boxOuter .box .boxInner .newsOuter .news ul li a span { display: block;color:#3F483B;text-align: left; } #con04.boxOuter .box .boxInner .newsOuter .news ul li a span.title { margin-bottom: 5px;padding-right: 7em; } #con04.boxOuter .box .boxInner .newsOuter .news ul li a span.date { position: absolute; top: 0; right: 0; } #con04.boxOuter .box .boxInner .newsOuter .news ul li a span.txt {} #con04.boxOuter .box .boxInner .newsOuter::after { width: 0;height: 0;border-style: solid;border-width: 54px 54px 0 0;border-color: #202557 transparent transparent transparent;display: block;position: absolute;top: 0;left: 0;content: ""; } @media screen and (max-width: 767px) { #topMovie { margin-bottom: 50px; } .pageTitle { font-size: 240%;margin: 0 auto 30px; } .infiniteslide_wrap { margin: 30px auto 10px; } #con02.boxOuter.wide { margin: 60px auto 0; } #con02.boxOuter .box .boxInner .pageTitle { margin-top: 50px; } #con02.boxOuter .box .boxInner .txt { padding: 0 30px 40px; } #con03.boxOuter .box .boxInner { padding: 60px 30px 80px;height: auto; } #con04.boxOuter .box .boxInner { padding: 40px 20px; } #con04.boxOuter .box .boxInner .newsOuter .news { padding: 0px 30px; } } @media screen and (min-width: 768px) { #con03.boxOuter .box .boxInner { background-size: 190%; } } @media screen and (min-width: 900px) { #con03.boxOuter .box .boxInner { background-size: 160%; } } @media screen and (min-width: 1000px) { #con03.boxOuter .box .boxInner { background-size: 140%; } } @media screen and (min-width: 1200px) { #con03.boxOuter .box .boxInner { background-size: 120%; } } @media screen and (min-width: 1200px) { #con03.boxOuter .box .boxInner { background-size: 120%; } } @media screen and (min-width: 1400px) { #con03.boxOuter .box .boxInner { background-size: cover; } }