@charset "utf-8";

.first_title{
	font-size: clamp(32px, 3vw, 42px);
	color: #18bc9c;
}
.first_description{
	font-size: clamp(18px, 3vw, 24px);
}
.category_title{
	font-size: clamp(32px, 3vw, 42px);
}
.bdline {
	border: 4px solid black;
	border-radius: 20px;
	background-color: white;
	margin-top: 30px;
	padding-top: 30px;
	padding-bottom: 30px;
}

.img_link {
    display: inline-block;
}

.text_category {
	font-size: clamp(20px, 3vw, 22px);
	display: inline-block;
	background-color: gold;
	border-radius: 20px;
	padding: 6px 20px;
	margin-top: 10px;
}
.text_title {
	font-size: clamp(24px, 3vw, 30px);
	text-decoration:underline;
	text-decoration-color: #18bc9c;
	margin-bottom: 5px;
	margin-top: 10px;
}
.text_description {
	font-size: clamp(16px, 3vw, 18px);
	margin-right: 15px;
}

.text_preparation {
	font-size: clamp(16px, 3vw, 20px);
}
.categorylist {
	font-size: clamp(18px, 3vw, 20px);
	display: inline-block;
	background-color: gold;
	border-radius: 20px;
	padding: 6px 20px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.categoryul{
	margin-left: -40px;
}

.text_bannerdescription {
	font-size: clamp(19px, 3vw, 21px);
	margin-top: 8px;
	margin-bottom: 15px;
}

.first_title,.category_title,.first_description,.categorylist,.text_category,.text_title,.text_description,.text_bannerdescription,.text_preparation,.navtext {
font-family: "setofont-sp", sans-serif;
font-weight: 400;
font-style: normal;
}


.jumbotron {
	background: url("../images/main_img.png") center no-repeat;
	background-size: cover;
	position: relative;
	height: 500px;
	margin-bottom: 0px;
}

/*ナビ背景*/
.naviback {
	background-color: #8cc63f;
	width: 100%;
	border-bottom: 2px solid white;
}
/*ナビ基本*/
li.pill {
	vertical-align: middle;
}
li.pill a {
	color: white;
	border-radius: 0px;
	font-size: clamp(18px, 3vw, 20px);
}
li.pill a:hover {
	background-color: #7db23d;
}
/*ナビアクティブ時*/
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	color: #000000;
	background-color: #7db23d;
	border-radius: 0px;
}
/*ナビホバー時*/
.pill:hover, .pill li:focus {
	color: #000000;
	background-color: #7db23d !important;
}
/*ここまで*/

.bg_grid_gray {
	width: 100%;
	background-color: white;
	background-image: linear-gradient(#e6e6e6 1px, transparent 0), linear-gradient(90deg, #e6e6e6 1px, transparent 0);
	background-size: 26px 26px;
}
.bg_dot_green {
	background-image: radial-gradient(#f6f8ca 1px, #dae000 1px);
	background-size: 20px 20px;
}
.bg_dot_white {
	background-image: linear-gradient(
    45deg, 
    #ffffff 25%,
    #f7f9d3 25%, #f7f9d3 50%,
    #ffffff 50%, #ffffff 75%,
    #f7f9d3 75%, #f7f9d3 100%
  );
  background-size: 20px 20px;
}
.bg_green {
	background-image: radial-gradient(#128d75 1px, #18bc9c 1px);
	background-size: 20px 20px;
}
.bg_padding {
	padding-bottom: 110px;
	padding-top: 75px;
}

/*ギザギザ*/
.gizagiza {
    position: relative;
    width: 100%;
    height: auto;
    background: #8cc63f;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 1));
}

.gizagiza::before {
    height: 40px;
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
}

.gizagiza::before {
    top: -40px;
    background: linear-gradient(45deg, #8cc63f 20px, transparent 0), linear-gradient(315deg, #8cc63f 20px, transparent 0);
    background-size: 40px 40px;
}

.btnimage {
	display: inline-block;
}

a:hover img {
	opacity: 0.6;
	-moz-opacity: 0.6;
	filter: alpha(opacity = 60);
}

.banner_btn {
	margin-top: 15px;
	margin-bottom: 15px;
}

.content_btn {
	margin-top: 30px;
	margin-bottom: 15px;
}

.contact_text {
	margin-bottom: 30px;
}

footer {;
	background-color: black;
	color: white;
	font-size: 18px;
	padding-top: 30px;
	padding-bottom: 15px;
	border-top: 2px solid white;
}
.copyright {
	font-size: 14px;
	padding-top: 15px;
}
/* ページトップへ戻るボタン */
#page-top{
	position:fixed;
	display:none;
	width:100%;
	height: 0;
	bottom: 200px;
	z-index:2;
	margin: auto;
}
#page-top a{
	position:absolute;
	display:block;
	right:40px;
	width:110px;
	height:160px;
	background-size: 110px 160px;
	-moz-background-size: 110px 160px;
	background-image:url('../images/top_btn.png');
	background-repeat: no-repeat;
/*	bottom:110px;*/
}
#page-top a:hover{
	opacity:0.5;
}
@media screen and (max-width:768px) {
/*　画面サイズが768px以下の場合読み込む　*/
	#page-top {
	display: none !important;
	}
	.text_description {
	margin-right: 0px;
}
	.bg_padding {
		padding-bottom: 60px;
		padding-top: 45px;
	}
}