@font-face {
    font-family: "Local Noto Sans JP";
    src: local("Noto Sans JP");
}

/* ===========================
   変数
=========================== */
:root {
   --header-height: 100px;
}


#suntory_contents {
  /* Colors - Base */
  --color-text-primary: #000000;
  --color-text-navy: #003081;
  --color-text-white: #ffffff;
  
  /* Colors - Background */
  --color-bg-hero: #003081;
  --color-bg-novelty: #fad200;
  --color-bg-sns-cp: #8cc8d8;
  --color-bg-intro: #ffefb1;
  --color-bg-contact: #fccf00;

  
  /* Colors - Interactive */
  --color-button: #fdc800;
  --color-button-navy: #003081;
  --color-icon-white: #ffffff;

    /* Container */
  --min-viewport-width: 767;
  --max-viewport-width: 2600;
  --min-fluid-ratio: calc(1 / var(--min-viewport-width) * 100dvi);
  --max-fluid-ratio: calc(1 / var(--max-viewport-width) * 100dvi);
  --max-fluid-height-ratio: calc(1 / var(--max-viewport-height) * 100dvh);
  --pc-layout-ratio: calc(.0625rem / 2);

  /* ========================================
     Typography
     ======================================== */
  
  /* Font Families */
  --font-family-base: "Local Noto Sans JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --font-family-en: "Roboto", sans-serif;
  
  /* Font Sizes */
  --font-size-sm: calc(26 * var(--min-fluid-ratio));
  --font-size-base: calc(28 * var(--min-fluid-ratio));
  --font-size-md: calc(32 * var(--min-fluid-ratio));
  --font-size-lg: calc(36 * var(--min-fluid-ratio));
  --font-size-xl: calc(38 * var(--min-fluid-ratio));

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  
  /* ========================================
     Components
     ======================================== */
  
  /* Border Radius */
  --radius-full: calc(1px / 0);
  
  /* ========================================
     Transitions
     ======================================== */
  
  
  /* Transition Timing */
    --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-bounce: cubic-bezier(0.41, -0.66, 0.07, 1.56);
    --ease-in-out-sine: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out-quad: cubic-bezier(0.445, 0.05, 0.55, 0.95); 
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); 
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-back-weak: cubic-bezier(0.34, 1.2, 0.64, 1);
    --ease-out-back-emphasis: cubic-bezier(.175, .885, .32, 1.275);
    --ease-out-quad: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  
  /* ========================================
     Z-index Scale
     ======================================== */
  
  --z-base: 1;
}

/* ===========================
   reset（リセット）
=========================== */
#suntory_contents {
   interpolate-size: allow-keywords;

   *,*::before,*::after {
      box-sizing: border-box
   }

   * {
      margin: 0
   }

   ul,ol {
      padding: 0
   }

   body {
      -webkit-font-smoothing: antialiased
   }

   img,picture,video,canvas,svg {
      display: block;
      max-width: 100%
   }

   input,button,textarea,select {
      font: inherit
   }

   p,h1,h2,h3,h4,h5,h6 {
      overflow-wrap: break-word
   }

   p {
      text-wrap: pretty
   }

   #root,#__next {
      isolation: isolate
   }

   em {
      font-style: normal
   }

   tbody {
      -webkit-text-size-adjust: 100%
   }

   details summary {
      cursor: pointer;
   }

   summary {
      display: block;
      list-style: none;
   }

   summary::marker {
      content: "";
   }

   summary::-webkit-details-marker {
      display:none;
   }

   details {
      &::details-content {
         @media (prefers-reduced-motion: no-preference) {
            overflow: clip;
            transition-duration: 0.5s;
            transition-property: content-visibility, block-size;
            transition-behavior: allow-discrete;
         }
      }

      &:not(:open)::details-content {
         block-size: 0;
      }
   }

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

/* ===========================
   hero（ヒーロー）
   構成: 見出し + メイン画像 + リボン + テキスト + アンカーボタン
=========================== */
#suntoryCommonFooter {
   position: relative !important;
   z-index: 20;
}
#suntoryCommonHeader {
   z-index: 20;
}

