@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

.main :root {
  --color01:#333333;
  --color02:#fff;
  --color03:#a9a298;
  --color04:#eeebe7;
  --color05:#8b8478;
  --color06:#e3d69c;
  --color07:#f9b870;
  --color08:#cec095;
  --color09:#f3a86b;
  --color10:#dbbe66;
  --color11:#f1f1f1;
  --color12:#ff9000;
  --color13:#aa9d75;
  --circle: 50%;
  --caveat: "Caveat", cursive;
  --txt16: clamp( 14px,1.5vw,16px);
  --txt18: clamp( 16px,1.7vw,18px);
  --txt22: clamp( 16px,2.1vw,22px);
  --txt24: clamp( 18px,2vw,24px);
  --txt30: clamp( 25px,2.5vw,30px);
  --txt43: clamp( 30px,3.58vw,43px);
  --circle_size01:81px;
  --circle_size02: clamp( 150px,19.16vw,230px);
}

.main *{ font-family: "Noto Sans JP", sans-serif; word-break: keep-all;}
.main img{ height: auto;}
.main figcaption{ text-align: center; font-size: 13px; margin-top: 1em;}
.main p{ font-size: var(--txt16); line-height: 1.8; }
.main em{ font-weight: bold; font-style: normal;}

.dFlex {display: flex; flex-wrap: wrap; justify-content: space-between;}
.bg{  max-width: 1200px; margin: 0 auto;  background: var(--color02); }
.caveat{ font-family: var(--caveat);}
.main{ padding: 75px 0 ; background: url(../../images/brewing-recipe/bg.jpg) no-repeat;   background-attachment: fixed; background-size: cover; background-position: center; }
.circle{ position: relative; border-radius: var(--circle); background: var(--color01);display: inline-block; width: 100px; height: 100px; text-align: center; line-height: 100px; color: var(--color02); font-weight: 400; position: relative; z-index: 2;}
.circle_01{ font-size: var(--txt24); width: var(--circle_size01); height: var(--circle_size01); line-height: var(--circle_size01); text-align: center;}
.circle_02{ font-size: var(--txt43); text-align: center; background: var(--color03); width: var(--circle_size02); height: var(--circle_size02); line-height: var(--circle_size02); }
.prepareBox li:nth-child(even) .circle_02{ background: var(--color05);}
.circle_03{ font-size: var(--txt43); text-align: center; background: var(--color08); width: var(--circle_size02); height: var(--circle_size02); line-height: var(--circle_size02); }
#box4 .brewBox li:nth-child(even) .circle_03{ background: var(--color09); }

.circle span{ position: absolute; top: 50%; transform: translateY(calc(-50% + 2.5em)); left: 0; right: 0; display: block; font-size: var(--txt16);}


.main section:not(.mv){ margin: 0 50px; padding-bottom: 100px; margin-bottom: 100px;}
.mv { position: relative;}
.mv h2 {position: absolute; bottom: 37.13%; right: 10.4%; z-index: 2;}

