@charset "UTF-8";

/* MainVisual
======================================================================*/
.MainVisual{
    width: 100%;
    position: relative;
}
@media screen and (max-width: 767px) {
.MainVisual{
    margin-top: 60px;
}
}

.MainVisual h1{
    margin: 0 auto 60px;
    text-align: center;
    transition: all 0.3s linear;
}

@media screen and (max-width: 480px) {
.MainVisual h1 img{ 
    max-width: 180px;
    height: auto;
}
}

.MainVisual .mv-img {
    position: relative;
	max-width: 1000px;
    margin: 0 auto;
}

.MainVisual .ttlbox{
    margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
.MainVisual .ttlbox{
    margin-bottom: 30px;
}
}

/* ttlbox
======================================================================*/
.ttlbox {
    /*position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 3;*/
    position: relative;
    max-width: 412px;
    margin: -40px auto 0;
    z-index: 3;
    text-align: center;
}
@media only screen and (max-width: 767px) {
.ttlbox {
    margin: -30px auto 0;
}
.ttlbox img{
    max-width: 320px;
    height: auto;
}
}

/* PlanWrap
======================================================================*/
.PlanWrap{
    width: 100%;
    position: relative;
}

.PlanWrap h2 {
    text-align: center;
    font-size: 2.8rem;
    line-height: 1.6;
    margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
.PlanWrap h2 {
    font-size: 1.8rem;
}
}

.PlanWrap p {
    text-align: justify;
    font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
.PlanWrap p {
    font-size: 1.2rem;
    line-height: 1.9;
}
}

.multi-column {
  column-count: 2;
  column-gap: 40px;
}
@media screen and (max-width: 767px) {
.multi-column {
  column-count: 1;
  column-gap: 0px;
}
}

.PlanWrap .btn{
    width: 100%;
    text-align: center;
}

a.btn_map{
	max-width: 270px;
	height: 40px;
	font-size: 1.4rem;
	line-height: 1.0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: all 0.3s linear;
	border: 1px solid #CCCCCC;
    margin: 0 auto;
}

a.btn_map:hover{
    opacity: 0.6;
}

.plan{
    text-align: center;
}

.plan.op-01 {
    max-width: 974px;
    margin: 0 auto;
}
.plan.op-02 {
    max-width: 726px;
    margin: 0 auto;
    padding: 40px 0;
}
@media only screen and (max-width: 767px) {

.plan.op-02 {
    padding: 20px 0;
}
}

.plan.op-03 {
    max-width: 887px;
    margin: 0 auto;
}


/*-------------------------
DetailWrap
-------------------------*/
.DetailWrap {
  text-align: center;
    padding-top: 80px;
  margin-bottom: 80px;
}

@media only screen and (max-width: 767px) {
.DetailWrap {
  padding-top: 40px;
  margin-bottom: 40px;
}
}

.DetailWrap h2 {
    font-size: 2.8rem;
    line-height: 1.6;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #5f8659;
}
@media only screen and (max-width: 767px) {
.DetailWrap h2 {
    font-size: 2.0rem;
}
}

.DetailWrap h3 {
    font-size: 1.9rem;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
.DetailWrap h3 {
    font-size: 1.6rem;
    margin-bottom: 10px;
}
}

.DetailWrap h4 {
    position: relative;
    padding-top: 60px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

.DetailWrap h4::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 40px;
    background-color: #5f8659;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
.DetailWrap h4 img{
    width: auto;
    max-height: 16px;
}
}

.DetailWrap h5 {
    font-size: 2.0rem;
    text-align: left;
    line-height: 1.4;
    margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
.DetailWrap h5 {
    font-size: 1.6rem;
}
}

.DetailWrap p {
    line-height: 1.8;
    text-align: justify!important;
}

@media only screen and (max-width: 767px) {
.DetailWrap p {
    width: 100%;
}
}

.DetailWrap p.lead {
    text-align: center!important;
    margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
.DetailWrap p.lead {
    margin-bottom: 30px;
    text-align: justify!important;
}
}

.DetailWrap p.cap {
    line-height: 1.6;
}

.DetailWrap .about  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px 0;
}
@media only screen and (max-width: 767px) {
.DetailWrap .about  {
    margin: 20px 0;
}
}

.DetailWrap .about div {
    width: 47%;
}
@media only screen and (max-width: 767px) {
.DetailWrap .about div {
    width: 100%;
    margin-bottom: 30px;
}
}

.DetailWrap .about div.col-3 {
    width: 31%;
}
@media only screen and (max-width: 767px) {
.DetailWrap .about div.col-3 {
    width: 100%;
    margin-bottom: 30px;
}
}

.DetailWrap ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    padding: 20px 0;
}
@media only screen and (max-width: 767px) {
.DetailWrap ul{
    width: 96%;
    margin: 0 auto;
}
}

.DetailWrap li{
    width: 24%;
    max-width: 245px;
    /*margin: 1%;*/
    box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
.DetailWrap li{
    width: 49%;
    margin: 10px 0;
}
}

.DetailWrap li a{
    transition: all 0.3s linear;
}

.DetailWrap li a:hover{
    opacity: 0.6;
}

.DetailWrap li a p.ttl::after{
    position: absolute;
    content: '';
    width: 1px;
    height: 26px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    background-color: #231815;
}