#suntory_contents {
   .pc-view {
      display: none;
   }

   .andST-cp {
      font-family: var(--font-family-base);    
   }
   

   .hero {
      background: url(../images/hero_bg.png) no-repeat center top / 100% auto;
      background-color: var(--color-bg-hero);
      padding-top: calc(98 * var(--min-fluid-ratio));
      padding-bottom: calc(138 * var(--min-fluid-ratio));

   }
   @supports (background-image: url('test.webp')) {
      .hero {
         background: url(../images/hero_bg.webp) no-repeat center top / 100% auto;
         background-color: var(--color-bg-hero);
      }
   }   
   .hero_top {
      position: relative;
   }

   .hero_title {
      width: calc(686 * var(--min-fluid-ratio));
      margin-inline: auto;
      img {
         transform: translateX(calc(20 * var(--min-fluid-ratio)));
      }
   }

   .hero_ribon {
      margin: calc(15 * var(--min-fluid-ratio)) auto 0;

   }

   .hero_img {
      width: calc(435 * var(--min-fluid-ratio));
      margin: calc(10 * var(--min-fluid-ratio)) auto 0;
      position: relative;
      z-index: 1;
      img {
         transform: translateX(calc(10 * var(--min-fluid-ratio)));
      }
   }

   .hero_date {
      position: absolute;
      width: calc(213 * var(--min-fluid-ratio));
      left: calc(25 * var(--min-fluid-ratio));
      bottom: calc(194 * var(--min-fluid-ratio));

   }

   .hero_about {
      padding-top: calc(48 * var(--min-fluid-ratio));
   }


   .hero_text {
      text-align: center;
      display: block grid;
      row-gap: calc(46 * var(--min-fluid-ratio));
   }

   .hero_heading {
      color: var(--color-text-white);
      font-size: calc(45 * var(--min-fluid-ratio));
      font-weight: var(--font-weight-bold);
      line-height: calc(75 / 45);
      letter-spacing: 0.06em;
   }

   .hero_lead {
      color: var(--color-text-white);
      font-size: calc(27 * var(--min-fluid-ratio));
      line-height: calc(54 / 27);
      letter-spacing: 0.1em;
   }

   .hero_anchorGroup {
      width: calc(680 * var(--min-fluid-ratio));
      margin: calc(81 * var(--min-fluid-ratio)) auto 0;
      display: block grid;
      row-gap: calc(39 * var(--min-fluid-ratio));

   }


/* ===========================
   novelty（ノベルティプレゼント）
   構成: 見出し + テキスト
=========================== */
   .cp-area {
      position: relative;
   }

   .l-section {
      position: relative;
      &::before {
         content: "";
         background: url(../images/novelty_bg.png) no-repeat center top / 100% auto;
         width: 100%;
         height: calc(90 * var(--min-fluid-ratio));
         position: absolute;
         top: -1px;
         left: 0;
      }
      .notes {
         font-size: calc(22 * var(--min-fluid-ratio));
         text-align: center;
         margin-top: calc(20 * var(--min-fluid-ratio));
      }
   }
   .novelty {
      background-color: var(--color-bg-novelty);
      padding-top: calc(233 * var(--min-fluid-ratio));
      padding-bottom: calc(129 * var(--min-fluid-ratio));

      &::before {
         background: url(../images/novelty_bg.png) no-repeat center top / 100% auto;
      }
   }

   .novelty_heading {
      width: calc(603 * var(--min-fluid-ratio));
      margin-inline: auto;
      position: relative;
   }

   .novelty_title {
      position: relative;
      z-index: 1;
   }

   .novelty_date {
      position: absolute;
      width: calc(208 * var(--min-fluid-ratio));
      right: calc(-66 * var(--min-fluid-ratio));
      top: calc(-86 * var(--min-fluid-ratio));
   }

   .novelty_lead1 {
      width: calc(721 * var(--min-fluid-ratio));
      margin: calc(53 * var(--min-fluid-ratio)) auto 0;
      img {
         transform: translateX(calc(18 * var(--min-fluid-ratio)));
      }

   }

   .novelty_lead2 {
      width: calc(690 * var(--min-fluid-ratio));
      margin: calc(-11 * var(--min-fluid-ratio)) auto 0;
   }


   .novelty_presentWrap {
      width: calc(673 * var(--min-fluid-ratio));
      height: calc(674 * var(--min-fluid-ratio));
      margin: calc(72 * var(--min-fluid-ratio)) auto 0;
      position: relative;
      background: url(../images/novelty_present-bg.png) no-repeat calc(3 * var(--min-fluid-ratio)) top / cover;
      p {
         position: absolute;
      }
   }

   .novelty_present1 {
      width: calc(297 * var(--min-fluid-ratio));
      left: calc(39 * var(--min-fluid-ratio));
      top: calc(1 * var(--min-fluid-ratio));
      z-index: 1;
   }

   .novelty_present2 {
      width: calc(298 * var(--min-fluid-ratio));
      right: calc(66 * var(--min-fluid-ratio));
      top: calc(1 * var(--min-fluid-ratio));
   }

   .novelty_present3 {
      width: calc(297 * var(--min-fluid-ratio));
      left: calc(96 * var(--min-fluid-ratio));
      bottom: calc(67 * var(--min-fluid-ratio));
      z-index: 1;
   }

   .novelty_present4 {
      width: calc(298 * var(--min-fluid-ratio));
      right: calc(7 * var(--min-fluid-ratio));
      bottom: calc(67 * var(--min-fluid-ratio));

   }
   .novelty_note {
      width: calc(640 * var(--min-fluid-ratio));
      margin: calc(32 * var(--min-fluid-ratio)) auto 0;
   }

   .novelty_noteText {
      font-size: calc(22 * var(--min-fluid-ratio));
      line-height: calc(37 / 22);
      letter-spacing: 0.08em;
      display: block grid;
      grid-template-columns: auto 1fr;
      align-items: baseline;
      color: var(--color-text-navy);
   }

   .novelty_contactText {
      width: calc(640 * var(--min-fluid-ratio));
      margin: calc(25 * var(--min-fluid-ratio)) auto 0;
      color: var(--color-text-navy);
      border: 1px solid var(--color-text-navy);
      padding: calc(30 * var(--min-fluid-ratio)) 0 calc(27 * var(--min-fluid-ratio));
      border-radius: calc(10 * var(--min-fluid-ratio));
      text-align: center;
      span {
         font-size: calc(25 * var(--min-fluid-ratio));
         letter-spacing: 0.05em;
         font-weight: var(--font-weight-medium);
         display: block;
      }
      b {
         font-size: calc(58 * var(--min-fluid-ratio));
         letter-spacing: 0.03em;
         font-family: var(--font-family-en);
         font-weight: var(--font-weight-medium);
         letter-spacing: 0.03em;
         display: block;
         margin-top: calc(10 * var(--min-fluid-ratio));
         color: var(--color-text-navy);
      }
      a {
         color: var(--color-text-navy);
         text-decoration: none;
      }
      small {
         font-size: calc(21 * var(--min-fluid-ratio));
         letter-spacing: 0.05em;
         display: block;
         margin-top: calc(-5 * var(--min-fluid-ratio));
      }
   }


