@charset "utf-8";

/* ========================================================
	news.css => News&Topics
======================================================== */

#footer {
	margin-top: 0;
}

/* main_block
============================================================================================================ */
.main_block {
	position: relative;
}
.main_block .bg {
	background-position: 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.main_block .text {
	position: absolute;
	top: 50%;
}
.main_block .text01{
	position: relative;
	opacity: 0;
}
.main_block .text01.active{
	opacity: 1;
	transition: 1.0s linear 1.0s;
}
.main_block .text01 > span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.ie .main_block .text01 > span {
	opacity: 0;
}
.main_block .text01 > span.ph01 {
	-webkit-mask-image: url('../images/index/main01_title_mask_top.png');
	mask-image: url('../images/index/main01_title_mask_top.png');
}
.main_block .text01 > span.ph02 {
	-webkit-mask-image: url('../images/index/main01_title_mask_under.png');
	mask-image: url('../images/index/main01_title_mask_under.png');
}
.main_block .text01 > span > span {
	display: block;
	position: absolute;
	top: -100px;
	left: -100px;
	right: -100px;
	bottom: -100px;
	background-size: cover;
	backface-visibility: hidden;
	background-attachment: fixed;
	filter: blur(6px);
	animation: mainmvanim01 10s linear infinite alternate;
}
@keyframes mainmvanim01 {
	0% {
		background-position: -50px center;
	}
	100% {
		background-position: 50px center;
	}
}
.main_block .text01 > span.ph01 > span:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	opacity: 0.1;
}
.main_block .text01 > span.ph01 > span:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	mix-blend-mode: overlay;
}
.main_block .text01 > span.ph02 > span:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	mix-blend-mode: multiply;
}
.main_block .text01 > span.ph02 > span:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	mix-blend-mode: multiply;
}
.main_block .text01 > span > span {
	animation: mainmvanim02 40s linear infinite;
}
@keyframes mainmvanim02 {
	0% {
		transform: translate(0px, -100px) rotate(5deg);
	}
	12.5% {
		transform: translate(-80px, -80px) rotate(5deg);
	}
	25% {
		transform: translate(-100px, 0px) rotate(5deg);
	}
	37.5% {
		transform: translate(-80px, 80px) rotate(5deg);
	}
	50% {
		transform: translate(0px, 100px) rotate(5deg);
	}
	62.5% {
		transform: translate(80px, 80px) rotate(5deg);
	}
	75% {
		transform: translate(100px, 0px) rotate(5deg);
	}
	87.5% {
		transform: translate(80px, -80px) rotate(5deg);
	}
	100% {
		transform: translate(0px, -100px) rotate(5deg);
	}
}
.main_block .text01.type01 > span > span {
	background-image: url(../images/index/main01.jpg);
}
.main_block .text01.type02 > span > span {
	background-image: url(../images/index/main02.jpg);
}
.main_block .text01 img {
	opacity: 0;
}
.ie .main_block .text01 img {
	opacity: 1;
}
.main_block .text02 > span {
	position: relative;
	display: inline-block;
}
.main_block .text02 > span:before {
	content: "";
	display: block;
	position: absolute;
	top: -3px;
	left: -3px;
	right: 100%;
	bottom: calc(100% + 3px);
	background-color: #FFF;
}
.main_block .text02.active > span:before {
	top: calc(100% + 3px);
	left: 100%;
	right: -3px;
	bottom: -3px;
	transition:
		top 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1.5s
		,
		left 0.8s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1.0s
		,
		right 0.8s cubic-bezier(0.770, 0.000, 0.175, 1.000) 0.3s
		,
		bottom 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) 0.0s

	;
}
.main_block .text02 > span > span {
	position: relative;
	display: inline-block;
	-webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.ie .main_block .text02 > span > span {
	opacity: 0;
}
.main_block .text02.active > span > span {
	transition: 1.0s cubic-bezier(0.770, 0.000, 0.175, 1.000) 0.5s;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.ie .main_block .text02.active > span > span {
	opacity: 1;
}
.main_block .slick-dots {
	position: absolute;
	top: 50%;
}
.main_block .slick-dots li {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}
.main_block .slick-dots li button {
	position: relative;
	overflow: hidden;
	width: 20px;
	height: 0;
	margin: 0;
	padding: 20px 0 0;
	border: 0;
	background: none;
	line-height: 20px;
	vertical-align: middle;
}
.main_block .slick-dots li button:after {
	content: "";
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	background-color: #ffffff;
	border-radius: 100%;
	transition: border .5s, background .5s;
}
.main_block .slick-dots li.slick-active button:after {
	background-color: #2c4597;
}

.main_block .bnr {
	position: absolute;
	right: 0;
	z-index: 5;
}
.main_block .bnr a {
	position: relative;
	display: table;
	width: 100%;
	text-decoration: none;
	line-height: 1.4;
	font-weight: bold;
}
.main_block .bnr a > span {
	display: table-cell;
	padding-left: 30px;
	vertical-align: middle;
}
.main_block .bnr a.openhouse {
	height: 120px;
	background-color: #2c4597;
	color: #fff;
	font-size: 1.6rem;
}
.main_block .bnr a.openhouse > div {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 135px;
	background: url(../images/index/main_openhouse_ph.jpg) no-repeat 50%;
	background-size: cover;
}
.main_block .bnr a.openhouse > * span {
	display: block;
	font-size: 2.4rem;
}
.main_block .bnr a.news {
	height: 100px;
	background-color: #1a1a1a;
	color: #b2b2b2;
	font-size: 1.8rem;
}
.main_block .bnr a.news::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-bottom: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: scaleY(.8) rotate(45deg);
}

@keyframes main_block_anime1 {
	0% {
		-webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
	}
	100% {
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}
@media screen and (min-width: 769px), print {
	.main_block::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: calc(50% - 10px);
		height: 100px;
		background-color: #fff;
		z-index: 2;
		animation: main_block_anime1 1s ease 1.0s;
	}
	.main_block .bg {
		height: calc(95vh - 100px);
		max-height: 900px;
		min-height: 770px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		backface-visibility: hidden;
	}
	.os-iOS .main_block .bg ,
	.safari .main_block .bg ,
	.os-android .main_block .bg {
		background-attachment: local;
	}
	.main_block .y_line {
		bottom: -150px;
	}
	.main_block .text {
		left: 50%;
		margin-top: -280px;
		margin-left: -500px;
		opacity: 0.8;
	}
	.main_block .text p + p {
		margin-top: 40px;
	}
	.main_block .slick-dots {
		left: 50%;
		margin-top: 120px;
		margin-left: -500px;
	}
	.main_block .slick-dots li button:hover:after {
		-webkit-transition: background .2s;
		-o-transition: background .2s;
		transition: background .2s;
		background-color: #2c4597;
	}
	.main_block .bnr {
		bottom: 100px;
		width: 370px;
	}

	.main_block .main01 {
		background-image: url(../images/index/main01.jpg);
	}
	.main_block .main02 {
		background-image: url(../images/index/main02.jpg);
	}
}
@media screen and (max-width: 768px) {
	.main_block {
		margin-bottom: 35px;
	}
	.main_block .bg {
		height: calc(100vh - 140px);
		min-height: 450px;
	}
	.main_block .y_line {
		bottom: -225px;
	}
	.main_block .text01 > span {
/*		background-attachment: local;
		width: 580px;
		height: 300px;
		transform: scale(0.456, 0.456);
		transform-origin: left top;*/
		display: none;
	}
	.main_block .text01 img {
		opacity: 0.9;
	}
	.main_block .text {
		left: 35px;
		right: 35px;
		margin-top: -160px;
	}
	.main_block .text .text01 img {
		width: 290px;
	}
	.main_block .text .text02 img {
		width: 165px;
	}
	.main_block .text p + p {
		margin-top: 20px;
	}
	.main_block .text01 {
		-webkit-mask-size: 100% auto;
		mask-size: 100% auto;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
	.main_block .slick-dots {
		left: 35px;
		margin-top: 60px;
	}

	.main_block .bnr {
		bottom: 30px;
		width: 240px;
	}
	.main_block .bnr a > span {
		padding-left: 15px;
	}
	.main_block .bnr a.openhouse {
		height: 65px;
		font-size: 1.2rem;
	}
	.main_block .bnr a.openhouse > div {
		width: 65px;
	}
	.main_block .bnr a.openhouse > * span {
		font-size: 2rem;
	}
	.main_block .bnr a.news {
		height: 50px;
		font-size: 1.6rem;
	}
	.main_block .bnr a.news::before {
		right: 15px;
	}

	.main_block .main01 {
		background-image: url(../images/index/main01_sp.jpg);
	}
	.main_block .main02 {
		background-image: url(../images/index/main02_sp.jpg);
	}
}
@media screen and (max-width: 370px) {
	.main_block .text {
		left: 25px;
		right: 25px;
	}
	.main_block .slick-dots {
		left: 25px;
		margin-top: 40px;
	}
}



/* concept_block
============================================================================================================ */
.concept_block {
	margin-bottom: 100px;
}
.concept_block header {
	position: relative;
}
.concept_block header > * {
	position: relative;
	z-index: 2;
}
.concept_block header .ff_en {
	font-size: 3rem;
	color: #cccccc;
	line-height: 1.2;
}
.concept_block header .flip_shadow {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.concept_block header .flip_shadow > * {
	height: 100%;
}
.concept_block .text .lead {
	margin-bottom: 10px;
	font-size: 2rem;
	line-height: 1.8;
	font-weight: bold;
}
@media screen and (min-width: 769px), print {
	.concept_block {
		margin-top: -200px;
	}
	.concept_block header {
		padding-top: 50px;
		height: 350px;
		z-index: 2;
		pointer-events: none;
	}
	.concept_block header h1 {
		margin: 25px 0 40px;
		font-size: 3rem;
		line-height: 1.5;
	}
	.concept_block header .btn {
		width: calc(50% - 80px - 80px);
		min-width: 380px;
		pointer-events: auto;
	}
	.concept_block header .flip_shadow {
		width: calc(50% - 60px);
	}
	.concept_block .text {
		position: relative;
		margin-left: 50%;
		margin-top: -90px;
		line-height: 2.2;
		z-index: 3;
	}
	.concept_block .text .lead {
		margin-bottom: 10px;
		font-size: 2rem;
		line-height: 1.8;
		font-weight: bold;
	}
}
@media screen and (min-width: 1180px) {
	.concept_block header h1 {
		font-size: 3.2rem;
	}
	.concept_block .text {
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 768px) {
	.concept_block {
		margin-bottom: 50px;
	}
	.concept_block header {
		margin-right: 25px;
		padding-top: 10px;
		padding-right: 15px !important;
		height: 190px;
	}
	.concept_block header h1 {
		margin: 10px 0 20px;
		font-size: 1.6rem;
		line-height: 1.5;
	}
	.concept_block header .flip_shadow {
		right: 0;
	}
	.concept_block .text {
		margin: 30px 10px 0;
	}
	.concept_block .text .lead {
		font-size: 1.8rem;
		line-height: 1.6;
	}
}
@media screen and (max-width: 370px) {
	.concept_block header {
		margin-right: 15px;
	}
	.concept_block .text {
		margin-right: 5px;
		margin-left: 5px;
	}
}



/* slide_block
============================================================================================================ */
.slide_block {
	position: relative;
	margin-bottom: 110px;
}
.slide_block::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #333333;
}
.slide_block .flip_shadow > * {
	padding: 0;
}
.slide_block .arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: #1a1a1a;
}
.slide_block .arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	margin-right: -4px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: scaleX(.8) rotate(45deg);
	-ms-transform: scaleX(.8) rotate(45deg);
	-o-transform: scaleX(.8) rotate(45deg);
	transform: scaleX(.8) rotate(45deg);
}
.slide_block .arrow.l {
	display: none !important;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.slide_block .arrow.r {
}
@media screen and (min-width: 769px), print {
	.slide_block::before {
		top: -100px;
		width: calc(50%);
	}
	.slide_block .flip_shadow {
		width: 70%;
		max-width: 940px;
		margin: auto;
	}
	.slide_block .flip_shadow::before {
		-webkit-box-shadow: 0 0 60px rgba(0,0,0,.4);
		box-shadow: 0 0 60px rgba(0,0,0,.4);
	}
	.slide_block .flip_shadow::after {
		content: "";
		position: absolute;
		top: -150px;
		right: 0;
		left: -70px;
		bottom: 0;
		background-color: #fff;
	}
	.slide_block .flip_shadow > ul {
		position: relative;
		right: 70px;
	}
	.slide_block .arrow {
		width: 70px;
	}
	.slide_block .arrow.l {
		left: -70px;
	}
	.slide_block .arrow.r {
		right: 0;
	}
}
@media screen and (max-width: 768px) {
	.slide_block {
		margin-bottom: 50px;
	}
	.slide_block::before {
		top: -25px;
		width: 30px;
	}
	.slide_block .flip_shadow {
		margin: 0 5px;
		padding-right: 25px;
	}
	.slide_block .arrow {
		width: 25px;
	}
	.slide_block .arrow.l {
		left: 0;
	}
	.slide_block .arrow.r {
		right: 0;
	}
}
@media screen and (max-width: 370px) {
	.slide_block::before {
		width: 20px;
	}
}



/* design_block
============================================================================================================ */
.design_block {
	position: relative;
	padding: 140px 0;
}
.design_block::before,
.design_block::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: 50%;
	-webkit-background-size: cover;
	background-size: cover;
}
.design_block::before {
	top: 0;
	right: 0;
	background-image: url(../images/index/design_bg_t.jpg);
}
.design_block::after {
	bottom: 0;
	left: 0;
	background-image: url(../images/index/design_bg_b.jpg);
}
.design_block li a {
	position: relative;
	display: block;
	text-decoration: none;
	color: #f7f7f7;
	background-color: rgba(0,0,0,.6);
	z-index: 3;
}
.design_block li.design02 a {
	background-color: rgba(0,0,0,.5);
}
.design_block li.design03 a {
	background-color: rgba(0,0,0,.4);
}
.design_block dl {
	position: relative;
	z-index: 5;
}
.design_block dt {
	position: relative;
	line-height: 1.3;
}
.design_block dt::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 12px;
	height: 12px;
	margin-top: -5px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: scaleX(.8) rotate(45deg);
	-ms-transform: scaleX(.8) rotate(45deg);
	-o-transform: scaleX(.8) rotate(45deg);
	transform: scaleX(.8) rotate(45deg);
}
.design_block .line {
	position: absolute;
	bottom: 0;
}
.design_block .line span {
	position: absolute;
}
.design_block .line .r {
	top: 0;
	bottom: 0;
	right: 0;
	border-right: 1px solid #d9d9d9;
}
.design_block .line .b {
	left: 0;
	bottom: 0;
	right: 0;
	border-bottom: 1px solid #d9d9d9;
}
.design_block .line span::before,
.design_block .line span::after {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: #d9d9d9;
	border-radius: 100%;
}
.design_block .line span::before {
	left: -2px;
	top: -2px;
}
.design_block .line span::after {
	right: -3px;
	bottom: -2px;
}
.design_block .line .b::after {
	content: none;
}
@media screen and (min-width: 769px), print {
	.design_block::before,
	.design_block::after {
		height: 240px;
		width: calc(66% - 100px);
	}
	.design_block::before {
		right: 20px;
	}
	.design_block ul::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		height: 190px;
		border-left: 20px solid #333333;
		z-index: 2;
	}
	.design_block ul::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		border-right: 20px solid #333333;
	}
	.design_block .line {
		right: 110px;
		height: 90px;
		left: calc(66% - 50px);
	}

	.design_block ul {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
	}
	.design_block li {
		width: 100%;
	}
	.design_block li a {
		height: 600px;
	}
	.design_block li.design01 a::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 100px;
		background: url(../images/index/design_bg01.jpg) no-repeat 50%;
		-webkit-background-size: cover;
		background-size: cover;
	}
	.design_block li a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #000;
		opacity: 0;
		transition: .5s;
	}
	.design_block dl {
		position: absolute;
		top: 50%;
		left: 12%;
		right: 12%;
		-webkit-transform: translateY(-60px);
		-ms-transform: translateY(-60px);
		-o-transform: translateY(-60px);
		transform: translateY(-60px);
		-webkit-transition: -webkit-transform .5s;
		-o-transition: -o-transform .5s;
		transition: transform .5s;
	}
	.design_block dt {
		margin-bottom: 20px;
		font-size: 3.8rem;
	}
	.design_block dt::before {
		-webkit-transition: opacity .3s;
		-o-transition: opacity .3s;
		transition: opacity .3s;
		z-index: -1;
	}
	.design_block dd {
		line-height: 2.3;
		opacity: 0;
		-webkit-transform: translateY(30px);
		-ms-transform: translateY(30px);
		-o-transform: translateY(30px);
		transform: translateY(30px);
		-webkit-transition: opacity .5s, -webkit-transform .5s;
		-o-transition: opacity .5s, -o-transform .5s;
		transition: opacity .5s, transform .5s;
	}

	.design_block li a:hover::after {
		top: 0;
		opacity: 0.8;
	}
	.design_block li a:hover dl {
		transform: translateY(-50%);
	}
	.design_block li a:hover dd {
		transform: translateY(0);
		opacity: 1;
	}
	.design_block li a:hover dt::before {
		opacity: 0;
	}
}
@media screen and (min-width: 1240px) {
	.design_block dl {
		left: 15%;
		right: 15%;
	}
}
@media screen and (max-width: 768px) {
	.design_block {
		margin-bottom: 10px;
		padding: 50px 0;
	}
	.design_block::before,
	.design_block::after {
		height: 68px;
		width: calc(50% + 15px);
	}
	.design_block ul::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 50px;
		right: 0;
		border-right: 10px solid #000;
		opacity: .6;
	}
	.design_block .line {
		right: 20px;
		height: 35px;
		left: calc(50% + 30px);
	}
	.design_block li.design01 {
		background: url(../images/index/design_bg01_sp.jpg) 50%;
		-webkit-background-size: cover;
		background-size: 100%;
	}
	.design_block dl {
		padding: 35px 5px;
	}
	.design_block dt {
		font-size: 2.5rem;
	}
	.design_block dt::before {
		width: 9px;
		height: 9px;
		margin-top: -7px;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
		-webkit-transition: -webkit-transform .5s;
		-o-transition: -o-transform .5s;
		transition: transform .5s;
	}
	.design_block dt.open::before {
		-webkit-transform: translateY(5px) rotate(315deg);
		-ms-transform: translateY(5px) rotate(315deg);
		-o-transform: translateY(5px) rotate(315deg);
		transform: translateY(5px) rotate(315deg);
	}
	.design_block dd {
		overflow: hidden;
		height: 0;
		font-size: 1.3rem;
		opacity: 0;
		-webkit-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
	}
	.design_block dt.open + dd {
		-webkit-transform: translateY(10px);
		-ms-transform: translateY(10px);
		-o-transform: translateY(10px);
		transform: translateY(10px);
		opacity: 1;
	}
}



