@charset "utf-8";
/* /////////////////// MAP //////////////////////////// */

#map .headline-text{
  justify-content: space-between;
}

/* /////////////////////////////////////////
メイン
////////////////////////////////////////// */

#map h1{
  text-align:center;
}

#map h1 img{
  max-width:407px;
  width:45vw;
}

#map .main-image{
  margin-bottom:80px;
  object-fit: cover;
  height:50vw;
  max-height:590px;
}

#map .headline-text h2{
  font-family: toppan-bunkyu-midashi-go-std, sans-serif;
  writing-mode: vertical-rl;
  font-size:3.4rem;
  letter-spacing: 1rem;
  font-weight:800 !important;
  text-align:left;
  line-height:1.4;
  -ms-writing-mode: tb-rl;
}

#map .headline-text div{
  width:75%;
  line-height:2.6;
}

@media screen and ( max-width:820px )
{
  #map .headline-text h2{
    font-size:3.5rem;
    text-align:left;
    line-height:1.4;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }

  #map .headline-text div{
    width:70%;
  }
}

@media screen and ( max-width:760px )
{
  #map h1 img{
    width:54vw;
  }

  #map .main-image{
    margin-bottom:40px;
    height:250px;
  }

  #map .headline-text h2{
    font-size:1.6rem;
    letter-spacing:0.2rem;
    text-align:center;
    line-height:1.4;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    width:100%;
  }

  #map .headline-text div{
    width:100%;
    line-height:2;
  }
}


/* /////////////////////////////////////////
情報
////////////////////////////////////////// */

#map .information .floor-price{
  justify-content: space-between;
  margin-bottom:50px;
}

#map .information .floor-price img{
  width:65.5%;
  height:65.5%;
}

#map .information .floor-price ul.price-list, #map .information .floor-price div.price-list{
  width:30%;
}

#map .information ul.price-list li{
  background:#f2efe3; /* ベージュ */
  padding:30px;
  line-height:1.5;
  margin-bottom:30px;
}

#map .information div.price-list div{
  background:#f2efe3; /* ベージュ */
  padding:30px;
  line-height:1.5;
  margin-bottom:30px;
}

#map .information .sub-info{
  justify-content: space-between;
}

#map .information .sub-info h4{
  width:15%;
}

#map .information .sub-info div{
  width:83%;
}


#map ul.attention{
  list-style:disc;
  margin-left:1.2rem;
  margin-bottom:1.5rem;
}

@media screen and ( max-width:760px )
{
  #map .information .floor-price{
    justify-content: space-between;
    margin-bottom:25px;
  }
  
  #map .information .floor-price img{
    width:100%;
    height:100%;
    margin-bottom:20px;
  }

  #map .information .floor-price>div{
    width:100%;
  }
  
  #map .information .floor-price ul.price-list, #map .information .floor-price div.price-list{
    width:100%;
  }
  
  #map .information ul.price-list li{
    padding:15px;
    margin-bottom:15px;
  }
  
  #map .information div.price-list div{
    padding:15px;
    margin-bottom:15px;
  }

  #map .information .sub-info h4{
    width:100%;
  }
  
  #map .information .sub-info div{
    width:100%;
  }
  
  #map .information h3, h4{
    font-size:0.9rem;
    margin-bottom:4px;
  }

  #map ul.attention{
    margin-bottom:0.9rem;
  }
}

/* /////////////////////////////////////////
流れ
////////////////////////////////////////// */

#map .flow{
  text-align:center;
  margin-top:-30px;
}

#map .flow h3{
  font-size:2.1rem;
  margin-bottom:30px;
}

#map .flow h4{
  font-size:1.5rem;
  margin-bottom:50px;
}

#map .flow .flow2{ /* 流れが2つある場合 */
  justify-content: space-between;
}

#map .flow .flow2>div{
  width:45%;
}

#map .flow ul{
  margin-bottom:40px;
}

#map .flow ul li{
  position: relative;
  font-size:1.5rem;
  line-height:1.8;
  padding:20px;
  background:#f2efe3;
  margin: 0 auto;
  margin-bottom:55px;
  width:63%;
}

#map .flow .flow2 ul li{ /* 流れが2つある場合 */
  width:100%;
}


#map .flow ul li:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -17px; /* テキストと▼のスペース */
  width: 0;
  height: 0;
  border-left: 18px solid transparent; /* 三角形の幅 */
  border-right: 18px solid transparent; /* 三角形の幅 */
  border-top: 18px solid #f2efe3; /* 三角形の高さと色 */
  transform: translateX(-50%);
}

#map .flow ul li:last-child:before {
  content:none;
}

#map .flow ul li span.flow-text{
  font-size:1.1rem;
  display:block;
}

#map .button {
  background:#007F41;
  font-size:1.45rem;
  font-family: toppan-bunkyu-midashi-go-std, sans-serif;
  font-weight:600;
  color:#fff;
  padding:20px 40px;
  border-radius:100px;
  display: inline-block;
  text-align:center;
}

