@charset "utf-8";

*{
	box-sizing: border-box;
	margin:0;
	padding:0;
	text-decoration:none;
	outline: none
}

a, a:link, a:visited{ 
	text-decoration:none;
	outline: none;
	color: #666;
}

a:hover{
	color: var(--search-color100);
}

.underW768,
.underW400
{
	display: none;
}

body{
	font-size: 14px;
	line-height: 22px;	
	background: #fff;
	overflow: auto;
}

#controlBar_bgndVideo{
	position: relative;
	bottom: -60px;
}

main{
	box-sizing: content-box;
	position: relative;
	z-index: 1;
}

/* Global Navi +++++++++++ */

header.top{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;	
	padding: 0;
	width: 100%;
	height: auto;
	/* background-blend-mode:screen; */
	background-size:   100% auto;
	background-image: url('/assets/cl_maruna/images/header_bg.jpg');
	/* border: #e7e7e7 solid; */
	border-width: 0 0 1px 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;	
	position: -webkit-sticky;
	position: sticky;
	z-index: 3;
	top: 0px;
}

header.top>a{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-content: space-between;
	align-items: center;
	
	padding: 0 12px;
	width: 100%;
	height: 84px;
}

header.top>a h1{
	width: 286px;
	height: 45px;
	background: url('/assets/cl_maruna/images/maruna_logo.webp') no-repeat;
	background-size:   100% auto;
}

header.top>a .address img{
	width: 320px;
	height: auto;
}

#container>.tagline{
	padding: 12px;
	padding: 8px 12px 6px;
	width: 100%;
	color: #fff;
	font-size: 12px;
	line-height: 14px;
	background: var(--main-key-color);
	background: var(--front-header-top-color);
}

.keyword{
	font-weight: bold;
	color: var(--main-key-color);
}


header.top nav>ul>li>a i{
	margin-left: 8px;
	display: inline-block;
	width: 14px;
	height: 14px;
	text-align: center;
	line-height: 14px;
}

#scrollNavi >ul>li{
	flex: 0 0 auto;
}

/* 768以上 ++++++++++++ */

@media only screen and (min-width: 768px) {

	.tagline.pc{
		display: block;
	}
	.tagline .sp{
		display: none;
	}
	
	
	header.top{
		height: 120px;
	}


	header.top nav{
		padding: 0 12px;
		width: 100%;
		background: var(--main-key-color);
	}

	header.top nav ul{
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;	
		align-items: center;
		height:36px;
		line-height: 28px;
	}

	header.top nav>ul>li>a{
		flex: 1 0 auto;
		display: flex;
		flex-flow: row nowrap;
		justify-content: start;	
		align-items: center;
		padding: 4px 8px;
		color: #fff;
	}

	header.top nav>ul>li.current_page_parent>a,
	header.top nav>ul li.current_page_item>a,
	header.top nav>ul>li>a:hover,
	header.top nav ul li:nth-child(2)>ul.sub-menu li a:hover,
	header.top nav ul li:nth-child(3)>ul.sub-menu li a:hover,
	header.top nav ul li:nth-child(4)>ul.sub-menu li a:hover
	{
		background: var(--search-color );
	}

	header.top nav ul li:nth-child(2)>ul.sub-menu.slideDown,
	header.top nav ul li:nth-child(3)>ul.sub-menu.slideDown,
	header.top nav ul li:nth-child(4)>ul.sub-menu.slideDown
	{
		padding: 0;
		box-shadow: 0 1px 4px rgba(26,26,26,0.2);
		opacity: 1;
	}
	
	header.top nav ul li:nth-child(2)>ul.sub-menu.slideDown,
	header.top nav ul li:nth-child(3)>ul.sub-menu.slideDown{
		height: 111px;
	}
	
	header.top nav ul li:nth-child(4)>ul.sub-menu.slideDown{
		height: 75px;
	}
	
	header.top nav ul li:nth-child(2)>ul.sub-menu li,
	header.top nav ul li:nth-child(3)>ul.sub-menu li,
	header.top nav ul li:nth-child(4)>ul.sub-menu li
	{
		width: 100%;
		border-bottom: var(--main-color-bdb) dotted 1px;
	}

	header.top nav ul li:nth-child(2)>ul.sub-menu li:last-child,
	header.top nav ul li:nth-child(3)>ul.sub-menu li:last-child,
	header.top nav ul li:nth-child(4)>ul.sub-menu li:last-child
	{
		border-bottom: 0;
	}

	header.top nav ul li:nth-child(2)>ul.sub-menu li a,
	header.top nav ul li:nth-child(3)>ul.sub-menu li a,
	header.top nav ul li:nth-child(4)>ul.sub-menu li a
	{
		display: block;
		padding: 4px 8px;
		width: 100%;
		color: #fff;
	}
}

	/* 新規ページが作成されるまで非表示
	header.top nav ul li:nth-child(3) a,
	header.top nav ul li:nth-child(4) a{
		color: #aea8a8;
	}
	header.top nav ul li:nth-child(3) a:hover,
	header.top nav ul li:nth-child(4) a:hover{
		background: var(--main-key-color);
		cursor: default;
	}
 */	

