/*
Theme Name: shokusapo
Text Domain: shokusapo
*/

@charset "UTF-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; font-family: sans-serif;}  body { line-height:1; }  article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {  display:block; }  nav ul { list-style:none; }  blockquote, q { quotes:none; }  blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }  a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }  / change colours to suit your needs / ins { background-color:#ff9; color:#000; text-decoration:none; }  / change colours to suit your needs / mark { background-color:#ff9; color:#000;  font-style:italic; font-weight:bold; }  del { text-decoration: line-through; }  abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }  table { border-collapse:collapse; border-spacing:0; }  /* change border colour to suit your needs  */ hr { display:block; height:1px; border:0;  border-top:1px solid #cccccc; margin:1em 0; padding:0; }  input, select { vertical-align:middle; } 


body.stop {
  overflow: hidden;
}

.index .overlay	{
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	justify-content: center;
	align-items: center;
	background-color: #fff;
}

.index .overlay img	{
	position: relative;
	top: -1vh;
	height: 40vh;
	display: block;
	opacity: 0;
}


h1,h2,h3,h4,h5,h6,p,th,td,li,dt,dd span	{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	color: #465360;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	box-sizing: border-box;
}

a	{
	transition:0.5s all;
	opacity:1;
	color: #8a8a8a;
	text-decoration: none;
}
a:hover	{
	opacity: 0.7;
}

h1	{
	font-weight: 700;
}
h2,h3,h4,h5,h6,th	{
	font-weight: 500;
}
.pc	{
	display: block !important;
}

br.pc	{
	display: inline !important;
}

.flex.pc	{
	display: flex !important;
}

.sp	{
	display: none !important;
}

.block	{
	display: block;
}

.text-left	{
	text-align: left;
}
.text-center	{
	text-align: center;
}

.text-right	{
	text-align: right;
}

.ls50p	{
	letter-spacing: 0.4em;
}
.lh150	{
	line-height: 150%;
}
.text-center .ls50p,.ls50p.text-center	{
	text-indent: 0.5em;
}
.w100p	{
	width: 100%;
}

.mt10	{
	margin-top: 10px !important;
}

.mt30	{
	margin-top: 30px !important;
}

.mt50	{
	margin-top: 50px !important;
}

.mt75	{
	margin-top: 75px !important;
}

