html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    font-weight: normal;
}

img {
  border-style: none;
  vertical-align: bottom;
  max-width: 100%;
  /* 追記 */
  object-fit: cover;
}

svg:not(:root) {
  overflow: hidden;
}
/* .ap_hidden {
  display: none !important;
  visibility: hidden;
} */
a {
  color: var(--ap-primary-black);
  text-decoration: none;
  transition: 0.5s;
}

a:hover {
  color: var(--ap-primary-green);
}

body {
  font-family: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
  font-size: clamp(14px,1.3vw,1.6rem);
  /* font-size: 18px; */
  line-height: 2;
  color: var(--ap-primary-black);
  background: var(--ap-primary-white);
  letter-spacing:0.1em;
  overflow-wrap: break-word;
  word-break: normal;
  overflow-x: hidden;
  max-width: 100vw;
  word-wrap: break-word;
}

.zen_maru {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
}


ul {
  list-style: none;
}

.ap_inner{
  width: 90%;
  max-width:1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.ap_tb_visible {
  display: none;
}

.ap_sm_visible {
  display: none;
}

@media screen and (max-width: 1024px) {
.ap_tb_visible {
  display: block;
}
  .ap_tb_hidden {
    display: none !important;
  }
}

@media screen and (max-width: 599px) {
  .ap_sm_hidden {
    display: none !important;
  }
.ap_sm_visible {
  display:block;
}
}
/*文字数制限*/

.ellipsis {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/*文字寄せ*/

.ap_text_center {
  text-align: center !important;
}

.ap_text_right {
  text-align: right !important;
}

.ap_text_left {
  text-align: left !important;
}

/*色*/
/* .ap_bg_primary{
    background: #F0E4D7;
}
.ap_primary{
    color: #D82A1E;
} */
/*******************************
フォント
********************************/


html {
    font-size: 62.5%;
}
@media screen and (max-width: 1024px) {
    html {
        font-size: 55%;
}
}

/*共通部分*/
  /* span,
  a,
  p,
  th,
  td,
  ul,
  ol,
  li,
  dl,
  dt,
  dd,
  b,
  i,
  div{
    font-size: clamp(14px, 1.3vw, 1.6rem);
} */

.fs28{
    font-size: clamp(2rem, 2vw, 2.8rem);
}
.fs26{
    font-size: clamp(2rem, 2vw, 2.6rem);
}
.fs24{
    font-size: clamp(1.8rem, 2vw, 2.4rem);
}
.fs22{
    font-size: clamp(1.8rem, 1.83vw, 2.2rem);
}
.fs20{
    font-size: clamp(1.6rem, 1.6vw, 2rem);
}
.fs18{
    font-size: clamp(1.6rem, 1.5vw, 1.8rem);
}
.fs17{
    font-size: clamp(1.5rem, 1.5vw, 1.7rem);
}
.fs16{
    font-size: clamp(1.5rem, 1.5vw, 1.6rem);
}
.fs14{
    font-size: clamp(1.2rem, 1.16vw, 1.4rem);
}
.fs12{
    font-size: clamp(1.1rem, 1.16vw, 1.2rem);
}


/*****************************
余白
******************************/

.ma {
  margin: 0 auto;
}
.mb0{
  margin-bottom: 0;
}
.mb5{
  margin-bottom: 0.5vw;
}
.mb10{
  margin-bottom: 1vw;
}
.mb15 {
  margin-bottom: 1.5vw;
}
.mb20{
  margin-bottom: 2vw;
}
.mb25{
  margin-bottom: 2.5vw;
}
.mb30{
  margin-bottom: 3vw;
}
.mb35{
  margin-bottom: 3.5vw;
}
.mb40{
  margin-bottom: 4vw;
}
.mb45{
  margin-bottom: 4.5vw;
}
.mb50 {
  margin-bottom: 5vw;
}
.mb55 {
  margin-bottom: 5.5vw;
}
.mb60 {
  margin-bottom: 6vw;
}
.mb65 {
  margin-bottom: 6.5vw;
}
.mb70 {
  margin-bottom: 7vw;
}
.mb75 {
  margin-bottom: 7.5vw;
}
.mb80 {
  margin-bottom: 8vw;
}
.mb85 {
  margin-bottom: 8.5vw;
}
.mb90 {
  margin-bottom: 9vw;
}
.mb95 {
  margin-bottom: 9.5vw;
}
.mb100{
  margin-bottom: 10vw;
}  
  
.mt0{
  margin-top: 0.5vw;
}
.mt10{
  margin-top: 1vw;
}
.mt15 {
  margin-top: 1.5vw;
}
.mt20{
  margin-top: 2vw;
}
.mt25{
  margin-top: 2.5vw;
}
.mt30{
  margin-top: 3vw;
}
.mt35{
  margin-top: 3.5vw;
}
.mt40{
  margin-top: 4vw;
}
.mt45{
  margin-top: 4.5vw;
}
.mt50 {
  margin-top: 5vw;
}
.mt55 {
  margin-top: 5.5vw;
}
.mt60 {
  margin-top: 6vw;
}
.mt65 {
  margin-top: 6.5vw;
}
.mt70 {
  margin-top: 7vw;
}
.mt75 {
  margin-top: 7.5vw;
}
.mt80 {
  margin-top: 8vw;
}
.mt85 {
  margin-top: 8.5vw;
}
.mt90 {
  margin-top: 9vw;
}
.mt95 {
  margin-top: 9.5vw;
}
.mt100{
  margin-top: 10vw;
}

.tradelaw_table {
    display: block;
    width: 100%;
    overflow: auto;
}

.tradelaw_table th,
.tradelaw_table td {
    border: 1px solid ;
    min-width: 50px;
    line-height: 30px;
    text-align: center;
}
/* ap-Templates END */






/*****************************
ヘッダー 
*******************************/
/* トグルメニューの位置 */
.ap_menu {
  display: none;
  transition: 0.5s;
  position: fixed;
  z-index: 1001;
  right: 0;
  top: 0;
  background: transparent;
  padding: 1.5rem;/* 適宜変更 */
  transition: transform 0.5s ease;/* アニメーション設定 */
}

/* トグルメニューボタンスタイル */
.ap_menu_btn_trigger {
  position: relative;
  width: 35px;/* 適宜変更 */
  height: 30px;/* 適宜変更 */
  cursor: pointer;
}

.ap_menu_btn_trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;/* 適宜変更 */
  background: var(--ap-primary-black);
  border-radius: 50px;
}

.ap_menu_btn_trigger,
.ap_menu_btn_trigger span {
  display: inline-block;
  transition: all 0.5s;
  box-sizing: border-box;
}

.ap_menu_btn_trigger span:nth-of-type(1) {
  top: 0;
}

.ap_menu_btn_trigger span:nth-of-type(2) {
  top: 13.5px;
}

.ap_menu_btn_trigger span:nth-of-type(3) {
  bottom: 0;
}

.ap_menu_btn_trigger.active span:nth-of-type(1) {
  transform: translateY(13.5px) rotate(-45deg);
  background: var(--ap-primary-black);
}

.ap_menu_btn_trigger.active span:nth-of-type(2) {
  left: 50%;
  opacity: 0;
  animation: active-btn05-bar02 0.8s forwards;
}
@keyframes active-btn05-bar02 {
  100% {
    height: 0;
  }
}

.ap_menu_btn_trigger.active span:nth-of-type(3) {
  transform: translateY(-13.5px) rotate(45deg);
  background: var(--ap-primary-black);
}

/* トグルメニューの中身 */
.ap_menu_box {
  position: fixed;
  width: 100vw;
  transition: 
    transform 0.5s ease,
    opacity 0.5s ease,
    visibility 0.5s ease,
    height 0.5s ease;/* アニメーション設定 */
  height: 0;
  overflow: auto;
  top: 0;
  opacity: 0;
  visibility: hidden;
  display: none;
  z-index: -1;
  background: var(--ap-primary-white);
  padding-top: 5rem;
  padding-bottom: 10rem;
}

.sp_menu_list {
  opacity: 0;
  transition: opacity 0.5s;
  margin: 4rem auto;
  max-width: 600px;
  width: 90%;
}

.ap_menu_box.open .sp_menu_list {
  opacity: 1;
}

.sp_menu_list > li {
  border-bottom: 1px solid var(--ap-primary-black);
  padding-bottom: 1rem;
  margin-top: 1.5rem;
  padding-left: 1.5rem;
}

.ap_common_arrow {
  position: relative;
  padding: 1rem;
}

.ap_common_arrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ap-primary-green);
  border-bottom: 2px solid var(--ap-primary-green);
  transform: rotate(315deg)
}

.sp_menu_list li a {
  color: var(--ap-primary-black);
  font-size: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 右へ移動設定 */
.menu_slide {
  transform: translateX(260px);
}


/* ヘッダー */
.ap_pc_header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: transform 0.5s ease;
  will-change: transform;
}
.ap_pc_header.hide {
  opacity: 0;
  visibility: hidden;
}

.ap_pc_header.hidden {
  transform: translateY(-120%);
}

.ap_pc_header_top {
  display: flex;
  background-color: var(--ap-primary-white);
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
  /* max-height: 100px; */
  padding: clamp(0.5rem,1vw,1.5rem) 0;
}

.ap_sp_header {
  align-items: center;
  justify-content: space-between;
}

.ap_pc_logo {
  margin: 0 1%;
  max-width: 290px;
  width: 25%;
}

.ap_pc_header_bottom {
  background-color: var(--ap-primary-black);
  padding: clamp(1rem,1vw,2rem) 0;
}

.ap_pc_header_bottom > ul{
  justify-content: space-evenly;
  max-width: 1200px;
  margin: 0 auto;
}

.ap_pc_header_bottom a {
  color: var(--ap-primary-white);
}

.ap_pc_header_bottom a:hover {
  color: var(--ap-primary-green);
}

@media screen and (max-width: 1200px) {
  .ap_menu_box {
    display: block;
  }
  .ap_menu {
    display: block;
  }

  .ap_ec_headernavi,
  .ap_pc_header_bottom {
    display: none;
  }
}

/* .ap_menu_box.opacity {
  opacity: 1;
} */
.ap_menu_box.open {
  height: 100vh;
  z-index: 1000;
  opacity: 1;/* 05/20追記 */
  visibility: visible;/* 05/20追記 */
  padding-top: 5rem;
  padding-bottom: 10rem;
}

/* 商品検索・会員登録・お気に入り・カート */
.ec-headerNaviRole {
  margin: 0;
}

.ec-headerNav {
  display: flex;
  align-items: center;
  gap: clamp(2rem,2vw,4rem);
}

.ec-headerNaviRole .ec-headerNaviRole__right {
  gap: clamp(2rem,2vw,4rem);
}

.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
  padding-right: 40px;
}

@media screen and (min-width: 768px) {
  .ec-headerNaviRole {
    padding-bottom: 0;
    padding-top: 0;
  }

  .ec-headerSearch .ec-headerSearch__category {
    width: 40%;
  }

  .ec-headerSearch .ec-headerSearch__keyword {
    width: 60%;
  }

  .ec-headerNav .ec-headerNav__itemLink {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .ec-headerNav .ec-headerNav__itemLink {
    display: inline-block;
  }
}

/* 検索機能（左） */
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
  background: var(--ap-primary-black);
  padding-left: 10px;
}

