header { position: relative;}

.top_header {background: -moz-linear-gradient(to bottom,#e7f6f7,#f5faff 50%,#e0e7fc); 
background: -webkit-linear-gradient(to bottom,#e7f6f7,#f5faff 50%,#e0e7fc); 
background: linear-gradient(to bottom,#e7f6f7,#f5faff 50%,#e0e7fc);}

/* ↓スマホ */
@media all and (max-width: 767px) {
	/*トップ画像*/
	header .top_header_img{
		display: block;
		width:100%;
		padding-top: 56.25%;
		margin:0;
		position: relative;
		background-size: contain;
		background-position:center center;
	background-repeat:no-repeat;
	}
	header .top_header_img img{
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height:100%;
		
	}
	main{
		margin-top: 0;
		padding:0;
	}
	/*ローディングエリア*/
	#loadarea {
		/* width: 960px; */
		padding:20px 0;
		text-align: left;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		min-height: 650px;
	}
	#loadarea .loadItem {
		padding: 0 6px;
		margin:0 0 25px 0;
		width: 50%;
		/* margin-right: 30px;
		margin-bottom: 40px; */
		box-sizing: border-box;
		position:relative;
		display: flex;
		flex-direction: column;
		border-right: solid 1px #e5e5e5;
	}
	#loadarea .loadItem:nth-child(even),
	#loadarea .loadItem:last-child{
		border-right: none;
	}
	#loadarea .loadItem .pin{
		position: absolute;
		top:-12px;
		right:0;
		display: block;
		width: 32px;
		height:32px;
		background-image: url(../img/parts/pin.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index:1;
	}
	#loadarea .loadItem .thumb {
		display: block;
		width:100%;
		padding-top: 56.25%;
		margin:0;
		background:#e5e5e5;
		background-size:cover;
		position: relative;
		/* border-top: solid 1px #e5e5e5;
		border-bottom: solid 1px #e5e5e5; */
		border: solid 1px #e5e5e5;
		box-sizing: border-box;
	}
	#loadarea .loadItem .thumb img{
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height:100%;
	}
	#loadarea .loadItem a{
		color:#333;
		text-decoration: none
	}
	#loadarea .loadItem a:hover h3{
		color:#666;
		text-decoration: none
	}
	#loadarea .loadItem p.date {
		display:block;
		line-height: 18px;
		font-size:12px;
	}
	#loadarea .loadItem h3 {
		font-size: 14px;
		line-height: 160%;
		padding:0 0 10px 0;
	}
	#loadarea .loadItem h3 + p{
		font-size: 75%;
		padding:0 0 10px 0;
	}
	#loadarea .loadItem .itemFotter{
		/* position: absolute;
		left:0;
		bottom:0; */
		margin-top: auto;
		padding: 0 5px 10px 5px;

		text-align: right;
		box-sizing: border-box;
		background:#f2f2f2;
	}
	#loadarea .loadItem .itemFotter div:first-child{
		display: inline-block;
		font-size:12px;
		font-weight: bold;
		padding:5px;
		margin-bottom: 5px;
		background: linear-gradient(0deg, rgba(185, 227, 236, 1) 10px, rgba(255, 255, 255, 0) 10px);
	}
	#loadarea .loadItem .itemFotter div.tag span{
		display: inline-block;
		margin-left: 5px;
		font-size:12px;
		font-weight: normal;
	}
	#loadarea .loadItem .itemFotter div.tag span:first-child{
		margin-left: 0;
	}
	#loadarea .loadItem.hide{
		display:none;
	}
	/* 読み込み失敗
	--------------------------- */
	#loadarea .failed{
		font-weight: bold;
		color:#f00;
		margin:1.0em auto;
		line-height: 1.5em;
		text-align: center;
	}
}
/* ↑スマホ */
/* ↓PC */
@media all and (min-width: 768px) {
/*トップ画像*/
	.top_header {width:960px; margin: 0 auto;}
	header .top_header_img{
		display: block;
		width:960px;
		height:480px;
		margin: 0 auto;
		background-size: contain;
		background-position:center center;
	background-repeat:no-repeat;
	}
/*ローディングエリア*/
	#loadarea {
		margin: 0 auto;
		width: 960px;
		padding:35px 10px;
		text-align: left;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		min-height: 760px;
	}
	#loadarea .loadItem {
		padding: 0;
		width: 300px;
		margin-right: 30px;
		margin-bottom: 40px;
		box-sizing: border-box;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		background:#fff;
		position:relative;
		display: flex;
  flex-direction: column;
	}
	#loadarea .loadItem:nth-child(3n){
		margin-right: 0;
	}
	#loadarea .loadItem .pin{
		position: absolute;
		top:-20px;
		right:-20px;
		display: block;
		width: 55px;
		height:55px;
		background-image: url(../img/parts/pin.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index:1;
	}
	#loadarea .loadItem a{
		color:#333;
		text-decoration: none
	}
	#loadarea .loadItem a:hover h3,
	#loadarea .loadItem a:hover p{
		color:#666;
		text-decoration: none
	}
	#loadarea .loadItem .thumb {
		margin: 0;
		width: 300px;
		height: 169px;
		background-color:#e5e5e5;
		background-size: cover;
		position:relative;
		border-bottom: solid 1px #e5e5e5;

	}
	#loadarea .loadItem p.date {
		display:block;
		line-height: 30px;
		font-size:75%;
		padding-left:10px;
	}
	#loadarea .loadItem h3 {
		line-height: 160%;
		padding:0 10px 10px 10px;
	}
	#loadarea .loadItem h3 + p{
		font-size: 85%;
		padding:0 10px 10px 10px;
	}
	#loadarea .loadItem .itemFotter{
		/* position: absolute;
		left:0;
		bottom:0; */
		margin-top: auto;
		padding: 10px 5px 10px 5px;

		text-align: right;
		box-sizing: border-box;
		background:#f2f2f2;
	}
	#loadarea .loadItem .itemFotter div:first-child{
		display: inline-block;
		font-size:14px;
		font-weight: bold;
		padding:5px 10px;
		margin-bottom: 10px;
		background: linear-gradient(0deg, rgba(185, 227, 236, 1) 10px, rgba(255, 255, 255, 0) 10px);
	}
	#loadarea .loadItem .itemFotter div.tag span{
		display: inline-block;
		margin-right: 10px;
		font-size:14px;
		font-weight: normal;
	}
	#loadarea .loadItem .itemFotter div.tag span:last-child{
		margin-right: 0;
	}

	#loadarea .loadItem.hide{
		display:none;
	}
	/* 読み込み失敗
	--------------------------- */
	#loadarea .failed{
		font-weight: bold;
		color:#f00;
		margin:1.0em auto;
		line-height: 1.5em;
		text-align: center;
	}

	/*アコーデオンメニュー*/
	header .accordion-unit .accordion-box {
		transition-duration:500ms;
		transition-timing-function:ease-in-out;
		transition-property:height,opacity,margin-bottom;
	}

	header .accordion-close .accordion-box {
		height:0;
		opacity: 1;
		margin-bottom:0;
	}
	header .accordion-open .accordion-box {
		height:auto;
		opacity: 1;
		margin-bottom:10px;
	}

}
/* ↑PC */


