@charset "UTF-8";
html {
  height: 100vh;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

body.fixed {
  width: 100%;
}

#okazutofu #recipe {
  background-image: url("../images/tofugratin/bg_mainimage_lower.jpg");
  background-size: calc(45% + 7vw) auto, auto;
}
#okazutofu #recipe .inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 0 50px;
}
#okazutofu #recipe h2 {
  background-image: url("../images/tofugratin/resipe_title.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  margin-bottom: 30px;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 980px;
  height: calc(348px / 2);
}
#okazutofu #recipe .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  width: calc(100% + 20px * 2);
  margin-left: -20px;
}
#okazutofu #recipe .list li {
  width: 300px;
  margin: 0 20px 50px;
  position: relative;
  cursor: pointer;
}
#okazutofu #recipe .list li .ttl {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-right: 43px;
  background-image: url("../images/tofugratin/arrow_black.png");
  background-repeat: no-repeat;
  background-size: calc(26px / 2) auto;
  background-position: center right 15px;
}
#okazutofu #recipe .list li .ph {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
}
#okazutofu #recipe .list li .ph img {
  width: 100%;
}
#okazutofu #recipe .list.large li .catch {
  background-color: #f2c87d;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  height: 40px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
#okazutofu #recipe .btn {
	width: 14em;
	margin: 0 auto;
	text-align: center;
}
#okazutofu #recipe .btn a {
	width: 100%;
	line-height: 3em;
	background-color: #000000;
	display: block;
	color: #ffffff;
	text-decoration: none;
	border-radius: 3em;
	transition: all 0.4s ease;
}
#okazutofu #recipe .btn a:hover {
	background-color: #FF0004;
	color: #ffffff;
}
@media screen and (min-width: 785px) {
  #okazutofu #recipe .sp {
    display: none;
  }
  #okazutofu #recipe .list li .ph img {
    transition: transform 0.4s;
  }
  #okazutofu #recipe .list li .ttl {
    transition: background-position 0.2s;
  }
  #okazutofu #recipe .list li:hover .ph img {
    transform: scale(1.1);
  }
  #okazutofu #recipe .list li:hover .ttl {
    background-position: center right 11px;
  }
  #okazutofu #recipe .list.large {
    width: 840px;
    margin: 0 auto;
    justify-content: start;
  }
  #okazutofu #recipe .list.large li {
    width: 400px;
    margin: 0 40px 40px 0;
  }
  #okazutofu #recipe .list.large li:nth-of-type(2n) {
    margin-right: 0;
  }
}
@media screen and (min-width: 785px) and (max-width: 1099px) {
  #okazutofu #recipe .list:not(.large) {
    padding: 0 calc((100% - 300px * 2 - 40px) / 2);
  }
}
@media screen and (max-width: 784px) {
  #okazutofu #recipe {
    background-size: 133vw auto, auto;
  }
  #okazutofu #recipe .pc {
    display: none;
  }
  #okazutofu #recipe .inner {
    padding: calc(30 / 320 * 100vw) 5vw calc(30 / 320 * 100vw);
  }
  #okazutofu #recipe h2 {
    background-image: url("../images/tofugratin/resipe_title_sp.png");
    background-size: 100% auto;
    background-position: center;
    margin-bottom: calc(15 / 320 * 100vw);
    width: 100%;
    height: calc((100vw - 5vw * 2) / 565 * 218);
  }
  #okazutofu #recipe .list {
    padding: 0;
    margin: 0;
    width: 100%;
  }
  #okazutofu #recipe .list li .ttl {
    font-size: calc(12 / 320 * 100vw);
    line-height: calc(14 / 320 * 100vw);
  }
  #okazutofu #recipe .list.large {
    width: auto;
  }
  #okazutofu #recipe .list.large li {
    width: calc(240 / 320 * 100vw);
    margin: 0 auto calc(30 / 320 * 100vw);
  }
  #okazutofu #recipe .list.large li .catch {
    background-color: #f2c87d;
    color: #fff;
    font-size: calc(16 / 320 * 100vw);
    height: calc(30 / 320 * 100vw);
    border-radius: calc(6 / 320 * 100vw);
    margin-bottom: calc(10 / 320 * 100vw);
  }
  #okazutofu #recipe .list.large li .ph {
    margin-bottom: calc(10 / 320 * 100vw);
    border-radius: calc(6 / 320 * 100vw);
  }
  #okazutofu #recipe .list.large li .ttl {
    padding: 0 calc(27 / 320 * 100vw) 0 calc(10 / 320 * 100vw);
    background-size: calc(13 / 320 * 100vw) auto;
    background-position: center right calc(7.5 / 320 * 100vw);
  }
  #okazutofu #recipe .list:not(.large) li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: calc(10 / 320 * 100vw);
    border-top: 1px dotted #000;
    background-image: url("../images/tofugratin/arrow_black.png");
    background-repeat: no-repeat;
    background-size: calc(13 / 320 * 100vw) auto;
    background-position: center right calc(7 / 320 * 100vw);
  }
  #okazutofu #recipe .list:not(.large) li:last-of-type {
    border-bottom: 1px dotted #000;
  }
  #okazutofu #recipe .list:not(.large) li .ph {
    width: calc(100 / 320 * 100vw);
    margin-bottom: 0;
    border-radius: calc(3 / 320 * 100vw);
  }
  #okazutofu #recipe .list:not(.large) li .ttl {
    padding: 0 calc(17 / 320 * 100vw) 0 calc(10 / 320 * 100vw);
    background-image: none;
  }
}
#okazutofu .modalArea {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#okazutofu .modalBg {
  width: 100%;
  height: 100%;
  background-image: url("../images/tofugratin/bg_mainimage_lower.jpg");
  background-size: calc(1500px / 2) auto;
  opacity: 0.95;
  z-index: 9998;
}
#okazutofu .modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  z-index: 0;
  height: 100%;
}
#okazutofu .modalWrapper .icon_scroll {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 120px;
  height: 120px;
  background: url("../images/tofugratin/icon_scroll.svg") center center no-repeat;
  background-size: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 9999;
  display: block;
  pointer-events: none;
}
#okazutofu .modalWrapper .icon_scroll.fixed {
  animation: scroll_icon 3s;
  /*animation: scroll_icon 4s;*/
}
@keyframes scroll_icon {
  0%,
        100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
        /*
        0%,
        100%,
        14%,
        42%,
        70%,
        98% {
          opacity: 0;
        }

        28%,
        56%,
        84% {
          opacity: 1;
        }
        */
}
#okazutofu .modalContents {
  display: block;
  text-align: left;
  position: relative;
  padding: 0 70px;
  width: 640px;
  height: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  background-image: url("../images/tofugratin/bg_modal.jpg");
  background-size: calc(1500px / 2) auto;
}
#okazutofu .modalContents .closeModal {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 0;
}
#okazutofu .modalContents .closeModal a {
  width: 50px;
  height: 50px;
  display: block;
  background-color: #e40011;
  background-image: url("../images/tofugratin/close.png");
  background-repeat: no-repeat;
  background-size: calc(30px / 2);
  background-position: center;
  line-height: 0;
  cursor: pointer;
}
#okazutofu .modalContents .item {
  width: 100%;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 100%;
  position: relative;
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#okazutofu .modalContents .item::-webkit-scrollbar {
  display: none;
}
#okazutofu .modalContents .item::after, #okazutofu .modalContents .item::before {
  content: "";
  display: block;
  height: 70px;
}
#okazutofu .modalContents .item h3 {
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0 auto 25px;
}
#okazutofu .modalContents .item h4 {
  font-size: 20px;
  line-height: 45px;
  letter-spacing: 0.1em;
  text-align: center;
  border-bottom: 2px dotted #000;
  margin: 0 auto 15px;
}
#okazutofu .modalContents .item .ph {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}
#okazutofu .modalContents .item h5 {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  padding: 0 10px;
  margin-bottom: 0.4em;
}
#okazutofu .modalContents .item ul {
  margin-bottom: 30px;
  padding: 0 10px;
}
#okazutofu .modalContents .item ul:last-child {
  margin-bottom: 0;
}
#okazutofu .modalContents .item ul li {
  padding-left: 1.5em;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 0.8em;
  position: relative;
  text-align: justify;
}
#okazutofu .modalContents .item ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
#okazutofu .modalContents .item ul.nomark li {
  padding-left: 0;
}
#okazutofu .modalContents .item ul.nomark li::before {
  display: none;
}
#okazutofu .modalContents .item ol {
  margin-bottom: 30px;
  padding: 0 10px 0 calc(10px + 1.25em);
  list-style-type: decimal;
}
#okazutofu .modalContents .item ol:last-child {
  margin-bottom: 0;
}
#okazutofu .modalContents .item ol li {
  font-size: 14px;
  line-height: 18px;
  padding-left: 0.4em;
  margin-bottom: 0.8em;
  text-align: justify;
}
#okazutofu .modalContents .item .link {
  width: 220px;
  margin: 40px auto 0;
}
@media screen and (min-width: 785px) {
  #okazutofu .sp {
    display: none;
  }
  #okazutofu .modalContents .closeModal a {
    transition: background-color 0.2s;
  }
  #okazutofu .modalContents .closeModal a:hover {
    background-color: #000;
  }
}
@media screen and (max-width: 784px) {
  #okazutofu .pc {
    display: none;
  }
  #okazutofu .modalContents {
    width: calc(100vw - 10 * 2 / 320 * 100vw);
    padding: 0 calc(20 / 320 * 100vw);
  }
  #okazutofu .modalContents .closeModal {
    top: 0;
    right: 0;
  }
  #okazutofu .modalContents .closeModal a {
    width: 40px;
    height: 40px;
    background-size: 19px;
  }
  #okazutofu .modalContents .item {
    width: 100%;
    overflow-y: auto;
  }
  #okazutofu .modalContents .item::after, #okazutofu .modalContents .item::before {
    height: calc(60 / 320 * 100vw);
  }
  #okazutofu .modalContents .item h3 {
    font-size: calc(16 / 320 * 100vw);
    line-height: calc(18 / 320 * 100vw);
    margin: 0 auto calc(20 / 320 * 100vw);
  }
  #okazutofu .modalContents .item h4 {
    font-size: calc(16 / 320 * 100vw);
    line-height: calc(36 / 320 * 100vw);
    margin: 0 auto calc(15 / 320 * 100vw);
  }
  #okazutofu .modalContents .item .ph {
    border-radius: calc(6 / 320 * 100vw);
    margin-bottom: calc(30 / 320 * 100vw);
  }
  #okazutofu .modalContents .item h5 {
    font-size: calc(12 / 320 * 100vw);
    line-height: calc(16 / 320 * 100vw);
    padding: 0 calc(10 / 320 * 100vw);
  }
  #okazutofu .modalContents .item ul {
    margin-bottom: calc(30 / 320 * 100vw);
    padding: 0 calc(10 / 320 * 100vw);
  }
  #okazutofu .modalContents .item ul:last-child {
    margin-bottom: 0;
  }
  #okazutofu .modalContents .item ul li {
    padding-left: 1.5em;
    font-size: calc(12 / 320 * 100vw);
    line-height: calc(16 / 320 * 100vw);
  }
  #okazutofu .modalContents .item ul.nomark li {
    padding-left: 0;
  }
  #okazutofu .modalContents .item ol {
    margin-bottom: calc(30 / 320 * 100vw);
    padding: 0 calc(10 / 320 * 100vw) 0 calc(10 / 320 * 100vw + 1.25em);
  }
  #okazutofu .modalContents .item ol:last-child {
    margin-bottom: 0;
  }
  #okazutofu .modalContents .item ol li {
    font-size: calc(12 / 320 * 100vw);
    line-height: calc(16 / 320 * 100vw);
  }
  #okazutofu .modalContents .item .link {
    width: calc(220 / 320 * 100vw);
    height: calc(30 / 320 * 100vw);
    margin: calc(40 / 320 * 100vw) auto 0;
    font-size: calc(12 / 320 * 100vw);
  }
}