.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
  top: 50%;
  transform: translateY(-50%);
}

/* 会員登録・お気に入り・カート アイコン */
.ec-headerNav .ec-headerNav__itemIcon,
.ec-headerNav .ec-headerNav__itemLink,
.ec-cartNavi {
  color: var(--ap-primary-black);
}

.ec-headerNav .ec-headerNav__itemIcon {
  vertical-align: middle;
}

.ec-cartNavi {
  padding: 10px 0 0 0;
  align-items: center;
}




/**************************
共通 
***************************/
section {
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
  /* font-family: "Noto Serif JP", serif; */
  padding: clamp(7rem,7vw,14rem) 0;/* 適宜変更 */
}

.center {
  text-align: center;
}

.ap_flex {
  display: flex;
  flex-wrap: wrap;
}

.ap_flex.reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .ap_flex,
  .ap_flex.reverse {
    flex-direction: column;
  }
}



/* 見出し */
.ap_common_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: clamp(3rem,3vw,6rem) 0;
}
.ap_common_title h2 {
  -webkit-writing-mode: vertical-rl;/* Safari用 */
  writing-mode: vertical-rl;
  font-size: clamp(3.5rem,4.4vw,5rem);
  font-weight: 600;
  padding-top: 2rem;
}
.ap_common_title span {
  color: var(--ap-primary-green);
  font-family: var(--secondary-font);
}
.ap_common_title::before {
  content: '';
  border-bottom: 1px solid var(--ap-primary-green);
  width: clamp(5rem,5vw,10rem);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ap_common_heading h3 {
  font-size: clamp(2.5rem,2.8vw,3rem);/* clamp修正 */
  border-bottom: 1px solid var(--ap-primary-green);
  font-weight: bold;
  padding-bottom: 0.8rem;
  text-align: left;
}

.ap_common_heading h4 {
  font-size: 2rem;/* clamp修正 */
  font-weight: bold;
}

/* ボタン */
.ap_common_btn {
  display: inline-block;
  border: 1px solid var(--ap-primary-black);
  color: var(--ap-primary-black);
  background: transparent;
  position: relative;
  z-index: 1;
  padding: 1rem clamp(5rem,5vw,10rem);
  font-family: var(--secondary-font) !important;
  margin-top: 6rem;
}

.ap_common_btn::after {
  content: '';
  display: block;
  border-bottom: 1px solid var(--ap-primary-green);
  width: 15%;
  /* width: 20%; */
  position: absolute;
  top: 50%;
  right: -8%;
  /* right: -14%; */
  transition: transform 0.5s ease;
}

.ap_common_btn:hover {
  transform: scale(0.98);
}
.ap_common_btn:hover::after {
  transform: translateX(10px);
}

/*****************************
トップスライダー
******************************/
.ap_top_slider {
  padding: 0;
}

.ap_sp_swiper {
  display: none;
}
@media screen and (max-width: 768px) {
  .ap_pc_swiper {
    display: none;
  }

  .ap_sp_swiper {
  display: block;
}
}

.swiper-slide img {
  width: 100%;
  object-fit: cover;
  height: auto;
}


/****************************
新着商品
****************************/

/* トップページ新着商品
---------------------------------------- */
/* ↑に書いてます。1500行目あたり */



/*************************
ファーストビュー
***************************/
.ap_top_fv {
  background-image: url('/html/user_data/img/top_fv.webp');
  background-size: cover;
}
@media screen and (max-width:768px) {
  .ap_top_fv {
    background-image: url('/html/user_data/img/top_fv_sp.webp');
  }
}

.ap_fv_content {
  flex-direction: column;
  align-items: center;
}

.ap_fv_title {
  font-size: clamp(4.5rem,4.8vw,5rem);
  color: var(--ap-primary-white);
  -webkit-writing-mode: vertical-rl;/* Safari用 */
  writing-mode: vertical-rl;
  margin: clamp(6rem,6vw,12rem);
  letter-spacing: 0.2em;
}

.ap_top_fv p {
  color: var(--ap-primary-white);
  line-height: 3.5;
  text-align: center;
  width: 80%;
}

.ap_top_fv .ap_common_btn {
  border: 1px solid var(--ap-primary-white);
  color: var(--ap-primary-white);
}

.ap_top_fv .ap_common_btn:hover {
  color: var(--ap-primary-green);
}




/***************************
取扱商品
*****************************/
.our_products_content {
  gap: clamp(4rem,4vw,8rem);
  justify-content: space-between;
}

.products_images_box {
  position: relative;
  width: 45%;
  height: 360px;/* 適宜変更 */
}
@media screen and (max-width: 768px) {
  .products_images_box {
    width: 90%;
    margin: 0 auto;
  }
}

.products_images_box div {
  max-width: 300px;
}
@media screen and (max-width: 599px) {
  .products_images_box div {
    max-width: 250px;
  }
}

.products_images_box div:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
}

.products_images_box div:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  right: 0;
}

.products_text {
  width: 45%;
  align-content: end;
}
@media screen and (max-width: 768px) {
  .products_text {
    width: 90%;
    margin: 0 auto;
  }
}

.products_text p {
  line-height: 3.0;
}

/**************************
店舗紹介
****************************/
.ap_shoplist {
  padding: 0;
}

.ap_shoplist .ap_common_btn {
  margin-top: clamp(2rem,2vw,4rem);
}

.shoplist_content {
  background: var(--ap-primary-white);
  /* 背景画像の設定 */
  background-image: url('/html/user_data/img/top_shops_bg01.webp'), url('/html/user_data/img/top_shops_bg02.webp');
  /* 画像の繰り返し設定 */
  background-repeat: no-repeat;
  /* 画像の配置位置 */
  background-position: left top, right bottom;
  /* 画像のサイズ */
  background-size: 60% auto;
  padding: clamp(5rem,5vw,10rem) 0 clamp(8rem,8vw,16rem);
}

.shoplist_image {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .shoplist_image {
    width: 90%;
  }
}

.shoplist_image > img {
  aspect-ratio: 3 / 2;
}

.shoplist_title {
  text-align: center;
  margin: clamp(1rem,1vw,2rem) 0;
}

.shoplist_title p {
  font-weight: bold;
  font-size: 2rem;
}

.shoplist_title h3 {
  font-weight: bold;
  font-size: clamp(3rem,3vw,3.5rem);
}

.shoplist_text {
  width: 70%;
  margin: clamp(1rem,1vw,2rem) auto;
  line-height: 2.5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .shoplist_text {
    width: 90%;
  }
}

.shoplist_seichouen {
  margin-top: clamp(8rem,8vw,16rem);
}


/******************************
商品カテゴリ
******************************/
.ap_product_cate .ap_common_title {
  margin: 0;
}
.product_cate_container {
  justify-content: center;
  gap: clamp(4rem,4vw,8rem);
}
.product_cate_box {
  gap: clamp(2rem,2vw,4rem);
}

.product_cate_tea {
  background-image: url('/html/user_data/img/category01.webp');
  background-size: cover;
}
.product_cate_grape {
  background-image: url('/html/user_data/img/category02.webp');
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .product_cate_tea {
    background-image: url('/html/user_data/img/category01_sp.webp');
  }

  .product_cate_grape {
    background-image: url('/html/user_data/img/category02_sp.webp');
  }
}

.product_cate_tea,
.product_cate_grape {
  display: block;
  position: relative;
  padding: 3rem 6rem;
}
@media screen and (max-width: 768px) {
  .product_cate_tea,
  .product_cate_grape {
    padding: 6rem 0;
  }
}

.product_cate_tea span,
.product_cate_grape span {
  color: var(--ap-primary-white);
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;/* Safari用 */
  font-size: 3.5rem;
  position: absolute;
  bottom: 2rem;
  right: 0;
  text-shadow: 2px 2px 2px rgba(46,38,36,1);
}
@media screen and (max-width: 768px) {
  .product_cate_tea span,
  .product_cate_grape span {
    writing-mode: horizontal-tb;
    bottom: 0;
    right: 1rem;
  }
}

.product_cate_tea:hover,
.product_cate_grape:hover {
  transform: scale(0.98);
  transition: 0.5s;
  opacity: 0.8;
}


/**************************
フッター
*****************************/
footer {
  background-color: var(--ap-primary-black);
}
@media screen and (max-width: 768px) {
  footer .ap_inner {
    width: 80%;
  }
}

.ap_footer_menu {
  justify-content: space-between;
  padding: clamp(4rem,4vw,8rem) 0;

}
@media screen and (max-width: 768px) {
  .ap_footer_menu {
    gap: 4rem;
  }
}

.ap_footer_logo {
  width: 20%;
}
@media screen and (max-width: 768px) {
  .ap_footer_logo {
    width: 70%;
    margin: 0 auto;
  }
}

.footer_menu_right {
  width: 75%;
  gap: clamp(4rem,4vw,8rem);
}

.footer_menu_right > ul li:nth-of-type(2) {
  margin: 1.5rem 0;
}

.footer_menu_right a {
  color: var(--ap-primary-white);
}

.footer_menu_right a:hover {
  color: var(--ap-primary-green);
}

.ap_copy {
  color: var(--ap-primary-white);
  text-align: center;
  padding-bottom: 1rem;
  font-size: 12px;
}

/*****************************
下層ページ
*******************************/
/* 色変更 */
.ec-role,
.ec-contactRole,
.ec-shelfGrid a,
.ec-navlistRole .ec-navlistRole__navlist a,
.ec-navlistRole .active a,
.ec-searchnavRole .ec-searchnavRole__infos,
.ec-mypageRole,
.ec-welcomeMsg,
.ec-shelfRole,
.ec-headingTitle,
.ec-productRole,
.ec-registerRole {
  color: var(--ap-primary-black);
}

.ec-shelfGrid li {
  gap: clamp(1rem,1vw,2rem);
}

.ec-shelfGrid a {
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
}

.ec-shelfGrid a .product-name {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 10px;
}

.ec-shelfGrid__item  a:hover{
  transition: 0.5s;
  transform: scale(0.98);
  color: var(--ap-primary-green);
}


.ap-product-area h3 {
  color: var(--ap-primary-green);
}

.ec-pageHeader h1 {
  border-bottom: 1px dotted var(--ap-primary-black);
  border-top: 1px solid var(--ap-primary-black);
}

@media screen and (min-width: 768px) {
  .ec-cartNavi {
    background: transparent !important;
  }

  .ec-pageHeader h1, .ec-pageHeader .h1 {
    border-top: none;
  }

  .ec-productRole .ec-productRole__price,
  .ec-productRole .ec-productRole__tags {
    border-bottom: 1px dotted var(--ap-primary-black);
  }
}

.ec-borderedDefs {
  border-top: 1px dotted var(--ap-primary-black);
}

.ec-productRole .ec-productRole__code,
.ec-productRole .ec-productRole__category,
.ec-borderedDefs dl,
.ec-welcomeMsg {
  border-bottom: 1px dotted var(--ap-primary-black);
}

.ec-navlistRole .ec-navlistRole__item,
.ec-navlistRole .ec-navlistRole__navlist {
  border-color: var(--ap-primary-black);
}

.ec-layoutRole {
  background: var(--ap-primary-white);
}


/* レビュー */
.review_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.review_list li {
  width: 28%;
}

@media screen and (max-width: 768px) {
  .review_list li {
    width: 100%;
  }
}

