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

body{
	width:100%;
	margin:0;
	font-family: 'Noto Sans SC', sans-serif;
	 animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

body p{
	font-size:16.7px;
	line-height:2.5em;
	letter-spacing:0.1em
}


@media screen and (max-width:414px) {
	body p{
	font-size:14.3px;
	line-height:2.2em;
	letter-spacing:0.1em
	}
}


body .main_bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-80deg, #fff 50%, #aadbff 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

body .main_bg.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:7s;
}

body .main_bg.bg3 {
  animation-duration:10s;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}




/* ふわっとアニメーション */

.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.0s;
 -ms-animation-duration:1.0s;
 animation-duration:1.0s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(60px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}




/*メイン*/

section#main{
	width:100%;
}
section#main .box_1{
	width:100vw;
	height:100vh;
	position:relative;
}

section#main .box_1 .muku_logo{
	width:150px;
	position:absolute;
	right:20px;
	top:20px;
}

section#main .box_1 .title {
	width:98%;
	position:absolute;
	bottom:6%;
	left:2%;
	box-sizing:border-box;
}

section#main .box_1 .title img{
	width:95%;
	max-width:1400px;
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.07));
	animation: fadeIn2 3s ease 0s 1 normal;
    -webkit-animation: fadeIn2 3s ease 0s 1 normal;
}


@keyframes fadeIn2 {
    0% {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn2 {
    0% {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100% {opacity: 1}
}



section#main .box_1 .title h3{
	font-size:27px;
	letter-spacing:0.1em;
	animation: fadeIn3 3s ease 0s 1 normal;
    -webkit-animation: fadeIn3 3s ease 0s 1 normal;
}

@keyframes fadeIn3 {
    0% {opacity: 0}
    50% {opacity: 0}
    80% {opacity: 1}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn3 {
    0% {opacity: 0}
    50% {opacity: 0}
    80% {opacity: 1}
    100% {opacity: 1}
}

section#main .box_1 .title h4{
	font-size:20px;
	font-weight:normal;
	animation: fadeIn4 3s ease 0s 1 normal;
    -webkit-animation: fadeIn4 3s ease 0s 1 normal;
}

@keyframes fadeIn4 {
    0% {opacity: 0}
    70% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn4 {
    0% {opacity: 0}
    70% {opacity: 0}
    100% {opacity: 1}
}

section#main .box_1 .title h4 span{
	color:#fff;
	padding:5px 20px;
	background:#2c81bf;
	border-radius: 2em;
}



@media screen and (max-width:959px) {
	section#main .box_1 .muku_logo{
		width:100px;
	}

	section#main .box_1 .title h3{
		font-size:180%;
		letter-spacing:0.1em;
	}


	section#main .box_1 .title h3 span::before {
		content: "\A" ;
		white-space: pre ;
	}

	section#main .box_1 .title h4{
		font-size:105%;
		font-weight:normal;
	}

	section#main .box_1 .title h4 span{
		padding:5px 20px;
	}


}

@media screen and (max-width:639px) {
		section#main .box_1 .title h3{
		font-size:150%;
		letter-spacing:0.1em;
	}
}

@media screen and (max-width:414px) {
		section#main .box_1 .title h3{
		font-size:110%;
		letter-spacing:0em;
	}
		section#main .box_1 .title h4{
		font-size:70%;
		font-weight:normal;
	}
		section#main .box_1 .title h4 span{
		padding:2px 5px;
	}
}

/*メイン*/



/*エピローグ*/

section#ep{
	width:100%;
	height:auto;
	margin:5vh auto;
}

section#ep dl{
	width:800px;
	margin:10vh auto;
}

section#ep dl h3{
	font-size:45px;
	padding:0;
	margin:0 0 50px 0;
}

section#ep dl dd{
	width:100%;
	margin:0;
	position:relative;
}

section#ep dl dd p{
	padding:0;
	margin:0;
}



@media screen and (max-width:959px) {
	section#ep dl{
	width:90%;
	}
	section#ep dl h3{
	font-size:40px;
	}
}

@media screen and (max-width:639px) {

	section#ep dl p{
		font-size:120%;
	}
}

@media screen and (max-width:414px) {
	section#ep dl{
		width:95%;
	}
	section#ep dl h3{
	font-size:30px;
	margin:0 0 1em 0;
	}
	section#ep dl p{
		font-size:90%;
		margin:0.2em 0;
	}

	section#ep dl p span{
		padding:0 0.2em;
	}
}
/*エピローグ*/





