@charset "UTF-8";
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0}
body{ background: #d33066; line-height: 1.7; overflow-x: hidden; font-family: monopin-j, sans-serif;font-weight: 400; font-style: normal}
img{ max-width: 100%; display: block}
a{text-decoration: none}
.col{ list-style: none; display: flex; flex-wrap: wrap; width: 100%}
sup, .notes, .ebtn span{ font-size: .8rem; font-weight: normal}
.notes{ display: block; line-height: 1.4}
.right{ text-align: right}
.lead{ font-weight: bold; margin-bottom: 30px; text-align: center}
.red{ color: #d33066}


/* font */
.catch-main, .winner{ font-family: "fot-cezanne-pron", sans-serif; font-weight: 500; font-style: normal}
h2.h2prize, h3, .hcopy{ font-family: fot-udkakugoc80-pro, sans-serif; font-weight: 700; font-style: normal}
h2.h2about{ text-align: center; margin: 30px auto; font-size: 2em; font-weight: normal}

/* section - footer */
section, header, footer{ position: relative; overflow: hidden}
section::before, section::after, footer::before{ content: ""; position: absolute; left: 50%;
transform:translateX(-50%);
width:120%; /* 100vw (140vw ) */
pointer-events: none;
z-index:1; background-repeat: no-repeat; background-position: center; background-size: contain; max-width:1500px;}
section::before, footer::before{ top: 0}
section::after{ bottom: 0}
section.prize-section{ background: #000; color: #fff; } /* #f4d6c5 */
section.ttl-section::after{ aspect-ratio:1800/ 478; background-image: url("ink-header-bottom.png")}
section.prize-section::before{ aspect-ratio:1800 / 261; background-image: url("ink-prize-top.png")}
section.prize-section::after{ aspect-ratio:1800 / 300; background-image: url("ink-judge-bottom.png")}
section.entry-section::before{ aspect-ratio:1800 / 600; background-image: url("ink-entry-top.png")}
section.entry-section::after{ aspect-ratio:1800 / 343; background-image: url("ink-entry-bottom.png")}
section.about-section{ background: #f7f8f7}
section.about-section::before{ aspect-ratio:1800 / 369; background-image: url("ink-about-top.png")}
section.about-section::after{ aspect-ratio:1800 / 394; background-image: url("ink-about-bottom.png")}
footer::before{ aspect-ratio:1800 / 352; background-image: url("ink-footer-top.png")}

section{ padding: 50px 0 100px}
section.ttl-section{ padding-top: 0; padding-bottom: 30px}
.inner{ position: relative; z-index: 2; width: 88%; margin: auto; max-width: 1100px}


/* ---------- HEADER ---------- */
/*header{ min-height: 100vh; display: flex; align-items: center; justify-content: center}*/
.diagonal{ transform: rotate(-2deg); transform-origin: left center; padding-left: 50px}
.hcopy{ font-size: clamp(1.5rem,3.5vw,3.5rem); color: #fff; line-height: 1}
.orange{ color: #10ffd1; font-size: clamp(.79rem,.1vw,.1rem); letter-spacing: .09em; padding-bottom: 15px}
.header-inner{ width: 100%; /*max-width: 900px; */background: #000; text-align: center; padding: 50px 50px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 0 100%)}
h1{ width: min(100%,760px); margin: 0px auto 10px}

/* ---------- TITLES ---------- */
/*h2.h2prize{ margin: 40px auto; color: #e31e5f; line-height: 1.4; font-size: clamp(1.5rem,3vw,3rem)}*/


/* ---------- ttl ---------- */
.leadarea{ text-align: center; margin: 20px auto 0; color: #fff; font-size: 1.15em}
.catchcopy{ padding: .2em 1em; font-size: clamp(2rem,4vw,4rem); line-height: 1.8; background: #000; color: #0eeac0; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; font-weight: bold}
/*.lead{ color: #fff; margin: 20px 0 0; font-size: 1.15em}*/


/* ---------- PRIZE ---------- */
h2.h2prize{ margin: 0 auto 20px; font-size: clamp(3.5rem,7vw,7rem); background: linear-gradient(148deg, rgba(255, 211, 77, 1) 0%, rgba(222, 176, 49, 1) 50%, rgba(237, 121, 83, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2}
h2.h2recipe{ margin: 0 auto 20px; font-size: clamp(1.8rem,3.5vw,3.5rem); text-align: center}
h3{ font-size: clamp(2rem,3vw,3rem); background: #ff3b7c; background: linear-gradient(151deg, rgba(255, 59, 124, 1) 40%, rgba(211, 48, 102, 1) 59%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2}



.prizephoto{ width: 80%; margin: 0 auto 10px; position: relative}
.prizephoto img{ width: 100%}
.prizephoto a {/*aタグを画像の真ん中に*/
  position: absolute; right: 0px; bottom: 7px; margin: 0; padding: 12px 30px; color: #fff; background: rgba(0, 0, 0, .8); font-size: 90%;
/*top: 50%;  left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);*/
}
.prizephoto a:hover{ background: rgba(0, 0, 0, 1)}
.prizephoto a:after{ font: var(--fa-font-light); content: "\f0c1"; margin-left: 6px; font-size: 90%}
.prizephoto .txbef{ position: absolute; top:-20px; left: 0; color: #888; font-size: 12px}
.prizephoto .txaft{ position: absolute; top:-20px; right: 0; color: #888; font-size: 12px}


.winner{ font-size: 1.25em; font-weight: normal}
.winner strong{ font-size: 140% }
.prize{ gap: 100px; width: 100%; max-width: 900px; margin: 30px auto}
.prize > li{ width: 100%; text-align: center}

dl.comments{ color: #999; margin-top: 20px}
dl.comments dt{ margin-bottom: 10px}
dl.comments dd{ font-size: .9em; text-align: left}
.comment{ gap: 30px 6%; justify-content:center}
.comment li.com1{ width: 70%}
.comment li.com2{ width: 47%}


/* ---------- RECIPE ---------- */
.recipe{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 10%; width: 100%; list-style: none; padding: 0; color: #fff; font-size: 86%}
.recipe li dl{ display: grid; grid-template-columns: 4em 1fr; row-gap: 8px; column-gap: 12px;}
.recipe li dt{ width: 4em}
.recipe li dd{ margin: 0}
.recipe img{ width: 100%; padding-bottom: 10px}
.recipe p{ margin-top: 10px}

.lrecipe{ border: 1px solid #e994b0; padding: 3px 6px; margin-left: 1em; line-height: 1; font-size: 75%; color: #e994b0; border-radius: 4px; letter-spacing: .1em}
.lrecipe::after{ font: var(--fa-font-light); content: "\f061"; margin-left: 3px}

/* ---------- ABOUT ---------- */
.about{ width: 100%; margin-top: 20px}
.about dt{ padding-bottom: 15px; border-top: 1px solid #000; padding-top: 15px; margin-top: 15px}
.about dd{ margin-left: 15px}
.about > li{ margin-left: 15px}
.aboutj{ gap: 2%; margin: 10px 0}
.aboutj img{ margin: 0 auto 5px}
.aboutj > li{ width: 23.5%; text-align: center}
.circle-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- FOOTER ---------- */
footer{ background: #fff; color: #000}
footer strong{ display: inline-block; margin-bottom: 10px}
.copy{ font-size: .6rem; text-align: center; margin-bottom: 30px; color: #e31e5f}
.foot{ gap: 60px 10%; margin: 100px auto 40px; font-size: .9em}
.foot li{ width: 45%}
footer img{ max-width: 50%; padding-bottom: 30px}
footer a{ color: #000}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
.header-inner{ padding: 30px 20px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%)}
.diagonal{ padding-left: 0}
.orange{ letter-spacing: 0}
/*.leadarea{ text-align: left}*/
.lead{ font-size: 1em}
.hdtx3:last-child{ margin-bottom: 0}

section.prize-section::before{ aspect-ratio:1100 / 261; background-image: url("ink-s-prize-top.png")}
section.entry-section::before{ aspect-ratio:1100 / 600; background-image: url("ink-s-entry-top.png")}
section.entry-section::after{ aspect-ratio:1100 / 343; background-image: url("ink-s-entry-bottom.png")}
section.about-section::before{ aspect-ratio:1100 / 369; background-image: url("ink-s-about-top.png")}
section.about-section::after{ aspect-ratio:1100 / 394; background-image: url("ink-s-about-bottom.png")}
footer::before{ aspect-ratio:1100 / 352; background-image: url("ink-s-footer-top.png")}



.foot{ width: 100%; flex-direction: row}
.foot li{ width: 100%}
footer img{ max-width: 35%; padding-bottom: 30px}

.recipe{grid-template-columns: 1fr}
.comment li.com2{ width: 70%}
.txl{ text-align: left}
.prizephoto{ width: 95%}
.prizephoto a { padding: 8px 25px}
.about dd{ margin-left: 0}
}
@media(max-width:640px){
.aboutj{ font-size: 82%}
.circle-image{  width: 75px; height: 75px}
}