@charset "UTF-8";

:root{
  --sub-color-1: #9e521e;
  --product01-color: #00b9ef;
  --product02-color: #ee7802;
  --product03-color: #e75863;
  --product01-sub-color: #0077ca;
  --product02-sub-color: #a72800;
  --product03-sub-color: #a81d2a;
}
#ns-extension{
  width: 100%;
  font-feature-settings: "palt" 1;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #333333;
  background-image: url(../images/main_bg.webp);
  background-position: center top;
  background-repeat: repeat;
  background-size: min(550%, 2200px) auto;
}

.ozk-cont,
.ozk-gbox,
.ozk-elem,
.ozk-elem > img,
.ozk-elem > picture > img{
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
.ozk-elem{
  font-size: 1rem;
  font-weight: 600;
  word-wrap: break-word;
  text-align: justify;
  letter-spacing: 0.05em;
  line-height: 1;
}
.ozk-fbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start
}
.ozk-fitem {
  flex: 0 0 auto;
  margin: 0;
}





.ozk-kv{
  overflow: hidden;
  margin-bottom: min(20vw, 80px);
}
#ozk-kv-wrapper {
  position: relative;
  opacity: 0;
  transition: opacity 0.8s ease;
  margin-bottom: min(10vw, 40px);
}
#ozk-kv-wrapper.ozk-is-ready { opacity: 1; }

#ozk-kv-main {
  position: relative;
  z-index: 1;
}

.ozk-kv-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  will-change: opacity;
}

