@charset "UTF-8";
/* CSS Document */

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 18px;
	font-weight: 500;
    line-height: 210%;
    font-family: 'Zen Maru Gothic',"Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Helvetica", Arial, "メイリオ", Meiryo, sans-serif;
     -moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
    background-color: #FFFFFF;
    color: #292929;
	text-align: left;
}

wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 70%;
}

a {
    color: #077c84;
    text-decoration: none;
}

.pc-no {
    display: none;
}

.sp-no {
    display: inline;
}

.fade {
	opacity: 1.0;
	transition: all 0.3s;
}

.fade:hover {
	opacity: 0.5;
}

.hira {
	font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN;
}

/***HEADER***/

.header {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-top: solid 20px #62BB46;
}

.hdr-wrap {
    width: 98%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 0;
    position: relative;
    overflow: hidden;
}

.hdr-top {
    display: flex;
    justify-content: space-between;
	align-items: center;
}

.hdr-top .logo {
    width: 40%;
    max-width: 500px;
}

.hdr-top .ht-r {
    width: 45%;
    max-width: 400px;
    display: flex;
    justify-content: space-between;
	align-items: center;
}

.hdr-top .ht-r .ht-contact {
    font-size: 130%;
	text-align: left;
	line-height: 160%;
}

.hdr-top .ht-r .ht-icon {
    width: 18%;
}

.hdr-nav {
	width: 100%;
	margin: 0;
	padding: 10px 0;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
    align-items: center;
	font-size: 110%;
    line-height: 140%;
}

.hdr-nav a {
	display: block;
	padding: 10px 1%;
	color: #595757;
	transition: 0.3s;
    text-align: center;
}

.hdr-nav a:after {
	content: "";
	width: 100%;
	height: 5px;
	display: block;
	background-color: transparent;
	border-radius: 10px;
	transition: 0.3s;
}

.hdr-nav a:hover:after {
	background-color: #62BB46;
}

.sp-nav {
	display: none;
}

/***MAIN***/

.main {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
}

.main-img,.bot-img {
	width: 98%;
	max-width: 1000px;
	margin: 0 auto 60px;
	padding: 0;
	position: relative;
	overflow: hidden;
}

.bot-img {
	margin: 0 auto;
}

.sub-img {
    width: 98%;
	max-width: 1000px;
	margin: 0 auto 60px;
	padding: 0;
	position: relative;
	overflow: hidden;
    line-height: 100%;
}

.main-wrap {
	width: 98%;
    max-width: 1000px;
	min-height: 500px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.pankuzu {
	width: 98%;
    max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	overflow: hidden;
	font-size: 80%;
	color: #9f9f9f;
}

.pankuzu a {
	color: #077c84;
	border-bottom: solid 1px #077c84;
	transition: all 0.3s;
}

.pankuzu a:hover {
	opacity: 0.5;
	border-bottom: solid 1px transparent;
}


h1 {
	width: 98%;
    max-width: 1200px;
	margin: 0 auto;
	padding: 30px 1%;
	position: relative;
	overflow: hidden;
	font-size: 200%;
	line-height: 110%;
	text-align: left;
	color: #61bb45;;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	letter-spacing: 0.1em;
}

h1:before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 40px;
	background-color: #61bb45;
	margin: 0 10px 0 0;
}


h2 {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	font-size: 140%;
	text-align: left;
	color: #36831E;
}

