html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
html, body { -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5 { font-weight: normal; }
li { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, video { vertical-align: bottom; max-width: 100%; height: auto; }

/* --------------------------------------------------
Common
-------------------------------------------------- */
html, body { height: 100%; font-size: 10px; }
body { 
  font-family: 'Noto Sans JP', sans-serif; color: #000; font-weight: 400; 
  -webkit-tap-highlight-color: transparent;
}

.font-en { font-family: 'Courier Prime', monospace;}
.font-jp { font-family: 'Noto Sans JP', sans-serif;} /* 400,500 */

p { font-family: 'Noto Sans JP', sans-serif; font-weight: 500; line-height: 220%;}
a { text-decoration: none;}

.center { text-align: center;}

.font-50-sp24 { font-size: clamp(24px,3.2vw,50px); }
.font-42-sp18 { font-size: clamp(18px,2.78vw,42px); }
.font-34-sp14 { font-size: clamp(14px,2.26vw,34px); }
.font-30-sp18 { font-size: clamp(18px,2.0vw,30px); }
.font-30-sp12 { font-size: clamp(12px,2.0vw,30px); }
.font-30-sp10 { font-size: clamp(10px,2.0vw,30px); }
.font-16-sp11 { font-size: clamp(11px,1.06vw,16px); }
.font-17-sp11 { font-size: clamp(11px,1.13vw,17px); }
.font-18-sp11 { font-size: clamp(11px,1.23vw,18px); }
.font-22-sp11 { font-size: clamp(11px,1.5vw,22px); }

.color-br { color: #754c24;}
.color-gr { color: #4d4d4d;}

.head-border { display: flex; align-items: center;}
.head-border:before,
.head-border:after {
  content: "";
  height: 2px;
  flex-grow: 1;
  background-color: #fff;
}
.head-border:before { margin-right: 3rem;}
.head-border:after { margin-left: 3rem;}

@media screen and (max-width: 979px) { 
  .head-border:before,.head-border:after { height: 1px;}
  .head-border:before { margin-right: 2rem;}
  .head-border:after { margin-left: 2rem;}
  .pc { display: none !important; }
}
@media screen and (min-width: 980px) { 
  .sp { display: none !important; } 
}

/* --------------------------------------------------
Contents
-------------------------------------------------- */

.sec-ttl2 { color: #754c24; letter-spacing: 0.08em;}
.sec-ttl3 { background: #fff; color: #4d4d4d;}
.sec-index { font-weight: 500; letter-spacing: 0.2em;}
.sec-ttl span, .sec-tt2 span, .sec-tt3 span { padding: 0 0.2em;}

.sec-mv img { width: 100%;}

/* Section 01 */
.sec-01 .inner {
  padding: clamp(70px,9.3vw,140px) clamp(20px,3.3vw,50px);
  text-align: center;
}
.sec-01 .sec-ttl { margin-bottom: clamp(50px,6.7vw,100px);}

/* Section 02 */
.sec-02 { 
  background-color: #e8ddd4; 
  overflow: hidden;
}
.sec-02 .inner { 
  padding: clamp(80px,13.2vw,200px) clamp(20px,3.3vw,50px) 0;
}
.sec-02 .sec-ttl2 { 
  margin-bottom: clamp(80px,11.9vw,180px);
}

.product-area {
  max-width: 1206px;
  margin: 0 auto;
  padding-bottom: clamp(85px,14.52vw,220px);
}
.product-block {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(/static/full/canterbury/special/ssz_collaboration_2023/assets/img/product_back.png) center no-repeat;
  background-size: contain;
  aspect-ratio: 1206/581;
}
.product-block__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  height: 100%;
  margin: 0 auto;
}
.product-block .product-image {
  width: auto;
  height: 100%;
  padding-right: 8%;
  padding-left: 5%;
}
.product-block .product-data__name {
  width: fit-content;
  padding: 0.4em 0.8em;
  margin-bottom: 8px;
  background: #fff;
  font-size: clamp(12px,1.386vw,21px);
  font-weight: 500;
}
.product-block .product-price {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.product-block .product-price p {
  width: fit-content;
  padding: 0.2em 0.6em;
  margin-right: 15px;
  background: #fff;
  font-size: clamp(12px,1.452vw,22px);
  font-weight: bold;
  line-height: 100%;
}
.product-block .product-price p::after {
  content: "（税込）";
  margin-left: -0.2em;
  font-size: clamp(11px,1.23vw,18px);
  font-weight: 500;
}
.product-block .product-price ul {
  display: flex;
}
.product-block .product-price ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-right: 5px;
  background: #000;
  border-radius: 100%;
  font-size: clamp(11px,1.23vw,18px);
  font-weight: bold;
  color: #fff;
}
.product_data .product-image-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.product_data .product-image-list img {
  width: 48%;
}
.product-text {
  width: 85%;
  padding-left: 4%;
  margin: 50px auto 0;
  box-sizing: border-box;
}

@media screen and (max-width: 979px) {
  .product-area:last-child {
    padding-bottom: 0;
  }
  .product-area.sp-style a {
    color: #000;
  }
  .product-area.sp-style .box-line { 
    border: #fff 1px solid;
    border-bottom: none;
  }
  .product-area.sp-style .box-line:last-child { 
    border-bottom: #fff 1px solid;
  }
  .product-area.sp-style .product-ttl {
    padding: 0.2em;
    font-size: 16px;
    color: #fff;
  }
  .product-area.sp-style .product-data {
    padding: 1.0em;
  }
  .product-area.sp-style .product-data .product-name {
    padding-bottom: 0.6em;
    font-size: 14px;
    font-weight: 500;
  }
  .product-area.sp-style .product-data .product-price {
    font-size: 15px;
    font-weight: bold;
    line-height: 100%;
  }
  .product-area.sp-style .product-data .product-price::after {
    content: "（税込）";
    margin-left: -0.2em;
    font-size: 11px;
    font-weight: 500;
  }
  .product-area.sp-style .product-size {
    padding: 0.6em;
  }
  .product-area.sp-style .product-size ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-area.sp-style .product-size ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    margin: 0 2px;
    background: #000;
    border-radius: 100%;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
  }
}

/* Section 02: Modal */
.product-modal {
  padding: 25px 20px;
  border: #000 1px solid;
  background: #fff;
}
.product-modal p {
  font-size: 10px;
  line-height: 160%;
  padding: 20px 0;
}


/* Section 03 */
.sec-03 { background-color: #856239;}
.sec-03 .inner { padding: clamp(70px,6.0vw,90px) clamp(20px,3.3vw,50px) clamp(85px,6.6vw,100px);}
.sec-03 p { color: #ffffff;}

@media screen and (max-width: 979px) {
  .sec-03 { background-color: #e8ddd4;}
  .sec-03 p { color: #856239;}
}

/* 比率 100 : 6.6 = 数値 : x */

/* Section 04 */
.sec-04 .inner {
  padding: clamp(65px,14.52vw,220px) 0 clamp(85px,16.5vw,250px);
}
.sec-04 .sec-ttl2 { margin-bottom: clamp(50px,11.9vw,180px);}
.sec-04 img { width: 100%;}

/*
.movie-inner {
  width: 100%;
  background: url(/static/full/canterbury/special/ssz_collaboration_2023/assets/img/movie_back.png) center no-repeat;
  background-size: contain;
  aspect-ratio: 1501/876;
  position: relative;
}
.movie-inner .youtube-short {
  width: 30%;
  aspect-ratio: 9 / 16;
  position: absolute;
  top: 2%;
  left: 23%;
}
.movie-inner .youtube-short iframe {
  width: 100%;
  height: 100%;
}
*/

/* Section 05 */
.sec-05 {
  background-color: #4d4d4d;
  color: #fff;
}
.sec-05 .inner {
  max-width: 930px;
  padding: clamp(85px,10.56vw,160px) clamp(20px,3.3vw,50px);
  margin: 0 auto;
}
.sec-05 .sec-ttl3 {
  margin: 0 auto;
  margin-bottom: clamp(85px,9.24vw,140px);
  line-height: 140%;
}
.sec-05 .sec-index-box {
  padding: clamp(45px,6.6vw,100px) 0;
}

.sec-05 .index-day p {
  font-size: clamp(18px,2.5vw,38px);
  letter-spacing: 0.08em;
}

.sec-05 .index-shop {
  padding-bottom: 0;
}
.sec-05 .index-shop dt {
  width: fit-content;
  padding: 0.4em 0.6em;
  margin-bottom: clamp(10px,1.65vw,25px);
  background-color: #fff;
  border-radius: 6px;
  font-size: clamp(10px,1.35vw,20px); color: #4d4d4d; font-weight: 500;
}
.sec-05 .index-shop dd {
  margin-bottom: clamp(30px,4.62vw,70px);
  font-size: clamp(10px,1.85vw,28px); font-weight: 500; line-height: 180%;
}
.sec-05 .index-shop dd:last-child {
  margin-bottom: 0 !important;
}
.sec-05 .index-shop a {
  color: #fff;
}
.sec-05 .index-shop a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 979px) {
  .sec-05 .sec-ttl3 { background: none; color: #fff;}
  .sec-05 .index-shop a:hover { text-decoration: none;}
}


/* Section 06 */
.sec-06 {
  background-color: #929292;
  color: #fff;
}
.sec-06 .inner {
  max-width: 1000px;
  padding: clamp(65px,9.9vw,150px) clamp(20px,3.3vw,50px) clamp(100px,16.5vw,250px);
  margin: 0 auto;
}
.sec-06 .sec-ttl {
  letter-spacing: 0.2em;
  margin-bottom: clamp(40px,5.28vw,80px);
}

.sec-06 .text-box {
  padding: 0 clamp(20px,2.64vw,40px);
}
.sec-06 .sec-notice {
  width: fit-content;
  margin: 0 auto;
}
.sec-06 .sec-notice li {
  padding-left: 1.2em;
  margin-bottom: 0.8em;
  font-size: clamp(10px,1.45vw,22px);
  line-height: 140%;
  position: relative;
}
.sec-06 .sec-notice li::before {
  content: "※";
  position: absolute;
  left: 0;
}

.sec-06 .sec-brand dt {
  margin-top: clamp(80px,13.2vw,200px);
}
.sec-06 .sec-brand dd {
  margin-top: clamp(35px,3.3vw,50px);
  font-size: clamp(12px,1.35vw,20px);
  line-height: 200%;
}
.sec-06 .sec-brand .logo-01 img {
  width: clamp(112px,17.8vw,270px);
  height: auto;
}
.sec-06 .sec-brand .logo-02 img {
  width: clamp(116px,17vw,257px);
  height: auto;
}
.sec-06 .sec-brand .sec-link {
  display: flex;
  justify-content: center;
}
.sec-06 .sec-brand .sec-link a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.sec-06 .sec-brand .sec-link img {
  margin-right: clamp(10px,1.35vw,20px);
  width: clamp(35px,4.65vw,70px);
  height: auto;
}