@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&family=Roboto:wght@700&display=swap');

/* --------------------------------------------------
	オーバーライド
-------------------------------------------------- */

main { padding: 0; width: auto; }
main section { margin-bottom: auto; }
main h2 { margin-bottom: 0; font-size: 3.6rem; text-align: left; letter-spacing: 0.1rem; position: relative; }
main h2::after { content: ''; margin: 0; width: 144px; height: 5px; background: #157c2e; position: absolute; left: 0; bottom: -2.4rem; }
a.button { margin: 0 auto; }
a.button.red { border: solid 1px #ba1e24; color: #ba1e24; }
a.button span {}
section > .inner { margin: 0 auto; width: 1200px; }

@media screen and (max-width: 1024px) {
main { margin: 0; }
main h2 { margin-bottom: 6.4rem; font-size: 2.4rem; text-align: center; }
main h2::after { margin: 0 auto; width: 62px; height: 4px; bottom: -2rem; }
section > .inner { width: auto; }
}

@media screen and (max-width: 767px) {
}

/* --------------------------------------------------
	メインイメージ
-------------------------------------------------- */

div#main { position: relative; }
div#main .image { position: relative; }

div#main .image { height: calc(100vh - 110px); }


div#main strong { margin-top: -100px; width: 100%; color: #fff; font-family: 'Noto Serif JP'; font-size: 5.8rem; text-align: center; text-shadow: rgba(0,0,0,0.5) 1px 1px 10px, rgba(0,0,0,0.5) -1px 1px 10px, rgba(0,0,0,0.5) 1px -1px 10px, rgba(0,0,0,0.5) -1px -1px 10px; position: absolute; top: 50%; }
div#main img { width: 100%; }
div#main .shop { padding: 1.2rem 0; width: 100%; background: rgba(255,255,255,0.25); position: absolute; bottom: 0; }
div#main .shop ul { margin: 0 auto; width: 600px; list-style: none; display: flex; justify-content: space-between; }
div#main .shop li { width: 140px; }
div#main .shop li a { padding: 10px 0; background: #fff; display: inline-block; }

@media screen and (max-width: 1024px) {
div#main strong { margin-top: 0; font-size: 2.4rem; transform: translateY(-50%); }
div#main .shop ul { width: auto; }
}

@media screen and (max-width: 767px) {
div#main .shop { position: static; }
div#main .shop ul { display: block; }
}

/* --------------------------------------------------
	コロナ対策
-------------------------------------------------- */

#covid-19 { padding: 6rem 0 0; }
#covid-19 .inner { background: #f5f5f5; text-align: center; }
#covid-19 h2 { background: #fff; border: solid 1px #f00; font-size: 1.8rem; text-align: center; letter-spacing: 0; }
#covid-19 h2::after { display: none; }
#covid-19 h2 a { padding: 1.6rem 0; color: #f00; display: block; }
#covid-19 h2 span { padding: 0 8rem; display: inline-block; position: relative; }
#covid-19 h2 span::after { content: ''; margin-top: -12px; width: 1rem; height: 1rem; border: solid 2px; border-color: transparent transparent #f00 #f00; display: block; position: absolute; top: 50%; right: 0; transform: rotate(-45deg); }
#covid-19 h2 span.active::after { content: ''; margin-top: -2px; width: 1rem; height: 1rem; border: solid 2px; border-color: #f00 #f00 transparent transparent; display: block; position: absolute; top: 50%; right: 0; transform: rotate(-45deg); }
#covid-19 .message { padding: 1.6rem 2.4rem 2.4rem; }
#covid-19 ol { color: #f00; text-align: left; display: inline-block; }

@media screen and (max-width: 1024px) {
#covid-19 { padding: 1.2rem; }
#covid-19 h2 { margin-bottom: 1.6rem; padding: 0 4rem; }
#covid-19 .message { padding: 1.2rem 1.6rem; }
}

@media screen and (max-width: 767px) {
#covid-19 h2 { padding: 0 2rem; }
#covid-19 h2 span { padding: 0 3.2rem 0 0; }
}

/* --------------------------------------------------
	お知らせ
-------------------------------------------------- */

#information { padding: 6rem 0; }
#information h2 { margin-bottom: 2.8rem; }
#information h2::before { content: 'INFORMATION'; font-size: 1.6rem; letter-spacing: 0.06em; display: block; }
#information h2 { font-size: 3rem; }
#information h2::after { display: none; }
#information div.list { position: relative; }
#information ul { margin: 0; border-top: solid 1px #dfe2e5; list-style: none; }
#information li { padding: 2.8rem 0; border-bottom: solid 1px #dfe2e5; display: flex; align-items: center; }
#information li span.date { width: 126px; font-size: 1.8rem; flex-shrink: 0; }
#information li span.category { margin-right: 60px; width: 112px; border: solid 1px #000; border-radius: 5px; font-size: 1.5rem; text-align: center; display: inline-block; flex-shrink: 0; }
#information li span.category a { text-decoration: none; display: block; transition: all 0.2s; }
#information li span.category a:hover { background: #000; color: #fff; }
#information li div a { font-weight: bold; }
#information .more { position: absolute; right: 0; top: -2.8rem; transform: translateY(-100%); }
#information .more a { text-decoration: none; letter-spacing: 0.05em; display: flex; align-items: center; }
#information .more span { margin-left: 1.2rem; width: 36px; height: 36px; border: solid 1px #000; border-radius: 18px; display: block; box-sizing: border-box; transition: 0.3s; }
#information .more span::after { content: ''; margin-top: -0.6rem; width: 0.8rem; height: 0.8rem; border: solid 1px; border-color: transparent #000 #000 transparent; display: block; position: absolute; top: 50%; right: 16px; transform: rotate(-45deg); }
#information .more a:hover span { background: #000; }
#information .more a:hover span::after { border-color: transparent #fff #fff transparent; }

@media screen and (max-width: 1024px) {
#information { padding: 4rem 1.2rem; }
}

@media screen and (max-width: 767px) {
#information { padding-bottom: 8rem; }
#information li { display: block; }
#information li div { margin-top: 1rem; }
#information .date { margin-right: 1rem; }
#information .category { margin-right: 0; }
#information .more { margin-top: 2rem; top: auto; transform: none; }
}

/* --------------------------------------------------
	コンセプト
-------------------------------------------------- */

#concept { background: url(/img/home/concept.jpg) center no-repeat; background-size: cover; color: #fff; }
#concept .inner { padding: 70px 0 76px 166px; box-sizing: border-box; }
#concept h2 { font-size: 4.2rem; line-height: 1.4; }
#concept h2::before { content: 'CONCEPT'; font-size: 1.6rem; letter-spacing: 0.06em; position: absolute; left: -166px; top: 1rem; }
#concept h2::after { display: none; }
#concept p { margin: 2.8rem 0; font-size: 1.8rem; }
#concept p:last-of-type { margin: 2.8rem 0 4rem; }
#concept ul { margin: 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; }
#concept li { width: 238px; height: 58px; border: solid 1px #fff; border-radius: 5px; }
#concept li a { height: 100%; color: #fff; font-size: 1.8rem; font-weight: bold; text-align: center; text-decoration: none; line-height: 58px; display: block; position: relative; transition: all 0.2s; }
#concept li a:hover { background: #fff; color: #333; }
#concept li a::after { content: ''; margin-top: -0.6rem; width: 0.8rem; height: 0.8rem; border: solid 2px; border-color: transparent #fff #fff transparent; display: block; position: absolute; top: 50%; right: 2rem; transform: rotate(-45deg); transition: 0.3s; }
#concept li a:hover::after { border-color: transparent #000 #000 transparent; right: 1.6rem; }

@media screen and (max-width: 1024px) {
#concept { padding: 0 1.2rem; }
#concept .inner { padding: 40px 0; }
#concept h2 { font-size: 2.8rem; }
#concept h2::before { margin-bottom: 0.8rem; display: block; position: static; }
#concept li { width: 24%; }
}

@media screen and (max-width: 767px) {
#concept h2 { margin-bottom: 4rem; font-size: 2.4rem; }
#concept p { margin: 2rem 0; font-size: 1.6rem; }
#concept p br { display: none; }
#concept li { margin-bottom: 2%; width: 48%; }
#concept li a { font-size: 1.6rem; }
}

/* --------------------------------------------------
	外食事業
-------------------------------------------------- */

#shoya-fs { padding: 8rem 0; position: relative; }
#shoya-fs div.image { width: 55vw; }
#shoya-fs div.image img { width: 100%; border-radius: 0 10px 10px 0; position: relative; z-index: 2; }
#shoya-fs div.content { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); }
#shoya-fs div.content div { margin-left: calc(55vw + 80px); width: 440px; }
#shoya-fs div.content h2 { margin-bottom: 2rem; font-size: 3rem; }
#shoya-fs div.content h2::before { content: 'RESTAURANT'; font-size: 1.6rem; letter-spacing: 0.06em; display: block; }
#shoya-fs div.content h2::after { display: none; }
#shoya-fs div.content ul { margin: 0 0 4rem; /*padding: 0.8rem 0; border: solid 1px #dfe2e5; border-width: 1px 0;*/ list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
#shoya-fs div.content li { /*margin: 0.8rem 0;*/ width: 45%; }
#shoya-fs div.content li img { width: 100%; }

@media screen and (max-width: 1024px) {
#shoya-fs { padding: 4rem 0; }
#shoya-fs div.image { width: 100%; }
#shoya-fs div.image img { border-radius: 0; }
#shoya-fs div.content { position: static; transform: none; }
#shoya-fs div.content div { margin-left: 0; padding: 2rem 1.2rem; width: auto; }
}

@media screen and (max-width: 767px) {
}
/* --------------------------------------------------
	外食事業コピー(20211214)
-------------------------------------------------- */
#shoya-fs.copy div.content h3 { color: #777; font-size: 3.6rem; line-height: 1.4; }
#shoya-fs.copy div.content p { margin-bottom: 2rem; /*margin-bottom: 4rem;*/ }
#shoya-fs.copy a.button { width: 310px; }

/* --------------------------------------------------
	給食事業
-------------------------------------------------- */

#shoya-cf { position: relative; }
#shoya-cf div.image { margin-left: 45vw; width: 55vw; }
#shoya-cf div.image img { width: 100%; border-radius: 10px 0 0 10px; position: relative; z-index: 2; }
#shoya-cf div.content { margin: 0 auto; width: 1200px; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#shoya-cf div.content div { width: 440px; }
#shoya-cf div.content h2 { margin-bottom: 2rem; font-size: 3rem; }
#shoya-cf div.content h2::before { content: 'CONTRACT FOOD'; font-size: 1.6rem; letter-spacing: 0.06em; display: block; }
#shoya-cf div.content h2::after { display: none; }
#shoya-cf div.content h3 { color: #777; font-size: 3.6rem; line-height: 1.4; }
#shoya-cf div.content p { margin-bottom: 4rem; }
#shoya-cf a.button { margin-left: 0; width: 310px; }

@media screen and (max-width: 1024px) {
#shoya-cf div.image { margin-left: 0; width: 100%; }
#shoya-cf div.image img { border-radius: 0; }
#shoya-cf div.content { width: 100%; position: static; transform: none; }
#shoya-cf div.content div { padding: 2rem 1.2rem; width: auto; }
#shoya-cf a.button { margin-left: auto; }
}

@media screen and (max-width: 767px) {
}

/* --------------------------------------------------
	フードプラスについて
-------------------------------------------------- */

#about { padding: 6rem 0 12rem; background: url(../img/home/about_map.png) right top 3px no-repeat; }
#about h2 { margin-bottom: 5rem; font-size: 3rem; }
#about h2::before { content: 'ABOUT FOOD PLUS'; font-size: 1.6rem; letter-spacing: 0.06em; display: block; }
#about h2::after { display: none; }
#about ul { margin: 0; list-style: none; display: flex; justify-content: space-between; }
#about li { width: 200px; text-align: center; }
#about li h3 { margin: 0 auto; padding: 0.2rem; width: 200px; background: #333; color: #fff; font-size: 2rem; }
#about li div { font-size: 2.4rem; font-weight: bold; }
#about li div strong { font-size: 4.2rem; }
#about li p { margin: 0 0 0.4rem; font-weight: bold; }
#about li p, #about li span { font-size: 1.4rem; }

@media screen and (max-width: 1024px) {
#about { padding: 4rem 1.2rem; background-size: contain; }
#about h2 { margin-bottom: 4rem; font-size: 2rem; }
#about h2::before { font-size: 2.4rem; }
#about ul { margin: 0; flex-wrap: wrap; justify-content: space-between; }
#about li { margin-bottom: 1.2rem; width: 32%; }
#about li h3 { width: 100%; box-sizing: border-box; }
#about li div { font-size: 2rem; }
#about li div strong { font-size: 2.4rem; }
}

@media screen and (max-width: 767px) {
#about li { width: 49%; }
}

/* --------------------------------------------------
	IR情報
-------------------------------------------------- */

#ir { padding: 6rem 0 8rem; background: #f2f4f4; }
#ir h2 { margin-bottom: 2.8rem; font-size: 3rem; }
#ir h2::before { content: 'IR'; font-size: 1.6rem; letter-spacing: 0.06em; display: block; }
#ir h2::after { display: none; }
#ir h3 { margin-bottom: 2.4rem; color: #777; font-size: 2.4rem; }
#ir div.list { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; }
#ir div.list div.block { width: 580px; }
#ir ul { margin: 0; border-top: solid 1px #dfe2e5; list-style: none; }
#ir li { padding: 2.8rem 0; border-bottom: solid 1px #dfe2e5; display: flex; flex-wrap: wrap; align-items: center; }
#ir li p { margin: 0; width: 100%; }
#ir li div { width: 440px; }
#ir li span.date { width: 140px; font-size: 1.8rem; display: inline-block; }
#ir li a { margin-right: 0.8rem; font-weight: bold; }
#ir li span.pdf { width: 50px; border: solid 1px #888; border-radius: 3px; font-size: 1.4rem; text-align: center; line-height: 1.3; display: inline-block; }
#ir .more { position: absolute; right: 0; top: -2.8rem; transform: translateY(-100%); }
#ir .more a { text-decoration: none; letter-spacing: 0.05em; display: flex; align-items: center; }
#ir .more span { margin-left: 1.2rem; width: 36px; height: 36px; border: solid 1px #000; border-radius: 18px; display: block; box-sizing: border-box; transition: 0.3s; }
#ir .more span::after { content: ''; margin-top: -0.6rem; width: 0.8rem; height: 0.8rem; border: solid 1px; border-color: transparent #000 #000 transparent; display: block; position: absolute; top: 50%; right: 16px; transform: rotate(-45deg); }
#ir .more a:hover span { background: #000; }
#ir .more a:hover span::after { border-color: transparent #fff #fff transparent; }

@media screen and (max-width: 1024px) {
#ir { padding: 4rem 1.2rem; }
#ir div.list { display: block; }
#ir div.list div.block { margin-bottom: 4rem; width: 100%; }
#ir li div { width: auto; }
}

@media screen and (max-width: 767px) {
#ir { padding-bottom: 8rem; }
#ir div.list div.block:nth-of-type(2) { margin-bottom: 0; }
#ir li { display: block; }
#ir .more { margin-top: 2rem; top: auto; transform: none; }
}

/* --------------------------------------------------
	その他
-------------------------------------------------- */

#others { padding: 6rem 0; background: #fff; }
#others div.inner { margin: 0 auto; width: 1200px; }
#others ul { margin: 0; list-style: none; display: flex; justify-content: space-between; }
#others li { width: 380px; background: #fff; }
#others li a { color: #fff; text-decoration: none; display: block; }
#others li div { padding: 1.2rem 1.6rem; background: #333; font-size: 2.4rem; display: flex; align-items: center; justify-content: flex-end; }
#others li div span { margin-left: 1.2rem; width: 36px; height: 36px; border: solid 1px #fff; border-radius: 18px; display: block; box-sizing: border-box; position: relative; transition: 0.3s; }
#others li div span::after { content: ''; margin-top: -0.6rem; width: 0.8rem; height: 0.8rem; border: solid 1px; border-color: transparent #fff #fff transparent; display: block; position: absolute; top: 50%; right: 16px; transform: rotate(-45deg); }

@media screen and (max-width: 1024px) {
#others { padding: 4rem 1.2rem; }
#others div.inner { width: auto; }
#others li { width: 33%; }
#others li img { width: 100%; }
#others li div { padding: 1.2rem; font-size: 2rem; }
#others li div span { width: 24px; height: 24px; }
#others li div span::after { margin-top: -0.4rem; width: 0.6rem; height: 0.6rem; right: 10px; }
}

@media screen and (max-width: 767px) {
#others ul { flex-wrap: wrap; }
#others li { margin-bottom: 1.6rem; width: 100%; }
}