.my0	{
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


.mb10	{
	margin-bottom: 10px !important;
}

.mb25	{
	margin-bottom: 25px !important;
}

.mb30	{
	margin-bottom: 30px !important;
}

.mb50	{
	margin-bottom: 50px !important;
}

.mb75	{
	margin-bottom: 75px !important;
}

.mb100	{
	margin-bottom: 100px !important;
}

.pb0	{
	padding-bottom: 0 !important;
}

.pb500	{
	padding-bottom: 500px !important;
}

.pl30	{
	padding-left: 30px !important;
}

.ti08	{
	padding-left: 0.8rem;
}
.narrow	{
	padding: 0 80px;
}
.sub.specialty .pb500,.sub.specialty .pb500 .inner	{
	padding-top: 0 !important;
}
.fs20	{
	font-size: 20px !important;
	line-height: 220% !important;
}

.fs25	{
	font-size: 25px !important;
}
.fs30	{
	font-size: 30px !important;
}

.fs40	{
	font-size: 40px !important;
}

.floatleft	{
	float: left;
	padding: 0 30px 15px 0;
}

.c_orange	{
	color: #ea5514;
}

.p-30	{
	padding: 30px;
}

.flex	{
	display: flex;
}
header .logo	{
	display: block;
	margin: 50px 0;
}

header .logo img	{
	width: 240px;
}
.headernav	{
	width: 100%;
}
.headernav ul	{
	width: 100%;
	display: flex;
}

.headernav ul li	{
	width: 25%;
	text-align: center;
	font-size: 18px;
	padding: 0;
	letter-spacing: 1px;
}
.headernav ul li a	{
	color: #fff;
	text-decoration: none;
	display: flex;
	padding: 18px 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.headernav > ul > li > a:hover	{
	cursor: default;
}

.headernav ul > li > ul > li >a	{
	font-weight: 500;
}

.headernav ul > li > ul > li >a:hover	{
	opacity: 1;
}
.headernav ul > li:first-child a	{
	background-color: #c64026;
}
.headernav ul > li:first-child > ul	{
	border: 1px solid #c64026;
}
.headernav ul > li:first-child > ul > li > a	{
	color: #c64026;
	background-color: #fff;
	border-bottom: 1px solid #c64026;
	padding-left: 5px;
	padding-right: 5px;
}
.headernav ul > li:first-child > ul > li > a:hover	{
	background-color: #f8e4e6;
}
.headernav ul > li:nth-child(2) > ul	{
	border: 1px solid #d6472b;
}

.headernav ul li:nth-child(2) a	{
	background-color: #d6472b;
}

.headernav ul > li:nth-child(2) > ul > li > a	{
	color: #d6472b;
	background-color: #fff;
	border-bottom: 1px solid #d6472b;
	padding-left: 5px;
	padding-right: 5px;
}

.headernav ul > li:nth-child(2) > ul > li >a:hover	{
	background-color: #f7e3e2;
}

.headernav ul > li:nth-child(3) > ul	{
	border: 1px solid #ea5514;
}

.headernav ul li:nth-child(3) a	{
	background-color: #ea5514;
}

.headernav ul > li:nth-child(3) > ul > li > a	{
	color: #ea5514;
	background-color: #fff;
	border-bottom: 1px solid #ea5514;
	padding-left: 5px;
	padding-right: 5px;
}
.headernav ul > li:nth-child(3) > ul > li > a:hover	{
	background-color: #f6e6df;
}
.headernav ul > li:nth-child(4) > ul	{
	border: 1px solid #f39800;
}

.headernav ul li:nth-child(4) a	{
	background-color: #f39800;
}

.headernav ul > li:nth-child(4) > ul > li > a	{
	color: #f39800;
	background-color: #fff;
	border-bottom: 1px solid #f39800;
	padding-left: 5px;
	padding-right: 5px;
}

.headernav ul > li:nth-child(4) > ul > li >a:hover	{
	background-color: #f8f0e4;
}

.headernav ul > li > ul > li:last-of-type >a	{
	border-bottom: 0 !important;
}

.keywrap	{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 350px;
	margin-bottom: 50px;
}
.key	{
	height: 350px;
	overflow: hidden;
	width: 150vw;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 50px;
}

.key .slick-list,
.key .slick-list .slick-track	{
	height: 350px;
}
.key a	{
	display: block;
	position: relative;
	height: 100%;
	width: 50vw !important;

}

.key a:hover	{
	opacity: 1;
}

.key a img	{
	position: absolute;
	top: 50%;
	width: 50vw;
	transform: translateY(-50%);
}

.keywrap h2	{
	color: white;
	width: 30%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 40px;
	line-height: 160%;
	font-weight: 500;
	letter-spacing: 1px;
	text-shadow: 0 0 10px black;
	z-index: 9;
}

.slide-arrow	{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}
.prev-arrow	{
	left: calc(12.5vw + 15px);
}

.next-arrow	{
	right: calc(12.5vw + 15px);
}

.menu_title	{
	text-align: center;
	color: white;
	font-size: 18px;
	padding: 18px 0;
	letter-spacing: 1px;
	margin-bottom: 45px;
}

#mission	{
	margin-bottom: 50px;
}
#mission .inner	{
	position: relative;
	width: 80vw;
	max-width: 1000px;
	margin: 0 auto;
	background-color: #c64026;
	border-radius: 20px;
	box-sizing: border-box;
	padding: 30px 45px;
	margin-bottom: 15px;
}

#mission .inner .space	{
	display: none;
}
#mission .inner h2,
#mission .inner p,
#mission .inner a	{
	color: white;
	text-decoration: none;
}
#mission .inner .textarea	{
}

#mission .inner h2	{
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 15px;
}
#mission .inner p	{
	line-height: 220%;
}
#mission .inner p a	{
	display: inline-block;
	background-color: #fff;
	color: #c64026;
	border-radius: 10px;
	margin-top: 1.5vw;
	padding: 0 15px;
	zoom: 0.8;
}

#mission .inner .mission_img	{
	width: 30%;
	position: absolute;
	bottom: 0;
	left: -45px;
}
#mission .mission_name	{
	display: block;
	width: calc(80vw + 90px);
	max-width: calc(1000px + 90px);
	margin: 0 auto;
}

#recipe	{
	margin-bottom: 50px;
}

#recipe .menu_title	{
	background-color: #d6472b;
}
#recipe .recipe_list,
#recipe .recipe_list2	{
	display: flex;
}

#recipe .recipe_list a,
#recipe .recipe_list2 a,
#recipe .recipe_list3 a	{
	text-align: center;
	position: relative;
	text-decoration: none;
}
#recipe .recipe_list a .wrapper,
#recipe .recipe_list2 a .wrapper,
#recipe .recipe_list3 a .wrapper,
.sub.recipe .recipe_title .wrapper	{
	display: block;
	width: 100%;
	border-radius: 15px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

.sub.recipe .recipe_title .wrapper	{
	aspect-ratio: 16/9;
	position: relative;
}

.sub.recipe .recipe_title .wrapper img	{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.index #recipe .recipe_list a .wrapper	{
	width: 50vw;
}
#recipe .recipe_list3 a .wrapper	{
	width: 100%;
	aspect-ratio: 16/10;
	position: relative;
}
#recipe .recipe_list3 a .wrapper img	{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#recipe .recipe_list2 a .wrapper	{
	width: 42.5vw;
	aspect-ratio: 16/9;
	position: relative;
}