/*スマートウェルネスとは*/

section#ass{
	width:100%;
	padding:200px 0;
	position: relative;
	overflow:hidden;
}

section#ass:before {
   content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 90%;
  margin: 10% 0 10% -10%;
 	background:rgba(255, 255, 255, 0.63);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(-5deg);
  z-index: -1;
}

section#ass .image_box{
	width:90%;
	max-width:1200px;
	margin:0 auto 0 auto;
	padding:0;
}


section#ass .image_box h4{
	font-family: 'Julius Sans One', sans-serif;
	color:#000;
	font-size:50px;
	letter-spacing:0;
	margin:0;
}

section#ass .image_box h3{
	font-size:150%;
	margin:0;
}

section#ass .image_box ul{
	padding:100px 0;
	margin:0;
	display:flex;
	justify-content:space-between;
}

section#ass .image_box ul li{
	list-style:none;
}

section#ass .image_box ul li:nth-of-type(1){
	width:50%;
}

section#ass .image_box ul li:nth-of-type(1) dl img{
	width:100%;
}

section#ass .image_box ul li:nth-of-type(1) dl:nth-of-type(2){
	width:20%;
	position:relative;
}

section#ass .image_box ul li:nth-of-type(1) dl:nth-of-type(2) img{
	width:50%;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

section#ass .image_box ul li:nth-of-type(2){
	width:45%;
}


section#ass .ass_detail_box{
	width:90%;
	max-width:1200px;
	margin:auto;
	background:#fff;
	padding:50px;
	box-sizing:border-box;
}

section#ass .ass_detail_box h3{
	border-bottom:1px solid #000;
}


section#ass .pp_detail_box{
	width:90%;
	max-width:1200px;
	margin:100px auto 0 auto;
	font-size:0;
	display:flex;
	justify-content:space-between;
}

section#ass .pp_detail_box dt{
	width:50%;
}

section#ass .pp_detail_box dt h3{
	font-size:20px;
}


section#ass .pp_detail_box dt p{
}

section#ass .pp_detail_box dd{
	width:50%;
}

@media screen and (max-width:959px) {

	section#ass:before {
		width: 150%;
		margin: 10% 0 10% -20%;
	}

	section#ass .image_box h4{
		font-size:250%;
	}
	section#ass .image_box ul{
		padding:100px 0;
		display:block;
	}

	section#ass .image_box ul li:nth-of-type(1){
		width:90%;
		margin:0 auto;
	}
	section#ass .image_box ul li:nth-of-type(2){
		width:100%;
	}

	section#ass .ass_detail_box{
		width:95%;
		padding:2%;
	}


	section#ass .pp_detail_box{
		width:90%;
		margin:70px auto 0 auto;
		display:block;
	}

	section#ass .pp_detail_box dt{
		width:95%;
		margin:0 auto;
	}

	section#ass .pp_detail_box dd{
		width:90%;
		margin:0 auto;
	}

}



@media screen and (max-width:639px) {

	section#ass .image_box h4{
		font-size:200%;
	}
	section#ass .image_box h3{
		font-size:120%;
	}

	section#ass .image_box ul li:nth-of-type(1){
		width:100%;
		margin:0 auto;
	}

	section#ass .pp_detail_box dd{
		width:90%;
	}

}


@media screen and (max-width:414px) {
	
	section#ass{
		width:100%;
		padding:80px 0;
	}

	section#ass:before {
		width: 200%;
		margin: 10% 0 10% -20%;
	}

	section#ass .image_box h4{
		font-size:190%;
	}

	section#ass .image_box h4 span::before {
		content: "\A" ;
		white-space: pre ;
	}
	section#ass .image_box ul{
		padding:30px 0;
		display:block;
	}

	section#ass .ass_detail_box h3{
		font-size:105%;
		 padding:0 0 0.7em 0;
	}

	section#ass .pp_detail_box dt h3{
		font-size:18px;
	}

	section#ass .pp_detail_box dd{
		width:100%;
	}


}

/*スマートウェルネスとは*/



/*スマートウェルネスライフ*/

section#life{
	width:100%;
	padding:100px 0;
	position: relative;
	overflow:hidden;
}

section#life:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 90%;
  margin: 3% -10% 0;
 	background:rgba(255, 255, 180, 0.63);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
  z-index: -1;
}