.ozk-kv-scene[data-unplayed] {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.ozk-kv-scene.ozk-is-active {
  z-index: 2;
  pointer-events: auto;
  animation: ozkFadeIn var(--nsex-kv-fade-time, 1000ms) ease forwards;
}

.ozk-kv-scene:not(.ozk-is-active):not([data-unplayed]) {
  animation: ozkFadeOut var(--nsex-kv-fade-time, 1000ms) ease forwards;
}
@keyframes ozkFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ozkFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.ozk-kv-logo{
  position: absolute;
  width: 112.5%;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}
.ozk-kv-sizzle{
  position: absolute;
  width: 103%;
  top: 38.5%;
  left: 50%;
  transform: translateX(-48%);
}
.ozk-kv-deco-1,
.ozk-kv-deco-2{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.ozk-kv-deco-2{
  z-index: 20;
}
#ozk-kv-nav{
  position: relative;
  z-index: 2;
  display: flex;
  width: auto;
  max-width: 400px;
  justify-content: center;
  align-items: end;
  gap: 0 4%;
  margin-top: max(-20%, -80px);
}
#ozk-kv-nav li{
  cursor: pointer;
  margin: 0;
  transition: all 0.3s ease;
  transform: translateZ(0);
}
#ozk-kv-nav li:nth-child(1){
  width: 20.5%;
}
#ozk-kv-nav li:nth-child(2){
  width: 19.5%;
}
#ozk-kv-nav li:nth-child(3){
  width: 21%;
}
#ozk-kv-nav li:nth-child(1).ozk-is-active{
  filter: drop-shadow(0 0 8px #00b8ee) drop-shadow(0 0 4px #00b8ee);
}
#ozk-kv-nav li:nth-child(2).ozk-is-active{
  filter: drop-shadow(0 0 8px #ed7700) drop-shadow(0 0 4px #ed7700);
}
#ozk-kv-nav li:nth-child(3).ozk-is-active{
  filter: drop-shadow(0 0 8px #e9545d) drop-shadow(0 0 4px #e9545d);
}
.ozk-kv-text{
  width: 90%;
  max-width: 360px;
  color: #530000;
  font-size: min(4.4vw, 1.1rem);
  line-height: 2;
  text-align: center;
}
.ozk-kv-text > span{
  display: inline-block;
}
.ozk-about-zenryu{
  background-color: rgba(250, 216, 141, 0.6);
  padding: 8% 5%;
}
.ozk-about-zenryu > h2{
  color: #9e521e;
  text-align: center;
  font-size: min(7.2vw, 1.8rem);
  margin-bottom: 5%;
}
.ozk-about-zenryu > p{
  color: #530000;
  text-align: center;
  font-size: min(4.4vw, 1.1rem);
  line-height: 1.5;
  margin-bottom: 8%;
}
.ozk-about-zenryu > p > span{
  display: inline-block;
}
.ozk-about-zenryu > p > span > span{
  color: #e6380d;
}
.ozk-about-zenryu > small{
  color: #530000;
  font-size: min(3.2vw, 0.8rem);
  margin-bottom: 6%;
}
.ozk-lineup{
  background-image: linear-gradient(to bottom, rgba(255, 255, 240, 1) 0%, rgba(255, 254, 142, 0.2) 60%), url(../images/lineup_bg.webp);
  background-position: center top;
  background-size: cover;
  background-repeat: repeat-x;
  padding: 15% 5% 20% 5%;
}
.ozk-lineup > h2{
  display: inline-block;
  color: #ffffff;
  background-color: #88391e;
  font-size: min(7.2vw, 1.8rem);
  text-align: center;
  border-radius: min(2.5vw, 10px);
  padding: 0.3em 0;
  margin-bottom: 7.22%;
}
.ozk-lineup-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.ozk-lineup-list > dt{
  align-self: end;
  text-align: center;
}
.ozk-lineup-list > dt > a{
  display: contents;
}
.ozk-lineup-list > dt > a > img{
  margin-bottom: min(2.5vw, 10px);
}
.ozk-lineup-list > dt > a[href="#product-01"] > img{
  width: 35vw;
  max-width: 140px;
}
.ozk-lineup-list > dt > a[href="#product-02"] > img{
  width: 33.25vw;
  max-width: 133px;
}
.ozk-lineup-list > dt > a[href="#product-03"] > img{
  width: 35.5vw;
  max-width: 142px;
}
.ozk-lineup-list > dt > a > span{
  position: relative;
  display: inline-block;
  text-decoration: none;
  width: auto;
  border-radius: 9999px;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  z-index: 1;
  padding: min(2.5vw, 10px) min(8vw, 32px) min(2vw, 8px) min(8vw, 32px);
}
.ozk-lineup-list > dt > a[href="#product-01"] > span{
  background-color: var(--product01-color);
}
.ozk-lineup-list > dt > a[href="#product-02"] > span{
  background-color: var(--product02-color);
}
.ozk-lineup-list > dt > a[href="#product-03"] > span{
  background-color: var(--product03-color);
}
.ozk-lineup-list > dt > a > span > span{
  display: block;
}
.ozk-lineup-list > dt > a > span > span:first-child{
  letter-spacing: 0;
  font-size: min(4vw, 1rem);
}
.ozk-lineup-list > dt > a > span > span:last-child{
  font-size: min(6vw, 1.5rem);
}
.ozk-lineup-list > dd{
  align-self: start;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: min(5vw, 20px);
  padding: min(10vw, 40px) min(6.5vw, 26px) min(6vw, 24px) min(6.5vw, 26px);
  margin-top: max(-7vw, -28px);
}
.ozk-lineup-detail-1 .ozk-lineup-detail-header{
  width: 63%;
  margin-bottom: 5%;
}
.ozk-lineup-detail-2 .ozk-lineup-detail-header{
  width: 80%;
  margin-bottom: 5%;
}
.ozk-lineup-detail-text{
  color: var(--sub-color-1);
  line-height: 1.4;
  font-size: min(3.6vw, 0.9rem);
}
.ozk-lineup-detail-1 .ozk-lineup-detail-image{
  width: 67vw;
  max-width: 268px;
}
.ozk-lineup-feature{
  max-width: 360px;
  background-color: #ffd402;
  border-radius: min(5vw, 20px);
  padding: min(6vw, 24px) 0;
}
.ozk-lineup-feature > picture > img{
  width: 85%;
}
.ozk-product-header{
  margin-bottom: min(16vw, 64px);
}
#product-01 .ozk-product-header{ background-color: var(--product01-color); }
#product-02 .ozk-product-header{ background-color: var(--product02-color); }
#product-03 .ozk-product-header{ background-color: var(--product03-color); }

.ozk-product-header > div{
  display: grid;
}
.ozk-product-package{
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.7));
  transform: translateZ(0);
}
.ozk-product-sizzle,
.ozk-product-nutrient,
.ozk-product-sizzle-note{
  grid-row: 4 / 5;
}
.ozk-product-note{
  color: #ffffff;
  font-size: min(3vw, 0.75rem);
  line-height: 1.5;
  letter-spacing: 0;
  padding-left: 1.2em;
}
.ozk-product-note::before{
  content: "※";
  display: inline-block;
  width: 1.2em;
  margin-left: -1.2em;
}
.ozk-product-sub-catch{
  color: #ffffff;
  text-align: center;
  padding: min(5%, 20px) 0;
  margin-top: max(-3%, -12px);
}
#product-01 .ozk-product-sub-catch{ background-color: var(--product01-sub-color); }
#product-02 .ozk-product-sub-catch{ background-color: var(--product02-sub-color); }
#product-03 .ozk-product-sub-catch{ background-color: var(--product03-sub-color); }

