@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP');
@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');
/* CSS Document */
html {
  scroll-behavior: smooth;
}
#wrapInner {
    width: 100%!important;
}
#inner950 {
    width: 100%;
	max-width:950px;
    margin: 0 auto;
    display: block;
}
#anchorLinkBlock {
    width: 100%;
	max-width:950px;
    margin: 0 auto !important;
    display: block;
}
#wrapper {
	width: 100%;
	/*max-width:950px;*/
	margin:0 auto 10px;
	padding:0;
 	font-size:14px;
	line-height:1.6;
	font-family: 'Noto Serif JP', serif;
  overflow: hidden;
}
#wrapper *{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
#wrapper a{
   word-break: break-all;  
} 
/*--------common-------------*/
@media (min-width:768px){
   .pc_none{
    	display: none;
  }
   .sp_br{
    	display: none;
  }
}
@media (max-width:767px){
   .sp_none{
    	display: none;
  }
}
.text_red {
	color: #B20202;
	border-bottom: 1px solid #B20202;
}
.text_bold {
	font-weight: bold;
}
.text_normal {
	font-weight: normal;
}
.text_center {
	text-align: center;
}
.text_font_sans {
	font-family: 'Noto Sans JP', sans-serif;
}
.attention {
	font-size:90%;
	text-indent: -1em;
	margin-left: 1em;
	margin-bottom: 5px;
}
.box {
	background: rgba(243,243,243,1.00);
	padding: 20px 30px;
	margin-bottom: 10px;
	border-radius: 5px;
  text-align: left;
}

.mgn_btm20 {
	margin-bottom: 20px;
}	
.marker {
	background: linear-gradient(transparent 80%, #ffd22c 80%);
	font-weight: bold;
}
a.godetail{
	display: block;
  padding: 20px 5px 25px;
	text-align: center;
	text-decoration: none;
	background: url("../images/button.png") no-repeat center bottom;
	background-size:100% ;
	color: #FFFFFF;
	font-family: 'Noto Sans JP', sans-serif;
	z-index: 100;
}
@media (max-width:767px){
  a.godetail{
    padding: 10px 5px 15px;
    font-size: 90%;
  }
  .attention {
    text-align: left;
    width: 90%;
    margin-left: 10%;
  }
}
a.godetail.chubu{
	background: url("../images/button_chubu.png") no-repeat center bottom;
	background-size:100% ;
}
a.godetail:hover {
	color: #FFFFFF !important;
	text-decoration: none !important;
	opacity: 0.8;
}
a.godetail.gray{
	background: url("../images/button_gray.png") no-repeat center bottom;
	background-size:100% ;
	pointer-events: none;
}
a.gotop{
	margin: 20px auto;
	text-align: center;
	text-decoration: none;
	color: #333333;
	font-family: 'Noto Sans JP', sans-serif;
}
a.gotop:hover{
	opacity: 0.8;
}
/*--------.page_roof-------------*/
.page_roof {
	width: 100%;
  position: relative;
  margin-bottom:20px;
}
.page_roof > .inner {
	width: 100%;
	text-align: center;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../images/top_backmask.png")no-repeat center;
  background-size: cover;
  z-index: 1;
}
.page_roof h2{
  width: 100%;
  max-width: 950px;
	margin: 0 auto;
  animation: fadeIn 4s;
}
.page_roof h2 img{
  width: 80%;
}

@media (max-width:767px){
  .page_roof h2 img{
    width: 70%;
  }
}
@keyframes fadeIn { 
  0% { opacity: 0; }
  40% { opacity:0;}
  100% { opacity:1;}
}
/*-------------ナビ-   --------------*/
.fixed {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
}
/*-------------トップリード-------------*/
#topLead{
  width: 100%;
  margin-bottom: 50px;
}
#topLead .inner{
  width: 100%;
  max-width: 950px;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
  color: #585858;
  flex-direction: row-reverse;
}
#topLead #art{
  width: 48%;
  position: relative;
  text-align: center;
}
#topLead #book{
  width: 48%;
  position: relative;
  margin-top: 120px;
  text-align: center;
}
#topLead #lastcap{
  width: 100%;
  margin-top: 30px;
  text-align: center;
}
#topLead img{
  width: 90%;
}
#topLead h2{
  font-size: 140%;
  font-family: 'Noto Sans JP', sans-serif;
  writing-mode:vertical-rl;
  font-weight: bold;
  background: rgba(255,255,255,0.7);
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.5em;
  padding: 5px;
}
#topLead #art h2{
  position: absolute;
  top: 0;
  left: 0;
}
#topLead #book h2{
  position: absolute;
  top: 0;
  right: 0;
}
#topLead #lastcap h2{
  writing-mode: horizontal-tb;
}

