@charset "utf-8";
/* headbar-top ------------------------------------------------------------ */
@media only screen and (min-width:801px) {
#headbar {
 position:fixed;
 width:100%;
 top:0px;
 left:50%
 padding:10px 0 10px 0;
 text-align: center;
 z-index:2;
}
#headbar img {
 width:15%;
 margin:1%;
}
}
@media only screen and (max-width:800px) {
#headbar {
 position:fixed;
 width:100%;
 top:0px;
 left:50%
 padding:10px 0 10px 0;
 text-align: center;
 z-index:2;
}
#headbar img {
 width:30%;
 margin:1%;
}
}
/* rayout ------------------------------------------------------------ */
#wrapper {
 width:100%;
}
/* main_img ------------------------------------------------------------ */
#main_wrap {
 position:relative;
 overflow:hidden;
 width:100%;
 height:100vh;
 background: url(../images/top/livlest_brand_main.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
 z-index:3;
}
#main_img00 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest00.png) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img01 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest01.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img02 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest02.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img03 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest03.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img04 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest04.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img05 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest05.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img06 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest06.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img07 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest07.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img08 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest08.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img09 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest09.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img10 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest10.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img11 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest11.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
#main_img12 {
 position:relative;
 overflow:hidden;
 float:left;
 width:20%;
 height:20vh;
 background: url(../images/top/main_livlest12.jpg) no-repeat center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