/* project_block
============================================================================================================ */
.project_block {
}
.project_block::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background-position: 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.project_block li a {
	display: block;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	line-height: 1.6;
	color: #333333;
}
.project_block li a span {
	display: block;
}
.project_block li a .title {
	position: relative;
	background-color: #f7f7f7;
}
.project_block li a .title::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 25px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-top: 3px solid #202020;
	border-right: 3px solid #202020;
	-webkit-transform: scaleX(.8) rotate(45deg);
	-ms-transform: scaleX(.8) rotate(45deg);
	-o-transform: scaleX(.8) rotate(45deg);
	transform: scaleX(.8) rotate(45deg);
}
.project_block li a .title .ff_en {
	color: #cccccc;
	font-size: 3.2rem;
}
.project_block li a .img {
	position: relative;
	overflow: hidden;
}
.project_block li a .img::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-position: 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

.project_block li a.house .img::before {
	background-image: url(../images/index/project_house_ph.jpg);
}
.project_block li a.shop {
	color: #ffffff;
}
.project_block li a.shop .title {
	background-color: #1a1a1a;
}
.project_block li a.shop .title::before {
	border-color: #fff;
}
.project_block li a.shop .img::before {
	background-image: url(../images/index/project_shop_ph.jpg);
}
@media screen and (min-width: 769px), print {
	.project_block::before {
		height: 370px;
		background-image: url(../images/index/project_bg.jpg);
	}
	.project_block ul {
		width: 940px;
		margin: auto;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
	}
	.project_block ul li {
		width: 50%;
	}
	.project_block li a {
		font-size: 1.6rem;
	}
	.project_block li a .title {
		height: 250px;
		padding-top: 90px;
		-webkit-transition: background .2s;
		-o-transition: background .2s;
		transition: background .2s;
	}
	.project_block li a .img {
		height: 250px;
	}
	.project_block li a .img::before {
		top: -5px;
		right: -5px;
		left: -5px;
		bottom: -5px;
		-webkit-transition: -webkit-transform .5s;
		-o-transition: -o-transform .5s;
		transition: transform .5s;
	}

	.project_block li a.house:hover .title {
		background-color: #eaeaea;
	}
	.project_block li a.shop:hover .title {
		background-color: #313131;
	}
	.project_block li a:hover .img::before {
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		-o-transform: scale(1.05);
		transform: scale(1.05);
	}

	.project_block .y_line {
		top: 190px;
		bottom: 370px;
	}
}
@media screen and (max-width: 768px) {
	.project_block::before {
		height: 140px;
		background-image: url(../images/index/project_bg_sp.jpg);
	}
	.project_block li a {
		font-size: 1.2rem;
	}
	.project_block li a::after {
		content: ""; display: table; clear: both;
	}
	.project_block li a .title {
		float: right;
		width: 50%;
		height: 160px;
		padding-top: 45px;
	}
	.project_block li a .title .ff_en {
		font-size: 2.4rem;
	}
	.project_block li a .title::before {
		right: 15px;
	}
	.project_block li a .img {
		float: left;
		width: 50%;
		height: 160px;
	}

	.project_block .y_line {
		top: 95px;
		bottom: 140px;
		left: 10px;
	}
}
@media screen and (max-width: 370px) {
	.project_block .y_line {
		left: 7px;
	}
}





