@charset "utf-8";

/*◆◆◆◆◆
index.html用CSS
◆◆◆◆◆*/



/*-------------------------------------------------

-------------------------------------------------*/
@media screen and (min-width:769px) {
  .fb-page {
    width:300px !important;
  }
}

@media screen and (max-width:768px) {
  .fb-page,
  .fb_iframe_widget span,
  .fb_iframe_widget iframe {
    max-width:100% !important;
  }
}

#instafeed li {
	float: left;
	height: 100px;
	overflow: hidden;
	width: 50%;
}
@media screen and (max-width:768px) {
	#instafeed li {
		height: 80px;
	}
}
@media screen and (max-width:768px) {
	#sns #instagram{border-bottom:none;}
	#sns #facebook{border-bottom:1px solid #d8d8d8;}
}



/*-------------------------------------------------
バナー下大きいバナー
-------------------------------------------------*/
#app{
	background: url(../img/home/bg01.png);
}
#app .bnr_large{
}
#app .bnr_large ul{
	padding: 40px 0;
	overflow: hidden;
	margin-right: -15px;
}
#app .bnr_large li{
}
#app .bnr_large li:first-child{
	float:left;
}
#app .bnr_large li:last-child{
	float:right;
}
#app .bnr_large li.dis_table{
	display:table;
	width:48%;
	table-layout:fixed;
	padding:15px 10px;
	background:#fff;
	box-sizing:border-box;
}
#app .bnr_large li .dis_table_item{
	display:table-cell;
	padding:0 5px;
}
#app .bnr_large .text_area{
	position:relative;
	vertical-align:top;
}
#app .bnr_large .text_area .title{
	font-size:16px;
	font-weight:bold;
	color:#082B4D;
	line-height:1.6em;
}
#app .bnr_large .text_area p{
	font-size:14px;
	line-height:1.6em;
}
#app .bnr_large .text_area .btn_box{
	position:absolute;
	bottom:15px;
	left:50%;
	margin-left:-82px;
	text-align:center;
}
#app .bnr_large .text_area .btn_box img{
	width:164px;
	/*height:60px;*/
}
#app .bnr_large .img_area{
}
#app .bnr_large .img_area img{
}
@media screen and (max-width:768px) {
	#app{
		background-size: 4px 4px;
		border-top: 1px solid #082b4d;
		border-bottom: 1px solid #082b4d;
	}
	#app .bnr_large ul{
		padding: 20px;
		margin: 0;
	}

	#app .bnr_large li.dis_table{
		width:100%;
	}
	#app .bnr_large li .dis_table_item{
		display:block;
	}
	#app .bnr_large li:first-child{
		margin-bottom: 20px;
	}

	#app .bnr_large li:first-child,
	#app .bnr_large li:last-child{
		float:none;
	}
	#app .bnr_large .text_area .btn_box{
		position:static;
		margin:20px 0;
	}
	#app .bnr_large .text_area p{
		text-align:left;
	}
}



/*-------------------------------------------------
インスタグラム
-------------------------------------------------*/
#instagram{
	background-image: url("../img/home/instagram_bg_low.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}
#instagram_rgba{
	background-color: rgba(255,255,255,0.85);
	padding: 80px 0;
	overflow: hidden;
}

#instafeed{
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: visible;
}

#instafeed li{
	position: relative;
	width: 230px;
	height: 230px;
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
#instafeed li a img{
	position: absolute;
	max-width: none;
	max-height: 110%;
	width: auto;
	height: auto;
	top: 0;
	bottom: 0;
	left: -50%;
	right: -50%;
	margin: auto;
}
#instafeed li a img:hover{
	transform: scale(1.1);
	transition-duration: 1s;
}

.ttl01{
	text-align: center;
	margin-bottom: 40px;
}
.ttl01 span:last-child{
	margin-top: -8px;
}

.instalink{
	text-align: center;
	margin-top: 40px;
}

.instalink a{
	display: inline-block;
	background: #082B4D;
	font-size: 16px;
	color: #fff;
	padding: 0.5em 3em;
	border-radius: 8px;
}

@media screen and (max-width: 1440px) {
	#instafeed li{
		width: 158px;
		height: 158px;
	}
	.ttl01 span{
		margin-right: 0;
		display: block;
		clear: both;
		margin-top: 0;
	}
}

@media screen and (max-width: 768px) {
	#instagram_rgba{
		padding: 30px 0;
	}
	#instafeed{
		display: block;
		padding: 0 20px;
		overflow: hidden;
	}
	#instafeed li{
		float: left;
		width: 50%;
		height: auto;
		border: 1px solid #fff;
		box-sizing: border-box;
		box-shadow: none;
	}
	#instafeed li:before{
		content: "";
		display: block;
		padding-top: 100%;
	}
	.ttl01{
		margin-bottom: 20px;
	}
	.ttl01 span img{
		width: auto;
		height: 17px;
	}
	.instalink{
		margin-top: 20px;
	}
}