#recipe .recipe_list2 a img	{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
#recipe .recipe_list a img,
#recipe .recipe_list3 a img	{
	width: 50vw;
	margin: 0 auto;
}

#recipe .recipe_list3 a .wrapper,
#recipe .recipe_list3 a img	{
	width: 100%;
}


#recipe .recipe_list2 a img	{
	width: 42.5vw;
	margin: 0 auto;
}

#recipe .recipe_list .titlewrap,
#recipe .recipe_list2 .titlewrap,
#recipe .recipe_list3 .titlewrap	{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#recipe .recipe_list p,
#recipe .recipe_list2 p,
#recipe .recipe_list3 p	{
	position: relative;
	background-color: #d6472b;
	color: white;
	height: 60px;
	text-align: center;
	width: 100%;
	margin: 0 auto;
}

.key#recipe p	{
	background-color: #d6472b;
	color: white;
	padding: 5px 0;
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 30px;
	width: 100%;
	text-align: center;
	font-size: 13px;
	border-left: 0.5px solid rgba(255,255,255,0.5);
	border-right: 0.5px solid rgba(255,255,255,0.5);
}

#recipe .recipe_list3 p	{
	position: absolute;
	top: 0;
	left: 0;
}

.key#recipe p span,
#recipe .recipe_list p span,
#recipe .recipe_list2 p span,
#recipe .recipe_list3 p span	{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
}

#recipe .recipe_list a h3,
#recipe .recipe_list2 a h3,
#recipe .recipe_list3 a h3	{
	color: white;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 30px;
	line-height: 200%;
	font-weight: 500;
	letter-spacing: 1px;
	text-shadow: 0 0 10px black;
}

#recipe .inner	{
	max-width: 840px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

#recipe .inner h2,
#news .inner h2,
#contact .inner h2	{
	display: block;
	text-align: center;
	background-color: white;
	color: #d6472b;
	border: 2px solid #d6472b;
	text-decoration: none;
	border-radius: 20px;
	box-sizing: border-box;
	font-size: 28px;
	max-width: 800px;
	padding: 15px 0;
	margin: 0 auto 50px;
}

#news .inner h2	{
	color: #d6472b;
	border: 2px solid #d6472b;
}

#news	{
	margin-bottom: 75px;
}
#news .menu_title	{
	background-color: #ea5514;
}

#news .news_list_wrapper	{
	width: 100vw;
	overflow: hidden;
	position: relative;
}

#news .news_list	{
	position: absolute;
	top: auto;
	left: 50%;
	transform: translateX(-50%);
	width: 120vw;
}

#news .news_list a	{
	display: block;
	margin: 0 auto;
	text-decoration: none;
}
#news .news_list a .wrapper,
#news .news_list a h3	{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#news .news_list a .imgarea	{
	border-radius: 50%;
	width: 20vw;
	height: 20vw;
	overflow: hidden;
	margin: 0 auto;
	border: 7.5px solid black;
	box-sizing: border-box;
	position: relative;
}

#news .news_list a .imgarea img	{
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.slick-dots	{
	bottom: -50px;
}
#news .news_list a h3,
#news .news_list a p	{
	width: auto;
	margin: 25px auto 0;
}

#news .news_list a h3 .news_label	{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	background-color: black;
	color: white;
	display: inline-block;
	padding: 5px 10px;
	font-size: 12px;
	margin-bottom: 10px;
}
#news .news_list a h3 .news_date	{
	font-size: 14px;
}
#news .news_list a h3 .news_title	{
	display: block;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	margin: 15px 0 0;
	width: 100%;
	text-align: center;
}

#news .news_list a p	{
	line-height: 180%;
}

#news .news_list a.webinar .imgarea	{
	border-color: #1d2088;
}

#news .news_list a.webinar h3 .news_label	{
	background-color: #1d2088;
}

#news .news_list a.topics .imgarea	{
	border-color: #f39800;
	
}
#news .news_list a.topics h3 .news_label	{
	background-color: #f39800;
}

#news .news_list a.training .imgarea	{
	border-color: #dae000;
}

#news .news_list a.training  h3 .news_label	{
	background-color: #dae000;
}