.review_list li strong {
  font-weight: bold;
  font-size: 2rem;
}  

.review_list li p:nth-child(2),
.review_list li strong {
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
}

.review_list li .recommend_name {
  display: block;
  margin-bottom: 1rem;
}

/* 余白調整 */
/* トップページの余白
---------------------------------------------*/
.front_page .ec-layoutRole .ec-layoutRole__contents {
  margin-top: clamp(6rem,8vw,18rem);
  margin-bottom: 0;
}

/* 下層ページの余白
---------------------------------------*/
.ec-layoutRole .ec-layoutRole__contents {
  /* margin-top: clamp(8rem,12vw,16rem); */
  margin-top: clamp(8rem,14vw,22rem);
  margin-bottom: clamp(3rem,3vw,6rem);
  max-width: 1200px;
}

@media screen and (max-width: 768px) {
  .ec-productRole .ec-productRole__price {
    margin-top: 1.5rem;
  }
}

/* 商品一覧ページ */

/* .product-name {
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
  font-weight: bold;
} */

.price02-default {
  margin-top: 5%;
}

/* 商品詳細ページ */
/* フォントサイズ変更 */
.ec-price .ec-price__price,
.customer_rank_price_default {
  font-size: 2.4rem;
  padding: 0 0.5rem;
}

.ec-headingTitle {
  font-weight: bold !important;
}


.customer_rank_price_default {
  font-weight: bold;
}

.ec-productRole__price p:nth-child(1) {
  font-size: 2rem;
}


/* 季節おすすめ商品一覧 */

.ap-seasonable-product-wrap {
  margin: clamp(2rem,2vw,4rem) 0;
}

.ap-seasonable-product-wrap > div {
  width: 100%;
}

.ap-seasonable-product-wrap > div > div {
  width: calc((100% - clamp(3rem,3vw,6rem)*3) / 4);
}

@media screen and (max-width: 768px) {
  .ap-seasonable-product-wrap > div > div {
    width: calc((100% - clamp(3rem,3vw,6rem)*1) / 2);
    margin: 0;
  }
}

/* ------------------------------
 ap style css
------------------------------ */
.front_page .ec-layoutRole__contents {
    width: 100%;
    max-width: none;
    /* 追記 */
    background-image: url('/html/user_data/img/bg.webp');
}

:root{
    --ap-primary-green: #677f32;
    --ap-primary-black: #2e2624;
    --ap-primary-white: #fcfaf2;
    --secondary-font: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}

/* .zen-maru-gothic-m {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
} */

/* 仮り設定 */
.ec-blockBtn--action{
    font-size: 1.6rem;
    background-color: #2e2624;
    border: none;
}

.ec-select select{
    font-size: 1.6rem;
}

.ec-numberInput input[type=number] {
    font-size: 1.6rem;
}

.ec-blockBtn--cancel {
    font-size: 1.6rem;
}





/* カート画面
---------------------------------------- */
.ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
    font-size: 1.6rem;
}

.ec-inlineBtn{
    font-size: 1.6rem;
}

.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea {
    font-size: 1.6rem;
}

.ec-inlineBtn--cancel, .ec-inlineBtn--action {
    font-size: 1.6rem;
}

.ec-price .ec-price__tax {
    font-size: .6em;
}

.ec-categoryNaviRole{
    margin-bottom: 4rem;
}

/* 商品詳細ページ
---------------------------------------- */
.ap-item-photo-area{
    margin-bottom: 3rem;
}

table {
    border-collapse: collapse;
}

table.ap-table-style01{
    margin-top: 2em;
}

table.ap-table-style01 *{
    font-size: 1.4rem;
}