.ozk-product-cont{
  max-width: 400px;
  padding: 0 min(5%, 20px);
  margin-bottom: min(22.5vw, 90px);
}
.ozk-product-cont > h3{
  font-size: clamp(18px, 7.2vw, 1.8rem);
  text-align: center;
  line-height: 1;
  background-size: min(2vw, 8px) min(2vw, 8px);
  background-position: left bottom;
  background-repeat: repeat-x;
  padding-bottom: 3%;
  margin-bottom: 8%;
}
#product-01 .ozk-product-cont > h3{
  color: var(--product01-sub-color);
  background-image: radial-gradient(circle farthest-side, var(--product01-sub-color) 0%, var(--product01-sub-color) 50%, transparent 50%, transparent 100%);
}
#product-02 .ozk-product-cont > h3{
  color: var(--product02-sub-color);
  background-image: radial-gradient(circle farthest-side, var(--product02-sub-color) 0%, var(--product02-sub-color) 50%, transparent 50%, transparent 100%);
}
#product-03 .ozk-product-cont > h3{
  color: var(--product03-sub-color);
  background-image: radial-gradient(circle farthest-side, var(--product03-sub-color) 0%, var(--product03-sub-color) 50%, transparent 50%, transparent 100%);
}
.ozk-product-graph{
  width: 90vw;
  max-width: 360px;
  margin-bottom: min(17.5vw, 70px);
}
.ozk-product-howto{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 5%;
}
.ozk-product-howto dt{
  grid-column: 1 / 3;
  display: inline-block;
  color: #ffffff;
  font-size: min(6.4vw, 1.6rem);
  text-align: center;
  border-radius: min(2.5vw, 10px);
  padding: 0.6em 0;
  margin-bottom: 5%;
}
.ozk-product-howto dt:not(.ozk-product-howto dt:first-child){
  margin-top: 13%;
}
#product-01 .ozk-product-howto dt{
  line-height: 1.2;
}
.ozk-product-howto dt > span{
  display: inline-block;
  width: 100%;
}
.ozk-product-howto dt > span:nth-child(2):not(#product-01 .ozk-product-howto dt > span){
  font-size: min(4vw, 1rem);
}
#product-01 .ozk-product-howto dt{ background-color: var(--product01-sub-color); }
#product-02 .ozk-product-howto dt{ background-color: var(--product02-sub-color); }
#product-03 .ozk-product-howto dt{ background-color: var(--product03-sub-color); }

.ozk-product-howto dd{
  position: relative;
}
#product-02 .ozk-product-howto dd:nth-child(7),
#product-03 .ozk-product-howto dd:nth-child(2),
#product-03 .ozk-product-howto dd:nth-child(4),
#product-03 .ozk-product-howto dd:nth-child(11){
  grid-column: 1 / 3;
}
#product-02 .ozk-product-howto dd:nth-child(2),
#product-02 .ozk-product-howto dd:nth-child(3),
#product-02 .ozk-product-howto dd:nth-child(4),
#product-02 .ozk-product-howto dd:nth-child(5){
  width: 88.88%
}
.ozk-product-howto-cut{
  width: 40vw;
  max-width: 160px;
  border-radius: 9999px;
  margin-bottom: 0.6em;
}
#product-01 .ozk-product-howto-cut{ background-color: var(--product01-color); }
#product-02 .ozk-product-howto-cut{ background-color: var(--product02-color); }
#product-03 .ozk-product-howto-cut{ background-color: var(--product03-color); }

.ozk-product-howto-num{
  position: absolute;
  top: 0;
  left: 0;
  width: 23%;
  margin-top: 3%;
  margin-left: 3%;
  border-radius: 9999px;
  border: 2.5px solid #ffffff;
}
#product-02 .ozk-product-howto-num{ background-color: var(--product02-sub-color); }
#product-03 .ozk-product-howto-num{ background-color: var(--product03-sub-color); }