/* news_block
============================================================================================================ */
.news_block {
	padding-bottom: 20px;
}
.news_block .list {
}
.news_block .list li:nth-child(2n+1) {
	background-color: #f7f7f7;
}
.news_block .list a {
	position: relative;
	display: block;
	color: #000;
	padding: 25px 0;
	text-decoration: none;
	line-height: 1.5;
}
@media screen and (min-width: 769px), print {
	.news_block .list a {
		display: table;
		width: 100%;
	}
	.news_block .list a > * {
		display: table-cell;
		vertical-align: middle;
	}
	.news_block .list .time {
		width: 150px;
		white-space: nowrap;
		text-align: center;
	}
	.news_block .list .title {
	}
	.news_block .list a[href]:hover .title {
		text-decoration: underline;
	}
}
@media screen and (max-width: 768px) {
	.news_block .list {
		font-size: 1.4rem;
	}
	.news_block .list a {
		padding: 12px 15px;
	}
	.news_block .list a .time {
		margin-right: 10px;
		padding-top: 2px;
	}
	.news_block .list .cat span {
		min-width: 9em;
		padding: 2px 5px;
		font-size: 1rem;
	}
	.news_block .list .title {
		display: block;
		margin-top: 5px;
	}
}



/* instagram_block
============================================================================================================ */
.instagram_block {
	padding-right: 0;
	padding-left: 0;
}
.instagram_block li a {
	display: block;
	padding-top: 100%;
	background-repeat: no-repeat;
	background-position: 50%;
	-webkit-background-size: cover;
	background-size: cover;
}
.instagram_block {
}
.instagram_block .t {
	-webkit-animation: insta1 130s linear infinite;
	animation: insta1 130s linear infinite;
}
.instagram_block .b {
	-webkit-animation: insta2 130s linear infinite;
	animation: insta2 130s linear infinite;
}

