@charset "utf-8";

/* common
--------------------------------------------------------------*/
h2{font-size:3.2rem;}
h3{font-size:2.8rem;}
h4{font-size:2.4rem;}
h5{font-size:2.0rem;}
h6{font-size:1.8rem;}
h2, h3, h4, h5, h6{
  margin-top:30px;
  font-weight:normal;
  line-height:1.1;
}
@media only screen and (max-width:480px) {
  h2{font-size:2.4rem;}
  h3{font-size:2.2rem;}
  h4{font-size:2.0rem;}
  h5{font-size:1.8rem;}
  h6{font-size:1.6rem;}
}

/* mainimage
--------------------------------------------------------------*/
.mainimage{
  height:500px;
  width:100%;/*
  width:calc(100% - 24px);
  margin-left:24px;*/
  background-color:#ddd;
  position:relative;
  overflow:hidden;
}
.mainimage .photo{
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}
.mainimage .photo img{
  min-width:100%;
/*------------ca------------*/
  height: 750px;
/*--------------------------*/
}
.mainimage .title{
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  color:#333;
  font-size:4.0rem;
  font-weight:bold;
  line-height:1.2;
  text-align:center;
  text-shadow:rgb(255, 255, 255) 2px 0px 0px,
	  rgb(255, 255, 255) 1.75517px 0.958851px 0px,
	  rgb(255, 255, 255) 1.0806px 1.68294px 0px,
	  rgb(255, 255, 255) 0.141474px 1.99499px 0px,
	  rgb(255, 255, 255) -0.832294px 1.81859px 0px,
	  rgb(255, 255, 255) -1.60229px 1.19694px 0px,
	  rgb(255, 255, 255) -1.97998px 0.28224px 0px,
	  rgb(255, 255, 255) -1.87291px -0.701566px 0px,
	  rgb(255, 255, 255) -1.30729px -1.5136px 0px,
	  rgb(255, 255, 255) -0.421592px -1.95506px 0px,
	  rgb(255, 255, 255) 0.567324px -1.91785px 0px,
	  rgb(255, 255, 255) 1.41734px -1.41108px 0px,
	  rgb(255, 255, 255) 1.92034px -0.558831px 0px;
}
@media only screen and (max-width:768px) {
  .mainimage,
  .mainimage .photo{height:400px;}
  .mainimage .photo img{
	object-fit:cover;
/*	height:400px;*/
/*------------ca------------*/
	height: 350px;
/*--------------------------*/
  }
  .mainimage .title{font-size:3.6rem;}
}
@media only screen and (max-width:480px) {
/*  .mainimage,
  .mainimage .photo{height:40vh;}
  .mainimage .photo img{height:40vh;}*/
/*------------ca------------*/
  .mainimage,
  .mainimage .photo{height:25vh;}
  .mainimage .photo img{height:25vh;}
/*--------------------------*/
  .mainimage .title{font-size:3.0rem;}
}