h3 {
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	position: relative;
	overflow: hidden;
	font-size: 120%;
	text-align: left;
	color: #36831E;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

h3:before {
	content:"";
	width: 15px;
	height: 15px;
	display: inline-block;
	background-color:#62BB46;
	margin: 0 10px 0 0;
}

.main-sec {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
}

.sec-wrap {
	padding: 60px 0;
}

.flex {
	display: flex;
}

.sub-wrap {
	width: 98%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 60px 0;
	position: relative;
	overflow: hidden;
}

/***HOURS***/

.sp-hours {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
}

table.hours {
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	position: relative;
	overflow: hidden;
	background-color: #3B3C3E;
	text-align: center;
	border-spacing: 1px;
	line-height: 150%;
}

table.hours th,table.hours td{
	padding: 10px;
	background-color: #FFF;
}

table.hours th {
	background-color: #FFD868;
	font-weight: 500;
}

table.hours td .time {
	font-size: 140%;
}

.hours-memo {
	width: 100%;
	margin: 0 0 20px;
}

.hours-memo .orange {
	font-size: 120%;
	color: #EE7800;
}

.hours-memo .tel {
	color: #EE7800;
	font-size: 280%;
}

/***NEWS***/

ul.news-list {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    list-style: none;
}

ul.news-list li {
    width: 98%;
    margin: 0 auto;
    padding: 10px 1%;
    position: relative;
    overflow: hidden;
    border-bottom: solid 1px #dbdbdb;
}

ul.news-list li a {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: block;
    color: #292929;
    transition: all 0.3s;
}

ul.news-list li a:hover {
    background-color: #f8f8f8;
}

ul.news-list li .n-left {
    width: 100%;
    font-size: 80%;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

ul.news-list li .n-left .date {
    width: auto;
    margin: 0 10px 0 0;
}

ul.news-list li .n-left .cat {
    width: 10%;
    background-color: #61bb45;
    color: #FFF;
    text-align: center;
    padding: 5px 0;
    font-size: 80%;
    line-height: 100%;
    letter-spacing: 0.5em;
}

ul.news-list li .n-left .c-ippan {
    background-color: #61bb45;
}

ul.news-list li .n-left .c-imp {
    background-color: #ff6464;
}


ul.news-list li .n-right {
    width: 100%;
    font-size: 90%;
    font-family: "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Helvetica", Arial, "メイリオ", Meiryo, sans-serif;
}


/***FOOTER***/

.pagetop {
    width: 7%;
    max-width: 100px;
    position: fixed;
    right: 10px;
    bottom:2%;
    z-index: 100;
    line-height: 0%;
    opacity: 1.0;
	transition: all 0.5s;
}

.sticky {
    position: fixed;
    bottom:2%;
}

img.vert-move {
    -webkit-animation: mover 1s infinite alternate;
    -moz-animation: mover 1s infinite alternate;
    animation: mover 1s infinite alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@-moz-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

.pagetop:hover {
	cursor: pointer;
}

img.vert-move:hover {
	-webkit-animation: wiggle 0.1s infinite alternate;
    -moz-animation: wiggle 0.1s infinite alternate;
    animation: wiggle 0.1s infinite alternate;
}

@-webkit-keyframes wiggle {
    0% { transform: translateX(0); }
    100% { transform: translateX(-2px); }
}
@-moz-keyframes wiggle {
    0% { transform: translateX(0); }
    100% { transform: translateX(-2px); }
}
@keyframes wiggle {
    0% { transform: translateX(0); }
    100% { transform: translateX(-2px); }
}


.footer {
	width: 100%;
	margin: 0;
	padding: 100px 0 20px;
	position: relative;
	overflow: hidden;
}

.footer a {
	transition: all 0.3s;
}

.footer a:hover {
	opacity: 0.5;
}

.ftr-wrap {
	width: 98%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	overflow: hidden;
}

.ftr-nav {
	width: 100%;
	margin: 0 0 30px;
	padding: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
    align-items: center;
    text-align: center;
	font-size: 90%;
    line-height: 140%;
}

.ftr-nav a {
	color: #595757;
}

.footer .ppolicy {
	margin: 0 0 30px;
	text-align: center;
}

.footer .ppolicy a {
	color: #595757;
}

.footer .ftr-bot {
	width: 100%;
	margin: 0 0 30px;
	padding: 0;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.footer .ftr-bot .ftr-logo {
	width: 100%;
    max-width: 300px;
	margin: 0 auto 10px;
}

.footer .number {
	font-size: 11px;
	margin: -10px auto 0;
	letter-spacing: 1px;
}
.footer .number span {
	color: #61bb45;
}

.footer .copyright {
	font-size: 90%;
	color: #595757;
	text-align: center;
}