@charset "UTF-8";
/* ==========================================================================
  Reset
  ========================================================================== */
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, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block;
}

ul, ol {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
  content: "";
  content: none;
}

img {
  font-size: 0;
  line-height: 0;
}

a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  font-weight: bold;
  font-style: italic;
  color: #000;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

fieldset, img {
  line-height: 0;
  vertical-align: top;
}

hr {
  display: none;
}

input, select {
  vertical-align: middle;
}

* {
  margin: 0;
  padding: 0;
}

img {
  vertical-align: bottom;
}

html, body {
  width: 100%;
  height: 100%;
}

ul, li {
  list-style: none;
}

b {
  font-weight: bold;
}

iframe {
  border: none;
  outline: none;
}

/* ==========================================================================
  Base
  ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  color: #000000;
  font-size: 1.6em;
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  background: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@media screen and (min-width: 769px) {
  body {
    min-width: 900px;
  }
}
@media screen and (max-width: 768px) {
  body {
    font-size: 1.4em;
  }
}

body.off-scroll {
  height: 100%;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
}

::selection {
  background: #000;
  color: #fff;
}

.pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

.en {
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-weight: bold;
}

.serif {
  font-family: "Hiragino Mincho ProN", YuMincho, serif;
  letter-spacing: 0.15em;
}

.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

a {
  color: #000;
  text-decoration: none;
}

a:link {
  color: #000;
}

a:visited {
  color: #000;
}

@media screen and (min-width: 769px) {
  a:hover {
    color: #666;
  }
}
a:active {
  color: #000;
}

.btn {
  display: block;
}

.nolink {
  cursor: default;
}
.nolink::before {
  display: none !important;
  content: none !important;
}

h1, h2, h3, h4, h5, h6, strong {
  font-weight: bold;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* ==========================================================================
  Layout
  ========================================================================== */
.l-wrapper {
  position: relative;
  overflow: hidden;
  padding-top: 70px;
}
@media screen and (min-width: 769px) {
  .l-wrapper {
    padding-top: 90px;
    margin: 0 auto;
  }
}

.l-wrapper.l-wrapper-home {
  padding-top: 120px;
}

.l-container {
  position: relative;
  overflow: hidden;
}

.l-main {
  width: 100%;
}
.l-main > article {
  max-width: 960px;
  margin: 0 auto 60px;
}

.l-aside {
  width: 100%;
  padding-top: 60px;
  border-top: 1px solid #000;
}

.l-inner {
  position: relative;
  max-width: 1440px;
  padding: 0 2.5%;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .l-inner {
    padding: 0 5%;
  }
}

.l-inner.l-inner-600 {
  max-width: 600px;
}
@media screen and (max-width: 768px) {
  .l-inner.l-inner-600 {
    max-width: 80%;
  }
}

.l-inner.l-inner-720 {
  max-width: 720px;
}
@media screen and (max-width: 768px) {
  .l-inner.l-inner-720 {
    max-width: 90%;
  }
}

.l-inner.l-inner-960 {
  max-width: 960px;
}
@media screen and (max-width: 768px) {
  .l-inner.l-inner-960 {
    max-width: 90%;
  }
}

.l-content {
  position: relative;
}

.l-section {
  position: relative;
}
.l-section small {
  font-size: 80%;
}

/* ==========================================================================
  Page Title
  ========================================================================== */
/* ==========================================================================
  Page Content
  ========================================================================== */
.l-content h2 {
  font-size: 2.4rem;
}
.l-content h3 {
  font-size: 2rem;
  padding-bottom: 10px;
  border-bottom: 2px solid #000;
}
.l-content h4 {
  font-size: 1.8rem;
}
.l-content h5 {
  font-size: 1.6rem;
}
.l-content h2, .l-content h3, .l-content h4, .l-content h5 {
  margin-bottom: 0.5em;
  line-height: 1.4;
}
.l-content h2:not(first-of-type), .l-content h3:not(first-of-type) {
  margin-top: 3em;
}
.l-content h4:not(first-of-type), .l-content h5:not(first-of-type) {
  margin-top: 2em;
}
.l-content p {
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: justify;
}
.l-content .lead {
  font-size: 1.8rem;
  line-height: 1.8;
}
.l-content .notes {
  font-size: 1.2rem;
  line-height: 1.8;
}
.l-content .attention {
  font-size: 1.6rem;
  color: #ff0000;
}
.l-content table th, .l-content table td {
  padding: 0.5em 0.5em;
  border: 1px solid #000;
  font-size: 1.6rem;
  line-height: 1.6;
}
.l-content table th {
  background: #eeedeb;
  text-align: center;
}

/* ==========================================================================
Header
========================================================================== */
.l-header {
  position: fixed;
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #000;
  background: #fff;
  z-index: 100;
}
@media screen and (min-width: 769px) {
  .l-header {
    height: 90px;
  }
}
.l-header .header-inner {
  position: relative;
  padding: 0;
  width: 100%;
  max-width: inherit;
  height: 100%;
  display: flex;
}
.l-header .header-inner .site-logo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  width: 130px;
  height: 50px;
}
@media screen and (min-width: 769px) {
  .l-header .header-inner .site-logo {
    width: 160px;
    height: 60px;
  }
}
.l-header .header-inner .site-logo a {
  display: block;
  width: 100%;
}
.l-header .header-inner .zennoh-logo {
  position: absolute;
  left: 2.5%;
  top: 15px;
  width: 110px;
  height: 28px;
}
@media screen and (min-width: 769px) {
  .l-header .header-inner .zennoh-logo {
    width: 200px;
    height: 50px;
  }
}

.l-header.home-header {
  transition: all 0.25s ease-out;
  height: 150px;
  border-bottom: none;
}
@media screen and (min-width: 769px) {
  .l-header.home-header {
    height: 150px;
  }
}
.l-header.home-header .site-logo {
  transition: all 0.25s ease-out;
  width: 180px;
  height: 71px;
}
@media screen and (min-width: 769px) {
  .l-header.home-header .site-logo {
    width: 250px;
    height: 99px;
  }
}
.l-header.home-header .site-logo .apron-logo {
  transition: all 0.25s ease-out;
  padding: 0 10%;
}
.l-header.home-header .site-logo .apron-tagline {
  transition: all 0.25s ease-out;
  opacity: 1;
}

.l-header.home-header.is-default {
  height: 70px;
}
@media screen and (min-width: 769px) {
  .l-header.home-header.is-default {
    height: 90px;
  }
}
.l-header.home-header.is-default .site-logo {
  width: 130px;
  height: 50px;
}
@media screen and (min-width: 769px) {
  .l-header.home-header.is-default .site-logo {
    width: 160px;
    height: 60px;
  }
}
.l-header.home-header.is-default .site-logo .apron-logo {
  padding: 0;
}
.l-header.home-header.is-default .site-logo .apron-tagline {
  opacity: 0;
}

/* ===================
Global Navi
==================== */
/* Trigger */
.gnav-trigger {
  position: absolute;
  z-index: 10001;
  width: 60px;
  height: 63px;
  right: 0;
  top: 0;
  left: 0;
  bottom: auto;
  margin: 0 0 auto auto;
  background: #333333;
  border-radius: 0 0 0 10px;
}
.gnav-trigger .lines {
  position: relative;
}
.gnav-trigger .lines span {
  position: absolute;
  z-index: 2;
  background: #fff;
  left: 15px;
  transition: all 0.25s ease-out;
}
.gnav-trigger .lines span:nth-child(1) {
  width: 30px;
  height: 2px;
  top: 20px;
}
.gnav-trigger .lines span:nth-child(2) {
  width: 30px;
  height: 2px;
  top: 30px;
}
.gnav-trigger .lines span:nth-child(3) {
  width: 20px;
  height: 2px;
  top: 40px;
  margin-left: 10px;
}

.gnav-trigger.is-active .lines span:nth-child(1) {
  width: 30px;
  top: 30px;
  left: 15px;
  transform: rotate(-45deg);
}
.gnav-trigger.is-active .lines span:nth-child(2) {
  width: 0;
  top: 30px;
  transform: rotate(45deg);
}
.gnav-trigger.is-active .lines span:nth-child(3) {
  width: 30px;
  top: 30px;
  left: 5px;
  transform: rotate(45deg);
}

