/* ===========  kyoto original CSS =========== */

@charset "UTF-8";

#main #main_title h2 {
  font-size: 1.7rem;
}

div.kyoto-daichou-nav {
	padding-bottom: 0 !important;
	padding-top: .5em !important;
}

div.kyoto-daichou-nav a {
	font-size: 1.2em;
	text-decoration: underline;
}

div.kyoto-daichou-nav a:hover {
	font-weight: bold;
}

div.image {display:box;
	padding:0% 0% 0% 0%;
}

div.box {margin-right;
}

div.note{font-size: 12px;
}
							
div.text > div {
	margin-bottom: 1.5rem;
}

/* ===========  3 column =========== */

.kyoto-col-3 {
	column-count: 3;
	width: 100%;
	display: grid;
	grid-template-columns: 380px 380px 380px;
	column-gap: 15px;
}

.kyoto-col-3 > section {
	braek-inside: avoid;
}

.kyoto-col-3 .text {
	text-align: center;
}
#main .kyoto-col-3 .detail div.line h1 { line-height: initial; }
#main .kyoto-col-3 .detail div.image { padding-bottom: .5rem; }

@media screen and (max-width: 1180px){
	.kyoto-col-3 {
		column-count: 3;
		width: 100%;
		display: grid;
		grid-template-columns: 380px 380px;
		column-gap: 15px;
	}
	.kyoto-col-3 > section {
		braek-inside: avoid;
	}
	.kyoto-col-3 .text {
		text-align: center;
	}
	#main .kyoto-col-3 .detail div.line h1 { line-height: initial; }
	#main .kyoto-col-3 .detail div.image { padding-bottom: .5rem; }
}

@media screen and (max-width: 780px){
	.kyoto-col-3 {
		column-count: 3;
		width: 100%;
		display: grid;
		grid-template-columns: 380px;
		column-gap: 15px;
	}
	.kyoto-col-3 > section {
		braek-inside: avoid;
	}
	.kyoto-col-3 .text {
		text-align: center;
	}
	#main .kyoto-col-3 .detail div.line h1 { line-height: initial; }
	#main .kyoto-col-3 .detail div.image { padding-bottom: .5rem; }
}

/* ===========  4 column =========== */

.kyoto-col-4 {
	column-count: 4;
	width: 100%;
	display: grid;
	grid-template-columns: 280px 280px 280px 280px;
	column-gap: 15px;
}

.kyoto-col-4 > section {
	braek-inside: avoid;
}

.kyoto-col-4 .text {
	text-align: center;
}
#main .kyoto-col-4 .detail div.line h1 { line-height: initial; }
#main .kyoto-col-4 .detail div.image { padding-bottom: .5rem; }

@media screen and (max-width: 1180px){
	.kyoto-col-4 {
		column-count: 4;
		width: 100%;
		display: grid;
		grid-template-columns: 280px 280px 280px;
		column-gap: 15px;
	}
	.kyoto-col-4 > section {
		braek-inside: avoid;
	}
	.kyoto-col-4 .text {
		text-align: center;
	}
	#main .kyoto-col-4 .detail div.line h1 { line-height: initial; }
	#main .kyoto-col-4 .detail div.image { padding-bottom: .5rem; }
}

@media screen and (max-width: 780px){
	.kyoto-col-4 {
		column-count: 4;
		width: 100%;
		display: grid;
		grid-template-columns: 280px;
		column-gap: 15px;
	}
	.kyoto-col-4 > section {
		braek-inside: avoid;
	}
	.kyoto-col-4 .text {
		text-align: center;
	}
	#main .kyoto-col-4 .detail div.line h1 { line-height: initial; }
	#main .kyoto-col-4 .detail div.image { padding-bottom: .5rem; }
}

/* ===========  table layout =========== */

#kyoto-table table{
	width:95%;
	margin:auto;
	table-layout:fixed;
	word-break:break-all;	
}

#kyoto-table th {
	border: 1px #000000 solid;
	text-align:center;
	vertical-align:middle;
	padding: 5px 5px 5px 5px;
}

#kyoto-table td {
	border: 1px #000000 solid;
	text-align:center;
	vertical-align:middle;
	padding: 5px 5px 5px 5px;
}


/* ===========  goto Top Page =========== */

.totop {
	position:fixed;
	bottom:15px;
	right:25px;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background:#00CCFF;
}
.totop img:hover {
	background:#3399ff;
}

/* ===========  smooth scrolling =========== */


html{
  scroll-behavior: smooth;
}

/* ========================================================= */



@media screen and (max-width: 800px) {
	.img {
		width: 25%;
	}
}

@media screen and (max-width: 600px) {
	.img {
		width: 40%;
	}
	.image { display:block;
	}
	.box{width:80%;
	}
	.text { width: 100%;
	}
}