/* detail_box */
.detail_box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    margin: 80px 0;
}
@media only screen and (max-width: 767px) {
.detail_box {
    margin: 40px 0;
}
}

.detail_box.rev {
	flex-direction:row-reverse; 
}

.detail_box .detail_img{
	width: 50%;
}
@media only screen and (max-width: 767px) {
.detail_box .detail_img{
	width: 100%;
    margin-bottom: 20px;
}
}

.detail_box .detail_txt{
	width: 45%;
}
@media only screen and (max-width: 767px) {
.detail_box .detail_txt{
	width: 100%;
}
}

.detail_box .detail_map{
	width: 100%;
}

/* information */
.DetailWrap .infobox {
    width: 100%;
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    padding-top: 40px;
}
.DetailWrap .infobox div{
    width: 48%;
    max-width: 470px;
}
@media only screen and (max-width: 767px) {
.DetailWrap .infobox div{
    width: 100%;
    max-width: 100%;
}
}

.DetailWrap table.infomation{
    width: 100%;
}
.DetailWrap table.infomation tr{
    border-bottom: 1px solid #d9d9d9;
}
/*
.DetailWrap table.infomation tr:last-child{
    border-bottom: none;
}*/
.DetailWrap table.infomation th,
.DetailWrap table.infomation td{
    padding: 5px 0;
}

.DetailWrap table.infomation th{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic Medium", "游ゴシック Medium", "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans Japanese", Meiryo, sans-serif;
    text-align: center;
    white-space: nowrap;
    min-width: 70px;
}
/*
@media only screen and (max-width: 767px) {
.DetailWrap table.infomation th{
    min-width: 70px;
}
}
*/
.DetailWrap table.infomation td{
    padding-left: 20px;
    text-align: left;
}

/* LineupWrap
======================================================================*/

.LineupWrap{
    background-color: #f2f2f2;
    padding: 80px 0;
}

.LineupWrap h2.ttl {
    text-align: center;
    position: relative;
    padding-top: 90px;
}

.LineupWrap h2.ttl::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 68px;
    background-color: #231815;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.lineup {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    margin: 80px 0;
}
@media only screen and (max-width: 767px) {
.lineup {
    margin: 40px 0;
}
}

.lineup .lineup_img{
	width: 55%;
    max-width: 547px;
}
@media only screen and (max-width: 767px) {
.lineup .lineup_img{
	width: 100%;
    margin-bottom: 20px;
}
}

.lineup .lineup_txt{
	width: 42%;
    max-width: 412px;
    display: flex;
	flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
.lineup .lineup_txt{
	width: 100%;
    margin: 0 auto;
}
}

.lineup .lineup_txt .btn{
	margin-top: auto;
    width: 100%;
}

a.btn_detail{
	width: 100%;
	height: 40px;
	font-size: 1.4rem;
	line-height: 1.0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: all 0.3s linear;
	border: 1px solid #231815;
    margin: 0 auto;
}

a.btn_detail:hover{
    opacity: 0.6;
}

.LineupWrap p.cap {
    text-align: left;
    font-size: 1.2rem;
}


/* LandWrap
======================================================================*/
.LandWrap{
    width: 100%;
    position: relative;
    border-top: 1px solid #5f8659;
    margin: 100px auto;
}
@media screen and (max-width: 767px) {
.LandWrap{
    margin: 50px auto;
}
}

.LandWrap h2 {
    text-align: center;
    font-size: 2.8rem;
    padding: 40px 0;
}
@media screen and (max-width: 767px) {
.LandWrap h2 {
    font-size: 1.8rem;
    padding: 20px 0;
}
}

.LandWrap p.lead {
    text-align: center;
}
@media screen and (max-width: 767px) {
.LandWrap p.lead {
    text-align: justify;
    line-height: 1.8;
}
}

.land_plan{
    position: relative;
    width: 100%;
    margin: 60px 0;
}
@media screen and (max-width: 767px) {
.land_plan{
    margin: 30px 0;
}
}

.land_plan .plot-01{
    width: 53%;
    position: absolute;
    top: 6%;
    left: 6%;
    z-index: 11;
}
@media screen and (max-width: 767px) {
.land_plan .plot-01{
    top: 4%;
    left: 5%;
}
}

.land_plan .plot-02{
     width: 53%;
    position: absolute;
    top: 23%;
    left: 6%;
    z-index: 11;
}
@media screen and (max-width: 767px) {
.land_plan .plot-02{
    top: 24%;
    left: 5%;
}
}

.land_plan .plot-03{
     width: 26%;
    position: absolute;
    bottom: 10%;
    left: 8%;
    z-index: 11;
}
@media screen and (max-width: 767px) {
.land_plan .plot-03{
    left: 5%;
}
}

.land_plan .plot-04{
     width: 26%;
    position: absolute;
    bottom: 2%;
    right: 7%;
    z-index: 11;
}

.land_plan .plot-01 img{
    /*max-width: 100%;*/
}

.land_plan a.btn_detail{
    max-width: 210px;
    margin: 20px 0 0 0;
}
@media screen and (max-width: 767px) {
.land_plan a.btn_detail{
    font-size: 1.0rem;
    max-width: 80px;
    height: 16px;
    margin: 8px 0 0 0;
}
}

.land_plan .plot-04 a.btn_detail{
    margin-left: 40px;
}
@media screen and (max-width: 767px) {
.land_plan .plot-04 a.btn_detail{
    margin-left: 10px;
}
}