@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Kosugi+Maru&family=Noto+Sans+JP:wght@100..900&display=swap');

    
/* =Reset default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html{ font-size: 62.5% } /*初期値16pxの62.5%でルートが10px*/
body{
	line-height: 1.5;
	font-size:90%;
	font-family: 'Noto Sans JP', sans-serif;
	color:#000;
 -webkit-text-size-adjust: 100%;
 background:#cee8e9;
	display: flex;
    flex-flow: column;
    min-height: 100vh;
}

/*全てをクリア*/
.clear {clear: both;} 

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


/* リンク設定
------------------------------------------------------------*/
a,a:visited{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
 color: #0066cb; transition: all 0.5s ease 0s;
  cursor: pointer;}

a:hover, a:active{
-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
outline: none;
color:#ff701e;}

 a:hover img{opacity:.7; }

/**** Clearfix ****/



/* レイアウト
------------------------------------------------------------*/
.inner{
margin:0 auto;
max-width:1000px; width:95%;
}
.inner2{margin:0 auto;max-width:900px;  width:95%;}
.inner3{margin:0 auto;max-width:800px; width:95%;}
#wrapper{margin:0 auto 0px; font-size: 16px;font-size: 1.6rem;  
overflow: hidden; 
	display: flex;
  flex-direction: column;
  min-height: 100vh;
}


.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight:600;
  font-style: normal;
}

.noto-sans {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* 共通変更 フォントサイズ　*/
.font12{ font-size: 12px; font-size: 1.2rem; }
.font14 { font-size: 14px; font-size: 1.4rem; }
.font16 { font-size: 16px; font-size: 1.6rem; }
.font18 { font-size: 18px; font-size: 1.8rem; }
.font20 { font-size: 20px ; font-size: 2.0rem; }
.font22{ font-size: 22px; font-size: 2.2rem; }
.font24{ font-size: 24px; font-size: 2.4rem; }
.font26 { font-size: 26px; font-size: 2.6rem; }
.font32{ font-size: 32px; font-size:3.2rem; }
.font34{ font-size: 34px; font-size:3.4rem; }
.font36{ font-size: 36px; font-size:3.6rem; }
.font40{ font-size: 40px; font-size:4.0rem; }
.font50 { font-size: 50px; font-size:5.0rem; font-weight: 600;}
.font70 { font-size:70px; font-size:7.0rem; font-weight: 600;}


.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}

header { padding:30px 0; text-align: center; position: relative;}
img.no01{display: block; margin: 0 auto; width:90%; height: auto; max-width: 530px;}
img.no02{display: block; margin:40px auto 0; width:100%; height: auto; max-width: 1000px;}
header h1 { padding:30px 0 0; line-height: 1;  }
header h2 { padding:20px 0;  }
header div { position: absolute; left:50%; bottom:0; text-align: left; width:90%; max-width: 800px;transform: translateX(-50%); }


#contents article{ margin: 120px auto 70px ; width:100%; max-width: 1200px;  clear: both;}
img.food{width:300px;height: auto; border-radius: 15px; }
img.food,.food h3{  display: inline-block; vertical-align: middle;}
.food h3{ font-weight: 600; margin-left: 1em; width:calc( 100% - 300px - 2em);}

.food  ul.foodlist{ margin:3em auto; }
.food .foodlist  li{  display:  inline-block; vertical-align: top; width: calc( 25% - 1.2em ); margin: 1em 0;}
.food  .foodlist  li:nth-child(even){  margin: 1em ;}


