@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+JP);



/* common
------------------------------------------------------*/

body {
	margin:0;
	padding:0;
	font-family:"Noto Sans JP", Osaka, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ Ｐゴシック', 'MS PGothic';
	line-height:1.8;
	color:#646464;
	font-size: 16px;
	vertical-align:top;
	background-color:#ffffff;
	-webkit-text-size-adjust:100%;
	word-wrap:break-word;
}

a        {transition:all 0.3s linear;}
a:link   {color:#009fe8;text-decoration:underline;}
a:visited{color:#009fe8;text-decoration:underline;}
a:hover  {color:orange;text-decoration:none;}
a:active {color:#009fe8;text-decoration:underline;}

@media screen and (max-width:720px){
	body {
		font-size:14px;
	}
}

/* structure
---------------------------------------- */
div#header,
div#footer{
	clear:both;
	width:90vw;
	position:relative;
	margin:0 auto;
	padding:0 5vw;
}
div#container{
	width:auto;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}
div#contents{
	width:calc(100% - 240px);
	clear:both;
	margin:0 auto 360px;
	padding:0 120px 90px;
}
@media screen and (max-width:1280px){
	div#header:after{
		width:240px;
		top:-40px;
		left:calc(50vw - 120px);
		padding-top:240px;
		border-radius:120px;
		-webkit-border-radius:120px;
		-moz-border-radius:120px;
		-ms-border-radius:120px;
		background:#fff url(../img/mark.webp) no-repeat center top 80px / 90px auto ;
		animation:down2 0.7s 0s ease-in backwards ;
	}
}
@keyframes down2{
	0%  {background-position:center top -80px}
	60%{background-position:center top 95px;transform:scale(1,0.85)}
	80%{background-position:center top 75px;transform:scale(1,1.1)}
	100%{background-position:center top 80px;transform:scale(1,1)}
}
@media screen and (max-width:860px){
	div#contents{
		width:calc(100% - 180px);
		padding:0 90px 90px;
	}
}
@media screen and (max-width:780px){
	div#header{
		padding-top:100px;
		overflow:hidden;
	} 
	div#header h1#logo a {
		margin:0 auto;
	}
	div#contents{
		width:calc(100% - 10vw);
		padding:0 5vw 90px;
	}
}
@media screen and (max-width:540px){
	div#header{
		padding-top:60px;
	}
}

/* logo
---------------------------------------- */
h1#logo{
	width:calc(100vw - 60px);
	position:relative;
	margin:0 -5vw;
	padding:30px;
	z-index:10;
}
h1#logo a{
	width:277px;
	display:block;
	padding:81px 0 0 0;
	text-align:left;
	background:url(../img/logo_site.webp) no-repeat center center;
	background-size:100% auto;
	transition:all 0.3s linear;
}
h1#logo a:hover{
	opacity:0.5;
}