/* menu
--------------------------------------------------------------*/
.menu{
  background-color:#fff0c8;
  border-bottom:solid 5px #fc6c1c;
  padding-top:20px;
  padding-bottom:20px;
  height:40px;
  transition: .5s;
}
.menu .main-menu{
  display:flex;
  justify-content:center;
  width:1200px;
  margin:0 auto;
}
.menu .main-menu li a{
  display:block;
  background-color:#ffbc62;
  color:#fff;
  text-align:center;
  width:100px;
  height:40px;
  line-height:40px;
  overflow:hidden;
  font-size:1.4rem;
  border-top:solid 1px #fff;
  border-bottom:solid 1px #fff;
  border-left:solid 1px #fff;
  box-sizing:border-box;
  position:relative;
}
.menu .main-menu li:last-child a{border-right:solid 1px #fff;}
.menu .main-menu li .child-menu{
  position:absolute;
  z-index:10000;
}
.menu .main-menu li .child-menu a{
  background-color:#ffe1b4;
  color:#333;
  border-top:none;
  border-bottom:solid 1px #fff;
  border-left:solid 1px #fff;
  border-right:solid 1px #fff;
  height:30px;
  line-height:30px;
  text-align:left;
  padding:0 5px;
}
.menu .main-menu li a:hover,
.menu .main-menu li.act a{background-color:#fc6c1c; color:#fff;}
.menu .main-menu li .child-menu li{
  height:0;
  overflow:hidden;
  transition:.5s;
}
.menu .main-menu li:hover .child-menu li{
  height:30px;
  overflow:visible;
}
@media only screen and (max-width:1200px) {
  .menu{
	padding:0;
    display:block;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	overflow-scrolling:touch;
	overflow:auto;
	white-space:nowrap;
	height:50px;
  }
  .menu .main-menu{
    justify-content:flex-start;
	width:auto;
  }
  .menu .main-menu li a{
	height:50px;
	line-height:50px;
	border-bottom:none;
  }
  .menu .main-menu li .child-menu{}
  .menu .main-menu li .child-menu li a{
	height:40px;
	line-height:40px;
  }
}

/* sub-menu
--------------------------------------------------------------*/
.sub-menu{
  background-color:#965017;
  padding-top:10px;
  padding-bottom:10px;
  height:30px;
  transition: .5s;
}
.sub-menu .menu-list{
  display:flex;
  justify-content:flex-start;
  width:1200px;
  margin:0 auto;
}
.sub-menu li:not(:last-child){
	margin-right:10px;
}
.sub-menu li a{
  display:block;
  background-color:#965017;
  color:#fff;
  text-align:center;
  width:100px;
  height:30px;
  line-height:30px;
  overflow:hidden;
  font-size:1.4rem;
  border:solid 1px rgba(255,255,255,.3);
  box-sizing:border-box;
  position:relative;
  border-radius:50px;
}
.sub-menu li a:hover,
.sub-menu li.act a{
  background-color:#fc6c1c;
  color:#fff;
  border-color:#fc6c1c;
}
@media only screen and (max-width:1200px) {
  .sub-menu{
	padding:10px;
    display:block;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	overflow-scrolling:touch;
	overflow:auto;
	white-space:nowrap;
	height:30px;
  }
  .sub-menu .menu-list{
    justify-content:flex-start;
	width:auto;
  }
  .sub-menu .menu-list li a{
	height:30px;
	line-height:30px;
	border-bottom:none;
  }
}

/* box
--------------------------------------------------------------*/
@media only screen and (min-width:1540px) {
  .box{width:75%;}
}
@media only screen and (min-width:1720px) {
  .box{width:60%;}
}

/* pankuzu
--------------------------------------------------------------*/
.pankuzu{margin-top:15px;}
.pankuzu ul{
  display:flex;
  font-size:1.4rem;
}
.pankuzu ul li:not(:last-child)::after{
  content:'';
  background-image:url(../img/arrow_g.svg);
  background-repeat:no-repeat;
  background-size: contain;
  content:'';
  vertical-align:middle;
  display: inline-block;
  width:10px;
  height:10px;
  margin:0 10px;
  top:-2px;
  position:relative;
}
.pankuzu ul li a{margin-top:20px;}
@media only screen and (max-width:480px) {
  .pankuzu{
    display:block;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	overflow-scrolling:touch;
	overflow:auto;
	white-space:nowrap;
	padding-bottom:10px;
	width:90%;
	margin-left:auto;
	margin-right:auto;
  }
  .pankuzu .box{width:100%;}
}

/* category
--------------------------------------------------------------*/
.category-area{margin-top:10px;}
.category-area ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-size:1.4rem;
}
.category-area ul li{
  margin-left:10px;
  margin-bottom:10px;
}
.category-area ul li a{
  display:block;
  background-color:#64c8c8;
  text-align:center;
  color:#fff;
  min-width:80px;
  height:24px;
  line-height:24px;
  padding:0 10px;
}
@media only screen and (max-width:768px) {
  .category-area ul{justify-content:flex-start;}
  .category-area ul li{
	margin-left:0;
	margin-right:10px;
  }
}
@media only screen and (max-width:480px) {
  .category-area ul{font-size:1.1rem;}
  .category-area ul li a{min-width:60px;}
}

/* pagetitle
--------------------------------------------------------------*/
.pagetitle-area{
  margin-top:50px;
  overflow:hidden;
  margin-bottom:60px;
}
.pagetitle-area .title{float:left;}
.pagetitle-area h1{
  font-size:4.8rem;
  font-weight:normal;
  line-height:1.1;
  display:inline-block;
}
.pagetitle-area .yomi{
  color:#666;
  margin-bottom:10px;
}
.pagetitle-area .sns{
  float:right;
  display:flex;
}
.pagetitle-area .sns li{margin-left:20px;}
@media only screen and (max-width:768px) {
  .pagetitle-area{margin-top:30px;}
}
@media only screen and (max-width:480px) {
  .pagetitle-area{margin-bottom:30px;}
  .pagetitle-area h1{font-size:3.0rem;}
  .pagetitle-area .yomi{font-size:1.4rem;}
}

/* detai-main
--------------------------------------------------------------*/
.detail-main-area{
  padding-top:60px;
  padding-bottom:60px;
  position:relative;
}
.detail-main-area::before{
  background:url(../img/bg_diagonal_e.gif);
  position:absolute;
  display:block;
  content:'';
  z-index:-999;
  top:0;
  right:0;
  width:calc(90% - 60px);
  height:100%;
}
.detail-main-area .detai-main-box{
  display:flex;
  justify-content:space-between;
}
.detail-main-area .main-photo{width:48%;}
.detail-main-area .main-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  box-shadow: 7px 7px 7px rgba(0,0,0,.1);
}
.detail-main-area .sub-photo{width:calc(52% - 20px);}
.detail-main-area .sub-photo .sub-photo-item li{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
}
.detail-main-area .sub-photo .sub-photo-item li:not(:last-child){margin-bottom:20px;}
.detail-main-area .sub-photo .sub-photo-item .photo{width:46%;}
.detail-main-area .sub-photo .sub-photo-item .photo img{
  width:100%;
  box-shadow: 7px 7px 7px rgba(0,0,0,.1);
}
.detail-main-area .sub-photo .sub-photo-item p{width:calc(54% - 20px);}
@media only screen and (min-width:1540px) {
  .detail-main-area::before{width:calc(87.5% - 60px);}
}
@media only screen and (min-width:1720px) {
  .detail-main-area::before{width:calc(80% - 60px);}
}
@media only screen and (max-width:768px) {
  .detail-main-area .detai-main-box{flex-wrap:wrap;}
  .detail-main-area .main-photo{width:100%;}
  .detail-main-area .main-photo img{height:50vh;}
  .detail-main-area .sub-photo{
	width:80%;
	margin-top:40px;
	margin-left:20%;
  }
}
@media only screen and (max-width:480px) {
  .detail-main-area{
	padding-top:30px;
	padding-bottom:30px;
  }
  .detail-main-area::before{width:100%;}
  .detail-main-area .sub-photo{
	width:100%;
	margin-left:0;
  }
  .detail-main-area .sub-photo .sub-photo-item li{display: block;}
  .detail-main-area .sub-photo .sub-photo-item .photo{
	float:left;
	margin-bottom:10px;
	margin-right:20px;
  }
  .detail-main-area .sub-photo .sub-photo-item p{width:100%;}
}