.ap-table-style01 th{
    width: 0;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

.ap-table-style01 th, .ap-table-style01 td{
    border: solid 1px #999;
    padding: 1rem 1.6rem;
}

.ap-table-style01 ol{
    padding-left: 1.5em;
}

.ec-productRole__description h3{
    font-size: clamp(1.8rem, 1.83vw, 2.2rem);
    margin-bottom:2rem;
}

.ec-productRole__description{
  line-height: 1.6;
}

.ec-productRole__profile .ec-productRole__btn button {
  font-family: var(--secondary-font);
}

.ap-product-area *{
  /* font-family: var(--secondary-font) */
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
}

.ap-product-detail ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ap-product-detail ul li {
  width: 28%;
}

.ap-product-detail ul li img {
  aspect-ratio: 1.2;
}

.ap-product-detail ul div,
.ap-product-detail ul div p {
  margin-top: 1rem;
}

.ap-product-detail ul div h4 {
  font-size: 1.8rem;
}

.ap-product-area h3{
  font-size: clamp(1.8rem, 1.83vw, 2.2rem);
  color: #2e2624;
  /* text-align: center; */
  padding-top: 3rem;
}

@media screen and (max-width: 768px) {
  .ap-product-detail ul li {
    width: 49%;
  }
}

/* Teadays 商品詳細ページ
---------------------------------------- */
.ap-gift-set-outer{
  background-color: #F4FAEE;
  border-radius: 10px;
  padding: 3rem 3rem;
  margin-top: 5rem;
}

.ap-gift-set-outer > img{
  max-width: 700px;
  display: block;
  margin: 0 auto;
}

.ap-gift-set-text{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 4%;
    margin: 6rem 0 0;
}

.ap-gift-set-text div {
    width: 48%;
    display: flex;
    align-items: center;
    column-gap: 4%;
}

.ap-gift-set-text img {
    width: 160px;
}

.ap-lead-text p{
  font-size: clamp(1.6rem, 1.6vw, 2rem);
  line-height: 1.8;
  text-align: center;
  font-weight: bold;
}



.tea-3set-area{
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
}

.tea-3set-area div{
  width: calc((100% - 4%) / 3);
  margin-bottom: 3rem;
  font-family: var(--secondary-font);
}

.tea-3set-area div p:nth-of-type(1){
  margin: 8px 0;
}


.ap-product-info{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #fbf7ef;
  padding: 6rem 0;
}

.ap-indent-second-line{
  text-indent: -1em;
  padding-left: 1em;
}



.ap-shop-old-left{
  width: 35%;
}

.ap-shop-old-right{
  width: 65%;
  padding-left: 5%;
}

.ap-shop-old-right p{
  margin-bottom: 1em;
}

.ap-zigzag-01 div:nth-of-type(odd){
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ap-zigzag-01 div:nth-of-type(even){
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
}

.ap-zigzag-01 div img{
  width: 40%;
}

.ap-zigzag-01 div p{
  width: 60%;
}



.single-tea-img {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.single-tea-img div {
  display: flex;
  justify-content: space-around;
  width: 48%;
  margin: 2rem 0;
}

.single-tea-img div:nth-child(1) img {
  width: 40%;
}

@media screen and (max-width: 768px) {
  .single-tea-img {
    display: block;
  }

  .single-tea-img div {
    width: 90%;
    margin: 2rem auto;
  }
}




/* カテゴリメニュー
---------------------------------------- */
.category-7,
.category-9 {
    display: none !important;
}

/* トップページ商品（新着・季節おすすめ etc.）
---------------------------------------- */
.ap-top-product-container{
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .ap-top-product-container {
    flex-direction: column;
    gap: 4rem;
  }
}

.ap-top-product-container .ap_common_title{
  width: 19%;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .ap-top-product-container .ap_common_title {
    width: 100%;
  }
}

.ap-top-product-list{
  width: 81%;
  gap: clamp(3rem,3vw,6rem);
  display: flex;
  flex-wrap: wrap;
}


.ap-top-product__item > a {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem,1vw,2rem);
}

@media screen and (max-width: 768px) {
  .ap-top-product-list {
    /* flex-direction: column; */
    width: 100%;
  }

  .ap-top-product__item > a {
    /* flex-direction: row;
    width: 100%;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between; */
  }
}

.ap-top-product__item{
  width: calc((100% - clamp(3rem,3vw,6rem)*2) / 3);
}

.ap-top-product__item > a:hover {
  transform: scale(0.98);
  transition: 0.5s;
}

.ap-top-product-image{
  /* flex: 0 0 100%; */
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.ap-top-product__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.ap-top-product__name{
  font-weight: bold;
  font-size: 1.8rem;
  margin-top: 10px;
}

.ap-top-product__member-label{
  font-weight: bold;
}

.ap-top-product__item .ap-price-tax{
  font-size: 13px;
}

.ap-top-product__member-price{
  border-top: dashed 1px var(--ap-primary-black);
  padding-top: 6px;
  margin-top: 4px;
}

/* .ap-top-product__price {
  display: flex;
} */

/* 追記 */
@media screen and (max-width: 768px) {
  .ap-top-product__item {
    width: 80%;
    /* width: 50%; */
    margin: 0 auto;
  }
  .ap-top-product-image {
    flex: 0 0 100%;
  }
  .ap-top-product-text {
    flex: 0 0 100%;
  }
  .ap-top-product__price {
    display: inline-block;
  }
}

/* 新着情報
-------------------------------------------*/
.ap_top_news {
  padding: 0 0 clamp(7rem,7vw,14rem);
}

.ec-newsRole {
  padding: 0;
}

.ec-newsRole.ap_flex {
  justify-content: space-between;
}

.ap_top_news .ap_common_title {
  margin: 0;
  width: 20%;
}
@media screen and (max-width:768px) {
  .ap_top_news .ap_common_title {
    width: auto;
  }
}

.ec-newsRole .ec-newsRole__news {
  border: none;
  padding: 0;
  width: 70%;
}
@media screen and (max-width:768px) {
  .ec-newsRole .ec-newsRole__news {
    width: auto;
  }
}

.ec-newsRole .ec-newsRole__newsItem {
  padding: 0;
}

.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type),
.ec-newsRole .ec-newsRole__newsItem {
  border-bottom: 1px solid var(--ap-primary-green);
  padding: clamp(1rem,1vw,2rem) 0;
}

.ec-newsRole .ec-newsRole__newsDate,
.ec-newsRole .ec-newsRole__newsTitle,
.ec-newsRole .ec-newsRole__newsDescription {
  /* 日付・見出し・本文のフォントサイズ変更 */
    font-size: clamp(14px,1.3vw,1.6rem);
}

.ec-newsRole .ec-newsRole__newsTitle {
  /* 見出し色変更 */
  color: var(--ap-primary-black);
}

.ec-newsRole .ec-newsRole__newsCloseBtn {
  /* active close ボタンの色変更 */
  color: var(--ap-primary-green);
  background: transparent;
  /* 位置修正 */
  top: 50%;
  transform: translateY(-50%);
}

.fas {
  /* active close ボタンのサイズ変更 */
  font-size: 2.5rem;
}

.ec-newsRole .ec-newsRole__newsItem:last-of-type {
  margin: 0;
}

/* teadaysとは + 清澄園　《共通》
-------------------------------------------*/
.ap_brand_page {
  padding: clamp(3rem,3vw,6rem) 0;
}

.ap_brand_page p {
  font-family: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}

/* teadaysとは & 清澄園とは */
.ap_flex.ap_brand_concept {
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .ap_flex.ap_brand_concept {
    flex-direction: column-reverse;
    gap: 2rem;
    align-items: center;
  }
}

.ap_brand_concept_left {
  width: 40%;
}

.ap_brand_concept_left > img {
  aspect-ratio: 7 / 5;
}

.ap_brand_concept_right {
  display: inline-flex;
  flex-wrap: wrap;
  /* 追記 */
  align-items: flex-start;
  flex-direction: row-reverse;
  gap: clamp(3rem,3vw,6rem);
}

.ap_brand_concept_right {
  width: 60%;
}
@media screen and (max-width: 768px) {
  .ap_brand_concept_left,
  .ap_brand_concept_right {
    width: 100%;
  }
}

.ap_brand_concept_right .ap_common_title {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .ap_brand_concept_right {
    flex-direction: column;
  }

  .ap_brand_concept_right .ap_common_title {
    margin: 0 auto;
  }
}

.ap_brand_concept_text {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;/* Safari用 */
  line-height: 2.6;
}
.ap_brand_concept_text.seichouen {
  max-inline-size: 33rem;
}
.ap_brand_concept_text.teadays {
  max-inline-size: 45rem;
}

@media screen and (max-width: 768px) {
  .ap_brand_concept_text {
    writing-mode: horizontal-tb;
    line-height: 2;
  }

  .ap_brand_concept_text.seichouen,
  .ap_brand_concept_text.teadays {
    max-inline-size: none;
  }
}

/* flex共通 */
.ap_brand_feature > .ap_flex {
  justify-content: space-between;
  align-items: center;
  margin: 4rem 0;/* 追記 */
}
@media screen and (max-width:768px) {
  .ap_brand_feature > .ap_flex {
    gap: 2rem;
  }
}

/* 画像アスペクト比統一 */
.ap_brand_flex_img > img {
  aspect-ratio: 2.3 / 1.5;
  /* aspect-ratio: 7 / 5; */
}

.ap_brand_flex_img,
.ap_brand_flex_text {
  width: 45%;
}
@media screen and (max-width:768px) {
  .ap_brand_flex_img,
  .ap_brand_flex_text {
    width: 90%;
  }
}

.ap_brand_flex_text.teadays > p,
.ap_brand_flex_text.seichouen > p {
  margin-top: clamp(1rem,1vw,2rem);
}

.ap_brand_concept,
.ap_brand_content02 {
  padding: clamp(3rem,3vw,6rem) 0;
}

.ap_brand_content03 .ap_brand_flex_text {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .ap_brand_content03 .ap_brand_flex_text {
    width: 90%;
  }
}

/* 各店舗取扱商品 */
.ap_goods_container {
  margin: clamp(5rem,5vw,10rem) 0;
}

.ap_flex.ap_goods_container {
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .ap_flex.ap_goods_container {
    row-gap: 2rem;
  }
}

.ap_goods_image {
  width: 30%;
}
.ap_goods_text_content {
  width: 60%;
}
@media screen and (max-width: 768px) {
  .ap_goods_image,
  .ap_goods_text_content {
    width: 90%;
  }
}

.ap_goods_text_content .ap_common_btn {
  margin-top: 3rem;
}

.ap_goods_container.seichouen,
.ap_goods_container.teadays {
  margin: clamp(2.5rem,2.5vw,5rem) 0 clamp(5rem,5vw,10rem);
  /* margin: clamp(2.5rem,2.5vw,5rem) 0; */
  /* margin: clamp(3rem,3vw,6rem) 0; */
}

.ap_goods_text_content.seichouen h4,
.ap_goods_text_content.teadays h4 {
  border-bottom: 1px dotted var(--ap-primary-green);
  padding-bottom: 0.5rem;
  
}


/* teadays
-------------------------------------------*/
.tea_midori {
  border-top-color: #336600;
}

.tea_kaori {
  border-top-color: #749b00;
}

.tea_koku {
  border-top-color: #b9b822;
}

.tea_bai {
  border-top-color: #663300;
}

.tea_isago {
  border-top-color: #125b2e;
}

.teadays_goods_name {
  font-size: 3rem;
  font-weight: bold;
  position: relative;
}

.teadays_goods_name span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  margin: 0 1rem;
}

.teadays_goods_name > .ap_line {
  border-top-width: 2px;
  border-top-style: solid;
  width: 20px;
}

.teadays_goods_name > span:not(:nth-of-type(1)) {
  padding-left: 3rem;
}

.teadays_goods_catchcopy {
  font-weight: bold;
  font-size: 2rem;
  padding: clamp(1rem,1vw,2rem) 0;
}

.ap_goods_text_content.teadays > p {
  margin-top: clamp(1rem,1vw,2rem);
}


/* 清澄園
-------------------------------------------*/
/* カレンダー */
.ap_seithouen_calendar .ap_common_title {
  margin: 0;
}
@media screen and (max-width:768px) {
  .ap_seithouen_calendar .ap_common_title {
    margin-bottom: 3rem;
  }
}

.ap_seithouen_calendar > .ap_flex {
  justify-content: space-between;
  flex-wrap: nowrap;
}

.ap_table_scroll {
  overflow-x: auto;
}

@media screen and (max-width: 768px) {
  .ap_table_scroll {
    overflow-x: scroll;
  }
}

.ap_calendar_wrapper {
  min-width: 800px;
}

.ap_calendar_wrapper {
  border: 1px solid var(--ap-primary-green);
  overflow: hidden;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .ap_calendar_wrapper {
  }
}

.ap_calendar_wrapper table {
  border: 1px solid var(--ap-primary-green);
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;
}

.ap_calendar_wrapper thead {
  background-color: var(--ap-primary-green);
}

.ap_calendar_wrapper thead th {
  font-size: 1.6rem;
  color: var(--ap-primary-white);
  padding: 10px 4px;
  white-space: nowrap;
  border: 1px solid var(--ap-primary-green);
}

.ap_calendar_wrapper table thead th span {
  font-size: 2.8rem;
}

.ap_calendar_wrapper th,
.ap_calendar_wrapper td {
  padding: 8px;
  border: 1px solid #999;/* 色修正するかも */
}

.ap_calendar_wrapper tbody tr:nth-of-type(even) {
  background-color: rgba(103,127,50,0.1);
}

.ap_calendar_wrapper td {
  width: 6.25%;
  font-size: 3rem;
  font-weight: 500;
  color: var(--ap-primary-green);
  line-height: 1.7;
  vertical-align: middle;
}

.ap_calendar_wrapper td:nth-of-type(1) {
  width: 25%;
  font-size: 2rem;
  font-weight: 500;
  color: var(--ap-primary-black);
  text-align: left;
  border-left: none;
  padding-left: 20px;
  white-space: nowrap;
}

.ap_calendar_wrapper tr:nth-last-of-type(1) td {
  border-bottom: none;
}

.ap_calendar_wrapper td:nth-last-of-type(1) {
  border-right: none;
}

/* 取扱商品 */
.ap_flex.ap_goods_container.seichouen {
  align-items: flex-start;
}
@media screen and (max-width:768px) {
  .ap_flex.ap_goods_container.seichouen {
    align-items: center;
  }
}

.ap_goods_text_content.seichouen h5 {
  font-weight: bold;
  font-size: 1.8rem;
  margin: clamp(1rem,1vw,2rem) 0;
}

.ap_goods_text_content.cherry > div:nth-of-type(even) {
  margin: clamp(2rem,2vw,4rem) 0;
}

.ap_goods_text_content.cherry > div:nth-last-child(2) {
  margin-bottom: 0;
}

/* wabinoajiとは
---------------------------------------------*/
.ap_wabinoaji {
  padding: 0;
}

.ap_wabinoaji p {
  font-family: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}

.page-wabinoaji .ec-layoutRole .ec-layoutRole__contents {
  margin-top: clamp(8rem,12vw,18rem);
  margin-bottom: 0;
  max-width: none;
}

.ap_wabinoaji_fv {
  background: 
    linear-gradient(rgba(256,256,256,0.1), rgba(256,256,256,0.9)),
    url('/html/user_data/img/about01.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom 40%;
  padding: clamp(6rem,6vw,12rem) 0;
}

.ap_wabinoaji_fv > .ap_flex {
  flex-direction: row-reverse;
  gap: clamp(4rem,4vw,8rem);
  flex-wrap: nowrap;
  /* justify-content: space-between; */
}
@media screen and (max-width:768px) {
  .ap_wabinoaji_fv > .ap_flex {
    flex-direction: column;
  }
}

.ap_wabinoaji_fv_title {
  writing-mode: vertical-rl;
  margin: 0 auto;
  font-size: clamp(3.5rem,4.4vw,5rem);
  text-shadow: 2px 2px 3px var(--ap-primary-white);
}

.ap_wabinoaji_fv_title > h2 {
  font-weight: bold;
}

.ap_wabinoaji_fv_text {
  font-weight: 500;
  text-shadow: -0.1px -0.1px var(--ap-primary-black),
                1px 1px var(--ap-primary-white);
  line-height: 2.4;
}

.ap_wabinoaji_fv_text,
.ap_wabinoaji_about_end {
  font-size: clamp(1.6rem,1.7vw,1.8rem);
}


.ap_wabinoaji_heading > h3 {
  font-size: clamp(2.4rem,2.8vw,3.5rem);
  font-weight: 500;
  border-bottom: 1px dotted var(--ap-primary-green);
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
}

.ap_wabinoaji_heading > h3 > span {
  font-size: clamp(14px,1.4vw,16px);
  display: block;
  font-family: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
  color: var(--ap-primary-green);
  padding-bottom: 1rem;
  text-indent: -1em;
}

.ap_wabinoaji > div:nth-of-type(even) {
  padding: clamp(4rem,4vw,8rem) 0;
}

.ap_wabinoaji_content > .ap_flex {
  justify-content: space-between;
  margin: clamp(2rem,2vw,4rem) 0;
}

.ap_wabinoaji_img_box {
  position: relative;
  width: 45%;
  height: 360px;/* 適宜変更 */
}
@media screen and (max-width:768px) {
  .ap_wabinoaji_img_box {
    width: 90%;
    margin: 0 auto;
  }
}

.ap_wabinoaji_img_box div {
  max-width: 300px;
}
@media screen and (max-width: 599px) {
  .ap_wabinoaji_img_box div {
    max-width: 250px;
  }
}

.ap_wabinoaji_img_box div:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
}

.ap_wabinoaji_img_box div:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  right: 0;
}

.ap_flex.reverse > .ap_wabinoaji_img_box div:nth-of-type(1) {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: 5;
}

.ap_flex.reverse > .ap_wabinoaji_img_box div:nth-of-type(2) {
  position: absolute;
  top: 0;
  right: 0;
}

.ap_wabinoaji_img_box div > img {
  aspect-ratio: 4 / 3;
}

.ap_wabinoaji_text {
  width: 45%;
  align-content: center;
}
@media screen and (max-width:768px) {
  .ap_wabinoaji_text {
    width: 90%;
    margin: 0 auto;
  }
}

.ap_wabinoaji_text p {
  line-height: 2.5;
}




.ap_wabinoaji_about_end {
  background-image: url('/html/user_data/img/top_fv.webp');
  background-size: cover;
  color: var(--ap-primary-white);
  padding: clamp(10rem,12vw,15rem) 5% clamp(6rem,6vw,12rem);
  background-position: center bottom 33%;
  width: 100vw;
}
@media screen and (max-width:768px) {
  .ap_wabinoaji_about_end {
    background-image: url('/html/user_data/img/top_fv_sp.webp');
  }
}

/* 
------------------------------------*/html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    font-weight: normal;
}