/* header
---------------------------------------- */
div#header {
	background: url(../img/bk_stripe.png) repeat center center;
}
div#header:after{
	width:280px;
	content:"";
	position:absolute;
	top:-70px;
	left:calc(50vw - 140px);
	display:block;
	padding-top:280px;
	border-radius:140px;
	-webkit-border-radius:140px;
	-moz-border-radius:140px;
	-ms-border-radius:140px;
	background:url(../img/mark.webp) no-repeat center top 94px / 104px auto ;
	z-index:999;
	cursor:pointer;
	animation:down 0.7s 0s ease-in backwards ;
}
@keyframes down{
	0%  {background-position:center top -104px}
	60%{background-position:center top 110px;transform:scale(1,0.85)}
	80%{background-position:center top 80px;transform:scale(1,1.1)}
	100%{background-position:center top 94px;transform:scale(1,1)}
}
#btn_menu {
	width:46px;
	height:46px;
	display:none;
    position: absolute;
	top:15px;
	right:15px;
	border-radius:23px;
	-webkit-border-radius:23px;
	-moz-border-radius:23px;
	-ms-border-radius:23px;
	background-color:white;
	transition:all 1s ease;
	cursor:pointer;
	z-index:99999;
}
#btn_menu:before,
#btn_menu:after{
	width:16px;
	content:"";
	position:absolute;
	display:block;
	transition:all 0.3s ease;
	transform: rotateZ( 0deg ) ;
}
#btn_menu:before{
	display:none;
	height:3px;
	top:21.5px;
	left:15px;
	border-radius:1.5px;
	-webkit-border-radius:1.5px;
	-moz-border-radius:1.5px;
	-ms-border-radius:1.5px;
	background-color:#005661;
}
#btn_menu:after{
	display:none;
	height:11px;
	top:15px;
	left:15px;
	border-top:3px #005661 solid;
	border-bottom:3px #005661 solid;
}
#btn_menu:hover:before,
#btn_menu:hover:after{
	transform: rotateZ( 180deg ) ;
}
@media screen and (max-width: 1060px) {
	div#header {
		background-size:calc(104*100vw/1060);
	}
	div#header:after{
		width:calc(280*100vw/1060);
		top:calc(-70*100vw/1060);
		left:calc(50vw - 280*100vw/1060/2);
		padding-top:calc(280*100vw/1060);
		border-radius:calc(140*100vw/1060);
		background-position:center top calc(94*100vw/1060);
		background-size: calc(104*100vw/1060) auto;
	}
	@keyframes down{
		0%  {background-position:center top calc(-104*100vw/1060)}
		60% {background-position:center top calc(110*100vw/1060);transform:scale(1,0.85)}
		80% {background-position:center top calc(80*100vw/1060);transform:scale(1,1.1)}
		100%{background-position:center top calc(94*100vw/1060);transform:scale(1,1)}
	}
}
@media screen and (max-width: 990px) {
	#btn_menu {
		display:block;
	}
}
@media screen and (max-width: 860px) {
div#header::after {
		width: calc(220*100vw/1060);
		left: calc(50vw - 220*100vw/1060/2);
		padding-top: calc(220*100vw/1060);
		border-radius: 0;
		background-size: calc(100*100vw/1060) auto;
	}
	div#header::after {
	    width: 80px;
	    top:30px;
	    left:calc(50vw - 40px);
	    padding-top: 80px;
		animation:down_860 0.7s 0s ease-in backwards ;
	    background-position: center center;
	    background-size: 100% auto;
	}
	@keyframes down_860{
		0%  {top:-168px}
		60% {top:56px;transform:scale(1,0.85)}
		80% {top:16px;transform:scale(1,1.1)}
		100%{top:30px;transform:scale(1,1)}
	}
}
@media screen and (max-width: 780px) {
	div#header::after {
		background-color:transparent!important;
	}
}
@media screen and (max-width: 540px) {
	div#header:after{
		width:200px;
		position:absolute;
		top:-80px;
		left:calc(50vw - 100px);
		padding-top:200px;
		border-radius:100px;
		-webkit-border-radius:100px;
		-moz-border-radius:100px;
		-ms-border-radius:100px;
		background:url(../img/mark.webp) no-repeat center top 94px / 70px auto ;
		animation:down 0.7s 0s ease-in backwards ;
	}
}
	