#news .news_list a p	{
	margin-top: 10px;
}

footer	{
	background-color: #f39800;
	padding: 75px 0;
}

footer .inner	{
	width: 75vw;
	max-width: 1000px;
	margin: 0 auto;
}

footer .inner .snslink ul	{
	display: flex;
	justify-content: center;
	margin-bottom: 75px;
}
footer .inner .snslink ul li	{
	list-style: none;
	margin: 0 10px;
}

footer .inner .footerinfo	{
	justify-content: space-between;
}

footer .inner .footerinfo .col	{
	width: 54%;
	line-height: 180%;
}
footer .inner .footerinfo .col:first-child	{
	width: 45%;
}
footer .inner .footerinfo .col a	{
	color: white;
	text-decoration: none;
}
footer p	{
	font-size: 20px;
	color: white;
	line-height: 200%;
}
footer .inner .footerinfo .col dl,
footer .inner .footerinfo .col > ul	{
	flex-wrap: wrap;
	width: 100%;
	gap: 15px;
}
footer .inner .footerinfo .col ul > li	{
	flex-direction: column;
	display: flex;
	width: 48%;
	gap: 10px;
}

footer .inner .footerinfo .col > ul > li > a,
footer .inner .footerinfo .col dl dt	{
	width: 100%;
	font-weight: bold;
}

footer .inner .footerinfo .col dl dd,
footer .inner .footerinfo .col ul > li > ul	{
	width: 100%
}

footer .inner .footerinfo .col ul > li > ul > li,
footer .inner .footerinfo .col ul > li > ul > li > a	{
	width: 100%;
	zoom:0.85;
	margin: 0 0 5px;
	padding-left: 5px;
}

footer .inner .footerinfo .col ul > li > ul > li > a:before	{
	content: '- ';
}
footer .inner .footerinfo .col dl dd a	{
	display: inline-block;
	margin-right: 15px;
}

footer .copyright p	{
	font-size: 14px;
	margin: 75px 0 0;
}

.sub.mission .buttonarea .col3,
.sub.mission .buttonarea .col2	{
	justify-content: space-between;
	width: 80vw;
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: 30px;
}


.sub.mission .buttonarea .col3 a.col,
.sub.mission .buttonarea .col2 a.col	{
	display: block;
	text-align: center;
	background-color: #c64026;
	color: white;
	text-decoration: none;
	border-radius: 20px;
	padding: 10px 0;
	box-sizing: border-box;
}

.sub.mission .buttonarea .col2 a.col	{
	width: 48%;
	font-size: 18px;
}

.sub.mission .buttonarea .col3 a.col	{
	width: 31.333%;
	font-size: 14px;
}

.news_menu	{
	max-width: 1200px;
	margin: 20px auto 75px;
}