/* ===========================
   sns-cp（SNSプレゼントキャンペーン）
   構成: 見出し + テキスト
=========================== */
   .sns-cp {
      background-color: var(--color-bg-sns-cp);
      padding-top: calc(231 * var(--min-fluid-ratio));
      padding-bottom: calc(166 * var(--min-fluid-ratio));
      &::before {
         background: url(../images/sns-cp_bg.png) no-repeat center top / 100% auto;
      }

      .notes {
         margin-top: 0;
      }
   }

   .sns-cp_heading {
      width: calc(603 * var(--min-fluid-ratio));
      margin-inline: auto;
      position: relative;
   }

   .sns-cp_title {
      position: relative;
      z-index: 1;
   }

   .sns-cp_date {
      position: absolute;
      width: calc(208 * var(--min-fluid-ratio));
      right: calc(-66 * var(--min-fluid-ratio));
      top: calc(-109 * var(--min-fluid-ratio));
   }

   .sns-cp_lead {
      width: calc(690 * var(--min-fluid-ratio));
      margin: calc(94 * var(--min-fluid-ratio)) auto 0;
   }

/* ===========================
   present（プレゼントコンポーネント）
   構成: タイトル + プレゼントリスト + 応募方法
=========================== */
   .present {
      width: calc(680 * var(--min-fluid-ratio));
      margin: 0 auto;
      position: relative;
      &:before {
         content: '';
         display: block;
         background: url(../images/block-head.png) no-repeat center top / 100% auto;
         width: 100%;
         height: calc(60 * var(--min-fluid-ratio));
      }
      &:after {
         content: '';
         display: block;
         background: url(../images/block-foot2.png) no-repeat center top / 100% auto;
         width: 100%;
         height: calc(60 * var(--min-fluid-ratio));
      }
   }
   
   .present.niko-and {
      margin-top: calc(207 * var(--min-fluid-ratio));
   }
   .present.bayflow {
      margin-top: calc(213 * var(--min-fluid-ratio));
   }

   .present_inner {
      background: url(../images/block-bg1.png) repeat-y center top / 100% auto;
      padding-top: calc(75 * var(--min-fluid-ratio));
      margin-top: -1px;
   }

   .present_title {
      width: calc(490 * var(--min-fluid-ratio));
      height: calc(442 * var(--min-fluid-ratio));
      position: absolute;
      inset: calc(-130 * var(--min-fluid-ratio)) 0 0 0;
      margin-inline: auto;
   }
   .present_lead {
      position: relative;
      z-index: 1;
      text-align: center;
      font-size: calc(28 * var(--min-fluid-ratio));
      line-height: calc(45 / 28);
      font-weight: var(--font-weight-semibold);
      display: block grid;
      row-gap: calc(25 * var(--min-fluid-ratio));
      &:before,
      &:after {
         content: "";
         display: block;
         width: calc(540 * var(--min-fluid-ratio));
         height: calc(12 * var(--min-fluid-ratio));
         background: url(../images/text_line.png) no-repeat center top / 100% auto;
         margin-inline: auto;
      }
      &:after {
         transform: rotate(180deg);
      }
   }

   .present_list {
      margin-top: calc(126 * var(--min-fluid-ratio));
      position: relative;
   }

   .present_item {
      display: block grid;
      position: relative;
   }
   .present_item:not(:last-child) {
      &:after {
         content: "";
         display: block;
         width: calc(420 * var(--min-fluid-ratio));
         height: 1px;
         border-bottom: 1px solid #000000;
         margin: calc(96 * var(--min-fluid-ratio)) auto 0;

      }
   }

   .present_itemImgWrap {
      order: -1;
      position: relative;
      margin-inline: auto;
      width: calc(500 * var(--min-fluid-ratio));
      height: calc(500 * var(--min-fluid-ratio));
      border-radius: calc(80 * var(--min-fluid-ratio));
   }

   .present.niko-and {
      .present_itemImgWrap {
         background-color: #fdf5d0;
      }
   }
   .present.bayflow {
      .present_itemImgWrap {
         background-color: #e8f3f6;
      }
   }

   .present_itemBadge {
      width: calc(117 * var(--min-fluid-ratio));
      position: absolute;
      right: calc(-25 * var(--min-fluid-ratio));
      bottom: calc(-40 * var(--min-fluid-ratio));
   }

   .present_itemImg {
      max-width: none;
      position: absolute;
   }
   .present_item1  {
      .present_itemImg{
         width: calc(584 * var(--min-fluid-ratio));
         left: calc(-41 * var(--min-fluid-ratio));
         top: calc(-15 * var(--min-fluid-ratio));
      }

      .present_itemHeading {
         margin-top: calc(70 * var(--min-fluid-ratio));
      }
   }
   .present_item2  {
      margin-top: calc(119 * var(--min-fluid-ratio));
      .present_itemImg{
         width: calc(297 * var(--min-fluid-ratio));
         inset: calc(-48 * var(--min-fluid-ratio)) 0 0 0;
         margin-inline: auto;
      }
      .present_itemHeading {
         margin-top: calc(51 * var(--min-fluid-ratio));
      }
      /* .present_itemText {
         margin-inline: auto;
         width: calc(540 * var(--min-fluid-ratio));
         span:first-child {
            display: inline-block;
            width: 8em;
            flex-shrink: 0;
            text-align: right;
         }

         span:last-child {
            flex: 1;
            width: fit-content;
         }
      }       */
   }
   .present_item3  {
      margin-top: calc(120 * var(--min-fluid-ratio));
      .present_itemImg{
         width: calc(500 * var(--min-fluid-ratio));
         top: calc(-52 * var(--min-fluid-ratio));
         left: calc(3 * var(--min-fluid-ratio));
      }
      .present_itemHeading {
         margin-top: calc(60 * var(--min-fluid-ratio));
      }
   }
   .present_item4  {
      .present_itemImg{
         width: calc(578 * var(--min-fluid-ratio));
         left: calc(-38 * var(--min-fluid-ratio));
         top: calc(-16 * var(--min-fluid-ratio));
      }

      .present_itemHeading {
         margin-top: calc(70 * var(--min-fluid-ratio));
      }
   }
   .present_item5  {
      margin-top: calc(119 * var(--min-fluid-ratio));
      .present_itemImg{
         width: calc(280 * var(--min-fluid-ratio));
         inset: calc(0 * var(--min-fluid-ratio)) 0 0 0;
         margin-inline: auto;
      }
      .present_itemHeading {
         margin-top: calc(52 * var(--min-fluid-ratio));
      }
   }
   .present_item6  {
      margin-top: calc(120 * var(--min-fluid-ratio));
      .present_itemImg{
         width: calc(622 * var(--min-fluid-ratio));
         top: calc(-24 * var(--min-fluid-ratio));
         left: calc(-61 * var(--min-fluid-ratio));
      }
      .present_itemHeading {
         margin-top: calc(52 * var(--min-fluid-ratio));
      }
   }
   .present_itemHeading {
      font-size: calc(36 * var(--min-fluid-ratio));
      font-weight: var(--font-weight-bold);
      text-align: center;
      letter-spacing: 0.08em;
   }

   .present_itemTextWrap {
      margin-top: calc(9 * var(--min-fluid-ratio));
      text-align: center;
   }

   .present_itemText {
      font-size: calc(24 * var(--min-fluid-ratio));
      line-height: calc(35 / 24);
      font-weight: var(--font-weight-light);
      /* display: block flex;
      justify-content: center; */
      letter-spacing: 0.05em;
   }

   .present_appli {
      background: url(../images/block-bg2.png) repeat-y center top / 100% auto;
      padding-top: calc(80 * var(--min-fluid-ratio));
      margin-top: calc(97 * var(--min-fluid-ratio));
      padding-bottom: calc(10 * var(--min-fluid-ratio));
   }

   .present_appliTitle {
      width: calc(360 * var(--min-fluid-ratio));
      margin-inline: auto;
   }


   .present_stepList {
      width: calc(600 * var(--min-fluid-ratio));
      margin-inline: auto;
      margin-top: calc(75 * var(--min-fluid-ratio));
   }

   .present_stepItem {
      display: block grid;
      row-gap: calc(29 * var(--min-fluid-ratio));
   }

   .present_stepItem2 {
      margin-top: calc(76 * var(--min-fluid-ratio));
   }
   .present_stepItem3 {
      margin-top: calc(28 * var(--min-fluid-ratio));
   }

   .present_stepTitle {
      width: calc(540 * var(--min-fluid-ratio));
      margin-inline: auto;
   }

   .present_stepImg {
      width: calc(540 * var(--min-fluid-ratio));
      margin-inline: auto;
   }

   .present_stepText {
      font-size: calc(29 * var(--min-fluid-ratio));
      line-height: calc(50 / 29);
      letter-spacing: 0.05em;
      text-align: center;
   }
   .present_stepBtn {
      width: calc(560 * var(--min-fluid-ratio));
      margin-inline: auto;      
      display: block grid;
      place-items: center;
      height: calc(100 * var(--min-fluid-ratio));
      background-color: var(--color-button);
      border-radius: var(--radius-full);
      font-size: calc(30 * var(--min-fluid-ratio));
      letter-spacing: 0.06em;
      font-family: var(--font-family-en);
      font-weight: var(--font-weight-medium);
      text-decoration: none;
      color: var(--color-text-primary);
   }

   .present_details {
      width: calc(700 * var(--min-fluid-ratio));
      margin-inline: auto;
      margin-top: calc(65 * var(--min-fluid-ratio));
      details {
         summary {
            width: calc(640 * var(--min-fluid-ratio));
            margin-inline: auto;
            background-color: var(--color-bg-hero);
            padding: calc(4 * var(--min-fluid-ratio));
            text-align: center;
            color: var(--color-text-white);
            font-size: calc(29 * var(--min-fluid-ratio));
            position: relative;
            font-weight: var(--font-weight-semibold);
            border-radius: calc(10 * var(--min-fluid-ratio));
            .text {
               display: block grid;
               height: calc(82 * var(--min-fluid-ratio));
               place-items: center;
               border-radius: calc(6 * var(--min-fluid-ratio));
               border: 1px solid #fff;
               letter-spacing: 0.2em;
            }
            .icon {
               --icon-size: calc(36 * var(--min-fluid-ratio));
               display: block;
               width: var(--icon-size);
               height: var(--icon-size);
               position: absolute;
               inset: 0 calc(29 * var(--min-fluid-ratio)) 0 auto;
               margin-block: auto;
               border: 1px solid var(--color-icon-white);
               border-radius: var(--radius-full);
               &::before,
               &::after {
                  --icon-line-size: calc(20 * var(--min-fluid-ratio));
                  display: block;
                  content: "";
                  position: absolute;
                  background-color: var(--color-icon-white);
               }
               &::before {
                  width: 1px;
                  height: var(--icon-line-size);
                  margin: auto;
                  inset: 0;
                  transition: transform 0.5s ease-in-out;
               }
               &::after {
                  width: var(--icon-line-size);
                  height: 1px;
                  margin: auto;
                  inset: 0;
               }
            }
         }
         &[open] {
            summary {
               .icon {
                  &::before {
                        opacity: 0;
                  }
               }
            }
         } 
         .details_content {
            padding: calc(40 * var(--min-fluid-ratio));
            background-color: #fff;
            margin-top: calc(20 * var(--min-fluid-ratio));
            border-radius: calc(20 * var(--min-fluid-ratio));
            .terms {
               display: block grid;
               row-gap: calc(40 * var(--min-fluid-ratio));
               font-size: calc(29 * var(--min-fluid-ratio));               
            }
            ul,ol {
               list-style-type: none;
            }
            li {
               display: block grid;
               grid-template-columns: auto 1fr;
               align-items: baseline;
            }
            a:hover {
               text-decoration: none;
               opacity: 1 !important;

            }

            dt {
               font-weight: var(--font-weight-bold);
            }
         }
      }
   }