@media screen and ( max-width:760px )
{
  #map .flow h3{
    font-size:1.25rem;
    margin-bottom:25px;
  }
  
  #map .flow h4{
font-size:1.1rem;
    margin-bottom:20px;
  }

  #map .flow .flow2>div{
    width:100%;
  }

  #map .flow ul{
    margin-bottom:20px;
  }
  
  #map .flow ul li{
    font-size:1rem;
    line-height:1.5;
    margin-bottom:35px;
    width:90%;
  }

  #map .flow .flow2>div:nth-child(1){
    margin-bottom:40px;
  }

  #map .flow .flow2 ul li{ /* 流れが2つある場合 */
    width:90%;
  }
  
  #map .flow ul li span.flow-text{
    font-size:0.9rem;
    line-height:1.2;
  }

  #map .button {
font-size:1.1rem;
    padding:10px 15px;
    width:90%;
  }
}


/* /////////////////////////////////////////
施設のご案内
////////////////////////////////////////// */

#map .map-info h3{
  border-bottom:1px solid #007F41;
  padding-bottom:7px;
  margin-bottom:36px;
}

#map .map-info h3 img{
  width:244px;
}

#map .map-info .map-list div{
  width:23%;
  margin-bottom:5px;
  margin-right:2.66%;
}

#map .map-info .map-list div img{
  object-fit:cover;
  height:73%;
  margin-bottom:8px;
}

#map .map-info .map-list div h4{
  letter-spacing: 0;
  font-weight:800;
}

#map .map-info .map-list div:nth-child(4n+4){
  margin-right:0;
}

@media screen and ( max-width:760px )
{
  #map .map-info{
    margin-top:60px;
  }

  #map .map-info h3{
    line-height:1;
    border-bottom:1px solid #007F41;
    padding-bottom:10px;
    margin-bottom:18px;
  }

  #map .map-info h3 img{
    width:170px;
  }
  
  #map .map-info .map-list div{
    width:31%;
    margin-bottom:30px;
    margin-right:3.5%;
    line-height:1.2;
  }
  
  #map .map-info .map-list div img{
    margin-bottom:8px;
  }

  #map .map-info .map-list div h4{
    font-size:0.8rem;
  }
  
  #map .map-info .map-list div:nth-child(4n+4){
    margin-right:3.5%;
  }

  #map .map-info .map-list div:nth-child(3n+3){
    margin-right:0;
  }
}


/* /////////////////////////////////////////
レンタルスペース
////////////////////////////////////////// */
.rentalspace-bihin{
  justify-content: space-between;
  margin-bottom:50px;
}

.rentalspace-bihin>div{
  width:31%;
  margin-right:3.3%;
  display:block;
}

.rentalspace-bihin>div:last-child{
  margin-right:0;
}

.rentalspace-bihin h4{
  margin-top:5px;
  margin-bottom:0;
}

@media screen and ( max-width:760px )
{
  .rentalspace-bihin{
    margin-bottom:25px;
  }

  .rentalspace-bihin>div{
    width:100%;
    margin-right:0;
    display:flex;
    justify-content: space-between;
    line-height:1.5;
  }

  .rentalspace-bihin div:nth-child(2){
    margin-right:0;
  }

  .rentalspace-bihin div div{
    width:48%;
    margin-bottom:20px;
  }

  .rentalspace-bihin div div p{
    margin:0;
  }

  .rentalspace-bihin h4{
    margin-top:5px;
    margin-bottom:0;
  }
}


/* /////////////////////////////////////////
POPUP SHOP
////////////////////////////////////////// */
.shop-bihin{
  justify-content: space-between;
}

.shop-bihin>img{
  width:30%;
  height:30%;
}

.shop-bihin>div{
  width:60%;
}

.shop-bihin-sample img{
  width:100%;
}

@media screen and ( max-width:760px )
{
  .shop-bihin{
    justify-content: space-between;
  }

  .shop-bihin>img{
    width:30%;
    height:30%;
  }

  .shop-bihin>div{
    width:100%;
  }

  .shop-bihin>div>img{
    width:45%;
    margin:0 auto 20px;
    display: flex;
    justify-content: center;
  }
}


/* /////////////////////////////////////////
コワーキング
////////////////////////////////////////// */
.coworkingspace-price>div{
  padding:15px !important;
}

.coworkingspace-price>div p{
  font-size:0.85rem;
  margin-top:10px;
  margin-bottom:0;
}

.coworkingspace-initialcost{
  width:600px;
  text-align:center;
  margin:0 auto;
  margin-top:-10px;
  margin-bottom:80px;
}

.coworkingspace-initialcost>div{
  border:15px solid #f2efe3;
  padding:15px;
}

.coworkingspace-initialcost>p{
  text-align:right;
  font-size:0.85rem;
  margin-top:5px;
}

.coworkingspace-initialcost h4 sup{
  font-size:0.7rem;
}

.coworkingspace-initialcost ul{
  justify-content: center;
  align-items: center;
}