/* global_navi
---------------------------------------- */
ul#gnav {
	width:100vw;
	position:relative;
	display:inline-block;
	margin:0 -5vw;
	padding:20px 0 18px;
	text-align:center;
	background-color:#fff !important;
	z-index:9999;
}
ul#gnav li {
	position:relative;
	margin:0 7.5px;
	padding:0;
}
ul#gnav li a {
	position:relative;
	display:block;
	padding:5px 10px 5px 34px;
	font-size:16px;
	white-space:nowrap;
	text-align:center;
	line-height:1;
	overflow:hidden;
	transition: all 0.3s ease;
	background:url(../img/arr.png) no-repeat left 10px center;
}
ul#gnav li a:hover{
	padding:5px 22px;
	color:#fff;
	background-color:#ff5a5a;
	background-image:none;
}
ul#gnav li ul {
	display:none;
	position:absolute;
	top:calc(1em + 10px);
	left:50%;
	width:300px;
	margin:0 0 0 -150px;
	padding:25px 0 0 0;
	border-bottom:1px #ccc solid;
	z-index:9999999;
	background:url(../img/arr.png) no-repeat center top 2px;
}
ul#gnav li ul li:before{ 
	display:none;
}
ul#gnav li ul li {
	width:100%;
	margin:0;
	padding:0;
	border-left:1px #ccc solid;
	border-right:1px #ccc solid;
	border-top:1px #ccc solid;
	background:#fff;
}
ul#gnav li ul li:first-child{
	border-left:none;
}
ul#gnav li ul li:last-child{
	border-bottom:none;
}
ul#gnav li ul li a {
	display:block;
	height:inherit;
	padding:20px 15px 18px!important;
	font-size:14px;
	text-indent:0;
	text-align:center;
	white-space:normal;
	background:none;
	border-left:none;
	border-right:none;
}
ul#gnav li ul li a:hover {
	color:white;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	background:orange!important;
	transition-property: all;
	transition: 0.3s linear;
}
ul#gnav li ul li:last-child a {
	border:none
}
@media screen and (max-width: 1300px) {
	ul#gnav li {
		margin:0;
	}
}
@media screen and (max-width: 1180px) {
	ul#gnav li a,
	ul#gnav li a:hover  {
		padding:30px 10px 5px;
		background-position:center top;
	}
	ul#gnav li a:hover  {
		background-image:url(../img/arr_w.png);
	}
	ul#gnav li ul {
		top:calc(1em + 10px + 25px);
	}
}

@media screen and (max-width: 990px) {
	div#footer div.inner{
		width:100%;
	}
	div#footer.transform ul#gnav.hide {
			opacity:0;
			z-index:-1;
	}
	ul#gnav {
		width: 100%;
		max-height:100vh;
		display:none;
		position:fixed;
		top:0;
		left:0;
		margin: 0;
		padding:0;
		overflow-x:auto;
	}
	ul#gnav li {
		display:block;
		width:100%;
		margin:0;
		padding:0;
		border-top:1px #ccc solid;
	}
	ul#gnav li:last-child{
		border-bottom:1px #ccc solid;
	}
	ul#gnav li a {
		height:inherit;
		padding:15px 10px 15px 50px;
		text-align:left;
		text-indent:0;
		-moz-border-radius:0;
		-webkit-border-radius:0;
		border-radius:0;
		box-shadow:none;
	    background-position:left 15px center;
	}
	ul#gnav li a:hover {
		padding:15px 10px 15px 50px;
	    background-image:url(../img/arr_w.png);
	    background-position:left 15px center;
	}
 #gnav ul li a:before {
  position:absolute;
  right:10px;
  top:16px;
  color:#509b58;
  font-family:'FontAwesome';
  content:"\f054"
 }
ul#gnav li a[href="#"]:before {
  position:absolute;
  right:10px;
  top:16px;
  color:#509b58;
  font-family:'fontAwesome';
  content:"\f078"
 }
	ul#gnav li ul {
		display:none;
		position:static;
		width: calc(100% - 2px);
		margin:0;
		padding:0;
		border-radius:none;
		-moz-border-radius:0;
		-webkit-border-radius:0;
		border-radius:0;
		background:#fafafa;
	}
 ul#gnav li ul li{
	 border-top:1px #ccc solid;
 }
ul#gnav li ul li a:hover {
  background:none
 }
	ul#gnav li ul li a{
		padding-left:40px;
		text-align:left;
		background-color:#efefef;
	}
	ul#gnav li a:hover,
	ul#gnav li a ul li a:hover {
		color:white;
		background-color:orange;
	}
}
@media screen and (max-width:510px){
	ul#gnav li a,
	ul#gnav li ul li a {
		font-size:14px;
	}
}


