@charset "UTF-8";
/* CSS Document */

/* 中身-モバイルファースト======================================================================================================== */

#movie iframe{
vertical-align: top;
width: 100%;
height: 56.3%;
aspect-ratio: 16 / 9;
}

#introduction h3{
background-repeat: no-repeat;
background-position: center center;
background-size: 80% auto;
padding: 6.5vw 0 12vw;
font-size: 4vw;
font-weight: bold;
text-align: center;
animation: stopmotion 2s steps(1) infinite;
}
@keyframes stopmotion {
  0% {
background-image: url(images/introduction_title.svg);
  }
  33% {
background-image: url(images/introduction_title_f2.svg);
  }
  66% {
background-image: url(images/introduction_title_f3.svg);
  }
}


#introduction .image_box{
margin-bottom: 20px;
position: relative;
}
#introduction .image_box .q01{
width: 10vw;
position: absolute;
bottom: 15vw;
left: 5vw;
animation: q01 2s steps(1) infinite;
}
#introduction .image_box .q02{
width: 15vw;
position: absolute;
top: 0;
right: 0;
animation: q02 2s steps(1) infinite;
}

@keyframes q01 {
  25% {
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
  }
  50% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
  }
  75% {
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
  }
}
@keyframes q02 {
  25% {
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
  }
  50% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
  }
  75% {
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
  }
}

#introduction em{
display: block;
text-align: center;
font-weight: 500;
letter-spacing: 0.1em;
}
#introduction em span{
background: linear-gradient(transparent 60%, #eeeeee 0%);
display: inline;
padding: 0 2px 4px;
line-height: 2.4;
}


#concept{
position: relative;
}
#concept .text{
padding: 8vw 5vw 0;
}
#concept .text .l_common_title{
margin-bottom: 30px;
margin-top: 30px;
}
#concept .text h4{
font-size: 4.5vw;
font-weight: 500;
}
#concept .text h4 rt{
margin-bottom: -.5em;
}
#concept .text .copy{
margin: 30px 0;
}
#concept .text .copy p{
display: block;
margin-top: 20px;
padding: 10px;
text-align: center;
font-size: 5vw;
font-weight: 500;
border: solid 2px #000;
}

#concept .deco > *{
position: absolute;
z-index: 50;
}
#concept .deco01{
width: 20vw;
top: 30%;
left: -2%;
}
#concept .deco02{
width: 8vw;
top: -2%;
right: 10%;
}
#concept .deco03{
width: 15vw;
top: 40%;
right: 2%;
}
#concept .deco04{
width: 10vw;
top: 2%;
left: -1%;
}
#concept .deco05{
width: 10vw;
top: 30%;
right: 10%;
}
#concept .deco .move{
animation: flash 2s steps(1) infinite;
}
@keyframes flash {
  25% {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
  }
  50% {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
  }
  75% {
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
  }
}


#why{
overflow: hidden;
}
#why h3{
display: inline-block;
background-color: #000;
color: #fff;
padding: 5vw 5vw 5vw 10vw;
margin-left: -5vw;
transform: skewX(-5deg);
}
#why h3 span{
display: block;
font-size: 5vw;
transform: skewX(5deg);
}
#why li{
margin-top: 40px;
}
#why li dt{
display: flex;
align-items: center;
margin: 10px 0;
}
#why li dt .num{
background-color: #000;
color: #fff;
font-size: 8vw;
width: 20vw;
height: 20vw;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#why li dt h4{
flex: 1;
font-size: 5vw;
font-weight: 500;
margin-left: 1em;
}


#simulation{
background-color: #e4e4e4;
padding: 60px 0;
}
#simulation .l_contents_size{
}
#simulation article{
background-color: #fff;
padding: 5vw;
margin-bottom: 5vw;
}
#simulation article:last-child{
margin-bottom: 0;
}
#simulation dl{
margin-bottom: 10px;
}
#simulation dt{
text-align: center;
margin-bottom: 10px;
}
#simulation dt .num{
background-color: #000;
color: #fff;
font-size: 8vw;
width: 20vw;
height: 20vw;
border-radius: 50%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#simulation dt h4{
font-size: 18px;
font-weight: bold;
}
#simulation table tr:last-child th,
#simulation table tr:last-child td{
border-bottom: none;
padding-bottom: 0;
}




/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#introduction h3{
background-size: 100% auto;
padding: 60px 0 80px;
margin: 0 auto;
width: 470px;
font-size: 24px;
}
#introduction .image_box .q01{
width: 50px;
bottom: 200px;
left: 60px;
}
#introduction .image_box .q02{
width: 60px;
top: 20px;
right: 60px;
}


#introduction em{
font-size: 24px;
}


#concept{
display: flex;
flex-direction: row-reverse;
}
#concept .photo{
width: 50%;
}
#concept .text{
width: 50%;
padding: 0 5vw;
}
#concept .text h4{
font-size: 2vw;
letter-spacing: 0.1rem;
}
#concept .text .copy{
display: flex;
justify-content: space-between;
align-items: center;
}
#concept .text .copy .masterliving{
width: 49%;
line-height: 1px;
}
#concept .text .copy p{
width: 49%;
font-size: 1.2vw;
margin: 0;
}

#concept .deco img{
width: 100%;
height: auto;
}
#concept .deco01{
width: 10vw;
top: 5%;
left: 45%;
}
#concept .deco02{
width: 4vw;
top: -4%;
right: 5%;
}
#concept .deco03{
width: 10vw;
top: 70%;
right: 5%;
}
#concept .deco04{
width: 10vw;
top: -2%;
left: -1%;
}
#concept .deco05{
width: 5vw;
top: 80%;
right: 40%;
}


#why h3{
display: inline-block;
background-color: #000;
color: #fff;
padding: 20px 20px 20px 40px;
margin-left: -20px;
transform: skewX(-10deg);
}
#why h3 span{
font-size: 40px;
transform: skewX(10deg);
}
#why li{
display: flex;
align-items: center;
}
#why li:nth-child(odd){
flex-direction: row-reverse;
}
#why li .photo{
width: 450px;
}
#why li .text{
flex: 1;
}
#why li:nth-child(odd) .text{
margin-right: 60px;
}
#why li:nth-child(even) .text{
margin-left: 60px;
}

#why li dt .num{
font-size: 40px;
width: 100px;
height: 100px;
}
#why li dt h4{
font-size: 24px;
}


#simulation{
padding: 100px 0;
}
#simulation dl{
display: flex;
align-items: center;
margin-bottom: 40px;
}
#simulation dt{
margin-bottom: 0px;
}
#simulation dt .num{
font-size: 40px;
width: 100px;
height: 100px;
}
#simulation dd{
flex: 1;
margin-left: 40px;
}
#simulation .photo{
margin-bottom: 40px;
}


}