﻿
#head {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
	    margin: 0 auto;

}
#head .logo img {
    width: 170px;
}
#head .back img {
    width: 130px;
}
/*特集
--------------------------------------*/


#main{ 
padding:6px; 
box-sizing:border-box; 
width:100%; 
min-width:320px; 
max-width:640px; 
margin:auto; 
} 
.title 
img{ 
width:100%; 
} 
h2.headingMiddle {
    position: relative;
    padding-bottom: 0.8em;
    border-bottom: 3px solid #DDD;
    font-size: 1.125em;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}
h2.headingMiddle::after {
    position: absolute;
    content: " ";
    border-bottom: solid 3px #E5002D;
    bottom: -3px;
    width: 10.5%;
    display: block;
}
	
#top5{
    text-align:center;
	margin:0px;
	padding: 6px 6px;
	background-color: #c7000b;
    text-align:center;
	max-width: 100%;
    margin: auto;
	}
 
 #top5 li img{
 	/*position:absolute;*/
	width:100%;
	/*height:100%;
	top:0;
	left:0px;*/
 	}
 #top5 .inner{
 	background-color:#ffffff;
	padding: 10px 10px;
    border-radius: 10px;
 	}	
	
.osusume{ 
text-align:center; 
margin:0; 
padding:0; 
} 

@media only screen and (max-width: 1080px) {
.osusume_btn li{
position: relative;
display: inline-block;
float: left;
width: 33%;
}
.osusume li{ 
position:relative; 
display: inline-block; 
width: 25%; 
float: left; 
margin: -0.5px 
} 
	
#top5 li{
 	/*width:30%;
	height:186px;
	width:135px;*/
	position:relative;
	display:inline-block;
 	}	
}

	
@media only screen and (max-width: 767px) {
.osusume_btn li{
position: relative;
display: inline-block;
float: left;
width: 50%;
}
.osusume li{ 
position:relative; 
display: inline-block; 
width: 33%; 
float: left; 
margin: -0.5px 
} 
	}

@media only screen and (max-width: 375px) {
.osusume_btn li{
position: relative;
display: inline-block;
float: left;
width: 50%;
}
.osusume li{ 
position:relative; 
display: inline-block; 
width: 50%; 
float: left; 
margin: -0.5px 
} 
#top5 li{
 	width:45%;
	height:186px;
	/*width:135px;*/
	position:relative;
	display:inline-block;
 	}
.maindesign ul.cover_2 li {
    width: 100%;
}
}

.osusume 
li 
img{ 
width:100%; 
display: block; 
} 

.osusume_btn ul{
 	padding: 0;
 	}

.osusume_btn img{
	width: 100%
	}	
	
h2{ 
padding: 0.5px 0.5em;/*文字周りの余白*/ 
text-align: left; 
line-height:27px; 
font-size:18px; 
font-weight: bold; 
margin-bottom: 10px 
} 
h2#kougu 
{ 
/*color: #494949;/*文字色*/ 
/*background: #fffaf4;/*背景色*/ 
/*border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/ 
} 
h2#kaden 
{ 
/*color: #494949;/*文字色*/ 
/*background: #d6eeff;/*背景色*/ 
/*border-left: solid 5px #3FA9F5;/*左線（実線 太さ 色）*/ 
} 
h2#garden 
{ 
/*color: #494949;/*文字色*/ 
/*background: #d8f3c6;/*背景色*/ 
/*border-left: solid 5px #79c944;/*左線（実線 太さ 色）*/ 
} 
h2#nougu 
{ 
/*color: #494949;/*文字色*/ 
/*background: #9fe2c4;/*背景色*/ 
/*border-left: solid 5px #22B573;/*左線（実線 太さ 色）*/ 
} 
h2#interior 
{ 
/*color: #494949;/*文字色*/ 
/*background: #d2c5c1;/*背景色*/ 
/*border-left: solid 5px #754C24;/*左線（実線 太さ 色）*/ 
} 
h2#nitiyouhin 
{ 
/*color: #494949;/*文字色*/ 
/*background: #fbe1e9;/*背景色*/ 
/*border-left: solid 5px #FF7BAC;/*左線（実線 太さ 色）*/ 
} 