.ozk-product-howto dd > p{
  font-size: min(3.2vw, 0.8rem);
  line-height: 1.4;
}
#product-01 .ozk-product-howto dd > p{
  color: var(--product01-color);
  text-align: center;
  font-size: min(4vw, 1rem);
}
#product-01 .ozk-product-howto + p{
  text-align: center;
  font-size: min(3.6vw, 0.9rem);
  margin-top: 1.5em;
}
.ozk-recipe-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 6%;
}
.ozk-recipe-list > li{
  position: relative;
  margin-bottom: 22%;
}
.ozk-recipe-list a{
  color: #333333;
  text-decoration: none;
}
.ozk-recipe-photo{
  border-radius: 1em;
}
.ozk-recipe-icon{
  position: absolute;
  display: flex;
  gap: 0.3em;
  top: -5%;
  left: -5%;
  width: 33%;
}
.ozk-recipe-icon > img{
  flex: 0 0 auto;
}
.ozk-recipe-name{
  text-align: center;
  font-size: clamp(10px, 3.6vw, 0.9rem);
  line-height: 1.2;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-top: 0.5em;
}
.ozk-recipe-name > span{
  display: inline-block;
}
.ozk-report{
  background-color: #038f37;
  padding: 10% 5% 15% 5%;
}
.ozk-report > h2{
  margin-bottom: 6%;
}
.ozk-report > p{
  color: #ffffff;
  line-height: 2;
  font-size: clamp(10px, 3.6vw, 0.9rem);
  margin-bottom: 6%;
}



@media screen and (min-width: 400px){
  .ozk-about-zenryu{
    padding-right: calc((100% - 400px) / 2 + 400px * 0.05);
    padding-left: calc((100% - 400px) / 2 + 400px * 0.05);
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .ozk-lineup{
    padding-right: calc((100% - 400px) / 2 + 400px * 0.05);
    padding-left: calc((100% - 400px) / 2 + 400px * 0.05);
    padding-top: 60px;
    padding-bottom: 80px;
  }
  .ozk-report{
    padding-right: calc((100% - 400px) / 2 + 400px * 0.05);
    padding-left: calc((100% - 400px) / 2 + 400px * 0.05);
    padding-top: 40px;
    padding-bottom: 60px;
  }
}



@media screen and (max-width: 599px){
  #ozk-kv-wrapper{
    width: 90%;

  }
  #ozk-kv-main {
    aspect-ratio: 40 / 72;
    width: auto;

    max-height: 80svh;
  }
  .ozk-kv-deco-1,
  .ozk-kv-deco-2{
    width: 200%;
  }
  .ozk-kv-text,
  .ozk-about-zenryu > p{
    letter-spacing: 0;
  }
  .ozk-about-zenryu{
    position: relative;
  }
  .ozk-about-zenryu::after{
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background-image: url(../images/about_zenryu_deco_oats_sp.webp);
    background-size: min(23vw, 92px) auto;
    background-position: right top;
    background-repeat: no-repeat;
    margin-top: max(-20vw, -80px);
    pointer-events: none;
  }
  .ozk-lineup-list > dt:nth-child(1){
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .ozk-lineup-list > dt:nth-child(2){
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .ozk-lineup-list > *:nth-child(n + 3){
    grid-column: 1 / 3;
  }
  .ozk-lineup-detail-1{
    margin-bottom: min(12.5vw, 50px);
  }
  .ozk-lineup-detail-2{
    margin-bottom: min(5vw, 20px);
  }
  .ozk-lineup-detail-text > br{
    display: none;
  }
  .ozk-product-header > div{
    max-width: 400px;
    padding-top: min(11.25vw, 45px);
  }
  .ozk-product-header > div > *{
    grid-column: 1 / 2;
  }
  .ozk-product-package{
    width: 56.25%;
    margin-bottom: 6%;
  }
  .ozk-product-catch{
    margin-bottom: 5%;
  }
  #product-01 .ozk-product-catch{ width: 75%; }
  #product-02 .ozk-product-catch{ width: 64.5%; }
  #product-03 .ozk-product-catch{ width: 72.25%; }

  .ozk-product-name{
    margin-bottom: 5%;
  }
  #product-01 .ozk-product-name{ width: 60%; }
  #product-02 .ozk-product-name{ width: 54%; }
  #product-03 .ozk-product-name{ width: 88%; }

  .ozk-product-sizzle{
    width: 95.75%;
    margin: 0 0 0 auto;
  }
  .ozk-product-nutrient{
    margin-top: -2%;
  }
  #product-01 .ozk-product-nutrient{ width: 77%; }
  #product-02 .ozk-product-nutrient{ width: 96%; }
  #product-03 .ozk-product-nutrient{ width: 77%; }

  .ozk-product-sizzle-note{
    width: 13.25%;
    margin: 85% 5% 0 auto;
  }
  .ozk-product-note{
    width: 90%;
    margin-top: -2%;
    margin-bottom: 3%;
  }
  .ozk-product-note > br{
    display: none;
  }
  #product-03 .ozk-product-note{ text-align: right; }

  .ozk-product-image{
    width: 90%;
  }
  #product-01 .ozk-product-sub-catch img{
    width: 59.25%;
    max-width: 237px;
  }
  #product-02 .ozk-product-sub-catch img{
    width: 68.25%;
    max-width: 273px;
  }
  #product-03 .ozk-product-sub-catch img{
    width: 52%;
    max-width: 208px;
  }
  #product-02 .ozk-product-howto dd:nth-child(2),
  #product-02 .ozk-product-howto dd:nth-child(3),
  #product-03 .ozk-product-howto dd:nth-child(6),
  #product-03 .ozk-product-howto dd:nth-child(7){
    margin-bottom: 12%;
  }
  .ozk-report > p{
    letter-spacing: 0;
  }
}