/* footer
------------------------------------------------------*/
div#footer{
}
div#footer:before {
	width:658px;
	content:"";
	position:absolute;
	top:calc(-340px - 30px + 180px);
	left:calc(50vw - 328px);
	display:block;
	padding-top:342px;
	background:url(../img/ill/f_copy.webp) no-repeat center center / 100% auto;
}
div#footer address{
	width:397px;
	display:block;
	margin:0 0 15px;
	padding-top:calc(72px + 15px);
	background:url(../img/logo.webp) no-repeat center top;
}
div#footer div#fnav {
	width:90vw;
	min-height:360px;
	position:relative;
	margin:0 -5vw;
	padding:30px 5vw;
	animation:byuuun 25s linear infinite;
	background-color:#1a96d5;
	background-repeat:no-repeat;
	background-image:url(../img/ill/cloud.webp),url(../img/ill/plane.webp);
	background-position:right 100px bottom 50px , right top;
	background-size:50% auto,auto;
}
@keyframes byuuun{
	0%   {background-position:right 100px bottom 50px , right 300px top -74px;}
	33% {background-position:right 100px bottom 50px , right -106px top 300px;}
	100% {background-position:right 100px bottom 50px , right -106px top 300px;}
}
@media screen and (min-width:1280px){
	div#footer div#fnav {
		background-size:640px auto,auto;
	}
}
div#footer div#fnav:before {
	width:43px;
	content:"";
	position:absolute;
	bottom:100px;
	right:-43px;
	display:block;
	padding-top:35px;
	animation:pyuuuu 8s ease-in infinite;
	background:url(../img/ill/bird2.webp) no-repeat center center / 100% auto;
	z-index:10;
}
@keyframes pyuuuu{
	0%   {bottom:100px;right:-43px;}
	10%  {bottom:350px;right:120vw;}
	100% {bottom:350px;right:120vw;}
}
div#footer div#fnav:after {
	width:562px;
	content:"";
	position:absolute;
	bottom:-80px;
	right:120px;
	display:block;
	padding-top:423px;
	animation:pukapuka 5s ease infinite;
	background:url(../img/ill/island.webp) no-repeat center center / 100% auto;
}
@keyframes pukapuka{
	0%  {bottom:-80px;}
	50% {bottom:-30px;}
	100%{bottom:-80px;}
}
div#footer div#fnav ul{
	width:280px;
	position:relative;
	display:inline-block;
	margin-right:2em;
	vertical-align:top;
	z-index:10;
}
div#footer div#fnav ul li{
	padding-left:15px;
	background:url(../img/arr3_w.png) no-repeat left top 0.5em;
}
div#footer div#fnav ul li,
div#footer div#fnav ul li a{
	color:#fff;
}
div#footer div#fnav ul li ul li{
	padding-left:calc(2em - 15px);
	background:none;
}
div#footer div#fnav ul li ul li a{
	position:relative;
}
div#footer div#fnav ul li ul li a:before{
	width:2em;
	height:1px;
	content:"";
	position:absolute;
	top:0.8em;
	left:-2em;
	display:block;
	background-color:#fff;
	transition:all 0.3s linear;
	opacity:0;
}
div#footer div#fnav ul li ul li a:hover:before{
	opacity:1;
}
small{
	position:relative;
	display:block;
	margin:0 auto;
	padding:30px 0;
	font-size: 16px;
	text-align:left;
	z-index:2
}
@media screen and (max-width:1280px){
	div#footer div#fnav:after {
		width:43.9vw;
		height:0;
		top:auto;
		bottom:-75px;
		padding-top:calc(43.9vw*423/562);
	}
	div#footer div#fnav ul{
		width:240px;
	}
}
@media screen and (max-width:1180px){
	div#footer::before {
		top: calc(-340px - 30px + 0px);
	}
}
@media screen and (max-width:1054px){
	div#footer div#fnav {
		padding-bottom:90px;
	}
}
@media screen and (max-width:860px){
	div#footer div#fnav {
		animation:byuuun860 25s linear infinite;
	}
	@keyframes byuuun860{
		0%   {background-position:right 100px bottom 15px , right 300px top -74px;}
		33%  {background-position:right 100px bottom 15px , right -106px top 300px;}
		100% {background-position:right 100px bottom 15px , right -106px top 300px;}
	}
}
@media screen and (max-width:734px){
	div#footer{
		margin-bottom:60px;
	}
}
@media screen and (max-width:600px){
	div#footer div#fnav {
		padding-bottom:calc(43.9vw*423/562 + 30px);
	}
	div#footer div#fnav:after {
		width:calc(43.9vw*1.3);
		left:calc(50vw - 43.9vw*1.3/2);
		bottom:-50px;
		padding-top:calc(43.9vw*423/562*1.3);
		animation:pukapuka600 5s ease infinite;
	}
	@keyframes pukapuka600{
		0%  {bottom:-50px;}
		50% {bottom:-30px;}
		100%{bottom:-50px;}
	}
}
@media screen and (max-width:510px){
	div#footer.transform{
		padding-bottom:60px;
	}
	div#footer small{
		font-size: 12px;
	}
}
@media screen and (max-width:420px){
	div#footer.transform{
		padding-bottom: calc(3.2em + 40px);
	}
}