/* Navigation(SP) */
@media screen and (max-width: 768px) {
  .gnav {
    display: block;
    position: absolute;
    width: 100vw;
    height: 100dvh;
    right: -100vw;
    top: 0;
    background: #333333;
    padding: 0;
    opacity: 1;
    transition: all 0.25s ease-out;
    z-index: 1000;
  }

  .gnav.is-active {
    display: block;
    width: 100vw;
    height: 100dvh;
    right: 0;
    top: 0;
    opacity: 1;
  }

  .gnav-inner {
    width: 100%;
    height: 100%;
    padding: 100px 30px 30px;
    overflow-y: auto;
  }
  .gnav-inner .gnav-logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
    background: #333333;
    z-index: 1001;
  }
  .gnav-inner .gnav-logo a {
    position: absolute;
    display: block;
    left: 30px;
    top: 15px;
    width: 130px;
    height: 50px;
    z-index: 1001;
  }
  .gnav-inner .gnav-logo a img {
    width: 100%;
    height: auto;
  }
  .gnav-inner .gnav-ttl {
    position: absolute;
    left: 30px;
    top: 20px;
    width: 130px;
    height: 50px;
  }
  .gnav-inner .gnav-ttl span {
    color: #fff;
    font-size: 2.4rem;
    font-weight: bold;
  }
  .gnav-inner .gnav-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
  }
  .gnav-inner .gnav-menu li a {
    color: #fff;
  }
  .gnav-inner .gnav-menu > li {
    text-align: left;
    margin-bottom: 30px;
  }
  .gnav-inner .gnav-menu > li > a {
    position: relative;
    display: block;
    margin: 0 auto;
    font-weight: bold;
    font-size: 1.8rem;
    padding-bottom: 10px;
    text-align: left;
  }
  .gnav-inner .gnav-menu > li > a span {
    font-weight: bold;
  }
  .gnav-inner .gnav-menu > li > a::before, .gnav-inner .gnav-menu > li > a::after {
    content: "";
    display: block;
    position: absolute;
  }
  .gnav-inner .gnav-menu > li > a::before {
    left: auto;
    right: 14px;
    top: 0;
    bottom: 0;
    margin: auto 0 auto auto;
    width: 20px;
    height: 16px;
    background: url(../images/common/arrow-next-wht.svg) center center no-repeat;
    background-size: contatin;
    transition: all 0.25s ease-out;
  }
  .gnav-inner .gnav-menu > li > a::after {
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #666666;
  }
  .gnav-inner .gnav-menu > li.gnav-new > a {
    color: #ff0000;
  }
  .gnav-inner .gnav-menu > li.gnav-new > a::after {
    content: none;
  }
  .gnav-inner .gnav-menu > li.gnav-recipe > a::after {
    background-color: #f9bf73;
  }
  .gnav-inner .gnav-menu > li.gnav-garden > a::after {
    background-color: #a9c469;
  }
  .gnav-inner .gnav-menu > li.gnav-column > a::after {
    background-color: #e60012;
  }
  .gnav-inner .gnav-menu > li.gnav-entry > a::after {
    background-color: #774e12;
  }
  .gnav-inner .gnav-menu > li .sub-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
  }
  .gnav-inner .gnav-menu > li .sub-list > li {
    margin-bottom: 15px;
  }
  .gnav-inner .gnav-menu > li .sub-list > li > a {
    position: relative;
    display: block;
    width: 100%;
    padding-left: 20px;
  }
  .gnav-inner .gnav-menu > li .sub-list > li > a::before {
    content: "";
    display: block;
    position: absolute;
    left: auto;
    right: 14px;
    top: 0;
    bottom: 0;
    margin: auto 0 auto auto;
    width: 14px;
    height: 6px;
    background: url(../images/common/arrow-next-wht.svg) center center no-repeat;
    background-size: contatin;
    transition: all 0.25s ease-out;
  }
}
/* Navigation(PC) */
@media screen and (min-width: 769px) {
  .gnav {
    display: block;
    position: absolute;
    width: 100vw;
    height: 100svh;
    top: -100svh;
    left: 0;
    background: #333333;
    padding: 0;
    opacity: 1;
    transition: all 0.25s ease-out;
    z-index: 1000;
  }

  .gnav.is-active {
    display: block;
    width: 100vw;
    left: 0;
    top: 0;
    opacity: 1;
  }

  .gnav-inner {
    display: none;
  }

  .gnav.is-active .gnav-inner {
    display: block;
  }

  .gnav-inner {
    width: 100%;
    margin-top: 130px;
    height: 100svh;
    padding: 30px 0;
    overflow-y: auto;
  }
  .gnav-inner .gnav-logo {
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    bottom: 0;
    margin: 0 auto auto;
    width: 180px;
    height: 70px;
  }
  .gnav-inner .gnav-logo img {
    width: 100%;
    height: auto;
  }
  .gnav-inner .gnav-ttl {
    position: absolute;
    left: 30px;
    top: 20px;
    width: 130px;
    height: 50px;
  }
  .gnav-inner .gnav-ttl span {
    color: #fff;
    font-size: 2.4rem;
    font-weight: bold;
  }
  .gnav-inner .gnav-search {
    margin-bottom: 15px;
    color: #fff;
  }
  .gnav-inner .gnav-search input {
    color: #fff;
  }
  .gnav-inner .gnav-menu {
    width: 90%;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    flex-direction: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .gnav-inner .gnav-menu::before, .gnav-inner .gnav-menu::after {
    content: "";
    display: block;
    width: 22%;
  }
  .gnav-inner .gnav-menu::before {
    order: 1;
  }
  .gnav-inner .gnav-menu > li {
    width: 22%;
  }
  .gnav-inner .gnav-menu > li a {
    color: #fff;
  }
  .gnav-inner .gnav-menu > li {
    text-align: left;
    margin-bottom: 30px;
  }
  .gnav-inner .gnav-menu > li > a {
    position: relative;
    display: block;
    margin: 0 auto;
    font-weight: bold;
    font-size: 1.8rem;
    padding-bottom: 10px;
    text-align: left;
  }
  .gnav-inner .gnav-menu > li > a span {
    font-weight: bold;
  }
  .gnav-inner .gnav-menu > li > a::before, .gnav-inner .gnav-menu > li > a::after {
    content: "";
    display: block;
    position: absolute;
  }
  .gnav-inner .gnav-menu > li > a::before {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0 auto auto;
    width: 20px;
    height: 16px;
    background: url(../images/common/arrow-next-wht.svg) center center no-repeat;
    background-size: contatin;
    transition: all 0.25s ease-out;
  }
  .gnav-inner .gnav-menu > li > a::after {
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #666666;
  }
  .gnav-inner .gnav-menu > li.gnav-new > a {
    color: #ff0000;
  }
  .gnav-inner .gnav-menu > li.gnav-new > a::after {
    content: none;
  }
  .gnav-inner .gnav-menu > li.gnav-recipe > a::after {
    background-color: #f9bf73;
  }
  .gnav-inner .gnav-menu > li.gnav-garden > a::after {
    background-color: #a9c469;
  }
  .gnav-inner .gnav-menu > li.gnav-column > a::after {
    background-color: #e60012;
  }
  .gnav-inner .gnav-menu > li.gnav-entry > a::after {
    background-color: #774e12;
  }
  .gnav-inner .gnav-menu > li .sub-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
  }
  .gnav-inner .gnav-menu > li .sub-list > li {
    margin-bottom: 15px;
  }
  .gnav-inner .gnav-menu > li .sub-list > li > a {
    position: relative;
    display: block;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .gnav-inner .gnav-menu > li .sub-list > li > a::before {
    content: "";
    display: block;
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0 auto auto;
    width: 14px;
    height: 6px;
    background: url(../images/common/arrow-next-wht.svg) center center no-repeat;
    background-size: contatin;
    transition: all 0.25s ease-out;
  }
}
@media screen and (max-width: 768px) {
  .gnav .l-searchbox input {
    color: #fff;
  }
  .gnav .l-searchbox p {
    color: #fff;
  }
}

/* ==========================================================================
Footer
========================================================================== */
.l-footer {
  padding: 30px 0;
  background: #fff;
  border-top: 1px solid #000;
}
.l-footer .cnav {
  margin-bottom: 60px;
}
.l-footer .fnav {
  margin-bottom: 30px;
}
.l-footer .fnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}
.l-footer .fnav ul li {
  width: 45%;
}
.l-footer .fnav ul li a {
  display: block;
  position: relative;
  padding-left: 30px;
  font-size: 1.6rem;
}
.l-footer .fnav ul li a::before {
  content: "";
  display: block;
  position: absolute;
}
.l-footer .fnav ul li a::before {
  top: 0;
  right: auto;
  bottom: 0;
  left: 10px;
  margin: auto;
  width: 6px;
  height: 6px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
}
@media screen and (min-width: 769px) {
  .l-footer .fnav {
    margin-bottom: 60px;
  }
  .l-footer .fnav ul li {
    width: auto;
  }
}
.l-footer .flink .brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}
.l-footer .flink .brand li {
  width: 45%;
}
.l-footer .flink .brand li a {
  display: block;
  position: relative;
}
.l-footer .flink .brand li.apron a {
  width: 80%;
  margin: 0 auto;
}
.l-footer .flink .brand li.zennoh a {
  width: 35%;
  margin: 0 auto;
}
.l-footer .flink .sns {
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
  .l-footer .flink {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  .l-footer .flink .brand {
    justify-content: center;
    margin: 0 auto;
  }
  .l-footer .flink .brand li {
    width: 50%;
  }
  .l-footer .flink .brand li.apron a {
    width: 100%;
    margin: 0 auto;
  }
  .l-footer .flink .brand li.zennoh a {
    width: 50%;
    margin: 0 auto;
  }
  .l-footer .flink .sns {
    justify-content: flex-end;
  }
}
.l-footer .copyright {
  margin-top: 30px;
  text-align: center;
  font-size: 1.1rem;
}
@media screen and (min-width: 769px) {
  .l-footer .copyright {
    margin-top: 0;
    text-align: center;
  }
}

/* ==================================
Breadcrumbs
================================== */
.breadcrumbs {
  padding: 10px 2.5%;
  background: #eeedeb;
}
.breadcrumbs ul {
  display: flex;
  align-items: center;
  gap: 25px;
}
.breadcrumbs ul li {
  position: relative;
  font-size: 1.3rem;
  line-height: 1.2;
}
.breadcrumbs ul li::after {
  content: "";
  position: absolute;
  display: block;
  border-right: 1px solid #666;
  border-top: 1px solid #666;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  right: -15px;
  left: auto;
  top: 0;
  bottom: 0;
  margin: auto;
}
.breadcrumbs ul li:last-child::after {
  content: none;
}
.breadcrumbs ul li:nth-child(2) {
  white-space: nowrap;
}
.breadcrumbs ul li a {
  display: block;
}
.breadcrumbs ul li.home {
  line-height: 1;
}
.breadcrumbs ul li.home a {
  width: 1.4rem;
  height: 1.4rem;
}
@media screen and (max-width: 768px) {
  .breadcrumbs {
    padding: 10px 2.5%;
  }
}

/* ==================================
Modaal
================================== */
.modaal-inner-wrapper {
  padding: 80px 20px !important;
}

@media screen and (max-width: 768px) {
  .modaal-content-container {
    padding: 30px 20px;
  }

  .modaal-video-wrap {
    margin: auto 0px !important;
    position: relative;
  }
}
/* ==========================================================================
Font-size
========================================================================== */
.fs-xxl {
  font-size: 2.4rem;
}

.fs-xl {
  font-size: 2rem;
}

.fs-l {
  font-size: 1.8rem;
}

.fs-m {
  font-size: 1.6rem;
}

.fs-s {
  font-size: 1.4rem;
}

.fs-xs {
  font-size: 1.2rem;
}

.fs-xxs {
  font-size: 1rem;
}

.fs-0 {
  margin-top: 0 !important;
}

/* ==========================================================================
Font-weight
========================================================================== */
.fw-n {
  font-weight: normal;
}

.fw-b {
  font-weight: bold;
}

/* ==========================================================================
Margin
========================================================================== */
.mt-xxl {
  margin-top: 150px;
}

.mt-xl {
  margin-top: 120px;
}

.mt-l {
  margin-top: 90px;
}

.mt-m {
  margin-top: 60px;
}

.mt-s {
  margin-top: 30px;
}

.mt-xs {
  margin-top: 15px;
}

.mt-xxs {
  margin-top: 10px;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-xxl {
  margin-bottom: 150px;
}

.mb-xl {
  margin-bottom: 120px;
}

.mb-l {
  margin-bottom: 90px;
}

.mb-m {
  margin-bottom: 60px;
}

.mb-s {
  margin-bottom: 30px;
}

.mb-xs {
  margin-bottom: 15px;
}

.mb-xxs {
  margin-bottom: 10px;
}

.mb-0 {
  margin-bottom: 0 !important;
}

/* ==========================================================================
Link
========================================================================== */
.link {
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  .link:hover {
    text-decoration: none;
  }
}

/* ==========================================================================
Button
========================================================================== */
.btn-wrap {
  text-align: center;
}

.btn-entry-wrap {
  text-align: center;
}
.btn-entry-wrap .bnr-entry {
  max-width: 300px;
  margin: 0 auto;
}
.btn-entry-wrap .bnr-ohbo {
  max-width: 720px;
  margin: 0 auto;
}

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 2px solid #000;
  width: 90%;
  max-width: 400px;
  height: 46px;
  border-radius: 28px;
  text-align: center;
  font-weight: bold;
}
@media screen and (min-width: 769px) {
  .btn {
    width: 70%;
    transition: all 0.25s ease-out;
  }
  .btn:hover {
    background: #000;
    color: #fff;
    transform: scale(1.08);
  }
}

.btn::after {
  content: "";
  display: block;
  position: absolute;
}

.btn.btn-more::after,
.btn.btn-entry::after,
.btn.btn-next::after {
  left: auto;
  right: 14px;
  top: 0;
  bottom: 0;
  margin: auto 0 auto auto;
  width: 24px;
  height: 20px;
  background: url(../images/common/arrow-next.svg) center center no-repeat;
  background-size: contatin;
  transition: all 0.25s ease-out;
}
@media screen and (min-width: 769px) {
  .btn.btn-more:hover::after,
.btn.btn-entry:hover::after,
.btn.btn-next:hover::after {
    background: url(../images/common/arrow-next-wht.svg) center center no-repeat;
    background-size: contatin;
  }
}

.btn.btn-entry {
  border: 2px solid #666666;
  background: #666666;
  color: #fff;
}
.btn.btn-entry::after {
  background: url(../images/common/arrow-next-wht.svg) center center no-repeat;
  background-size: contatin;
}

.btn.btn-entry-recipe {
  border: 2px solid #f9bf73;
  background: #f9bf73;
}

.btn.btn-entry-garden {
  border: 2px solid #a9c469;
  background: #a9c469;
}

.btn.btn-entry-entry {
  border: 2px solid #774e12;
  background: #774e12;
}

.btn.btn-entry-form {
  border: 2px solid #ff0000;
  background: #ff0000;
}

.btn.btn-back::after, .btn.btn-prev::after {
  left: 14px;
  right: auto;
  top: 0;
  bottom: 0;
  margin: auto auto auto 0;
  width: 24px;
  height: 20px;
  background: url(../images/common/arrow-prev.svg) center center no-repeat;
  background-size: contatin;
  transition: all 0.25s ease-out;
}
@media screen and (min-width: 769px) {
  .btn.btn-back:hover::after, .btn.btn-prev:hover::after {
    background: url(../images/common/arrow-prev-wht.svg) center center no-repeat;
    background-size: contatin;
  }
}

/* ==========================================================================
Naviation
========================================================================== */
.cnav {
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
  .cnav {
    margin-bottom: 60px;
  }
}
.cnav ul {
  display: flex;
  justify-content: center;
  gap: 15px;
  max-width: 600px;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .cnav ul {
    gap: 30px;
  }
}
.cnav ul li a {
  position: relative;
  display: block;
  font-weight: bold;
  font-size: 1.6rem;
  padding: 8px 5px 10px;
  margin: 0 auto;
  border-radius: 4px;
}
.cnav ul li a span {
  font-weight: bold;
}
.cnav ul li a::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  margin: auto auto 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #666666;
}
.cnav ul li.cnav-new a {
  color: #ff0000;
}
.cnav ul li.cnav-new a::after {
  content: none;
}
.cnav ul li.cnav-recipe a::after {
  background-color: #f9bf73;
}
.cnav ul li.cnav-garden a::after {
  background-color: #a9c469;
}
.cnav ul li.cnav-column a::after {
  background-color: #e60012;
}
.cnav ul li.cnav-entry a::after {
  background-color: #774e12;
}
.cnav ul li.is-active a {
  color: #fff;
}
.cnav ul li.is-active a::after {
  content: none;
}
.cnav ul li.cnav-new.is-active a {
  color: #fff;
  background: #ff0000;
}
.cnav ul li.cnav-recipe.is-active a {
  background: #f9bf73;
}
.cnav ul li.cnav-garden.is-active a {
  background: #a9c469;
}
.cnav ul li.cnav-column.is-active a {
  background: #e60012;
}
.cnav ul li.cnav-entry.is-active a {
  background: #774e12;
}