@media screen and (min-width: 600px){
  #ns-extension{
    background-size: min(258.62%, 3000px) auto;
  }
  .ozk-elem{
    font-size: clamp(10px, 1.33vw, 1rem);
  }
  .ozk-kv{
    margin-bottom: min(5vw, 60px);
  }
  #ozk-kv-wrapper{
    margin-bottom: min(4.17vw, 50px);
  }
  .ozk-kv-text{
    width: 90vw;
    max-width: 1080px;
    font-size: clamp(10.4px, 1.73vw, 1.3rem)
  }
  #ozk-kv-main{
    max-width: 1200px;
    height: 42vw;
    max-height: 504px;
  }
  .ozk-kv-logo{
    width: 44.58%;
    top: 0;
    left: 36%;
  }
  .ozk-kv-sizzle{
    width: 40.4%;
    top: 7%;
    left: 65%;
  }
  .ozk-kv-deco-1{
    top: -6%;
  }
  .ozk-kv-deco-2{
    top: 3%;
  }
  #ozk-kv-nav{
    max-width: 1200px;
    gap: 0 2.5%;
    margin-top: 0;
  }
  #ozk-kv-nav li:nth-child(1){
    width: 11.25%;
  }
  #ozk-kv-nav li:nth-child(2){
    width: 10.67%;
  }
  #ozk-kv-nav li:nth-child(3){
    width: 11.42%;
  }
  #ozk-kv-nav li:nth-child(1).ozk-is-active{
    filter: drop-shadow(0 0 10px #00b8ee);
  }
  #ozk-kv-nav li:nth-child(2).ozk-is-active{
    filter: drop-shadow(0 0 10px #ed7700);
  }
  #ozk-kv-nav li:nth-child(3).ozk-is-active{
    filter: drop-shadow(0 0 10px #e9545d);
  }
  .ozk-about-zenryu{
    padding: 5% 24%;
  }
  .ozk-about-zenryu > h2{
    font-size: min(2.74vw, 2rem);
    margin-bottom: 3%;
  }
  .ozk-about-zenryu > p{
    font-size: min(1.73vw, 1.3rem);
  }
  .ozk-about-zenryu > small{
    font-size: min(1.2vw, 0.9rem);
  }
  .ozk-lineup{
    background-image: linear-gradient(to bottom, rgba(255, 255, 240, 1) 0%, rgba(255, 254, 142, 0.3) 70%), url(../images/lineup_bg.webp);
    text-align: center;
    padding: min(5.83vw, 70px) 5% min(10vw, 120px) 5%;
  }
  .ozk-lineup > h2{
    width: auto;
    display: inline-flex;
    align-items: center;
    font-size: min(2.74vw, 2rem);
    border-radius: min(0.83vw, 10px);
    padding: 0.3em 3em;
    margin-bottom: 6%;
  }
  .ozk-lineup-list{
    grid-template-columns: repeat(3, 1fr);
    gap: 0 3%;
    width: 90%;
    padding-bottom: 3%;
  }
  .ozk-lineup-list > dd{
    padding: min(3.83vw, 46px) min(0.83vw, 10px) min(2vw, 24px) min(0.83vw, 10px);
    margin-top: max(-2.67vw, -32px);
    border-radius: min(2.5vw, 30px);
    align-self: stretch;
  }
  .ozk-lineup-list > dd:nth-child(3){
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
  .ozk-lineup-list > dt:nth-child(4){
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  .ozk-lineup-list > dt > a > img{
    margin-bottom: 4%;
  }
  .ozk-lineup-list > dt > a[href="#product-01"] > img{
    width: 18.17vw;
    max-width: 218px;
  }
  .ozk-lineup-list > dt > a[href="#product-02"] > img{
    width: 16.83vw;
    max-width: 202px;
  }
  .ozk-lineup-list > dt > a[href="#product-03"] > img{
    width: 17.92vw;
    max-width: 215px;
  }
  .ozk-lineup-list > dt > a > span{
    padding: 4% 15% 3% 15%;
  }
  .ozk-lineup-list > dt:nth-child(4) > a > span{
    padding: 4% 10% 3% 10%;
  }
  .ozk-lineup-list > dt > a > span > span:first-child{
    font-size: clamp(10px, 1.33vw, 1rem);
  }
  .ozk-lineup-list > dt > a > span > span:last-child{
    font-size: clamp(12px, 2vw, 1.5rem);
  }
  .ozk-lineup-detail-text{
    text-align: center;
    font-size: clamp(8px, 1.33vw, 1rem);
  }
  .ozk-lineup-detail-1 .ozk-lineup-detail-header{
    width: 60.5%;
    margin-bottom: 2.5%;
  }
  .ozk-lineup-detail-1 .ozk-lineup-detail-text{
    margin-bottom: 2%;
  }
  .ozk-lineup-detail-1 .ozk-lineup-detail-image{
    width: 54%;
  }
  .ozk-lineup-detail-2 .ozk-lineup-detail-header{
    width: 71%;
    margin-bottom: 4%;
  }
  .ozk-lineup-feature{
    width: 90%;
    max-width: none;
    padding: min(2.57vw, 30px) 0;
    border-radius: min(2.57vw, 30px);
  }
  .ozk-lineup-feature > picture > img{
    width: 60%;
  }

  
  .ozk-product-header{
    margin-bottom: min(7.69vw, 100px);
  }
  .ozk-product-header > div{
    grid-template-columns: 28.5% 31% auto;
    padding: 4% 2% 0 3%;
  }
  .ozk-product-package{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    padding-left: 8%;
    padding-right: 4%;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
  }
  .ozk-product-catch{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .ozk-product-name{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0 auto 0 0;
  }
  .ozk-product-image{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
  .ozk-product-sizzle,
  .ozk-product-nutrient,
  .ozk-product-sizzle-note{
    grid-column: 3 / 4;
    grid-row: 1 / 4;
  }
  .ozk-product-note{
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    width: auto;
    color: inherit;
    
    font-size: clamp(6.4px, 1.07vw, 0.87rem);
    margin: 0 4.5% 0 auto;
  }
  .ozk-product-sizzle{
    width: 103%;
    margin-left: -4%;
    margin-top: -3%;
  }
  .ozk-product-nutrient{
    width: 82%;
    margin-left: 4%;
    margin-top: -4%;
  }
  .ozk-product-sizzle-note{
    width: 11%;
    margin: 85% 12% 0 auto;
  }
  .ozk-product-sub-catch{
    
    padding: min(2.1%, 27px) 0;
  }
  #product-01 .ozk-product-name{
    
    width: 23vw;
    max-width: 300px;
  }
  #product-02 .ozk-product-name{
    
    width: 23vw;
    max-width: 300px;
  }
  #product-03 .ozk-product-name{
    
    width: 27vw;
    max-width: 351px;
  }
  #product-01 .ozk-product-catch{
    
    width: 25vw;
    max-width: 325px;
    margin: 0 auto 0 3.5%;
  }
  #product-02 .ozk-product-catch{
    
    width: 23vw;
    max-width: 299px;
    margin: 0 auto 0 3.5%;
  }
  #product-03 .ozk-product-catch{
    
    width: 25vw;
    max-width: 325px;
    margin: 0 auto 0 2%;
  }
  #product-02 .ozk-product-note{
    padding-top: 3.5%;
  }
  #product-03 .ozk-product-note{
    padding-top: 3.5%;
  }
  #product-01 .ozk-product-sub-catch{
    margin-top: max(-3.54vw, -46px);
  }
  #product-02 .ozk-product-sub-catch{
    margin-top: max(-9.62vw, -125px);
  }
  #product-03 .ozk-product-sub-catch{
    margin-top: max(-8.08vw, -105px);
  }
  #product-01 .ozk-product-sub-catch > picture > img{
    
    width: 35.62vw;
    max-width: 463px;
    transform: translateX(-4%);
  }
  #product-02 .ozk-product-sub-catch > picture > img{
    
    width: 37.69vw;
    max-width: 490px;
    transform: translateX(-1%);
  }
  #product-03 .ozk-product-sub-catch > picture > img{
    width: 34.23vw;
    max-width: 445px;
    transform: translateX(-5%);
  }
  

  .ozk-product-cont{
    max-width: none;
    padding: 0 5%;
    margin-bottom: min(11.67vw, 140px);
  }
  .ozk-product-cont > h3{
    font-size: clamp(18px, 2.74vw, 2rem);
    background-size: min(0.84vw, 10px) min(0.84vw, 10px);
    padding-bottom: 2%;
    margin-bottom: 5%;
  }
  .ozk-product-graph{
    width: 72.6vw;
    max-width: 848px;
    margin-bottom: min(8.56vw, 100px);
  }
  .ozk-product-howto{
    gap: 0 5.4%;
  }
  .ozk-product-howto:not(#product-01 .ozk-product-howto){
    grid-template-columns: repeat(4, 1fr);
    width: 84%;
  }
  .ozk-product-howto dt{
    width: auto;
    display: inline-flex;
    align-items: center;
    font-size: min(2.33vw, 1.7rem);
    border-radius: min(0.83vw, 10px);
    padding: 0.6em 1.5em;
    margin-bottom: min(2vw, 24px);
  }
  .ozk-product-howto dt:not(.ozk-product-howto dt:first-child){
    margin-top: 8%;
  }
  .ozk-product-howto dt > span{
    width: auto;
  }
  .ozk-product-howto dt > span:nth-child(2):not(#product-01 .ozk-product-howto dt > span){
    font-size: clamp(13px, 1.78vw, 1.3rem);
    margin-left: 1em;
  }
  #product-01 .ozk-product-howto dd{
    width: 33.33vw;
    max-width: 400px;
  }
  #product-01 .ozk-product-howto dd:nth-child(2){
    margin: 0 0 0 auto;
  }
  #product-01 .ozk-product-howto dd:nth-child(3){
    margin: 0 auto 0 0;
  }
  .ozk-product-howto:not(#product-01 .ozk-product-howto) dt{
    grid-column: 1 / 5;
  }
  #product-02 .ozk-product-howto dd:nth-child(7){
    grid-column: 1 / 5;
  }
  #product-03 .ozk-product-howto dt:nth-child(1){
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  #product-03 .ozk-product-howto dd:nth-child(2){
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    width: 27.5vw;
    max-width: 330px;
  }
  #product-03 .ozk-product-howto dt:nth-child(3){
    grid-column: 3 / 5;
    grid-row: 1 / 2;
    margin-top: 0;
  }
  #product-03 .ozk-product-howto dd:nth-child(4){
    grid-column: 3 / 5;
    grid-row: 2 / 3;
    width: 27.5vw;
    max-width: 330px;
  }
  #product-03 .ozk-product-howto dd:nth-child(11){
    grid-column: 1 / 5;
  }
  .ozk-product-howto-cut{
    width: 15.83vw;
    max-width: 190px;
  }
  #product-01 .ozk-product-howto-cut{
    width: 20vw;
    max-width: 240px;
  }
  .ozk-product-howto dd > p{
    font-size: min(1.23vw, 0.9rem);
  }
  #product-01 .ozk-product-howto dd > p{
    font-size: clamp(15px, 2vw, 1.5rem);
  }
  #product-01 .ozk-product-howto + p{
    font-size: clamp(13px, 1.64vw, 1.2rem);
  }
  #product-02 .ozk-product-howto dd:nth-child(7) > p,
  #product-03 .ozk-product-howto dd:nth-child(11) > p{
    text-align: center;
  }
  .ozk-recipe-list{
    grid-template-columns: repeat(4, 1fr);
    gap: 0 3%;
  }
  .ozk-recipe-list > li{
    margin-bottom: 20%;
  }
  #product-02 .ozk-recipe-list > li:nth-child(2),
  #product-02 .ozk-recipe-list > li:nth-child(3),
  #product-02 .ozk-recipe-list > li:nth-child(4){
    margin-top: min(7.19vw, 84px);
  }
  .ozk-recipe-icon{
    top: -5%;
    left: -4%;
    width: 30%;
  }
  .ozk-recipe-name{
    font-size: clamp(10px, 1.37vw, 1rem);
  }
  .ozk-report{
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 0 3%;
    background-color: #038f37;
    padding: 3.33% 5%;
  }
  .ozk-report > h2{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    margin-bottom: 0;
  }
  .ozk-report > p{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: end;
    font-size: clamp(10px, 1.47vw, 1.1rem);
  }
  .ozk-report > p > span{
    display: inline-block;
  }
  .ozk-report > a{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: start;
  }
}