.news_menu ul	{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.news_menu ul li	{
	list-style: none;
}

.news_menu ul li a	{
	background-color: white;
	border-radius:	3px;
	text-decoration: none;
	padding: 3px 10px;
	font-weight: bold;
	position: relative;
}

.news_menu ul li a:after	{
	content: "";
	position: absolute;
	bottom: -20px;
	left: 7px;
	border-top: 20px solid white;
	border-left: 10px solid transparent;
}

.news_menu ul li a.all	{
	color: #ea5514;
}
.news_menu ul li a.webinar	{
	color: #c64026;
}
.news_menu ul li a.lesson	{
	color: #d6472b;
}
.news_menu ul li a.seminar	{
	color: #ea5514;
}
.news_menu ul li a.study	{
	color: #f39800;
}
.news_menu ul li a.school	{
	color: #8fc31f;
}
.news_menu ul li a.forum	{
	color: #13ae67;
}
.news_menu ul li a.topics	{
	color: #172a88;
}
.news_menu ul li a.pr	{
	color: #920783;
}

.news_menu ul li a.active	{
	color: white !important;
}

.news_menu ul li a.active.all	{
	background-color: #ea5514;
}
.news_menu ul li a.active.all:after	{
	border-top-color: #ea5514;
}

.news_menu ul li a.active.webinar	{
	background-color: #c64026;
}
.news_menu ul li a.active.webinar:after	{
	border-top-color: #c64026;
}

.news_menu ul li a.active.lesson	{
	background-color: #d6472b;
}
.news_menu ul li a.active.lesson:after	{
	border-top-color: #d6472b;
}

.news_menu ul li a.active.seminar	{
	background-color: #ea5514;
}
.news_menu ul li a.active.seminar:after	{
	border-top-color: #ea5514;
}

.news_menu ul li a.active.study	{
	background-color: #f39800;
}
.news_menu ul li a.active.study:after	{
	border-top-color: #f39800;
}

.news_menu ul li a.active.school	{
	background-color: #8fc31f;
}
.news_menu ul li a.active.school:after	{
	border-top-color: #8fc31f;
}

.news_menu ul li a.active.forum	{
	background-color: #13ae67;
}
.news_menu ul li a.active.forum:after	{
	border-top-color: #13ae67;
}

.news_menu ul li a.active.topics	{
	background-color: #172a88;
}
.news_menu ul li a.active.topics:after	{
	border-top-color: #172a88;
}

.news_menu ul li a.active.pr	{
	background-color: #920783;
}
.news_menu ul li a.active.pr:after	{
	border-top-color: #920783;
}

.sub main .inner h3,
.sub main .inner p	{
	max-width: 800px;
	padding: 15px;
	margin: 0 auto;
}

.sub main .inner p	{
	line-height: 175%;
}

.sub main .inner h3	{
	font-size: 20px;
	letter-spacing: 1px;
}
.sub.contact .bg_orange	{
	background-color: #f18d00;
	color: white !important;
	border-radius: 20px;
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
	position: relative;
	padding: 25px;
	margin-bottom: 50px;
}
.sub.contact .c_white,
.sub.contact .c_white > *	{
	color: white !important;
}

.contact_buttonarea	{
	position: static;
	width: 100%;
	text-align: right;
	
}
.contact_buttonarea a	{
	width: 40%;
	display: inline-block;
	color: #f18d00;
	background-color: white !important;
	text-align: center;
	font-size: 28px;
	letter-spacing: 2px;
	margin-right: 15px;
	padding: 10px 0;
	border-radius: 20px;
	text-decoration: none;
	font-weight: normal;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

.contact_buttonarea a.orange	{
	border: 1.5px solid #f18d00;
	color: #f18d00 !important;
	background-color: #fff;
}
.contact_buttonarea a:last-child	{
	margin-bottom: 0;
}
.sub main .inner .wide img	{
	width: 100%;
}

.sub .inner	{
	position: relative;
	width: 80vw;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.sub .inner img	{
	max-width: 100%;
}
.sub  .inner h1	{
	display: block;
	text-align: center;
	background-color: white;
	color: #d6472b;
	border: 2px solid #d6472b;
	text-decoration: none;
	border-radius: 20px;
	box-sizing: border-box;
	font-size: 28px;
	max-width: 800px;
	padding: 15px 0;
	margin: 0 auto 50px;
}

.sub  .inner table,
.sub  .inner table th,
.sub  .inner table td	{
	box-sizing: border-box;
	border-collapse: separate !important;
	border-spacing: 2px !important;
}
.sub  .inner table td	{
	background-color: #f9f9f9;
	padding: 15px;
}

.sub  .inner table th	{
	padding: 10px;
}
.sub.bg_red .inner h1	{
	color: #c64026;
	border-color: #c64026;
}

.sub.bg_red .inner h2,
.sub.bg_red  .inner table th	{
	background-color: #c64026;
	color: white;
}

.sub.bg_redorange .inner h1	{
	color: #d6472b;
	border-color: #d6472b;
}

.sub.bg_redorange .inner h2,
.sub.bg_redorange .inner table th	{
	background-color: #d6472b;
	color: white;
}

.sub.bg_orange .inner h1	{
	color: #ea5514;
	border-color: #ea5514;
}

.sub.bg_orange .inner h2,
.sub.bg_orange .inner table th	{
	background-color: #ea5514;
	color: white;
}

.sub.bg_lightorange .inner h1	{
	color: #f39800;
	border-color: #f39800;
}

.sub.bg_lightorange .inner h2,
.sub.bg_lightorange .inner table th	{
	background-color: #f39800;
	color: white;
}

.sub.bg_red .inner h3	{
	color: #c64026;
}

.sub.bg_redorange .inner h3	{
	color: #d6472b;
}

.sub.bg_orange .inner h3	{
	color: #ea5514;
}

.sub.bg_lightorange .inner h3	{
	color: #f39800;
}

.sub main .inner h1,
.sub main .inner h2,
.sub main .inner h3	{
	line-height: 150%;
}

.sub main .inner h2	{
	font-size: 24px;
	padding: 10px 20px;
	margin-top: 30px;
	margin-bottom: 15px;
	border-radius: 20px;

}

.sub main .inner > *	{
	max-width: 800px;
	padding: 15px 0;
	margin: 0 auto;
}

.sub main .inner ol,
.sub main .inner ul	{
	padding-left: 1.5em;
}
.headernav ul > li	{
	position: relative;
}
.headernav ul > li > ul	{
	display: none;
	position: absolute;
	z-index: 10;
	width: 100%;
}
.headernav ul >li > ul > li	{
	width: 100%;
}
.headernav ul >li > a:hover + ul	{
	display: block;
}

.headernav ul >li > a + ul:hover	{
	display: block;
}

.sub main .inner > .wp-block-file	{
	background-color: #eee;
	padding: 15px;
	margin-bottom: 30px;
}
.sub main .inner > .wp-block-file a	{
	color: #333;
	text-decoration: none;
}

.sub main .inner > .wp-block-file a.wp-element-button	{
	color: white;
	padding: 5px 10px;
}
.sub #contact .inner h1	{
	display: none;
}
.sub #contact .inner h2	{
	color: #f18d00;
	border: 2px solid #f18d00;
	padding: 10px 0 !important;
}
.sub #contact .inner p	{
	margin-bottom: 30px;
}

