@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
/* -----------------------------
value original
------------------------------*/
#EditArea h1, #EditArea h2, #EditArea h3, #EditArea h4, #EditArea h5, #EditArea h6, #EditArea p, #EditArea address, #EditArea ul, #EditArea ol, #EditArea li, #EditArea dl, #EditArea dt, #EditArea dd, #EditArea table, #EditArea caption, #EditArea th, #EditArea td, #EditArea img, #EditArea form, #EditArea figure {
  font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  margin: 0;
}
#EditArea * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#EditArea p {
  font-weight: 500;
  color: #5c2500;
}
#EditArea img {
  max-width: 100%;
}

/*------------------------------
module　basic
------------------------------*/
#EditArea .clearFix:after {
  content: "";
  display: block;
  clear: both;
}
#EditArea .clearFix {
  zoom: 1;
}
#EditArea .textL {
  text-align: left !important;
}
#EditArea .textC {
  text-align: center !important;
}
#EditArea .textR {
  text-align: right !important;
}
@media only screen and (max-width: 750px) {
  #EditArea .sp-textL {
    text-align: left !important;
  }
}
@media only screen and (max-width: 750px) {
  #EditArea .sp-textC {
    text-align: center !important;
  }
}
@media only screen and (max-width: 750px) {
  #EditArea .sp-textR {
    text-align: right !important;
  }
}
#EditArea .ps_ab {
  position: absolute;
}
#EditArea .flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#EditArea .body_inner {
  position: relative;
  overflow: hidden;
}

/*------------------------------
animation
------------------------------*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.fadeInUpTrig {
  opacity: 0;
}
.fadeInUpTrig.inActive {
  -webkit-animation: fadeInUp 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
          animation: fadeInUp 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.fadeInUpTrig.op-second {
  opacity: 0;
}
.fadeInUpTrig.op-second.inActive {
  -webkit-animation: fadeInUp 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
          animation: fadeInUp 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
@media only screen and (max-width: 750px) {
  .fadeInUpTrig.op-second.inActive {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
}

.fadeInUpTrig.op-lead {
  opacity: 0;
}
.fadeInUpTrig.op-lead.inActive {
  -webkit-animation: fadeInUp 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
          animation: fadeInUp 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
@media only screen and (max-width: 750px) {
  .fadeInUpTrig.op-lead.inActive {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }
}

.fadeInUpTrig.op-recipeTop {
  opacity: 0;
}
.fadeInUpTrig.op-recipeTop.inActive {
  -webkit-animation: fadeInUp2 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
          animation: fadeInUp2 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
@media only screen and (max-width: 750px) {
  .fadeInUpTrig.op-recipeTop.inActive {
    -webkit-animation-timing-function: 1s;
            animation-timing-function: 1s;
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
  }
}

.fadeIn {
  opacity: 0;
}
.fadeIn.inActive {
  opacity: 1;
  -webkit-transition: opacity ease 0.5s;
  transition: opacity ease 0.5s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fadeInUp2 {
  0% {
    opacity: 0.9;
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadeInUp2 {
  0% {
    opacity: 0.9;
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/*------------------------------
module set example
------------------------------*/
.mt_10 {
  margin-top: 10px;
}

.mt_20 {
  margin-top: 20px;
}

.mt_30 {
  margin-top: 30px;
}

.mt_40 {
  margin-top: 40px;
}

.mt_50 {
  margin-top: 50px;
}

.mt_60 {
  margin-top: 60px;
}

.mt_70 {
  margin-top: 70px;
}