/* ===========================
   intro（紹介）
   構成: 見出し + テキスト
=========================== */
   .intro {
      background-color: var(--color-bg-intro);
      padding-top: calc(213 * var(--min-fluid-ratio));
      padding-bottom: calc(130 * var(--min-fluid-ratio));
      &::before {
         background: url(../images/intro_bg.png) no-repeat center top / 100% auto;
      }
   }

   .intro_title {
      width: calc(491 * var(--min-fluid-ratio));
      margin-inline: auto;
      position: relative;
      img {
         transform: translateX(calc(2 * var(--min-fluid-ratio)));
      }
   }

   .brand {
      width: calc(680 * var(--min-fluid-ratio));
      margin: 0 auto;
      position: relative;
      &:before {
         content: '';
         display: block;
         background: url(../images/block-head.png) no-repeat center top / 100% auto;
         width: 100%;
         height: calc(60 * var(--min-fluid-ratio));
      }
      &:after {
         content: '';
         display: block;
         background: url(../images/block-foot1.png) no-repeat center top / 100% auto;
         width: 100%;
         height: calc(60 * var(--min-fluid-ratio));
      }
   }
   
   .brand.niko-and {
      margin-top: calc(86 * var(--min-fluid-ratio));
   }
   .brand.bayflow {
      margin-top: calc(80 * var(--min-fluid-ratio));
   }

   .brand_inner {
      background: url(../images/block-bg1.png) repeat-y center top / 100% auto;
      padding-top: calc(50 * var(--min-fluid-ratio));
      padding-bottom: calc(56 * var(--min-fluid-ratio));
      margin-top: -1px;
   }

   .brand_img {
      width: calc(500 * var(--min-fluid-ratio));
      margin-inline: auto;

   }

   .brand_title {
      width: calc(348 * var(--min-fluid-ratio));
      margin: calc(42 * var(--min-fluid-ratio)) auto 0;
   }

   .brand.niko-and {
      .brand_title img {
         transform: translateX(calc(18 * var(--min-fluid-ratio)));
      }
   }
   .brand.bayflow {
      .brand_title {
         width: calc(335 * var(--min-fluid-ratio));
         margin: calc(41 * var(--min-fluid-ratio)) auto 0;
      }      
      .brand_title img {
         transform: translateX(calc(5 * var(--min-fluid-ratio)));
      }
   }

   .brand_text {
      width: calc(540 * var(--min-fluid-ratio));
      margin: calc(51 * var(--min-fluid-ratio)) auto 0;
      font-size: calc(24 * var(--min-fluid-ratio));
      line-height: calc(47 / 24);
      letter-spacing: 0.08em;
   }

   .brand_link {
      width: calc(540 * var(--min-fluid-ratio));
      display: block grid;
      grid-template-columns: calc(274 * var(--min-fluid-ratio)) 1fr;
      column-gap: calc(37 * var(--min-fluid-ratio));
      margin-inline: auto;
      margin-top: calc(32 * var(--min-fluid-ratio));
      align-items: center;
   }

   .btn-window {
      border-radius: var(--radius-full);
      background-color: var(--color-button-navy);
      color: var(--color-text-white);
      display: block grid;
      align-items: center;
      grid-template-columns: max-content calc(27 * var(--min-fluid-ratio));
      column-gap: calc(18 * var(--min-fluid-ratio));
      height: calc(70 * var(--min-fluid-ratio));
      padding: calc(10 * var(--min-fluid-ratio)) calc(20 * var(--min-fluid-ratio)) calc(10 * var(--min-fluid-ratio)) calc(50 * var(--min-fluid-ratio));
      font-size: calc(24 * var(--min-fluid-ratio));
      text-decoration: none;
      letter-spacing: 0.15em;
   }

   .brand_sns {
      display: block grid;
      align-items: center;
      grid-template-columns: calc(40 * var(--min-fluid-ratio)) 
      calc(37 * var(--min-fluid-ratio)) 
      calc(41 * var(--min-fluid-ratio)) 
      calc(45 * var(--min-fluid-ratio));
      column-gap: calc(23 * var(--min-fluid-ratio));
      
   }

   .illustrator {
      width: calc(540 * var(--min-fluid-ratio));
      margin-inline: auto;
      position: relative;
      margin-top: calc(64 * var(--min-fluid-ratio));
      &:before {
         --icon-size: calc(112 * var(--min-fluid-ratio));
         content: "";
         display: block;
         background: url(../images/icon-cross.png) no-repeat center / cover;
         width: var(--icon-size);
         aspect-ratio: 1;
         margin-inline: auto;
         margin-bottom: calc(50 * var(--min-fluid-ratio));

      }
   }
   .illustrator_top {
      display: block grid;
      grid-template-columns: calc(236 * var(--min-fluid-ratio)) 1fr;
      column-gap: calc(31 * var(--min-fluid-ratio));
      align-items: start;
   }

   .illustrator_heading {
      margin-top: calc(26 * var(--min-fluid-ratio));
   }

   .illustrator_about {
      font-size: calc(25 * var(--min-fluid-ratio));
      letter-spacing: 0.05em;
      font-family: var(--font-family-en);
      font-weight: var(--font-weight-light);
      margin-left: calc(2 * var(--min-fluid-ratio));
   }

   .illustrator_name {
      display: block grid;
      margin-top: calc(26 * var(--min-fluid-ratio));

      .en {
         font-size: calc(47 * var(--min-fluid-ratio));
         line-height: calc(51 / 47);
         letter-spacing: 0.05em;
         font-family: var(--font-family-en);
         font-weight: var(--font-weight-normal);
      }
      .ja {
         font-size: calc(28 * var(--min-fluid-ratio));
         letter-spacing: 0.08em;
         font-weight: var(--font-weight-normal);
      }
   }

   .illustrator_text {
      margin-top: calc(27 * var(--min-fluid-ratio));
      font-size: calc(24 * var(--min-fluid-ratio));
      line-height: calc(47 / 24);
      letter-spacing: 0.08em;
   }

   .illustrator_link {
      display: block grid;
      grid-template-columns: 
      calc(274 * var(--min-fluid-ratio)) 
      calc(40 * var(--min-fluid-ratio));
      column-gap: calc(37 * var(--min-fluid-ratio));
      margin-inline: auto;
      margin-top: calc(34 * var(--min-fluid-ratio));
      align-items: center;
   }

   .contact {
      background: url(../images/contact_bg.png) no-repeat center bottom / 100% auto;
      background-color: var(--color-bg-contact);
      padding-top: calc(122 * var(--min-fluid-ratio));
      padding-bottom: calc(230 * var(--min-fluid-ratio));
      position: relative;
      text-align: center;
      color: var(--color-text-navy);
   }

   .contact_heading {
      font-size: calc(25 *  var(--min-fluid-ratio));
      font-weight: var(--font-weight-medium);
      letter-spacing: 0.03em;
   }
   .contact_title {
      font-size: calc(30 *  var(--min-fluid-ratio));
      font-weight: var(--font-weight-semibold);
      letter-spacing: 0.03em;
      margin-top: calc(30 * var(--min-fluid-ratio));
   }
   .contact_text {
      margin-top: calc(-6 * var(--min-fluid-ratio));
      span {
         font-size: calc(25 * var(--min-fluid-ratio));
         letter-spacing: 0.05em;
         font-weight: var(--font-weight-medium);
         display: block;
         margin-top: calc(-8 * var(--min-fluid-ratio));
      }
      b {
         font-size: calc(58 * var(--min-fluid-ratio));
         letter-spacing: 0.03em;
         font-family: var(--font-family-en);
         font-weight: var(--font-weight-medium);
         letter-spacing: 0.03em;
         display: block;
         margin-top: calc(10 * var(--min-fluid-ratio));
         color: var(--color-text-navy);
      }
      a {
         color: var(--color-text-navy);
         text-decoration: none;
      }
      small {
         font-size: calc(21 * var(--min-fluid-ratio));
         letter-spacing: 0.05em;
         display: block;
         margin-top: calc(6 * var(--min-fluid-ratio));
      }

   }
   .fade-in-btm-slowly {
      opacity: 0;
      transform: translateY(30px);
      will-change: transform;
      &.is-inview {
         opacity: 1;
         transform: translateY(0);
         transition: all 1.2s var(--ease-out-cubic);
      }
   }
   .close {
      --img-size: calc(92 * var(--min-fluid-ratio));
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(100% + var(--img-size));
      z-index: 5;
      opacity: .85;
      padding-block: calc(280 * var(--min-fluid-ratio));

      .close_bg {
         margin-top: 0;
         height: 100%;
         background-color: #000000;
         &:before,
         &:after {
            content: "";
            display: block;
            height: calc(280 * var(--min-fluid-ratio));
            position: absolute;
            width: 100%;
            left: 0;
         }
         &:before {
            background: url(../images/close-head.png) no-repeat center top / 100% auto;
            top: 0;
         }
         &:after {
            background: url(../images/close-foot.png) no-repeat center bottom / 100% auto;
            bottom: 0;
         }
      }
   }
   .close_text {
      position: absolute;
      inset-inline: 0;
      margin-inline: auto;
      width: calc(461 * var(--min-fluid-ratio));
      z-index: 10;
   }
   .close_text1 {
      inset-block-start: calc(1600 * var(--min-fluid-ratio));
   }
   .close_text2 {
      inset-block-start: calc(1260 * var(--min-fluid-ratio));
   }
}