/* sub-menu +++++++++++ */


header.top  nav ul li:nth-child(2) > a i,
header.top  nav ul li:nth-child(3) > a i,
header.top  nav ul li:nth-child(4) > a i
{
	transform: rotate( 0);
}

header.top.subon  nav ul li:nth-child(2) > a i,
header.top.subon  nav ul li:nth-child(3) > a i,
header.top.subon  nav ul li:nth-child(4) > a i
{
	transform: rotate(90deg);
}


header.top nav ul li:nth-child(2),
header.top nav ul li:nth-child(3),
header.top nav ul li:nth-child(4){
	position: relative;
	z-index: 1;
}

header.top nav ul li:nth-child(2)>ul.sub-menu,
header.top nav ul li:nth-child(3)>ul.sub-menu,
header.top nav ul li:nth-child(4)>ul.sub-menu{
	display: flex;
	flex-flow: column;
	justify-content: start;
	line-height: 28px;
	
	position: absolute;
	z-index: 1;
	left: 0;
	top: 36px;
	
	padding: 0;
	width: 172px;
	height: 0;
	background: rgba(255,255,255, 1);
	background: var( --main-key-color-light);
	border-top: transparent solid 0px; 
	border-bottom: transparent solid 0px; 
	
	overflow: hidden;
	transition: all 0.3s ease-out;
	box-sizing: border-box;
}

header.top nav ul li:nth-child(4)>ul.sub-menu{
	width: 172px;
}


header#fixedMenu.scrolling{
	box-shadow: 0 0px 12px rgba(26,26,26,0.4);
}



/* SLIDER +++++++++++++++++++++++ */

#frame4slider #sliderBar img{
	width: 100%;
	height: auto;
}/**/

#sliderBar li{
position: relative;
z-index: 2;
}

#sliderBar.on{
	transition: all 0.4s cubic-bezier(0, 0.22, 0.25, 1); 
	-webkit-transition: all 0.4s cubic-bezier(0, 0.22, 0.25, 1); 
	-ms-transition: all 0.4s cubic-bezier(0, 0.22, 0.25, 1);
}

#sliderBar li.black img,
#sliderBar li.black .dam{
	background-color: #000;
}

#frame4slider{
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#container{
	background: var(--main-key-bgcolor);
}

#container div#frame4slider #sliderBar{
	display: table;
	width: 100%;
}

#container div#frame4slider li{
	position: relative;
	display: table-cell;
	vertical-align: middle;
}

#container div#frame4slider h1{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	
	top: 50%;
	left: 50%;
	z-index: 3;
	margin-left: -24vw;
	margin-top: -6vw;
	width: 48vw;
	height: 12vw;
	
	position: absolute;
	font-size: 2.3vw;/*1.6*/
	line-height: 7vw;
	text-align: center;
	color: #fff;
	/* font-family: adobe-song-std, "游明朝", "ヒラギノ明朝",  "Trebuchet MS",Verdana,Arial,Helvetica, sans-serif;
	font-style: normal;
	font-weight: 100;
	color: rgba(25,25,25,1); */	
	font-family: ro-nikkatsu-sei-kai-std, serif;
	font-weight: 400;
	font-style: normal;

}

#container div#frame4slider ul li#sld1 h1{
	background: var(--main-key-color-green);
}