/* nav_function
------------------------------------------------------*/
div#footer ul#nav_function{}
div#footer ul#nav_function li{
	width:118px;
	position:fixed;
	right:0;
	border-radius:10px 0 0 10px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
	overflow:hidden;
	transition:all 0.3s linear;
	transform-origin:center right;
	z-index:9999;
}
div#footer ul#nav_function li:nth-child(1){
	border-radius:0 0 0 10px;
	transform-origin:top right;
}
div#footer ul#nav_function li:nth-child(1){top:0;}
div#footer ul#nav_function li:nth-child(2){bottom:290px;}
div#footer ul#nav_function li:nth-child(3){bottom:160px;}
div#footer ul#nav_function li:nth-child(4){bottom:30px;}
div#footer ul#nav_function li:hover{
	transform:scale(0.9,0.9);
}
div#footer ul#nav_function li a{
	width:100%;
	display:block;
	padding-top:118px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto;
}
div#footer ul#nav_function li:nth-child(1) a{background-image:url(../img/btn_menu.png);}
div#footer ul#nav_function li:nth-child(2) a{background-image:url(../img/btn_inquiry.png);}
div#footer ul#nav_function li:nth-child(3) a{background-image:url(../img/btn_pagetop.png);}
div#footer ul#nav_function li:nth-child(4) a{background-image:url(../img/btn_hokken.png);}

@media screen and (min-width:860px){
	div#footer ul#nav_function li:nth-child(1){
		height:118px;
	}
	div#footer ul#nav_function li#btn_menu:before,
	div#footer ul#nav_function li#btn_menu:after{
		display:none;
	}
}
@media screen and (min-width:990px){
	div#footer ul#nav_function li:nth-child(1){
		display:none;
	}
}
@media screen and (max-width:859px){
	div#footer ul#nav_function li{
		width:80px;
		height:80px;
	}
	div#footer ul#nav_function li#btn_menu:before,
	div#footer ul#nav_function li#btn_menu:after{
		display:none;
	}
	div#footer ul#nav_function li:nth-child(2){bottom:210px;}
	div#footer ul#nav_function li:nth-child(3){bottom:120px;}
	div#footer ul#nav_function li:nth-child(4){bottom:30px;}
	div#footer ul#nav_function li a{
		padding-top:80px;
		background-size:100% auto;
	}
	
}
@media screen and (max-width:510px){
	div#footer ul#nav_function li{
		width:calc(25% - 1px);
		height:60px;
		margin-right:1px;
		border-radius:10px 10px 0 0!important;
		box-shadow: none;
		background-color:#fff;
	}
	div#footer ul#nav_function li:nth-child(1){top:auto;bottom:0;left:0;right:auto;}
	div#footer ul#nav_function li:nth-child(2){bottom:0;left:25%;right:auto;}
	div#footer ul#nav_function li:nth-child(3){bottom:0;left:50%;right:auto;}
	div#footer ul#nav_function li:nth-child(4){bottom:0;left:75%;right:auto;}
	
	div#footer ul#nav_function li:last-child{
		margin-right:0;
	}
	div#footer ul#nav_function li:hover{
		transform:scale(1);
	}
	div#footer ul#nav_function li a{
		padding-top:60px;
		background-size:auto 100%;
	}
}