section#life .life_detail_box{
	width:90%;
	max-width:1200px;
	margin:0 auto;
	padding:100px 0 0 0;
}


section#life .life_detail_box h4{
	font-family: 'Julius Sans One', sans-serif;
	color:#000;
	font-size:50px;
	letter-spacing:0;
	margin:0;
}

section#life .life_detail_box h3{
	font-size:150%;
	margin:0 0 50px 0;
}


section#life .life_detail_box ul{
	margin:100px 0 0 0;
	padding:0;
}

section#life .life_detail_box ul li{
	list-style:none;
	display:flex;
	margin:0 0 100px 0;
}

section#life .life_detail_box ul li dt{
	width:50%;
}

section#life .life_detail_box ul li dt h5{
	font-size:18px;
	  position: relative;
  line-height: 2em;
  padding:0.25em 1em;
  display: inline-block;
  margin:0;
}

section#life .life_detail_box ul li dt h5:before,
section#life .life_detail_box ul li dt h5:after { 
  content:'';
  width: 15px;
  height: 15px;
  position: absolute;
  display: inline-block;
}

section#life .life_detail_box ul li dt h5:before {
  border-left: solid 1px #000;
  border-top: solid 1px #000;
  top:0;
  left: 0;
}

section#life .life_detail_box ul li dt h5:after {
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
  bottom:0;
  right: 0;
}



section#life .life_detail_box ul li dd{
	width:50%;
}



@media screen and (max-width:959px) {
	
	section#life:before {
		width:150%;
		margin: 3% -20% 0;
	}
	section#life .life_detail_box h4{
		font-size:250%;
	}

	section#life .life_detail_box ul li{
		display:inline-block;
	}
	

	section#life .life_detail_box ul li dt{
		width:100%;
	}

	section#life .life_detail_box ul li dt h5{
		width:60%;
		font-size:120%;
		text-align:center;
		display:block;
		margin:auto;
	}

	section#life .life_detail_box ul li dd{
		width:100%;
		margin:30px auto 0 auto;
	}


}



@media screen and (max-width:639px) {

	section#life .life_detail_box h4{
		font-size:200%;
	}

	section#life .life_detail_box h3{
		font-size:120%;
		margin-bottom:30px;
	}

	section#life .life_detail_box ul li dt h5{
		width:80%;
	}

}

@media screen and (max-width:414px) {
	section#life .life_detail_box{
		width:95%;
		padding:0;
	}
	section#life .life_detail_box h4{
		font-size:190%;
	}
	section#life:before {
		width:200%;
		margin: 3% -20% 0 -30%;
	}
	section#life .life_detail_box ul li dt h5{
		font-size:100%;
		width:100%;
		display:inline-block;
		box-sizing:border-box;
	}


}
/*スマートウェルネスライフ*/





/*取り組み*/

section#act{
	width:100%;
	padding:100px 0;
	position:relative;
	overflow:hidden;
}

section#act:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 90%;
  margin: 10% 0 10% -10%;
 	background:rgba(180,255,180,0.3);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  z-index: -1;
}



section#act .act_detail_box{
	width:90%;
	max-width:1200px;
	margin:0 auto;
	padding:100px 0;
}
section#act .act_detail_box h4{
	font-family: 'Julius Sans One', sans-serif;
	color:#000;
	font-size:50px;
	letter-spacing:0;
	margin:0;
}
section#act .act_detail_box h3{
	font-size:150%;
	margin:0 0 50px 0;
}

section#act .act_detail_box ul{
	padding:0;
	margin:50px 0;
}

section#act .act_detail_box ul li{
	list-style:none;
	display:flex;
	justify-content:space-between;
	margin:0 0 40px 0;
}

section#act .act_detail_box ul li dt{
	width:55%;
}

section#act .act_detail_box ul li dt h5{
	font-size:120%;
	margin:0;
}

section#act .act_detail_box ul li dd{
	width:45%;
}


section#act .act_detail_box ul li dd img{
	width:100%;
	border: 7px solid #fff;
	box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3);
}


@media screen and (max-width:959px) {

	section#act:before {
 	width: 150%;
  	margin: 10% 0 10% -20%;
	}


	section#act .act_detail_box h4{
	 font-size:250%;
	}
}