#topLead #art h2 span{
  color: #9F0000;
}
#topLead #book h2 span{
  color: #002B9F;
}
#topLead .comment{
  width:80%;
  margin: 20px auto;
}
#topLead .comment p{
  font-size: 110%;
  text-align: left;
}
@media (max-width:767px){
  #topLead .inner{
    justify-content:center;
  }
  #topLead h2{
  font-size: 130%;
  letter-spacing: 0.1em;
  margin-left: -15px;
}
  #topLead #art{
    width: 90%;
    position: relative;
    align-self: flex-start;
    order: 1;
  }
  #topLead #book{
    width: 90%;
    position: relative;
    margin-top: 0;
    align-self: flex-start;
    order: 2;
  }
  #topLead #lastcap{
    width: 80%;
    order: 3;
  }
  #topLead #art h2{
    left: 30px;
  }
  #topLead #book h2{
    right: 30px;
  }
}
/*-------------ナビ --------------*/
nav.pageNav{
  width: 100%;
}
nav.pageNav ul{
	width: 100%;
	margin: 0 auto;
  max-width: 950px;
  display: flex;
  justify-content: space-between;
  align-items:flex-end;
}
nav.pageNav ul li{
	width: 32%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
	text-align: center;
	cursor: pointer;
}
nav.pageNav ul li.selected{
  height: 90px;
}
nav.pageNav ul li:first-child{
	background: #6F6949;
}
nav.pageNav ul li:nth-child(2){
	background: #444765;
}
nav.pageNav ul li:last-child{
	background: #71534D;
}
nav.pageNav ul li p{
	font-size: 200%;
  color: #FFFFFF;
}