/* detai-sub
--------------------------------------------------------------*/
.detail-sub-area{
  margin-top:60px;
  padding-bottom:60px;
  position:relative;
}
.detail-sub-area.detail-sub-left::before,
.detail-sub-area.detail-sub-right::before{
  background:url(../img/bg_diagonal_e.gif);
  position:absolute;
  display:block;
  content:'';
  z-index:-999;
  top:60px;
  width:calc(90% - 60px);
  height:calc(100% - 60px);
}
.detail-sub-area.detail-sub-left::before{left:0;}
.detail-sub-area.detail-sub-right::before{right:0;}
.detail-sub-area .detai-sub-box{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.detail-sub-left .detai-sub-box{flex-direction:row-reverse;}
.detail-sub-left .detai-sub-box .photo,
.detail-sub-right .detai-sub-box .photo{width:50%;}
.detail-sub-left .detai-sub-box .photo{margin-left:30px;}
.detail-sub-right .detai-sub-box .photo{margin-right:30px;}
.detail-sub-left .detai-sub-box .photo img,
.detail-sub-right .detai-sub-box .photo img{
  width:100%;
  box-shadow: 7px 7px 7px rgba(0,0,0,.1);
}
.detail-sub-left .detai-sub-box p,
.detail-sub-right .detai-sub-box p{
  margin-top:120px;
  width:46%;
}
@media only screen and (min-width:1540px) {
  .detail-sub-area.detail-sub-left::before,
  .detail-sub-area.detail-sub-right::before{width:calc(87.5% - 60px);}
}
@media only screen and (min-width:1720px) {
  .detail-sub-area.detail-sub-left::before,
  .detail-sub-area.detail-sub-right::before{width:calc(80% - 60px);}
}
@media only screen and (max-width:768px) {
  .detail-sub-left .detai-sub-box .photo,
  .detail-sub-right .detai-sub-box .photo{width:100%;}
  .detail-sub-left .detai-sub-box p,
  .detail-sub-right .detai-sub-box p{
	margin-top:50px;
	width:80%;
  }
  .detail-sub-left .detai-sub-box p{margin-right:20%;}
  .detail-sub-right .detai-sub-box p{margin-left:20%;}
}
@media only screen and (max-width:480px) {
  .detail-sub-area{padding-bottom:30px;}
  .detail-sub-area.detail-sub-left::before,
  .detail-sub-area.detail-sub-right::before{
	width:100%;
	top:30px;
	height:calc(100% - 30px);}
  .detail-sub-left .detai-sub-box .photo,
  .detail-sub-right .detai-sub-box .photo{width:100%; margin:0;}
  .detail-sub-left .detai-sub-box p,
  .detail-sub-right .detai-sub-box p{
	margin:30px 0 0 0;
	width:100%;
  }
}

/* detail-info
--------------------------------------------------------------*/
.detail-info-area{margin-top:60px;}
.detail-info-area a{
  text-decoration:underline;
  color:#2cc0ef;
}
.detail-info-area a:hover{text-decoration:none;}

/* detail-map
--------------------------------------------------------------*/
.detail-map-area{margin-top:60px;}
.detail-map-area .map{
  border:solid 10px #fc6c1c;
  box-sizing:border-box;
  height:640px;
  width:100%;
}
.detail-map-area .map iframe{
  width:100%;
  height:100%;
}
.detail-recomend-area h2{
  text-align:center;
  font-weight:normal;
  font-size:3.6rem;
  margin-top:40px;
  position:relative;
}
.detail-recomend-area h2::before,
.detail-recomend-area h2::after{
  position:relative;
  text-align:center;
  width:41px;
  height:35px;
  top:-1px;
  background-size: contain;
  content:'';
  vertical-align:middle;
  display: inline-block;
  background-repeat:no-repeat;
}
.detail-recomend-area h2::before{
  background-image:url(../img/h_deco_l.svg);
  left:-12px;
}
.detail-recomend-area h2::after{
  background-image:url(../img/h_deco_r.svg);
  right:-12px;
}
.detail-recomend-area .detail-recomend-list{margin-top:20px;}
.detail-recomend-area .detail-recomend-list ul{
  display:flex;
  justify-content:space-between;
}
.detail-recomend-area .detail-recomend-list ul li{width:22%;}
.detail-recomend-area .detail-recomend-list ul li .photo{width:100%;}
.detail-recomend-area .detail-recomend-list ul li .photo img{width:100%;}
.detail-recomend-area .detail-recomend-list ul li .facility{
  font-size:1.8rem;
  margin-top:5px;
}
.detail-recomend-area .detail-recomend-list ul li .text{margin-top:5px;}
@media only screen and (max-width:768px) {
  .detail-map-area .map{height:50vh;}
  .detail-recomend-area .detail-recomend-list ul{flex-wrap:wrap;}
  .detail-recomend-area .detail-recomend-list ul li{
    width:48%;
	margin-bottom:20px;
  }
}
@media only screen and (max-width:480px) {
  .detail-recomend-area h2{font-size:2.4rem;}
  .detail-recomend-area h2::before,
  .detail-recomend-area h2::after{
	width:29px;
	height:24px;
  }
  .detail-recomend-area .detail-recomend-list ul li{
    width:100%;
	overflow:hidden;
  }
  .detail-recomend-area .detail-recomend-list ul li .photo{
    width:30%;
	float:left;
  }
  .detail-recomend-area .detail-recomend-list ul li .facility,
  .detail-recomend-area .detail-recomend-list ul li .text{
	margin-top:0;
	float:right;
	width:68%;
  }
  .detail-recomend-area .detail-recomend-list ul li .facility{font-size:1.6rem;}
  .detail-recomend-area .detail-recomend-list ul li .text{font-size:1.4rem;}
}

/* detail-photo
--------------------------------------------------------------*/
.photo-list{margin-top:30px;}
.detail-photo-area ul{
  display:flex;
  flex-wrap:wrap;
}
.detail-photo-area ul li{
  width:23%;
  margin:0 1% 30px;
}
.detail-photo-area ul a .photo{
  overflow:hidden;
  width:100%;
  height:180px;
}
.detail-photo-area ul a .photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.detail-photo-area ul li .photo-caption{
  margin-top:10px;
  text-align:center;
}
@media only screen and (max-width:768px) {
  .detail-photo-area ul li{width:48%;}
  .detail-photo-area ul a .photo{height:200px;}
}
@media only screen and (max-width:480px) {
  .detail-photo-area ul li{width:98%;}
}

/* detail-event
--------------------------------------------------------------*/
.detail-event-area .event-box{
  margin-top:30px;
  display:flex;
  justify-content:space-between;
}
.detail-event-area .event-image{width:48%;}
.detail-event-area .event-image img{width:100%;}
.detail-event-area .event-text{width:48%;}
.detail-event-area .event-table{
  margin:40px auto 0;
  width:80%;
}
@media only screen and (max-width:768px) {
  .detail-event-area .event-box{display:block;}
  .detail-event-area .event-image{width:100%;}
  .detail-event-area .event-text{
	width:100%;
	margin-top:30px;
  }
  .detail-event-area .event-table{width:100%;}
}

/* detail-notes
--------------------------------------------------------------*/
.detail-notes-area p{margin-top:10px;}
.detail-notes-area a{
  color:#2cc0ef;
  text-decoration:underline;
}
.detail-notes-area a:hover{text-decoration:none;}
.detail-notes-area img{margin-top:10px;}
.detail-notes-area table{
  margin-top:30px;
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  border-top:solid #ccc 1px;
}
.detail-notes-area table th,
.detail-notes-area table td{
  padding:7px 10px;
  border-bottom:solid #ccc 1px;
  line-height:normal;
}
.detail-notes-area table td:not(:last-child){border-right:solid 1px #ccc;}
.detail-notes-area table th{
  background-color:#eee;
  font-weight:normal;
}
.detail-notes-area table td{
  text-align:left;
  background-color:#fff;
}
@media only screen and (max-width:768px) {
  .detail-notes-area img{width:100%;}
}
@media only screen and (max-width:480px) {
  .detail-notes-area table{
	display:block;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	overflow: auto;
	white-space: nowrap;
  }
  .detail-notes-area table tbody{
	width: 100%;
	display:table;
  }
}

/* detail-article
--------------------------------------------------------------*/
.detail-article-area{}
.article-list ul li{
  margin-top:50px;
  display:flex;
  justify-content:space-between;
}
.article-list ul li:nth-child(even){flex-flow:row-reverse;}
.article-list ul li .article-photo{width:48%;}
.article-list ul li .article-photo img{width:100%;}
.article-list ul li .article-text{width:48%;}
@media only screen and (max-width:768px) {
  .article-list ul li{display:block;}
  .article-list ul li .article-photo{width:100%;}
  .article-list ul li .article-text{
	width:100%;
	margin-top:30px;
  }
}

/* detail-photo layout2
--------------------------------------------------------------*/
.detail-photo-area.layout2 ul li{width:48%;}
.detail-photo-area.layout2 ul a .photo{height:320px;}
.detail-photo-area.layout2 ul li .photo-caption{text-align:left;}
@media only screen and (max-width:768px) {
  .detail-photo-area.layout2 ul a .photo{height:200px;}
}
@media only screen and (max-width:480px) {
  .detail-photo-area.layout2 ul li{width:98%;}
  .detail-photo-area.layout2 ul a .photo{height:auto;}
}