@-webkit-keyframes insta1 {
	0% {-webkit-transform: translateX(0px);}
	100% {-webkit-transform: translateX(-2500px);}
}
@keyframes insta1 {
	0% {transform: translateX(0px);}
	100% {transform: translateX(-2500px);}
}
@-webkit-keyframes insta2 {
	0% {-webkit-transform: translateX(0px);}
	100% {-webkit-transform: translateX(2500px);}
}
@keyframes insta2 {
	0% {transform: translateX(0px);}
	100% {transform: translateX(2500px);}
}

.instagram_block .btn {
	margin-top: 50px;
}
.instagram_block .btn a {
	position: relative;
	display: block;
	width: 280px;
	margin: auto;
	padding: 8px;
	border-bottom: 3px solid #d9d9d9;
	text-decoration: none;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: #333333;
}
.instagram_block .btn a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 22px;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	background: url(../images/index/ico_insta.png) no-repeat 50%;
	-webkit-background-size: 100%;
	background-size: 100%;
	opacity: .2;
}
@media screen and (min-width: 769px), print {
	.instagram_block .wrap {
		position: relative;
		overflow: hidden;
		height: 500px;
	}
	.instagram_block ul {
		position: absolute;
		width: 5000px;
		height: 250px;
	}
	.instagram_block .t {
		top: 0;
		left: 0;
	}
	.instagram_block .b {
		bottom: 0;
		right: 0;
	}
	.instagram_block li {
		width: 250px;
		float: left;
	}
	.instagram_block .btn a:hover {
		border-bottom-color: #000;
	}
	.instagram_block .btn a:hover::after {
		opacity: 1;
	}
}
@media screen and (max-width: 768px) {
	.instagram_block .t,
	.instagram_block .b {
		-webkit-animation: none;
		animation: none;
	}
	.instagram_block li {
		float: left;
		width: 33.33%;
	}
	.instagram_block .t li:nth-child(10) ~ * {
		display: none;
	}
	.instagram_block .b li:nth-child(8) ~ * {
		display: none;
	}

	.instagram_block .btn {
		margin-top: 30px;
	}
	.instagram_block .btn a {
		width: 100%;
	}
}