@media screen and (max-width:639px) {

	section#act .act_detail_box h4{
		font-size:200%;
	}
	section#act .act_detail_box h3{
		font-size:120%;
	}

	section#act .act_detail_box ul li{
	display:inline-block;
	justify-content:initial;
	margin:0 0 70px 0;
	}

	section#act .act_detail_box ul li dt{
		width:100%;
	}
	section#act .act_detail_box ul li dd{
		width:80%;
		box-sizing:border-box;
	}
}

@media screen and (max-width:414px) {
	section#act .act_detail_box{
		padding:0;
	}
	section#act .act_detail_box h4{
		font-size:190%;
	}
	section#act .act_detail_box ul li dd{
		width:90%;
		box-sizing:border-box;
		margin:0;
	}
}
/*取り組み*/




/*  インフォ・住まいの体感モール  */

section#info{
	width:100%;
}

section#info .store{
	width:100%;
	height:60vh;
	padding:0;
	background: url("../img/store_sw_main.jpg") center left -30vw;
	background-size:cover;
	background-attachment:fixed;
}

section#info .store dl{
	width:100%;
	height:100%;
	background: linear-gradient(-80deg, rgba(255,255,255,1) 45%, rgba(255,255,255,0) 45%);
	position:relative;
}

section#info .store dl dd{
	width:35%;
	min-width:400px;
	height:70%;
	position:absolute;
	top:0;
	bottom:0;
	right:5%;
	margin:auto 0;
	display:block;
}

section#info .store dl dd h5{
	font-size:17px;
	margin:0;
}

section#info .store dl dd h4{
	font-size:30px;
	margin:10px 0 0 0;
}

section#info .store dl dd p{
}

section#info .store dl dd li{
	list-style:none;
	margin:0 0 5px 0;
}

section#info .store dl dd li span{
	font-size:80%;
	width:70px;
	text-align:center;
	font-weight:bold;
	margin:0 10px 0 0;
	border:1px solid #000;
	display:inline-block;
}

section#info .store dl dd li a{
	color:#b75b37;
	text-decoration:none;
}



@media screen and (min-width:850px) and (max-width:959px) {

	section#info .store{
		background-position: left 90% center;
	}

	section#info .store dl{
		background: linear-gradient(-80deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%);
	}

	section#info .store dl dd{
		width:35%;
		min-width:400px;
		height:auto;
		top:3%;
		right:5%;
		display:block;
	}

}

@media screen and (max-width:849px) {

	section#info .store{
		height:100vh;
		background-position: center center;
	}


	section#info .store dl{
		background: linear-gradient(10deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 40%);
		position:relative;
	}

	section#info .store dl dd{
		position:absolute;
		height:auto;
		width:90%;
		top:initial;
		bottom:2%;
		left:2%;
		right:initial;
		display:initial;
		margin:initial;
		box-sizing:border-box;
	}

	section#info .store dl dd li{
		margin:0 3% 1% 0;
		display:inline-block;
	}

	section#info .store dl dd li:last-of-type{
		width:100%;
	}

}

@media screen and (max-width:748px) {
	section#info .store{
		background: url("../img/store_sw_main.jpg") top -30vh center;
		background-size:cover;
		background-attachment:initial;
	}
}
@media screen and (max-width:414px) {
	section#info .store{
		height:125vh;
	}
	section#info .store dl{
		background: linear-gradient(10deg, rgba(255,255,255,1) 55%, rgba(255,255,255,0) 55%);
	}
	
	section#info .store dl dd{
		width:98%;
		min-width:initial;
	}
	section#info .store dl dd li{
		display:block;
		margin:0 3% 0 0;
	}
	section#info .store dl dd h5{
		font-size:95%;
	}
}


/*  インフォ・住まいの体感モール  */



/*  インフォ・サービス  */

section#info .divsion{
	width:95%;
	padding:200px 0 0 0;
	margin:auto;
}

section#info .divsion h4{
	font-family: 'Julius Sans One', sans-serif;
	color:#000;
	font-size:50px;
	letter-spacing:0;
	margin:0;
	text-align:center;
}
section#info .divsion h3{
	font-size:150%;
	text-align:center;
	
}


section#info .divsion p{
	width:50%;
	margin:0 auto;
}

section#info .divsion ul{
	width:90%;
	max-width:1200px;
	margin:0 auto;
	padding:70px 0;
	display:flex;
	justify-content: space-between;
}

