@charset "UTF-8";

/* -----------------------------------------------------------
   HEADER
------------------------------------------------------------*/
.h-cover{
	width: 100%;
	background-color: #fdf3dc;
}
header{
	position: relative;
}
header h1{
	width: 100%;
	height: 0;
	background-image:url(../img/main.jpg) ;
	position: relative;
}
header h1 img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
header h1 span{
	white-space: nowrap;
	overflow: hidden;
}
header h1 span.logo{
	background-size: cover;
	background-image:url(../img/logo.png) ;
}
header h1 > p{
		background-color: #fbf6ea;
		background-image:url(../img/oadate.png) ;
		background-position: center center;
		background-repeat: no-repeat;
}


@media all and (min-width: 768px) {
	header{
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
	}
	header img{
		width: 100%;
		height: auto;
	}
	header h1{
		width: 100%;
		height: 0;
    margin: 0 auto;
		background-size: cover;
		padding-top: 42%;
	}
	header h1 span.logo{
		width: 30%;
    height: 0;
    padding-top: 9.5%;
    position: absolute;
    bottom: 5%;
    left: 2%;
	}
	header h1 > p{
		width: 35%;
		height: 0;
		padding-top: 8.8%;
		position: absolute;
		bottom: 5%;
		right:2%;
		border-radius: 10px;
		background-size: 90%;

	}
}

@media all and (max-width: 767px) {
	header{
		margin-bottom: 20%;
	}
	header h1 span.logo{
		width: 50%;
		height: 0;
		display: block;
		position: absolute;
		left: 0;
	  right: 0;
	  margin: auto;
		bottom: 5%;
		padding-top: 15.8333%;
	}
	header h1{
		background-size: 110%;
		padding-top: 58%;
		background-position: 80% center;
	}
	header h1 > p{
		width: 100%;
		height: 0;
		padding-top: 17%;
    background-size: 68%;

	}
}
/* -----------------------------------------------------------
   Twitter TL
------------------------------------------------------------*/
#Twitter .inner{
	text-align:center;
}
/* -----------------------------------------------------------
   PRESENT
------------------------------------------------------------*/
#Present .inner h3{
	border-top:solid 2px #58a614;
	border-bottom:solid 2px #58a614;
	font-weight: 700;
	color: #58a614;
	text-align: center;
}
#Present .inner h4{
	border-top:solid 2px #674714;
	border-bottom:solid 1px #674714;
	font-weight: 700;
	color: #674714;
	text-align: center;
}
#Present .inner p{
	font-size: 90%;
	line-height: 1.6;
}
#Present .inner .tel{
	background-color: #5da30d;
	color: #fff;
	text-align: center;
	font-weight: 500;
}
#Present .inner .tel a{
	color: #fff;
	text-decoration: none;
}
#Present .inner .form a{
	background-color: #f05c8c;
	color: #fff;
	text-align: center;
	display: block;
	font-weight: 500;
	transition: 0.6s;
}
#Present .inner .form a:hover{
	background-color: #d31150;
	text-decoration:none;
}
#Present .inner .end{
	font-weight: 700;
	color: #d31150;
	text-align: center;

}

@media all and (min-width: 768px) {
	#Present .inner h3{
		font-size: 120%;
		padding: 10px 0;
		line-height: 1.4;
		margin-bottom: 20px;
	}
	#Present .inner h4{
		font-size: 110%;
		padding: 10px 0;
		line-height: 1.4;
		margin-bottom: 30px;
	}
	#Present .inner .tel{
		margin-bottom: 6px;
	}
	#Present .inner .tel a{
		font-size: 110%;
	}

	#Present .inner .form a{
		margin-bottom: 10px;
		font-size: 120%;
	}
	#Present .inner .tel , #Present .inner .form a{
		padding: 8px;
	}
	#Present .inner .tel .num{
		font-size: 180%;
	}
	#Present .inner .tel a[href^="tel:"]{
    pointer-events: none;
  }
	#Present .inner .end{
		margin: 10px auto 20px;
		font-size: 100%;
	}
}