.sub #contact .inner *	{
	color: #f18d00;
}

.sub main .inner a:not(.wp-block-button__link)	{
	color: #2271b1;
	text-decoration: underline;
	cursor: pointer;
}

.sub.recipe .recipe_title .wrapper h1	{
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 0;
	background-color: #ea5514;
	color: white;
	text-align: center;
	width: 100%;
	margin: 0 auto;
}

.sub main ul	{
	list-style :none
}
.sub main ul li,
.sub main ol li {
	position:relative;
	padding-left:15px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.sub main ul li:before {
	content:"";
	width:10px;
	height:10px;
	background:#ff0000;
	border-radius:5px;
	position:absolute;
	left:0px;
	top:7px;
}


.sub.npo .inner table th	{
	width: 30% !important;
}

.sub main ol {
  list-style: none;
  counter-reset: number;
}
.sub main ol li {
  position: relative;
  padding-left: 1.5em;
}
.sub main ol li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  top: 5px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  font-size: 14px;
  text-align: center;
  line-height: 1;
}

.sub.bg_red main ol li:before,
.sub.bg_red main ul li:before	{
	background: #c64026;
}

.sub.bg_redorange main ol li:before,
.sub.bg_redorange main ul li:before	{
	background: #d6472b;
}

.sub.bg_orange main ol li:before,
.sub.bg_orange main ul li:before	{
	background: #ea5514;
}

.sub.bg_lightorange main ol li:before,
.sub.bg_lightorange main ul li:before	{
	background: #f39800;
}

.yearly-list	{
	display: flex;
	background-color: #fff;
	width: 100%;
	justify-content: flex-start;
}