@media screen and (min-width: 768px) {
   body {
      min-width: 960px;
   }
   #suntory_contents {
      .andST-cp {
         --wrapper-width: 384px;
         --min-fluid-ratio: var(--pc-layout-ratio);
      }
      .wrapper {
         width: var(--wrapper-width);
         margin-inline: auto;
         position: relative;
         z-index: 10;
         &::before,
         &::after {
            content: "";
            width: 35px;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            background: url(../images/pc_shadow.png) repeat-y center top / 100% auto;
         }
         &::before {
            left: -35px;
         }
         &::after {
            right: -35px;
            transform: rotate(-180deg);
         }
      }
      .pc-view {
         grid-template-columns: repeat(2, calc(50% - calc(var(--wrapper-width) / 2)));
         column-gap: var(--wrapper-width);
         display: block grid;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 1;
         overflow: hidden;
      }
      .pc-view_bg {
         position: fixed;
         width: 100%;
         height: 100%;
         background: url(../images/pc-bg.png) no-repeat center top / cover;
         z-index: -1;
         pointer-events: none;
         &:before,
         &:after {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
         }
         &:before {
            top: 0;
            background: url(../images/pc-bg_head.png) no-repeat center var(--header-height) / 100% auto;
            transition: all 0.15s ease-in-out;
         }
         &:after {
            bottom: 0;
            background: url(../images/pc-bg_foot.png) no-repeat center bottom / 100% auto;
            will-change: transform;
         }
      }
      .andST-cp.is-active .pc-view_bg {
         &:before {
            background-position: center 0, center bottom, center;
         }
      }
      .pc-view_img {
         display: none;
         place-items: center;
         img {
            width: calc(523 * var(--max-fluid-ratio));
         }
      }
      .pc-view_link {
         display: none;
         place-items: center;
      }
      .pc-view_linkInner {
         display: block grid;
         row-gap: calc(58 * var(--min-fluid-ratio));
      }
      .pc-view_linkTitle {
         width: calc(219 * var(--max-fluid-ratio));
         margin-inline: auto;
      }
      .pc-view_linkNav {
         display: block grid;
         row-gap: calc(30 * var(--min-fluid-ratio));
         
         a {
            img {
               width: calc(545 * var(--max-fluid-ratio));
            }
         }
      }
   }
}

