@charset "euc-jp";


/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after { clear: both; }
.cf { *zoom: 1; }

.button {
	padding: 10px;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	border: 1px solid #fff;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background-clip: padding-box;
	display: block;
}

	.button:hover {
		background: #fff;
		color: #6c7d83;
	}

	.button--white {
		background: #fff;
		color: #6c7d83;
	}

		.button--white:hover {
			background: #6c7d83;
			color: #fff;
		}

	.push-right {
		float: right;
		clear: none;
		margin-left: 15px;
	}

	.push-left {
		float: left;
		clear: none;
		margin-right: 15px;
	}

.slide {
	background-position: center center;
	background-repeat: no-repeat;
}
	.glide { background-image: url(../img/index/top_img.jpg); }
	.simple { background-image: url(../img/index/top_img.jpg); }
	.lightweight { background-image: url(../img/index/top_img.jpg); }
	.fast { background-image: url(../img/index/top_img.jpg); }

.container {
	max-width: 960px;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: 120px;
}

.section {
	position: relative;
	max-width: 100%;
	height: 360px;
	padding: 90px;
	background: #fefefe;
	border-right: 1px solid #f3f3f3;
	border-left: 1px solid #f3f3f3;
	border-bottom: 1px solid #f3f3f3;

	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}

	.about {
		background: url(../images/bg-about.jpg) center bottom no-repeat;
	}

	.responsive {
		background: url(../images/bg-responsive.jpg) left bottom no-repeat;
	}

		.responsive .article {
			width: 250px;
		}

	.css {
		background: url(../images/bg-css.jpg) right bottom no-repeat;
	}

		.css .article {
			width: 250px;
			position: absolute;
			right: 90px;
			top: 110px;
		}

	.love { 
		height: 240px;
	}

		.list-right {
			margin-left: 20px;
			float: right;
			clear: none;
		}

		.list-left {
			margin-left: 20px;
			float: left;
			clear: none;
		}
















#index_box_01{
  margin:0 30px 30px 0;
  padding:10px;
  width:280px;
  height:130px;
  background-image:url(../img/inxex01/back_01.jpg);
  background-repeat:repeat,no-repeat;
  position:relative;
  float:left;
     border-radius: 5px;         /* CSS3 */
   -moz-border-radius: 5px;    /* Firefox */
   -webkit-border-radius: 5px; /* Safari,Chrome */
}

#index_box_01:hover{
  background-image:url(../img/inxex01/back_hover.png),url(../img/inxex01/back_01.jpg);
  background-repeat:no-repeat;
  background-position:left bottom,left top;
  position:relative; 
  
}



#index_box_02{
  margin:0 30px 30px 0;
  padding:10px;
  width:280px;
  height:130px;
  background-image:url(../img/inxex01/back_02.jpg);
  background-repeat:repeat,no-repeat;
  position:relative; 
  float:left;
     border-radius: 5px;         /* CSS3 */
   -moz-border-radius: 5px;    /* Firefox */
   -webkit-border-radius: 5px; /* Safari,Chrome */
}

#index_box_02:hover{
  background-image:url(../img/inxex01/back_hover.png),url(../img/inxex01/back_02.jpg);
  background-repeat:no-repeat;
  background-position:left bottom,left top;
  position:relative; 
  
}


#index_box_03{
  margin:0 0px 30px 0;
  padding:10px;
  width:280px;
  height:130px;
  background-image:url(../img/inxex01/back_03.jpg);
  background-repeat:repeat,no-repeat;
  position:relative;
  float:left;
     border-radius: 5px;         /* CSS3 */
   -moz-border-radius: 5px;    /* Firefox */
   -webkit-border-radius: 5px; /* Safari,Chrome */
  
}

#index_box_03:hover{
  background-image:url(../img/inxex01/back_hover.png),url(../img/inxex01/back_03.jpg);
  background-repeat:no-repeat;
  background-position:left bottom,left top;
  position:relative; 
  
}




#index_box_cb_12{
  margin:0 30px 30px 0;
  padding:10px;
  width:280px;
  height:130px;
  background-image:url(../img/inxex01/back_cb_12.jpg);
  background-repeat:repeat,no-repeat;
  position:relative; 
  float:left;
     border-radius: 5px;         /* CSS3 */
   -moz-border-radius: 5px;    /* Firefox */
   -webkit-border-radius: 5px; /* Safari,Chrome */
}

#index_box_cb_12:hover{
  background-image:url(../img/inxex01/back_hover.png),url(../img/inxex01/back_cb_12.jpg);
  background-repeat:no-repeat;
  background-position:left bottom,left top;
  position:relative; 
  
}



#index_box_bs_16{
  margin:0 30px 30px 0;
  padding:10px;
  width:280px;
  height:130px;
  background-image:url(../img/inxex01/back_bs_16.jpg);
  background-repeat:repeat,no-repeat;
  position:relative; 
  float:left;
     border-radius: 5px;         /* CSS3 */
   -moz-border-radius: 5px;    /* Firefox */
   -webkit-border-radius: 5px; /* Safari,Chrome */
}

#index_box_bs_16:hover{
  background-image:url(../img/inxex01/back_hover.png),url(../img/inxex01/back_bs_16.jpg);
  background-repeat:no-repeat;
  background-position:left bottom,left top;
  position:relative; 
  
}