@media screen and (min-width: 1200px){
  .ozk-lineup,
  .ozk-product-cont{
    padding-right: calc((100% - 1200px) / 2 + 1200px * 0.05);
    padding-left: calc((100% - 1200px) / 2 + 1200px * 0.05);
  }
  .ozk-about-zenryu{
    padding-right: calc((100% - 1200px) / 2 + 1200px * 0.24);
    padding-left: calc((100% - 1200px) / 2 + 1200px * 0.24);
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .ozk-report{
    padding-right: calc((100% - 1200px) / 2 + 1200px * 0.05);
    padding-left: calc((100% - 1200px) / 2 + 1200px * 0.05);
    padding-top: 40px;
    padding-bottom: 40px;
  }
}



@media screen and (min-width: 1300px){
  .ozk-product-header > div{
    padding-right: calc((100% - 1300px) / 2 + 1200px * 0.02);
    padding-left: calc((100% - 1300px) / 2 + 1200px * 0.03);
    padding-top: 52px;
  }
}



@media (any-hover: hover){
  .ozk-about-zenryu > a:hover{
    opacity: 0.9;
  }
  .ozk-lineup-list > dt > a[href="#product-01"]:hover > img{
    filter: drop-shadow(0 0 10px var(--product01-color));
  }
  .ozk-lineup-list > dt > a[href="#product-02"]:hover > img{
    filter: drop-shadow(0 0 10px var(--product02-color));
  }
  .ozk-lineup-list > dt > a[href="#product-03"]:hover > img{
    filter: drop-shadow(0 0 10px var(--product03-color));
  }
  .ozk-recipe-list > li:hover{
    opacity: 0.7;
  }
  .ozk-report > a:hover{
    opacity: 0.8;
  }
}
@media (any-pointer: coarse){
  .ozk-about-zenryu > a:active{
    opacity: 0.9;
  }
  .ozk-lineup-list > dt > a[href="#product-01"]:active > img{
    filter: drop-shadow(0 0 10px var(--product01-color));
  }
  .ozk-lineup-list > dt > a[href="#product-02"]:active > img{
    filter: drop-shadow(0 0 10px var(--product02-color));
  }
  .ozk-lineup-list > dt > a[href="#product-03"]:active > img{
    filter: drop-shadow(0 0 10px var(--product03-color));
  }
  .ozk-recipe-list > li:active{
    opacity: 0.7;
  }
  .ozk-report > a:active{
    opacity: 0.8;
  }
}














.ozk-recipe-special-delish > a{
  display: block;
}
.ozk-recipe-special-delish > *{
  position: relative;
}
.ozk-recipe-special-delish::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  background-color: #d7eebe;
}