.snav {
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
  .snav {
    margin-bottom: 60px;
  }
}
.snav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
}
.snav ul li {
  width: auto;
}
.snav ul li a {
  position: relative;
  display: block;
  font-weight: bold;
  font-size: 1.4rem;
  padding-bottom: 10px;
}
.snav ul li a span {
  font-weight: bold;
}
.snav ul li a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #eeedeb;
}
.snav ul li.cnav-new a {
  color: #ff0000;
}
.snav ul li.cnav-new a::after {
  content: none;
}
.snav ul li.cnav-recipe a::after {
  background-color: #f9bf73;
}
.snav ul li.cnav-garden a::after {
  background-color: #a9c469;
}
.snav ul li.cnav-column a::after {
  background-color: #e60012;
}
.snav ul li.cnav-entry a::after {
  background-color: #774e12;
}

.l-main-recipe .snav ul li a::after {
  background-color: #f9bf73;
}

.l-main-garden .snav ul li a::after {
  background-color: #a9c469;
}

.l-main-column .snav ul li a::after {
  background-color: #e60012;
}

.l-main-entry .snav ul li a::after {
  background-color: #774e12;
}

.anav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.anav ul li {
  flex: 1;
}
.anav ul li a {
  position: relative;
  padding: 0 15px;
  width: 100%;
  text-align: center;
}
.anav ul li a::after {
  display: block;
  position: absolute;
  content: "";
  width: 1em;
  height: 1em;
  right: 10px;
  top: 0;
  bottom: 0;
  left: auto;
  margin: auto 0 auto auto;
  width: 6px;
  height: 6px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(135deg);
}
@media screen and (min-width: 769px) {
  .anav ul li a:hover::after {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
  }
}