#index_box_bs_32{
  margin:0 0px 30px 0;
  padding:10px;
  width:280px;
  height:130px;
  background-image:url(../img/inxex01/back_bs_32.jpg);
  background-repeat:repeat,no-repeat;
  position:relative; 
  float:left;
     border-radius: 5px;         /* CSS3 */
   -moz-border-radius: 5px;    /* Firefox */
   -webkit-border-radius: 5px; /* Safari,Chrome */
}

#index_box_bs_32:hover{
  background-image:url(../img/inxex01/back_hover.png),url(../img/inxex01/back_bs_32.jpg);
  background-repeat:no-repeat;
  background-position:left bottom,left top;
  position:relative; 
  
}




#index_box_blog{
  margin:0 40px 40px 0;
  padding:15px;
  width:430px;
  height:150px;
  background-image:url(../img/inxex01/back_blog.jpg);
  background-repeat:repeat,no-repeat;
  position:relative;
  float:left;
     border-radius: 5px;         /* CSS3 */
   -moz-border-radius: 5px;    /* Firefox */
   -webkit-border-radius: 5px; /* Safari,Chrome */
  
}

#index_box_blog:hover{
  background-image:url(../img/inxex01/back_hover.png),url(../img/inxex01/back_blog.jpg);
  background-repeat:no-repeat;
  background-position:left bottom,left top;
  position:relative; 
  
}
#index_box_blog li{
  line-height:27px;
  font-size:13px;
  padding:0 0 0 10px;
  width:420px;
  
}

#index_box_blog li:hover{
  background-color:#FFFFFF;
  
}





/* 非表示 画像 */
#index_box_01 img.title,#index_box_02 img.title,#index_box_03 img.title,#index_box_cb_12 img.title,#index_box_bs_16 img.title,#index_box_bs_32 img.title,#index_box_blog img.title{
  display:none;
}


/* 非表示 aリンク */
#index_box_01 a.hidetxt,#index_box_02 a.hidetxt,#index_box_03 a.hidetxt,#index_box_cb_12 a.hidetxt,#index_box_bs_16 a.hidetxt,#index_box_bs_32 a.hidetxt,#index_box_blog a.hidetxt{
  display:none;
}

/* 非表示 テキスト */
#index_box_01 p.text,#index_box_02 p.text,#index_box_03 p.text,#index_box_cb_12 p.text,#index_box_bs_16 p.text,#index_box_bs_32 p.text,#index_box_blog p.text{
  display:none;
}

/* 表示　テキスト */
#index_box_01:hover p.text,#index_box_02:hover p.text,#index_box_03:hover p.text,#index_box_cb_12:hover p.text,#index_box_bs_16:hover p.text,#index_box_bs_32:hover p.text,#index_box_blog:hover p.text{
  display:block;
  padding:0 0 10px 0;
}

/* 表示 aリンク */
#index_box_01:hover img.title,#index_box_02:hover img.title,#index_box_03:hover img.title,#index_box_cb_12:hover img.title,#index_box_bs_16:hover img.title,#index_box_bs_32:hover img.title,#index_box_blog:hover img.title{
  display:block;
}



/* 表示　aリンク */
#index_box_01:hover a.hidetxt,#index_box_02:hover a.hidetxt,#index_box_03:hover a.hidetxt,#index_box_cb_12:hover a.hidetxt,#index_box_bs_16:hover a.hidetxt,#index_box_bs_32:hover a.hidetxt,#index_box_blog:hover a.hidetxt{
  display:block;
  position: absolute;  
  bottom:0;  
  left:0; 
}
/* リンク場所固定 */
.bottomlink{
  position: absolute;  
  bottom: 0px;  
  left: 0px;  
  width:300px;
  height:20px;
  display:block;
}
/* リンク画像濃度100 */
.bottomlink a:hover img{ opacity:1.0; filter:alpha(opacity=100); }



.change_link {
	display: block;
	width: 20px;
	height: 20px;
	font-size: 12pt;
	background-color: #eee;
	float: left;
	margin-right: 5px;
	text-align: center;
	margin-top: 10px;
	border: 1px solid #bbb;
	text-decoration: none;
}

.home_blog_feed{
  --item_gap: 0.5em;
  --item_width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--item_gap) * -1);
  margin-bottom: 2em;
  margin-right: calc(var(--item_gap) * -1);
  margin-left: calc(var(--item_gap) * -1);
}
.home_blog_feed > *{
  box-sizing: border-box;
}
.home_blog_feed a:hover{
  text-decoration: none;
  opacity: 0.5;
}
.home_blog_feed__item{
  flex-basis: var(--item_width);
  max-width: var(--item_width);
  padding: var(--item_gap);
}
.home_blog_feed__thumb{
  position: relative;
  display: block;
  margin-bottom: 0.5em;
}
.home_blog_feed__thumb::before{
  content: "";
  display: block;
  padding-top: 75%;
}
.home_blog_feed__thumb img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home_blog_feed__date{
  font-size: 0.8em;
}
.home_blog_feed__title{
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (min-width: 768px){
  .home_blog_feed__item{
    --item_width: 33%;
  }
}