@media all and (max-width: 767px) {
	#Present .inner h3{
		font-size: 110%;
		font-weight: 700;
		padding: 10px 0;
		line-height: 1.4;
		margin-bottom: 10px;
	}
	#Present .inner h4{
		font-size: 100%;
		font-weight: 700;
		padding: 10px 0;
		line-height: 1.4;
		margin-bottom: 10px;
	}
	#Present .inner .tel{
		margin-bottom: 6px;
		font-size: 100%;
	}
	#Present .inner .form{
		font-size: 100%;
	}
	#Present .inner .form a{
		margin-bottom: 10px;
	}
	#Present .inner .tel , #Present .inner .form a{
		padding: 8px;
		font-weight: 700;
	}
	#Present .inner .tel .num{
		font-size: 140%;
	}
	#Present .inner .end{
		font-size: 90%;
		margin-bottom: 10px;
	}

}
/* -----------------------------------------------------------
   ABOUT
------------------------------------------------------------*/
#About .inner h3{
	font-weight: 700;
	color: #5aa409;
}
#About .inner p{
	font-size: 90%;
	line-height: 1.6;
}
@media all and (min-width: 768px) {
	#About .inner h3{
		font-size: 110%;
		line-height: 1.4;
		margin-bottom: 5px;
	}
}
@media all and (max-width: 767px) {
	#About .inner h3{
		font-size: 100%;
		font-weight: 700;
		line-height: 1.4;
		margin-bottom: 5px;
	}
}

/* -----------------------------------------------------------
   TOPICS
------------------------------------------------------------*/
#Topics .inner h3 {
	font-weight: 700;
	color: #f79205;
}
#Topics .inner #t20201221{
	height: 0;
	background-size: cover;

}
#Topics .inner h4{
	font-weight: 700;
	color: #5aa409;
}
#Topics .inner p{
	font-size: 90%;
	line-height: 1.6;
}
#Topics figure .lazy{
	display: block;
	width: 100%;
	height: 0;
	background-size: cover;
	position: relative;
}
#Topics figure.ph1 .lazy{padding-top: 66.5625%;}
#Topics figure.ph2 .lazy{padding-top: 56.25%;}
#Topics figure.ph3 .lazy{padding-top: 66.71875%;}
#Topics figure.ph4 .lazy{padding-top: 88.75%;}

@media all and (min-width: 768px) {
	#Topics .inner #t20201221{
		background-image:url(../img/20201221/title.png?) ;
		width: 90%;
		margin: 0 auto 30px;
		padding-top: 25.3125%;
	}
	#Topics .inner .block{
		margin-bottom: 30px;
	}
	#Topics .inner .block p{
		overflow: hidden;
	}
	#Topics .inner h3{
		font-size: 120%;
		line-height: 1.2;
		margin-bottom: 10px;
	}
	#Topics .inner h4{
		font-size: 100%;
		line-height: 1.4;
		margin-bottom: 5px;
	}
	#Topics .inner .date{
		font-size: 80%;
	}
	#Topics figure{
		width: 40%;
		float: left;
    margin-right: 20px;
	}
}
@media all and (max-width: 767px) {
	#Topics .inner #t20201221{
		background-image:url(../img/20201221/title.png) ;
		width: 100%;
		margin: 0 auto 20px;
		padding-top: 28.125%;
	}
	#Topics .inner .block{
		margin-bottom: 30px;
	}
	#Topics .inner h3{
		font-size: 110%;
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 10px;
	}
	#Topics .inner h4{
		font-size: 100%;
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 5px;
	}
	#Topics .inner .date{
		font-size: 80%;
	}
	#Topics figure{
		width: 100%;
		margin: 0 auto 10px;
	}
}