.mask01{ 
opacity:0.4; 
filter: 
alpha(opacity=40); 
-ms-filter: 
"alpha( 
opacity=40 
)"; 
background: 
#f00; 
} 
.mask02{ 
opacity:0.7; 
filter: 
alpha(opacity=70); 
-ms-filter: 
"alpha( 
opacity=70 
)"; 
/*background: 
#FFF;*/ 
} 
.hover01{ 
cursor:pointer; 
width:100%; 
height:100%; 
} 
.hover02{ 
cursor:pointer; 
} 
.hover02n{ 
cursor:pointer; 
} 
.sub_title{ 
line-height:31px !important; 
font-size:150% !important; 
font-weight: bold !important; 
padding-left:0.5em !important; 
} 
.osusume_btn {
	width:100%;
}
.maindesign .cover {
	width:100%;
	margin:10px auto;
	display:flex;
	flex-wrap:wrap;
	justify-content: left;
	align-items: stretch;
	background-color:#c7000b;
}
.maindesign .cover .box1{
	width:46%;
	padding:1%;
	margin:1%;
	background-color:#FFFFFF;
    border-radius: 10px;
	text-align:center;

}

.maindesign .cover .box1 p{
	font-size:1.2em;
	font-weight:bold;
	margin-bottom:5px;
}
.maindesign .cover .box1 img{
	width:100%;
}
@media only screen and (min-width: 767px) {

.maindesign .cover .box1{
	width:30%;
	margin:10px auto;
	background-color:#FFFFFF;
    border-radius: 10px;
	justify-content: left;
}

 

}

.maindesign ul.cover_2 {
	width:100%;
	margin:10px auto;
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items: stretch;
	
}

.maindesign ul.cover_2 li {
	margin:4px;
	float:none;
	width:98%;
    border-radius: 10px;
	position:relative;
}

.maindesign .kai{
	display:none;
}

.maindesign ul.cover_2 li.box1 a,ul.cover_2 li.box2 a,ul.cover_2 li.box3 a,ul.cover_2 li.box4 a,ul.cover_2 li.box5 a,ul.cover_2 li.box6 a{
}



.maindesign ul.cover_2 li a img{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.maindesign ul.cover_2 li a {
	padding-left:0;
}

.maindesign ul.cover_2 li p{
	font-weight:bold;
	height:118px;
	display:table-cell;
	vertical-align:middle;
	color:#FFFFFF;
	padding-left:115px;
	text-align:left;
	font-size:1.8em;
	line-height: 1.2em;
}



.maindesign ul.cover_2 li {
	width:48%;
}

.maindesign .kai{
	display: block;
}


.maindesign ul.cover_2 li {
    width: 100%;
}
.maindesign .kai{
	display: none;
}





.maindesign ul.cover_3 {
	width:100%;
	margin:1% auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:left;
	align-items: stretch;
	background-color:#c7000b;
	list-style:none;
	padding:1% 0;
}


.maindesign ul.cover_3 li.box1 {
	background-color:#FFFFFF;
    border-radius: 10px;
	position:relative;
}

.maindesign ul.cover_3 li.box1 a {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	color:#161616;
	display: block;
}

.maindesign ul.cover_3 li.box1 p {
	font-size:1.2em;
	line-height:1.3em;
	font-weight:bold;
	text-align:left;
	padding:0 5px;
}

.maindesign ul.cover_3 li.box1 p span {
	font-size:0.8em;
	line-height:1.0em;
}



@media only screen and (max-width: 1080px) {
.maindesign ul.cover_3 li.box1 {
	width: calc(25% - 4px);
    padding: 2px;
    margin: 2px;
    box-sizing: border-box;

}
}

/*	
@media only screen and (max-width: 640px) {
.maindesign ul.cover_3 {
	padding-left:0.5%;
}

.maindesign ul.cover_3 li.box1 {
	width:33%;
	padding:3px;
	float:left;
	/*margin:0.5%;
	box-sizing: border-box
}
	}
*/
@media only screen and (max-width: 767px) {
	.maindesign ul{
		padding-left:0;
	}	
.maindesign ul.cover_3 li.box1 {
	width:49%;
	padding:1%;
	margin:0.5%;
	
}

.maindesign ul.cover_3 li.box1 p {
	font-size:1.1em;
	line-height:1.2em;
}

.maindesign ul.cover_3 li.box1 p span {
	font-size:0.8em;
	line-height:1.0em;
}

}


.maindesign .gooddesign{
	border:4px solid #c7000b;
	border-radius: 10px;
	padding:2%;
	margin:2% auto;
	width:94%;
}

.maindesign .gooddesign p{
	font-size:1.6em;
	line-height:1.0em;
	color:#333333;
	font-weight:bold;
	padding-right:8%;
    background: no-repeat url(/contents/event/14_komeri_original/image_210608/arrow.gif) right center;
	background-size:15px;
}

.pc-only{
	display:none;
}
.sp-only{
	display: block;
}