/* -----------------------------
common style
------------------------------*/
#EditArea img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 750px) {
  #EditArea img {
    width: 100%;
    height: auto;
  }
}
#EditArea sup {
  font-size: 60%;
  font-weight: inherit;
  vertical-align: super;
}
#EditArea em {
  font-weight: bold;
}
#EditArea .sp {
  display: none;
}
#EditArea .pc {
  display: block;
}
#EditArea .sp-inline {
  display: none !important;
}
#EditArea .pc-inline {
  display: inline-block !important;
}
#EditArea ul.inline li {
  display: inline-block;
  vertical-align: top;
}
@media only screen and (max-width: 750px) {
  #EditArea .pc {
    display: none !important;
  }
  #EditArea .sp {
    display: block !important;
  }
  #EditArea .sp-inline {
    display: inline-block !important;
  }
  #EditArea .pc-inline {
    display: none !important;
  }
  #EditArea body {
    min-width: 100%;
    width: 100%;
  }
}

/* -----------------------------
 commonのリセット分
------------------------------*/
#Container {
  width: 100%;
}

.WrapTop {
  margin: 0 auto;
  max-width: 980px;
  width: 100%;
}

@media only screen and (max-width: 750px) {
  body {
    min-width: auto;
  }
}

#EditArea {
  font-family: "Zen Kaku Gothic New", sans-serif;
  min-width: 980px;
  overflow-x: hidden;
}
@media only screen and (max-width: 750px) {
  #EditArea {
    min-width: auto;
  }
}
#EditArea a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#EditArea a:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#EditArea a img {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#EditArea a img:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#EditArea img {
  width: 100%;
}
#EditArea .kv {
  background: url(/magazine/madanatsu/assets/img/kv_bg.jpg) no-repeat center top/cover;
  padding-bottom: min(12.245vw, 120px);
  position: relative;
}
@media only screen and (max-width: 750px) {
  #EditArea .kv {
    background: url(/magazine/madanatsu/assets/img/kv_bg_sp.jpg) no-repeat center top/cover;
    padding-bottom: 16vw;
  }
}
#EditArea .kv h2 {
  text-align: center;
  color: #562a00;
  font-size: min(2.653vw, 26px);
  font-weight: 500;
  line-height: 2.6;
}
@media only screen and (max-width: 750px) {
  #EditArea .kv h2 {
    font-size: 4.533vw !important;
    line-height: 2.15;
    padding-top: 5.6vw;
  }
}
#EditArea .kv h2 .line {
  background-size: 8px 8px;
  background-image: -webkit-radial-gradient(circle, #b9dffa 2px, transparent 2px);
  background-image: radial-gradient(circle, #b9dffa 2px, transparent 2px);
  background-position: left bottom;
  background-repeat: space no-repeat;
  padding-bottom: min(1.224vw, 12px);
  padding-left: 1px;
}
@media only screen and (max-width: 750px) {
  #EditArea .kv h2 .line {
    background-size: 1.067vw 1.067vw;
    padding-bottom: 1.6vw;
    background-image: -webkit-radial-gradient(circle, #b9dffa 0.267vw, transparent 0.267vw);
    background-image: radial-gradient(circle, #b9dffa 0.267vw, transparent 0.267vw);
  }
}
#EditArea .kv h2 .bold {
  color: #ff6d1b;
  font-weight: 700;
  font-size: min(3.061vw, 30px);
}
@media only screen and (max-width: 750px) {
  #EditArea .kv h2 .bold {
    font-size: 5.867vw;
  }
}
#EditArea .kv h2 .big {
  font-size: min(3.673vw, 36px);
  line-height: 1;
}
@media only screen and (max-width: 750px) {
  #EditArea .kv h2 .big {
    font-size: 6.267vw;
  }
}
#EditArea .kv h2 .kerning {
  letter-spacing: -0.15em;
}
#EditArea .kv .ele {
  position: absolute;
  bottom: max(-5.102vw, -50px);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
}
@media only screen and (max-width: 750px) {
  #EditArea .kv .ele {
    bottom: -5.333vw;
  }
}
#EditArea .kv .ele .loop-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
#EditArea .kv .ele .loop-slide {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: loop-anim 36s linear infinite;
          animation: loop-anim 36s linear infinite;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  gap: min(4.082vw, 40px);
}
@media only screen and (max-width: 750px) {
  #EditArea .kv .ele .loop-slide {
    gap: 4vw;
    -webkit-animation: loop-anim 28s linear infinite;
            animation: loop-anim 28s linear infinite;
  }
}
#EditArea .kv .ele .loop-slide img {
  width: min(145.918vw, 1430px);
  height: auto;
  vertical-align: bottom;
  max-width: none;
}
@media only screen and (max-width: 750px) {
  #EditArea .kv .ele .loop-slide img {
    width: 148.267vw;
    max-width: none;
  }
}
@-webkit-keyframes loop-anim {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes loop-anim {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
#EditArea .intro {
  background: url(/magazine/madanatsu/assets/img/water-drawing.jpg) no-repeat center top/cover;
  padding-top: min(11.837vw, 116px);
  padding-bottom: min(8.571vw, 84px);
}
@media only screen and (max-width: 750px) {
  #EditArea .intro {
    padding-top: 15.467vw;
    padding-left: 5.333vw;
    padding-right: 4.533vw;
  }
}
#EditArea .intro .board {
  width: min(101.633vw, 996px);
  height: min(206.735vw, 2026px);
  background: url(/magazine/madanatsu/assets/img/gokisousama_bg.png) no-repeat center top/100% auto;
  margin: 0 auto;
  padding: min(5.306vw, 52px) 0;
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board {
    background: url(/magazine/madanatsu/assets/img/gokisousama_bg_sp.png) no-repeat center top/100% auto;
    width: 100%;
    height: 465.6vw;
    padding: 6.933vw 0 0;
  }
}
#EditArea .intro .board h3 {
  width: min(57.551vw, 564px);
  margin: 0 auto min(2.041vw, 20px);
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board h3 {
    width: 74.667vw;
  }
}
#EditArea .intro .board h4 {
  text-align: center;
  color: #562a00;
  font-size: min(2.653vw, 26px);
  font-weight: 500;
  line-height: 2.4;
  margin-bottom: min(2.041vw, 20px);
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board h4 {
    font-size: 4.533vw !important;
    margin-bottom: 4vw;
    line-height: 2.4;
  }
}
#EditArea .intro .board h4 .line {
  background-size: 8px 8px;
  background-image: -webkit-radial-gradient(circle, #b9dffa 2px, transparent 2px);
  background-image: radial-gradient(circle, #b9dffa 2px, transparent 2px);
  background-position: left bottom;
  background-repeat: space no-repeat;
  padding-bottom: min(1.224vw, 12px);
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board h4 .line {
    background-size: 1.067vw 1.067vw;
    padding-bottom: 1.6vw;
    background-image: -webkit-radial-gradient(circle, #b9dffa 0.267vw, transparent 0.267vw);
    background-image: radial-gradient(circle, #b9dffa 0.267vw, transparent 0.267vw);
  }
}
#EditArea .intro .board h4 .bold {
  color: #ff6d1b;
  font-weight: 700;
  font-size: min(3.061vw, 30px);
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board h4 .bold {
    font-size: 4.8vw;
  }
}
#EditArea .intro .board h4 .kerning {
  letter-spacing: -0.15em;
}
#EditArea .intro .board .img {
  width: min(85.714vw, 840px);
  margin: 0 auto min(5.306vw, 52px);
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board .img {
    width: 100%;
    padding-left: 5.333vw;
    padding-right: 7.467vw;
    margin-bottom: 8vw;
  }
}
#EditArea .intro .board .desc {
  width: min(87.653vw, 859px);
  margin: 0 auto min(3.061vw, 30px);
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board .desc {
    width: 100%;
    padding-left: 1.867vw;
    padding-right: 4vw;
  }
}
#EditArea .intro .board .txt {
  font-size: min(3.061vw, 30px);
  text-align: center;
  font-weight: 500;
  color: #562a00;
  letter-spacing: -0.03em;
  line-height: 1.7;
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board .txt {
    font-size: 4vw;
  }
}
#EditArea .intro .board .txt span {
  font-weight: bold;
  font-size: min(3.98vw, 39px);
  position: relative;
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board .txt span {
    font-size: 5.2vw;
  }
}
#EditArea .intro .board .txt span.blue {
  color: #0479bf;
}
#EditArea .intro .board .txt span.blue.big {
  font-size: min(4.694vw, 46px);
  line-height: 1;
}
@media only screen and (max-width: 750px) {
  #EditArea .intro .board .txt span.blue.big {
    font-size: 6.133vw;
  }
}
#EditArea .intro .board .txt span.orange {
  color: #ff6d1b;
}
#EditArea .intro .board .txt span.grad {
  color: transparent;
  background-image: -webkit-linear-gradient(315deg, #ff6d1b, #fe871e, #ff6d1b, #ff4918);
  background-image: linear-gradient(135deg, #ff6d1b, #fe871e, #ff6d1b, #ff4918);
  -webkit-background-clip: text;
  background-clip: text;
}
#EditArea .intro .board .txt span.mark--01 {
  background: url(/magazine/madanatsu/assets/img/marker1.png) no-repeat center bottom/contain;
}
#EditArea .intro .board .txt span.mark--02 {
  background: url(/magazine/madanatsu/assets/img/marker1.png) no-repeat center bottom/contain;
}
#EditArea .intro .board .txt span.mark--03 {
  background: url(/magazine/madanatsu/assets/img/marker1.png) no-repeat center bottom/contain;
  padding-bottom: 0.2em;
}
#EditArea .point {
  padding: min(8.163vw, 80px) 0;
  background: url(/magazine/madanatsu/assets/img/bg_washi.jpg) repeat;
}
@media only screen and (max-width: 750px) {
  #EditArea .point {
    padding: 10.667vw 0;
  }
}
#EditArea .point .inner {
  width: min(100vw, 980px);
  margin: 0 auto;
}
#EditArea .point h3 {
  width: min(73.776vw, 723px);
  margin: 0 auto min(3.469vw, 34px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point h3 {
    width: 77.6vw;
    margin-bottom: 6.4vw;
  }
}
#EditArea .point__block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    margin-bottom: 9.067vw;
  }
}
#EditArea .point__block .left {
  width: min(56.122vw, 550px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block .left {
    width: 78.667vw;
    margin: 0 auto;
  }
}
#EditArea .point__block .left h4 {
  margin-bottom: min(2.449vw, 24px);
  position: relative;
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block .left h4 {
    margin: 0 auto 5.333vw;
  }
}
#EditArea .point__block .left h4:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#EditArea .point__block .left p {
  font-size: min(1.837vw, 18px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block .left p {
    font-size: 3.733vw;
    letter-spacing: 0.04em;
    text-align: justify;
  }
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block .right {
    margin-bottom: 4vw;
  }
}
@media print, screen and (min-width: 751px) {
  #EditArea .point__block.--01 .left, #EditArea .point__block.--03 .left {
    padding-left: min(5.102vw, 50px);
  }
}
@media print, screen and (min-width: 751px) {
  #EditArea .point__block.--01 {
    gap: min(2.041vw, 20px);
  }
}
#EditArea .point__block.--01 .left h4 {
  width: min(48.367vw, 474px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--01 .left h4 {
    width: 48.533vw;
  }
}
#EditArea .point__block.--01 .left h4:before {
  background: url(/magazine/madanatsu/assets/img/point_num1.png) no-repeat;
  width: min(11.633vw, 114px);
  height: min(11.02vw, 108px);
  left: max(-5.102vw, -50px);
  top: auto;
  bottom: max(-2.041vw, -20px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--01 .left h4:before {
    background-size: contain;
    width: 16.4vw;
    height: 17.733vw;
    left: -15.467vw;
    bottom: 4vw;
  }
}
#EditArea .point__block.--01 .right {
  width: min(41.224vw, 404px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--01 .right {
    width: 81.333vw;
  }
}
#EditArea .point__block.--02 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--02 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
#EditArea .point__block.--02 .left h4 {
  width: min(27.857vw, 273px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--02 .left h4 {
    width: 52.4vw;
  }
}
#EditArea .point__block.--02 .left h4:before {
  background: url(/magazine/madanatsu/assets/img/point_num2.png) no-repeat;
  width: min(13.878vw, 136px);
  height: min(11.02vw, 108px);
  left: auto;
  top: auto;
  right: max(-10.204vw, -100px);
  bottom: max(-2.041vw, -20px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--02 .left h4:before {
    background-size: contain;
    width: 21.2vw;
    height: 16.267vw;
    right: -11.467vw;
    bottom: -2.667vw;
  }
}
#EditArea .point__block.--02 .right {
  width: min(40.408vw, 396px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--02 .right {
    width: 78.667vw;
  }
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--03 {
    margin-bottom: 0;
  }
}
#EditArea .point__block.--03 .left h4 {
  width: min(33.265vw, 326px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--03 .left h4 {
    width: 62.4vw;
  }
}
#EditArea .point__block.--03 .left h4:before {
  background: url(/magazine/madanatsu/assets/img/point_num3.png) no-repeat;
  width: min(13.98vw, 137px);
  height: min(11.02vw, 108px);
  left: max(-5.102vw, -50px);
  top: max(-4.082vw, -40px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--03 .left h4:before {
    background-size: contain;
    width: 21.333vw;
    height: 16vw;
    left: -8vw;
    bottom: 8vw;
    top: auto;
  }
}
#EditArea .point__block.--03 .right {
  width: min(41.939vw, 411px);
}
@media only screen and (max-width: 750px) {
  #EditArea .point__block.--03 .right {
    width: 81.6vw;
  }
}
#EditArea .menu {
  padding: min(8.163vw, 80px) 0 min(10.204vw, 100px);
  background: url(/magazine/madanatsu/assets/img/water-drawing.jpg) no-repeat center top/cover;
}
@media only screen and (max-width: 750px) {
  #EditArea .menu {
    padding: 10.667vw 0 13.333vw;
    background: url(/magazine/madanatsu/assets/img/water-drawing_sp.jpg) repeat-y center top/100% auto;
  }
}
#EditArea .menu .inner {
  width: min(100vw, 980px);
  margin: 0 auto;
}
#EditArea .menu h3 {
  width: min(80vw, 784px);
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
  #EditArea .menu h3 {
    width: 80.533vw;
    margin-bottom: 1.333vw;
  }
}
#EditArea .menu .btn {
  width: min(32.653vw, 320px);
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .btn {
    width: 100%;
  }
}
#EditArea .menu .btn a {
  display: inline-block;
  position: relative;
}
#EditArea .menu .btn a i {
  display: block;
  width: min(1.224vw, 12px);
  height: min(1.837vw, 18px);
  background: url(/magazine/madanatsu/assets/img/recipr_btn_arrow.svg) no-repeat center top/contain;
  position: absolute;
  top: calc(50% - min(0.204vw, 2px));
  right: min(2.245vw, 22px);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .btn a i {
    width: 2.4vw;
    height: 3.467vw;
    right: 4vw;
  }
}
#EditArea .menu .especially {
  margin-bottom: min(12.245vw, 120px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially {
    margin-bottom: 13.333vw;
  }
}
#EditArea .menu .especially ul li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto 40px;
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#EditArea .menu .especially ul li:first-child {
  margin-bottom: min(10.204vw, 100px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li:first-child {
    margin-bottom: 13.333vw;
  }
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li:last-child .right p {
    letter-spacing: 0.04em;
  }
}
@media print, screen and (min-width: 751px) {
  #EditArea .menu .especially ul li .left, #EditArea .menu .especially ul li .right {
    width: min(53.061vw, 520px);
  }
}
#EditArea .menu .especially ul li .left {
  position: relative;
  z-index: 2;
  top: min(6.122vw, 60px);
  border-radius: 22px;
  overflow: hidden;
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li .left {
    width: 89.333vw;
    top: auto;
  }
}
#EditArea .menu .especially ul li .left img {
  width: 100%;
  height: auto;
  display: block;
}
#EditArea .menu .especially ul li .right {
  background-color: #fff;
  border-radius: 12px;
  z-index: 1;
  margin-left: max(-6.531vw, -64px);
  padding: min(3.061vw, 30px) min(5.102vw, 50px) min(3.061vw, 30px) min(9.184vw, 90px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li .right {
    width: 100%;
    margin-left: auto;
    padding: 37.333vw 5.333vw 7.467vw;
    margin-top: -32vw;
    border-radius: 0;
  }
}
#EditArea .menu .especially ul li .right h4 {
  width: min(38.878vw, 381px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li .right h4 {
    width: 100%;
  }
}
#EditArea .menu .especially ul li .right p {
  padding: min(1.224vw, 12px) 0 min(2.041vw, 20px);
  font-size: min(1.837vw, 18px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li .right p {
    font-size: 3.733vw;
    padding: 2.667vw 0;
    text-align: center;
  }
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li .right p, #EditArea .menu .especially ul li .right .btn {
    padding-left: 5.333vw;
    padding-right: 5.333vw;
  }
}
#EditArea .menu .especially ul li:last-child {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li:last-child {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#EditArea .menu .especially ul li:last-child .left {
  top: auto;
}
#EditArea .menu .especially ul li:last-child .right {
  margin-right: max(-6.531vw, -64px);
  padding: min(3.061vw, 30px) min(9.184vw, 90px) min(3.061vw, 30px) min(5.102vw, 50px);
  position: relative;
  top: min(6.122vw, 60px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .especially ul li:last-child .right {
    margin-right: auto;
    padding: 37.333vw 5.333vw 7.467vw;
    top: auto;
  }
}
#EditArea .menu .menus {
  background-color: #fff;
  border: 6px solid #f7d997;
  padding: min(4.49vw, 44px) min(4.694vw, 46px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus {
    border-width: 0.8vw;
    padding: 4.667vw 4.667vw 13.333vw;
    width: 89.333vw;
    margin: 0 auto;
  }
}
#EditArea .menu .menus ul {
  margin-bottom: min(6.122vw, 60px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus ul {
    margin-bottom: 13.333vw;
  }
}
#EditArea .menu .menus ul li .separator-dot {
  height: 4px;
  background-image: -webkit-radial-gradient(circle, #f3d484 2px, transparent 2px);
  background-image: radial-gradient(circle, #f3d484 2px, transparent 2px);
  background-size: 8px 4px;
  background-repeat: repeat-x;
  background-position: left center;
  margin: 40px 0;
}
#EditArea .menu .menus ul li .menus__block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus ul li .menus__block {
    display: block;
  }
}
#EditArea .menu .menus ul li .menus__block .left {
  width: min(44.898vw, 440px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus ul li .menus__block .left {
    width: 100%;
    margin-bottom: 4.8vw;
  }
}
#EditArea .menu .menus ul li .menus__block .right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#EditArea .menu .menus ul li .menus__block .right h5 {
  width: min(30.51vw, 299px);
  margin: 0 auto min(1.633vw, 16px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus ul li .menus__block .right h5 {
    width: 60.4vw;
    margin-bottom: 3.2vw;
  }
}
#EditArea .menu .menus ul li .menus__block .right p {
  font-size: min(1.837vw, 18px);
  text-align: center;
  margin-bottom: min(2.653vw, 26px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus ul li .menus__block .right p {
    font-size: 3.733vw;
    margin-bottom: 4.267vw;
  }
}
#EditArea .menu .menus ul li .menus__block.--04 h5 {
  width: min(30.102vw, 295px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus ul li .menus__block.--04 h5 {
    width: 59.067vw;
  }
}
#EditArea .menu .menus ul li .menus__block.--05 h5 {
  width: min(33.878vw, 332px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus ul li .menus__block.--05 h5 {
    width: 67.867vw;
  }
}
#EditArea .menu .menus ul li .menus__block.--06 h5 {
  width: min(35vw, 343px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus ul li .menus__block.--06 h5 {
    width: 68.8vw;
  }
}
#EditArea .menu .menus ul li .menus__block.--07 h5 {
  width: min(26.02vw, 255px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus ul li .menus__block.--07 h5 {
    width: 78.133vw;
  }
}
#EditArea .menu .menus ul li:nth-child(even) .menus__block {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
#EditArea .menu .menus .prod h3 {
  width: min(31.735vw, 311px);
  margin: 0 auto min(2.041vw, 20px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus .prod h3 {
    width: 46.933vw;
    margin-bottom: 5.067vw;
  }
}
#EditArea .menu .menus .prod .img {
  width: min(74.796vw, 733px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto auto;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: min(3.061vw, 30px) 0;
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus .prod .img {
    grid-template-columns: 5fr 5fr;
    gap: 4.8vw 2.667vw;
    width: 100%;
    margin-left: 1.067vw;
  }
}
#EditArea .menu .menus .prod .img .item img {
  display: block;
  margin: 0 auto;
}
#EditArea .menu .menus .prod .img .item.--01 img {
  width: min(26.224vw, 257px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus .prod .img .item.--01 img {
    width: 38.8vw;
  }
}
#EditArea .menu .menus .prod .img .item.--02 img {
  width: min(19.898vw, 195px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus .prod .img .item.--02 img {
    width: 32vw;
  }
}
#EditArea .menu .menus .prod .img .item.--03 img {
  width: min(20vw, 196px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus .prod .img .item.--03 img {
    width: 38.8vw;
  }
}
#EditArea .menu .menus .prod .img .item.--04 img {
  width: min(16.633vw, 163px);
}
@media print, screen and (min-width: 751px) {
  #EditArea .menu .menus .prod .img .item.--04 img {
    margin-left: min(4.694vw, 46px);
  }
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus .prod .img .item.--04 img {
    width: 23.333vw;
  }
}
#EditArea .menu .menus .prod .img .item.--05 img {
  width: min(20vw, 196px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus .prod .img .item.--05 img {
    width: 29.6vw;
  }
}
#EditArea .menu .menus .prod .img .item.--06 img {
  width: min(20vw, 196px);
}
@media only screen and (max-width: 750px) {
  #EditArea .menu .menus .prod .img .item.--06 img {
    width: 28.533vw;
  }
}
#EditArea .bnrs {
  background: url(/magazine/madanatsu/assets/img/pattern_wood.jpg) no-repeat center top/cover;
  padding: min(8.163vw, 80px) 0;
}
@media only screen and (max-width: 750px) {
  #EditArea .bnrs {
    padding: 13.333vw 0 11.2vw;
  }
}
#EditArea .bnrs .inner {
  width: min(100.612vw, 986px);
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
  #EditArea .bnrs .inner {
    padding-left: 5.333vw;
    padding-right: 4vw;
  }
}
#EditArea .bnrs .bnr p {
  width: min(45.816vw, 449px);
  margin: 0 auto min(1.633vw, 16px);
}
@media only screen and (max-width: 750px) {
  #EditArea .bnrs .bnr p {
    width: 66.533vw;
    margin-bottom: 2.667vw;
  }
}
#EditArea .bnrs .bnr.--02 {
  padding-top: min(3.265vw, 32px);
}
@media only screen and (max-width: 750px) {
  #EditArea .bnrs .bnr.--02 {
    padding-top: 8vw;
  }
}
#EditArea .bnrs .bnr.--02 p {
  width: min(41.939vw, 411px);
}
@media only screen and (max-width: 750px) {
  #EditArea .bnrs .bnr.--02 p {
    width: 61.2vw;
  }
}
#EditArea .bnrs .pagetop {
  padding-top: min(3.571vw, 35px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media only screen and (max-width: 750px) {
  #EditArea .bnrs .pagetop {
    padding-top: 8vw;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
#EditArea .bnrs .pagetop a {
  display: block;
  width: min(17.347vw, 170px);
}
@media only screen and (max-width: 750px) {
  #EditArea .bnrs .pagetop a {
    width: 33.333vw;
  }
}