img {
  border-style: none;
  vertical-align: bottom;
  max-width: 100%;
  /* 追記 */
  object-fit: cover;
}

svg:not(:root) {
  overflow: hidden;
}
/* .ap_hidden {
  display: none !important;
  visibility: hidden;
} */
a {
  color: var(--ap-primary-black);
  text-decoration: none;
  transition: 0.5s;
}

a:hover {
  color: var(--ap-primary-green);
}

body {
  font-family: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
  font-size: clamp(14px,1.3vw,1.6rem);
  /* font-size: 18px; */
  line-height: 2;
  color: var(--ap-primary-black);
  background: var(--ap-primary-white);
  letter-spacing:0.1em;
  overflow-wrap: break-word;
  word-break: normal;
  overflow-x: hidden;
  max-width: 100vw;
  word-wrap: break-word;
}

.zen_maru {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
}


ul {
  list-style: none;
}

.ap_inner{
  width: 90%;
  max-width:1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.ap_tb_visible {
  display: none;
}

.ap_sm_visible {
  display: none;
}

@media screen and (max-width: 1024px) {
.ap_tb_visible {
  display: block;
}
  .ap_tb_hidden {
    display: none !important;
  }
}

@media screen and (max-width: 599px) {
  .ap_sm_hidden {
    display: none !important;
  }
.ap_sm_visible {
  display:block;
}
}
/*文字数制限*/

.ellipsis {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/*文字寄せ*/

.ap_text_center {
  text-align: center !important;
}

.ap_text_right {
  text-align: right !important;
}

.ap_text_left {
  text-align: left !important;
}

/*色*/
/* .ap_bg_primary{
    background: #F0E4D7;
}
.ap_primary{
    color: #D82A1E;
} */
/*******************************
フォント
********************************/


html {
    font-size: 62.5%;
}
@media screen and (max-width: 1024px) {
    html {
        font-size: 55%;
}
}

/*共通部分*/
  /* span,
  a,
  p,
  th,
  td,
  ul,
  ol,
  li,
  dl,
  dt,
  dd,
  b,
  i,
  div{
    font-size: clamp(14px, 1.3vw, 1.6rem);
} */

.fs28{
    font-size: clamp(2rem, 2vw, 2.8rem);
}
.fs26{
    font-size: clamp(2rem, 2vw, 2.6rem);
}
.fs24{
    font-size: clamp(1.8rem, 2vw, 2.4rem);
}
.fs22{
    font-size: clamp(1.8rem, 1.83vw, 2.2rem);
}
.fs20{
    font-size: clamp(1.6rem, 1.6vw, 2rem);
}
.fs18{
    font-size: clamp(1.6rem, 1.5vw, 1.8rem);
}
.fs17{
    font-size: clamp(1.5rem, 1.5vw, 1.7rem);
}
.fs16{
    font-size: clamp(1.5rem, 1.5vw, 1.6rem);
}
.fs14{
    font-size: clamp(1.2rem, 1.16vw, 1.4rem);
}
.fs12{
    font-size: clamp(1.1rem, 1.16vw, 1.2rem);
}


/*****************************
余白
******************************/

.ma {
  margin: 0 auto;
}
.mb0{
  margin-bottom: 0;
}
.mb5{
  margin-bottom: 0.5vw;
}
.mb10{
  margin-bottom: 1vw;
}
.mb15 {
  margin-bottom: 1.5vw;
}
.mb20{
  margin-bottom: 2vw;
}
.mb25{
  margin-bottom: 2.5vw;
}
.mb30{
  margin-bottom: 3vw;
}
.mb35{
  margin-bottom: 3.5vw;
}
.mb40{
  margin-bottom: 4vw;
}
.mb45{
  margin-bottom: 4.5vw;
}
.mb50 {
  margin-bottom: 5vw;
}
.mb55 {
  margin-bottom: 5.5vw;
}
.mb60 {
  margin-bottom: 6vw;
}
.mb65 {
  margin-bottom: 6.5vw;
}
.mb70 {
  margin-bottom: 7vw;
}
.mb75 {
  margin-bottom: 7.5vw;
}
.mb80 {
  margin-bottom: 8vw;
}
.mb85 {
  margin-bottom: 8.5vw;
}
.mb90 {
  margin-bottom: 9vw;
}
.mb95 {
  margin-bottom: 9.5vw;
}
.mb100{
  margin-bottom: 10vw;
}  
  
.mt0{
  margin-top: 0.5vw;
}
.mt10{
  margin-top: 1vw;
}
.mt15 {
  margin-top: 1.5vw;
}
.mt20{
  margin-top: 2vw;
}
.mt25{
  margin-top: 2.5vw;
}
.mt30{
  margin-top: 3vw;
}
.mt35{
  margin-top: 3.5vw;
}
.mt40{
  margin-top: 4vw;
}
.mt45{
  margin-top: 4.5vw;
}
.mt50 {
  margin-top: 5vw;
}
.mt55 {
  margin-top: 5.5vw;
}
.mt60 {
  margin-top: 6vw;
}
.mt65 {
  margin-top: 6.5vw;
}
.mt70 {
  margin-top: 7vw;
}
.mt75 {
  margin-top: 7.5vw;
}
.mt80 {
  margin-top: 8vw;
}
.mt85 {
  margin-top: 8.5vw;
}
.mt90 {
  margin-top: 9vw;
}
.mt95 {
  margin-top: 9.5vw;
}
.mt100{
  margin-top: 10vw;
}

.tradelaw_table {
    display: block;
    width: 100%;
    overflow: auto;
}

.tradelaw_table th,
.tradelaw_table td {
    border: 1px solid ;
    min-width: 50px;
    line-height: 30px;
    text-align: center;
}
/* ap-Templates END */






/*****************************
ヘッダー 
*******************************/
/* トグルメニューの位置 */
.ap_menu {
  display: none;
  transition: 0.5s;
  position: fixed;
  z-index: 1001;
  right: 0;
  top: 0;
  background: transparent;
  padding: 1.5rem;/* 適宜変更 */
  transition: transform 0.5s ease;/* アニメーション設定 */
}

/* トグルメニューボタンスタイル */
.ap_menu_btn_trigger {
  position: relative;
  width: 35px;/* 適宜変更 */
  height: 30px;/* 適宜変更 */
  cursor: pointer;
}

.ap_menu_btn_trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;/* 適宜変更 */
  background: var(--ap-primary-black);
  border-radius: 50px;
}

.ap_menu_btn_trigger,
.ap_menu_btn_trigger span {
  display: inline-block;
  transition: all 0.5s;
  box-sizing: border-box;
}

.ap_menu_btn_trigger span:nth-of-type(1) {
  top: 0;
}

.ap_menu_btn_trigger span:nth-of-type(2) {
  top: 13.5px;
}

.ap_menu_btn_trigger span:nth-of-type(3) {
  bottom: 0;
}

.ap_menu_btn_trigger.active span:nth-of-type(1) {
  transform: translateY(13.5px) rotate(-45deg);
  background: var(--ap-primary-black);
}

.ap_menu_btn_trigger.active span:nth-of-type(2) {
  left: 50%;
  opacity: 0;
  animation: active-btn05-bar02 0.8s forwards;
}
@keyframes active-btn05-bar02 {
  100% {
    height: 0;
  }
}

.ap_menu_btn_trigger.active span:nth-of-type(3) {
  transform: translateY(-13.5px) rotate(45deg);
  background: var(--ap-primary-black);
}

/* トグルメニューの中身 */
.ap_menu_box {
  position: fixed;
  width: 100vw;
  transition: 
    transform 0.5s ease,
    opacity 0.5s ease,
    visibility 0.5s ease,
    height 0.5s ease;/* アニメーション設定 */
  height: 0;
  overflow: auto;
  top: 0;
  opacity: 0;
  visibility: hidden;
  display: none;
  z-index: -1;
  background: var(--ap-primary-white);
  padding-top: 5rem;
  padding-bottom: 10rem;
}

.sp_menu_list {
  opacity: 0;
  transition: opacity 0.5s;
  margin: 4rem auto;
  max-width: 600px;
  width: 90%;
}

.ap_menu_box.open .sp_menu_list {
  opacity: 1;
}

.sp_menu_list > li {
  border-bottom: 1px solid var(--ap-primary-black);
  padding-bottom: 1rem;
  margin-top: 1.5rem;
  padding-left: 1.5rem;
}

.ap_common_arrow {
  position: relative;
  padding: 1rem;
}

.ap_common_arrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ap-primary-green);
  border-bottom: 2px solid var(--ap-primary-green);
  transform: rotate(315deg)
}

.sp_menu_list li a {
  color: var(--ap-primary-black);
  font-size: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 右へ移動設定 */
.menu_slide {
  transform: translateX(260px);
}


/* ヘッダー */
.ap_pc_header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: transform 0.5s ease;
  will-change: transform;
}
.ap_pc_header.hide {
  opacity: 0;
  visibility: hidden;
}

.ap_pc_header.hidden {
  transform: translateY(-120%);
}

.ap_pc_header_top {
  display: flex;
  background-color: var(--ap-primary-white);
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
  /* max-height: 100px; */
  padding: clamp(0.5rem,1vw,1.5rem) 0;
}

.ap_sp_header {
  align-items: center;
  justify-content: space-between;
}

.ap_pc_logo {
  margin: 0 1%;
  max-width: 290px;
  width: 25%;
}

.ap_pc_header_bottom {
  background-color: var(--ap-primary-black);
  padding: clamp(1rem,1vw,2rem) 0;
}

.ap_pc_header_bottom > ul{
  justify-content: space-evenly;
  max-width: 1200px;
  margin: 0 auto;
}

.ap_pc_header_bottom a {
  color: var(--ap-primary-white);
}

.ap_pc_header_bottom a:hover {
  color: var(--ap-primary-green);
}

@media screen and (max-width: 1200px) {
  .ap_menu_box {
    display: block;
  }
  .ap_menu {
    display: block;
  }

  .ap_ec_headernavi,
  .ap_pc_header_bottom {
    display: none;
  }
}

/* .ap_menu_box.opacity {
  opacity: 1;
} */
.ap_menu_box.open {
  height: 100vh;
  z-index: 1000;
  opacity: 1;/* 05/20追記 */
  visibility: visible;/* 05/20追記 */
  padding-top: 5rem;
  padding-bottom: 10rem;
}

/* 商品検索・会員登録・お気に入り・カート */
.ec-headerNaviRole {
  margin: 0;
}

.ec-headerNav {
  display: flex;
  align-items: center;
  gap: clamp(2rem,2vw,4rem);
}

.ec-headerNaviRole .ec-headerNaviRole__right {
  gap: clamp(2rem,2vw,4rem);
}

.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
  padding-right: 40px;
}

@media screen and (min-width: 768px) {
  .ec-headerNaviRole {
    padding-bottom: 0;
    padding-top: 0;
  }

  .ec-headerSearch .ec-headerSearch__category {
    width: 40%;
  }

  .ec-headerSearch .ec-headerSearch__keyword {
    width: 60%;
  }

  .ec-headerNav .ec-headerNav__itemLink {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .ec-headerNav .ec-headerNav__itemLink {
    display: inline-block;
  }
}

/* 検索機能（左） */
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
  background: var(--ap-primary-black);
  padding-left: 10px;
}

.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
  top: 50%;
  transform: translateY(-50%);
}