section#info .divsion ul li{
	width:49%;
	height:300px;
	list-style:none;
	position:relative;
	box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3);
	transition: 0.3s;
}

section#info .divsion ul li a{
	color:#000;
	display:inline-block;
	width:100%;
	height:100%;
}

section#info .divsion ul li:hover {
	opacity:1;
	-webkit-transform: translate(7px, 7px);
	-moz-transform: translate(7px, 7px);
	-ms-transform: translate(7px, 7px);
	-o-transform: translate(7px, 7px);
	transform: translate(7px, 7px);
	-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}


section#info .divsion ul li:nth-of-type(1){
	background: url("../img/div_sw_image_hou.jpg") center center;
	background-size:cover;
	transition: 0.3s;
}

section#info .divsion ul li:nth-of-type(1) h5{
	font-size:15px;
	position:absolute;
	margin:0;
	bottom:10px;
	right:10px;
	
}

section#info .divsion ul li:nth-of-type(1) h5 span{
	background:#fff;
	padding:0.2em 1em;
}

section#info .divsion ul li:nth-of-type(1) h5 span em{
	font-style:normal;
}

section#info .divsion ul li:nth-of-type(1) img{
	position:absolute;
	width:130px;
	top:-10%;
	left:2%;
}

section#info .divsion ul li:nth-of-type(2){
	background: url("../img/div_sw_image_reno.jpg") center center;
	background-size:cover;
}

section#info .divsion ul li:nth-of-type(2) h5{
	font-size:15px;
	position:absolute;
	margin:0;
	bottom:10px;
	right:10px;
}

section#info .divsion ul li:nth-of-type(2) h5 span{
	background:#fff;
	padding:0.2em 1em;
}

section#info .divsion ul li:nth-of-type(2) h5 span em{
	font-style:normal;
}

section#info .divsion ul li:nth-of-type(2) img{
	position:absolute;
	width:400px;
	top:-10%;
	left:2%;
}



@media screen and (max-width:959px) {

	section#info .divsion h4{
	font-size:250%;
	}

	section#info .divsion p{
		width:90%;
		margin:0 auto;
	}

	section#info .divsion ul{
		margin:0 auto;
		display:block;
		padding-bottom:0 !important;
	}
	

	section#info .divsion ul li{
		width:80%;
		height:300px;
		margin:0 auto 100px auto;
	}
}

@media screen and (max-width:939px) {
	
	section#info .divsion ul li{
		width:100%;
		height:300px;
		margin:0 auto 100px auto;
	}
}


@media screen and (max-width:414px) {

	section#info .divsion{
		padding:50px 0 0 0;
	}

	section#info .divsion h4{
		font-size:190%;
	}
	section#info .divsion h3{
		font-size:110%;
	
	}
	section#info .divsion h3 span::before {
	content: "\A" ;
	white-space: pre ;
	}
	section#info .divsion ul{
		width:95%;
		margin:20px auto 0 auto;
		padding:0;
	}
	section#info .divsion ul li{
		width:100%;
		height:300px;
	}
	section#info .divsion ul li:nth-of-type(1) img{
		width:100px;
		top:-5px;
		left:2%;
	}
	section#info .divsion ul li:nth-of-type(1) h5{
		font-size:80%;
		background:#fff;
		padding:0.2em 0.5em;
	}
	section#info .divsion ul li:nth-of-type(1) h5 span {
		padding:0;
		background:none;
	}
	section#info .divsion ul li:nth-of-type(1) h5 span em::before {
		content: "\A" ;
		white-space: pre ;
	}
	section#info .divsion ul li:nth-of-type(2) img{
		width:95%;
		top:-20px;
		left:2%;
	}
	section#info .divsion ul li:nth-of-type(2) h5{
		font-size:80%;
		background:#fff;
		padding:0.2em 0.5em;
	}
	section#info .divsion ul li:nth-of-type(2) h5 span {
		padding:0;
		background:none;
	}
	section#info .divsion ul li:nth-of-type(2) h5 span em::before {
		content: "\A" ;
		white-space: pre ;
	}


}
/*  インフォ・サービス  */



footer{
	width:300px;
	margin:auto;
}

footer img{
	margin:0 0 40px 0;
	filter: drop-shadow(0.5px 0.5px 1px rgba(0, 0, 0, 0.2));
}


footer dd{
	font-family: 'Julius Sans One', sans-serif;
	margin:20px 0;
	text-align:center;
}