#container div#frame4slider ul li#sld2 h1{
	background: var(--main-key-color-win);
}

#container div#frame4slider ul li#sld3 h1{
	background: var(--main-key-color-blue);
}

#container div#frame4slider ul li#sld4 h1{
	background: var(--main-key-color-navy);
}



/* MAIN +++++++++++++++++++++ */



main{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;	
	
	padding-bottom: 40px;
	width: 100%;
	background: #fff;
	/*border-top: #ece6ff solid 1px;
	box-shadow: 0 0px 8px rgba(100,0,100,0.02);*/
}

#primary{
	
	flex: 0 1 auto;
	margin-right: 2%;
	
	width: 72%;
	max-width: 800px;
}

#primary>section{
		padding: 20px 0;
		width: 100%;
}

#primary>section:last-child{
		padding-bottom: 0;
}

#primary>section article:last-child{
		margin-bottom: 0;
		margin-bottom: 20px;/*0512*/
}

#primary>section.announcement article:last-child{
		margin-bottom: 0;
}

/* PHILOSOPY +++++++++++++++++++++ */

section.philosofy{
	margin-top: -72px;
}

section.philosofy header{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-content: space-between;
	align-items: stretch;	
	margin-bottom: 32px;
	padding: 0;
	width: 100%;
	height: 200px;
	
}

.philosofy header div{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-content:;
	align-items:  flex-end;	
	flex: 0 1 31%;
	width: 31%;
	height: 196px;
}

section.philosofy header div.phil1{
	background: url('/assets/cl_maruna/images/phil_1.svg') no-repeat center;
}

section.philosofy header div.phil2{
	background: url('/assets/cl_maruna/images/phil_2.svg') no-repeat center;
}

section.philosofy header div.phil3{
	background: url('/assets/cl_maruna/images/phil_3.svg') no-repeat center;
}


section.philosofy header div h2{
	position: relative;
	bottom: 0;
}

section .contents p{
	/* text-align: center; */
}

#construction section.introduce article .contents p,
#top section.introduce article .contents p{
	text-align: left;
}

section .contents .textblock{
	margin-bottom: 20px;
}


/* INTRODUCE +++++++++++++++++++++ */

section.introduce{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	background: transparent;
}

section.introduce article{
	display: flex;
	flex-flow: column;
	justify-content: start;
	align-content: space-between;
	align-items: start;
	margin-right: 0;
	padding: 4px;
	width: 23.5%;
	max-width: 188px;
	background: #fff;
	box-sizing: border-box;
	flex: 0 1 auto;

}	

section.introduce article img{
	width: 100%;
	height: auto;
	object-fit: cover;
}

section.introduce article .contentsImg{
	order: 1;
	margin-bottom: 4px;
}

section.introduce article h3{
	order: 2;
}

section.introduce article .contents{
	order: 3;
}

/* AREAMAP ++++++++++++++ */

section.areamap {
	
}

section.areamap .mapBlock{
	margin-top: 24px;
	width: 100%;
	height: 256px;
	border-radius: 8px;
}

section.areamap .mapBlock>div{
	position: relative;
	top: -40px !important;
	top: 0px !important;
}

#primary section.areamap .contents #map div div.gm-style div .gm-fullscreen-control ,
#primary section.areamap .contents #map div div.gm-style div .gmnoprint { 
 	 display: none;
 }
	

section.announcement{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: center;
	align-items: center;	
	
}

section.announcement article{
	padding: 2vw 0;
	width: 31%;
	height: 100%;
	background: #efefef;
}

section.announcement article.inheritance{
	background: url('/assets/cl_maruna/images/anc_1.webp') no-repeat center;
}

section.announcement article.construction{
	background: url('/assets/cl_maruna/images/anc_2.webp') no-repeat center;
}

section.announcement article.apartment{
	background: url('/assets/cl_maruna/images/anc_3.webp') no-repeat center;
}

section.announcement article h3{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 8px;
	width: 40%;
	color: #fff;
	font-size: 13px;
	line-height: 16px;
	font-weight: bold;
	text-align: center;
	background: rgba(23, 162, 3, 0.4);
	box-sizing: border-box;
	border-radius: 50%;
}

