@charset "utf-8";

main .caution {
  color: var(--color-red);
}

/*-------------------------------------------------------------------------------------------------------------------------------
  Main Visual
-------------------------------------------------------------------------------------------------------------------------------*/
.sec-mainvisual p {
  padding: 8px 16px;
  text-align: center;
  color: #000;
  background: rgba(255 255 255 / 80%);
}

/*-------------------------------------------------------------------------------------------------------------------------------
  notification
-------------------------------------------------------------------------------------------------------------------------------*/
.sec-notification {
  padding: var(--size-inline);
  text-align: justify;
  font-feature-settings: normal;
}

/*-------------------------------------------------------------------------------------------------------------------------------
  Category - a
-------------------------------------------------------------------------------------------------------------------------------*/

.pl100 {
  padding-left: 100px;
}

.pl200 {
  padding-left: 200px;
}

#cat01 {
  background: url(/base/kyoto/special/hokkaidoten_260325/img/bg-img01.png) repeat-y;
  padding-bottom: 100px;
  position: relative;
  z-index: 15;
}

#cat02 {
  background: url(/base/kyoto/special/hokkaidoten_260325/img/bg-img02.png) repeat-y;
  padding-bottom: 100px;
  position: relative;
  z-index: 14;
}


#cat03 {
  background: url(/base/kyoto/special/hokkaidoten_260325/img/bg-img03.png) repeat-y;
  padding-bottom: 100px;
  position: relative;
  z-index: 13;
}



#cat04 {
  background: url(/base/kyoto/special/hokkaidoten_260325/img/bg-img04.png) repeat-y;
  padding-bottom: 100px;
  position: relative;
  z-index: 12;
}

#cat06 {
  background-color: #c7ebeb;
  position: relative;
  padding-bottom: 100px;
  z-index: 10;
}

#cat07 {
  background-color: #fbe2cc;
  position: relative;
  padding-bottom: 100px;
  z-index: 9;
}



#cat08 {
  background: linear-gradient(to bottom, #e1eccd, #fafcf5 30%, #e1eccd 70%, #fafcf5 100%);
  padding-bottom: 100px;
  position: relative;
  z-index: 8;
}

#cat09 {
  background: linear-gradient(to bottom, #fadeea, #fef8fb 30%, #fadeea 70%, #fef8fb 100%);
  padding-bottom: 100px;
  position: relative;
  z-index: 7;
}

#cat10 {
  background: linear-gradient(to bottom, #d7ebf3, #f7fbfd 30%, #d7ebf3 70%, #f7fbfd 100%);
  padding-bottom: 100px;
  position: relative;
  z-index: 6;
}

#cat11 {
  background: linear-gradient(to bottom, #f8f0cc, #fdfbf2 30%, #f8f0cc 70%, #fdfbf2 100%);
  padding-bottom: 100px;
  position: relative;
  z-index: 5;
}

#cat13 {
  background: #e50012;
  padding-bottom: 60px;
}


.clr-white {
  color: #fff;
}

.clr-blue {
  color: #139695;
}

.layout {
  position: relative;
}

.layout.flex-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.layout.flex-layout.just-end {
  justify-content: end;
}

.layout.flex-layout.align-center {
  align-items: center;
}

.layout.flex-layout.align-end {
  align-items: flex-end;
}

.layout.flex-layout.gap0 {
  gap: 0;
}

.layout.flex-layout.gap10 {
  gap: 10px;
}

.layout .eat-inner {
  padding: 0 95px;
}

.circle {
  position: relative;

}

.circle::after {
  position: absolute;
  content: "";
  width: 500px;
  height: 500px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.circle.bg02::after {
  background: rgb(255, 249, 217, 0.6);

}

.circle img,
.circle div {
  z-index: 1;
  position: relative;
}


.layout .pos {
  position: absolute;
  left: 12%;
  top: 80%;
}


/* カニ位置 */


.layout .pos03 {
  padding-top: 380px;
  padding-left: 58px;
  padding-bottom: 100px;
  max-width: 350px;
}

.layout .pos03-img {
  position: absolute;
}

.layout .pos08 {
  padding-top: 50px;
}

/* いちご位置 */
.layout .ichigo-pos05-img {
  position: absolute;
}

.layout .ichigo-pos05 {
  padding-left: 58px;
  padding-bottom: 600px;
  max-width: 580px;
}


/* MILK */
.layout .milk-pos01 {
  background: url(/base/kyoto/special/hokkaidoten_260325/img/bg-img04-sub.png) repeat-y;
  padding-left: 100px;
  padding-bottom: 10px;
}

.layout.milk-pos02-bg {
  background-color: #139695;
}


.layout h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
}

.h2-blue {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
}

.layout h3 {
  font-size: 30px;
  line-height: 1.4;
  word-break: break-all;
}

.layout h3 span {
  font-size: 20px;

}

.layout p {
  font-size: 25px;
}

.layout .num {
  font-size: 20px;
}

.layout .price {
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
}

/* 弁当 */

#cat05 {
  background-color: #f0ddb7;
  padding-bottom: 100px;
  position: relative;
  z-index: 11;
}

#cat05 .inner {
  padding: 0 95px;
}

#cat05 .inner .main-img {
  width: 100%;
}


/* Side dish */
.layout .side-pos01 {
  padding-left: 200px;
  padding-top: 20px;
}

.layout .side-pos02 {
  padding-left: 190px;
  padding-top: 20px;
}

.flex-col02 {
  display: flex;

}

.flex-col02 .col-item {
  width: 50%;
  margin-top: 20px;
  padding-left: 22px;
}

/* Sweets */
.layout .sweets-pos01 {
  padding-left: 220px;
}

.layout .sweets-pos02 {
  padding-left: 170px;
}

/* Fresh */
.layout .fresh-pos01 {
  padding-left: 170px;
}

.layout .fresh-pos02 {
  padding-left: 170px;
}

/* Cheese */
.layout .cheese-pos01 {
  padding-left: 170px;
  padding-top: 35px;
}

.last-wrapper {
  margin: 10px 55px 0px 55px;
  border-radius: 40px;
  background-color: white;
  padding-bottom: 60px;
}

.layout .pos.last-pos01 {
  left: 53%;
  top: 15%;
}

.layout .pos.last-pos02 {
  left: 53%;
  top: 44%;
}

.layout .pos.last-pos03 {
  left: 53%;
  top: 77%;
}

.layout .pos.last-pos04 {
  left: 53%;
  top: 10%;
}

.layout .pos.last-pos05 {
  left: 53%;
  top: 44%;
}

.layout .pos.last-pos06 {
  left: 53%;
  top: 72%;
}

#pagetop img {
  width: 109px;
  height: 109px;
}

.nav-fixed {
  position: sticky;
  top: 0;
  z-index: 100;
}

#cat01,
#cat02,
#cat03,
#cat04,
#cat05,
#cat06,
#cat07,
#cat08,
#cat09,
#cat10,
#cat11,
#cat12,
#cat13,
#cat14 {
  margin-top: -100px;
  padding-top: 100px;
}