/*-------------------------------------------------
ブログ　ツイッター
-------------------------------------------------*/
#blog_twitter{
	overflow: hidden;
}
#blog_twitter #blog{
	width: 980px;
	float: left;
}
#blog_twitter #twitter{
	width: 460px;
	float: right;
	padding: 80px 0;
}

#blog-container{
	overflow: hidden;
}
#blog_twitter article{
	width: 460px;
	height: 460px;
	padding: 20px;
	margin: 0 30px 30px 0;
	float: left;
	border: 1px solid #e8e8e8;
	box-sizing: border-box;
}

#blog article .article .image{
	float: none;
	margin: 0 0 20px 0;
	width: 420px;
	height: 340px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

#blog article .article .image img{
	position: absolute;
	max-width: none;
	max-height: 110%;
	width: auto;
	height: auto;
	top: 0;
	bottom: 0;
	left: -50%;
	right: -50%;
	margin: auto;
}

#blog .article{
	margin-bottom: 0;
}

#blog .article .text .flex{
	display: flex;
	justify-content: space-between;
}

/*#blog .article .text .date{
	font-size: 14px;
}

#blog .article .text .category{
	font-size: 14px;
}*/

#blog_twitter #blog .article .text h3{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0;
	margin-top: 10px;
}

#blog_twitter #blog .article.new .image::before{
	z-index: 999;
}

.tright{
padding-right: 30px;
margin-top: -20px;
}

#twitter iframe{
	height: 995px !important;
}


@media screen and (max-width: 1440px) {
	#blog_twitter #blog{
		width: 660px;
	}
	#blog_twitter #blog::before{
		display: none;
	}
	#blog_twitter #blog #blog-container{
		width: 100%;
		right: 0;
	}
	#blog_twitter #twitter{
		width: 300px;
	}
	#blog_twitter article{
		width: 300px;
		height: 300px;
		padding: 15px;
	}
	#blog_twitter #blog .article{
		width: 100%;
		float: none;
		margin: 0;
	}
	#blog_twitter #blog .article .text h3{
		margin-top: 5px;
	}
	#blog_twitter #blog article .article .image{
		width: 100%;
		height: 200px;
	}
	#blog_twitter .tright{
		margin-right: 0;
	}

	#twitter iframe{
		height: 675px !important;
	}
}


@media screen and (max-width: 768px) {
	#blog_twitter #blog{
		float: none;
		width: 100%;
	}
	#blog_twitter #blog #blog-container{
		width: auto;
		right: 0;
	}
	#blog_twitter article{
		width: 49%;
		height: auto;
		padding: 5px;
		margin: 0 0.5% 5px;
	}
	#blog_twitter #blog .article{
		padding: 0;
		border: none;
	}
	#blog_twitter #blog .article::after{
		display: none;
	}
	#blog_twitter #blog article .article .image{
		width: 100%;
		height: auto;
		padding-top: 80%;
		margin-bottom: 10px;
	}
	#blog_twitter #blog .article.new .image::before{
		width: 60px;
		height: 60px;
		background-size: initial;
		background-position: -350px 0 !important;
		z-index: 999;
	}
	#blog_twitter #blog .article .text{
		padding: 0;
	}
	#blog_twitter #blog .article .text h3{
		margin-top: 5px;
	}
	#blog_twitter #blog .article .text .flex{
		display: block;
		position: static;
	}
	#blog_twitter #blog .article .text .date{
		display: block;
	}
	#blog_twitter #blog .tright a{
		display: inline-block;
		border: none;
	}
	#blog_twitter #twitter{
		width: auto;
		padding: 20px;
		float: none;
		background: url(../img/home/bg01.png);
		background-size: 4px 4px;
	}
	#twitter iframe{
		width: 100%;
		height: 450px !important;
	}
}



/*-------------------------------------------------
SNSボタン
-------------------------------------------------*/
#sns_btn{
	display: flex;
	justify-content: space-around;
	width: 100%;
	margin-bottom: 80px;
}
.sns_btn_item a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 240px;
	padding: 10px 0;
	background: #082b4d;
}

@media screen and (max-width: 1440px) {
	.sns_btn_item a{
	width: 160px;
	}
}

@media screen and (max-width: 768px) {
	#sns_btn{
		display: block;
		width: auto;
		padding: 20px;
		margin: 0;
	}
	.sns_btn_item a{
		width: 100%;
		border-bottom: 1px solid #fff;
		box-sizing: border-box;
		padding: 20px 0;
	}
}