.world_recipe_page {
  padding: 0 0 40px;
  line-height: 1.8; }

.page_main {
  display: flex;
  flex-direction: column; }
  .page_main figure {
    padding: 0 0 4px; }
  .page_main p {
    padding: 0 7vw; }
  .page_main p span {
    display: block;
    text-align: justify;
    font-size: 14px; }

    .bibliography{
      font-size: 1.2rem;
      text-align: center;
      line-height: 2.5rem;
      padding-bottom: 3%;
    }

@media all and (min-width: 768px) {
  .world_recipe_page {
    background: url("../images/smp_map.png") no-repeat center -12vw;
    background-size: 140vw; }

  .page_main {
    padding: 24px 0 0;
    flex-direction: row; }
    .page_main figure {
      flex: 0 0 40%;
      padding: 0 0 0 24px; }
      .page_main figure img {
        width: auto; }
    .page_main p {
      padding: 0 24px; }
      .page_main p img {
        width: auto;
        height: 64px;
  }
    .page_main p span {
      display: block;
      font-size: 1.5vw;
      padding: 24px 0 0; } 
}
@media all and (min-width: 1024px) {
  .page_main {
    padding: 6vw 0 0;
    width: 80%;
    max-width: 1366px;
    margin: auto; }
    .page_main figure {
      padding-left: 0;
      flex: 0 0 382px; }
    .page_main p {
      padding: 0 0 0 40px; }
.page_main p img{
    height: auto;
  max-height: 124px;
  }    
  .page_main p span {
      font-size: 1.15vw; } 
}

@media all and (min-width: 1366px) {
  .page_main p span {
  font-size: 15px;
  line-height: 2.0;
  } 
}

.page_body {
  padding: 24px 4vw;
  max-width: 100%;
  margin: auto; }
  .page_body h1 {
    display: flex;
    align-items: center; }
    .page_body h1 b {
      font-family: "source-han-serif-jpn-sb",serif;
      font-weight: 600;
      font-size: 40px;
      letter-spacing: 0; }
    .page_body h1 b i {
      font-size: 24px;
      vertical-align: super;
      display: inline-block;
      margin-right: 2px; }
    .page_body h1 em {
      padding: 0 0 0 16px;
      font-weight: 600;
      font-size: 20px; }
  .page_body figure i {
    display: block;
    text-align: right;
    font-size: 11px; }
  .page_body h2 {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding-bottom: 8px; }