/*	instagram（メインエリア）
============================== */
div.insta {
background: -moz-linear-gradient(to bottom,#e7f6f7,#f5faff 50%,#e0e7fc); 
background: -webkit-linear-gradient(to bottom,#e7f6f7,#f5faff 50%,#e0e7fc); 
background: linear-gradient(to bottom,#e7f6f7,#f5faff 50%,#e0e7fc);
}
div.insta ul li {
	width:100%;
}
div.insta ul li span, div.insta ul li a, div.insta ul li a img {
	display:block;
}
div.insta ul li a, div.insta ul li a img {
	background-position:center center;
	background-repeat:no-repeat;
}
div.insta ul li a {
	background-size:cover;
	position:relative;
	/*height:0;
	padding-top:100%;*/
}
div.insta ul li a:hover img {
	background-color:hsla(216,82%,13%,0.25);
}
div.insta ul li a img {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.insta ul li a img.icon-video {
	background-image:url(/um/img/play.png);
}

.capInsta { position: relative;}
.capInsta a {color: #000;}
.capInsta span { background-position: left center; background-repeat: no-repeat; background-image:url(../img/top/icon_instagram.png); background-size: 22px 22px; padding:5px 0 5px 25px; font-size: 0.8em; font-weight: bold; display: inline-block; position: absolute; bottom:5px; right:5px;
text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

@media all and (min-width: 768px) {
div.insta {padding: 0; width:960px; max-height: 480px; margin: 0 auto;}
div.insta ul li a {
	background-size:auto 480px;
	height:480px;
}
.capInsta {width: 960px; margin: 0 auto;} 
}
@media all and (max-width: 767px) {
div.insta {}
div.insta ul li a {
	background-size:auto 220px;
	height:220px;
}
.capInsta span {background-size: 16px 16px; padding:3px 0 3px 20px; font-size: 0.4em;}
}




div.loadItem a[href="javascript:void(0)"] {
		cursor:default;
}

/*plus*/
#info_txt { box-sizing: border-box; width: 98%; max-width: 960px; margin: 2em auto .5em auto; font-size: 90%; text-align: left; line-height: 150%;}
#info_txt .bt { font-weight: bold;}
.line_all { padding: 1em; color: rgba(76, 142, 32, 1);}
.all_sp { width: 100%; padding-bottom: 18%; margin-bottom: .5em; background-image: url(../img/icon/csr_all.png); background-repeat: no-repeat; background-position: bottom right; -webkit-background-size: contain; background-size: contain; color: rgba(18, 136, 202, 1);}

.line_edu { padding: 1.5em 11% 1.5em 18%; border: 1px solid rgba(241, 158, 56, 1); color: rgba(211, 128, 26, 1); font-size: 85%; background-color: #fff; background-image: url(../img/icon/csr_edu1.png),  url(../img/icon/csr_edu2.png); background-repeat: no-repeat, no-repeat; background-position: top left,  bottom right; -webkit-background-size: 80px,  80px; background-size: 80px,  80px;}
.line_env { padding: 1.5em 11% 1.5em 18%; border: 1px solid rgba(116, 158, 67, 1); color: rgba(86, 128, 37, 1); font-size: 85%; background-color: #fff; background-image: url(../img/icon/csr_env1.png),  url(../img/icon/csr_env2.png); background-repeat: no-repeat, no-repeat; background-position: top left,  bottom right; -webkit-background-size: 80px,  80px; background-size: 80px,  80px;}
.line_soc { padding: 1.5em 11% 1.5em 18%; border: 1px solid rgba(202, 76, 76, 1); color: rgba(172, 46, 46, 1); font-size: 85%; background-color: #fff; background-image: url(../img/icon/csr_soc1.png),  url(../img/icon/csr_soc2.png); background-repeat: no-repeat, no-repeat; background-position: top left,  bottom right; -webkit-background-size: 80px,  80px; background-size: 80px,  80px;}
.line_sup { padding: 1.5em 11% 1.5em 18%; border: 1px solid rgba(208, 205, 69, 1); color: rgba(148, 145, 9, 1); font-size: 85%; background-color: #fff; background-image: url(../img/icon/csr_sup1.png),  url(../img/icon/csr_sup2.png); background-repeat: no-repeat, no-repeat; background-position: top left,  bottom right; -webkit-background-size: 80px,  80px; background-size: 80px,  80px;}
.line_int { padding: 1.5em 11% 1.5em 18%; border: 1px solid rgba(82, 180, 233, 1); color: rgba(52, 150, 203, 1); font-size: 85%; background-color: #fff; background-image: url(../img/icon/csr_int1.png),  url(../img/icon/csr_int2.png); background-repeat: no-repeat, no-repeat; background-position: top left,  bottom right; -webkit-background-size: 80px,  80px; background-size: 80px,  80px;}

@media (min-width: 768px) { 
#info_txt { width: 96%; margin: 3em auto 0 auto; letter-spacing: .1em; font-size: 110%;}
.all_sp { box-sizing: border-box; padding-bottom: 13%; padding-right: 30%; margin-bottom: 0;}

.line_edu, .line_env, .line_soc, .line_sup, .line_int { padding: 2em 10%; -webkit-background-size: contain,  contain; background-size: contain,  contain;}

}