/* ==========================================================================
Pagenation
========================================================================== */
.pagination {
  margin-bottom: 60px;
}
.pagination ul {
  display: flex;
  justify-content: center;
  gap: 15px;
  width: 100%;
}
.pagination ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #eeedeb;
  border-radius: 15px;
  overflow: hidden;
  color: #333333;
  font-weight: bold;
  font-size: 1.2rem;
}
.pagination ul li span {
  font-weight: bold;
}
.pagination ul li:has(.current) {
  background: #000;
  color: #fff;
}
.pagination ul li:has(.dots) {
  background: none;
  padding: 0;
}
.pagination ul li:has(.next), .pagination ul li:has(.prev) {
  background: none;
  width: 40px;
  height: 30px;
}
.pagination ul li:has(.prev) {
  background: none;
  width: 30px;
  height: 30px;
  background: url(../images/common/arrow-prev.svg) center center no-repeat;
}
.pagination ul li:has(.next) {
  background: none;
  width: 30px;
  height: 30px;
  background: url(../images/common/arrow-next.svg) center center no-repeat;
}
.pagination ul li a {
  display: block;
  padding: 5px;
}

.searchbox {
  border: 2px solid #999;
  width: 100%;
  height: 40px;
  border-radius: 20px;
  margin: 0 auto 15px;
}
@media screen and (min-width: 769px) {
  .searchbox {
    width: 80%;
    max-width: 400px;
  }
}
.searchbox .searchbox-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding-right: 40px;
  position: relative;
  /* Chrome, Safari, Edgeの×ボタンを非表示 */
}
.searchbox .searchbox-inner .searchicon {
  display: block;
  position: absolute;
  left: auto;
  right: 14px;
  top: 0;
  bottom: 0;
  margin: auto 0 auto auto;
  width: 24px;
  height: 24px;
  background: url(../images/common/ico-search.svg) center center no-repeat;
  background-size: contatin;
  border: none;
  outline: none;
}
@media screen and (min-width: 769px) {
  .searchbox .searchbox-inner .searchicon:hover {
    opacity: 0.5;
  }
}
.searchbox .searchbox-inner input {
  display: flex;
  align-items: center;
  border: none;
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  font-size: 1.6rem;
  line-height: 18px;
  outline: none;
  background: transparent;
}
.searchbox .searchbox-inner input::placeholder {
  font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
  .searchbox .searchbox-inner input::placeholder {
    font-size: 1.4rem;
  }
}
.searchbox .searchbox-inner input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.l-searchbox {
  margin-bottom: 30px;
}
.l-searchbox p {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.4;
}

/* ==========================================================================
List
========================================================================== */
.article-list article,
.ranking-list article {
  position: relative;
  height: 100%;
}
.article-list article .thumb,
.ranking-list article .thumb {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  padding-top: 75%;
  margin-bottom: 15px;
}
.article-list article .thumb img,
.ranking-list article .thumb img {
  transition: all 0.25s ease-out;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-list article .txt p,
.ranking-list article .txt p {
  margin-bottom: 10px;
  font-size: 1.4rem;
  line-height: 1.2;
}
.article-list article .txt p span.cat,
.ranking-list article .txt p span.cat {
  font-weight: bold;
}
.article-list article .txt h4,
.ranking-list article .txt h4 {
  position: relative;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
}
.article-list article .txt h4 span,
.ranking-list article .txt h4 span {
  font-weight: bold;
}
.article-list article .txt h4::before,
.ranking-list article .txt h4::before {
  content: "";
  display: block;
  position: absolute;
  left: -10px;
  top: -6px;
  width: 34px;
  height: 32px;
  z-index: -1;
}
.article-list article:hover .thumb img,
.ranking-list article:hover .thumb img {
  transform: scale(1.08);
}

.ranking-list article {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.ranking-list article .thumb {
  position: relative;
  border-radius: 10px 10px 0 0;
}
.ranking-list article .txt {
  padding: 0 5% 5%;
}
.ranking-list > div .thumb {
  position: relative;
}
.ranking-list > div .thumb::before {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 0 0 10px 0;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .ranking-list > div .thumb::before {
    width: 60px;
    height: 60px;
  }
}

.article-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .article-list {
    padding: 0 2.5%;
  }
}
.article-list > li {
  width: 47.5%;
  margin-bottom: 30px;
  position: relative;
}
.article-list > li a {
  display: block;
}
.article-list > li a article.article-recipe .txt h4::before {
  background: url(../images/common/mrk-recipe.png) center center no-repeat;
  background-size: contain;
}
.article-list > li a article.article-column .txt h4::before {
  background: url(../images/common/mrk-column.png) center center no-repeat;
  background-size: contain;
}
.article-list > li a article.article-garden .txt h4::before {
  background: url(../images/common/mrk-saien.png) center center no-repeat;
  background-size: contain;
}
.article-list > li a article.article-entry .txt h4::before {
  background: url(../images/common/mrk-entry.png) center center no-repeat;
  background-size: contain;
}
.article-list > li a article.article-jatown .txt h4::before, .article-list > li a article.article-plaza .txt h4::before {
  background: url(../images/common/mrk-column.png) center center no-repeat;
  background-size: contain;
}
@media screen and (min-width: 769px) {
  .article-list::before {
    content: "";
    display: block;
    width: 23%;
    order: 1;
  }
  .article-list::after {
    content: "";
    display: block;
    width: 23%;
  }
  .article-list > li {
    width: 23%;
  }
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.tag-list li {
  width: auto;
}
.tag-list li a {
  display: block;
  padding: 5px 8px;
  font-size: 1.2rem;
  background: #eeedeb;
  border-radius: 4px;
}

/* ==========================================================================
Ranking Slider (Swiper)
========================================================================== */
.ranking-box {
  position: relative;
  overflow: visible;
  background: #eeedeb;
  padding: 30px 0 45px;
  border-radius: 8px;
}
@media screen and (min-width: 769px) {
  .ranking-box {
    padding: 30px 0 60px;
  }
}
.ranking-box::after {
  content: "";
  display: block;
  position: absolute;
  right: -15px;
  bottom: -20px;
  width: 130px;
  height: 65px;
}
.ranking-box.ranking-box-recipe {
  background: #fef2e3;
}
.ranking-box.ranking-box-recipe::after {
  background: url(../images/top/slide-cat-recipe.svg) center center no-repeat;
  background-size: 100% auto;
}
.ranking-box.ranking-box-garden {
  background: #eef3e1;
}
.ranking-box.ranking-box-garden::after {
  background: url(../images/top/slide-cat-saien.svg) center center no-repeat;
  background-size: 100% auto;
}
.ranking-box.ranking-box-column {
  background: #fdebec;
}
.ranking-box.ranking-box-column::after {
  background: url(../images/top/slide-cat-column.svg) center center no-repeat;
  background-size: 100% auto;
}
.ranking-box h3 {
  text-align: center;
  width: auto;
  height: 20px;
  margin-bottom: 20px;
}
.ranking-box h3 img {
  width: auto;
  height: 100%;
}
.ranking-box .ranking-slider {
  padding-bottom: 60px;
  padding-right: 100px;
}
@media screen and (min-width: 769px) {
  .ranking-box .ranking-slider {
    padding-right: 120px;
  }
}
.ranking-box .ranking-slider .swiper-wrapper {
  display: flex;
}
.ranking-box .ranking-slider .swiper-slide {
  position: relative;
  height: auto;
  padding-top: 6px;
  padding-left: 0;
}
.ranking-box .ranking-slider .swiper-slide .rank-badge {
  top: 0;
}
.ranking-box .ranking-slider .swiper-slide::after {
  position: absolute;
  display: block;
  content: "";
  right: -10px;
  bottom: -10px;
  width: 95%;
  height: 95%;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid transparent;
  border-top: 2px solid transparent;
  border-radius: 0 0 10px 0;
  z-index: -1;
}
.ranking-box .ranking-slider .swiper-slide a {
  display: block;
  height: 100%;
}
.ranking-box .ranking-slider .swiper-slide:first-child {
  margin-left: 15px;
}
@media screen and (min-width: 769px) {
  .ranking-box .ranking-slider .swiper-slide:first-child {
    margin-left: 30px;
  }
}
.ranking-box #ranking-slider-recipe.ranking-slider .swiper-slide::after {
  border-right: 2px solid #f9bf73;
  border-bottom: 2px solid #f9bf73;
}
.ranking-box #ranking-slider-garden.ranking-slider .swiper-slide::after {
  border-right: 2px solid #a9c469;
  border-bottom: 2px solid #a9c469;
}
.ranking-box #ranking-slider-column.ranking-slider .swiper-slide::after {
  border-right: 2px solid #e60012;
  border-bottom: 2px solid #e60012;
}
.ranking-box .ranking-slider .swiper-button-prev,
.ranking-box .ranking-slider .swiper-button-next {
  top: auto;
  bottom: 0;
}
.ranking-box .ranking-slider .swiper-button-prev::after,
.ranking-box .ranking-slider .swiper-button-next::after {
  font-size: 0;
  line-height: 1;
  content: "";
  display: block;
  width: 70px;
  height: 20px;
}
.ranking-box .ranking-slider .swiper-button-prev::after {
  background: url(../images/common/arrow-prev.svg) center center no-repeat;
  background-size: contain;
}
.ranking-box .ranking-slider .swiper-button-next::after {
  background: url(../images/common/arrow-next.svg) center center no-repeat;
  background-size: contain;
}
.ranking-box #ranking-slider-recipe.ranking-slider .swiper-button-prev::after {
  background: url(../images/common/arrow-prev-recipe.svg) center center no-repeat;
  background-size: contain;
}
.ranking-box #ranking-slider-recipe.ranking-slider .swiper-button-next::after {
  background: url(../images/common/arrow-next-recipe.svg) center center no-repeat;
  background-size: contain;
}
.ranking-box #ranking-slider-garden.ranking-slider .swiper-button-prev::after {
  background: url(../images/common/arrow-prev-saien.svg) center center no-repeat;
  background-size: contain;
}
.ranking-box #ranking-slider-garden.ranking-slider .swiper-button-next::after {
  background: url(../images/common/arrow-next-saien.svg) center center no-repeat;
  background-size: contain;
}
.ranking-box #ranking-slider-column.ranking-slider .swiper-button-prev::after {
  background: url(../images/common/arrow-prev-column.svg) center center no-repeat;
  background-size: contain;
}
.ranking-box #ranking-slider-column.ranking-slider .swiper-button-next::after {
  background: url(../images/common/arrow-next-column.svg) center center no-repeat;
  background-size: contain;
}
.ranking-box #ranking-slider-recipe .swiper-pagination-bullet,
.ranking-box #ranking-slider-garden .swiper-pagination-bullet,
.ranking-box #ranking-slider-column .swiper-pagination-bullet {
  background: #fff;
  opacity: 1;
}
.ranking-box #ranking-slider-recipe .swiper-pagination-bullet-active {
  background: #f9bf73;
}
.ranking-box #ranking-slider-garden .swiper-pagination-bullet-active {
  background: #a9c469;
}
.ranking-box #ranking-slider-column .swiper-pagination-bullet-active {
  background: #e60012;
}
.ranking-box .btn-box {
  margin-top: 30px;
}

