@charset "UTF-8";
/* CSS Document */


/* TOP PAGE */
#mainVisualWrapper {  background: url("../img/top/bg_top_01.jpg") center top / 100% auto no-repeat;}
#mainVisual { position: relative; width: 100%; padding:58.56% 0 0 0; overflow: hidden;}
#mainVisual .plane { position: absolute; top:46.25%; right:-36px; width: 36px; animation: plane 15s linear 0s infinite ;  pointer-events: none; z-index: 2000; transform: translateX(16px)}
#mainVisual .planeCloud { position: absolute; right:-37.26%; top:25%; width: 67.86%; animation: cloud 15s linear 0s infinite ; pointer-events: none;}
#mainVisual .birds { bottom:5.875%; left: 9.51%; position: absolute;pointer-events: none;}
#mainVisual h2 { position: absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%); pointer-events: none;}

#commonInfoBox h3 { background: #91cdf1}

#information a { font-size: 24px; padding: 1em 0;}

@keyframes plane {
	0% { opacity: 1; right:-36px; top:46.25%; }
	50% { opacity: 1; }
	80% { opacity: 0; }
	100%  { opacity: 0; right:70.10%; top:-4%; }
}
@keyframes cloud {
	0% { opacity: 0;}
	30% { opacity: 0; }
	50% { opacity: 1; }
	90% { opacity: 0; }
	100%  { opacity: 0;}
}



/* FEATURE */
#conceptBox { }
#kusounoie { width: 100%; max-width: 800px; margin:0 auto 30px auto;}
#kusounoie .logoBox { flex-basis: 40%; }
#kusounoie .textBox { flex-basis: calc(60% - 50px); }
#housingPhoto { width: 100%; max-width: 920px; margin: 0 auto 0 auto;}
#housingPhoto figure { flex-basis: calc( ( 100% - 20px) / 2); margin: 0 0 20px 0; position: relative;}
#housingPhoto figcaption { position: static; text-align: right; color: #000; right: 5px; bottom:5px; line-height: 1; font-size: 12px; padding: 5px 0 0 0;}

#landPlan .mapBox { width: 100%; max-width: 920px; margin: 0 auto;}
#landPlan .textBox { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 0 0 13.04%; }

#poemBox { width: 100%; max-width: 1100px; margin: 0 auto;}
#poemBox ul { position: relative; width: 100%;  padding: 146% 0 0 0;}
#poemBox .poem { position: absolute;}
#poemBox .poem01 { left: 0; top:0; width: 45%;}
#poemBox .poem02 { left: 47.09%; top:0; width: 25.18%;}
#poemBox .poem03 { left: 74.18%; top:0; width: 21.27%;}
#poemBox .poem04 { left: 61.27%; top:16.77%; width: 21.09%;}
#poemBox .poem05 { left: 4.63%; top:35.03%; width: 22.27%;}
#poemBox .poem06 { left: 28.72%; top:35.03%; width: 16.45%;}
#poemBox .poem07 { left: 52.90%; top:30.31%; width: 14.27%;}
#poemBox .poem08 { left: 47.09%; top:27.14%; width: 25.22%;}
#poemBox .poem09 { left: 81.63%; top:32.79%; width: 11.90%;}
#poemBox .poem10 { left: 74.18%; top:39.75%; width: 25.77%;}
#poemBox .poem11 { left: 4.63%; top:60.37%; width: 21.72%;}
#poemBox .poem12 { left: 37.63%; top:53.78%; width: 25.59%;}
#poemBox .poem13 { left: 65.09%; top:65.83%; width: 35%;}
#poemBox .poem14 { left: 56.36%; top:85.96%; width: 15.95%;}
#poemBox .poem15 { left: 4.63%; top:77.76%; width: 49.68%;}


/* INFORMATION */
#information h2 { width: 100%; max-width: 490px; margin: 0 auto 20px auto;}
#information a { display: block; width: 100%; max-width: 490px; margin: 0 auto 20px auto;}
#information .caption { display: block; text-align: center; font-size: 12px; line-height: 1.5em;}