@media screen and (max-width: 599px){
  .ozk-recipe-list > li.ozk-recipe-special-delish{
    grid-column: 1 / 3;
    padding: 3% 0 5% 0;
    margin-bottom: 11%;
  }
  .ozk-recipe-special-delish::before{
    width: 100%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: min(5vw, 20px);
  }
  .ozk-recipe-special-delish > h4{
    width: 76vw;
    max-width: 304px;
    margin-bottom: 5%;
  }
  .ozk-recipe-special-delish > a > img{
    width: 42.25vw;
    max-width: 169px;
  }
  .ozk-recipe-special-delish > a > .ozk-recipe-icon{
    width: 15.5%;
    left: 24%;
  }
}

@media screen and (min-width: 600px){
  .ozk-recipe-special-delish{
    padding-top: 5%;
  }
  .ozk-recipe-special-delish::before{
    width: 113%;
    height: 103%;
    left: -6.5%;
    border-radius: min(1.71vw, 20px);
  }
  .ozk-recipe-special-delish > h4{
    width: 17.38vw;
    max-width: 203px;
    margin: 0 auto 10% 0;
  }
}

@media (any-hover: hover){
  #product-02 .ozk-recipe-list > li:nth-child(1):hover{
    opacity: 1;
  }
  #product-02 .ozk-recipe-list > li:nth-child(1) > a:hover{
    opacity: 0.7;
  }
}
@media (any-pointer: coarse){
  #product-02 .ozk-recipe-list > li:nth-child(1):active{
    opacity: 1;
  }
  #product-02 .ozk-recipe-list > li:nth-child(1) > a:active{
    opacity: 0.7;
  }
}