/* blog_block
============================================================================================================ */
.blog_block {
}
.blog_wrap {
	position: relative;
}
.blog_list article {
	padding: 6px 10px;
}
.blog_list article a {
	position: relative;
	display: block;
	padding: 25px 30px 0;
	text-decoration: none;
	line-height: 1.8;
}
.blog_list article a time {
	color: #676767;
}
.blog_list article a h1 {
	font-size: 1.6rem;
	line-height: 1.5;
	color: #333;
}
.blog_list article a .excerpt {
	font-size: 1.4rem;
}
.blog_list article a .ph {
	padding-top: 55.6%;
	background-repeat: no-repeat;
	background-position: 50%;
	-webkit-background-size: cover;
	background-size: cover;
}
.blog_block .arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50px;
	border: 1px solid #d9d9d9;
}
.blog_block .arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	margin-right: -4px;
	border-top: 3px solid #1a1a1a;
	border-right: 3px solid #1a1a1a;
	-webkit-transform: scaleX(.8) rotate(45deg);
	-ms-transform: scaleX(.8) rotate(45deg);
	-o-transform: scaleX(.8) rotate(45deg);
	transform: scaleX(.8) rotate(45deg);
}
.blog_block .arrow.l {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.blog_block .arrow.r {
	right: -60px;
}
.blog_block .btn {
	margin-top: 70px;
}
@media screen and (min-width: 769px), print {
	.blog_wrap {
		padding: 0 15px;
	}
	.blog_list article a h3 {
		display: table;
		height: 80px;
		padding-bottom: 5px;
	}
	.blog_list article a h3 > * {
		display: table-cell;
		vertical-align: middle;
	}
	.blog_list article a .excerpt {
		display: table;
		height: 90px;
		padding-bottom: 5px;
	}
	.blog_list article a .excerpt > * {
		display: table-cell;
		vertical-align: middle;
	}

	.blog_list article a:hover {
		border-color: #666666;
		background-color: #fff;
	}
	.blog_list article a:hover .bar ,
	.blog_list article a:hover .ball {
		background-color: #000000;
	}
	.blog_block .arrow:hover {
		background-color: #666666;
	}
	.blog_block .arrow:hover::after {
		border-color: #fff;
	}
	.blog_block .arrow.l {
		left: -45px;
	}
	.blog_block .arrow.r {
		right: -45px;
	}
}
@media screen and (max-width: 768px) {
	.blog_list {
		margin: 0 -5px;
	}
	.blog_list article {
		padding: 2px 5px;
	}
	.blog_list article a {
		padding: 15px 20px;
	}
	.blog_list article a h3 {
		margin: 5px 0 10px;
	}
	.blog_list article a .excerpt {
		margin-top: 10px;
	}
	.blog_block .arrow {
		top: 50%;
		bottom: auto;
		width: 32px;
		height: 32px;
		margin-top: -16px;
		background-color: #f7f7f7;
	}
	.blog_block .arrow.l {
		left: -16px;
	}
	.blog_block .arrow.r {
		right: -16px;
	}
	.blog_block .btn {
		margin-top: 30px;
	}
}
@media screen and (max-width: 370px) {
	.blog_block .arrow.l {
		left: -13px;
	}
	.blog_block .arrow.r {
		right: -13px;
	}
}