/* 会員登録・お気に入り・カート アイコン */
.ec-headerNav .ec-headerNav__itemIcon,
.ec-headerNav .ec-headerNav__itemLink,
.ec-cartNavi {
  color: var(--ap-primary-black);
}

.ec-headerNav .ec-headerNav__itemIcon {
  vertical-align: middle;
}

.ec-cartNavi {
  padding: 10px 0 0 0;
  align-items: center;
}




/**************************
共通 
***************************/
section {
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
  /* font-family: "Noto Serif JP", serif; */
  padding: clamp(7rem,7vw,14rem) 0;/* 適宜変更 */
}

.center {
  text-align: center;
}

.ap_flex {
  display: flex;
  flex-wrap: wrap;
}

.ap_flex.reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .ap_flex,
  .ap_flex.reverse {
    flex-direction: column;
  }
}



/* 見出し */
.ap_common_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: clamp(3rem,3vw,6rem) 0;
}
.ap_common_title h2 {
  -webkit-writing-mode: vertical-rl;/* Safari用 */
  writing-mode: vertical-rl;
  font-size: clamp(3.5rem,4.4vw,5rem);
  font-weight: 600;
  padding-top: 2rem;
}
.ap_common_title span {
  color: var(--ap-primary-green);
  font-family: var(--secondary-font);
}
.ap_common_title::before {
  content: '';
  border-bottom: 1px solid var(--ap-primary-green);
  width: clamp(5rem,5vw,10rem);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ap_common_heading h3 {
  font-size: clamp(2.5rem,2.8vw,3rem);/* clamp修正 */
  border-bottom: 1px solid var(--ap-primary-green);
  font-weight: bold;
  padding-bottom: 0.8rem;
  text-align: left;
}

.ap_common_heading h4 {
  font-size: 2rem;/* clamp修正 */
  font-weight: bold;
}

/* ボタン */
.ap_common_btn {
  display: inline-block;
  border: 1px solid var(--ap-primary-black);
  color: var(--ap-primary-black);
  background: transparent;
  position: relative;
  z-index: 1;
  padding: 1rem clamp(5rem,5vw,10rem);
  font-family: var(--secondary-font) !important;
  margin-top: 6rem;
}

.ap_common_btn::after {
  content: '';
  display: block;
  border-bottom: 1px solid var(--ap-primary-green);
  width: 15%;
  /* width: 20%; */
  position: absolute;
  top: 50%;
  right: -8%;
  /* right: -14%; */
  transition: transform 0.5s ease;
}

.ap_common_btn:hover {
  transform: scale(0.98);
}
.ap_common_btn:hover::after {
  transform: translateX(10px);
}

/*****************************
トップスライダー
******************************/
.ap_top_slider {
  padding: 0;
}

.ap_sp_swiper {
  display: none;
}
@media screen and (max-width: 768px) {
  .ap_pc_swiper {
    display: none;
  }

  .ap_sp_swiper {
  display: block;
}
}

.swiper-slide img {
  width: 100%;
  object-fit: cover;
  height: auto;
}


/****************************
新着商品
****************************/

/* トップページ新着商品
---------------------------------------- */
/* ↑に書いてます。1500行目あたり */



/*************************
ファーストビュー
***************************/
.ap_top_fv {
  background-image: url('/html/user_data/img/top_fv.webp');
  background-size: cover;
}
@media screen and (max-width:768px) {
  .ap_top_fv {
    background-image: url('/html/user_data/img/top_fv_sp.webp');
  }
}

.ap_fv_content {
  flex-direction: column;
  align-items: center;
}

.ap_fv_title {
  font-size: clamp(4.5rem,4.8vw,5rem);
  color: var(--ap-primary-white);
  -webkit-writing-mode: vertical-rl;/* Safari用 */
  writing-mode: vertical-rl;
  margin: clamp(6rem,6vw,12rem);
  letter-spacing: 0.2em;
}

.ap_top_fv p {
  color: var(--ap-primary-white);
  line-height: 3.5;
  text-align: center;
  width: 80%;
}

.ap_top_fv .ap_common_btn {
  border: 1px solid var(--ap-primary-white);
  color: var(--ap-primary-white);
}

.ap_top_fv .ap_common_btn:hover {
  color: var(--ap-primary-green);
}




/***************************
取扱商品
*****************************/
.our_products_content {
  gap: clamp(4rem,4vw,8rem);
  justify-content: space-between;
}

.products_images_box {
  position: relative;
  width: 45%;
  height: 360px;/* 適宜変更 */
}
@media screen and (max-width: 768px) {
  .products_images_box {
    width: 90%;
    margin: 0 auto;
  }
}

.products_images_box div {
  max-width: 300px;
}
@media screen and (max-width: 599px) {
  .products_images_box div {
    max-width: 250px;
  }
}

.products_images_box div:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
}

.products_images_box div:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  right: 0;
}

.products_text {
  width: 45%;
  align-content: end;
}
@media screen and (max-width: 768px) {
  .products_text {
    width: 90%;
    margin: 0 auto;
  }
}

.products_text p {
  line-height: 3.0;
}

/**************************
店舗紹介
****************************/
.ap_shoplist {
  padding: 0;
}

.ap_shoplist .ap_common_btn {
  margin-top: clamp(2rem,2vw,4rem);
}

.shoplist_content {
  background: var(--ap-primary-white);
  /* 背景画像の設定 */
  background-image: url('/html/user_data/img/top_shops_bg01.webp'), url('/html/user_data/img/top_shops_bg02.webp');
  /* 画像の繰り返し設定 */
  background-repeat: no-repeat;
  /* 画像の配置位置 */
  background-position: left top, right bottom;
  /* 画像のサイズ */
  background-size: 60% auto;
  padding: clamp(5rem,5vw,10rem) 0 clamp(8rem,8vw,16rem);
}

.shoplist_image {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .shoplist_image {
    width: 90%;
  }
}

.shoplist_image > img {
  aspect-ratio: 3 / 2;
}

.shoplist_title {
  text-align: center;
  margin: clamp(1rem,1vw,2rem) 0;
}

.shoplist_title p {
  font-weight: bold;
  font-size: 2rem;
}

.shoplist_title h3 {
  font-weight: bold;
  font-size: clamp(3rem,3vw,3.5rem);
}

.shoplist_text {
  width: 70%;
  margin: clamp(1rem,1vw,2rem) auto;
  line-height: 2.5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .shoplist_text {
    width: 90%;
  }
}

.shoplist_seichouen {
  margin-top: clamp(8rem,8vw,16rem);
}


/******************************
商品カテゴリ
******************************/
.ap_product_cate .ap_common_title {
  margin: 0;
}
.product_cate_container {
  justify-content: center;
  gap: clamp(4rem,4vw,8rem);
}
.product_cate_box {
  gap: clamp(2rem,2vw,4rem);
}

.product_cate_tea {
  background-image: url('/html/user_data/img/category01.webp');
  background-size: cover;
}
.product_cate_grape {
  background-image: url('/html/user_data/img/category02.webp');
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .product_cate_tea {
    background-image: url('/html/user_data/img/category01_sp.webp');
  }

  .product_cate_grape {
    background-image: url('/html/user_data/img/category02_sp.webp');
  }
}

.product_cate_tea,
.product_cate_grape {
  display: block;
  position: relative;
  padding: 3rem 6rem;
}
@media screen and (max-width: 768px) {
  .product_cate_tea,
  .product_cate_grape {
    padding: 6rem 0;
  }
}

.product_cate_tea span,
.product_cate_grape span {
  color: var(--ap-primary-white);
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;/* Safari用 */
  font-size: 3.5rem;
  position: absolute;
  bottom: 2rem;
  right: 0;
  text-shadow: 2px 2px 2px rgba(46,38,36,1);
}
@media screen and (max-width: 768px) {
  .product_cate_tea span,
  .product_cate_grape span {
    writing-mode: horizontal-tb;
    bottom: 0;
    right: 1rem;
  }
}

.product_cate_tea:hover,
.product_cate_grape:hover {
  transform: scale(0.98);
  transition: 0.5s;
  opacity: 0.8;
}


/**************************
フッター
*****************************/
footer {
  background-color: var(--ap-primary-black);
}
@media screen and (max-width: 768px) {
  footer .ap_inner {
    width: 80%;
  }
}

.ap_footer_menu {
  justify-content: space-between;
  padding: clamp(4rem,4vw,8rem) 0;

}
@media screen and (max-width: 768px) {
  .ap_footer_menu {
    gap: 4rem;
  }
}

.ap_footer_logo {
  width: 20%;
}
@media screen and (max-width: 768px) {
  .ap_footer_logo {
    width: 70%;
    margin: 0 auto;
  }
}

.footer_menu_right {
  width: 75%;
  gap: clamp(4rem,4vw,8rem);
}

.footer_menu_right > ul li:nth-of-type(2) {
  margin: 1.5rem 0;
}

.footer_menu_right a {
  color: var(--ap-primary-white);
}

.footer_menu_right a:hover {
  color: var(--ap-primary-green);
}

.ap_copy {
  color: var(--ap-primary-white);
  text-align: center;
  padding-bottom: 1rem;
  font-size: 12px;
}

/*****************************
下層ページ
*******************************/
/* 色変更 */
.ec-role,
.ec-contactRole,
.ec-shelfGrid a,
.ec-navlistRole .ec-navlistRole__navlist a,
.ec-navlistRole .active a,
.ec-searchnavRole .ec-searchnavRole__infos,
.ec-mypageRole,
.ec-welcomeMsg,
.ec-shelfRole,
.ec-headingTitle,
.ec-productRole,
.ec-registerRole {
  color: var(--ap-primary-black);
}

.ec-shelfGrid li {
  gap: clamp(1rem,1vw,2rem);
}

.ec-shelfGrid a {
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
}

.ec-shelfGrid a .product-name {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 10px;
}

.ec-shelfGrid__item  a:hover{
  transition: 0.5s;
  transform: scale(0.98);
  color: var(--ap-primary-green);
}


.ap-product-area h3 {
  color: var(--ap-primary-green);
}

.ec-pageHeader h1 {
  border-bottom: 1px dotted var(--ap-primary-black);
  border-top: 1px solid var(--ap-primary-black);
}

@media screen and (min-width: 768px) {
  .ec-cartNavi {
    background: transparent !important;
  }

  .ec-pageHeader h1, .ec-pageHeader .h1 {
    border-top: none;
  }

  .ec-productRole .ec-productRole__price,
  .ec-productRole .ec-productRole__tags {
    border-bottom: 1px dotted var(--ap-primary-black);
  }
}

.ec-borderedDefs {
  border-top: 1px dotted var(--ap-primary-black);
}

.ec-productRole .ec-productRole__code,
.ec-productRole .ec-productRole__category,
.ec-borderedDefs dl,
.ec-welcomeMsg {
  border-bottom: 1px dotted var(--ap-primary-black);
}

.ec-navlistRole .ec-navlistRole__item,
.ec-navlistRole .ec-navlistRole__navlist {
  border-color: var(--ap-primary-black);
}

.ec-layoutRole {
  background: var(--ap-primary-white);
}


/* レビュー */
.review_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.review_list li {
  width: 28%;
}

@media screen and (max-width: 768px) {
  .review_list li {
    width: 100%;
  }
}

