@charset "utf-8";
/* CSS Document */
body   {background-image: 
    linear-gradient(to bottom, transparent 0%, #3AB844 100%),  /*ボトムに向かって緑 */
    linear-gradient(to right, #FF7F0A 0%, white 50%, #29C5FE 100%); /* 左→中央→右 */
  background-blend-mode:normal;}


body{width:calc(100 + 30vw);font-size: calc(0.7rem + 0.3vw);padding: 0;margin: 0;}
    body,#wrapper {display: flex;flex-direction: column;min-height: 100vh;}
    div,ul,p{ margin-top: 0px;padding-left: 0}
    h1,h2,h3,h4,h5,h6{margin-top: 0.5em}
    ul{display: table;margin: 0 auto;}
    ul li{display: table-cell;list-style: none;vertical-align:top;}
    p{word-wrap: break-word}    
a{/*color:#398D45;*/text-decoration: none}
a:hover{text-decoration: underline}
/*a:link{color:#398D45 }*/
    section{padding: 1em;}
 #main{padding-top: 0;}
   

 /*    #main ul{width:73%}
    #main li{width:50%;vertical-align:top;}*/


 #contents{ font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif","Osaka-mono"}
 
/* flexbox*/

.flexbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin:0;
}

.flexbox > div {
  background: #FFFFFF;
  padding: 1em;
  flex: 1 0 250px;
  margin: 0.2em;
border:1px solid #D8C78D;
}

/* pagetop */
    #pagetop{
    position: fixed;
    background-color: rgba(31,118,36,0.75);
	border-radius:50px;
	color:#fff;
 	padding:1rem  1.1rem;    
    right: 2%;
    bottom: 2%;
    opacity: 0;
    -ms-filter: "alpha( opacity=0 )";
    filter:alpha(opacity=0);
    zoom:1;
    z-index: 9999;
}    

      #pagetop a{
	color:#fff;
      }
   