/* sitenavi
----------------------------------------------------------- */
ul#sitenavi{
	padding:5px 5vw 0;
	background: url(../img/bk_stripe.png) repeat center center;
}
ul#sitenavi li{
	position: relative;
	margin:0 15px 5px 0;
	padding-left:20px;
	background:url(../img/arr3.png) no-repeat left 0.5em;*/
	transition:all 0.3s linear;
}
ul#sitenavi li.home{
	padding-left:30px;
	background:url(../img/icon/home.png) no-repeat left center;
}
@media screen and (max-width: 720px) {
	ul#sitenavi li {
		padding-left:25px;
	}
}
@media screen and (max-width: 640px) {
	ul#sitenavi{
		padding:5px 15px;
		font-size:12px;
	}
}
@media screen and (max-width: 540px) {
	ul#sitenavi{
		display:none;
	}
}


/* page_title
----------------------------------------------------------- */
h2.ttl{
	clear:both;
	margin:0 auto 30px;
	padding:0;
	font-size:16x;
}



/* local_navi
----------------------------------------------------------- */
ul#lnavi{
	margin:80px auto 0;
	padding:20px 0 0 0;
	text-align:center;
	border-top:1px #ccc solid;
}
ul#lnavi li{
	margin:0 10px 10px;
}


/* pager
----------------------------------------------------------- */
ul#pager {
	width:100%;
	clear:both;
	margin:0 auto;
	padding:30px 0 0 ;
	text-align:left;
	border-top:5px #e6e6e6 solid;
}
ul#pager li{
	margin:0 5px 10px;
}
ul#pager li a,
ul#pager li span{
	display:block;
	padding:12px;
	color:#fff;
	text-align:center;
	border:#009fe8 3px solid;
	border-radius:calc(0.8em + 15px);
	-webkit-border-radius:calc(0.8em + 15px);
	-moz-border-radius:calc(0.8em + 15px);
	-ms-border-radius:calc(0.8em + 15px);
	background:none;
	background-color:#009fe8;
	transition:all 0.3s linear;
	white-space: nowrap;
}
ul#pager li:not(.prev,.next,.list,.home) a{
	width:1.6em;
}
ul#pager li.prev a,
ul#pager li.next a,
ul#pager li.list a,
ul#pager li.home a{
	padding:13px calc(17px + 46px + 15px) 16px calc(17px + 15px);
	background:#009fe8 url(../img/arr2_w.webp) no-repeat right 15px center;
}
ul#pager li a:hover{
	border:orange 3px solid;
	background-color:orange;
}
ul#pager li span{
	width:1.6em;
	color:#464646;
	background-color:#fff;
}



/* column
----------------------------------------------------------- */
ul.column1{
	text-align:center;
	margin:20px auto 0;
}
ul.column1 li{
	width:70%;
	max-width:800px;
	margin:0 auto;
}
ul.column3 li{
	width:31%;
	margin:0 3.5% 10px 0;
}
ul.column3 li:nth-child(3n){
	margin:0 0 10px 0;
}
ul.column3 li img{
	display:block;
	margin:0 auto;
}
ul.column3 li p{
	margin:5px auto 0;
}
@media screen and (max-width: 700px) {
ul.column1 li{
		width:100%;
	}
}
@media screen and (max-width: 640px) {
	ul.column3 li{
		width:100%;
	}
	ul.column3 li img{
		float:right;
		width:49%;
		margin:0 0 2% 2%;
	}
}