@media screen and (min-width: 1024px) {
    #suntory_contents {
      .pc-view_img {
         display: block grid;
      }
      .pc-view_link {
         display: block grid;
      }   
      a,
      details summary {
         transition: opacity 0.3s ease-in-out;
      }
      a:hover,
      details summary:hover {
         opacity: .75;
      }      
    }
}

@media screen and (max-height: 750px) {
   #suntory_contents {
      .pc-view {
         height: auto;
         min-height: 100vh;
         padding-block: 2vh;
      }

      .pc-view_img {
         img {
            width: calc(523 * var(--max-fluid-ratio) * 0.7);
         }
      }

      .pc-view_linkInner {
         row-gap: calc(58 * var(--min-fluid-ratio) * 0.5);
      }

      .pc-view_linkTitle {
         width: calc(219 * var(--max-fluid-ratio) * 0.7);
      }

      .pc-view_linkNav {
         row-gap: calc(30 * var(--min-fluid-ratio) * 0.5);
         
         a {
            img {
               width: calc(545 * var(--max-fluid-ratio) * 0.7);
            }
         }
      }
   }
}

@media screen and (max-height: 580px) { 
    #suntory_contents {
      .pc-view_img {
         display: none;
      }
      .pc-view_link {
         display: none;
      }
    }

}