.info{color: #03344B; background: #fff;font-size:1.25em;border-radius: 5px; padding:16px 8px 1px 8px;line-height:2em;padding-bottom: 1.5em}

.info td{padding-right: 10px; vertical-align: top;}
/*.info table{padding-bottom: 10px}*/

.pc{width: 12%; margin-left: 85%;margin-top: -3.8em; color:#fff; background: rgba(249,61,18,0.75); padding: 10px;text-align: center;border-radius: 30px;}
.sm{width:70%; margin: 0 auto;color:#fff; background: rgba(241,81,45,0.75); padding: 10px;text-align: center;border-radius: 30px;}
.sch{background:#03344B; color: #fff; font-weight: bold; padding: 0.5em; border-radius: 5px; }

.strech{max-width: 100%; width: 100%}
.map{background: #fff; filter: drop-shadow(0 0 0.15rem #999);}
.sub{font-size: smaller; color:#534515}

/*#event {margin-left:-1em}
#event li {width:33%;background: #FDFBF6; box-shadow:0 0 0.1rem #A38F4F;}*/
#event h4, #tenji h4{color:#534515;border-bottom:double 3px #A38F4F}
hr {border-top: 2px dotted #A38F4F;
}     
/*.vertical{
		border: none;
		border-left: 1px solid hsla(200, 10%, 50%,100);
		height: 15vh;
		width: 1px;
} */   
 
/*#news{background: #fff;}
#news h3{background:#FF8600; color: #fff;text-align: center}*/
.alertinfo{width: calc(100 + 30vw); margin: 0 auto;margin-top: 0.5em; border: solid 1px #FF8600}


/* menutab */
       
.tab_wrap{width:calc(100 + 30vw); margin:0px auto;}
input[type="radio"]{display:none;}
.tab_area{ margin:0 5px 0 0;}
.tab_area label{width:250px; margin:0 5px; display:inline-block; padding-top:8px; color:#000; text-align:center; cursor:pointer; transition:ease 0.2s opacity;filter: drop-shadow(0 0 0.15rem #999);font-size: calc(0.6rem + 0.3vw);}
.tab_area h3{font-size: calc(0.9rem + 0.3vw)}

.panel_area{background:#FCF5E8;padding: 2em;filter: drop-shadow(0 0 0.25rem #999);box-shadow:0 0 0.2rem #A38F4F}
.panel_area li {padding: 0 2em;width: 50%}
.panel_area h2 {font-size: calc(1.6rem + 0.3vw);text-shadow:2px 1px 0  #fff;color:#333;padding-left: 0.2em}
.panel_area h3 {font-size: calc(1rem + 0.3vw);font-family:'M PLUS 1p', sans-serif;text-align: center}
.tab_panel{width:100%;  display:none;
}

.tab1_label{background:#B0DBEF;}
.tab2_label{background:#C0E144;}
.tab3_label{background:#FFE250;}

.tab1_label:hover{background:#4396ED; border-top: 6px solid #fff}
.tab2_label:hover{background:#35901F; border-top: 6px solid #fff}
.tab3_label:hover{background:#FF8600; border-top: 6px solid #fff}

#tab1:checked ~ .tab_area .tab1_label{ color:#fff; border-top: 6px solid #B0DBEF; background: #4396ED; text-shadow:0 0 0.3rem #999;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{color:#fff; border-top: 6px solid #B6FF9D; background: #26A435; text-shadow:0 0 0.3rem #999;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{color:#fff; border-top: 6px solid #FFCF9A; background: #FF8600;text-shadow:0 0 0.3rem #999;}
#tab3:checked ~ .panel_area #panel3{display:block;}

#panel1 h2{background: linear-gradient(transparent 70%, #4396ED 70%)}
#panel2 h2{background: linear-gradient(transparent 70%, #35901F 70%)}
#panel3 h2{background: linear-gradient(transparent 70%, #FF8600 70%)}

#panel1 .alert{background:#FF8600;color:#fff;padding:0.3em;border-radius: 3px;font-family:'M PLUS 1p', sans-serif;font-size:smaller}
#panel2 h3{background: -webkit-repeating-linear-gradient(-45deg, #F4FFD2, #F4FFD2 2px, #B6EBA9 2px, #B6EBA9 4px);
  background: repeating-linear-gradient(-45deg, #B6EBA9, #B6EBA9 2px, #F4FFD2 2px, #F4FFD2 4px);padding:0.25em;border-top:solid 2px #35901F; border-bottom:solid 2px #35901F;color:#35901F}
#panel3 h3{background: -webkit-repeating-linear-gradient(-45deg, #FFF2D2, #F5E49E 2px, #FFF2D2 2px, #F5E49E 4px);
  background: repeating-linear-gradient(-45deg, #F5E49E, #F5DC9E 2px, #FFF2D2 2px, #FFF2D2 4px);padding:0.25em;border-top:solid 2px #EFB932; border-bottom:solid 2px #EFB932;color:#EF9532}
#panel1 a, a:hover, a:link{color: #1399D8}
#panel2 a, a:hover, a:link{color: #35901F}
#panel3 a, a:hover, a:link{color: #FF8600}


.column{ background: #FFFFFF;
  padding: 1em;
  margin: 0.2em;
border:1px solid #5B4A0F;}
.column h4{color:#5B4A0F; border-bottom: 3px double}

/* media query */

/*@media screen and (max-width:360px){
     #main{background:url(../../kyoto/images/bg2.jpg) no-repeat;margin-right: -5px}  
}*/

@media screen and (max-width:480px){
    ul li{display: table-row; text-align: center}
    #main{max-height: none;}
   /* #main ul{width: 100%}
    #main .strech{width: 70%;}*/
    #contents{width:94%;}
    .sm{width:90%}
    .tab_area{width: 100%;display:flex;padding: 0; margin: 0}
    .tab_area label{font-size: calc(0.5rem + 0.3vw)}
 .tab_area h3{font-size: calc(0.6rem + 0.3vw)}
    .panel_area h2 {font-size: calc(1rem + 0.3vw)}

        .panel_area ul li{display: table-row; text-align:left}
        /*.map{display: none}*/
    #event{ margin-left: -1em;}
    }    
      @media screen and (min-width:480px){
          #contents{width:90%}
      }
    
    @media screen and (min-width:751px){
    .sm{display:none}
        
    }
        @media screen and (max-width:750px){    
    .panel_area ul li{display: table-row;}
    .pc{display:none}
            
    }

    @media screen and (max-width:916px){
        .tab_area label{width: 30%; padding: 0}
   
    }
    
/*    @media screen and (max-width:1200px){
    #main{max-height: 470px !important}
}
 */

@media screen and (min-width:1169px){
    #contents{margin-top:0.3em}
}
    @media screen and (min-width:1280px) {
        section{width: 1200px; margin: 0 auto;}
     #contents{width: 1200px;margin-top:0.3em} 
       /*
#main{max-width: 1080px;max-height: 450px}*/
}
    

/* slideshow */
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide2 {
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 1;}
}

 /*画像ブロック*/
#aboutslide {
	clear: left;
	/*width: 70%;*/
	height: auto;
	position: relative;
    margin: 0 auto;
}

 /*３枚画像の共通設定*/
#slide1,#slide2,#slide3 {
	-webkit-animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 15s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	border-radius:5px;
}

#slide1 {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: relative;
	width: 100%;
	height: auto;
}

#slide2 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}

#slide3 {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}

/* footer */
footer {margin-top: auto;padding: 1em;background: rgba(57,124,141,0.75); color:#eee; padding-left: 5%;font-size:0.9em;padding-top: 0px;
    /* height:100%;margin-bottom:0;margin-top:1.5em;  padding-bottom:0; */ }
footer a{color:#fff !important;}
footer a:hover{color: #ffc !important}
footer li{display:inline-block; padding:8px;}