/* ==========================================================================
Pick Up
========================================================================== */
.l-pickup h3,
.l-backnumber h3 {
  text-align: center;
  width: auto;
  height: 28px;
  margin-bottom: 30px;
}
.l-pickup h3 img,
.l-backnumber h3 img {
  width: auto;
  height: 100%;
}

.l-pickup {
  background: url(../images/common/deco-pickup.png) no-repeat left 20px/150px auto, url(../images/common/bg-pickup.webp) no-repeat center center/cover;
  padding: 30px 0;
}

.l-archive {
  background: url(../images/common/deco-archive.png) no-repeat left 20px/165px auto, #e9f0d9;
  padding: 30px 0;
}

.pickup-list {
  display: flex;
  flex-direction: column;
  gap: 30px 0;
}
@media screen and (min-width: 769px) {
  .pickup-list {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 30px;
  }
  .pickup-list li {
    width: 45%;
  }
}
.pickup-list li a {
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.pickup-list li a article {
  display: flex;
}
.pickup-list li a article .thumb {
  width: 35%;
  align-items: center;
}
.pickup-list li a article .thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.pickup-list li a article .txt {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 30px 2.5% 30px 2.5%;
}
.pickup-list li a article .txt p {
  margin-bottom: 10px;
  font-size: 1.4rem;
}
.pickup-list li a article .txt p .cat {
  font-weight: bold;
}
.pickup-list li a article .txt h4 {
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.4;
}

/* ==========================================================================
Backnumber
========================================================================== */
.l-backnumber {
  background: #fff;
  padding: 30px 0;
}
.l-backnumber p.lead {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 30px;
}
.l-backnumber .backnumber-list {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
  .l-backnumber .backnumber-list {
    gap: 30px;
  }
}
.l-backnumber .backnumber-list li img {
  border: 1px solid #eee;
}
@media screen and (max-width: 768px) {
  .l-backnumber .backnumber-list li:nth-child(4), .l-backnumber .backnumber-list li:nth-child(5), .l-backnumber .backnumber-list li:nth-child(6) {
    display: none;
  }
}

/* ==========================================================================
Tags
========================================================================== */
.l-tags {
  margin-bottom: 60px;
}
.l-tags ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}
.l-tags ul li a {
  position: relative;
  display: flex;
  align-items: center;
  background: #eeedeb;
  padding: 3px 8px 6px 3px;
  line-height: 1;
  border-radius: 3px;
  transform: scale(1);
  transition: all 0.25s ease-out;
}
.l-tags ul li a::before {
  content: "#";
  display: inline-block;
  font-weight: bold;
  color: #333;
  margin-right: 1px;
  margin-left: 2px;
}
@media screen and (min-width: 769px) {
  .l-tags ul li a:hover {
    background: #666666;
    color: #fff;
    transform: scale(1.1);
  }
  .l-tags ul li a:hover::before {
    color: #fff;
  }
}

.l-tags.popular-tags {
  margin-bottom: 30px;
}
.l-tags.popular-tags .l-inner h4 {
  text-align: center;
  margin-bottom: 15px;
}
@media screen and (min-width: 769px) {
  .l-tags.popular-tags .l-inner {
    display: flex;
    justify-content: center;
  }
  .l-tags.popular-tags .l-inner h4 {
    white-space: nowrap;
    width: 150px;
    padding: 3px 3px 6px 3px;
    margin-bottom: 0;
  }
  .l-tags.popular-tags .l-inner ul {
    width: auto;
  }
}

/* ==========================================================================
Related Post
========================================================================== */
.l-related h2 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 30px;
}
.l-related .article-list.related-list {
  justify-content: center;
  gap: 30px;
}
.l-related .article-list.related-list::before, .l-related .article-list.related-list::after {
  content: none;
}

/* ==========================================================================
call for Button
========================================================================== */
.l-call-for {
  text-align: center;
}
.l-call-for p {
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.4rem;
}