.yearly-list li	{
	margin: 0 15px;
	font-size: 16px;
}
.single_backbutton	{
	text-align: center;
	padding-top: 50px !important;
}
.single_backbutton a	{
	display: inline-block;
	width: 200px;
	padding: 3px 15px;
	background-color: #ea5514;
	color: white;
	border-radius: 10px;
	text-align: center;
}
@media screen and (max-width: 768px)	{
	header .logo	{
		display: block;
		margin: 5vw auto;
	}

	header .logo img	{
		width: 60vw;
	}

	.keywrap,
	.key, .key img,
	.key .slick-list,
	.key .slick-list .slick-track	{
		height: 300px;
		overflow: hidden;
	}
	
	.key .slick-list	{
		width: 100vw !important;
	}
	.key a	{
		text-align: center;
		width: 100vw !important;
		overflow-x: hidden;
	}
	
	.key a .wrapper	{
		width: 100%;
		height: 100%;
		display: block;
	}
	.key a img	{
		display: block;
		margin: 0 auto;
		max-width: none;
		width: auto;
	}
	.key	{
		position: static;
		margin-bottom: 7.5vw;
		transform: none;
		left: 0;
	}
	.keywrap	{
		width: 100% !important;
	}
	

	.keywrap h2	{
		width: 70%;
		font-size: 8vw;
	}
	.prev-arrow	{
		left: 3vw;
	}
	
	.next-arrow	{
		right: 3vw;
	}
	.mission	{
		margin-bottom: 5vw;
	}
	#mission .inner	{
		padding: 10vw;
		width: 90vw;
	}
	#mission .inner h2	{
		font-size: 5vw;
	}
	#mission .inner .space	{
		display: block;
		float: left;
	}
	#mission .inner .mission_img	{
		position: relative;
		float: left;
		clear: both;
		bottom: auto;
	}
	#mission .inner .textarea	{
		margin-left: 0;
		min-height: 70vw;
	}
	
	#mission .inner .textarea a	{
		display: block;
		width: 200px;
		margin: 5vw auto 0;
		text-align: center;
	}
	#mission .mission_name	{
		display: block;
		width: 80vw;
		clear: both;
	}
	
	#recipe	{
		margin-bottom: 7.5vw;
	}

	#recipe .recipe_list a .wrapper,
	#recipe .recipe_list2 a .wrapper,
	#recipe .recipe_list3 a .wrapper	{
		width: 65vw;
	}
	
	#recipe .recipe_list3 a .wrapper	{
		width: 100%;
	}
	#recipe .recipe_list a img,
	#recipe .recipe_list2 a img,
	#recipe .recipe_list3 a img	{
		width: 65vw;
	}

	#recipe .recipe_list3 a img	{
		width: 100%;
	}	
	#recipe .recipe_list a h3,
	#recipe .recipe_list2 a h3,
	#recipe .recipe_list3 a h3	{
		font-size: 4vw;
	}
	#recipe .recipe_list p,
	#recipe .recipe_list2 p,
	#recipe .recipe_list3 p	{
		width: 65vw;
		box-sizing: border-box;
		padding: 15px;
		line-height: 180%;
	}
	
	#recipe .recipe_list3 p	{
		width: 100%;
	}

	#news	{
		margin-bottom: 7.5vw;
	}
	

	#news .news_list a .imgarea	{
		width: 50vw;
		height: 50vw;
	}
	
	#news .news_list a h3,
	#news .news_list a p	{
		width: 50vw;
	}
	footer	{
		padding: 7.5vw 0;
	}

	footer .inner	{
		width: 65%;
		box-sizing: border-box;
	}
	
	footer .inner .snslink ul	{
		margin-bottom: 7.5vw;
	}
	
	footer .inner .snslink ul li img	{
		width: 7.5vw;
	}
	footer .inner .footerinfo,
	footer .inner .footerinfo .col dl	{
		flex-direction: column;
	}
	
	footer .inner .footerinfo .col ul	{
		
	}
	footer .inner .footerinfo .col	{
		width: 100%;
		margin-bottom: 5vw;
	}
	
	footer .inner .footerinfo .col p,
	footer .inner .footerinfo .col a	{
		font-size: 3.3vw !important;
	}
	footer .inner .footerinfo .col dl dt,
	footer .inner .footerinfo .col dl dd	{
		margin-bottom: 3vw;
		line-height: 180%;
		width: 100%;
	}
	footer .inner .footerinfo .col dl dd a	{
		margin-bottom: 2.5vw;
	}
	
	footer .copyright p	{
		margin: 0;
	}
	.sp_order1	{
		order: 1;
	}
	
	.sp_order2	{
		order: 2;
	}
	
	.sp_order1 img	{
		width: 100%;
		text-align: center;
	}
	
	h1,h2,h3,h4,h5,h6,p,th,td,li,dt,dd span	{
		font-size: 3.3vw;
	}
	p	{
		font-size: 3.6vw !important;
	}
	
	.mt30	{
		margin-top: 30px !important;
	}
	
	.mt50	{
		margin-top: 50px !important;
	}
	
	.mt75	{
		margin-top: 75px !important;
	}
	
	.my0	{
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	
	
	.mb10	{
		margin-bottom: 1vw !important;
	}
	
	.mb25	{
		margin-bottom: 3vw !important;
	}
	
	.mb30	{
		margin-bottom: 3.3vw !important;
	}
	
	.mb50	{
		margin-bottom: 5vw !important;
	}
	
	.mb75	{
		margin-bottom: 7.5vw !important;
	}
	
	.mb100	{
		margin-bottom: 10vw !important;
	}
	

	.pc	{
		display: none !important;
	}
	
	br.pc	{
		display: none !important;
	}
	
	.flex.pc	{
		display: none !important;
	}
	
	.sp	{
		display: block !important;
	}
	
	br.sp	{
		display: inline !important;
	}
	
	.flex.sp	{
		display: flex !important;
	}
	
	.slide-arrow	{
		width: 7.5vw;
	}
	.drawer-hamburger,.drawer-hamburger:hover	{
		margin: 5px;
		border-radius: 5px;
		background-color: #c64026;
		z-index: 100;
	}
	
	.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before	{
		background-color: white;
	}
	
	.drawer-nav	{
		background-color: #c64026;
		z-index: 100;
	}
	
	.drawer-nav .drawer-brand img	{
		width: 40vw;
		display: block;
		margin: 5vw auto;
	}
	.drawer-nav ul	{
		padding: 0 0 0 2rem;
		box-sizing: border-box;
	}
	
	.drawer-nav ul li ul	{
		padding: 0 0 0 0.5rem;
	}
	.drawer-nav ul li	{
		margin-bottom: 15px;
	}
	
	.drawer-nav ul li ul li	{
		margin-bottom: 0;
	}
	.drawer-nav ul li ul li a	{
		font-size: 0.7rem;
		padding: 1rem 0 !important;
		line-height: 200%;
		text-decoration: none;
	}
	
	.drawer-nav ul li ul li a:before	{
		content: '- ';
	}
	.drawer-nav a	{
		color: white;
	}
	.drawer-nav a[href="#"]	{
		pointer-events: none;
	}
	.drawer-nav a + ul 	{
		margin-top: 0.5rem;
	}
	
	.drawer-overlay	{
		z-index: 11;
	}
	.headernav	{
		display: none;
	}
	
	#news .news_list a .imgarea img	{
		min-height: 100%;
		min-width: 100%;
	}

	#mission .inner	{
		overflow: hidden;
	}
	
	#mission .inner	{
		padding-bottom: 30px;
	}
	#mission .inner .mission_img	{
		width: 25vw;
		margin-right: -15px;
		bottom: -10vw;
	}
	
	footer .copyright p	{
		font-size: 10px !important;
	}
	.sub.mission .buttonarea .col2.flex,
	.sub.mission .buttonarea .col3.flex	{
		flex-direction: column;
	}
	.sub.mission .buttonarea .col2 a.col	{
		width: 100%;
		margin-bottom: 2vw;
		font-size: 4vw;
	}
	
	.sub.mission .buttonarea .col3 a.col	{
		width: 100%;
		margin-bottom: 2vw;
		font-size: 3.3vw;
	}
	
	#recipe .inner h2,
	#news .inner h2	{
		font-size: 4.5vw;
		margin-bottom: 5vw;
	}
	
	#recipe .inner,
	#news	{
		margin-bottom: 15vw;
	}
	
	#news .inner	{
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 7.5vw;
	}
	.news_menu	{
		margin-left: 25px;
		margin-right: 25px;
	}
	.news_menu ul	{
		flex-wrap: wrap;
	}
	
	.news_menu ul li	{
		margin-bottom: 25px;
	}
	
	.news_menu ul li	{
		width: 24%;
		display: block;
	}
	
	.news_menu ul li:last-child	{
		width: 75%;
	}
	.news_menu ul li a	{
		text-align: left;
		font-size: 3vw;
	}
	
	.news_menu ul li a:after	{
		display: none;
	}
	
	.sub main .inner	{
		width: calc(100% - 40px);
		margin: 0 auto;
	}
	.sub .inner h1	{
		font-size: 6vw;
		padding: 2vw 0;
	}
	.sub main .inner h2	{
		font-size: 5vw !important;
	}
	
	.sub main .inner h3	{
		font-size: 4vw;
	}
	
	.sub main .inner p	{
		font-size: 3.3vw;
	}
	.contact_buttonarea	{
		width: 50%;
		right: 0;
	}
	.contact_buttonarea a	{
		font-size: 3.5vw;
		margin-bottom: 2vw;
	}
	
	.sub main .inner .wide	{
		padding: 0;
		padding-bottom: 15vw;
	}
	
	.sub.npo .inner table,
	.sub.npo .inner table tbody,
	.sub.npo .inner table tr,
	.sub.npo .inner table th,
	.sub.npo .inner table td	{
		display: flex;
		flex-direction: column;
		height: auto !important;
		width: 100% !important;
	}
	.sub.member .inner table	{
		table-layout: auto;
		width: 100%;
	}
	
	.sub.member .inner table tr th,
	.sub.member .inner table tr td	{
		width: 35% !important;
	}
	.sub.member .inner table tr th:first-of-type,
	.sub.member .inner table tr td:first-of-type	{
		width: 20% !important;
	}
	
	.sub.member .inner table tr th:last-of-type,
	.sub.member .inner table tr td:last-of-type	{
		width: 45% !important;
	}
	.index #recipe .recipe_list a .wrapper	{
		width: 100%;
	}
	
	.index #recipe .recipe_list a	{
		border-radius: 20px;
		overflow: hidden;
		margin-left: 2.5vw;
		margin-right: 2.5vw;
	}
	.key#recipe p,
	#recipe .recipe_list p,
	#recipe .recipe_list2 p,
	#recipe .recipe_list3 p,
	#recipe .recipe_list a img,
	#recipe .recipe_list2 a img,
	#recipe .recipe_list3 a img,
	#recipe .recipe_list .titlewrap,
	#recipe .recipe_list2 .titlewrap,
	#recipe .recipe_list3 .titlewrap	{
		width: 100%;
	}
	
	#recipe .recipe_list .titlewrap, #recipe .recipe_list2 .titlewrap, #recipe .recipe_list3 .titlewrap	{
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}