.review_list li strong {
  font-weight: bold;
  font-size: 2rem;
}  

.review_list li p:nth-child(2),
.review_list li strong {
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
}

.review_list li .recommend_name {
  display: block;
  margin-bottom: 1rem;
}

/* 余白調整 */
/* トップページの余白
---------------------------------------------*/
.front_page .ec-layoutRole .ec-layoutRole__contents {
  margin-top: clamp(6rem,8vw,18rem);
  margin-bottom: 0;
}

/* 下層ページの余白
---------------------------------------*/
.ec-layoutRole .ec-layoutRole__contents {
  /* margin-top: clamp(8rem,12vw,16rem); */
  margin-top: clamp(8rem,14vw,22rem);
  margin-bottom: clamp(3rem,3vw,6rem);
  max-width: 1200px;
}

@media screen and (max-width: 768px) {
  .ec-productRole .ec-productRole__price {
    margin-top: 1.5rem;
  }
}

/* 商品一覧ページ */

/* .product-name {
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
  font-weight: bold;
} */

.price02-default {
  margin-top: 5%;
}

/* 商品詳細ページ */
/* フォントサイズ変更 */
.ec-price .ec-price__price,
.customer_rank_price_default {
  font-size: 2.4rem;
  padding: 0 0.5rem;
}

.ec-headingTitle {
  font-weight: bold !important;
}


.customer_rank_price_default {
  font-weight: bold;
}

.ec-productRole__price p:nth-child(1) {
  font-size: 2rem;
}


/* 季節おすすめ商品一覧 */

.ap-seasonable-product-wrap {
  margin: clamp(2rem,2vw,4rem) 0;
}

.ap-seasonable-product-wrap > div {
  width: 100%;
}

.ap-seasonable-product-wrap > div > div {
  width: calc((100% - clamp(3rem,3vw,6rem)*3) / 4);
}

@media screen and (max-width: 768px) {
  .ap-seasonable-product-wrap > div > div {
    width: calc((100% - clamp(3rem,3vw,6rem)*1) / 2);
    margin: 0;
  }
}

/* ------------------------------
 ap style css
------------------------------ */
.front_page .ec-layoutRole__contents {
    width: 100%;
    max-width: none;
    /* 追記 */
    background-image: url('/html/user_data/img/bg.webp');
}

:root{
    --ap-primary-green: #677f32;
    --ap-primary-black: #2e2624;
    --ap-primary-white: #fcfaf2;
    --secondary-font: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}

/* .zen-maru-gothic-m {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
} */

/* 仮り設定 */
.ec-blockBtn--action{
    font-size: 1.6rem;
    background-color: #2e2624;
    border: none;
}

.ec-select select{
    font-size: 1.6rem;
}

.ec-numberInput input[type=number] {
    font-size: 1.6rem;
}

.ec-blockBtn--cancel {
    font-size: 1.6rem;
}





/* カート画面
---------------------------------------- */
.ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
    font-size: 1.6rem;
}

.ec-inlineBtn{
    font-size: 1.6rem;
}

.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea {
    font-size: 1.6rem;
}

.ec-inlineBtn--cancel, .ec-inlineBtn--action {
    font-size: 1.6rem;
}

.ec-price .ec-price__tax {
    font-size: .6em;
}

.ec-categoryNaviRole{
    margin-bottom: 4rem;
}

/* 商品詳細ページ
---------------------------------------- */
.ap-item-photo-area{
    margin-bottom: 3rem;
}

table {
    border-collapse: collapse;
}

table.ap-table-style01{
    margin-top: 2em;
}

table.ap-table-style01 *{
    font-size: 1.4rem;
}

