@charset "UTF-8";


/* アニメーション */
.mainvs h2,
.mainvs .main_txt,
.mainvs .main_img{
		opacity: 0;
	}
.mainvs h2,
.mainvs .main_txt{
transform: translateY(15px);
	}

.mainvs .main_img{
		animation: topmainimg 4s 0s forwards ease;
	}
.mainvs h2 {
		animation: topmtani 1s 2s forwards ease;
	}
.mainvs .main_txt {
		animation: topmtani 1s 2.4s forwards ease;
	}

@keyframes topmainimg {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes topmtani {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}



/* 767px以下SP
--------------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	
	.topmain{
		position: relative;
		padding-top: 90px;
		margin-bottom: 50px;
	}
	.mainvs{
		position: relative;
		width: 100%;
		margin: 0 auto ;
	}
	.mainvs h2{
	position: absolute;
	top: 0;
	left: 5%;
	width: 70%;
	}
	.mainvs .main_txt{
		position: absolute;
		top: 0;
		right: 5%;
		width: 4%;
	}
	.mainvs .main_img{
		width: 100%;
		padding-top: 116%;
		background:  url("../img/top/main_sp.png") center top no-repeat;
		background-size: 100%;
		position: relative;
	}
	.mainvs .main_img span{
	font-size: 11px;
	position: absolute;
	left: 10px;
	bottom: 10px;
	color: #fff;
	text-shadow: 1px 1px 2px black, -1px -1px 2px black;
	z-index: 3;
	}
	
	/* インフォ */
	.topmain .block_info{
		color: #fff;
		padding: 15px 0;
		box-sizing: border-box;
		width: 100%;
	}
	.topmain .block_info .pg_info{
		display: flex;
	}
	.topmain .block_info .font-en{
		font-size: 10px;
		border-right: solid 1px #fff;
		padding: 0 10px;
		margin-right: 10px;
		white-space: nowrap;
	}
	.topmain .block_info .box_info{
		font-size: 10px;
		flex-grow: 1;
	}
	.topmain .block_info .box_info dl{
		display: flex;
		align-items: center;
		padding-right: 10px;
	}
	.topmain .block_info .box_info dt{
		width: 7em;
	}
	.topmain .block_info .box_info dd{
		width: calc(100% - 7em);
		box-sizing: border-box;
	}
	.topmain .block_info .box_info dd a{
		color: #fff;
		display: block;
		background: url("../img/common/nav_arrow.png") right 50% no-repeat;
		background-size: 10px;
	}

	
	/**/
	.btnwrap {
		border-bottom: solid 1px #eee;
		opacity: 1;
	transform: translateY(0px);
	}
	
	.btnwrap .btn_img{
		position: relative;
	}
	.btnwrap .btn_img div {
		position: relative;
		padding-top: 54%;
		width: 100%;
	}
	.btnwrap .box_txt {
		background-color: #231815;
	}

	/**/
	.btnwrap .box_txt a{
		color: #fff;
		display: block;
		background-color: transparent;
		padding: 20px 5px 30px 20px;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.btnwrap .box_txt .pgname {
		font-size: clamp(1.375rem, 0.208rem + 2.431vw, 3.125rem);
		font-family: "Wix Madefor Text", sans-serif;
		font-weight: 400;
		
	}
.btnwrap .box_txt	.pgcatch {
		font-size: clamp(1.125rem, 0.958rem + 0.347vw, 1.375rem);
		font-weight: 400;
	margin-top: 10px;
	}
.btnwrap .box_txt	.viewbtn {
		display: inline-block;
		box-sizing: border-box;
		margin: 20px auto 0;
		padding: 10px 30px;
		transition: .3s;
		font-family: "Wix Madefor Text", sans-serif;
		font-weight: 400;
	font-size: 13px;
	border: solid 1px #fff;
	}
	.btnwrap .box_txt	.viewbtn span{
		position: relative;
  display: inline-block;
  width: 10px;
  height: 12px;
		vertical-align: middle;
		margin-right: 10px;
	}
	.btnwrap .box_txt	.viewbtn span::before,
	.btnwrap .box_txt	.viewbtn span::after{
	content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 11px;
  height: 1px;
  background-color: #fff;
  transform-origin: calc(100% ) 50%;
		transition: .5s;
	}
	.btnwrap .box_txt	.viewbtn span::before {
  transform: rotate(30deg);
}

.btnwrap .box_txt	.viewbtn span::after {
  transform: rotate(-30deg);
}
	.btnwrap1 .btn_img div {
		background: url("../img/top/img_tgc_sp.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap2 .btn_img div {
		background: url("../img/top/img_design_sp.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap3 .btn_img div {
		background: url("../img/top/img_public_sp.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap4 .btn_img div {
		background: url("../img/top/img_plan_sp.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap5 .btn_img div {
		background: url("../img/top/img_quality_sp.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap6 .btn_img div {
		background: url("../img/top/img_location_sp.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap7 .btn_img div {
		background: url("../img/top/img_access_sp.png") center 50% no-repeat;
		background-size: cover;
	}
	
	
	/* アニメーション */
	.btnwrap .btn_img,.btnwrap .box_txt .pgname,.btnwrap .box_txt .pgcatch,.btnwrap .box_txt .viewbtn{
		opacity: 0;
		transform: translateY(15px);
	}
	.btnwrap.pos_on .btn_img{
	animation: spmainimg 1.6s 0s forwards ease;
	}
	.btnwrap.pos_on .box_txt .pgname{
		animation: spmain 1s .2s forwards ease;
	}
	.btnwrap.pos_on .box_txt .pgcatch{
		animation: spmain 1s .4s forwards ease;
	}
	.btnwrap.pos_on .box_txt .viewbtn{
		animation: spmain 1s .6s forwards ease;
	}
	
}

	/* SP版cssアニメーション */
	@keyframes spmainimg {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes spmain {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}




/* 768px以上 PC
--------------------------------------------------------------------------------- */
@media print, screen and (min-width: 768px) {
	.topmain{
		position: relative;
		padding-top: 150px;
		min-width: 1000px;
	/*	animation: topmain 1.5s 0s forwards ease;*/
	}
	.mainvs{
		position: relative;
		max-width: 1600px;
		margin: 0 auto;
		}
	.mainvs h2{
	position: absolute;
	width: 45%;
	top: 0;
	left: 15%;
	}
	.mainvs .main_txt{
		position: absolute;
		top: 0;
		right: 16%;
		width: 5%;
	}
	.mainvs .main_img{
		width: 100%;		
		padding-top: 58%;
		background:  url("../img/top/main.png") center top no-repeat;
		background-size: 100%;
	}
	.mainvs .main_img span{
	font-size: 11px;
	position: absolute;
	left: 10px;
	bottom: 10px;
	color: #fff;
	text-shadow: 1px 1px 2px black, -1px -1px 2px black;
	z-index: 3;
	}
	
	/* インフォ */
	.topmain .block_info{
		width: 100%;	
		color: #fff;
		padding: 35px 0 70px;
		line-height: 1.4;
	}
	.topmain .block_info .in_info{
		width: 800px;
		margin: 0 auto;
	}
	.topmain .block_info .pg_info{
		display: flex;
	}
	.topmain .block_info .font-en{
		font-size: 20px;
		padding-right: 25px;
		padding-top: 6px;
		white-space: nowrap;
	}
	.topmain .block_info .box_info{
		font-size: 25px;
		flex-grow: 1;
		border-left: solid 1px #fff;
		padding-left: 25px;
	}
	.topmain .block_info .box_info dl{
		display: flex;
		 align-items: center;
	}
	.topmain .block_info .box_info dt{
		width: 180px;
	}
	.topmain .block_info .box_info dd{
		width: calc(100% - 105px);
	}
	.topmain .block_info .box_info dd a{
		color: #fff;
		display: block;
		background: url("../img/common/nav_arrow.png") right 50% no-repeat;
		background-size: 20px;
		padding: 3px 0;
		transition: .5s;
	}
	.topmain .block_info .box_info dd a:hover{
		opacity: 0.5;
	}
	
	/**/

	.btnwrap {
		width: 100%;
		margin: 0 auto ;
		position: relative;
		padding: 125px 0;
		opacity: 1;
	}
	
	.btnwrap .btn_img{
		position: relative;
		width: calc(50% + 60px) ;
		animation: pcmain1 1s 0s forwards ease/
	}
	.btnwrap .btn_img div {
		position: relative;
		z-index: 2;
		padding-bottom: 46%;
	}
	.btnwrap .btn_img::before{
		content: "";
		display: block;
		background-color: #443a38;
		position: absolute;
		z-index: -1;
	}
	/* 奇数 */
	.btnwrap1 .btn_img::before{
		width: 100%;
		padding-top: 49%;		
		right: -165px;
		top: -48px;
	}
	.btnwrap3 .btn_img::before{
		width: 104%;
		padding-top: 42%;		
		right: -225px;
		bottom: -48px;
	}
	.btnwrap5 .btn_img::before{
		width: 89%;
		padding-top: 50%;		
		right: -96px;
		bottom: -56px;
	}
	.btnwrap7 .btn_img::before{
		width: 46%;
		padding-top: 46%;/* 保留 */
		right: -235px;
		bottom: -62px;
	}
	/* 偶数 */
	.btnwrap2 .btn_img::before{
		width: 93%;
		padding-top: 51%;		
		right: 0px;
		bottom: -50px;
	}
	.btnwrap4 .btn_img::before{
		width: 45%;
		padding-top: 44%;		
		left: -193px;
		bottom: -72px;
	}
	.btnwrap6 .btn_img::before{
		width: 89%;
		padding-top: 44%;		
		left: -275px;
		top: -64px;
	}
	
	.btnwrap .box_txt {
		width: 480px;
		position: absolute;
		top: 50%;
		left : calc(50% + 115px) ;
		transform: translateY( calc(-50% + 50px) );
		z-index: 5;
	}
	/**/
	.btnwrap.btn_odd .btn_img {
		width: calc(50% + 66px) ;
		margin-left: calc(50% - 66px) ;
	}
	.btnwrap.btn_odd .box_txt {
		left: auto;
		right: calc(50% + 115px) ;
	}
	
	/**/
	.btnwrap .box_txt a{
		color: #fff;
		display: block;
		transition: .5s;
		background-color: transparent;
		text-align: center;
		padding: 70px 10px 60px;
		border: solid 3px #fff;
		box-sizing: border-box;
		position: relative;
	}
	.btnwrap .box_txt a::before{
		content: "";
		display: block;
		border: solid 1px #fff;
		position: absolute;
		left: 11px;
		top: 11px;
		width : calc(100% - 22px) ;
height : calc(100% - 22px) ;
	}
	.btnwrap .box_txt .pgname {
		font-size: clamp(1.375rem, 0.208rem + 2.431vw, 3.125rem);
		font-family: "Wix Madefor Text", sans-serif;
		font-weight: 400;
		
	}
.btnwrap .box_txt	.pgcatch {
		font-size: clamp(1.125rem, 0.958rem + 0.347vw, 1.375rem);
		font-weight: 400;
	margin-top: 30px;
	
	}
.btnwrap .box_txt	.viewbtn {
		display: block;
		box-sizing: border-box;
		margin: 40px auto 0;
		padding: 10px 0;
		transition: .3s;
		font-family: "Wix Madefor Text", sans-serif;
		font-weight: 400;
	font-size: 20px;
	}
	.btnwrap .box_txt	.viewbtn span{
		position: relative;
  display: inline-block;
  width: 18px;
  height: 20px;
		vertical-align: middle;
		margin-right: 15px;
	}
	.btnwrap .box_txt	.viewbtn span::before,
	.btnwrap .box_txt	.viewbtn span::after{
	content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 18px;
  height: 1px;
  background-color: #efebe8;
  transform-origin: calc(100% ) 50%;
		transition: .5s;
	}
	.btnwrap .box_txt	.viewbtn span::before {
  transform: rotate(30deg);
}

.btnwrap .box_txt	.viewbtn span::after {
  transform: rotate(-30deg);
}
	/**/
.btnwrap .box_txt	a:hover {
	opacity: 0.5;
	}

	/**/
	
	.btnwrap1 .btn_img div {
		background: url("../img/top/img_tgc.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap2 .btn_img div {
		background: url("../img/top/img_design.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap3 .btn_img div {
		background: url("../img/top/img_public.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap4 .btn_img div {
		background: url("../img/top/img_plan.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap5 .btn_img div {
		background: url("../img/top/img_quality.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap6 .btn_img div {
		background: url("../img/top/img_location.png") center 50% no-repeat;
		background-size: cover;
	}
	.btnwrap7 .btn_img div {
		background: url("../img/top/img_access.png") center 50% no-repeat;
		background-size: cover;
	}
	.und_nav_warp{
		margin-top: 100px;
	}
	
	
	/* アニメーション */
		
	.btnwrap .btn_img,.btnwrap .box_txt .pgname,.btnwrap .box_txt .pgcatch,.btnwrap .box_txt .viewbtn{
		opacity: 0;
		transform: translateY(15px);
	}
	.btnwrap .box_txt{
		opacity: 0;
		transition: .5s;
	}
	/*.btnwrap .btn_img div{
		transition: .5s;
	}*/
	/**/
	.btnwrap.pos_on .btn_img div{
		box-shadow: 15px 15px 15px 0px rgba(0, 0, 0, 0.5);
	}
	.btnwrap.pos_on .box_txt{
			opacity: 1;
	}
	.btnwrap.pos_on .btn_img{
	animation: pcmainimg 1.6s 0s forwards ease;
	}
	.btnwrap.pos_on .box_txt .pgname{
		animation: pcmain 1s .2s forwards ease;
	}
	.btnwrap.pos_on .box_txt .pgcatch{
		animation: pcmain 1s .4s forwards ease;
	}
	.btnwrap.pos_on .box_txt .viewbtn{
		animation: pcmain 1s .6s forwards ease;
	}
	
}



	/* PC版cssアニメーション */
	@keyframes pcmainimg {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes pcmain {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}