/* text style
----------------------------------------------------------- */
h1#cttl {
	width:100vw;
	clear:both;
	margin:0 -120px;
	color: #fff;
	text-align: center;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
h1#cttl.bg1 {background-image:url(../img/ttl_bk/01.webp);}
h1#cttl.bg2 {background-image:url(../img/ttl_bk/02.webp);}
h1#cttl.bg3 {background-image:url(../img/ttl_bk/03.webp);}
h1#cttl.bg4 {background-image:url(../img/ttl_bk/04.webp);}
h1#cttl.bg5 {background-image:url(../img/ttl_bk/05.webp);}
h1#cttl.bg6 {background-image:url(../img/ttl_bk/06.webp);}
h1#cttl.bg7 {background-image:url(../img/ttl_bk/07.webp);}
h1#cttl.bg8 {background-image:url(../img/ttl_bk/08.webp);}
h1#cttl.bg9 {background-image:url(../img/ttl_bk/09.webp);}
h1#cttl.bg10{background-image:url(../img/ttl_bk/10.webp);}
h1#cttl span{
	width:100%;
	display:block;
	padding: 135px 0 80px;
	font-size: 16px;
	background-repeat: no-repeat,repeat;
	background-position: center top 90px,center center;
	background-size: auto 35px,auto;
}
	
h2.pttl{
	position:relative;
	clear:both;
	margin:0 0;
	padding:15px;
	color:#fff;
	font-size:32px;
	text-align:center;
	background-repeat:no-repeat;
	background-position:right 60px center;
	background-image:url(../../label/img/mush_ttl.webp);
	background-size:200px auto,auto;
}
h2.pttl::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	height:100%;
	background:linear-gradient(135deg, #0073e6, #00c3ff);
	z-index:-1;
}

h2.ttl{
	clear:both;
	padding:45px 0 0;
	text-align:center;
	font-size:16px;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:auto 35px;
}
div#topics   h2.ttl{background-image:url(../img/ttl/topics.webp);}
div#cooking  h2.ttl{background-image:url(../img/ttl/cooking.webp);}
div#food_edu h2.ttl{background-image:url(../img/ttl/food_edu.webp);}

h3.pttl{
	position:relative;
	clear:both;
	/*font-family: 'Noto Serif JP';*/
	font-size:28px;
	margin:0 auto 10px;
	padding:0 0 10px;
	text-align:center;
	letter-spacing:0.2em;
}

h3.ttl{
	clear:both;
	margin:0 auto 30px;
	font-size:28px;
	text-align:center;
}

h4.ttl{
	clear:both;
	color:#02ab83;
	font-size:20px;
	font-weight:bold;
}
p.ttl{
	clear:both;
	margin:10px auto 20px;
	font-size:20px;
	line-height:1.5;
}
p.sttl{
	clear:both;
	margin:10px auto 10px;
	padding:5px 0 5px 10px;
	font-size:16px;
	line-height:1.5;
	border-left:3px #64c832 solid;
	border-bottom:1px #ccc dotted;
}
p.outline{
	margin:0 auto 30px;
}
div.unit{
	clear:both;
	margin-bottom:50px;
}
span.pic p.sttl{
	font-size:18px;
}
span.pic p.note{
	margin:5px 0
}
span.pic.half{
	width:225px;
}