.food li img{  width:100%; height: auto; display: block; margin-bottom:0.5em; border-radius: 15px; border:1px solid #ddd;}

dl.d4{ background: #fff; padding: 1.5em;}
dl.d4 dt,.red{  color: #c2394f;}
dl.d4 dd li{ display:  inline-block; vertical-align: top; width: calc(50% - 1.2em ); margin: 1em 0 0;}
dl.d4 dd li span{ display: inline-block; margin-left: 1em; /* 文字の左隣 */
   width:4em; color: #c2394f; position: relative; margin-right: 2em; font-weight: 600; }
dl.d4 dd  p{ margin: 1em 1.5em 0;}
p.sdgs{ text-align: center;}
div.sdgs{ background: #fff; margin: 1em auto; padding: 0 1.5em 3em; text-align: center; position: relative;}
.sdgstitle{ display: block; margin: 0 auto 30px; width:250px;}
div.sdgs h3{ margin: 1em auto;}
.sdgsimg {  width:150px; height: auto; }
.sdgsimg,.honbun { display: inline-block; vertical-align: middle; margin:2em 0;}
.honbun {  width:calc( 100% - 150px ); max-width: 400px; text-align:left;margin:0em 0 0 2em; }
.honbun h4 {  background: #bddca8; text-align: left; display: inline-block;border-radius: 20px; padding: 0.5em 1em; margin-bottom: 0.5em;}
.honbun b {  color: #c2394f; }
img.sdgs3{ position: absolute; right:15px; bottom: 10px; width:200px; height: auto;}

.torikumi{ margin: 40px auto; }
.torikumi img.dog { width:30%; height: auto; float: right;}
.torikumi ul,.torikumi p {  margin:0em 1em 2em}
.torikumi ul li {padding: 0px; position: relative; padding-left: 1em; }
.torikumi ul li:before{font-family: "Font Awesome 5 Free";
 font-weight: 900;   position: absolute; left:0em;
  content: "\f058";  }
.footerlink li{ display: inline-block; vertical-align: middle; margin: 0.5em 1em;}
.footerlink { text-align: center; border-top:1px solid #000; padding: 1em 0;}
.footercontact{ text-align: center;  background: #503618; color: #fff; padding: 0.8em 0;}
.footercontact dt,.footercontact dd{ display: inline-block;  vertical-align:middle; text-align: left; }
.footercontact dd b,.footercontact dd span{display: inline-block; vertical-align:middle; margin: 0 0.5em;}
.address{ text-align: center; padding: 1em 0;}


#page-top1{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 20px;
  right: 40px;
  width: 40px;
  height:40px;
  text-align: center;
  text-decoration: none;  color: #fff !important; 
  transition: .5s; font-size: 14px; font-size: 1.4rem; 
	vertical-align:middle; background:#503618;  border-radius:50%;  }

a#page-top1 span .fa-arrow-up {display: block; margin:0 auto 0; color: #fff !important; font-size: 20px; font-size: 2.0rem; padding: 5px 0 0; }

/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/

@media only screen and (max-width:900px){
#wrapper{font-size: 14px;font-size: 1.4rem;}

/* 共通変更 フォントサイズ　*/
.font12{ font-size: 10px; font-size: 1.0rem; }
.font14 { font-size: 12px; font-size: 1.2rem; }
.font16 { font-size: 14px; font-size: 1.4rem; }
.font18 { font-size: 16px; font-size: 1.6rem; }
.font20{ font-size: 18px; font-size: 1.8rem; }
.font22 { font-size: 20px ; font-size: 2.0rem; }
.font24{ font-size: 22px; font-size: 2.2rem; }
.font26{ font-size: 24px; font-size: 2.4rem; }
.font28 { font-size: 26px; font-size: 2.6rem; }
.font32{ font-size: 30px; font-size:3.0rem; }
.font34{ font-size: 32px; font-size:3.2rem; }
.font36{ font-size: 34px; font-size:3.4rem; }
.font40{ font-size: 38px; font-size:3.8rem; }
.font50 { font-size: 46px; font-size:4.6rem; font-weight: 600
}
.font70 { font-size:56px; font-size:5.6rem; font-weight: 600;}
}

    
    
@media only screen and (max-width:800px){
#page-top1{
  right: 5px;
  width: 50px;
  height:50px;}
}

@media only screen and (max-width: 680px){ 
header div { position: static;  display: block; margin: -50px auto;  width:90%; max-width: 800px;transform: translateX(0%); }
#contents article{ margin: 60px auto 30px ;}
    .food .foodlist { text-align: center;}
.food .foodlist  li{  text-align: left;  width: calc( 50% - 3em ); margin: 1em;}
.food  .foodlist  li:nth-child(even){  margin: 1em  ;}
dl.d4 dd li{ display:block; width: 95%; margin: 1em auto 0;}
dl.d4 dd  p{ margin: 1em auto 0; width: 95%; }
    
img.sdgs3{ position: static;  margin: 1em auto; display: block;}
.sdgsimg,.honbun { display: block;  margin:2em auto 0; width:95%; max-width: 600px;}
 .sdgsimg {  max-width: 150px;}  
.honbun br{ display: none;}
}

@media only screen and (max-width: 600px){ 
img.food{width:300px;margin: 1em auto; }
img.food,.food h3{  display: block; }
.food h3{ margin: 1em auto; width:95%;}

    header h1 span { display: block; }
    }

@media only screen and (max-width: 500px){
.footercontact dt,.footercontact dd{ display:block; text-align: center;}
.footerlink li{margin: 0.5em;}
.footerlink {  padding: 0;}
}



/* 幅400px以下から ヘッダー等微調節
------------------------------------------------------------*/
@media only screen and (max-width: 430px){ 
    
/* 共通変更 フォントサイズ　*/
.font18 { font-size: 15px; font-size: 1.5rem; }
.font20{ font-size: 16px; font-size: 1.6rem; }
.font22 { font-size: 18px ; font-size: 1.8rem; }
.font24{ font-size: 20px; font-size: 2.0rem; }
.font26{ font-size: 20px; font-size: 2.0rem; }
.font28 { font-size: 24px; font-size: 2.4rem; }
.font32{ font-size: 26px; font-size:2.6rem; }
.font34{ font-size: 30px; font-size:3.0rem; }
.font36{ font-size: 32px; font-size:3.2rem; }
.font40{ font-size: 36px; font-size:3.6rem; }
.font50 { font-size: 40px; font-size:4.0rem; font-weight: 600;}
.font70 { font-size:45px; font-size:4.5rem; font-weight: 600;}  
.sub.business #contents article dl dd span{ width:17em;}
    
.food .foodlist  li{ max-width: 300px; width: 90%; margin: 1em auto;}
.food  .foodlist  li:nth-child(even){margin: 1em auto;;}


}