/* main_tytle/btn ------------------------------------------------------------ */
@media print,screen and (min-width:801px) {
#main_tytle {
 width:50%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-right: -50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index:4;
}
#main_btn_wrap {
 width:50%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-right: -50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 text-align:center;
 z-index:5;
}
#main_btn_logo {
 width:35%;
 margin:-5% auto 10%;
}
.main img {
 width:25%;
 margin:2%;
}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
#main_tytle {
 width:100%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-right: -50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 overflow:hidden;
 z-index:4;
}
#main_btn_wrap {
 width:80%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-right: -50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 text-align:center;
 z-index:5;
}
#main_btn_logo {
 width:50%;
 margin:-5% auto 10%;
}
.main img {
 width:35%;
 margin:2%;
}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
#main_tytle {
 width:100%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-right: -50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index:4;
}
#main_btn_wrap {
 width:100%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-right: -50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index:5;
}
#main_btn_logo {
 width:50%;
 margin:-5% auto 1%;
}
.main section {
 width:50vw;
 margin:1% auto;
}
.main {
}
}
@media only screen and (max-width:500px) and (orientation:portrait) {
#main_tytle {
 width:100%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-right: -50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index:4;
}
#main_btn_wrap {
 width:90%;
 position: absolute;
 top: 50%;
 left: 50%;
 margin:0 auto;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index:5;
}
#main_btn_logo {
 width:60%;
 margin:-5% auto 1%;
}
.main img {
 width:70vw;
 margin:2%;
}
.main {
}
}
/* css animation ----------------------------------------------- */
/* logo_line ----- */
.st0{
 fill:rgba(255,0,0,0);
 stroke:#fff;
 stroke-width:1;
 stroke-dasharray: 3000;
 stroke-dashoffset:3000;
 animation: st0 20s ease-in alternate forwards;
 -webkit-animation:st0 20s ease-in 0s forwards;
 -o-animation:st0 20s ease-in 0s forwards;
 animation:st0 20s ease-in 0s forwards;
}
@-webkit-keyframes st0{
 0%{stroke-dashoffset:3000;}
 10%{stroke-dashoffset:3000;}
 20%{stroke-dashoffset:0;opacity:1;}
 30%{stroke-dashoffset:0;opacity:0;}
 100%{stroke-dashoffset:0;opacity:0;}
}
@keyframes st0{
 0%{stroke-dashoffset:3000;}
 10%{stroke-dashoffset:3000;}
 20%{stroke-dashoffset:0;opacity:1;}
 30%{stroke-dashoffset:0;opacity:0;}
 100%{stroke-dashoffset:0;opacity:0;}
}
/* logo_fill ----- */
.st1{
 fill:rgba(255,0,0,0);
 fill:#fff;
 animation: st1 20s ease-in alternate forwards;
 -webkit-animation:st1 20s ease-in 0s forwards;
 -o-animation:st1 20s ease-in 0s forwards;
 animation:st1 20s ease-in 0s forwards;
}
@-webkit-keyframes st1{
 0%{opacity:0;}
 10%{opacity:0;}
 20%{opacity:1;}
 30%{opacity:0;}
 100%{stroke-dashoffset:0;opacity:0;}
}
@keyframes st1{
 0%{opacity:0;}
 10%{opacity:0;}
 20%{opacity:1;}
 30%{opacity:0;}
 100%{stroke-dashoffset:0;opacity:0;}
}
/* logo_project ----- */
.st2{
 fill:rgba(255,0,0,0);
 fill:#fff;
 animation: st2 20s ease-in alternate forwards;
 -webkit-animation:st2 20s ease-in 0s forwards;
 -o-animation:st2 20s ease-in 0s forwards;
 animation:st2 20s ease-in 0s forwards;
}
@-webkit-keyframes st2{
 0%{opacity:0;}
 10%{opacity:0;}
 20%{opacity:1;}
 30%{opacity:0;}
 100%{stroke-dashoffset:0;opacity:0;}
}
@keyframes st2{
 0%{opacity:0;}
 10%{opacity:0;}
 20%{opacity:1;}
 30%{opacity:0;}
 100%{stroke-dashoffset:0;opacity:0;}
}
/* 「リブレスト」。 ----- */
.main_tytle_text01{
 fill:rgba(0,0,0,0);
 fill:#000;
 animation: main_tytle_text01 20s ease-in alternate forwards;
 -webkit-animation:main_tytle_text01 20s ease-in 0s forwards;
 -o-animation:main_tytle_text01 20s ease-in 0s forwards;
 animation:main_tytle_text01 20s ease-in 0s forwards;
}
@-webkit-keyframes main_tytle_text01{
 0%{opacity:0;}
 25%{opacity:0;}
 30%{opacity:1;}
 40%{opacity:1;}
 45%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_tytle_text01{
 0%{opacity:0;}
 25%{opacity:0;}
 30%{opacity:1;}
 40%{opacity:1;}
 45%{opacity:0;}
 100%{opacity:0;}
}
/* それは街と人を育むブランド。  ----- */
.main_tytle_text02{
 fill:rgba(0,0,0,0);
 fill:#000;
 animation: main_tytle_text02 20s ease-in alternate forwards;
 -webkit-animation:main_tytle_text02 20s ease-in 0s forwards;
 -o-animation:main_tytle_text02 20s ease-in 0s forwards;
 animation:main_tytle_text02 20s ease-in 0s forwards;
}
@-webkit-keyframes main_tytle_text02{
 0%{opacity:0;}
 40%{opacity:0;}
 45%{opacity:1;}
 55%{opacity:1;}
 60%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_tytle_text02{
 0%{opacity:0;}
 40%{opacity:0;}
 45%{opacity:1;}
 55%{opacity:1;}
 60%{opacity:0;}
 100%{opacity:0;}
}
/* 未来を築く。  ----- */
.main_tytle_text03{
 fill:rgba(0,0,0,0);
 fill:#000;
 animation: main_tytle_text03 20s ease-in alternate forwards;
 -webkit-animation:main_tytle_text03 20s ease-in 0s forwards;
 -o-animation:main_tytle_text03 20s ease-in 0s forwards;
 animation:main_tytle_text03 20s ease-in 0s forwards;
}
@-webkit-keyframes main_tytle_text03{
 0%{opacity:0;}
 55%{opacity:0;}
 60%{opacity:1;}
 70%{opacity:1;}
 75%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_tytle_text03{
 0%{opacity:0;}
 55%{opacity:0;}
 60%{opacity:1;}
 70%{opacity:1;}
 75%{opacity:0;}
 100%{opacity:0;}
}
/* 日東不動産の新しいカタチ。 ----- */
.main_tytle_text04{
 fill:rgba(0,0,0,0);
 fill:#000;
 animation: main_tytle_text04 20s ease-in alternate forwards;
 -webkit-animation:main_tytle_text04 20s ease-in 0s forwards;
 -o-animation:main_tytle_text04 20s ease-in 0s forwards;
 animation:main_tytle_text04 20s ease-in 0s forwards;
}
@-webkit-keyframes main_tytle_text04{
 0%{opacity:0;}
 70%{opacity:0;}
 75%{opacity:1;}
 85%{opacity:1;}
 90%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_tytle_text04{
 0%{opacity:0;}
 70%{opacity:0;}
 75%{opacity:1;}
 85%{opacity:1;}
 90%{opacity:0;}
 100%{opacity:0;}
}
/* main_btn ----- */
#main_btn_wrap{
 animation: main_btn_wrap 20s ease-in alternate forwards;
 -webkit-animation:main_btn_wrap 20s ease-in 0s forwards;
 -o-animation:main_btn_wrap 20s ease-in 0s forwards;
 animation:main_btn_wrap 20s ease-in 0s forwards;
}
@-webkit-keyframes main_btn_wrap{
 0%{opacity:0;}
 85%{opacity:0;}
 95%{opacity:1;}
 100%{opacity:1;}
}
@keyframes main_btn_wrap{
 0%{opacity:0;}
 85%{opacity:0;}
 95%{opacity:1;}
 100%{opacity:1;}1
}
/* main_img ----- */
#main_img01{
 animation: main_img01 20s ease-in alternate forwards;
 -webkit-animation:main_img01 20s ease-in 0s forwards;
 -o-animation:main_img01 20s ease-in 0s forwards;
 animation:main_img01 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img01{
 0%{opacity:0;}
 25%{opacity:0;}
 30%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img01{
 0%{opacity:0;}
 25%{opacity:0;}
 30%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img02{
 animation: main_img02 20s ease-in alternate forwards;
 -webkit-animation:main_img02 20s ease-in 0s forwards;
 -o-animation:main_img02 20s ease-in 0s forwards;
 animation:main_img02 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img02{
 0%{opacity:0;}
 50%{opacity:0;}
 55%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img02{
 0%{opacity:0;}
 50%{opacity:0;}
 55%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img03{
 animation: main_img03 20s ease-in alternate forwards;
 -webkit-animation:main_img03 20s ease-in 0s forwards;
 -o-animation:main_img03 20s ease-in 0s forwards;
 animation:main_img03 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img03{
 0%{opacity:0;}
 35%{opacity:0;}
 40%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img03{
 0%{opacity:0;}
 35%{opacity:0;}
 40%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img04{
 animation: main_img04 20s ease-in alternate forwards;
 -webkit-animation:main_img04 20s ease-in 0s forwards;
 -o-animation:main_img04 20s ease-in 0s forwards;
 animation:main_img04 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img04{
 0%{opacity:0;}
 55%{opacity:0;}
 60%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img04{
 0%{opacity:0;}
 55%{opacity:0;}
 60%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img05{
 animation: main_img05 20s ease-in alternate forwards;
 -webkit-animation:main_img05 20s ease-in 0s forwards;
 -o-animation:main_img05 20s ease-in 0s forwards;
 animation:main_img05 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img05{
 0%{opacity:0;}
 45%{opacity:0;}
 50%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img05{
 0%{opacity:0;}
 45%{opacity:0;}
 50%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img06{
 animation: main_img06 20s ease-in alternate forwards;
 -webkit-animation:main_img06 20s ease-in 0s forwards;
 -o-animation:main_img06 20s ease-in 0s forwards;
 animation:main_img06 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img06{
 0%{opacity:0;}
 60%{opacity:0;}
 65%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img06{
 0%{opacity:0;}
 60%{opacity:0;}
 65%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img07{
 animation: main_img07 20s ease-in alternate forwards;
 -webkit-animation:main_img07 20s ease-in 0s forwards;
 -o-animation:main_img07 20s ease-in 0s forwards;
 animation:main_img07 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img07{
 0%{opacity:0;}
 27%{opacity:0;}
 32%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img07{
 0%{opacity:0;}
 27%{opacity:0;}
 32%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img08{
 animation: main_img08 20s ease-in alternate forwards;
 -webkit-animation:main_img08 20s ease-in 0s forwards;
 -o-animation:main_img08 20s ease-in 0s forwards;
 animation:main_img08 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img08{
 0%{opacity:0;}
 62%{opacity:0;}
 67%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img08{
 0%{opacity:0;}
 62%{opacity:0;}
 67%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img09{
 animation: main_img09 20s ease-in alternate forwards;
 -webkit-animation:main_img09 20s ease-in 0s forwards;
 -o-animation:main_img09 20s ease-in 0s forwards;
 animation:main_img09 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img09{
 0%{opacity:0;}
 47%{opacity:0;}
 52%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img09{
 0%{opacity:0;}
 47%{opacity:0;}
 52%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img10{
 animation: main_img10 20s ease-in alternate forwards;
 -webkit-animation:main_img10 20s ease-in 0s forwards;
 -o-animation:main_img10 20s ease-in 0s forwards;
 animation:main_img10 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img10{
 0%{opacity:0;}
 57%{opacity:0;}
 62%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img10{
 0%{opacity:0;}
 57%{opacity:0;}
 62%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img11{
 animation: main_img11 20s ease-in alternate forwards;
 -webkit-animation:main_img11 20s ease-in 0s forwards;
 -o-animation:main_img11 20s ease-in 0s forwards;
 animation:main_img11 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img11{
 0%{opacity:0;}
 52%{opacity:0;}
 57%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img11{
 0%{opacity:0;}
 52%{opacity:0;}
 57%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
#main_img12{
 animation: main_img12 20s ease-in alternate forwards;
 -webkit-animation:main_img12 20s ease-in 0s forwards;
 -o-animation:main_img12 20s ease-in 0s forwards;
 animation:main_img12 20s ease-in 0s forwards;
}
@-webkit-keyframes main_img12{
 0%{opacity:0;}
 37%{opacity:0;}
 42%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
@keyframes main_img12{
 0%{opacity:0;}
 37%{opacity:0;}
 42%{opacity:1;}
 75%{opacity:1;}
 80%{opacity:0;}
 100%{opacity:0;}
}
/* contents01 ------------------------------------------------------------ */
@media print,screen and (min-width:801px) {
#contents01_wrap {
 width:100%;
 min-height:100vh;
 background:#fff;
 display:flex;
 justify-content:center;
 align-items:center;
}
#contents01 {
 width:100%;
}
#contents01 h1 {
 font-size:28px;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
}
#brandconcept02 {
 width:90%;
 max-width:700px;
 margin:0 auto;
}
#brandconcept_tytle {
 width:90%;
 max-width:700px;
 margin:0 auto;
}
#brandconcept_cont {
 width:90%;
 max-width:1000px;
 margin:0 auto;
 text-align:center;
}
#brandconcept_cont img {
 width:40%;
 margin:2%;
}
#skipbtn {
 position:absolute;
 width:6vw;
 bottom:3%;
 left:50%;
 margin-left:-3vw;
 z-index:6;
}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
#contents01_wrap {
 width:100%;
 min-height:100vh;
 background:#fff;
 display:flex;
 justify-content:center;
 align-items:center;
 padding:10% 0 8% 0;
}
#contents01 {
 width:100%;
}
#contents01 h1 {
 font-size:3.2vw;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
}
#brandconcept02 {
 width:90%;
 max-width:700px;
 margin:0 auto;
}
#brandconcept_tytle {
 width:90%;
 max-width:700px;
 margin:0 auto;
}
#brandconcept_cont {
 width:90%;
 max-width:1000px;
 margin:0 auto;
 text-align:center;
}
#brandconcept_cont img {
 width:40%;
 margin:2%;
}
#skipbtn {
 position:absolute;
 width:12vw;
 bottom:3%;
 left:50%;
 margin-left:-6vw;
 z-index:6;
}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
#contents01_wrap {
 width:100%;
 min-height:100vh;
 background:#fff;
 display:flex;
 justify-content:center;
 align-items:center;
 padding:10% 0 8% 0;
}
#contents01 {
 width:100%;
}
#contents01 h1 {
 font-size:5vw;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
}
#brandconcept02 {
 width:90%;
 max-width:700px;
 margin:0 auto;
}
#brandconcept_tytle {
 width:90%;
 margin:0 auto;
}
#brandconcept_cont {
 width:90%;
 margin:0 auto;
 text-align:center;
}
#brandconcept_cont img {
 width:90%;
 margin:2%;
}
#skipbtn {
 position:absolute;
 width:20vw;
 bottom:3%;
 left:50%;
 margin-left:-10vw;
 z-index:6;
}
}
/* contents01_br ------------------------------------------------------------ */
@media print,screen and (min-width:801px) {
.brandconcept_br {display:none;}
}
@media print,screen and (max-width:800px) {
.brandconcept_br {display:inline;}
}
/* contents02 ------------------------------------------------------------ */
@media print,screen and (min-width:801px) {
#contents02_wrap {
 width:100%;
 min-height:100vh;
 background:#f4f3f1;
 display:flex;
 justify-content:center;
 align-items:center;
 padding-bottom:2%;
}
#contents02 {
 width:90%;
 max-width:1300px;
 text-align:justify;
}
#philosophy_tytle {
 width:90%;
 max-width:540px;
 margin:0 auto;
}
#contents02 h1 {
 font-size:28px;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
}
#contents02 h2 {
 font-size:16px;
 line-height:150%;
 font-weight:100;
}
#contents02 p {
 font-size:12px;
 line-height:250%;
 font-weight:100;
 text-align:justify;
}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
#contents02_wrap {
 width:100%;
 min-height:100vh;
 background:#f4f3f1;
 display:flex;
 justify-content:center;
 align-items:center;
 padding-bottom:5%;
}
#contents02 {
 width:90%;
 margin:0 auto;
 text-align:justify;
}
#philosophy_tytle {
 width:90%;
 max-width:540px;
 margin:0 auto;
}
#contents02 h1 {
 font-size:3.2vw;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
}
#contents02 h2 {
 font-size:16px;
 line-height:150%;
 font-weight:100;
}
#contents02 p {
 font-size:12px;
 line-height:250%;
 font-weight:100;
 text-align:justify;
}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
#contents02_wrap {
 width:100%;
 min-height:100vh;
 background:#f4f3f1;
 display:flex;
 justify-content:center;
 align-items:center;
 padding:10% 0 5% 0;
}
#contents02 {
 width:90%;
 margin:0 auto;
 text-align:justify;
}
#philosophy_tytle {
 width:90%;
 max-width:540px;
 margin:0 auto;
}
#contents02 h1 {
 font-size:5vw;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
}
#contents02 h2 {
 font-size:16px;
 line-height:150%;
 font-weight:100;
}
#contents02 p {
 font-size:12px;
 line-height:250%;
 font-weight:100;
 text-align:justify;
}
}
/* contents02_br ------------------------------------------------------------ */
@media print,screen and (min-width:941px) {
.philosophy_br1 {display:none;}
.philosophy_br2 {display:inline;}
.philosophy_br3 {display:none;}
.philosophy_br4 {display:none;}
}
@media print,screen and (max-width:940px) {
.philosophy_br1 {display:inline;}
.philosophy_br2 {display:none;}
.philosophy_br3 {display:none;}
.philosophy_br4 {display:none;}
}
@media print,screen and (max-width:876px) {
.philosophy_br1 {display:inline;}
.philosophy_br2 {display:none;}
.philosophy_br3 {display:inline;}
.philosophy_br4 {display:inline;}
}
@media print,screen and (max-width:695px) {
.philosophy_br1 {display:inline;}
.philosophy_br2 {display:none;}
.philosophy_br3 {display:inline;}
.philosophy_br4 {display:none;}
}
@media print,screen and (max-width:600px) {
.philosophy_br1 {display:inline;}
.philosophy_br2 {display:inline;}
.philosophy_br3 {display:none;}
.philosophy_br4 {display:none;}
}
/* contents03 ------------------------------------------------------------ */
@media print,screen and (min-width:801px) {
#contents03_wrap {
 width:100%;
 min-height:100vh;
 background:#e5e0dd;
 display:flex;
 justify-content:center;
 align-items:center;
 padding-top:5%;
}
#contents03 h1 {
 font-size:32px;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
 margin-top:-1%;
}
#contents03 h2 {
 font-size:28px;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
}
#contents03_btn {
 width:70%;
 max-width:260px;
 margin:0 auto;
}
#fuchu_pic {
 width:88%;
 margin:0 auto;
}
#fuchu_pic img {
 width:100%;
}
#fuchu_tytle {
 width:70%;
 max-width:600px;
 margin:0 auto;
}
#fuchu_tytle img {
 width:100%;
}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
#contents03_wrap {
 width:100%;
 min-height:100vh;
 background:#e5e0dd;
 display:flex;
 justify-content:center;
 align-items:center;
}
#contents03 h1 {
 font-size:32px;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
 margin-top:-1%;
}
#contents03 h2 {
 font-size:28px;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
}
#contents03_btn {
 width:70%;
 max-width:260px;
 margin:0 auto;
}
#fuchu_pic {
 width:90%;
 max-width:1420px;
 margin:0 auto;
}
#fuchu_pic img {
 width:100%;
}
#fuchu_tytle {
 width:70%;
 max-width:600px;
 margin:0 auto;
}
#fuchu_tytle img {
 width:100%;
}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
#contents03_wrap {
 width:100%;
 min-height:100vh;
 background:#e5e0dd;
 display:flex;
 justify-content:center;
 align-items:center;
}
#contents03 h1 {
 font-size:5vw;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
 margin-top:-1%;
}
#contents03 h2 {
 font-size:20px;
 line-height:150%;
 font-weight:lighter;
 text-align:center;
}
#contents03_btn {
 width:70%;
 max-width:260px;
 margin:0 auto;
}
#fuchu_pic {
 width:90%;
 max-width:1420px;
 margin:0 auto;
}
#fuchu_pic img {
 width:100%;
}
#fuchu_tytle {
 width:70%;
 max-width:600px;
 margin:0 auto;
}
#fuchu_tytle img {
 width:100%;
}
}