@media screen and (min-width: 1024px){

/* ----------base---------- */
html{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-size: 62.5%;
}
 body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: #fff;
	color: #555; 
	font-family: "Zen Maru Gothic", serif;
	font-weight: 500;
	font-size: 1.6rem;
	-webkit-text-size-adjust: 100%;
    animation: fadeIn 1.5s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
img{
	border: none; 
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}
a{
	outline: none;
 	transition: 0.3s;
}
a:link,
a:visited{
	color: #000;
	text-decoration: none;
 	transition: 0.3s;
}
a:hover,
a:active{
	color: #666;
	text-decoration: none;
}
.clear{
	clear: both;
}
p{
	line-height: 2;
}
br.pc{
	display: none;
}




/* -----pagescroll----- */
.pagescroll {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 5;
	width: 50px;
}
.pagescroll a{
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 0 0 auto;
	padding: 12px 15px;

	box-sizing: border-box;
	text-decoration: none;
	background-color: #56a83d;
 	transition: 0.3s;
}
.pagescroll a:hover{
	background-color: #316b1f;
}


/* ----------header---------- */
.header{
	width: 100%;
	height: 90px;
	background-color: rgba(255,255,255,0.9);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	margin: 0;
	position: fixed;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
    box-shadow: 0 0 3px rgba(0,0,0,0.15);	
}
.home .header{
	margin: -90px 0 0;
	position: -webkit-sticky; /* Safari */
	position: sticky;
 	top: 0;
}
.header .inner{
	width: 96%;
	max-width: 1600px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* title */
.header .title img{
	width: 480px;
	margin-top: 5px;
	transition: 0.3s ease;
}
.header .title img:hover{
	opacity: 0.8;
}
/* navi */
.header .navi a{
	font-weight: 600;
}
.header .navi a{
	color: #333;
	padding: 38px 10px;
	margin: 0;
}
.header .navi a:hover{
	color: #56a83d;
}



/* ----------mv---------- */
.mv{
	width: 100%;
	height: 100svh;
	background-color: #56a83d;
	position: relative;
   	z-index: 1;
	color: #fff;
 	background-image: url(../images/mv.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center; 	
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
 }
.mv h1{
	writing-mode: vertical-rl;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-size: 4rem;
	font-weight: 800;
	margin: -90px 0 0;
	line-height: 2;
   	filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));
    animation: fadeInslow 2.5s ease 0s 1 normal;
}
@keyframes fadeInslow {
    0% {opacity: 0}
	35% {opacity: 0}
    100% {opacity: 1}
}



/* ----------footer---------- */
.footer{
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 60px 0 80px;
	box-sizing: border-box;
	z-index: 1;
	position: relative;
	background-color: #56a83d;
	color: #fff;
}
/*inner*/
.footer .inner{
	width: 92%;
	max-width: 1280px;
	margin: 0 auto;
}
.footer img{
	width: 500px;
}
.footer .copyright{
	font-size: 1.3rem;
}



/* ------------section------------ */
.section{
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 90px 0;
	box-sizing: border-box;
	position: relative;
}
/*inner*/
.section .inner{
	margin: 0 auto;
	width: 80%;
	max-width: 1240px;
}


/*----------midashi------------*/
.section .midashi{
	margin: 0 0 50px;
	text-align: center;
}
.section .midashi h2{
	font-size: 3.4rem;
	font-weight: 600;
	margin: 0 0 60px;
	padding: 0;
}

/*---------btn------------*/
.section .btn{
	margin: 0;
	text-align: center;
}
.section .btn a{
	margin: 60px auto 0;
	display: block;
	width: 300px;
	height: 60px;
	line-height: 60px;
	border-radius: 30px;
	background-color: #56a83d;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
}
.section .btn a:hover{
	background-color: #316b1f;
}




/*--------------index decoration------------ */

/* ------- topics-area------- */
.section.topics-area{
}
ul.topics-list{
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	border-top: 1px solid #ccc;
}
.archive ul.topics-list{
	margin: 50px 0 !important;
}
ul.topics-list li{
	padding: 20px 0 !important;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-wrap: no-wrap !important;
}
ul.topics-list li .date{
	flex-grow: 0;
	width: 80px;
	font-weight: 500;
}
.archive ul.topics-list li .date{
	margin-top: 0;
}
ul.topics-list li .cate{
	flex-grow: 0;
	width: 100px;
	text-align: center;
	font-size: 1.4rem;
}
ul.topics-list li .cate a{
	color: #fff;
	background-color: #56a83d;
	display: block;
	width: 70px;
	padding: 2px 0;
	margin: 0 auto;
}
ul.topics-list li .cate a:hover{
	transition: 0.3s;
	background-color: #316b1f;
}
ul.topics-list li .detail{
	flex-grow: 2;
	width: calc(100% - 180px);
	margin-left: 10px;
}
ul.topics-list li .detail a:hover{
	color: #316b1f;
}




/* ------- about-area------- */
.section.about-area .inner{
	width: 100%;
	max-width: 1800px;
	position: relative;
}
.section.about-area .photo{
	position: relative;
	width: 50%;
	min-width: 600px;
	margin: -350px auto 0 0;
	z-index: 0;
}
.section.about-area .text{
	position: relative;
	width: 60%;
	min-width: 800px;
	margin: 0 0 0 auto;
	padding: 70px;
	box-sizing: border-box;
	color: #fff;
	background-color: #56a83d;
	z-index: 1;
}
.section.about-area h2{
	color: #fff;
}
.section.about-area .btn a{
	color: #56a83d;
	background-color: #fff;
}
.section.about-area .btn a:hover{
	color: #fff;
	background-color: #316b1f;
}



/* ------- shortcut-area------- */
.section.shortcut-area{
	margin: -60px 0 0;
}
.section.shortcut-area ul.panel{
	display: flex;
	justify-content: space-between;
	margin:  0;
	padding: 0;
	list-style: none;
}
.section.shortcut-area ul.panel li{
	padding: 40px 5px 30px;
	box-sizing: border-box;
	text-align: center;
	width: 33%;
	color: #fff;
	background-color: #56a83d;
}
.section.shortcut-area ul.panel li h3{
	font-size: 2rem;
}
.section.shortcut-area .btn a{
	margin: 30px auto;
	display: block;
	width: 200px;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	color: #56a83d;
	background-color: #fff;
	font-size: 1.6rem;
	font-weight: 500;
}
.section.shortcut-area .btn a:hover{
	color: #fff;
	background-color: #316b1f;
}






/* ------- contact-area------- */
.section.contact-area{
	background-blend-mode: multiply;
	background-color: #56a83d;	
 	background-image: url(../images/bg_contact.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.section.contact-area .inner{
	color: #fff;
	text-align: center;
	padding: 50px 0;
}
.section.contact-area .btn a{
	color: #56a83d;
	background-color: #fff;
	font-weight: 600;
	font-size: 2.2rem;
}
.section.contact-area .btn a:hover{
	color: #fff;
	background-color: #316b1f;
}



/* ------- link-area------- */
.section.link-area{
	padding: 40px 0;
	text-align: center;
}
.section.link-area a{
	padding: 15px;
	font-weight: 500;
}
.section.link-area a:hover{
	color: #56a83d;
}





/*--------------page decoration------------ */
/*fv*/
.fv{
	width: 100%;
	height: 300px;
	background-color: #56a83d;
	position: relative;
   	z-index: 1;
	color: #fff;
 	background-image: url(../images/fv.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center; 	
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 90px;
}

/* title*/
.fv h1{
	width: 90%;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-size: 4rem;
	font-weight: 800;
	line-height: 2;
   	filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));
}

/*pankuzu*/
.pankuzu{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #63b54c;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 500;
}
.pankuzu ul{
	width: 90%;
	margin: 0 auto;
	padding: 10px 0;
	list-style: none;
	display: flex;
}
.pankuzu ul li a{
	margin: 0 8px 0 0;
	position: relative;
	color: #fff;
}
.pankuzu ul li a:after{
	content: ">";
	position: relative;
	margin-left: 8px;
}
.pankuzu ul li a:hover{
	text-decoration: none;
	color: #eee;
}


/*----midashi-----*/
.contents-area h2{
	text-align: center;
	font-size: 3.2rem;
	margin: 0 auto;
	padding: 0;
}
.section.contents-area h3{
	font-size: 2.8rem;
	font-weight: 600;
	margin: 70px 0 30px;
	padding: 0 0 5px;
	border-bottom: solid 5px #eee;
	position: relative;
}
.section.contents-area h3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 5px #56a83d;
  bottom: -5px;
  width: 20%;
}
.section.contents-area h4{
	font-size: 2.4rem;
	font-weight: 600;
	margin: 50px 0 10px;
	padding: 0 0 10px;
	position: relative;
}
.section.contents-area h4:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: -webkit-repeating-linear-gradient(-45deg, #ddd, #ddd 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #ddd, #ddd 2px, #fff 2px, #fff 4px);
}
.section.contents-area h5{
	font-size: 2rem;
	font-weight: 600;
	margin: 50px 0 5px;
	padding: 0 0 5px;
	border-bottom: 1px dotted #ccc;
}

/*p*/
.section.contents-area p{
	margin: 30px 0;
	color: #666; 
}
/*p a*/
.section.contents-area p a{
	word-break: break-all;
}
/*strong*/
.section.contents-area strong{
	color: #56a83d;
}


/*align*/
.section.contents-area .aligncenter{
	text-align: center;
}
.section.contents-area .alignright{
	text-align: right;
}
.section.contents-area .aligncenter .wp-block img{
	display: block;
	margin: 0 auto;
}
.section.contents-area img.alignleft{
	display: block;
	float: left;
	margin: 10px 25px 10px 0;
}
.section.contents-area img.aligncenter{
	display: block;
	margin: 10px auto;
}
.section.contents-area img.alignright{
	display: block;
	float: right;
	margin: 10px 0 10px 25px;
}




/*listi*/
.section.contents-area ul{
	margin: 30px 0;
	padding: 0 0 0 25px;
}
.section.contents-area ol{
	margin: 30px 0;
	padding: 0 0 0 25px;
} 
.section.contents-area ul li,
.section.contents-area ol li{
	margin: 5px 0;
	padding: 0;
}

/*link*/
.section.contents-area p a{
	color: #56a83d;
	text-decoration: underline;
}
.section.contents-area p a:hover{
	color: #9c7c00;
	text-decoration: underline;
}

/*btn*/
.section.contents-area a.btn{
	display: inline-block;
	color: #fff;
	background-color: #56a83d;
	text-decoration: none;
	text-align: center;
	padding: 10px 40px;
	border-radius: 30px;
	font-weight: 500;
}
.section.contents-area a.btn:hover{
	color: #fff;
	text-decoration: none;
	background-color: #9c7c00;
}

/*hr*/
.section.contents-area hr{
	margin: 30px 0 0;
	border: 0; 
	height: 1px; 
	background-color: #ddd;
}

/*table*/

.scroll-table{
}
.scroll-table table{
	width: 100%;
	margin: 10px 0 30px;
	border-collapse: collapse !important;
	border-top: 1px solid #ddd;
}
.scroll-table table thead tr{
	background-color: #eee !important;
}
.scroll-table table thead,
.scroll-table table tbody{
	border-collapse: collapse !important;
}
.scroll-table table th{
	width: 160px;
	padding: 20px;
	box-sizing: border-box;
	border-bottom: 1px solid #ddd;
}
.scroll-table table td{
	padding: 20px;
	box-sizing: border-box;
	border-bottom: 1px solid #ddd;
}
.scroll-table table tr:nth-child(odd){
	background-color: #fafafa;
}
.scroll-table table td a{
	text-decoration: underline;
}


/*figure*/
.section.contents-area figure{
	margin: 0 auto;
}


/*button*/
.wp-block-button__link {
	margin-top: 20px;
	color: #fff !important;
    background-color: #56a83d !important;
    min-width: 300px;
}
.wp-block-button__link:hover{
	background-color: #316b1f !important;
}




/*----------archive----------*/
/*date*/
.archive .date{
	margin: 20px 0 0;
}

/*pagination*/
.pagination{	
	clear: both;
	width: 100%;
	margin: 30px 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 600;
}
.pagination a{
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #56a83d;
	background-color: #eee;
	transition: 0.3s ease;
	text-decoration: none !important;
	border-radius: 1px;
	margin: 0 1px;
}
.pagination a:hover{
	color: #fff !important;
	background-color: #316b1f;
}
.pagination span{
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #56a83d;
	background-color: #eee;
	transition: 0.3s ease;
	text-decoration: none;
	border-radius: 1px;
	margin: 0 1px;
}
.pagination span.current{
	color: #fff;
	background-color: #56a83d;
}
.pagination a.next,
.pagination a.prev{
	color: #56a83d;
}
.pagination a.next:hover,
.pagination a.prev:hover{
	color: #fff;
}

/*pager*/
.pager{
	clear: both;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #ddd;
	margin: 50px 0 0;
	padding: 50px 0 0;
}
.pager span{
	width: 33%;
}
.pager span:nth-child(1){
	text-align: left;
}
.pager span:nth-child(2) {
	text-align: center;
}
.pager span:nth-child(3) {
	text-align: right;
}
.pager a{
	text-decoration: none;
	color: #fff;
	background-color: #63b54c;
	display: inline-block;
	padding: 5px 20px;
	transition: 0.3s ease;
	text-decoration: none;
	font-size: 1.4rem;
}
.pager a:hover{
	color: #fff;
	background-color: #316b1f;
}



/*single*/
.single .contents-area h2{
	clear: both;
	font-weight: 600;
	font-size: 2.6rem;
	margin: 0 0 20px;
	background-color: #f7f7f7;
	padding: 10px 10px 10px 35px;
	position: relative;
	text-align: left;
}
.single .contents-area h2:before{
	position: absolute;
	left: 0px;
	top: 24px;
	content: " "; 
	width: 20px;
	height: 14px;
	background-color: #63b54c;
}
.single .post-area{
	display: flex;
	justify-content: space-between;
	margin: 0 0 50px;
	padding: 0 0 15px;
	border-bottom: 1px solid #ddd;
}
.single .post-area .date{
	width: calc(100% - 70px);
}
.single .post-area .cate{
	text-align: center;
	width: 70px;
	font-size: 1.3rem;
}
.single .post-area .cate a{
	color: #fff;
	background-color: #56a83d;
	display: block;
	width: 70px;
	padding: 2px 0;
	margin: 0 auto;
}
.single .post-area .cate a:hover{
	transition: 0.3s;
	background-color: #316b1f;
}





}