.ap-table-style01 th{
    width: 0;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

.ap-table-style01 th, .ap-table-style01 td{
    border: solid 1px #999;
    padding: 1rem 1.6rem;
}

.ap-table-style01 ol{
    padding-left: 1.5em;
}

.ec-productRole__description h3{
    font-size: clamp(1.8rem, 1.83vw, 2.2rem);
    margin-bottom:2rem;
}

.ec-productRole__description{
  line-height: 1.6;
}

.ec-productRole__profile .ec-productRole__btn button {
  font-family: var(--secondary-font);
}

.ap-product-area *{
  /* font-family: var(--secondary-font) */
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
}

.ap-product-detail ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ap-product-detail ul li {
  width: 28%;
}

.ap-product-detail ul li img {
  aspect-ratio: 1.2;
}

.ap-product-detail ul div,
.ap-product-detail ul div p {
  margin-top: 1rem;
}

.ap-product-detail ul div h4 {
  font-size: 1.8rem;
}

.ap-product-area h3{
  font-size: clamp(1.8rem, 1.83vw, 2.2rem);
  color: #2e2624;
  /* text-align: center; */
  padding-top: 3rem;
}

@media screen and (max-width: 768px) {
  .ap-product-detail ul li {
    width: 49%;
  }
}

/* Teadays 商品詳細ページ
---------------------------------------- */
.ap-gift-set-outer{
  background-color: #F4FAEE;
  border-radius: 10px;
  padding: 3rem 3rem;
  margin-top: 5rem;
}

.ap-gift-set-outer > img{
  max-width: 700px;
  display: block;
  margin: 0 auto;
}

.ap-gift-set-text{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 4%;
    margin: 6rem 0 0;
}

.ap-gift-set-text div {
    width: 48%;
    display: flex;
    align-items: center;
    column-gap: 4%;
}

.ap-gift-set-text img {
    width: 160px;
}

.ap-lead-text p{
  font-size: clamp(1.6rem, 1.6vw, 2rem);
  line-height: 1.8;
  text-align: center;
  font-weight: bold;
}



.tea-3set-area{
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
}

.tea-3set-area div{
  width: calc((100% - 4%) / 3);
  margin-bottom: 3rem;
  font-family: var(--secondary-font);
}

.tea-3set-area div p:nth-of-type(1){
  margin: 8px 0;
}


.ap-product-info{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #fbf7ef;
  padding: 6rem 0;
}

.ap-indent-second-line{
  text-indent: -1em;
  padding-left: 1em;
}



.ap-shop-old-left{
  width: 35%;
}

.ap-shop-old-right{
  width: 65%;
  padding-left: 5%;
}

.ap-shop-old-right p{
  margin-bottom: 1em;
}

.ap-zigzag-01 div:nth-of-type(odd){
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ap-zigzag-01 div:nth-of-type(even){
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
}

.ap-zigzag-01 div img{
  width: 40%;
}

.ap-zigzag-01 div p{
  width: 60%;
}



.single-tea-img {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.single-tea-img div {
  display: flex;
  justify-content: space-around;
  width: 48%;
  margin: 2rem 0;
}

.single-tea-img div:nth-child(1) img {
  width: 40%;
}

@media screen and (max-width: 768px) {
  .single-tea-img {
    display: block;
  }

  .single-tea-img div {
    width: 90%;
    margin: 2rem auto;
  }
}




/* カテゴリメニュー
---------------------------------------- */
.category-7,
.category-9 {
    display: none !important;
}

/* トップページ商品（新着・季節おすすめ etc.）
---------------------------------------- */
.ap-top-product-container{
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .ap-top-product-container {
    flex-direction: column;
    gap: 4rem;
  }
}

.ap-top-product-container .ap_common_title{
  width: 19%;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .ap-top-product-container .ap_common_title {
    width: 100%;
  }
}

.ap-top-product-list{
  width: 81%;
  gap: clamp(3rem,3vw,6rem);
  display: flex;
  flex-wrap: wrap;
}


.ap-top-product__item > a {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem,1vw,2rem);
}

@media screen and (max-width: 768px) {
  .ap-top-product-list {
    /* flex-direction: column; */
    width: 100%;
  }

  .ap-top-product__item > a {
    /* flex-direction: row;
    width: 100%;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between; */
  }
}

.ap-top-product__item{
  width: calc((100% - clamp(3rem,3vw,6rem)*2) / 3);
}

.ap-top-product__item > a:hover {
  transform: scale(0.98);
  transition: 0.5s;
}

.ap-top-product-image{
  /* flex: 0 0 100%; */
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.ap-top-product__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.ap-top-product__name{
  font-weight: bold;
  font-size: 1.8rem;
  margin-top: 10px;
}

.ap-top-product__member-label{
  font-weight: bold;
}

.ap-top-product__item .ap-price-tax{
  font-size: 13px;
}

.ap-top-product__member-price{
  border-top: dashed 1px var(--ap-primary-black);
  padding-top: 6px;
  margin-top: 4px;
}

/* .ap-top-product__price {
  display: flex;
} */

/* 追記 */
@media screen and (max-width: 768px) {
  .ap-top-product__item {
    width: 80%;
    /* width: 50%; */
    margin: 0 auto;
  }
  .ap-top-product-image {
    flex: 0 0 100%;
  }
  .ap-top-product-text {
    flex: 0 0 100%;
  }
  .ap-top-product__price {
    display: inline-block;
  }
}

/* 新着情報
-------------------------------------------*/
.ap_top_news {
  padding: 0 0 clamp(7rem,7vw,14rem);
}

.ec-newsRole {
  padding: 0;
}

.ap_top_news > .ec-role {
  padding-left: 0;
  padding-right: 0;
}

.ec-newsRole.ap_flex {
  justify-content: space-between;
}

.ap_top_news .ap_common_title {
  margin: 0;
  width: 20%;
}
@media screen and (max-width:768px) {
  .ap_top_news .ap_common_title {
    width: auto;
  }
}

.ec-newsRole .ec-newsRole__news {
  border: none;
  padding: 0;
  width: 70%;
}
@media screen and (max-width:768px) {
  .ec-newsRole .ec-newsRole__news {
    width: auto;
  }
}

.ec-newsRole .ec-newsRole__newsItem {
  padding: 0;
}

.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type),
.ec-newsRole .ec-newsRole__newsItem {
  border-bottom: 1px solid var(--ap-primary-green);
  padding: clamp(1rem,1vw,2rem) 0;
}

.ec-newsRole .ec-newsRole__newsDate,
.ec-newsRole .ec-newsRole__newsTitle,
.ec-newsRole .ec-newsRole__newsDescription {
  /* 日付・見出し・本文のフォントサイズ変更 */
    font-size: clamp(14px,1.3vw,1.6rem);
}

.ec-newsRole .ec-newsRole__newsTitle {
  /* 見出し色変更 */
  color: var(--ap-primary-black);
}

.ec-newsRole .ec-newsRole__newsCloseBtn {
  /* active close ボタンの色変更 */
  color: var(--ap-primary-green);
  background: transparent;
  /* 位置修正 */
  top: 50%;
  transform: translateY(-50%);
}

.fas {
  /* active close ボタンのサイズ変更 */
  font-size: 2.5rem;
}

.ec-newsRole .ec-newsRole__newsItem:last-of-type {
  margin: 0;
}

/* teadaysとは + 清澄園　《共通》
-------------------------------------------*/
.ap_brand_page {
  padding: clamp(3rem,3vw,6rem) 0;
}

.ap_brand_page p {
  font-family: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}

/* teadaysとは & 清澄園とは */
.ap_flex.ap_brand_concept {
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .ap_flex.ap_brand_concept {
    flex-direction: column-reverse;
    gap: 2rem;
    align-items: center;
  }
}

.ap_brand_concept_left {
  width: 40%;
}

.ap_brand_concept_left > img {
  aspect-ratio: 7 / 5;
}

.ap_brand_concept_right {
  display: inline-flex;
  flex-wrap: wrap;
  /* 追記 */
  align-items: flex-start;
  flex-direction: row-reverse;
  gap: clamp(3rem,3vw,6rem);
}

.ap_brand_concept_right {
  width: 60%;
}
@media screen and (max-width: 768px) {
  .ap_brand_concept_left,
  .ap_brand_concept_right {
    width: 100%;
  }
}

.ap_brand_concept_right .ap_common_title {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .ap_brand_concept_right {
    flex-direction: column;
  }

  .ap_brand_concept_right .ap_common_title {
    margin: 0 auto;
  }
}

.ap_brand_concept_text {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;/* Safari用 */
  line-height: 2.6;
}
.ap_brand_concept_text.seichouen {
  max-inline-size: 33rem;
}
.ap_brand_concept_text.teadays {
  max-inline-size: 45rem;
}

@media screen and (max-width: 768px) {
  .ap_brand_concept_text {
    writing-mode: horizontal-tb;
    line-height: 2;
  }

  .ap_brand_concept_text.seichouen,
  .ap_brand_concept_text.teadays {
    max-inline-size: none;
  }
}

/* flex共通 */
.ap_brand_feature > .ap_flex {
  justify-content: space-between;
  align-items: center;
  margin: 4rem 0;/* 追記 */
}
@media screen and (max-width:768px) {
  .ap_brand_feature > .ap_flex {
    gap: 2rem;
  }
}

/* 画像アスペクト比統一 */
.ap_brand_flex_img > img {
  aspect-ratio: 2.3 / 1.5;
  /* aspect-ratio: 7 / 5; */
}

.ap_brand_flex_img,
.ap_brand_flex_text {
  width: 45%;
}
@media screen and (max-width:768px) {
  .ap_brand_flex_img,
  .ap_brand_flex_text {
    width: 90%;
  }
}

.ap_brand_flex_text.teadays > p,
.ap_brand_flex_text.seichouen > p {
  margin-top: clamp(1rem,1vw,2rem);
}

.ap_brand_concept,
.ap_brand_content02 {
  padding: clamp(3rem,3vw,6rem) 0;
}

.ap_brand_content03 .ap_brand_flex_text {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .ap_brand_content03 .ap_brand_flex_text {
    width: 90%;
  }
}

/* 各店舗取扱商品 */
.ap_goods_container {
  margin: clamp(5rem,5vw,10rem) 0;
}

.ap_flex.ap_goods_container {
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .ap_flex.ap_goods_container {
    row-gap: 2rem;
  }
}

.ap_goods_image {
  width: 30%;
}
.ap_goods_text_content {
  width: 60%;
}
@media screen and (max-width: 768px) {
  .ap_goods_image,
  .ap_goods_text_content {
    width: 90%;
  }
}

.ap_goods_text_content .ap_common_btn {
  margin-top: 3rem;
}

.ap_goods_container.seichouen,
.ap_goods_container.teadays {
  margin: clamp(2.5rem,2.5vw,5rem) 0 clamp(5rem,5vw,10rem);
  /* margin: clamp(2.5rem,2.5vw,5rem) 0; */
  /* margin: clamp(3rem,3vw,6rem) 0; */
}

.ap_goods_text_content.seichouen h4,
.ap_goods_text_content.teadays h4 {
  border-bottom: 1px dotted var(--ap-primary-green);
  padding-bottom: 0.5rem;
  
}


/* teadays
-------------------------------------------*/
.tea_midori {
  border-top-color: #336600;
}

.tea_kaori {
  border-top-color: #749b00;
}

.tea_koku {
  border-top-color: #b9b822;
}

.tea_bai {
  border-top-color: #663300;
}

.tea_isago {
  border-top-color: #125b2e;
}

.teadays_goods_name {
  font-size: 3rem;
  font-weight: bold;
  position: relative;
}

.teadays_goods_name span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  margin: 0 1rem;
}

.teadays_goods_name > .ap_line {
  border-top-width: 2px;
  border-top-style: solid;
  width: 20px;
}

.teadays_goods_name > span:not(:nth-of-type(1)) {
  padding-left: 3rem;
}

.teadays_goods_catchcopy {
  font-weight: bold;
  font-size: 2rem;
  padding: clamp(1rem,1vw,2rem) 0;
}

.ap_goods_text_content.teadays > p {
  margin-top: clamp(1rem,1vw,2rem);
}


/* 清澄園
-------------------------------------------*/
/* カレンダー */
.ap_seithouen_calendar .ap_common_title {
  margin: 0;
}
@media screen and (max-width:768px) {
  .ap_seithouen_calendar .ap_common_title {
    margin-bottom: 3rem;
  }
}

.ap_seithouen_calendar > .ap_flex {
  justify-content: space-between;
  flex-wrap: nowrap;
}

.ap_table_scroll {
  overflow-x: auto;
}

@media screen and (max-width: 768px) {
  .ap_table_scroll {
    overflow-x: scroll;
  }
}

.ap_calendar_wrapper {
  min-width: 800px;
}

.ap_calendar_wrapper {
  border: 1px solid var(--ap-primary-green);
  overflow: hidden;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .ap_calendar_wrapper {
  }
}

.ap_calendar_wrapper table {
  border: 1px solid var(--ap-primary-green);
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;
}

.ap_calendar_wrapper thead {
  background-color: var(--ap-primary-green);
}

.ap_calendar_wrapper thead th {
  font-size: 1.6rem;
  color: var(--ap-primary-white);
  padding: 10px 4px;
  white-space: nowrap;
  border: 1px solid var(--ap-primary-green);
}

.ap_calendar_wrapper table thead th span {
  font-size: 2.8rem;
}

.ap_calendar_wrapper th,
.ap_calendar_wrapper td {
  padding: 8px;
  border: 1px solid #999;/* 色修正するかも */
}

.ap_calendar_wrapper tbody tr:nth-of-type(even) {
  background-color: rgba(103,127,50,0.1);
}

.ap_calendar_wrapper td {
  width: 6.25%;
  font-size: 3rem;
  font-weight: 500;
  color: var(--ap-primary-green);
  line-height: 1.7;
  vertical-align: middle;
}

.ap_calendar_wrapper td:nth-of-type(1) {
  width: 25%;
  font-size: 2rem;
  font-weight: 500;
  color: var(--ap-primary-black);
  text-align: left;
  border-left: none;
  padding-left: 20px;
  white-space: nowrap;
}

.ap_calendar_wrapper tr:nth-last-of-type(1) td {
  border-bottom: none;
}

.ap_calendar_wrapper td:nth-last-of-type(1) {
  border-right: none;
}

/* 取扱商品 */
.ap_flex.ap_goods_container.seichouen {
  align-items: flex-start;
}
@media screen and (max-width:768px) {
  .ap_flex.ap_goods_container.seichouen {
    align-items: center;
  }
}

.ap_goods_text_content.seichouen h5 {
  font-weight: bold;
  font-size: 1.8rem;
  margin: clamp(1rem,1vw,2rem) 0;
}

.ap_goods_text_content.cherry > div:nth-of-type(even) {
  margin: clamp(2rem,2vw,4rem) 0;
}

.ap_goods_text_content.cherry > div:nth-last-child(2) {
  margin-bottom: 0;
}

/* wabinoajiとは
---------------------------------------------*/
.ap_wabinoaji {
  padding: 0;
}

.ap_wabinoaji p {
  font-family: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}

.page-wabinoaji .ec-layoutRole .ec-layoutRole__contents {
  margin-top: clamp(8rem,12vw,18rem);
  margin-bottom: 0;
  max-width: none;
}

.ap_wabinoaji_fv {
  background: 
    linear-gradient(rgba(256,256,256,0.1), rgba(256,256,256,0.9)),
    url('/html/user_data/img/about01.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom 40%;
  padding: clamp(6rem,6vw,12rem) 0;
}

.ap_wabinoaji_fv > .ap_flex {
  flex-direction: row-reverse;
  gap: clamp(4rem,4vw,8rem);
  flex-wrap: nowrap;
  /* justify-content: space-between; */
}
@media screen and (max-width:768px) {
  .ap_wabinoaji_fv > .ap_flex {
    flex-direction: column;
  }
}

.ap_wabinoaji_fv_title {
  writing-mode: vertical-rl;
  margin: 0 auto;
  font-size: clamp(3.5rem,4.4vw,5rem);
  text-shadow: 2px 2px 3px var(--ap-primary-white);
}

.ap_wabinoaji_fv_title > h2 {
  font-weight: bold;
}

.ap_wabinoaji_fv_text {
  font-weight: 500;
  text-shadow: -0.1px -0.1px var(--ap-primary-black),
                1px 1px var(--ap-primary-white);
  line-height: 2.4;
}

.ap_wabinoaji_fv_text,
.ap_wabinoaji_about_end {
  font-size: clamp(1.6rem,1.7vw,1.8rem);
}


.ap_wabinoaji_heading > h3 {
  font-size: clamp(2.4rem,2.8vw,3.5rem);
  font-weight: 500;
  border-bottom: 1px dotted var(--ap-primary-green);
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
}

.ap_wabinoaji_heading > h3 > span {
  font-size: clamp(14px,1.4vw,16px);
  display: block;
  font-family: 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
  color: var(--ap-primary-green);
  padding-bottom: 1rem;
  text-indent: -1em;
}

.ap_wabinoaji > div:nth-of-type(even) {
  padding: clamp(4rem,4vw,8rem) 0;
}

.ap_wabinoaji_content > .ap_flex {
  justify-content: space-between;
  margin: clamp(2rem,2vw,4rem) 0;
}

.ap_wabinoaji_img_box {
  position: relative;
  width: 45%;
  height: 360px;/* 適宜変更 */
}
@media screen and (max-width:768px) {
  .ap_wabinoaji_img_box {
    width: 90%;
    margin: 0 auto;
  }
}

.ap_wabinoaji_img_box div {
  max-width: 300px;
}
@media screen and (max-width: 599px) {
  .ap_wabinoaji_img_box div {
    max-width: 250px;
  }
}

.ap_wabinoaji_img_box div:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
}

.ap_wabinoaji_img_box div:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  right: 0;
}

.ap_flex.reverse > .ap_wabinoaji_img_box div:nth-of-type(1) {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: 5;
}

.ap_flex.reverse > .ap_wabinoaji_img_box div:nth-of-type(2) {
  position: absolute;
  top: 0;
  right: 0;
}

.ap_wabinoaji_img_box div > img {
  aspect-ratio: 4 / 3;
}

.ap_wabinoaji_text {
  width: 45%;
  align-content: center;
}
@media screen and (max-width:768px) {
  .ap_wabinoaji_text {
    width: 90%;
    margin: 0 auto;
  }
}

.ap_wabinoaji_text p {
  line-height: 2.5;
}




.ap_wabinoaji_about_end {
  background-image: url('/html/user_data/img/top_fv.webp');
  background-size: cover;
  color: var(--ap-primary-white);
  padding: clamp(10rem,12vw,15rem) 5% clamp(6rem,6vw,12rem);
  background-position: center bottom 33%;
  width: 100vw;
}
@media screen and (max-width:768px) {
  .ap_wabinoaji_about_end {
    background-image: url('/html/user_data/img/top_fv_sp.webp');
  }
}