.coworkingspace-initialcost ul li:nth-child(1), .coworkingspace-initialcost ul li:nth-child(3){
  width:45%;
}

.coworkingspace-initialcost ul li:nth-child(2){
  width:10%;
}

.coworkingspace-facility1 div:first-child{
  width:48%;
  margin-right:4%;
}

.coworkingspace-facility1 div:last-child{
  width:48%;
}

.coworkingspace-facility2{
  margin-bottom:30px;
}

.coworkingspace-facility2 div:first-child{
  width:48%;
  margin-right:4%;
}

.coworkingspace-facility2 div:last-child{
  width:48%;
}

.coworkingspace-facility1 img, .coworkingspace-facility2 img{
  margin-bottom:15px;
}

@media screen and ( max-width:760px )
{
  .coworkingspace-price>div p{
    font-size:0.8rem;
    margin-top:5px;
  }
  
  .coworkingspace-initialcost{
    width:100%;
    margin-top:-20px;
    margin-bottom:40px;
  }
  
  .coworkingspace-initialcost>div{
    border:5px solid #f2efe3;
    padding:10px;
  }
  
  .coworkingspace-initialcost>p{
    text-align:left;
    font-size:0.8rem;
    margin-top:5px;
  }
  
  .coworkingspace-initialcost ul{
    justify-content: center;
    align-items: center;
  }
  
  .coworkingspace-initialcost ul li:nth-child(1), .coworkingspace-initialcost ul li:nth-child(3){
    width:100%;
  }
  
  .coworkingspace-initialcost ul li:nth-child(2){
    width:100%;
  }  
}

/* /////////////////////////////////////////
コミュニティーファーム
////////////////////////////////////////// */
.comunityfarm-contact{
  justify-content: center;
  align-items: center;
}
.comunityfarm-contact p{
  text-align:center;
  margin-right:50px;
  margin-bottom:0;
}

.comunityfarm-contact a img{
  width:40px;
  vertical-align: middle;
  margin-right:10px;
}

@media screen and ( max-width:760px )
{
  .comunityfarm-contact{
    justify-content: center;
    align-items: center;
  }
  .comunityfarm-contact p{
    margin-right:0;
    margin-bottom:20px;
    width:100%;
  }
  
}

/* /////////////////////////////////////////
カフェスタンド
////////////////////////////////////////// */
.cafestand-pic{
  justify-content: space-between;
  margin-bottom:80px;
}

.cafestand-pic li{
  width:32%;
}

.view-menu-btn{
  text-align:right;
}

.view-menu-btn a{
  display:inline-block;
  background:url(../images/view-menu.png) no-repeat;
  background-size:100%;
  background-position:right bottom;
  width:200px;
  height:137px;
  position:relative;
  color:#fff;
}

.view-menu-btn a span{
  position:absolute;
  top: 45%;
  left: 43%;
  transform: translate(-45%, -43%); /* 自身の幅と高さの50%だけ移動 */
  width:100%;
  font-family: toppan-bunkyu-midashi-go-std, sans-serif;
  font-weight:500;
  font-size:1.2rem;
  text-align:center;
  line-height:1;
}

.view-menu-btn a span::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 23px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 12px; /* 三角形の大きさ調整 */
  border-color: transparent transparent transparent #fff; /* 三角形の色 */
}

/* モーダルの背景 */
.cafe-menu {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.1);
}

/* モーダルコンテンツ */
.cafe-menu>div {
  background-color: #fff;
  margin: 10% auto;
  padding: 3% 3% 20px;
  border: 1px solid #585858;
  width: 90%;
  max-width: 1000px;
  position: relative;
}

.cafe-menu>div img{
  border:1px solid #585858;
}

/* 閉じるボタン */
.close {
  position:absolute;
  top:-5px;
  right:5px;
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


@media screen and ( max-width:1160px )
{
  .view-menu-btn a{
    width:20vw;
    height:13.7vw;
    position:relative;
    color:#fff;
  }

  .view-menu-btn a span{
    font-size:1.8vw;
  }

}

@media screen and (max-width:900px )
{
  .view-menu-btn a span::after {
    right:20px;
    border-width: 7px 0 7px 10px; /* 三角形の大きさ調整 */
  }
}

@media screen and ( max-width:760px )
{

  .view-menu-btn a{
    width:25vw;
    height:17.125vw;
  }

  .view-menu-btn a span{
    font-size:2.5vw;
    top: 45%;
    left: 40%;
    transform: translate(-45%, -40%); /* 自身の幅と高さの50%だけ移動 */
  }


  .view-menu-btn a span::after {
    right:7px;
    border-width: 5px 0 5px 8px; /* 三角形の大きさ調整 */
  }

  .cafe-menu>div {
    margin: 20% auto 0;
    padding:40px 5% 5%;
    width: 95%;
  }

  .cafestand-pic{
    margin-bottom:40px;
  }

  /* 閉じるボタン */
  .close {
    position:absolute;
    top:-10px;
    right:5px;
  }
}