.frameBox{  background-image: url(../../images/brewing-recipe/frame_top_left.png), url(../../images/brewing-recipe/frame_top_right.png), url(../../images/brewing-recipe/frame_bottom_left.png), url(../../images/brewing-recipe/frame_bottom_right.png), url(../../images/brewing-recipe/frame_top.png), url(../../images/brewing-recipe/frame_bottom.png), url(../../images/brewing-recipe/frame_left.png), url(../../images/brewing-recipe/frame_right.png); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-y, repeat-y; background-position: left top, right top, left bottom, right bottom, top, bottom, left, right; background-color: #FFFFFF; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; padding: 80px 42.5px;}
/* 枠の内がわ1015px */
.frameBox h3{ text-align: center; margin-bottom: 50px; }
.frameBox h3 img{ display: inline-block; margin-bottom: 1em;}
.frameBox h4{ font-size: var(--txt30); font-weight: bold; margin: 20px 0 1em;}
.frameBox .circle{ margin-right: 4.72%;}


.stepline{ position: relative;}
/*タイムラインの見出し横の丸の位置と形状*/
.stepline::after{ content:''; position: absolute; bottom: 0; left:115px; width:1px; height: 100%; background:var(--color05); border-radius: 50%; z-index: 1;}
#box4 .stepline::after{ background: var(--color13);}
.prepareBox .stepline:last-of-type::after,.brewBox .stepline:last-of-type::after{ content: none;}

.step{ width: 71.92%; padding-bottom: 135px; margin: 0 0 0 auto;}

#box1{ padding-top: 130px;}
#box1 h3{ font-size: var(--txt30); font-weight: bold; letter-spacing: 0.08em; text-align: center; line-height: 2;}
#box1 h3 span{ background-image: radial-gradient(circle at center, #333 20%, transparent 20%);  background-position: top center;  background-repeat: repeat-x;  background-size: 1em 0.3em; padding-top: .4em; }
#box1 h3+p{  text-align: center; margin-top: 40px; letter-spacing: 0.08em;}
#box1 .profile{ position: relative; background: var(--color04); max-width: 950px; margin: 0 auto; margin-top: 110px; padding: 70px 3.3%; align-items: center;}
#box1 .profile .circle{ position: absolute; top: -40px; left: 50%; transform: translateX(-50%);}
#box1 .profile figure{ width: 170px; margin: 0 auto;}
#box1 .profile p{ width: calc(100% - 204px); font-size: 13px;}
#box1 .profile p span{ font-size: 22px; font-weight: bold; display: block; margin-bottom: 1em;}
#box2 dl{ flex-basis: calc((100% - 134px)/3);}
#box2 dl dd{ text-align: center; margin-top: 1em;}
#box2 dl dd span{ font-size: 13px;}

#box3 ol>li{ justify-content: flex-start; width: 100%;}
#box3 .step01 .txtBox{ width: 67.02%;}
#box3 .step01 .txtBox ul{ max-width: 290px;}
#box3 .step01 .txtBox li{ margin-top: 10px; padding: 5px; text-align: center; background: var(--color11);}
#box3 .step01 .txtBox p{ width: 80.65%; margin-top: 20px;}
#box3 .step01 figure{ width: 23.82%; max-width: 240px; margin-top: 10px; flex-grow: 1;}
#box3 .step02{ padding-bottom: 100px;}
#box3 .step02 h4{ margin-bottom: 1em;}
#box3 .step02 .set .set01{ margin-top: 40px;}
#box3 .step02 .set .set01 ul{ max-width: 545px; margin-top: 40px;}
#box3 .step02 .set .set01 figure{ position: relative; }
#box3 .step02 .set .set01 figure::after{ position: absolute; content: ""; width: 16px; height: 19px; background-color: var(--color08); clip-path: polygon(16px 50%, 0% 0%, 0% 19px); top: 50%; transform: translateY(calc(-50% - 13.5px)); right: -38px;}
#box3 .step02 .set .set01 li:last-of-type figure::after{ content: none;}
#box3 .step02 .set .set02{ margin-top: 30px;}
#box3 .step02 .set .set02 p{ width: 67.12%; margin-top: 4em;}
#box3 .step02 .set .set02 figure{ width: calc(100% - 67.12%);}
#box3 .step03{padding-bottom: 130px;}
#box3 .step03 .txtBox{ width: 67.12%;}
#box3 .step03 .txtBox p{ width: 86%;}
#box3 .step03 figure{ width: 23%; flex-grow: 1; margin-top: 10px;}
#box3 .step04 ul{ max-width: 555px; margin: 0 auto; margin-top: 60px;}
#box3 .step04 ul li p{ font-size: 14px; text-align: center;}
#box3 .step04 figure{ position: relative; }
#box3 .step04 figure::after{ position: absolute; content: ""; width: 16px; height: 19px; background-color: var(--color08); clip-path: polygon(16px 50%, 0% 0%, 0% 19px); top: 50%; transform: translateY(-50%); right: -38px;}
#box3 .step04 li:last-of-type figure::after{ content: none;}

#box4 .brewBox li:not(.pour06) .circle{ line-height: 4.5; }
#box4 .brewBox .circle span{ transform: translateY(calc(-50% + 2em));}
#box4 .brewBox table{ max-width: 870px; width: 100%;  margin: 0 auto 195px;}
#box4 .brewBox table caption{ font-size: var(--txt22); margin-bottom: 0.5em;}
#box4 .brewBox table caption span{ font-size: var(--txt16); display: inline-block; margin-left: 1.5em;}
#box4 .brewBox table th{ background: var(--color06); font-weight: 400; width:  25.97%; text-align: center; padding: 1.5em 0; border-bottom: 5px solid #fff;}
#box4 .brewBox table tr:nth-of-type(even) th{ background: var(--color07);}
#box4 .brewBox table td{ position: relative; background: var(--color11); font-size: var(--txt30); font-weight: 200; border-bottom: 5px solid #fff; text-align: center; width: 37%;}
#box4 .brewBox table td:first-of-type::after{ position: absolute; content: ""; width: 1px; height: 60%; background: #333; right:0; top: 50%; transform: translateY(-50%);}
#box4 .pour01 .step ul{ max-width: 585px; margin: 0 auto; align-items: center; margin-top: 48px;}
#box4 .pour01 .step ul li{ width: 33.33%; text-align: center;}
#box4 .pour01 .step ul .time{ position: relative; padding-top: 1.5em; color: var(--color12); font-size: 14px; font-weight: bold;}
#box4 .pour01 .step ul .time span{ font-size: var(--txt24);}
#box4 .pour01 .step ul .time::before{ position: absolute; content: ""; width: 16px; height: 19px; background-color: var(--color08); clip-path: polygon(16px 50%, 0% 0%, 0% 19px); top: 0; left: 50%; transform: translateX(-50%);}
#box4 .pour02 .step ul{ margin-top: 123px; width: 100%;}
#box4 .pour02 .step ul li{flex-basis: calc((100% - 106px)/3);}
#box4 .pour02 .step ul li figure{ position: relative;}
#box4 .pour02 .step ul li figure::after{ position: absolute; content: ""; width: 16px; height: 19px; background-color: var(--color08); clip-path: polygon(16px 50%, 0% 0%, 0% 19px); top: 50%; transform: translateY(calc(50% - 2.3em)); right: -29px;}
#box4 .pour02 .step ul li:last-of-type figure::after{ content: none;}
#box4 .pour03 .step figure{ margin-top: 36px; text-align: center;}
#box4 .pour04{ align-content: center; padding-bottom: 135px; }
#box4 .brewBox li.pour04 .circle { font-size: var(--txt30); line-height: 6.7;}
#box4 .pour04 .step{ padding-bottom: 0; align-self: center;}
#box4 .pour04 .step figure{ margin-top: 36px; text-align: center;}
#box4 .pour05 .step ul{ max-width: 582px; margin: 0 auto; margin-top: 50px;}
#box4 .pour05 .step ul{ max-width: 582px; margin: 0 auto; margin-top: 50px;}
#box4 .pour05 .step ul li{ flex-basis: calc((100% - 100px) / 2);}
#box4 .pour05 .step ul li figure{ position: relative;}
#box4 .pour05 .step ul li figure::after{ position: absolute; content: ""; width: 16px; height: 19px; background-color: var(--color08); clip-path: polygon(16px 50%, 0% 0%, 0% 19px); top: 50%; transform: translateY(calc(50% - 2.3em)); right: -50px;}
#box4 .pour05 .step ul li:last-of-type figure::after{ content: none;}
#box4 .pour06 .row01 .txtBox{ width: 48.6%;}
#box4 .pour06 .row01 figure{ width: 47.9%;}
#box4 .pour06 .row02 { max-width: 585px; margin: 36px auto 0;}
#box4 .pour06 .row02 li{ flex-basis: calc((100% - 100px) / 2);}
#box4 .pour06 .row02 figure{ position: relative;}
#box4 .pour06 .row02 figure::after{ position: absolute; content: ""; width: 16px; height: 19px; background-color: var(--color08); clip-path: polygon(16px 50%, 0% 0%, 0% 19px); top: 50%; transform: translateY(calc(50% - 2.3em)); right: -50px;}
#box4 .pour06 .row02 li:last-of-type figure::after{ content: none;}

.ftBnrBox{ margin-top: 20px;}

@media only screen and (max-width: 1119px){
  .stepline::after{ left: 9.5vw;}
}

@media only screen and (max-width: 768px){
  figcaption{ font-size: 2.5vw;}
  .main{ padding: 0;}
  .mv h2 { width: 39.32vw; bottom: 43.85%;}
  section:not(.mv) { margin: 0 10px; padding-bottom: 50px; margin-bottom: 50px;}
  .frameBox{ padding: 50px 20px 80px; background-image: url(../../images/brewing-recipe/frame_top_sp.png), url(../../images/brewing-recipe/frame_bottom_sp.png); background-repeat: no-repeat, no-repeat; background-position: top , bottom; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; background-size: contain; }
  .frameBox .circle{ margin: 0 auto 30px;}
  .frameBox h4{ text-align: center;}
  .stepline::after{ content:none;}
  .step{ width: 100%; padding-bottom: 80px;}

  #box1{ padding-top: 60px;}
  #box1 .profile p{ width: 100%; margin-top: 20px;}
  #box1 .profile p span{ text-align: center;}
  #box2 dl{ flex-basis: 100%; margin: 0 auto; text-align: center;}
  #box2 dl:not(:last-of-type) dd{ margin-bottom: 40px;}
  #box3 .step01 .txtBox{ width: 100%;}
  #box3 .step01 .txtBox ul{ max-width: 100%;}
  #box3 .step01 .txtBox p{ width: 100%;}
  #box3 .step01 figure{ margin: 20px auto 0;}
  #box3 .step01 figure figcaption{ font-size: 12px;}
  #box3 .step02{ padding-bottom: 0;}
  #box3 .step02 .set .set01 ul li{ flex-basis: calc((100% - 70px) / 3); }
  #box3 .step02 .set .set01 figure::after{ width: 10px; height: 12px; clip-path: polygon(10px 50%, 0% 0%, 0% 12px); transform: translateY(calc(-50% - 13.5px)); right: -24px;}
  #box3 .step02 .set .set01 figure figcaption{ font-size: 2.5vw;}
  #box3 .step02 .set .set02{margin-top: 0;}
  #box3 .step02 .set .set02 p{ width: 100%; margin-bottom: 20px;}
  #box3 .step02 .set .set02 figure{ margin: 0 auto; width: 100%; text-align: center; font-size: 12px;}
  #box3 .step02 .set .set02 figure figcaption{ font-size: 12px;}
  #box3 .step03{ padding-bottom: 0;}
  #box3 .step03 .txtBox{ width: 100%;}
  #box3 .step03 .txtBox p{ width: 100%;}
  #box3 .step03 figure{ width: 50%; margin: 20px auto 0; text-align: center;}
  #box3 .step04 ul{ margin-top: 30px;}
  #box3 .step04 ul li{ flex-basis: calc((100% - 60px) / 2);}
  #box3 .step04 ul li p{ font-size: 2.5vw;}
  #box4 .brewBox li.pour04 .circle{  font-size: 5.2vw;}
  #box4 .brewBox li:not(.pour04,.pour06) .circle{ line-height: 4.5; }
  #box4 .brewBox table{ margin-bottom: 80px;}
  #box4 .pour02 .step ul{ margin-top: 30px;}
  #box4 .pour01 .step ul li figcaption{ font-size: 2.5vw;}
  #box4 .pour02 .step ul li figure::after{ width: 10px; height: 12px; clip-path: polygon(10px 50%, 0% 0%, 0% 12px); transform: translateY(calc(-50% - 13.5px)); right: -30px;}
  #box4 .pour05 .step ul li{ flex-basis: calc((100% - 60px) / 2);}
  #box4 .pour05 .step ul li figure::after { width: 16px; height: 19px; background-color: var(--color08); clip-path: polygon(16px 50%, 0% 0%, 0% 19px); top: 50%; transform: translateY(-50%); right: -38px;}
  #box4 .pour03 .step figure figcaption{ font-size: 12px;}
  #box4 .pour06 .row01 .txtBox{ width: 100%;}
  #box4 .pour06 .row01 figure{ margin: 30px auto; width: 100%; text-align: center;}
  #box4 .pour06 .row02 li{ flex-basis: calc((100% - 60px) / 2);}
  #box4 .pour06 .row02 li figure::after{ width: 16px; height: 19px; background-color: var(--color08); clip-path: polygon(16px 50%, 0% 0%, 0% 19px); top: 50%; transform: translateY(calc(-50% - 13px)); right: -38px;}
}