@charset "UTF-8";

/*** CSS Document ********************************************

	custom.css

*************************************************************/
* {
  box-sizing: border-box;
}


nav li a:visited,
nav li a:link{
  color: #fff;
}

.title01 {
  margin: 0 auto;
}

#icarch img {
	display: block;
	width: 100%;
}

nav{
	background-color:#FFF000;
	max-width:100%;
	padding:10px;
	margin: 0;
	}

nav ul {
	width: 100%;
	margin: 0 auto;
}

nav li {
	display: inline-block;
	float: left;
  height: 40px;
	width: 48%;
	margin: 0 0 10px 0;
}
nav li:nth-child(2n+1) {
  margin-right: 10px;
}
nav li:last-child{
	float: right;
	float: none;
	margin:0;
}

nav a {
    display: block;
	text-align:center;
    border-radius: 10px;
	background-color:#000;
  line-height: 40px;
	color:#FFF;
	text-decoration: none;
}


h2{
	text-align:center;
	margin:30px auto 0;
	font-size:18px;
	}

h3{
	text-align:center;
	margin:0 auto 20px;
	font-size:14px;
	padding-top:10px;
	}

h4{
	text-align:center;
	margin:8% 0 3% 0;
	font-size:14px;
}

/*エリアアコーデ*/

ul li ul {
	display: none;
	background: #000;
	margin: 0;
	color: #000;
	border: 1px solid #FFF;
}
ul li ul li {
	border-bottom: 1px solid #FFF;
	text-align: center;
}
ul li ul li:last-child {
	border-bottom: none;
}
.areabox .right {
	margin: 0 0 20px 0 !important;
}

/*人気の都市*/

.pop ul{
	max-width: 100%;
	margin: 0 auto;
}

.pop li {
	float: left;
	float: none;
	width: 90%;
	margin: 0 auto 10px;
}

.pop a {
    display: block;
	text-align:center;
	padding: 20px 0;
    border-radius: 10px;
  background: url(../img/san.png) no-repeat right 2% bottom 50% #000;
	color:#fff;
	text-decoration: none;
}

hr {
	 height: 1px;
	 border: none;
	 border-top: 1px #000000 solid;
	 margin: 50px 0 0 0;
}

.pop2 ul{
	max-width: 100%;
	margin: 0 auto;
}

.pop2 li {
	float: left;
	float: none;
	width: 90%;
	margin: 0 auto 10px;
}

.pop2 a {
    display: block;
	text-align:center;
	padding: 20px 0;
    border-radius: 10px;
  background: url(../img/san.png) no-repeat right 2% bottom 50% #000;
	color:#fff;
	text-decoration: none;
}

/*こだわりアコーデ*/

.condbox .accordion {
	width: 100%;
	float: left;
	float: none;
	margin: 0 20px 7px 0;
}
.condbox .accordion > li p {
	display:block;
	padding: 20px 0;
	width: 100%;
	background:url(../img/san.png) no-repeat right 2% bottom 50%;
}
.condbox .accordion > li {
	cursor: pointer;
	text-align: center;
	width: 90%;
	background-color: #000;
	color: #FFF;
  margin: 0 auto;
	text-align: center;
	border-radius: 10px;
}

.condbox .accordion > li a{
	padding: 15px 10px;
	display: block;
	color:#FFF;
	text-decoration: none;
}
.condbox  .accordion > li a:hover {
	opacity: 0.6;
}
.condbox .accordion > li:hover {
	background-color: #FFF000;
	color: #000;
}
.condbox .accordion > li:last-child {
	border-bottom: none;
}
.condbox  .accordion > li.open {
	color: #000;
	background: #FFF000;
}

ul li ul {
	display: none;
	background: #000;
	margin: 0;
	color: #000;
	border: 1px solid #FFF;
}
ul li ul li {
	border-bottom: 1px solid #FFF;
	text-align: center;
}
ul li ul li:last-child {
	border-bottom: none;
}
.condbox .right {
	margin: 0 0 20px 0 !important;
}

/*体験談*/

.interview{
	max-width: 100%;
	background:url(../img/inta.png) no-repeat;
	padding:30px 0 15% 0;
	margin-top:30px;
}
.photo{
	max-width:100%;
	margin: 0 auto;
	/*position:relative;*/
}
.photo img{
	width:100%; 
	z-index: 2; 
}

.photo article{
	max-width:80%;
	padding:15px;
	background-color:#FFF;
	/*position:absolute;*/
	position: relative;
	margin:0 auto;
	z-index: 1;
	/*top:80%;
	right:5%;
	left:5%;*/
	margin-top:-20%;
	box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
}

h5{
	padding:10px 0 30px 0;
	font-size:18px;
	background:url(../img/sen.png) no-repeat left bottom 20% ;
	
}

.interview02{
	max-width: 100%;
	background:url(../img/inta2.png) no-repeat;
	padding:30px 0 15% 0;
	margin-top:30px;
}
.photo02{
	max-width:100%;
	margin: 0 auto;
	/*position:relative;*/
}
.photo02 img{
	width:100%;
	z-index: 2;
}

