* { box-sizing: border-box;}
body { margin: 0; background-color: rgba(190, 226, 214, 0.37); position: relative; overflow-x: hidden; width: 100%;}
p { font-size: 0.8rem; font-family: ヒラギノ角ゴ Pro; font-weight: normal; line-height: 2.5em; color: #BF4C3D;}
li { list-style: none; display: inline-block;justify-content: space-around; }
a { text-decoration: none; color: #503801; font-family: ヒラギノ角ゴ Pro;}
/*a:hover { color: #FD9F27;}*/
.myriad { }
.SP { display:none;}

/*	メインビジュアル	*/
  #TOPIMG img { width:100%; margin: 0 auto;}
  #TOPIMG img.SP { display:none;}
  #TOPIMG img.top {position: relative; z-index: 0; margin-bottom: -3%;}
  #TOPIMG img.topdot { width: 100%; top: 10%; position: absolute; margin: 0 auto; z-index: 1;}
  #TOPIMG img.title { width: 55%; top: 2%; right: 0; left: 0; margin: auto; position: absolute; z-index: 2;}


/*	キャンペーン案内	*/
  #CAMP { position: relative; background-color: #F9EFC6; padding-bottom: 15vw;}
  #CAMP img { width:100%; margin: 0;}
  #CAMP img.SP { display:none;}
  #CAMP img.obi {position: relative; top: 0; z-index: 0; margin-top: -3%; overflow-x: hidden; width: 100%;}
  #CAMP img.h1 { width: 13%; top: 1%; right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}
  #CAMP p { text-align: center; margin: 0;}
  .senchaku { position: relative; width: 100%; height: 15vw;}
  #CAMP img.gomei { width: 40%; bottom: 10px; right: 0; left: 0; margin: 0 auto; position: absolute; z-index: 0}
  #CAMP img.senchakuobi { width: 45%;bottom: 0;right: 0; left: 0; margin: 0 auto; position: absolute;}
  #CAMP li.camp_link { width: 50%; display: flex; justify-content: /*space-between*/center; margin: 0 auto; margin-top: 2.5vw;}
  #CAMP img.camp{ width: 100%; display: inline-block; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25); cursor: pointer; transition: all 0.3s ease 0s;}
  #CAMP img.camp:hover{ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25); transform: translateY(-0.1875em)}
  #CAMP img.SP { display:none;}
  #CAMP img.obi00 { width: 90%; bottom: 0; right: 0; left: 0; margin: 0 auto; position: absolute; z-index: 0; margin-top: -3%;}




/*	ダイバーシティ甲陽園でのくらし	*/
  #KURASHI { position: relative; background-color: #6EACAB; padding-bottom: 3vw;}
  #KURASHI img { width:100%; margin: 0;}
  #KURASHI img.obi {position: relative; top: 0; z-index: 1; margin-top: -5vw;}
  #KURASHI img.h2 { width: 34%; top: -1%; right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}
.intro { width: 82%; margin: 10% auto; position: relative; z-index: 1; /*float: left; clear: none;*/}
  #KURASHI p { text-align: left;  color: #fff;}
  #KURASHI .pcphoto { width: 65%; /*float: right; clear: none;*/ position: absolute; top: 2%; right: -9%; z-index: 0;}
  #KURASHI .ill { width: 15vw/*350px*/; float: right;clear: none; margin-top: -35%;}
  #KURASHI a { color: #fff;}
  #KURASHI a:hover{ color: #E2E2E2;}
  /*#KURASHI img.insta { width: 5%; display: inline-block;}*/


/*	キャンペーン詳細1	*/
  #CAMP1 { position: relative; background-color: #F9EFC6; padding-bottom: 3vw; }
  #CAMP1 img { width:100%; margin: 0;}
  #CAMP1 img.obi {position: relative; top: 0; z-index: 1; margin-top: -4.5vw;}
  #CAMP1 img.h2 { width: 20%; top: -0.5%; right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}
.tokuten { max-width: 860px; width: 45%; margin-top: 11%; margin-left: 11%; position: relative; z-index: 1; /*float: left; clear: none;*/}
.box { width: 100%;}
.box p{ width: 60%; margin-left: 11%;}
aside { width: 210px; margin-bottom: 0;float: right; clear: none;}

.hyoulink { margin-left: 11%;}
#CAMP1 img.link { /*display: inline-block;*/ width: 150px;}
.hyoulink p{display: inline-block; margin-left: 10px;line-height: inherit;}
.hyoulink:hover { opacity: 50%;}
.hyou { background-color: #FFFDEC; padding: 5%; padding-bottom: 10%;}



/*	キャンペーン詳細2	*/
#CAMP2 { position: relative; background-color: #F9EFC6; padding-bottom: 3vw;}
#CAMP2 img { width:100%; margin: 0;}
#CAMP2 img.obi {position: relative; top: 0; z-index: 1; margin-top: -6.5vw;}
#CAMP2 img.h2 { width: 20%; top: -1.5%; right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}
.tokuten2 { max-width: 550px; width: 40%; margin-top: 11%; margin-left: 9%; position: relative; z-index: 1; /*float: left; clear: none;*/}
.box { width: 100%;}
.box p{ width: 60%; margin-left: 11%;}
aside.illa3 { width: 310px; margin-bottom: 0;float: right; clear: none;}
.hyoulink { margin-left: 11%;}
#CAMP2 img.link { /*display: inline-block;*/ width: 150px;}
.hyoulink p{display: inline-block; margin-left: 10px;line-height: inherit;}
.hyoulink:hover { opacity: 50%;}
.hyou { background-color: #FFFDEC; padding: 5%;padding-bottom: 10%;}




/*	CONTACT	*/
#CONTACT { position: relative; background-color: #BF4C3D; padding-bottom: 3vw;}
#CONTACT img { width:100%; margin: 0;}
#CONTACT img.obi {position: relative; top: 0; z-index: 1; margin-top: -6.5vw;}
#CONTACT img.h2 { width: 15%; top: -4.3%; right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}
.contact { max-width: 300px; width: 42%; margin: 0 auto; margin-top: 6vw;}
#CONTACT img.logo{ margin: 0 auto; padding: 5% 0;}
.contact li { text-align: center; display: flex; justify-content: space-around; border-top: solid 3.5px #FFFDEC;}
.contact li a{ margin: 5% 2% 5em 2%;}
#CONTACT img.con { display: inline-block; width: 110px;  transition: all 1s linear 0s; cursor: pointer;}
#CONTACT img.con:hover{ transform: rotateY(360deg);}
#CONTACT img.SP { display:none;}


/*	フッター	*/
.foot { width: 100%; background-color: #FFFDEC; position: fixed; bottom: 0; border: solid 5px #BF4C3D; height: 5em;z-index: 2; display: flex;}
.foot a { display: inline-block;}
.otoiawase { width: 200px; margin-top: 2.5%; transition: all 1s linear 0s; cursor: pointer;}
.otoiawase:hover{ transform: rotateY(360deg);}
.pagetop { width: 80px;/*position: absolute; right: 5%;*/margin: 0 auto; transition: all 1s linear 0s; cursor: pointer;}
.pagetop:hover{ transform: rotateY(360deg);}
.bor { width: 80%; display: inline-block; text-align: center; padding-top: 1em; }
.der { width: 20%; display: inline-block; text-align: center; border-left: solid 5px #BF4C3D; padding-top: 1.8em;}


/*イラスト１*/
@media screen and (max-width: 1200px){
#KURASHI .ill { width: 25vw/*350px*/; float: right;clear: none; margin-top: -35%;}
}


/*スマホ*/
@media screen and (max-width: 740px){
p { font-size: 0.8em; line-height: 2.2em;}
.PC { display:none;}
.SP { display: inherit;}

/*	メインビジュアル	*/
  #TOPIMG img.PC { display: none;}
  #TOPIMG img.SP { display: block;}
  #TOPIMG img.title { top: 2%;}
  #TOPIMG img.topdot{ top: 1%; position: absolute; margin: 0 auto; z-index: 1;}

  #TOPIMG img.obi { width: 100%; /*bottom: -11vw;*/ position: absolute; z-index: 1; margin-top: -10%;}
  #TOPIMG img.h1 { width: 22%; top: calc(6%-25px); right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}



/*	CAMPAIN案内	*/
  #CAMP { z-index: 0;padding-bottom: 25vw;}
  #CAMP img { width:100%; margin: 0;}
  #CAMP img.PC { display: none;}
  #CAMP img.SP { display:block;}
  #CAMP img.obi { margin-top: -10%;}
  #CAMP p { margin-top: 0; padding-top: 25%;}
  #CAMP img.gomei { width: 50%; margin: 0 auto;}
  #CAMP img.senchakuobi { width: 55%; margin: 0 auto;}

  #CAMP li.camp_link { width: 85%; display: block; margin-top: 2.5vw;}
  #CAMP img.camp { width: 94%; margin: 1% auto;}

  #CAMP img.obi00 { width: 85%; bottom: 0; right: 0; left: 0; margin: 0 auto; position: absolute; z-index: 1;}
  #CAMP img.obi02 { width: 100%; bottom: -11vw; position: absolute; z-index: 0;}

  /*	ダイバーシティ甲陽園でのくらし	*/
  #KURASHI { z-index: 0; margin-top: 10vw; padding-bottom: 13vw;}
  #KURASHI img { width:100%; margin: 0;}
  #KURASHI img.PC { display:none;}
  #KURASHI img.SP { display:block;}
  /*#KURASHI img.obi {position: relative; top: 0; z-index: 1; margin-top: -10vw;}*/
  #KURASHI img.h2 { width: 50%; top: -5%; right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}
  .intro { float: none; margin: 0 auto; padding-top: 8%;}
  #KURASHI .photo { position: relative;}
  #KURASHI img.floor { width: 125%;margin-top: -23vh;margin-left: -12%;}
  #KURASHI .room { width: 83%; margin: 0 auto;}
  #KURASHI .room img.ro { margin-bottom: 3%;}
  #KURASHI img.back { width: 120%;top: 37%;right: 0;left: -10%;margin: auto;position: absolute; z-index: 0;}
  #KURASHI .ill { width: 42%; right: -3%; bottom: -2%;position: absolute; z-index: -1;}
  #KURASHI img.obi03 { width: 100%; bottom: -15vw; position: absolute; z-index: 0;}



  /*	CAMPAIN詳細1	*/
  #CAMP1 { z-index: 0;padding-bottom: 28vw; margin-top: -3%;}
  #CAMP1 img { width:100%; margin: 0;}
  #CAMP1 img.PC { display: none;}
  #CAMP1 img.SP { display:block;}
  /*#CAMP1 img.obi {position: relative; z-index: 1; margin-top: -6vw;}*/
  #CAMP1 img.h2 { width: 30%; top: -5%; right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}
  .tokuten { margin-top: 17%; padding-top: 10%; width: 55%; margin-left: 7%;}
  .box p{ width: 85%; margin-left: 7%;}
  #CAMP1 p a { color: #BF4C3D; }
  aside { /*width: 110px; position: absolute; right: 0;top: 20%;*/ display: none;}
  #CAMP1 img.obi03 { width: 100%; bottom: 1vw; position: absolute; z-index: 0; background-color: #FFFDEC;}
  #CAMP1 img.link { width: 120px; margin-left: -3%;}
#CAMP1 img.hyou0 { width: 100%;}


/*	CAMPAIN詳細2	*/
#CAMP2 { z-index: 0;padding-bottom: 24vw; margin-top: -13%;}
#CAMP2 img { width:100%; margin: 0;}
#CAMP2 img.PC { display: none;}
#CAMP2 img.SP { display:block;}
/*#CAMP1 img.obi {position: relative; z-index: 1; margin-top: -6vw;}*/
#CAMP2 img.h2 { width: 30%; top: -6%; right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}
.tokuten { margin-top: 17%;padding-top: 10%;}
  .box p{ width: 85%; margin-left: 7%;}
#CAMP2 p a { color: #BF4C3D; }
aside.illa3 { width: 140px; position: absolute; right: 0;top: 17%;/* display: none;*/}
#CAMP2 img.obi04 { width: 100%; bottom: 1vw; position: absolute; z-index: 0; background-color: #FFFDEC;}
#CAMP2 img.link { width: 120px; margin-left: -3%;}
#CAMP2 img.hyou0 { width: 100%;}


/*	CONTACT	*/
#CONTACT { z-index: 0;padding-bottom: 22vw; margin-top: -3%;}
#CONTACT img { width:100%; margin: 0;}
#CONTACT div.SP {height: 1vh;margin-top: -8%;background-color: #BF4C3D;}

#CONTACT img.h2 { width: 23%; top: -15%; right: 0; left: 0; margin: auto; position: absolute; z-index: 1;}
.contact { max-width: 300px; width: 80%; margin: 0 auto; margin-top: 12vw;}
.contact li { text-align: center; border-top: solid 3.5px #FFFDEC; display: block;}
.contact li a{ display: block; margin: 10% 0 ;}
#CONTACT img.con { width: 50%; margin: 0 auto; transition: all 1s linear 0s; cursor: pointer;}

#CONTACT img.PC { display: none;}
#CONTACT img.SP { display:block;}



/*	フッター	*/
.foot { height: 4em;}
.otoiawase { width: 135px;}
.pagetop { width: 55px;}
.der { padding-top: 1.45em;}

  }