section.announcement article h3::before {
	content: "";
	display: block;
	padding-top: 100%;
	width: 0;
}


#frame4slider #sunhome_logo{
	display: none;
}


@media only screen and (max-width: 980px) {
	section.announcement article.apartment h3{
		font-size: 10px;
		line-height: 14px;
	}
}

@media only screen and (max-width: 600px) {
	section.announcement article h3{
		font-size: 10px;
		line-height: 14px;
	}
}

@media only screen and (max-width: 480px) {
	
section.announcement article h3{
	width: 20%;
}

		
	section.announcement article{
		margin-bottom: 20px;
		padding: 8vw 0;
		width: 100%;
		height: 100%;
		background: #efefef;
		border-radius: 8px;
	}

}

/* SECONDARY ++++++++++++++ */

#secondary{
	flex: 0 0 auto;
	width: 140%;
	max-width: 200px;
	
}

#secondary > .wrapper {
	display: flex;
	flex-flow: column;
	justify-content: center;
	position: -webkit-sticky;
	position: sticky;
	z-index: 1;
	top: 124px;
	/* display: flex; */
	/* flex-flow: row nowrap; */
	/* justify-content: center; */
	/* justify-content: start; */
	/* position: absolute; */
	/* z-index: 1; */
	/* top: unset; */
	/* bottom: 0px; */
	/* left: 0; */
	/* padding: 4px; */
	/* width: auto; */
	/* height: auto; */
	/* box-sizing: content-box; */
}

#secondary aside{
	margin-bottom: 4px;
	width: 200px;
}

#secondary aside:last-child{
	margin-bottom: 0;
}

#secondary aside span,
#secondary aside a{
	display: block;
	border: var( --main-color-bdb) solid 1px;
	border-width: 1px 1px 1px 1px ;
	border-radius: 4px;
	box-sizing: border-box;
}

#secondary aside a:hover{
	/* border: var( --search-color100) solid 2px; */
	opacity: .7;
}/**/

#secondary aside a#banner_6a{
	border-radius: 4px 4px 0 0;
	border-width: 1px 1px 0 1px ;
	
}

#secondary aside a#banner_6b{
	border-radius: 0 0 4px 4px;
	border-width: 0 1px 1px 1px ;
}

#secondary aside span img,
#secondary aside a img{
	display: block;
	width: 100%;
	height: auto;
	vertical-align: middle;
	object-fit: cover;
	border-radius: 4px;
}

@media only screen and (min-width: 768px) {

	#secondary{
		margin-top: -36px;
	}
	
		
	#frame4slider #sunhome_logo{
		display: block;
		position: absolute;
		z-index: 1;
		top: 20px;
		right: 20px;
	}


	/* SIDEBAR ++++++++++++++++ */

	.lower #secondary{
		position: fixed;
		bottom: -8px;
		width: 100%;
		max-width: 100%;
	}

	.lower #secondary > .wrapper {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		position: -webkit-sticky;
		position: sticky;
		z-index: 1;
		bottom: 0;
		
	}

	.lower #secondary > .wrapper aside{
		flex: 0 1 auto;
	}

	.lower #secondary > .wrapper .sub{
		display: none;
	}

}

/* BANNER END */


@media only screen and (max-width: 1200px) {
	main{
		padding-left: 8px;
		padding-right: 8px;
		box-sizing: border-box;
	}
	
}

@media only screen and (max-width: 1200px) {
	main{
		padding-left: 8px;
		padding-right: 8px;
		box-sizing: border-box;
	}
	
}


@media only screen and (max-width: 767px) {
	header.top > a h1 {
		width: 200px;
		height: 29px;
	}
	header.top > a {
		height: auto;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	#secondary{
		overflow: hidden;
	}

	#secondary aside{
		margin-bottom: 0;
		width: auto;
	}

	#secondary aside:nth-child(6){
		display: flex;
		flex-flow: row nowrap;
		justify-content: first;
		width: auto;
		height: 74px;
		box-sizing: content-box;
	}

	#secondary aside span,
	#secondary aside a{
		display: block;
		height: 72px;
		width: auto;
		box-sizing: content-box;
	}

	#secondary aside span img,
	#secondary aside a img{
		display: block;
		height: 72px;
		width: auto;
	}




}