/* ACCESS */
.googleMapLink { display: block; width: 100%; max-width: 400px; margin: 0 auto; background: #0e6eb8; color: #fff; font-size: 24px; text-align: center; text-decoration: none; font-weight: bold; vertical-align: middle; box-sizing: border-box; padding: 1em 0;}
.googleMapLink i { margin: 0 0.25em 0 0; font-size: 36px;}

#traffic { background: url("../img/access/bg_access_01.png"); box-sizing: border-box; padding:50px 20px;}
#traffic .mapBox { width: 100%; max-width:720px; margin: 0 auto 40px auto;}
#traffic .textBox figure { width: 100%; max-width: 320px; margin: 0 auto 10px auto;}
.locationPhoto { }
.locationPhoto figure { flex-basis: calc( ( 100% - 80px ) / 3); margin: 0 0 40px 0;}

/* PLAN  */
.planBox { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto;}
.planBox .specBox { flex-basis: 30%; }
.planBox .specBox ul { display: block; background: #fffcdb; box-sizing: border-box; padding: 20px;}
.planBox .specBox ul li { display: block; font-size: 14px; line-height: 1.5em; margin: 0 0 10px 0;}
.planBox .specBox ul li:last-of-type { margin: 0; }
.planBox .imgBox { flex-basis: calc( 70% - 40px );}
.planBox .photoBox { flex-basis: calc( ( 100% - 80px ) / 3); margin: 0 0 40px 0;}
.planBox .photoBox figcaption { display: block; padding: 10px 0 0 0; line-height: 1.5;}
.planSection { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto;}
.planSection .specSection h5 { flex-basis: 180px; }
.planSection .specSection ul { display: block; flex-basis: calc(100% - 200px); align-self: center;}
.planSection .specSection ul li { display: inline-block; font-size: 14px; line-height: 1.5em; margin: 5px 10px 5px 0;}

.planSection .mapSection { }
.planSection .photoSection .photoBox { flex-basis: calc( ( 100% - 20px ) / 3); margin: 0 0 40px 0;}
.planSection .photoSection .photoBox h6 { display: block; padding: 10px 0 0 0; line-height: 1.5; font-weight: bold; font-size: 18px;}

/* CONCEPT HOUSE */
.houseBox { background:#fff; padding:0 0 40px 0; }
.houseBox > figure { width:100%; margin:0 0 2.5% 0; position:relative; padding: 0 20px; box-sizing: border-box; }
.houseBox > figure figcaption { position:absolute; bottom:5px; left:25px; color:#fff; font-size:14px; line-height:1.1;}
.houseBox .specBox { position:relative; padding:0 20px; margin:0 0 6% 0; }
.houseBox .specBox h3 { flex-basis: 180px; }
.houseBox .specBox ul {  display: block; flex-basis: calc(100% - 200px); align-self: center; }
.houseBox .specBox ul li { display: inline-block; font-size: 14px; line-height: 1.5em; margin: 5px 10px 5px 0;}

.houseBox .mapBox { padding:0 20px; margin:0 0 6% 0; }
.houseBox .mapBox h3 { font-size:40px; padding:0 0 0.25em 0; margin:0 0 1em 0; border-bottom:#666 solid 1px; }
.houseBox .mapBox .floor01 { flex-basis:50%; }
.houseBox .mapBox .floor02 { flex-basis:50%; }
.houseBox .mapBox .panoramaNote { display:block; text-align:center; font-size:16px; color:#666; line-height:1.1; clear:both; font-weight:bold; }
.houseBox .mapBox .panoramaNote::before { display:inline-block; content:''; background:url(../img/house/icon_house_02.png) center center / 100% 100% no-repeat;  height:2em; width:2em; vertical-align:middle; }

.houseBox .photoBox { padding:0 20px; margin:0 0 10% 0; }
.houseBox .photoBox ul { }
.houseBox .photoBox ul li  { flex-basis: calc( ( 100% - 20px ) / 3); }
.houseBox .photoBox ul li a { margin:0 0 10px 0; display:block; position:relative; overflow:hidden;}
.houseBox .photoBox ul li a::after { display:block; position:absolute; content:''; background:url(../img/house/icon_house_01.png) center center / 100% 100% no-repeat; width:30px; height:30px; line-height:1; z-index:2; bottom:0; right:0; }
.houseBox .photoBox ul li a img { transition:transform 1s linear 0s; }
.houseBox .photoBox ul li a:hover img { transform:scale(1.4,1.4); }
.houseBox .photoBox ul li h4 { font-size:20px; position:relative; padding:0 0 0 0; font-weight:bold; margin:0 0 0.5em 0; line-height:1.2em; }
.houseBox .photoBox ul li h4 .num { position: absolute; left: 0; top:1; color: #fff;width: 1.25em; font-size: 75%; text-align: center; display: block;}
.houseBox .photoBox ul li  p { font-size:14px; line-height:24px; }

/* TYPE02 SETTING */
.houseBox#number06 .mapBox .floor01 {flex-basis:56.97%; }
.houseBox#number06 .mapBox .floor02 {flex-basis:43.03%; }

/* MODAL */
.modalBox { display:none; position:fixed; width:100%; height:100%; z-index:99999999; top:0; left:0; background:rgba(0,0,0,0.8)  }
.modalBox.active {  display:block; }
.modalBox .modalClose { display:inline-block; position:fixed; right:5px; top:5px; background:rgba(255,255,255,0.8); color:#000; width:5em; font-size:12px; line-height:1.1; padding:0.25em 0; text-align:center; cursor:pointer; } 
#number06_photo01 .modalPhoto { background:url(../img/house/photo_number06_02_l.jpg) center center / contain no-repeat; width:90%; height:90%; position:absolute; left:5%; top:5%; }
#number06_photo02 .modalPhoto { background:url(../img/house/photo_number06_03_l.jpg) center center / contain no-repeat; width:90%; height:90%; position:absolute; left:5%; top:5%;  }
#number06_photo03 .modalPhoto { background:url(../img/house/photo_number06_04_l.jpg) center center / contain no-repeat; width:90%; height:90%; position:absolute; left:5%; top:5%;  }

/* STRUCTURE */
#dPower { }
#dPowerBox { width: 100%; max-width: 920px; margin: 0 auto; box-sizing: border-box;}
#dPower h3 { width: 100%; max-width:190px; margin: 0 auto 30px auto;}
#dPower h4 { font-size: 25px; font-weight: bold; text-align: center; margin: 0 auto 20px auto; line-height: 1.5}
#dPower h5 { font-size: 18px; font-weight: bold; margin: 0 0 10px 0; line-height: 1.5;}
#dPower .logoBox { width: 100%; max-width: 616px; margin: 0 auto 40px auto;}
#dPower .photoBox { flex-basis: 224px;}
#dPower .textBox { flex-basis: calc( 100% - 244px);}
#dPower .pointBox { width: 100%; max-width: 610px; margin: 0 auto;}
#kosera h3 { width: 100%; max-width:242px; margin: 0 auto 30px auto;}
#kosera h4 { font-size: 25px; font-weight: bold; text-align: center; margin: 0 auto 20px auto; line-height: 1.5}
#kosera .imgBox1 { flex-basis:24.78%; align-self: center;}
#kosera .imgBox2 { flex-basis:33.80%; align-self: center; }
#kosera .imgBox3 { flex-basis:35.97%; align-self: center; }
#ground h3 { width: 100%; max-width:264px; margin: 0 auto 30px auto;}
#ground figure { margin: 0 auto; width: 100%; max-width: 610px;}
/* #twentyFour { flex-basis: calc( ( 100% - 60px ) / 2 );}
#twentyFour h3 { max-width: 294px; margin: 0 auto 30px auto; }
#twentyFour h4 { font-size: 25px; font-weight: bold; margin: 0 0 20px 0;}
#twentyFour figure { width: 100%; max-width: 269px; } */

.noteBox { display:block; padding:20px; background:#fffcdb}
.noteBox h5 { }
.noteBox p { }

#gva  { width: 100%; max-width: 860px; margin: 0 auto 100px auto;}
#gva h3 { max-width: 224px; margin: 0 auto 30px auto; }
#gva .photoBox { flex-basis: 34.78%; }
#gva .textBox { flex-basis: calc( 65.22% - 20px ); }
#gva ul li { display: block; background: #f4e1a7; font-size: 18px; padding: 1em; margin: 0 0 1em 0; line-height: 2em;}
#gva .photoBox figcaption { font-size: 12px; text-align: center; padding: 10px 0 0 0;}

/* FACILITY */
#facilityNavi { padding: 0 20px; margin: 0 auto 80px auto;}
#facilityNavi ul li { flex-basis: calc( ( 100% - 70px ) / 8);}
#air { padding: 0 20px;}
#air h3 { max-width: 294px; margin: 0 auto 30px auto;}
#air .photoBox { position:relative; margin:0 0 20px 0; }
#air .photoBox .mainPhoto { position:relative; z-index:2; }
#air .photoBox .subPhoto { position:absolute; z-index:3; }
#air .photoBox .subPhoto:nth-of-type(1) { width:22.5%; left:0; top:0; }
#air .photoBox .subPhoto:nth-of-type(2) { width:22.5%; right:0; top:0; }
#air .photoBox .subPhoto:nth-of-type(3) { width:16.04%; left:0; bottom:0; }
#air .photoBox .subPhoto:nth-of-type(4) { width:33.33%; right:0; bottom:0; }
#page_facility .photoBox2 li { flex-basis:calc( ( 100% - 30px ) / 4); margin: 0 0 20px 0;}
#page_facility .photoBox3 figure { flex-basis:50%; margin: 0 0 0 0;}
#bath .photoBox .mainPhoto { flex-basis: 74.58%; }
#bath .photoBox .subPhoto { flex-basis: 23.54%;  }
#powder .photoBox .mainPhoto { flex-basis: 49.16%; }
#powder .photoBox .subPhoto { flex-basis: 49.27%;  }
#roof .mainPhoto { flex-basis: 66.66%;}
#roof .subPhoto { flex-basis: 32.29%;}
#roof figure { position: relative;}
#roof figcaption { display: inline-block; background: rgba(0,0,0,0.8); color: #fff; font-size: 10px; left: 0; bottom:0; padding: 5px; line-height: 1; position: absolute;}
#pdfNavi { width: 100%; max-width: 720px; margin: 0 auto;}
#pdfNavi ul li { flex-basis: calc( ( 100% - 20px ) / 2); margin: 0 0 20px 0;}

/* OUTLINE */
#outlineBox { }
#outlineBox dl { }
#outlineBox dl dt { background: #91cdf1; border-bottom: #fff solid 1px; flex-basis:180px; }
#outlineBox dl dd { background: #fff; border-bottom: #91cdf1 solid 1px; flex-basis:calc( 100% - 180px ); }
#outlineBox dl dt span { font-size: 17px; color: #fff; display: block; padding: 1em; line-height: 1.5em;}
#outlineBox dl dd span { font-size: 17px; color: #333; display: block; padding: 1em; line-height: 1.5em;}

@media only screen and (max-width:1400px){
	
}


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


}
@media screen and (min-width:768px) {
	
	/* HOVER ANIMATION */
	.googleMapLink:hover { background: #999; transition: background 0.5s linear 0s;}
	#dPower a:hover,
	#facilityNavi ul li a:hover,
	#pdfNavi ul li a:hover{ filter: brightness(1.2); transition: filter 0.5s linear 0s;}
	
}
@media screen and (max-width:767px) {
  
	#mainVisual .birds { width: 10%;}
	
	/* INFORMATION */
	#infoBox { flex-wrap:wrap; }
  #infoBox h4 { flex-grow:0; flex-shrink:1; flex-basis:100%; background:#000; text-align:center; font-size:4vw; line-height:1.2; padding:10px 0; color:#fff; }
  #infoBox #rss { flex-grow:0; flex-shrink:1; flex-basis:100%; height:200px; }
  #infoBox #rss ul li time { position: static; display: block; margin: 0 0 10px 0;}
  #infoBox #rss ul li { padding: 0; }

  #infoBar { padding:5% 0 10% 0; }
  #infoBar .content { flex-wrap:wrap; justify-content:center; }
  #infoBar h3 { flex-basis:100%; margin:0 0 20px 0; }
  #infoBar a { flex-basis:231px; }

	/* FEATURE */
	#kusounoie .logoBox { flex-basis: 60%; margin: 0 0 20px 20%; }
  #kusounoie .textBox { flex-basis: 100%; }
	#housingPhoto figure { flex-basis: 100%;}
	#landPlan .textBox { padding: 0; }
	#poemBox ul { display: flex; position: static; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 20px; box-sizing: border-box;}
	#poemBox .poem { position: static; width: auto !important; flex-basis: calc(50% - 10px); margin: 0 0 20px 0; text-align: center; }
	#poemBox .poem15 { flex-basis: 100% !important; margin: 0 !important;}
	
	/* ACCESS */
	.locationPhoto figure { flex-basis: calc( ( 100% - 20px ) / 2); margin: 0 0 40px 0;}
	
	/* PLAN  */
  .planBox { box-sizing: border-box; padding: 0 20px;}
  .planBox .specBox { flex-basis: 100%; margin: 0 0 20px 0; }
  .planBox .specBox ul {}
  .planBox .specBox ul li { display: inline-block; margin: 0 10px 10px 0;}
  .planBox .imgBox { flex-basis:100%;}
  .planBox .photoBox { flex-basis: calc( ( 100% - 20px ) / 2); margin: 0 0 40px 0;}
	.planSection .specSection h5 { flex-basis: 140px;}
	.planSection .specSection ul { flex-basis: calc(100% - 150px);}
	.planSection .specSection ul li { font-size: 12px;}
	.planSection .photoSection { padding: 0 20px; }
	.planSection .photoSection .photoBox { flex-basis: 100%;}
	
	.houseBox > figure figcaption { font-size:10px; }
	.houseBox .specBox h3 { flex-basis: 140px;}
	.houseBox .specBox ul { flex-basis: calc(100% - 150px);}
  .houseBox .specBox ul li { font-size:12px; }

  .houseBox .photoBox ul li { flex-basis:100%; margin: 0 0 2% 0; }
	.houseBox .photoBox ul li a {  cursor: inherit; pointer-events: none; }
  .houseBox .photoBox ul li a::after { display:none; }
  .houseBox .photoBox ul li a:hover img { transform:scale(1,1); }
  .houseBox .photoBox ul li h4 { font-size:5vw; }
  .houseBox .mapBox h3 { font-size:6vw; font-weight:bold; }
  .houseBox .mapBox .panoramaNote { text-align:left; font-size:3vw; }

  /* TYPE02 SETTING */
  .houseBox#number06 .mapBox .floor01 {flex-basis:100%; }
  .houseBox#number06 .mapBox .floor02 {flex-basis:75.53%; }
	
	/*  */
	#dPower .photoBox { margin: 0 0 20px calc( ( 100% - 224px ) /2);}
  #dPower .textBox { flex-basis:100%;}
	#dPower .textBox h5 { text-align: center;}
	#kosera p { text-align: left;}
	#twentyFour { flex-basis: 100%; margin: 0 0 100px 0;}
	#gva  { flex-basis: 100%; } 
	#twentyFour h3,
	#gva h3 { margin: 0 auto 30px auto;}
  #air .photoBox .subPhoto { display:none; }

	/* FACILITY */
	.facilityBox { padding: 0 20px;}
	#facilityNavi ul li { flex-basis: calc( ( 100% - 30px ) / 4); margin: 0 0 10px 0;}
	#page_facility .photoBox2 li { flex-basis:calc( ( 100% - 10px ) / 2); margin: 0 0 20px 0;}
	#bath .photoBox .mainPhoto { flex-basis: 100%; margin: 0 0 20px 0; }
  #bath .photoBox .subPhoto { flex-basis: 100%;  }
	#powder .photoBox .mainPhoto { flex-basis: 100%; }
	#powder .photoBox .subPhoto { display: none;}
	#page_facility .photoBox3 figure { flex-basis:100%; margin: 0 0 0 0;}
	
	/* OUTLINE */
	#outlineBox dl dt { flex-basis: 100%; }
  #outlineBox dl dd { flex-basis: 100%; margin: 0 0 20px 0; border-bottom: none }
	#outlineBox dl dt span ,
	#outlineBox dl dd span { padding: 10px;}
}