.page_body_volume {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .page_body_volume h2 {
    color: #d8364f;
    position: relative;
    font-size: 3.7vw;
    letter-spacing: 0;
    padding-bottom: 0; }
  .page_body_volume h2::after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    top: 52%;
    right: -16px;
    transform: translate(0, -48%);
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #d8364f; }
  .page_body_volume ul {
    display: flex;
    justify-content: flex-end;
    position: relative; }
  .page_body_volume li {
    margin: 0 0 0 3.0vw;
    font-family: "Noto Sans Japanese-b";
    font-weight: 900;
    letter-spacing: -0.05em; }
    .page_body_volume li a {
      display: block;
      color: #ccc;
      line-height: 1.5;
      position: relative;
      transition-duration: 0.2s; }
    .page_body_volume li a::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      background: #fff;
      width: 1px;
      transition-duration: 0.5s; }
    .page_body_volume li a:hover {
      color: #666; }
    .page_body_volume li b {
      font-size: 7vw; }
    .page_body_volume li em {
      font-size: 13px; }
  .page_body_volume li.selected a {
    color: #000; }
  .page_body_volume li.selected a:after {
    width: 100%; }
  .page_body_volume span {
    position: absolute;
    height: 2px;
    background: #9f9280;
    width: 0;
    bottom: 0;
    transition-duration: 0.5s; }

.page_body_recipe {
  display: none; }

.page_body_recipe.selected {
  display: block; }

.page_body_time {
  padding: 0 0 24px; }
  .page_body_time h2 b {
    font-size: 2em;
    font-weight: 600; }
  .page_body_time ul {
    display: flex; }
  .page_body_time li {
    min-width: 75px;
    line-height: 1.1;
    background: url("../images/arrow.png") no-repeat right center;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 4px 2px 8px 6px; }
    .page_body_time li span {
      font-size: 12px; }
    .page_body_time li b {
      display: block;
      font-weight: 600;
      font-size: 1.2em; }

.page_body_ingredients {
  padding-bottom: 24px; }
  .page_body_ingredients ul {
    display: block;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    letter-spacing: -0.02em; }
  .page_body_ingredients li {
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between; }
  .page_body_ingredients li:last-of-type {
    border: 0; }
  .page_body_ingredients li.w100 {
    flex: 0 0 100%;
    width: 100%;
    flex-wrap: wrap; }
  .page_body_ingredients li span {
    padding: 2px;
    flex: 0 1 auto; }
  .page_body_ingredients li em {
    padding: 2px;
    text-align: right;
    white-space: nowrap; }
  .page_body_ingredients li.w100 span{
}
  .page_body_ingredients li.w100 em{
    flex: 1 1 auto;
}
  .page_body_ingredients li ul {
    display: block;
    width: 100%; }
  .page_body_ingredients li li.A {
    display: flex;
    background: #f3ede1; }
    .page_body_ingredients li li.B {
      display: flex;
      background: #ebeffa; }
        .page_body_ingredients li li.C {
    display: flex;
    background: #EFF5E4; }
.page_body_howtomake li {
  text-indent: -1.1em;
  padding: 4px 4px 4px 1.1em;
  font-size: 14px;
  line-height: 1.4;
  border-top: 1px solid #444; }
  .page_body_howtomake li:first-child {
    border-top: 0px; }

@media all and (min-width: 768px) {
  .page_body {
    display: flex;
    justify-content: space-between;
    padding: 80px 40px; }
    .page_body .page_body_left {
      flex: 0 0 58%; }
    .page_body .page_body_right {
      flex: 0 0 38%;
      text-align: right; }
      .page_body .page_body_right figure {
        margin-left: auto; }
    .page_body h1 b {
      font-weight: 900;
      font-size: 52px; }
    .page_body h1 b i {
      font-size: 32px; }
    .page_body h1 em {
      font-size: 24px;
      padding-top: 0.35em; }
    .page_body h2 {
      font-size: 18px; }

  .page_body_volume h2 {
    font-size: 16px; }
  .page_body_volume li {
    margin: 0 0 0 12px; }
    .page_body_volume li b {
      font-size: 32px; }
    .page_body_volume li em {
      font-size: 0.9em; }

  .page_body_ingredients ul {
    display: flex;
  font-size: 1.2vw;
  }
  .page_body_ingredients>ul>li{
    border: 0; }
  .page_body_ingredients>ul>li.w100{
    border-bottom: 1px solid #444; }
  
  .page_body_ingredients li span {
    padding: 2px 4px; }
  .page_body_ingredients li em {
    padding: 2px 4px; }

  .page_body_ingredients_col3 li {
    flex: 0 0 32%; }
  .page_body_ingredients_col3 li.w100 {
    flex: 0 0 100%; }

  .page_body_ingredients_col2 li {
    flex: 0 0 48%; } 
  .page_body_howtomake li{
    font-size: 1.2vw;
  }
}

@media all and (min-width: 1024px) {
  .page_body {
    width: 80%;
    max-width: 1366px;
    padding: 80px 0;
  }
  .page_body h1 b {
    font-size: 64px; }
  .page_body h1 b i {
    font-size: 32px; }
  .page_body h1 em {
    font-size: 32px; }
  
  .page_body .page_body_ingredients_col3 li {
    flex: 0 0 32%; }
  .page_body .page_body_ingredients_col3 li.w100 {
    flex: 0 0 100%; } 
  .page_body_ingredients ul {
  font-size: 1.1vw;
  }
    .page_body_howtomake li{
    font-size: 1.1vw;
  }


}

@media all and (min-width: 1240px) {
   .page_body_howtomake li{
    font-size: 14px;
  }
  .page_body_ingredients ul {
  font-size: 14px;
  }
}


.page_back {
  text-align: center;
  padding: 0 0 40px; }
  .page_back a:hover {
    color: #555; }


.bibliography a {
  text-decoration: underline;
  color: #9f9280;
}