.photo02 article{
	max-width:80%;
	padding:15px;
	background-color:#FFF;
	/*position:absolute;*/
	position: relative;
  line-height: 1.4;
	margin:0 auto;
	z-index: 1;
	/*top:80%;
	right:5%;
	left:5%;*/
	margin-top:-20%;
	box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
}

/*エリア02アコーデ*/
.area{
	padding:30px 0 30px 0;
}

.area02box{
	max-width:100%;
	margin: 0 auto;
}

	
.area02box .accordion {
	width: 100%;
	float: left;
	float: none;
	margin: 0 0 7px 0;
}
.area02box .accordion > li p {
	display:block;
	padding: 20px 0;
	width: 100%;
	font-size:15px;
	background:url(../img/san.png) no-repeat right 2% bottom 50%;
}
.area02box .accordion > li {
	cursor: pointer;
	text-align: center;
	width: 100%;
	background-color: #000;
	color: #FFF;
	text-align: center;
	border-radius: 10px;
}

.area02box .accordion > li a{
	padding: 15px 10px;
	display: block;
	color:#FFF;
	text-decoration: none;
}
.area02box  .accordion > li a:hover {
	opacity: 0.6;
}
.area02box .accordion > li:hover {
	background-color: #FFF000;
	color: #000;
}
.area02box .accordion > li:last-child {
	border-bottom: none;
}
.area02box  .accordion > li.open {
	color: #000;
	background: #FFF000;
}

ul li ul {
	display: none;
	background: #000;
	margin: 0;
	color: #000;
	border: 1px solid #FFF;
}
ul li ul li {
	border-bottom: 1px solid #FFF;
	text-align: center;
}
ul li ul li:last-child {
	border-bottom: none;
}
.area02box .right {
	margin: 0 0 20px 0 !important;
}


.Q＆A{
	width:100%;
	background:url(../img/inta.png) no-repeat;
	padding:30px 0 30px 0;
}

.FAQ{
	width:100%;
	margin: 0 auto;
}
	
.question {
	background-color:#FFF;
	margin: 30px 0 0 0;
	padding:20px;
}

.question li{
	display: table-cell;
    vertical-align: middle;
}
	

.question p{
	max-width:100%;
	padding: 5% 0 0 30px;
}
	
	
.answer{
	background-color:#FFF;
	margin: 20px 0 0 0;
	padding:20px;
}

.answer li{
	display: table-cell;
    vertical-align: middle;
}
.FAQ li img,
.answer li img,
.FAQ02 li img,
.answer02 li img {
  width: 101px;
  height: 150px;
  max-width: initial;
}

.answer p{
	max-width:100%;
	padding: 5% 0 0 30px;
}

.Q＆A02{
	width:100%;
	background:url(../img/inta2.png) no-repeat;
	padding:5px 0 30px 0;
	margin-top:5%;
}


.FAQ02{
	width:100%;
	margin: 0 auto;
}
	
.question02 {
	background-color:#FFF;
	margin: 30px 0 0 0;
	padding:20px;
}

.question02 li{
	display: table-cell;
    vertical-align: middle;
}
	

.question02 p{
	max-width:100%;
	padding: 5% 0 0 30px;
}
	
	
.answer02{
	background-color:#FFF;
	margin: 20px 0 0 0;
	padding:20px;
}

.answer02 li{
	display: table-cell;
    vertical-align: middle;
}
	

.answer02 p{
	max-width:100%;
	padding: 5% 0 0 30px;
}

/* エリアから探す */
#area{
  padding: 10px;
}
#area section dl{
  width: 48%;
  background: url(../img/san.png) no-repeat right 2% top 22px #000;
  border-radius: 5px;
  float: left;
  padding: 5px;
  box-sizing: border-box;
  margin: 0 1% 2% 1%;
}
#area section dl:nth-child(2n+1){
  clear:both;
}
#area section dl dt{
  font-size: 18px;
  padding: 10px 0;
  text-align: center;
  color: #fff;
}
#area section dl dd{
  display: none;
}
#area section dl dd ul li{
  width: 100%;
  margin: 0 0 2% 0;
}
#area section dl dd ul li a{
  display: block;
  color: #fff;
  border-radius: 5px;
  background: url(../img/arrow_w.png) no-repeat 98% center rgba(255,255,255,0);
  border:solid 2px #fff;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
}


.areamenu dd{
  display: none;
}

.areabox:after{
  clear: both;
  content: "";
  display: block;
  height: 0px;
  font-size: 0;
  visibility: hidden;
}

.areabox .accordion {
  width: 40%;
  float: left;
  margin: 0 0 20px 7%;
}
.areabox .accordion:nth-child(2n+1){
  clear: both;
}
.areabox .accordion > li p {
  display: block;
  padding: 20px;
}
.areabox .accordion > li {
  cursor: pointer;
  text-align: center;
  background: url(../img/san.png) no-repeat right 2% top 22px #000;
  color: #fff;
  border-radius: 5px;
}

.areabox .accordion > li a{
  padding: 15px 10px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.areabox .right {
  margin: 0 0 20px 0 !important;
}

.areabox ul li ul {
  display: none;
  color: #333;
  border-top: 2px solid #fff;
}
.areabox ul li ul li {
  border-bottom: 2px solid #fff;
  text-align: center;
}
.areabox ul li ul li:last-child {
  border-bottom: none;
}