@charset "UTF-8";

@font-face {
	font-family: "SoDoSans";
	font-style: normal;
	font-weight: 400;
  src: url("/common/fonts/SoDoSans/SoDoSans-Regular.woff") format("woff"),
  url("/common/fonts/SoDoSans/SoDoSans-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "SoDoSans SemiBold";
	font-style: normal;
	font-weight: 400;
	src: url("/common/fonts/SoDoSans/SoDoSans-SemiBold.woff") format("woff"),
  url("/common/fonts/SoDoSans/SoDoSans-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "SoDoSans";
	font-style: normal;
	font-weight: 700;
	src: url("/common/fonts/SoDoSans/SoDoSans-Bold.woff2") format("woff2"),
  url("/common/fonts/SoDoSans/SoDoSans-Bold.woff") format("woff");
}

@font-face {
	font-family: "SoDoSans Black";
	font-style: normal;
	font-weight: 700;
	src: url("/common/fonts/SoDoSans/SoDoSans-Black.woff2") format("woff2"),
  url("/common/fonts/SoDoSans/SoDoSans-Black.woff") format("woff");
}


* {
  margin: 0;
	padding: 0;
  box-sizing: content-box;
}
img {
  max-width: none;
}

@media print, screen and (min-width: 910px) {
  * {
    box-sizing: border-box;
  }
}

:root {
	--color-main: #000000;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-black-87: rgba(0, 0, 0, 0.87);
}


.mainContents {
	overflow-x: hidden;
	overflow-x: clip;
}

.mainContents img {
	width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
th,
td,
pre,
caption,
address {
	margin: 0;
}


p {
	margin: 0;
	letter-spacing: 0;
}

a {
	opacity: 1;
	transition: all 0.3s ease;
	-webkit-font-smoothing: antialiased;
}

a:hover {
	opacity: 0.8;
	transition: all 0.3s ease;
}




@media print, screen and (min-width: 910px) {
	.is-pc {
		display: block;
	}

	.is-sp {
		display: none;
	}
}

@media screen and (max-width: 911px) {
	.is-pc {
		display: none;
	}

	.is-sp {
		display: block;
	}
}


/* ----------------------------------------------------------
bg
---------------------------------------------------------- */
@media print, screen and (max-width: 911px) {
  .pc-left_bg {
    display: none;
  }

  .pc-right_bg {
    position: fixed;
    bottom: 16px;
    right: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    height: 0;
  }
}

@media print, screen and (min-width: 910px) {
  .section_inner {
    padding: 0 52px;
  }

  .mainContentsWrap {
    display: flex;
  }
  .ContentsBoxBg {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    z-index: -1;
    background: #ebe1d7;
  }

	.mainContents .mainContentsIn .is-fixed.is-bottom {
		top: auto;
		bottom: 0;
		position: absolute;
	}
  .pc-left_bg,
	.pc-right_bg {
		position: sticky;
		display: block;
    top: 0;
    left: 0;
    width: calc(50vw - 97px);
    height: 0;
		z-index: 0;
    visibility: visible;
    opacity: 1;
	}
  .pc-right_bg {
    z-index: 2;
  }

  .pc-left_bgIn {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: calc(50vw - 215px);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pc-left_bgIn img {
    width: 188.5px;
    display: block;
  }

  .ContentsBoxWrap {
    flex-shrink: 0;
  }
	.ContentsBox {
    position: relative;
		max-width: 430px;
		width: 100%;
		margin: 0 auto;
    box-shadow: 0px 3px 16px 0px #a2896e;
    z-index: 1;
	}
  .ContentsBox::before,
  .ContentsBox::after {
    content: "";
    position: absolute;
    top: 0;
    width: 30px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .mainContents .block-banner,
  .mainContents .block-line,
  .mainContents .block-survey,
  footer, footer.footerWrap {
    position: relative;
    z-index: 1;
  }
  
  .pc-left_bg.is-fade,
  .pc-right_bg.is-fade {
    height: auto;
    top: auto;
    bottom: 150px;
    transition-duration: 0.2s;
  }
  .pc-left_bg.is-fade .pc-left_bgIn {
    top: auto;
    bottom: 150px;
    transition-duration: 0.2s;
  }
}


._bg {
  position: relative;
	width: 100%;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
  margin-top: calc(-1/750*100vw);
}

.bg_01 {
  height: calc(1668/750*100vw);
}
.bg_02 {
  height: calc(1038/750*100vw);
  background-image: url(../images/bg_01.webp);
}
.bg_03 {
  height: calc(4684/750*100vw);
  background-image: url(../images/bg_02.webp);
}
.bg_04 {
  height: calc(2583/750*100vw);
  background-image: url(../images/bg_03.webp);
}

@media print, screen and (min-width: 910px) {
  ._bg {
    margin-top: 0;
  }
  .bg_01 {
    height: 956px;
  }
	.bg_02 {
		height: 595px;
	}
  .bg_03 {
    height: 2685px;
  }
  .bg_04 {
    height: 1481px;
  }
}

/* ----------------------------------------------------------
common
---------------------------------------------------------- */
.block-wrap {
  position: relative;
  color: var(--color-main);
  z-index: 2;
}

/* 商品カード共通 */
.item-ttl {
  font-size: calc(40/750*100vw);
  line-height: calc(56/40);
  font-weight: 700;
  font-family: "Noto Serif JP";
}
.item-price {
  font-size: calc(36/750*100vw);
  line-height: calc(56/36);
  font-family: "SoDoSans SemiBold";
  margin-top: calc(4/750*100vw);
}
.item-price .num {
  font-size: calc(40/750*100vw);
  line-height: calc(56/40);
  font-family: "SoDoSans SemiBold";
  margin-left: calc(4/750*100vw);
}
.item-detail {
  font-size: calc(30/750*100vw);
  line-height: calc(44/30);
  font-weight: 500;
  font-family: "Noto Serif JP";
  margin-top: calc(10/750*100vw);
}
.item-btn {
  font-size: calc(32 / 750 * 100vw);
  font-weight: 500;
  font-family: "Noto Sans JP";
  line-height: calc(48 / 32);
  background-color: var(--color-white);
  width: calc(560 / 750 * 100vw);
  border-radius: calc(52 / 750 * 100vw);
  display: inline-block;
  text-align: center;
  padding: calc(30 / 750 * 100vw) 0;
  position: relative;
  left: calc(-46/750*100vw);
}
.item-card-inner {
  position: relative;
}

@media print, screen and (min-width: 910px) {
  .item-ttl {
    font-size: 23px;
  }
  .item-price {
    font-size: 21px;
    margin-top: 2px;
  }
  .item-price .num {
    font-size: 23px;
    margin-left: 2px;
  }
  .item-detail {
    font-size: 17px;
    margin-top: 6px;
  }
  .item-btn {
    font-size: 18px;
    width: 321px;
    border-radius: 30px;
    padding: 17px 0;
    left: -26px;
  }
}

/* ----------------------------------------------------------
block-kv
---------------------------------------------------------- */
.block-kv {
  position: relative;
}
.block-kv-ttl {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
}
.block-kv-img-link,
.block-kv-txt-link {
  position: absolute;
}
.block-kv-img-link {
  top: calc(982 / 750 * 100vw);
  width: calc(285 / 750 * 100vw);
  height: calc(459 / 750 * 100vw);
}
.block-kv-img-link._01 {
  left: calc(82/750*100vw);
}
.block-kv-img-link._02 {
  left: calc(388/750*100vw);
}
.block-kv-txt-link {
  top: calc(1478 / 750 * 100vw);
  width: calc(216 / 750 * 100vw);
  height: calc(70 / 750 * 100vw);
}
.block-kv-txt-link._01 {
  left: calc(44/750*100vw);
}
.block-kv-txt-link._02 {
  left: calc(499/750*100vw);
}

@media print, screen and (min-width: 910px) {
  .block-kv-img-link {
    top: 563px;
    width: 163px;
    height: 263px;
  }
  .block-kv-img-link._01 {
    left: 47px;
  }
  .block-kv-img-link._02 {
    left: 222px;
  }
  .block-kv-txt-link {
    top: 847px;
    width: 124px;
    height: 40px;
  }
  .block-kv-txt-link._01 {
    left: 25px;
  }
  .block-kv-txt-link._02 {
    left: 286px;
  }
}

/* ----------------------------------------------------------
block-lead
---------------------------------------------------------- */
.block-lead {
  position: relative;
}
.block-lead-text {
  position: absolute;
  width: 100%;
  top: calc(178 / 750 * 100vw);
  left: 51%;
  transform: translateX(-50%);
}
.block-lead-text p {
  font-size: calc(36/750*100vw);
  line-height: calc(88/36);
  font-family: "Noto Serif JP";
  font-weight: 500;
  text-align: center;
}

@media print, screen and (min-width: 910px) {
  .block-lead-text {
    top: 100px;
  }
  .block-lead-text p {
    font-size: 21px;
    line-height: calc(87 / 36);
  }
}

/* ----------------------------------------------------------
block-item
---------------------------------------------------------- */
.block-item {
  position: relative;
}
.block-item img {
  display: block;
}

/* block-item._01（フローズンティー） */
.block-item._01 .block-item-ttl {
  position: absolute;
  top: calc(115 / 750 * 100vw);
  left: calc(42 / 750 * 100vw);
}
.block-item._01 .block-item-ttl img {
  width: calc(558/750*100vw);
}
.block-item-text {
  position: absolute;
}
.block-item-text._01 {
  top: calc(437 / 750 * 100vw);
  left: calc(46 / 750 * 100vw);
}
.block-item-text._02 {
  top: calc(2834 / 750 * 100vw);
  right: calc(43 / 750 * 100vw);
}
.block-item-text-bold {
  font-size: calc(36/750*100vw);
  font-weight: 700;
  font-family: "Noto Serif JP";
  line-height: calc(48/36);
  margin-bottom: calc(26/750*100vw);
}
.block-item-text-normal {
  font-size: calc(30/750*100vw);
  font-weight: 500;
  font-family: "Noto Serif JP";
  line-height: calc(44/30);
}
.block-item-img {
  position: absolute;
}
.block-item-img._01 {
  width: calc(750/750*100vw);
  top: calc(616 / 750 * 100vw);
  left: 0;
  z-index: 2;
}
.block-item-img._02 {
  width: calc(716/750*100vw);
  top: calc(846 / 750 * 100vw);
  right: 0;
  z-index: 1;
}
.block-item-img._03 {
  width: calc(671/750*100vw);
  top: calc(2057 / 750 * 100vw);
  left: 0;
  z-index: 1;
}

.block-item._01 .item-card {
  position: absolute;
  top: calc(3348 / 750 * 100vw);
  left: 0;
  right: 0;
  margin: auto;
}
.block-item._01 .item-card-inner {
  width: calc(750/750*100vw);
  margin: 0 auto;
}
.block-item._01 .item-card-img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.block-item._01 .item-card-img img {
  width: calc(690/750*100vw);
}
.block-item._01 .item-card-desc {
  position: absolute;
  top: calc(674 / 750 * 100vw);
  left: calc(141 / 750 * 100vw);
  z-index: 3;
}
.block-item._01 .item-btn {
  margin-top: calc(20 / 750 * 100vw);
}
.block-item._01 .item-card-link {
  position: absolute;
  top: 0;
  left: calc(176/750*100vw);
  width: calc(400/750*100vw);
  height: calc(640/750*100vw);
  z-index: 2;
}

/* block-item-anchor */
.block-item-anchor {
  position: absolute;
  top: calc(3248 / 750 * 100vw);
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}

@media print, screen and (min-width: 910px) {
  .block-item._01 .block-item-ttl {
    top: 66px;
    left: 24px;
  }
  .block-item._01 .block-item-ttl img {
    width: 320px;
  }
  .block-item-text._01 {
    top: 251px;
    left: 26px;
  }
  .block-item-text._02 {
    top: 1625px;
    right: 25px;
  }
  .block-item-text-bold {
    font-size: 21px;
    margin-bottom: 15px;
  }
  .block-item-text-normal {
    font-size: 17px;
  }
  .block-item-img._01 {
    width: 430px;
    top: 353px;
  }
  .block-item-img._02 {
    width: 411px;
    top: 485px;
  }
  .block-item-img._03 {
    width: 385px;
    top: 1179px;
  }
  .block-item._01 .item-card {
    top: 1920px;
  }
  .block-item._01 .item-card-inner {
    width: 430px;
  }
  .block-item._01 .item-card-img img {
    width: 396px;
  }
  .block-item._01 .item-card-desc {
    top: 386px;
    left: 81px;
    z-index: 3;
  }
  .block-item._01 .item-btn {
    margin-top: 11px;
  }
  .block-item._01 .item-card-link {
    left: 101px;
    width: 229px;
    height: 367px;
  }

  .block-item-anchor {
    top: 1820px;
  }
}

/* block-item._02（チラックスソーダ） */
.block-item._02 .item-card {
  position: absolute;
  top: calc(146/750*100vw);
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../images/item02/content.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  width: calc(640/750*100vw);
  height: calc(1844/750*100vw);
}
.block-item._02 .item-card-inner {
  width: 100%;
  height: 100%;
}
.block-item._02 .item-card-desc {
  position: absolute;
  top: calc(1158/750*100vw);
  left: calc(90/750*100vw);
}
.block-item._02 .item-ttl,
.block-item._02 .item-price,
.block-item._02 .item-price .num,
.block-item._02 .item-detail {
  color: var(--color-white);
}
.block-item._02 .item-price .non-caffe {
  font-size: calc(20 / 750 * 100vw);
  line-height: calc(28 / 20);
  font-weight: 500;
  font-family: "Noto Sans JP";
  margin-left: calc(13 / 750 * 100vw);
  position: relative;
  top: calc(-4/750*100vw);
  color: var(--color-white);
  width: calc(167 / 750 * 100vw);
  text-align: center;
  display: inline-block;
  border: 1px solid var(--color-white);
  border-radius: calc(4 / 750 * 100vw);
}
.block-item._02 .item-btn {
  margin-top: calc(24 / 750 * 100vw);
}
.block-item._02 .item-card-link {
  position: absolute;
  top: calc(386/750*100vw);
  left: calc(134/750*100vw);
  width: calc(370 / 750 * 100vw);
  height: calc(610 / 750 * 100vw);
  z-index: 1;
}

.beverage-btn-wrap {
  position: absolute;
  bottom: calc(298/750*100vw);
  left: 0;
  right: 0;
}
.beverage-btn {
  display: block;
  width: calc(480 / 750 * 100vw);
  margin: 0 auto;
  text-align: center;
  color: var(--color-black);
  font-size: calc(28 / 750 * 100vw);
  line-height: calc(40 / 28);
  border: 1px solid var(--color-black);
  border-radius: calc(38 / 750 * 100vw);
  padding: calc(15 / 750 * 100vw) 0;
  font-weight: 500;
}
.alergen-link {
  position: relative;
  text-align: center;
  color: var(--color-black);
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
  top: calc(54/750*100vw);
  left: calc(160/750*100vw);
  font-weight: 500;
}
.alergen-link::after {
  content: "";
  position: absolute;
  bottom: calc(-10/750*100vw);
  left: calc(-2/750*100vw);
  right: 0;
  width: 103%;
  height: 1px;
  background-color: var(--color-black);
}

@media print, screen and (min-width: 910px) {
  .block-item._02 .item-card {
    top: 84px;
    width: 367px;
    height: 1057px;
  }
  .block-item._02 .item-card-desc {
    top: 664px;
    left: 52px;
  }
  .block-item._02 .item-price .non-caffe {
    font-size: 11px;
    margin-left: 7px;
    top: -2px;
    width: 96px;
    border-radius: 2px;
  }
  .block-item._02 .item-btn {
    margin-top: 14px;
  }
  .beverage-btn-wrap {
    bottom: 171px;
  }
  .beverage-btn {
    width: 275px;
    font-size: 16px;
    border-radius: 22px;
    padding: 9px 0;
  }
  .alergen-link {
    font-size: 14px;
    top: 31px;
    left: 92px;
  }
  .alergen-link::after {
    bottom: -6px;
    left: -1px;
  }
  .block-item._02 .item-card-link {
    top: 221px;
    left: 77px;
    width: 212px;
    height: 350px;
  }
}

/* ----------------------------------------------------------
section_30years
---------------------------------------------------------- */
.section_30years {
  position: relative;
  content: "";
  background: url(/cafe/kyoho/images/30years/bg.webp) no-repeat center top / cover;
  background-color: var(--color-white);
  height: calc(466/375*100vw);
  top: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 1;
}

.section_30years .other_inner {
  padding: 0 24px;
}

.section_border > img {
  display: block;
}

.section_30years_title {
  width: calc(240/375*100vw);
  padding-top: calc(32/375*100vw);
  margin: 0 auto calc(48/375*100vw);
}

.section_30years_text {
  color: var(--color-black);
  text-align: center;
  font-weight: 700;
  font-size: calc(14 / 375 * 100vw);
  line-height: calc(25 / 14);
  letter-spacing: 7%;
  margin-bottom: calc(24 / 375 * 100vw);
}

.section_30years_btn {
  position: relative;
  left: 0;
  background-color: #006241;
  width: calc(327 / 375 * 100vw);
  height: calc(56 / 375 * 100vw);
  border-radius: calc(60 / 375 * 100vw);
}
.section_30years_btn a {
  display: block;
  text-align: center;
  color: #d5bd69;
  font-size: calc(16 / 375 * 100vw);
  line-height: calc(56 / 375 * 100vw);
  font-weight: 500;
}

.section_30years_btn a:hover {
  opacity: 1;
}

@media print, screen and (min-width: 910px) {
  .section_30years {
    height: 532px;
    background-position: center top;
  }
  .section_30years_title {
    width: 276px;
    padding-top: 36px;
    margin-bottom: 53px;
  }
  .section_30years_text {
    font-size: 16.045px;
    margin-bottom: 30px;
  }
  .section_30years_btn {
    left: 4px;
    width: 375px;
    height: 61px;
    border-radius: 30px;
  }
  .section_30years_btn a {
    font-size: 18.5px;
    line-height: 61px;
  }
}