@media (max-width:767px){
  nav.pageNav ul{
    width: 95%;
    margin: 0 auto;
  }
	nav.pageNav ul li{
    width: auto;
    height: 50px;
    flex-grow: 1;
    margin: 0 2px;
	}
  nav.pageNav ul li.selected{
    height: 60px;
  }
	nav.pageNav ul li p{
		font-size: 100%;
	}
  nav.pageNav ul li.selected p{
		font-size: 120%;
  }
}
/*-------------タブラップ--------------*/
.tab_wrap {
	width:100%;
}
#tab01_panel {
  background: rgba(111, 105, 73, 0.05);
}
#tab02_panel {
  background: rgba(68, 71, 101, 0.05);
}
#tab03_panel {
  background: rgba(113, 83, 77, 0.05);
}
.tab_wrap .inner{
	width:90%;
  max-width: 950px;
  margin: 0 auto;
  padding: 60px 0 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
/*-------施設ボックス--色設定------------*/
#tab01_panel .region{
  background: #6F6949;
}
#tab01_panel h3{
  color: #6F6949;
}
#tab02_panel .region{
  background: #444765;
}
#tab02_panel h3{
  color: #444765;
}
#tab03_panel .region{
  background: #71534D;
}
#tab03_panel h3{
  color: #71534D;
}
/*------芸術×宿---読書×宿----施設ボックス--------------*/
.shisetsu{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 60px;
}
.shisetsu{
  align-items: flex-end;
}
.shisetsu .profile{
  width: 34%;
}
.shisetsu .information{
  width: 100%;
  margin-bottom: 20px;
}
.tab_wrap .information dl{
  width: 100%;
  display: flex;
  margin-bottom: 5px;
}
.tab_wrap .information dl dt{
  width: 5em;
}
.tab_wrap .information dl dd{
  flex-grow: 1;
}
.tab_wrap .profile .region{
  font-size: 90%;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 20px;
  text-align: center;
  margin-bottom: 10px;
}
.tab_wrap .profile h3{
  font-size: 170%;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
.shisetsu .photo{
  width: 64%;
}
.tab_wrap .photo img{
  width: 100%;
}
.tab_wrap .comment{
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
}
.tab_wrap .comment p{
  font-size: 110%;
}
.tab_wrap .yoyaku {
  width: 100%;
}
.yoyaku_unit {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.yoyaku_unit a{
  width: 31.3%;
  margin: 0 1%;
}
.photoname {
  position: absolute;
  bottom: 15px;
  right: 10px;
  width: 50%;
  color: #fff;
  font-size: 80%;
  text-align: right;
}

@media (max-width:767px){
  .shisetsu{
    margin-bottom: 50px;
  }
  .shisetsu .profile{
    width: 100%;
    margin-bottom: 10px;
  }
  .tab_wrap .profile h3{
    font-size: 130%;
  }
  .shisetsu .photo{
    width: 100%;
  }
  .tab_wrap .comment{
    width: 100%;
    margin-top: 10px;
  }
  .tab_wrap .comment p{
    font-size: 100%;
  }
  .yoyaku_unit a{
    width: 48%;
    margin: 0 1%;
  }
}
.shisetsu.half{
  width: 49%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 60px;
  align-self: flex-start;
}
.shisetsu.half .profile{
  width: 100%;
  margin-bottom: 10px;
}
.shisetsu.half .photo{
  width: 100%;
}
.shisetsu.half .yoyaku_unit a{
  width: 48%;
  margin: 0 1%;
}
@media (max-width:767px){
  .shisetsu.half .yoyaku_unit a{
    width: 95%;
    margin: 0 auto 15px;
  }
}
/*------芸術×美術館----施設ボックス--------------*/
@media (min-width:767px){
  .shisetsu2{
    width: 100%;
    margin-bottom: 60px;
  }
  .shisetsu2 .profile{
    width: 34%;
    float: right;
    margin-bottom: 20px;
  }
  .shisetsu2 .information{
    width: 34%;
    float: right;
  }
  .shisetsu2 .photo{
    width: 64%;
    float: left;
    margin-bottom: 20px;
  }
  .shisetsu2 .comment{
    clear: both;
  }
}  
@media (max-width:767px){
  .shisetsu2{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .shisetsu2 .profile{
    order: 1;
    width: 100%;
    margin-bottom: 10px;
  }
  .shisetsu2 .photo{
    order: 2;
    width: 100%;
    margin-bottom: 20px;
  }
  .shisetsu2 .information{
    order: 3;
    width: 100%;
  }
  .shisetsu2 .comment{
    order: 4;
    width: 100%;
  }
  .shisetsu2 .yoyaku{
    order: 5;
    width: 100%;
  }
}

/*-----スライドswiper カスタマイズ-共通-------------------*/
.swiper-container{
	width: 100%;
}
.swiper-container .swiper-slide img{
	width: 100%;
}
.swiper-pagination {
  width: 100%;
}
.swiper-pagination .swiper-pagination-bullet {
  margin: 0 5px;
}
.swiper-button-prev:focus,
.swiper-button-next:focus{
  outline: none;
}

/*-----トップwiper カスタマイズ--------------------*/
.swiper-container.top{
	width: 100%;
	margin:0 auto;
}
.swiper-container.top .swiper-slide{
  position: relative;
	width: 100%;
	margin:0;
  padding-top: 450px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-container.top .swiper-slide p{
	z-index: 10;
  position: absolute;
  width: 100%;
  max-width: 950px;
	margin:0 auto 10px;
	bottom:0;
	right:0;
  left: 0;
	text-align: right;
	font-size: 100%;
	color: #FFFFFF;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.swiper-container.top .swiper-slide .slide-img {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right:0 ;
	width: 100%;
  height: 100%;
	margin:0;
  background-size: cover; 
  background-position: center center; /* 背景画像は中央を軸に表示させる */
}
@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}
@keyframes zoomUp { /* 1.15倍させる指定 */
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img { /* 12秒かけて拡大させる */
    -webkit-animation: zoomUp 12s linear 0s;
    animation: zoomUp 12s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@media (max-width:767px){
  .swiper-container.top .swiper-slide{
    position: relative;
    width: 100%;
    margin:0;
    padding-top: 45%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/*-----inboxswiper--------------------*/
.swiper-container.inbox{
	margin:0 auto;
}
.swiper-pagination.inbox {
	bottom: 15px;
}
.swiper-pagination.inbox .swiper-pagination-bullet{
  opacity: 0.6;
}
.swiper-pagination.inbox .swiper-pagination-bullet-active{
  background: #FFFFFF;
}
.swiper-button-prev.inbox::after,
.swiper-button-next.inbox::after{
	font-size:20px;
	color: #FFF;
	font-weight: bold;
}
.swiper-button-prev.inbox{
	left:5px;
	top:48%;
}
.swiper-button-next.inbox{
	right:5px;
	top:48%;
}
@media (max-width:767px){
	.swiper-button-prev.inbox::after,
	.swiper-button-next.inbox::after{
		font-size:15px;
	}
	.swiper-button-prev.inbox{
		left:3px;
		top:46%;
	}
	.swiper-button-next.inbox{
		right:3px;
		top:46%;
	}
}



/*--------タブ---------------------------------------------*/
.disnon {
  display: none;
}