@media screen and (max-width: 1280px) {
	h3.ttl{
		font-size:26px;
	}
}
@media screen and (max-width: 990px) {
	h3.ttl{
		font-size:24px;
	}
}
@media screen and (max-width:860px){
	h1#cttl {
		margin: 0 -90px;
	}
	h2.pttl{
		margin: 0 0;
		font-size: 28px;
		line-height:1.4;
		background-position:right 40px center;
		background-size:150px auto,auto;
	}
}
@media screen and (max-width:780px){
	h1#cttl {
		width:110vw;
		margin: 0 -10vw;
	}
	h2.pttl{
		margin: 0 0;
	}
	}
}
@media screen and (max-width:640px){
	h2.pttl{
		margin: 0 0;
		font-size: 24px;
		background-position:right 20px center;
		background-size:110px auto,auto;
	}
}
@media screen and (max-width: 540px) {
	h1#cttl span {
		padding: 70px 0 20px;
		background-position: center top 30px,center center;
	}
	h2.pttl{
		font-size: 22px;
		line-height:1.4;
		background-position:right 15px center;
		background-size:90px auto,auto;
	}
	h3.pttl{
		margin-top:30px;
		font-size: 22px;
		line-height:1.4;
		letter-spacing:normal;
	}
	h3.ttl {
		margin: 0 auto 20px;
		font-size: 20px;
	}
	h4.ttl{
		font-size:22px;
	}
	p.ttl{
		font-size:18px;
	}
	
}

/* box */
span.box{
	display:block;
	padding:10px;
	border:1px #ccc solid;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}



/* sp_navi
----------------------------------------------------------- */
ul#sp_navi{
	display:none;
}
@media screen and (max-width: 510px) {
	ul#sp_navi{
		width:100%;
		display:block;
		position:fixed;
		bottom:0;
		opacity:1.0!important;
		filter: alpha(opacity=100)!important;
		z-index:99999999999999999999999;
	}
	ul#sp_navi li{
		width:25%;
		height:50px;
		position:relative;
		transition:all 0.3s linear;
	}
	ul#sp_navi li:nth-child(1){background-color:#74a21c;}
	ul#sp_navi li:nth-child(2){background-color:#0086dc;}
	ul#sp_navi li:nth-child(3){background-color:#eb7a5a;}
	ul#sp_navi li:nth-child(4){background-color:#02ab83;}
	
	ul#sp_navi li a{
		width:95%;
		position: absolute;
		top: 50%;
		left: 50%;
		padding:0 2.5%;
		color:#fff;
		font-size:16px;
		text-align:center;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
	}
	ul#sp_navi li:hover{
		background-color:#ff6400;
	}
}


/*topics
----------------------------------------------------------- */
ul.topics_list{
	width:100%;
	margin:0 auto 30px;
}
ul.topics_list li{
	width:calc(33.33% - 20px);
	margin:0 30px 30px 0;
}
ul.topics_list li:nth-child(3n){
	margin-right:0;
}
ul.topics_list li span.pic{
	width:100%;
	display:block;
	margin:0 auto 15px;
	padding-top:75%;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 100%;
	transition:all 0.3s linear;
}
ul.topics_list li a:hover span.pic{
	background-size:auto 105%;
}
ul.topics_list li p.category{
	display:inline-block;
	margin:0 15px 10px 0;
}
ul.topics_list li p.category:before{
	width:7em;
	display:block;
	padding:1px 0;
	color:#fff;
	text-align:center;
}
p.category.topics:before {content:"お知らせ";background-image: linear-gradient(135deg, #0073e6, #00c3ff);}
p.category.event:before  {content:"イベント";background-image: linear-gradient(135deg, #ff2000, #ff7c00);}
p.category.support:before{content:"生産支援";background-image: linear-gradient(135deg, #00bb97, #008bba);}
p.category.other:before  {content:"その他";background-color:#aaa;}

ul.topics_list li p.date{
	width:7em;
	display:inline-block;
}
@media screen and (max-width:640px){
	ul.topics_list li{
		width:50%;
		margin:0 0 20px;
		padding: 0 8px;
		box-sizing: border-box;
	}
}



/*site_only
----------------------------------------------------------- */
#btn_menu:before,
#btn_menu:after{
	display:none;
}
#btn_menu {
	width: 100%;
	height: 0;
	display: none;
	position: static;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	background-color: transparent;