/* @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: 3200px; } .containerInner.sec03-height { height: 1550px; } .containerInner.sec04-height { height: 1100px; } .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: 3300px; } .containerInner.sec03-height { height: 1600px; } .containerInner.sec04-height { height: 1100px; } } @media only screen and (min-width: 370px) { .containerInner.sec02-height { height: 3300px; } .containerInner.sec03-height { height: 1600px; } .containerInner.sec04-height { height: 1100px; } } @media only screen and (min-width: 400px) { .containerInner.sec02-height { height: 3400px; } .containerInner.sec03-height { height: 1700px; } .containerInner.sec04-height { height: 1150px; } } @media only screen and (min-width: 430px) { .containerInner.sec02-height { height: 3850px; } .containerInner.sec03-height { height: 1850px; } .containerInner.sec04-height { height: 1200px; } } @media only screen and (min-width: 500px) { .containerInner.sec02-height { height: 4650px; } .containerInner.sec03-height { height: 2050px; } .containerInner.sec04-height { height: 1500px; } } @media only screen and (min-width: 580px) { .containerInner.sec02-height { height: 4750px; } .containerInner.sec03-height { height: 2100px; } .containerInner.sec04-height { height: 1500px; } } @media only screen and (min-width: 601px) { .containerInner.sec02-height { height: 4850px; } .containerInner.sec03-height { height: 2100px; } .containerInner.sec04-height { height: 1650px; } } @media only screen and (min-width: 760px) { .containerInner.sec02-height { height: 4850px; } .containerInner.sec03-height { height: 2100px; } .containerInner.sec04-height { height: 1650px; } } @media only screen and (min-width: 800px) { .containerInner.sec02-height { height: 4850px; } .containerInner.sec03-height { height: 2100px; } .containerInner.sec04-height { height: 1650px; } } @media only screen and (min-width: 993px) { .containerInner.sec02-height { height: 4850px; } .containerInner.sec03-height { height: 2100px; } .containerInner.sec04-height { height: 1700px; } } @media only screen and (min-width: 1024px) { .containerInner.sec02-height { height: 5300px; } .containerInner.sec03-height { height: 2300px; } .containerInner.sec04-height { height: 1700px; } } @media only screen and (min-width: 1100px) { .containerInner.sec02-height { height: 6000px; } .containerInner.sec03-height { height: 2700px; } .containerInner.sec04-height { height: 2000px; } } @media only screen and (min-width: 1200px) { .containerInner.sec02-height { height: 6200px; } .containerInner.sec03-height { height: 2800px; } .containerInner.sec04-height { height: 2000px; } } @media only screen and (min-width: 1300px) { .containerInner.sec02-height { height: 6200px; } .containerInner.sec03-height { height: 2800px; } .containerInner.sec04-height { height: 2000px; } } @media only screen and (min-width: 1400px) { .containerInner.sec02-height { height: 6200px; } .containerInner.sec03-height { height: 2800px; } .containerInner.sec04-height { height: 2000px; } } video { position: fixed; top: 0; left: 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.5);} .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/40/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/40/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/40/bg_003.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: 80px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title01 { top: 80px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title01 { top: 100px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title01 { top: 100px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title01 { top: 200px; left: 25%; color: #000; } } @media only screen and (min-width: 993px) { #section02 .title01 { top: 250px; left: 25%; } } @media only screen and (min-width: 1025px) { #section02 .title01 { top: 250px; left: 25%; } } #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: 410px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title02 { top: 420px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title02 { top: 470px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title02 { top: 570px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title02 { top: 750px; left: 25%; } } @media only screen and (min-width: 993px) { #section02 .title02 { top: 800px; left: 25%; } } @media only screen and (min-width: 1025px) { #section02 .title02 { top: 920px; left: 25%; } } #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: 760px; left: 10%; color: #fff; } @media only screen and (min-width: 400px) { #section02 .title03 { top: 770px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title03 { top: 870px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title03 { top: 1070px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title03 { top: 1250px; left: 20%; color: #000; } } @media only screen and (min-width: 993px) { #section02 .title03 { top: 1350px; left: 22%; } } @media only screen and (min-width: 1025px) { #section02 .title03 { top: 1560px; left: 22%; } } #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: 1140px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title04 { top: 1150px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title04 { top: 1300px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title04 { top: 1600px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title04 { top: 1720px; left: 68%; } } @media only screen and (min-width: 993px) { #section02 .title04 { top: 1880px; left: 65%; } } @media only screen and (min-width: 1025px) { #section02 .title04 { top: 2180px; left: 65%; } } #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: 1490px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title05 { top: 1500px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title05 { top: 1700px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title05 { top: 2100px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title05 { top: 2200px; left: 17%; } } @media only screen and (min-width: 993px) { #section02 .title05 { top: 2400px; left: 20%; } } @media only screen and (min-width: 1025px) { #section02 .title05 { top: 2800px; left: 20%; } } #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: 1840px; left:10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title06 { top: 1850px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title06 { top: 2100px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title06 { top: 2600px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title06 { top: 2700px; left: 65%; } } @media only screen and (min-width: 993px) { #section02 .title06 { top: 2950px; left: 60%; } } @media only screen and (min-width: 1025px) { #section02 .title06 { top: 3450px; left: 60%; } } #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: 2145px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section02 .title07 { top: 2155px; left: 15%; } } @media only screen and (min-width: 420px) { #section02 .title07 { top: 2440px; left: 20%; } } @media only screen and (min-width: 500px) { #section02 .title07 { top: 3040px; left: 20%; } } @media only screen and (min-width: 601px) { #section02 .title07 { top: 3200px; left: 25%; } } @media only screen and (min-width: 993px) { #section02 .title07 { top: 3500px; left: 25%; } } @media only screen and (min-width: 1025px) { #section02 .title07 { top: 4100px; left: 25%; } } #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: 40px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section03 .title01 { top: 50px; left: 15%; } } @media only screen and (min-width: 420px) { #section03 .title01 { top: 50px; left: 20%; } } @media only screen and (min-width: 500px) { #section03 .title01 { top: 50px; 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: 420px; left: 15%; } } @media only screen and (min-width: 420px) { #section03 .title02 { top: 470px; 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: 550px; left: 65%; } } @media only screen and (min-width: 993px) { #section03 .title02 { top: 600px; left: 65%; } } @media only screen and (min-width: 1025px) { #section03 .title02 { top: 700px; left: 65%; } } #section03 .pic02 { top: 470px; } @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: 1100px; left: 30%; } } @media only screen and (min-width: 993px) { #section03 .title03 { top: 1200px; left: 30%; } } @media only screen and (min-width: 1025px) { #section03 .title03 { top: 1400px; left: 30%; } } #section03 .pic03 { top: 840px; } @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 .pic04 { top: 1180px; } @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: 1500px; } } @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; } } /*** #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: 30px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section04 .title01 { top: 30px; left: 15%; } } @media only screen and (min-width: 420px) { #section04 .title01 { top: 30px; left: 20%; } } @media only screen and (min-width: 500px) { #section04 .title01 { top: 30px; left: 20%; } } @media only screen and (min-width: 601px) { #section04 .title01 { top: 40px; left: 20%; } } @media only screen and (min-width: 993px) { #section04 .title01 { top: 40px; left: 20%; } } @media only screen and (min-width: 1025px) { #section04 .title01 { top: 40px; left: 20%; } } #section04 .pic01 { top: 110px; } @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: 400px; left: 10%; color: #fff;} @media only screen and (min-width: 400px) { #section04 .title02 { top: 400px; left: 15%; } } @media only screen and (min-width: 420px) { #section04 .title02 { top: 450px; left: 20%; } } @media only screen and (min-width: 500px) { #section04 .title02 { top: 500px; left: 20%; } } @media only screen and (min-width: 601px) { #section04 .title02 { top: 650px; left: 23%; } } @media only screen and (min-width: 993px) { #section04 .title02 { top: 650px; left: 23%; } } @media only screen and (min-width: 1025px) { #section04 .title02 { top: 750px; left: 23%; } } #section04 .pic02 { top: 450px; } @media only screen and (min-width: 400px) { #section04 .pic02 { top: 450px; } } @media only screen and (min-width: 420px) { #section04 .pic02 { top: 500px; } } @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 .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; } } #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-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% 5% 5% 5%;} } #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-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: absolute; top: 80px; width: 100%; text-align: center; font-size: 1.5em; } @media only screen and (min-width: 400px) { #section-profile .sec_profile_title { top: 80px; width: 100%; text-align: center; font-size: 1.5em;} } @media only screen and (min-width: 601px) { #section-profile .sec_profile_title { top: 80px; width: 100%; text-align: center; font-size: 1.6em; } } @media only screen and (min-width: 993px) { #section-profile .sec_profile_title { top: 80px; width: 100%; text-align: center; font-size: 1.8em; } } @media only screen and (min-width: 1025px) { #section-profile .sec_profile_title { top: 80px; width: 100%; text-align: center; font-size: 2em; } } #section-profile .sec_profile_speccontainer { padding: 42% 0 15% 0; } @media only screen and (min-width: 400px) { #section-profile .sec_profile_speccontainer { padding: 40% 0 15% 0;} } @media only screen and (min-width: 420px) { #section-profile .sec_profile_speccontainer { padding: 30% 3% 10% 3%;} } @media only screen and (min-width: 500px) { #section-profile .sec_profile_speccontainer { padding: 24% 3% 10% 3%;} } @media only screen and (min-width: 601px) { #section-profile .sec_profile_speccontainer { padding: 16% 5% 5% 5%;} } @media only screen and (min-width: 993px) { #section-profile .sec_profile_speccontainer { padding: 12% 5% 5% 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; } }