/* @font-face { font-family: "mplus"; src: url("/brand/lifestory/assets/font/mplus/mplus-1p-thin.woff") format("woff"), url("/brand/lifestory/assets/font/mplus/mplus-1p-thin.ttf") format("truetype"); font-weight: 200; } @font-face { font-family: "mplus"; src: url("/brand/lifestory/assets/font/mplus/mplus-1p-light.woff") format("woff"), url("/brand/lifestory/assets/font/mplus/mplus-1p-light.ttf") format("truetype"); font-weight: 300; } @font-face { font-family: "mplus"; src: url("/brand/lifestory/assets/font/mplus/mplus-1p-regular.woff") format("woff"), url("/brand/lifestory/assets/font/mplus/mplus-1p-regular.ttf") format("truetype"); font-weight: 400; } @font-face { font-family: "mplus"; src: url("/brand/lifestory/assets/font/mplus/mplus-1p-medium.woff") format("woff"), url("/brand/lifestory/assets/font/mplus/mplus-1p-medium.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: "mplus"; src: url("/brand/lifestory/assets/font/mplus/mplus-1p-bold.woff") format("woff"), url("/brand/lifestory/assets/font/mplus/mplus-1p-bold.ttf") format("truetype"); font-weight: 700; } */ @font-face { font-family: "hanazono"; src: url("/brand/lifestory/assets/font/hanazono/HanaMinA.woff") format("woff"), url("/brand/lifestory/assets/font/hanazono/HanaMinA.ttf") format("truetype"); font-weight: 400; } .hanazono {font-family: "hanazono", 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;} @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(/brand/lifestory/assets/font/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(/brand/lifestory/assets/font/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(/brand/lifestory/assets/font/iconfont/MaterialIcons-Regular.woff) format('woff'), url(/brand/lifestory/assets/font/iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /*inherit*/ line-height: 1; /*inherit*/ letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; text-rendering: optimizeLegibility; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } i.material-icons.home:before { content: "\e88a"; font-size: inherit; line-height: 1; vertical-align: -22%; margin-right: 5px; } i.material-icons.archive:before { content: "\e03b"; font-size: inherit; line-height: 1; vertical-align: -24%; margin-right: 5px; } i.material-icons.link:after { content: "\e315"; font-size: inherit; line-height: 1; vertical-align: -28%;} i.material-icons.totop:before { content: "\e25a"; font-size: inherit; line-height: 1; vertical-align: ; margin-right: 5px; } .rotate-270 { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .rev-scroll-btn span { position: absolute; display: block; top: 29%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; -webkit-animation: rev-ani-mouse 2.5s linear infinite; -moz-animation: rev-ani-mouse 2.5s linear infinite; animation: rev-ani-mouse 2.5s linear infinite; } .negativemargin_main { margin-top: -90px;} @media screen and (max-width:64em){ .negativemargin_main { margin-top: -60px;} } @media screen and (orientation: landscape) { /* 横向きの場合のスタイル */ .landscape { display: block !important; } .portrait { display: none !important; } } @media screen and (orientation: portrait) { /* 縦向きの場合のスタイル */ .landscape { display: none !important; } .portrait { display: block !important; } } @media only screen and (max-width: 600px){.hide-on-small-only,.hide-on-small-and-down{display:none !important}}@media only screen and (max-width: 992px){.hide-on-med-and-down{display:none !important}}@media only screen and (min-width: 601px){.hide-on-med-and-up{display:none !important}}@media only screen and (min-width: 600px) and (max-width: 992px){.hide-on-med-only{display:none !important}}@media only screen and (min-width: 993px){.hide-on-large-only{display:none !important}}@media only screen and (min-width: 993px){.show-on-large{display:block !important}}@media only screen and (min-width: 600px) and (max-width: 992px){.show-on-medium{display:block !important}}@media only screen and (max-width: 600px){.show-on-small{display:block !important}}@media only screen and (min-width: 601px){.show-on-medium-and-up{display:block !important}}@media only screen and (max-width: 992px){.show-on-medium-and-down{display:block !important}}@media only screen and (max-width: 600px){.center-on-small-only{text-align:center}} .container_wide { margin: 0 auto; max-width: 1440px; width: 100%; } .container .row { margin-left: auto; margin-right: auto; } .row { margin-left: auto; margin-right: auto; margin-bottom: 0; } .slider_limit { width: 100%; margin: 0 auto;} .slider_negative_m {margin-top: -60px !important;} @media screen and (min-width:47.938em){ .slider_limit { max-width: 70%; margin: 0 auto;} .slider_negative_m {margin-top: -120px !important;} } .containerInner { height: 100%; position: relative; overflow: hidden; } .containerInner.sec02-height { height: 1850px; } .containerInner.sec03-height { height: 1850px; } .containerInner.sec04-height { height: 1800px; } .containerInner.sec05-height { height: 1550px; } .containerInner.sec-end-height { height: 100%; } .sec-pr-bg-height { height: 100%; } .sec-pr-height { height: 100%; } .sec-poem-height { height: 700px; } .sec-profile-height { height: 100%; } @media only screen and (min-width: 340px) { .containerInner.sec02-height { height: 1900px; } .containerInner.sec03-height { height: 1900px; } .containerInner.sec04-height { height: 1850px; } .containerInner.sec05-height { height: 1600px; } } @media only screen and (min-width: 370px) { .containerInner.sec02-height { height: 1900px; } .containerInner.sec03-height { height: 1900px; } .containerInner.sec04-height { height: 1850px; } .containerInner.sec05-height { height: 1600px; } } @media only screen and (min-width: 400px) { .containerInner.sec02-height { height: 1950px; } .containerInner.sec03-height { height: 1970px; } .containerInner.sec04-height { height: 1950px; } .containerInner.sec05-height { height: 1680px; } } @media only screen and (min-width: 430px) { .containerInner.sec02-height { height: 2180px; } .containerInner.sec03-height { height: 2200px; } .containerInner.sec04-height { height: 2000px; } .containerInner.sec05-height { height: 1850px; } } @media only screen and (min-width: 500px) { .containerInner.sec02-height { height: 2650px; } .containerInner.sec03-height { height: 2450px; } .containerInner.sec04-height { height: 2400px; } .containerInner.sec05-height { height: 2050px; } } @media only screen and (min-width: 580px) { .containerInner.sec02-height { height: 2650px; } .containerInner.sec03-height { height: 2500px; } .containerInner.sec04-height { height: 2450px; } .containerInner.sec05-height { height: 2100px; } } @media only screen and (min-width: 601px) { .containerInner.sec02-height { height: 2700px; } .containerInner.sec03-height { height: 2600px; } .containerInner.sec04-height { height: 2800px; } .containerInner.sec05-height { height: 2100px; } } @media only screen and (min-width: 760px) { .containerInner.sec02-height { height: 2800px; } .containerInner.sec03-height { height: 2600px; } .containerInner.sec04-height { height: 2800px; } .containerInner.sec05-height { height: 2100px; } } @media only screen and (min-width: 800px) { .containerInner.sec02-height { height: 2800px; } .containerInner.sec03-height { height: 2650px; } .containerInner.sec04-height { height: 2850px; } .containerInner.sec05-height { height: 2100px; } } @media only screen and (min-width: 993px) { .containerInner.sec02-height { height: 3850px; } .containerInner.sec03-height { height: 2100px; } .containerInner.sec04-height { height: 2100px; } .containerInner.sec05-height { height: 2100px; } } @media only screen and (min-width: 1024px) { .containerInner.sec02-height { height: 3000px; } .containerInner.sec03-height { height: 2950px; } .containerInner.sec04-height { height: 2900px; } .containerInner.sec05-height { height: 2300px; } } @media only screen and (min-width: 1100px) { .containerInner.sec02-height { height: 3600px; } .containerInner.sec03-height { height: 3400px; } .containerInner.sec04-height { height: 3400px; } .containerInner.sec05-height { height: 2800px; } } @media only screen and (min-width: 1200px) { .containerInner.sec02-height { height: 3600px; } .containerInner.sec03-height { height: 3400px; } .containerInner.sec04-height { height: 3400px; } .containerInner.sec05-height { height: 2800px; } } @media only screen and (min-width: 1300px) { .containerInner.sec02-height { height: 3600px; } .containerInner.sec03-height { height: 3400px; } .containerInner.sec04-height { height: 3400px; } .containerInner.sec05-height { height: 2800px; } } @media only screen and (min-width: 1400px) { .containerInner.sec02-height { height: 3600px; } .containerInner.sec03-height { height: 3400px; } .containerInner.sec04-height { height: 3400px; } .containerInner.sec05-height { height: 2800px; } } video { position: fixed; top: 0; right: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1; } .pin { position: fixed; top: 0; left: 0; width: 100%; display: none; } .shadow {text-shadow: 1px 2px 1px rgba(0,0,0,0.85);} .shadow2 {text-shadow: 3px 2px 3px rgba(0,0,0,0.95);} .mobilesafari_bg001::before{ content: ""; display: block; position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100vh; background:url('/brand/lifestory/assets/img/42/bg_001.jpg') center/cover no-repeat; -webkit-background-size:cover; } .mobilesafari_bg002::before{ content: ""; display: block; position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: 100vh; background:url('/brand/lifestory/assets/img/42/bg_002.jpg') center/cover no-repeat; -webkit-background-size:cover; } .mobilesafari_bg003::before{ content: ""; display: block; position: fixed; top: 0; left: 0; z-index: 3; width: 100%; height: 100vh; background:url('/brand/lifestory/assets/img/42/bg_003.jpg') center/cover no-repeat; -webkit-background-size:cover; } .mobilesafari_bg004::before{ content: ""; display: block; position: fixed; top: 0; left: 0; z-index: 4; width: 100%; height: 100vh; background:url('/brand/lifestory/assets/img/42/bg_004.jpg') center/cover no-repeat; -webkit-background-size:cover; } /*** #section02 ***/ #section02 .shadow {text-shadow: 1px 2px 1px rgba(0,0,0,0.5);} #section02 .pic { position: absolute; left: 5%; width: 90%; } @media only screen and (min-width: 400px) { #section02 .pic { left: 5%; width: 90%; } } @media only screen and (min-width: 420px) { #section02 .pic { left: 10%; width: 80%; } } @media only screen and (min-width: 500px) { #section02 .pic { left: 10%; width: 80%; } } @media only screen and (min-width: 601px) { #section02 .pic { left: 15%; width: 70%; } } @media only screen and (min-width: 993px) { #section02 .pic { left: 20%; width: 60%; } } @media only screen and (min-width: 1025px) { #section02 .pic { left: 20%; width: 60%; } } #section02 .title { position: absolute; width: 90%; text-align: left; font-size: 1.2em; font-family: "hanazono", 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif; } @media only screen and (min-width: 400px) { #section02 .title { width: 90%; font-size: 1.3em; } } @media only screen and (min-width: 420px) { #section02 .title { width: 80%; font-size: 1.4em; } } @media only screen and (min-width: 500px) { #section02 .title { width: 80%; font-size: 1.4em; } } @media only screen and (min-width: 601px) { #section02 .title { width: 10%; font-size: 1.4em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding-right: .4em;} } @media only screen and (min-width: 993px) { #section02 .title { width: 10%; font-size: 1.6em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } } @media only screen and (min-width: 1025px) { #section02 .title { width: 10%; font-size: 2em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } } #section02 .title01 { top: 70px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title01 { top: 70px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title01 { top: 90px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title01 { top: 80px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title01 { top: 240px; left: 70%; color: #fff; } } @media only screen and (min-width: 993px) { #section02 .title01 { top: 250px; left: 66%; } } @media only screen and (min-width: 1025px) { #section02 .title01 { top: 270px; left: 66%; } } #section02 .pic01 { top: 130px;} @media only screen and (min-width: 400px) { #section02 .pic01 { top: 130px; } } @media only screen and (min-width: 420px) { #section02 .pic01 { top: 150px; } } @media only screen and (min-width: 500px) { #section02 .pic01 { top: 150px; } } @media only screen and (min-width: 601px) { #section02 .pic01 { top: 150px; } } @media only screen and (min-width: 993px) { #section02 .pic01 { top: 150px; } } @media only screen and (min-width: 1025px) { #section02 .pic01 { top: 150px; } } #section02 .title02 { top: 420px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title02 { top: 430px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title02 { top: 480px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title02 { top: 575px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title02 { top: 680px; left: 65%; } } @media only screen and (min-width: 993px) { #section02 .title02 { top: 730px; left: 65%; } } @media only screen and (min-width: 1025px) { #section02 .title02 { top: 840px; left: 64%; } } #section02 .pic02 { top: 480px; } @media only screen and (min-width: 400px) { #section02 .pic02 { top: 500px; } } @media only screen and (min-width: 420px) { #section02 .pic02 { top: 550px; } } @media only screen and (min-width: 500px) { #section02 .pic02 { top: 650px; } } @media only screen and (min-width: 601px) { #section02 .pic02 { top: 650px; } } @media only screen and (min-width: 993px) { #section02 .pic02 { top: 700px; } } @media only screen and (min-width: 1025px) { #section02 .pic02 { top: 800px; } } #section02 .title03 { top: 770px; left: 10%; color: #fff; } @media only screen and (min-width: 400px) { #section02 .title03 { top: 790px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title03 { top: 885px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title03 { top: 1080px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title03 { top: 1240px; left: 70%; color: #fff; } } @media only screen and (min-width: 993px) { #section02 .title03 { top: 1330px; left: 64%; } } @media only screen and (min-width: 1025px) { #section02 .title03 { top: 1530px; left: 66%; } } #section02 .pic03 { top: 830px; } @media only screen and (min-width: 400px) { #section02 .pic03 { top: 850px; } } @media only screen and (min-width: 420px) { #section02 .pic03 { top: 950px; } } @media only screen and (min-width: 500px) { #section02 .pic03 { top: 1150px; } } @media only screen and (min-width: 601px) { #section02 .pic03 { top: 1150px; } } @media only screen and (min-width: 993px) { #section02 .pic03 { top: 1250px; } } @media only screen and (min-width: 1025px) { #section02 .pic03 { top: 1450px; } } #section02 .title04 { top: 1095px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title04 { top: 1110px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title04 { top: 1260px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title04 { top: 1550px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title04 { top: 1670px; left: 20%; } } @media only screen and (min-width: 993px) { #section02 .title04 { top: 1820px; left: 25%; } } @media only screen and (min-width: 1025px) { #section02 .title04 { top: 2130px; left: 25%; } } #section02 .pic04 { top: 1180px; } @media only screen and (min-width: 400px) { #section02 .pic04 { top: 1200px; } } @media only screen and (min-width: 420px) { #section02 .pic04 { top: 1350px; } } @media only screen and (min-width: 500px) { #section02 .pic04 { top: 1650px; } } @media only screen and (min-width: 601px) { #section02 .pic04 { top: 1650px; } } @media only screen and (min-width: 993px) { #section02 .pic04 { top: 1800px; } } @media only screen and (min-width: 1025px) { #section02 .pic04 { top: 2100px; } } #section02 .title05 { top: 1470px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title05 { top: 1490px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title05 { top: 1680px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title05 { top: 2080px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title05 { top: 2190px; left: 69%; } } @media only screen and (min-width: 993px) { #section02 .title05 { top: 2380px; left: 65%; } } @media only screen and (min-width: 1025px) { #section02 .title05 { top: 2790px; left: 65%; } } #section02 .pic05 { top: 1530px; } @media only screen and (min-width: 400px) { #section02 .pic05 { top: 1550px; } } @media only screen and (min-width: 420px) { #section02 .pic05 { top: 1750px; } } @media only screen and (min-width: 500px) { #section02 .pic05 { top: 2150px; } } @media only screen and (min-width: 601px) { #section02 .pic05 { top: 2150px; } } @media only screen and (min-width: 993px) { #section02 .pic05 { top: 2350px; } } @media only screen and (min-width: 1025px) { #section02 .pic05 { top: 2750px; } } /* #section02 .title06 { top: 1810px; left:10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title06 { top: 1830px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title06 { top: 2070px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title06 { top: 2570px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title06 { top: 2700px; left: 27%; } } @media only screen and (min-width: 993px) { #section02 .title06 { top: 2950px; left: 28%; } } @media only screen and (min-width: 1025px) { #section02 .title06 { top: 3450px; left: 28%; } } #section02 .pic06 { top: 1880px; } @media only screen and (min-width: 400px) { #section02 .pic06 { top: 1900px; } } @media only screen and (min-width: 420px) { #section02 .pic06 { top: 2150px; } } @media only screen and (min-width: 500px) { #section02 .pic06 { top: 2650px; } } @media only screen and (min-width: 601px) { #section02 .pic06 { top: 2650px; } } @media only screen and (min-width: 993px) { #section02 .pic06 { top: 2900px; } } @media only screen and (min-width: 1025px) { #section02 .pic06 { top: 3400px; } } #section02 .title07 { top: 2160px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title07 { top: 2180px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title07 { top: 2470px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title07 { top: 3070px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title07 { top: 3200px; left: 68%; } } @media only screen and (min-width: 993px) { #section02 .title07 { top: 3490px; left: 66%; } } @media only screen and (min-width: 1025px) { #section02 .title07 { top: 4100px; left: 67%; } } #section02 .pic07 { top: 2230px; } @media only screen and (min-width: 400px) { #section02 .pic07 { top: 2250px; } } @media only screen and (min-width: 420px) { #section02 .pic07 { top: 2550px; } } @media only screen and (min-width: 500px) { #section02 .pic07 { top: 3150px; } } @media only screen and (min-width: 601px) { #section02 .pic07 { top: 3150px; } } @media only screen and (min-width: 993px) { #section02 .pic07 { top: 3450px; } } @media only screen and (min-width: 1025px) { #section02 .pic07 { top: 4050px; } } #section02 .title08 { top: 2495px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title08 { top: 2505px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title08 { top: 2840px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title08 { top: 3540px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title08 { top: 3700px; left: 65%; color: #000; } } @media only screen and (min-width: 993px) { #section02 .title08 { top: 4060px; left: 62%; } } @media only screen and (min-width: 1025px) { #section02 .title08 { top: 4740px; left: 62%; } } #section02 .pic08 { top: 2580px; } @media only screen and (min-width: 400px) { #section02 .pic08 { top: 2600px; } } @media only screen and (min-width: 420px) { #section02 .pic08 { top: 2950px; } } @media only screen and (min-width: 500px) { #section02 .pic08 { top: 3650px; } } @media only screen and (min-width: 601px) { #section02 .pic08 { top: 3650px; } } @media only screen and (min-width: 993px) { #section02 .pic08 { top: 4000px; } } @media only screen and (min-width: 1025px) { #section02 .pic08 { top: 4650px; } } #section02 .pic09 { top: 2900px; } @media only screen and (min-width: 400px) { #section02 .pic09 { top: 2950px; } } @media only screen and (min-width: 420px) { #section02 .pic09 { top: 3350px; } } @media only screen and (min-width: 500px) { #section02 .pic09 { top: 4100px; } } @media only screen and (min-width: 601px) { #section02 .pic09 { top: 4150px; } } @media only screen and (min-width: 993px) { #section02 .pic09 { top: 4550px; } } @media only screen and (min-width: 1025px) { #section02 .pic09 { top: 5250px; } } */ /*** #section03 ***/ #section03 .shadow {text-shadow: 1px 2px 1px rgba(0,0,0,0.5);} #section03 .pic { position: absolute; left: 5%; width: 90%; } @media only screen and (min-width: 400px) { #section03 .pic { left: 5%; width: 90%; } } @media only screen and (min-width: 420px) { #section03 .pic { left: 10%; width: 80%; } } @media only screen and (min-width: 500px) { #section03 .pic { left: 10%; width: 80%; } } @media only screen and (min-width: 601px) { #section03 .pic { left: 15%; width: 70%; } } @media only screen and (min-width: 993px) { #section03 .pic { left: 20%; width: 60%; } } @media only screen and (min-width: 1025px) { #section03 .pic { left: 20%; width: 60%; } } #section03 .title { position: absolute; width: 90%; text-align: left; font-size: 1.2em; font-family: "hanazono", 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif; } @media only screen and (min-width: 400px) { #section03 .title { width: 90%; font-size: 1.3em; } } @media only screen and (min-width: 420px) { #section03 .title { width: 80%; font-size: 1.4em; } } @media only screen and (min-width: 500px) { #section03 .title { width: 80%; font-size: 1.4em; } } @media only screen and (min-width: 601px) { #section03 .title { width: 10%; font-size: 1.4em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding-right: .4em; } } @media only screen and (min-width: 993px) { #section03 .title { width: 10%; font-size: 1.6em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } } @media only screen and (min-width: 1025px) { #section03 .title { width: 10%; font-size: 2em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } } #section03 .title01 { top: 75px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section03 .title01 { top: 90px; left: 15%; } } @media only screen and (min-width: 420px) { #section03 .title01 { top: 90px; left: 20%; } } @media only screen and (min-width: 500px) { #section03 .title01 { top: 80px; left: 20%; } } @media only screen and (min-width: 601px) { #section03 .title01 { top: 30px; left: 65%; } } @media only screen and (min-width: 993px) { #section03 .title01 { top: 30px; left: 65%; } } @media only screen and (min-width: 1025px) { #section03 .title01 { top: 30px; left: 65%; } } #section03 .pic01 { top: 110px; } @media only screen and (min-width: 400px) { #section03 .pic01 { top: 130px; } } @media only screen and (min-width: 420px) { #section03 .pic01 { top: 130px; } } @media only screen and (min-width: 500px) { #section03 .pic01 { top: 130px; } } @media only screen and (min-width: 601px) { #section03 .pic01 { top: 0; } } @media only screen and (min-width: 993px) { #section03 .pic01 { top: 0; } } @media only screen and (min-width: 1025px) { #section03 .pic01 { top: 0; } } #section03 .title02 { top: 400px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section03 .title02 { top: 430px; left: 15%; } } @media only screen and (min-width: 420px) { #section03 .title02 { top: 480px; left: 20%; } } @media only screen and (min-width: 500px) { #section03 .title02 { top: 520px; left: 20%; } } @media only screen and (min-width: 601px) { #section03 .title02 { top: 540px; left: 30%; color: #fff;} } @media only screen and (min-width: 993px) { #section03 .title02 { top: 590px; left: 31%; } } @media only screen and (min-width: 1025px) { #section03 .title02 { top: 700px; left: 31%; } } #section03 .pic02 { top: 460px; } @media only screen and (min-width: 400px) { #section03 .pic02 { top: 500px; } } @media only screen and (min-width: 420px) { #section03 .pic02 { top: 550px; } } @media only screen and (min-width: 500px) { #section03 .pic02 { top: 600px; } } @media only screen and (min-width: 601px) { #section03 .pic02 { top: 500px; } } @media only screen and (min-width: 993px) { #section03 .pic02 { top: 550px; } } @media only screen and (min-width: 1025px) { #section03 .pic02 { top: 650px; } } /* #section03 .title03 { top: 770px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section03 .title03 { top: 790px; left: 15%; } } @media only screen and (min-width: 420px) { #section03 .title03 { top: 890px; left: 20%; } } @media only screen and (min-width: 500px) { #section03 .title03 { top: 990px; left: 20%; } } @media only screen and (min-width: 601px) { #section03 .title03 { top: 1060px; left: 68%; } } @media only screen and (min-width: 993px) { #section03 .title03 { top: 1150px; left: 67%; } } @media only screen and (min-width: 1025px) { #section03 .title03 { top: 1380px; left: 67%; } } */ #section03 .pic03 { top: 820px; } @media only screen and (min-width: 400px) { #section03 .pic03 { top: 870px; } } @media only screen and (min-width: 420px) { #section03 .pic03 { top: 970px; } } @media only screen and (min-width: 500px) { #section03 .pic03 { top: 1070px; } } @media only screen and (min-width: 601px) { #section03 .pic03 { top: 1000px; } } @media only screen and (min-width: 993px) { #section03 .pic03 { top: 1100px; } } @media only screen and (min-width: 1025px) { #section03 .pic03 { top: 1300px; } } #section03 .title04 { top: 1110px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section03 .title04 { top: 1160px; left: 15%; } } @media only screen and (min-width: 420px) { #section03 .title04 { top: 1300px; left: 20%; } } @media only screen and (min-width: 500px) { #section03 .title04 { top: 1460px; left: 20%; } } @media only screen and (min-width: 601px) { #section03 .title04 { top: 1580px; left: 65%; } } @media only screen and (min-width: 993px) { #section03 .title04 { top: 1730px; left: 62%; } } @media only screen and (min-width: 1025px) { #section03 .title04 { top: 2050px; left: 60%; } } #section03 .pic04 { top: 1170px; } @media only screen and (min-width: 400px) { #section03 .pic04 { top: 1230px; } } @media only screen and (min-width: 420px) { #section03 .pic04 { top: 1370px; } } @media only screen and (min-width: 500px) { #section03 .pic04 { top: 1530px; } } @media only screen and (min-width: 601px) { #section03 .pic04 { top: 1500px; } } @media only screen and (min-width: 993px) { #section03 .pic04 { top: 1650px; } } @media only screen and (min-width: 1025px) { #section03 .pic04 { top: 1950px; } } #section03 .title05 { top: 1460px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section03 .title05 { top: 1510px; left: 15%; } } @media only screen and (min-width: 420px) { #section03 .title05 { top: 1680px; left: 20%; } } @media only screen and (min-width: 500px) { #section03 .title05 { top: 1910px; left: 20%; } } @media only screen and (min-width: 601px) { #section03 .title05 { top: 2050px; left: 41%; } } @media only screen and (min-width: 993px) { #section03 .title05 { top: 2260px; left: 41%; } } @media only screen and (min-width: 1025px) { #section03 .title05 { top: 2640px; left: 41%; } } #section03 .pic05 { top: 1520px; } @media only screen and (min-width: 400px) { #section03 .pic05 { top: 1580px; } } @media only screen and (min-width: 420px) { #section03 .pic05 { top: 1750px; } } @media only screen and (min-width: 500px) { #section03 .pic05 { top: 1980px; } } @media only screen and (min-width: 601px) { #section03 .pic05 { top: 2000px; } } @media only screen and (min-width: 993px) { #section03 .pic05 { top: 2200px; } } @media only screen and (min-width: 1025px) { #section03 .pic05 { top: 2600px; } } /*** #section04 ***/ #section04 .shadow {text-shadow: 1px 2px 1px rgba(0,0,0,0.5);} #section04 .pic { position: absolute; left: 5%; width: 90%; } @media only screen and (min-width: 400px) { #section04 .pic { left: 5%; width: 90%; } } @media only screen and (min-width: 420px) { #section04 .pic { left: 10%; width: 80%; } } @media only screen and (min-width: 500px) { #section04 .pic { left: 10%; width: 80%; } } @media only screen and (min-width: 601px) { #section04 .pic { left: 15%; width: 70%; } } @media only screen and (min-width: 993px) { #section04 .pic { left: 20%; width: 60%; } } @media only screen and (min-width: 1025px) { #section04 .pic { left: 20%; width: 60%; } } #section04 .title { position: absolute; width: 90%; text-align: left; font-size: 1.2em; font-family: "hanazono", 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif; } @media only screen and (min-width: 400px) { #section04 .title { width: 90%; font-size: 1.3em; } } @media only screen and (min-width: 420px) { #section04 .title { width: 80%; font-size: 1.4em; } } @media only screen and (min-width: 500px) { #section04 .title { width: 80%; font-size: 1.4em; } } @media only screen and (min-width: 601px) { #section04 .title { width: 10%; font-size: 1.4em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding-right: .4em; } } @media only screen and (min-width: 993px) { #section04 .title { width: 10%; font-size: 1.6em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } } @media only screen and (min-width: 1025px) { #section04 .title { width: 10%; font-size: 2em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } } #section04 .title01 { top: 40px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section04 .title01 { top: 50px; left: 15%; } } @media only screen and (min-width: 420px) { #section04 .title01 { top: 50px; left: 20%; } } @media only screen and (min-width: 500px) { #section04 .title01 { top: 40px; left: 20%; } } @media only screen and (min-width: 601px) { #section04 .title01 { top: 60px; left: 68%; } } @media only screen and (min-width: 993px) { #section04 .title01 { top: 50px; left: 65%; } } @media only screen and (min-width: 1025px) { #section04 .title01 { top: 60px; left: 64%; } } #section04 .pic01 { top: 100px; } @media only screen and (min-width: 400px) { #section04 .pic01 { top: 110px; } } @media only screen and (min-width: 420px) { #section04 .pic01 { top: 110px; } } @media only screen and (min-width: 500px) { #section04 .pic01 { top: 110px; } } @media only screen and (min-width: 601px) { #section04 .pic01 { top: 0; } } @media only screen and (min-width: 993px) { #section04 .pic01 { top: 0; } } @media only screen and (min-width: 1025px) { #section04 .pic01 { top: 0; } } #section04 .title02 { top: 380px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section04 .title02 { top: 390px; left: 15%; } } @media only screen and (min-width: 420px) { #section04 .title02 { top: 420px; left: 20%; } } @media only screen and (min-width: 500px) { #section04 .title02 { top: 480px; left: 20%; } } @media only screen and (min-width: 601px) { #section04 .title02 { top: 580px; left: 18%; } } @media only screen and (min-width: 993px) { #section04 .title02 { top: 580px; left: 20%; } } @media only screen and (min-width: 1025px) { #section04 .title02 { top: 680px; left: 20%; } } #section04 .pic02 { top: 440px; } @media only screen and (min-width: 400px) { #section04 .pic02 { top: 450px; } } @media only screen and (min-width: 420px) { #section04 .pic02 { top: 480px; } } @media only screen and (min-width: 500px) { #section04 .pic02 { top: 550px; } } @media only screen and (min-width: 601px) { #section04 .pic02 { top: 550px; } } @media only screen and (min-width: 993px) { #section04 .pic02 { top: 550px; } } @media only screen and (min-width: 1025px) { #section04 .pic02 { top: 650px; } } #section04 .title03 { top: 700px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section04 .title03 { top: 715px; left: 15%; } } @media only screen and (min-width: 420px) { #section04 .title03 { top: 760px; left: 20%; } } @media only screen and (min-width: 500px) { #section04 .title03 { top: 900px; left: 20%; } } @media only screen and (min-width: 601px) { #section04 .title03 { top: 1120px; left: 64%; } } @media only screen and (min-width: 993px) { #section04 .title03 { top: 1120px; left: 61%; } } @media only screen and (min-width: 1025px) { #section04 .title03 { top: 1330px; left: 61%; } } #section04 .pic03 { top: 780px; } @media only screen and (min-width: 400px) { #section04 .pic03 { top: 800px; } } @media only screen and (min-width: 420px) { #section04 .pic03 { top: 850px; } } @media only screen and (min-width: 500px) { #section04 .pic03 { top: 1000px; } } @media only screen and (min-width: 601px) { #section04 .pic03 { top: 1100px; } } @media only screen and (min-width: 993px) { #section04 .pic03 { top: 1100px; } } @media only screen and (min-width: 1025px) { #section04 .pic03 { top: 1300px; } } #section04 .title04 { top: 1060px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section04 .title04 { top: 1120px; left: 15%; } } @media only screen and (min-width: 420px) { #section04 .title04 { top: 1180px; left: 20%; } } @media only screen and (min-width: 500px) { #section04 .title04 { top: 1390px; left: 20%; } } @media only screen and (min-width: 601px) { #section04 .title04 { top: 1700px; left: 20%; } } @media only screen and (min-width: 993px) { #section04 .title04 { top: 1760px; left: 25%; } } @media only screen and (min-width: 1025px) { #section04 .title04 { top: 2050px; left: 25%; } } #section04 .pic04 { top: 1120px; } @media only screen and (min-width: 400px) { #section04 .pic04 { top: 1180px; } } @media only screen and (min-width: 420px) { #section04 .pic04 { top: 1240px; } } @media only screen and (min-width: 500px) { #section04 .pic04 { top: 1460px; } } @media only screen and (min-width: 601px) { #section04 .pic04 { top: 1650px; } } @media only screen and (min-width: 993px) { #section04 .pic04 { top: 1650px; } } @media only screen and (min-width: 1025px) { #section04 .pic04 { top: 1950px; } } #section04 .pic05 { top: 1450px; } @media only screen and (min-width: 400px) { #section04 .pic05 { top: 1550px; } } @media only screen and (min-width: 420px) { #section04 .pic05 { top: 1600px; } } @media only screen and (min-width: 500px) { #section04 .pic05 { top: 1900px; } } @media only screen and (min-width: 601px) { #section04 .pic05 { top: 2200px; } } @media only screen and (min-width: 993px) { #section04 .pic05 { top: 2200px; } } @media only screen and (min-width: 1025px) { #section04 .pic05 { top: 2600px; } } /*** #section05 ***/ #section05 .shadow {text-shadow: 1px 2px 1px rgba(0,0,0,0.5);} #section05 .pic { position: absolute; left: 5%; width: 90%; } @media only screen and (min-width: 400px) { #section05 .pic { left: 5%; width: 90%; } } @media only screen and (min-width: 420px) { #section05 .pic { left: 10%; width: 80%; } } @media only screen and (min-width: 500px) { #section05 .pic { left: 10%; width: 80%; } } @media only screen and (min-width: 601px) { #section05 .pic { left: 15%; width: 70%; } } @media only screen and (min-width: 993px) { #section05 .pic { left: 20%; width: 60%; } } @media only screen and (min-width: 1025px) { #section05 .pic { left: 20%; width: 60%; } } #section05 .title { position: absolute; width: 90%; text-align: left; font-size: 1.2em; font-family: "hanazono", 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif; } @media only screen and (min-width: 400px) { #section05 .title { width: 90%; font-size: 1.3em; } } @media only screen and (min-width: 420px) { #section05 .title { width: 80%; font-size: 1.4em; } } @media only screen and (min-width: 500px) { #section05 .title { width: 80%; font-size: 1.4em; } } @media only screen and (min-width: 601px) { #section05 .title { width: 10%; font-size: 1.4em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding-right: .4em; } } @media only screen and (min-width: 993px) { #section05 .title { width: 10%; font-size: 1.6em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } } @media only screen and (min-width: 1025px) { #section05 .title { width: 10%; font-size: 2em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } } #section05 .title01 { top: 50px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section05 .title01 { top: 60px; left: 15%; } } @media only screen and (min-width: 420px) { #section05 .title01 { top: 60px; left: 20%; } } @media only screen and (min-width: 500px) { #section05 .title01 { top: 60px; left: 20%; } } @media only screen and (min-width: 601px) { #section05 .title01 { top: 30px; left: 20%; } } @media only screen and (min-width: 993px) { #section05 .title01 { top: 30px; left: 20%; } } @media only screen and (min-width: 1025px) { #section05 .title01 { top: 30px; left: 21%; } } #section05 .pic01 { top: 110px; } @media only screen and (min-width: 400px) { #section05 .pic01 { top: 130px; } } @media only screen and (min-width: 420px) { #section05 .pic01 { top: 130px; } } @media only screen and (min-width: 500px) { #section05 .pic01 { top: 130px; } } @media only screen and (min-width: 601px) { #section05 .pic01 { top: 0; } } @media only screen and (min-width: 993px) { #section05 .pic01 { top: 0; } } @media only screen and (min-width: 1025px) { #section05 .pic01 { top: 0; } } #section05 .title02 { top: 410px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section05 .title02 { top: 430px; left: 15%; } } @media only screen and (min-width: 420px) { #section05 .title02 { top: 480px; left: 20%; } } @media only screen and (min-width: 500px) { #section05 .title02 { top: 530px; left: 20%; } } @media only screen and (min-width: 601px) { #section05 .title02 { top: 530px; left: 70%; color: #fff;} } @media only screen and (min-width: 993px) { #section05 .title02 { top: 580px; left: 66%; } } @media only screen and (min-width: 1025px) { #section05 .title02 { top: 680px; left: 64%; } } #section05 .pic02 { top: 470px; } @media only screen and (min-width: 400px) { #section05 .pic02 { top: 500px; } } @media only screen and (min-width: 420px) { #section05 .pic02 { top: 550px; } } @media only screen and (min-width: 500px) { #section05 .pic02 { top: 600px; } } @media only screen and (min-width: 601px) { #section05 .pic02 { top: 500px; } } @media only screen and (min-width: 993px) { #section05 .pic02 { top: 550px; } } @media only screen and (min-width: 1025px) { #section05 .pic02 { top: 650px; } } #section05 .title03 { top: 780px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section05 .title03 { top: 800px; left: 15%; } } @media only screen and (min-width: 420px) { #section05 .title03 { top: 900px; left: 20%; } } @media only screen and (min-width: 500px) { #section05 .title03 { top: 1000px; left: 20%; } } @media only screen and (min-width: 601px) { #section05 .title03 { top: 1040px; left: 68%; } } @media only screen and (min-width: 993px) { #section05 .title03 { top: 1140px; left: 66%; } } @media only screen and (min-width: 1025px) { #section05 .title03 { top: 1350px; left: 64%; } } #section05 .pic03 { top: 840px; } @media only screen and (min-width: 400px) { #section05 .pic03 { top: 870px; } } @media only screen and (min-width: 420px) { #section05 .pic03 { top: 970px; } } @media only screen and (min-width: 500px) { #section05 .pic03 { top: 1070px; } } @media only screen and (min-width: 601px) { #section05 .pic03 { top: 1000px; } } @media only screen and (min-width: 993px) { #section05 .pic03 { top: 1100px; } } @media only screen and (min-width: 1025px) { #section05 .pic03 { top: 1300px; } } /* #section05 .title04 { top: 1110px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section05 .title04 { top: 1130px; left: 15%; } } @media only screen and (min-width: 420px) { #section05 .title04 { top: 1270px; left: 20%; } } @media only screen and (min-width: 500px) { #section05 .title04 { top: 1570px; left: 20%; } } @media only screen and (min-width: 601px) { #section05 .title04 { top: 1700px; left: 20%; } } @media only screen and (min-width: 993px) { #section05 .title04 { top: 1880px; left: 25%; } } @media only screen and (min-width: 1025px) { #section05 .title04 { top: 2050px; left: 25%; } } */ #section05 .pic04 { top: 1180px; } @media only screen and (min-width: 400px) { #section05 .pic04 { top: 1230px; } } @media only screen and (min-width: 420px) { #section05 .pic04 { top: 1370px; } } @media only screen and (min-width: 500px) { #section05 .pic04 { top: 1500px; } } @media only screen and (min-width: 601px) { #section05 .pic04 { top: 1500px; } } @media only screen and (min-width: 993px) { #section05 .pic04 { top: 1650px; } } @media only screen and (min-width: 1025px) { #section05 .pic04 { top: 1950px; } } /*** #section-pr ** #section-pr .sec_pr_icon { position: absolute; top: 30px; left: 43%; width: 14%; } @media only screen and (min-width: 400px) { #section-pr .sec_pr_icon { top: 30px; left: 45%; width: 10%;} } @media only screen and (min-width: 601px) { #section-pr .sec_pr_icon {top: 30px; left: 46%; width: 8%; } } @media only screen and (min-width: 993px) { #section-pr .sec_pr_icon {top: 30px; left: 46%; width: 8%; } } #section-pr .sec_pr_title { position: absolute; top: 40px; width: 90%; left: 5%; text-align: center; font-size: 1.3em; color: #fff; } @media only screen and (min-width: 400px) { #section-pr .sec_pr_title { top: 40px; text-align: center; font-size: 1.4em;} } @media only screen and (min-width: 601px) { #section-pr .sec_pr_title { top: 80px; text-align: center; font-size: 1.6em; } } @media only screen and (min-width: 993px) { #section-pr .sec_pr_title { top: 100px; text-align: center; font-size: 1.8em; } } @media only screen and (min-width: 1025px) { #section-pr .sec_pr_title { top: 100px; text-align: center; font-size: 2em; } } #section-pr .sec_pr_speccontainer { padding: 34% 7% 12% 7%; } @media only screen and (min-width: 400px) { #section-pr .sec_pr_speccontainer { padding: 30% 10% 10% 10%;} } @media only screen and (min-width: 420px) { #section-pr .sec_pr_speccontainer { padding: 30% 10% 8% 10%;} } @media only screen and (min-width: 500px) { #section-pr .sec_pr_speccontainer { padding: 20% 10% 8% 10%;} } @media only screen and (min-width: 601px) { #section-pr .sec_pr_speccontainer { padding: 17% 5% 5% 5%;} } @media only screen and (min-width: 993px) { #section-pr .sec_pr_speccontainer { padding: 14% 15% 5% 15%;} } #section-pr .sec_pr_spec { padding: 1%; text-align: center; font-size: .8em; font-weight: 500; color: #000;} @media only screen and (min-width: 400px) { #section-pr .sec_pr_spec { padding: 1%; text-align: center; font-size: .9em; font-weight: 500;} } @media only screen and (min-width: 601px) { #section-pr .sec_pr_spec { padding: 5%; text-align: center; font-size: 1em; font-weight: 500;} } @media only screen and (min-width: 993px) { #section-pr .sec_pr_spec { padding: 5%; text-align: center; font-size: 1em; font-weight: 500; } } */ #section-pr .sec_pr_title { text-align: center; font-size: 1.3em; color: #fff; padding: 2em;} @media only screen and (min-width: 400px) { #section-pr .sec_pr_title { font-size: 1.4em;} } @media only screen and (min-width: 601px) { #section-pr .sec_pr_title { font-size: 1.6em; } } @media only screen and (min-width: 993px) { #section-pr .sec_pr_title { font-size: 1.8em; } } @media only screen and (min-width: 1025px) { #section-pr .sec_pr_title { font-size: 2em; } } #section-pr .sec_pr_spec { padding: ; text-align: center; font-size: .8em; font-weight: 500; color: #000; margin-bottom: 30px;} @media only screen and (min-width: 400px) { #section-pr .sec_pr_spec { padding: ; text-align: center; font-size: .9em; font-weight: 500;} } @media only screen and (min-width: 601px) { #section-pr .sec_pr_spec { padding: ; text-align: center; font-size: 1em; font-weight: 500;} } @media only screen and (min-width: 993px) { #section-pr .sec_pr_spec { padding: ; text-align: center; font-size: 1em; font-weight: 500; } } /*** #section-profile ** #section-profile .sec_profile_icon { position: absolute; top: 30px; left: 43%; width: 14%; } @media only screen and (min-width: 400px) { #section-profile .sec_profile_icon { top: 30px; left: 45%; width: 10%;} } @media only screen and (min-width: 601px) { #section-profile .sec_profile_icon {top: 30px; left: 46%; width: 8%; } } @media only screen and (min-width: 993px) { #section-profile .sec_profile_icon {top: 30px; left: 46%; width: 8%; } } #section-profile .sec_profile_title { position: relative; padding: 60px 0 0 0; margin: 0 0 0 5%; width: 90%; text-align: center; font-size: 1.5em; } @media only screen and (min-width: 400px) { #section-profile .sec_profile_title { padding: 80px 0 0 0; margin: 0 0 0 10%; width: 80%; text-align: center; font-size: 1.5em;} } @media only screen and (min-width: 601px) { #section-profile .sec_profile_title { padding: 80px 0 0 0; margin: 0 0 0 20%; width: 60%; text-align: center; font-size: 1.6em; } } @media only screen and (min-width: 993px) { #section-profile .sec_profile_title { padding: 80px 0 0 0; margin: 0 0 0 25%; width: 50%; text-align: center; font-size: 1.8em; } } @media only screen and (min-width: 1025px) { #section-profile .sec_profile_title { padding: 80px 0 0 0; margin: 0 0 0 25%; width: 50%; text-align: center; font-size: 2em; } } #section-profile .sec_profile_speccontainer { padding: 12% 0 15% 0; } @media only screen and (min-width: 400px) { #section-profile .sec_profile_speccontainer { padding: 10% 0 15% 0;} } @media only screen and (min-width: 420px) { #section-profile .sec_profile_speccontainer { padding: 10% 3% 10% 3%;} } @media only screen and (min-width: 500px) { #section-profile .sec_profile_speccontainer { padding: 8% 3% 10% 3%;} } @media only screen and (min-width: 601px) { #section-profile .sec_profile_speccontainer { padding: 6% 5% 3% 5%;} } @media only screen and (min-width: 993px) { #section-profile .sec_profile_speccontainer { padding: 2% 5% 3% 5%;} } #section-profile .sec_profile_photo { padding: 1%; text-align: center; font-size: .8em; font-weight: 500; color: #000;} @media only screen and (min-width: 400px) { #section-profile .sec_profile_photo { padding: 1%; text-align: center; font-size: .9em; font-weight: 500;} } @media only screen and (min-width: 601px) { #section-profile .sec_profile_photo { padding: 5%; text-align: center; font-size: 1em; font-weight: 500;} } @media only screen and (min-width: 993px) { #section-profile .sec_profile_photo { padding: 5%; text-align: center; font-size: 1em; font-weight: 500; } } #section-profile .sec_profile_spec { padding: 1%; text-align: left; font-size: .8em; font-weight: 500; color: #000;} @media only screen and (min-width: 400px) { #section-profile .sec_profile_spec { padding: 1%; text-align: left; font-size: .9em; font-weight: 500;} } @media only screen and (min-width: 601px) { #section-profile .sec_profile_spec { padding: 5%; text-align: left; font-size: 1em; font-weight: 500;} } @media only screen and (min-width: 993px) { #section-profile .sec_profile_spec { padding: 5%; text-align: left; font-size: 1em; font-weight: 500; } } /* Slick */ .slick-loading .slick-list { background: #fff url('/brand/lifestory/assets/slick/ajax-loader.gif') center center no-repeat; } /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('/brand/lifestory/assets/slick/fonts/slick.eot'); src: url('/brand/lifestory/assets/slick/fonts/slick.eot?#iefix') format('embedded-opentype'), url('/brand/lifestory/assets/slick/fonts/slick.woff') format('woff'), url('/brand/lifestory/assets/slick/fonts/slick.ttf') format('truetype'), url('/brand/lifestory/assets/slick/fonts/slick.svg#slick') format('svg'); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; margin-top: -10px; padding: 0; cursor: pointer; color: #fff; /*color: transparent;*/ text-shadow:0px 0px 16px #fff; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: #fff; /*color: transparent;*/ text-shadow:0px 0px 20px #f9daed; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before { font-family: 'slick'; font-size: 40px; line-height: 1; opacity: .75; color: ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; left: 40px; z-index: 200; } .slick-next:before { font-family: 'slick'; font-size: 40px; line-height: 1; opacity: .75; color: ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; right: 40px; z-index: 200; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; }