/* ==========================================================================
SNS
========================================================================== */
.sns {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.sns li {
  width: 40px;
}
.sns li a {
  display: block;
}

/* ==========================================================================
Article Footer
========================================================================== */
.article-footer {
  padding-bottom: 10px;
}
.article-footer .update {
  text-align: right;
  font-size: 1.6rem;
}

/* ==========================================================================

  ========================================================================== */
.trig {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.bgextend {
  position: relative;
}

.bgextend.is-show::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /*伸びる背景色の設定*/
  z-index: -1;
  left: -2px;
  top: -1px;
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  100% {
    transform-origin: left;
    transform: scaleX(1);
  }
}
/* ==========================================================================
  Scroll Animation
  ========================================================================== */
.anim {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.anim-fadeout {
  animation: fadeIn 0.2s 0.2s both ease-out;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}
.anim-fadein {
  opacity: 0;
}

.anim-fadein.is-show {
  animation: fadeIn 0.3s 0.1s both ease-out;
}

@keyframes fadeIn {
  0% {
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.anim-fadeinBlur {
  opacity: 0;
}

.anim-fadeinBlur.is-show {
  opacity: 0;
  animation: fadeIn 2s 0.1s both ease-out;
}

@keyframes fadeInBlur {
  0% {
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
.anim-fadeinUp {
  opacity: 0;
  filter: blur(10px);
}

.anim-fadeinUp.is-show {
  animation: fadeInUp 0.9s 0.2s both ease-out;
}

.anim-fadeinUp.anim-delay2.is-show {
  animation: fadeInUp 0.9s 0.4s both ease-out;
}

.anim-fadeinUp.anim-delay3.is-show {
  animation: fadeInUp 0.9s 0.6s both ease-out;
}

.anim-fadeinUp.anim-delay4.is-show {
  animation: fadeInUp 0.9s 0.8s both ease-out;
}

.anim-fadeinUp.anim-delay5.is-show {
  animation: fadeInUp 0.9s 1s both ease-out;
}

.anim-fadeinUp.anim-delay6.is-show {
  animation: fadeInUp 0.9s 1.2s both ease-out;
}

@keyframes fadeInUp {
  0% {
    transform: translate(0, 10px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}
.anim-slidein-l {
  opacity: 0;
}

.anim-slidein-l.is-show {
  animation: slideInL 0.8s 0.2s both ease-out;
}

@keyframes slideInL {
  0% {
    transform: translate(-10vw, 0);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}
.anim-slidein-r {
  opacity: 0;
}

.anim-slidein-r.is-show {
  animation: slideInR 0.8s 0.2s both ease-out;
}

@keyframes slideInR {
  0% {
    transform: translate(10vw, 0);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}
.anim-slideout-l.is-out {
  animation: slideOutL 1.5s 0.1s both ease-out;
}

@keyframes slideOutL {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(-100vw, 0);
  }
}
.anim-slideout-r.is-out {
  animation: slideOutR 1.5s 0.1s both ease-out;
}

@keyframes slideOutR {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(100vw, 0);
  }
}
/* ==========================================================================
HOME
========================================================================== */
/* ---------------
Block
------------------ */
.l-articles {
  margin-bottom: 60px;
}
@media screen and (min-width: 769px) {
  .l-articles {
    margin-bottom: 60px;
  }
}

.l-ranking {
  padding: 60px 0 60px;
  margin-bottom: 0;
  background: url(../images/common/deco-ranking.png) no-repeat left 20px/150px auto, url(../images/common/pat-stripe.svg) left top/100% auto, #eeedeb;
}
.l-ranking h2 {
  text-align: center;
  width: auto;
  height: 28px;
  margin-bottom: 30px;
}
.l-ranking h2 img {
  width: auto;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .l-ranking {
    margin-bottom: 0;
  }
  .l-ranking .ranking-wrap {
    display: flex;
    justify-content: space-between;
  }
  .l-ranking .ranking-wrap > div {
    width: 32%;
  }
}
@media screen and (max-width: 768px) {
  .l-ranking .ranking-wrap > div:not(:last-child) {
    margin-bottom: 30px;
  }
}

.l-pickup,
.l-archive {
  padding: 60px 0;
}
@media screen and (min-width: 769px) {
  .l-pickup,
.l-archive {
    padding: 60px 0;
  }
}

.l-backnumber {
  padding: 60px 0;
}
@media screen and (min-width: 769px) {
  .l-backnumber {
    padding: 60px 0;
  }
}

/* ==========================================================================
Article
========================================================================== */
/* ---------------
Common
------------------ */
.l-main-article .red {
  color: red;
}
.l-main-article .l-title {
  padding: 30px 0;
}
.l-main-article .l-title .catname, .l-main-article .l-title .explain {
  font-size: 1.4rem;
}
.l-main-article .l-title .catname {
  display: inline-block;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
  margin-bottom: 0.75em;
  font-weight: bold;
}
.l-main-article .l-title .explain {
  display: block;
  margin-bottom: 20px;
}
.l-main-article .l-title h1 {
  font-size: 2.4rem;
  line-height: 1.4;
  border-left: 4px solid #000;
  padding-left: 20px;
  text-align: left;
}
.l-main-article .l-title h1 span {
  font-weight: bold;
  display: block;
  font-size: 1.6rem;
}
.l-main-article .l-title h1 small {
  font-size: 1rem;
}
.l-main-article .l-title .credit {
  margin-top: 10px;
  padding-left: 24px;
  line-height: 1.4;
}
.l-main-article.l-main-recipe .catname {
  border-bottom: 1px solid #f9bf73;
}
.l-main-article.l-main-recipe .l-title h1 {
  border-left: 4px solid #f9bf73;
}
.l-main-article.l-main-garden .catname {
  border-bottom: 1px solid #a9c469;
}
.l-main-article.l-main-garden .l-title h1 {
  border-left: 4px solid #a9c469;
}
.l-main-article.l-main-column .catname {
  border-bottom: 1px solid #e60012;
}
.l-main-article.l-main-column .l-title h1 {
  border-left: 4px solid #e60012;
}
.l-main-article.l-main-entry .catname {
  border-bottom: 1px solid #774e12;
}
.l-main-article.l-main-entry .l-title h1 {
  border-left: 4px solid #774e12;
}
.l-main-article.l-main-jatown .catname, .l-main-article.l-main-plaza .catname {
  border-bottom: 1px solid #e60012;
}
.l-main-article.l-main-jatown .l-title h1, .l-main-article.l-main-plaza .l-title h1 {
  border-left: 4px solid #e60012;
}
.l-main-article .l-visual {
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
  .l-main-article .l-visual {
    padding: 0 5%;
    margin-bottom: 30px;
  }
}
.l-main-article .l-visual figure {
  position: relative;
  width: 100%;
}
.l-main-article .l-visual figure picture {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%;
}
@media screen and (min-width: 769px) {
  .l-main-article .l-visual figure picture {
    padding-top: 75%;
  }
}
.l-main-article .l-visual figure picture img {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-main-article .l-visual figure figcaption {
  position: relative;
  display: block;
  width: 100%;
  padding: 5px 2.5%;
  font-size: 1.4rem;
  line-height: 1.4;
}
.l-main-article .l-visual figure figcaption.credit {
  font-size: 1.2rem;
  text-align: right;
}
.l-main-article .l-visual p.extra {
  width: 100%;
  padding: 5px 2.5%;
  font-size: 1.4rem;
  line-height: 1.4;
}
.l-main-article .l-content .txt-l {
  text-align: left;
}
.l-main-article .l-content .txt-r {
  text-align: right;
}
.l-main-article .l-content .txt-c {
  text-align: center;
}
.l-main-article .l-content p a {
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  .l-main-article .l-content p a:hover {
    text-decoration: none;
  }
}
.l-main-article .l-content h2 {
  font-size: 2.4rem;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 2px solid #000;
}
.l-main-article .l-content h3 {
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 2px solid #000;
}
.l-main-article .l-content section:not(:last-of-type) {
  margin-bottom: 30px;
}
.l-main-article .l-content figure {
  margin-bottom: 30px;
}
.l-main-article .l-content figure img {
  display: block;
}
.l-main-article .l-content figure figcaption {
  padding: 5px 0;
  font-size: 1.4rem;
  line-height: 1.4;
}
.l-main-article .l-content figure figcaption a {
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  .l-main-article .l-content figure figcaption a:hover {
    text-decoration: none;
  }
}
.l-main-article .l-content figure figcaption.credit {
  font-size: 1.2rem;
  text-align: right;
}
.l-main-article .l-content figure:not(:first-of-type) {
  margin-top: 30px;
}
.l-main-article .l-content .img-l {
  margin: 0 auto 0 0;
}
.l-main-article .l-content .img-r {
  margin: 0 0 0 auto;
}
.l-main-article .l-content .img-c {
  margin: 0 auto;
}
.l-main-article .l-content .img-v {
  max-width: 66.67%;
  margin: 0 auto;
}
.l-main-article .l-content .img-small {
  max-width: 50%;
  margin: 0 auto;
}
.l-main-article .l-content .img-medium {
  max-width: 66.67%;
  margin: 0 auto;
}
.l-main-article .l-content .img-large {
  max-width: 75%;
  margin: 0 auto;
}
.l-main-article .l-content .img-full {
  max-width: 100%;
  margin: 0 auto;
}
.l-main-article .l-tags {
  margin-top: 60px;
}
.l-main-article .btn-wrap-back {
  padding-bottom: 60px;
}

/* ---------------
補足情報
------------------ */
.l-main .l-intro p, .l-main .article-intro p {
  font-size: 1.8rem;
  line-height: 1.8;
}
.l-main .l-info {
  border: 2px solid #000;
  margin: 60px auto 0;
  padding: 15px;
}
@media screen and (min-width: 769px) {
  .l-main .l-info {
    padding: 30px;
  }
}
.l-main .l-info h4, .l-main .l-info h5 {
  margin-top: 0;
}
.l-main .l-info .info-wrap {
  display: flex;
  flex-direction: column;
}
.l-main .l-info .info-wrap .ph {
  order: 1;
  margin-bottom: 30px;
}
.l-main .l-info .info-wrap .ph figure {
  text-align: center;
  margin-bottom: 0;
}
.l-main .l-info .info-wrap .ph figure img {
  width: 66.67%;
  margin: 0 auto;
}
.l-main .l-info .info-wrap .ph figure figcaption {
  padding: 5px 0;
  font-size: 1.4rem;
  line-height: 1.4;
}
.l-main .l-info .info-wrap .txt {
  order: 2;
}
.l-main .l-info .info-wrap .img {
  order: 3;
  width: 100%;
  margin: 30px auto 0;
}
.l-main .l-info .info-wrap .img figure {
  max-width: 66.67%;
  margin: 0 auto 0;
}
@media screen and (min-width: 769px) {
  .l-main .l-info .info-wrap {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .l-main .l-info .info-wrap .ph {
    width: 40%;
    margin-right: 30px;
    margin-bottom: 0;
  }
  .l-main .l-info .info-wrap .ph figure {
    margin-bottom: 0;
  }
  .l-main .l-info .info-wrap .ph figure img {
    width: 100%;
  }
  .l-main .l-info .info-wrap .ph figure figcaption {
    text-align: left;
  }
  .l-main .l-info .info-wrap .txt {
    flex: 1;
  }
  .l-main .l-info .info-wrap .img {
    width: 100%;
  }
  .l-main .l-info .info-wrap .img figure {
    max-width: 33.33%;
  }
}

/* ---------------
Column (コラム系)
------------------ */
.l-main-column .l-intro .map {
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
  .l-main-column .l-intro .map {
    max-width: 66.67%;
    margin: 0 auto 30px;
  }
}
.l-main-column .l-info h4 {
  margin-top: 0;
}
.l-main-column .article-furusato .l-visual figure.img figcaption {
  text-align: right;
}
.l-main-column .article-furusato .l-info .txt {
  order: 1;
  margin-bottom: 30px;
}
.l-main-column .article-furusato .l-info .ph {
  order: 2;
  margin-bottom: 0;
}
.l-main-column .article-essay .alink {
  position: relative;
  font-size: 1.6rem;
}
.l-main-column .article-essay .alink::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: -15px;
  margin: auto;
  width: 6px;
  height: 6px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
}
.l-main-column .article-essay .l-info .ph figure figcaption {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .l-main-column .article-essay .l-info .ph figure figcaption {
    text-align: right;
  }
}
.l-main-column .article-essay .l-info .img img {
  border: 1px solid #ccc;
}

/* ---------------
Recipe（料理系）
------------------ */
.l-main-recipe .l-materials {
  margin-bottom: 60px;
}
.l-main-recipe .l-materials h3 span {
  margin-left: 15px;
}
.l-main-recipe .l-materials .materials-list > li {
  padding: 15px 0;
  border-bottom: 1px solid #000;
}
.l-main-recipe .l-materials .materials-list > li ul {
  margin-top: -1.75em;
  padding-left: 2em;
  width: 100%;
}
.l-main-recipe .l-materials .materials-list > li ul li {
  width: 100%;
  padding-top: 15px;
  padding-bottom: 0;
}
.l-main-recipe .l-materials .materials-list > li ul li:not(:last-child) {
  border-bottom: 1px dotted #000;
  padding: 10px 0;
}
.l-main-recipe .l-materials ul li {
  display: flex;
  justify-content: space-between;
}
.l-main-recipe .l-materials ul li.set {
  flex-direction: column;
}
.l-main-recipe .l-materials ul li span {
  font-size: 1.6rem;
  line-height: 1.4 !important;
}
.l-main-recipe .l-materials ul li span.name.set {
  width: 100%;
  background: red;
}
.l-main-recipe .l-materials ul li span.name {
  width: 65%;
}
.l-main-recipe .l-materials ul li span.quantity {
  flex: 1;
  text-align: right;
}
.l-main-recipe .l-materials ul .set-long ul {
  margin-top: 0;
}
.l-main-recipe .l-flow {
  margin-bottom: 60px;
}
.l-main-recipe .l-flow .flow-list > li {
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 2.5em;
  border-bottom: 1px solid #000;
}
.l-main-recipe .l-flow .flow-list > li .flow-wrap {
  display: flex;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .l-main-recipe .l-flow .flow-list > li .flow-wrap {
    flex-direction: column;
  }
}
@media screen and (min-width: 769px) {
  .l-main-recipe .l-flow .flow-list > li .flow-wrap {
    justify-content: space-between;
  }
  .l-main-recipe .l-flow .flow-list > li .flow-wrap figure {
    width: 45%;
    display: flex;
    justify-content: center;
  }
  .l-main-recipe .l-flow .flow-list > li .flow-wrap p {
    width: 50%;
  }
}
.l-main-recipe .l-flow .flow-list > li figure {
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .l-main-recipe .l-flow .flow-list > li figure {
    max-height: 400px;
    width: auto;
  }
}
.l-main-recipe .l-flow .flow-list > li figure img {
  width: auto;
  height: 100%;
}
.l-main-recipe .l-flow .flow-list > li h4 {
  padding: 0;
  margin: 0 0 0.5em;
  line-height: 1.2;
  color: #e60012;
}
.l-main-recipe .l-flow .flow-list > li p {
  position: relative;
  line-height: 1.8;
}
.l-main-recipe .l-flow .flow-list > li p b {
  font-weight: bold;
}
.l-main-recipe .l-flow .flow-list > li p i {
  font-style: italic;
}
.l-main-recipe .l-flow .flow-list > li p .red {
  color: #e60012;
}
.l-main-recipe .l-flow .flow-list > li::before {
  position: absolute;
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  left: 5px;
  top: 16px;
  font-weight: bold;
  font-size: 1.8rem;
  color: #e60012;
}
.l-main-recipe .l-flow .flow-list > li:nth-child(1)::before {
  content: "1";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(2)::before {
  content: "2";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(3)::before {
  content: "3";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(4)::before {
  content: "4";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(5)::before {
  content: "5";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(6)::before {
  content: "6";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(7)::before {
  content: "7";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(8)::before {
  content: "8";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(9)::before {
  content: "9";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(10)::before {
  content: "10";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(11)::before {
  content: "11";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(12)::before {
  content: "12";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(13)::before {
  content: "13";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(14)::before {
  content: "14";
}
.l-main-recipe .l-flow .flow-list > li:nth-child(15)::before {
  content: "15";
}
.l-main-recipe .l-flow .flow-list .point {
  margin-top: 30px;
  padding: 15px 0;
}
.l-main-recipe .l-flow .flow-list .point h5 {
  color: #777;
  font-size: 1.8rem;
  margin-top: 0;
  text-align: center;
}
.l-main-recipe .l-flow .flow-list .point h5::before, .l-main-recipe .l-flow .flow-list .point h5::after {
  display: inline-block;
}
.l-main-recipe .l-flow .flow-list .point h5::before {
  content: "＼";
}
.l-main-recipe .l-flow .flow-list .point h5::after {
  content: "／";
}
.l-main-recipe .l-flow .flow-list .point p {
  margin-bottom: 30px;
}
.l-main-recipe .l-flow .flow-list .point img {
  display: block;
  margin-bottom: 30px;
}
.l-main-recipe .l-flow .memo {
  margin-top: 30px;
}
.l-main-recipe .l-flow .memo h6 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #e60012;
}

/* ---------------
Garden（菜園系）
------------------ */
.l-main-article.l-main-garden h3 {
  margin-bottom: 30px;
}
.l-main-article.l-main-garden h3 small {
  font-size: 80%;
}
.l-main-article.l-main-garden .l-content table th {
  background: #a9c469;
}
.l-main-article.l-main-garden .article-saien .l-intro {
  padding-top: 15px;
  padding-bottom: 30px;
  border-bottom: 1px dotted #000;
}
.l-main-article.l-main-garden .article-saien .l-content section .saien-box {
  margin-bottom: 30px;
}
.l-main-article.l-main-garden .article-saien .l-content section .saien-box .img figure {
  margin: 0 auto;
}
.l-main-article.l-main-garden .article-saien .l-content section .saien-box .img .img-s {
  width: 75%;
}
.l-main-article.l-main-garden .article-saien .l-content section .saien-box .img .img-xs {
  width: 50%;
}
@media screen and (min-width: 769px) {
  .l-main-article.l-main-garden .article-saien .l-content section figure {
    margin: 0 0 15px;
    padding: 0;
  }
}
.l-main-article.l-main-garden .article-saien .l-info h4 {
  font-size: 2rem;
}
.l-main-article.l-main-garden .article-mysaien .l-content section .mysaien-box .txt {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .l-main-article.l-main-garden .article-mysaien .l-content section .mysaien-box .img {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
}
@media screen and (min-width: 769px) {
  .l-main-article.l-main-garden .article-mysaien .l-content section .mysaien-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }
  .l-main-article.l-main-garden .article-mysaien .l-content section .mysaien-box .img {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .l-main-article.l-main-garden .article-mysaien .l-content section .mysaien-box .img figure img {
    max-width: 285px;
    max-height: 285px;
  }
  .l-main-article.l-main-garden .article-mysaien .l-content section .mysaien-box .txt {
    width: 40%;
    margin-bottom: 0;
  }
}
.l-main-article.l-main-garden .article-mysaien .l-content section figure {
  margin: 0 auto !important;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .l-main-article.l-main-garden .article-mysaien .l-content section figure {
    margin: 0;
    padding: 0;
  }
}
.l-main-article.l-main-garden .article-mysaien .l-content section figure img {
  flex: 1;
}
.l-main-article.l-main-garden .article-mysaien .l-content section figure img.img-v {
  max-width: 300px;
}
.l-main-article.l-main-garden .article-saienqa .l-title h1 i,
.l-main-article.l-main-garden .article-kihon-qa .l-title h1 i {
  display: inline-block;
  margin-right: 15px;
  font-size: 3rem;
  font-weight: bold;
  font-style: normal;
  color: #a9c469;
  line-height: 1;
  vertical-align: text-top;
}
.l-main-article.l-main-garden .article-saienqa .l-content::before,
.l-main-article.l-main-garden .article-kihon-qa .l-content::before {
  content: "A.";
  display: block;
  padding: 0 0 10px;
  margin: 0 2.5% 15px;
  font-weight: bold;
  color: red;
  font-size: 3rem;
  vertical-align: text-top;
  line-height: 1;
  border-bottom: 1px dotted #000;
  padding: 0 0 10px 20px;
  border-bottom: 1px dotted red;
  border-left: 4px solid red;
}
@media screen and (min-width: 769px) {
  .l-main-article.l-main-garden .article-saienqa .l-content::before,
.l-main-article.l-main-garden .article-kihon-qa .l-content::before {
    padding: 0 0 10px;
    margin: 0 5% 15px;
    padding: 0 0 10px 20px;
  }
}

/* ---------------
募集記事
------------------ */
.l-main-entry .l-theme .theme-box {
  background: #eeedeb;
  padding: 15px;
  border-radius: 8px;
  margin-top: 30px;
}
.l-main-entry .l-theme h4 {
  font-size: 1.8rem;
}
.l-main-entry .l-theme h5 {
  margin-top: 0;
  font-style: 1.8rem;
}
.l-main-entry .l-theme .red {
  color: #e60012;
}
.l-main-entry .l-theme p span {
  display: block;
}
.l-main-entry .l-theme p span.theme {
  font-size: 2rem;
}
.l-main-entry .l-theme p span.theme strong {
  font-weight: bold;
}
.l-main-entry .l-theme p.notes {
  font-size: 1.2rem;
}

/* ---------------
Apron PLAZA
------------------ */
.l-main-plaza .postcard {
  margin-top: 30px;
}
.l-main-plaza .postcard ul {
  overflow: hidden;
  text-align: center;
  padding: 30px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.l-main-plaza .postcard ul li {
  margin: 0 auto 0;
  width: 45%;
}
.l-main-plaza .postcard ul li.tate {
  width: 45%;
}
.l-main-plaza .postcard ul li.yoko {
  width: 65%;
}
.l-main-plaza .postcard ul li:last-child {
  margin: 0 auto 0;
}
.l-main-plaza .postcard ul li figure {
  margin-bottom: 15px;
}
.l-main-plaza .postcard ul li figure img {
  width: 100%;
  height: auto;
  border: 1px solid #000;
  vertical-align: middle;
}
.l-main-plaza .postcard ul li figure figcaption {
  margin-top: 5px;
}
@media screen and (min-width: 769px) {
  .l-main-plaza .postcard ul {
    gap: 30px;
  }
  .l-main-plaza .postcard ul li.tate {
    width: 30%;
  }
  .l-main-plaza .postcard ul li.yoko {
    width: 45%;
  }
}

/* ---------------
Present
------------------ */
.l-main-present p.period {
  text-align: center;
  margin-top: 30px;
}

/* ---------------
わが家の菜園
------------------ */
.article-mysaien .mysaien-entry dl dd {
  display: flex;
}

.article-mysaien .mysaien-entry dl dd .img {
  width: auto;
  margin-bottom: 15px;
  overflow: hidden;
}

.article-mysaien .mysaien-entry dl dd .img figure {
  display: block;
  width: 250px;
  margin-bottom: 15px;
}

.article-mysaien .mysaien-entry dl dd .img figure:last-child {
  margin-bottom: 0;
}

.article-mysaien .mysaien-entry dl dd .img figure img {
  width: 100%;
  height: auto;
}

.article-mysaien .mysaien-entry dl dd .txt {
  flex: 1;
  padding-left: 15px;
}

.article-mysaien .mysaien-entry dl dd .txt p.date {
  text-align: right;
  padding-top: 0.5em;
  font-size: 90%;
}

/* ==========================================================================
Archive(カテゴリ、タグ、検索結果など）
========================================================================== */
/* ---------------
Common
------------------ */
.l-main-archive .l-title h1 {
  padding: 60px 0;
  font-size: 2.4rem;
  text-align: center;
  line-height: 1.2;
}
.l-main-archive .l-title h1 span {
  font-weight: bold;
}

/* ---------------
検索結果
------------------ */
.l-main-search .l-title h1 {
  padding: 60px 0;
  font-size: 2rem;
  text-align: center;
}
.l-main-search .l-title h1 span {
  font-weight: bold;
  font-size: 2.4rem;
}

/* ==========================================================================
Page
========================================================================== */
/* ---------------
Common
------------------ */
.l-main-page .l-title h1 {
  padding: 60px 0;
  font-size: 2.4rem;
  text-align: center;
}
.l-main-page .l-content p a {
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  .l-main-page .l-content p a:hover {
    text-decoration: none;
  }
}

/* ---------------
PDF download
------------------ */
.l-main-download .l-section .cover-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .l-main-download .l-section .cover-list::after {
    content: "";
    display: block;
    width: 30%;
  }
}
.l-main-download .l-section .cover-list li {
  width: 30%;
  height: auto;
  margin-bottom: 60px;
}
.l-main-download .l-section .cover-list li .cover-img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border: 1px solid #eee;
}
.l-main-download .l-section .cover-list li .cover-img img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.l-main-download .l-section .cover-list li .cover-name {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}
.l-main-download .l-section .cover-list li .btn-pdf a {
  display: block;
  padding: 0;
  line-height: 28px;
  height: 30px;
  width: 100%;
  font-size: 1rem;
  background: #fff;
  border: 1px solid #000;
  text-decoration: none;
}
.l-main-download .l-section .pdf-dl {
  display: block;
  padding: 2%;
  margin: 15px 0 0;
  border: 1px solid #eee;
}
.l-main-download .l-section .pdf-dl img {
  display: block;
  margin: 0 auto 10px;
}
.l-main-download .l-section .pdf-dl .pdf-dl-text {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .l-main-download .l-section .cover-list {
    justify-content: flex-start;
  }
  .l-main-download .l-section .cover-list li {
    width: 15%;
    height: auto;
    margin-right: 2%;
  }
  .l-main-download .l-section .cover-list li .btn-pdf a {
    line-height: 28px;
    font-size: 1.2rem;
  }
  .l-main-download .l-section .cover-list li .btn-pdf a:hover {
    background: #000;
    color: #fff;
  }
  .l-main-download .l-section .cover-list li:nth-child(6) {
    margin-right: 0;
  }
  .l-main-download .l-section .cover-list li:nth-child(12) {
    margin-right: 0;
  }
  .l-main-download .l-section .pdf-dl {
    display: flex;
    padding: 2%;
    margin: 15px 0 0;
    justify-content: space-between;
    border: 1px solid #eee;
  }
  .l-main-download .l-section .pdf-dl img {
    margin: 0;
  }
  .l-main-download .l-section .pdf-dl .pdf-dl-text {
    width: 75%;
  }
}
/* ---------------
Ranking
------------------ */
.triangle {
  width: 50px;
  height: calc(50px * sin(60deg));
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  background: red;
}

.l-main-ranking {
  position: relative;
  z-index: 0;
  background: #eeedeb;
  padding-bottom: 1px;
  margin-bottom: 60px;
}
.l-main-ranking .ranking-header h1 {
  position: relative;
  z-index: 1;
}
.l-main-ranking .ranking-header h1::before {
  content: "";
  position: absolute;
  display: block;
  width: 100px;
  height: 75px;
  left: -250px;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  margin: auto;
}
@media screen and (min-width: 769px) {
  .l-main-ranking .ranking-header h1::before {
    width: 150px;
    height: 100px;
    left: -350px;
  }
}
.l-main-ranking .ranking-header h1 img {
  width: auto;
  height: 45px;
}
@media screen and (min-width: 769px) {
  .l-main-ranking .ranking-header h1 img {
    height: 60px;
  }
}
.l-main-ranking.l-main-ranking-recipe {
  background: #fef2e3;
}
.l-main-ranking.l-main-ranking-recipe .ranking-header h1::before {
  background: url(../images/common/deco-ranking-recipe.png) center center no-repeat;
  background-size: 100% auto;
}
.l-main-ranking.l-main-ranking-garden {
  background: #eef3e1;
}
.l-main-ranking.l-main-ranking-garden .ranking-header h1::before {
  background: url(../images/common/deco-ranking-saien.png) center center no-repeat;
  background-size: 100% auto;
}
.l-main-ranking.l-main-ranking-column {
  background: #fdebec;
}
.l-main-ranking.l-main-ranking-column .ranking-header h1::before {
  background: url(../images/common/deco-ranking-column.png) center center no-repeat;
  background-size: 100% auto;
}

.rank-badge {
  position: absolute;
  z-index: 1;
  left: -6px;
  top: -6px;
  width: 50px;
  height: calc(54px * sin(60deg));
  height: 36px;
  padding: 0 0;
  font-size: 15.84px;
  border-radius: 4px;
}
.rank-badge__num {
  width: 30px;
  height: 30px;
  font-size: 16.56px;
  line-height: 27px;
  border-radius: 4px;
}
.rank-badge__num {
  display: inline-block;
  text-align: left;
  padding-left: 8px;
  color: #fff;
  font-weight: bold;
  width: 50px;
  height: calc(54px * sin(60deg));
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  background: linear-gradient(135deg, #666 0%, #666 100%);
}
.rank-badge[data-rank="1"] .rank-badge__num {
  background: linear-gradient(135deg, #e7b835 0%, #e7b835 100%);
}
.rank-badge[data-rank="1"] > span {
  transform: scale(1);
}
.rank-badge[data-rank="2"] .rank-badge__num {
  background: linear-gradient(135deg, #b7c0cc 0%, #b7c0cc 100%);
}
.rank-badge[data-rank="2"] > span {
  transform: scale(1);
}
.rank-badge[data-rank="3"] .rank-badge__num {
  background: linear-gradient(135deg, #c9884f 0%, #c9884f 100%);
}
.rank-badge[data-rank="3"] > span {
  transform: scale(1);
}
.rank-badge:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .rank-badge__num {
  background: linear-gradient(135deg, #666 0%, #666 100%);
  color: #fff;
}

.btn-wrap-rankingpage {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .btn-wrap-rankingpage {
    flex-direction: row;
    gap: 5%;
  }
}
.btn-wrap-rankingpage li:nth-child(1) {
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) {
  .btn-wrap-rankingpage li {
    width: 47.5%;
    margin-bottom: 0;
  }
}

/* ==========================================================================
Not Found
========================================================================== */
.l-notfound {
  margin-bottom: 90px;
}
.l-notfound p {
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px;
}
.l-notfound p.notfound {
  margin-bottom: 60px;
  font-size: 2rem;
}

/*# sourceMappingURL=style.css.map */