/* ==============================
簡易リセットCSS（組み込み時、大元リセットCSS入る？）
============================== */
ul {
list-style: none;
margin: 0;
padding: 0;
}

dl, dt, dd {
margin: 0;
padding: 0;
}

/* ==============================
共通CSS
============================== */
@media only screen and (min-width: 428px) {
.allwrap {
padding: 8px 4%;
}
.wrap {
width: 100%;
max-width: 910px;
margin: 0 auto;
}
}

.wrap {
width: 100%;
max-width: 910px;
}

.wrap-l {
max-width: 1200px;
}

.c-grid {
display: grid;
}

.c-flex {
display: flex;
}

.pc_on {
display: block;
}

.sp_on {
display: none;
}

.in_pc_on {
display: inline;
}

.in_sp_on {
display: none;
}

.br_pc_on {
display: inline;
}

.br_sp_on {
display: none;
}

.block {
display:block;
}

.breadcrumbs span {
font-size: 1.1rem;
}

.wrap p {
font-size: 1.4rem;
}

.wrap li {
font-size: 1.4rem;
}

.wrap a {
font-size: 1.4rem;
}

.wrap th {
font-size: 1.4rem;
}

.wrap table {
font-size: 1.4rem;
}

.wrap .big {
font-size: 1.6rem;
font-weight: bold;
}

/* ==============================
パンくず
============================== */
.block-topic-path--list {
display: flex;
font-size: 1.1rem;
}

.block-topic-path--list a {
text-decoration: underline;
}

/* ==============================
feature（特集一覧）
============================== */
.wrap-inner {
margin-bottom: 80px;
box-sizing: border-box;
}

.wrap-inner * {
box-sizing: border-box;
}

.mv {
margin: 30px 0;
}

.wrap-inner .title {
text-align: center;
margin-bottom: 30px;
padding: 0 1em;
position: relative;
}

.wrap-inner h2 {
font-size: 2.8rem;
margin: 0 0 0.2em;
padding: 0 1em 0.2em;
display: inline-block;
border-bottom: 1px solid #000;
}

.wrap-inner h3 {
font-size: 2.3rem;
text-align: left;
border-left: 5px solid #EBC52F;
line-height: 1.5384615385;
padding-left: 20px;
}

.wrap-inner h3 a {
font-size: 2.3rem;
}

@media only screen and (min-width: 768px) {
.wrap-inner .h3-margin0 {
margin-top: 0;
}
}

.wrap-inner p {
margin-top: 1em;
}

.wrap-inner .p-margin0 {
margin-top: 0;
}

.align-center{
text-align: center;
}

.c-box {
margin-top: 30px;
}

.c-box__inner {
width: 100%;
justify-content: space-between;
margin: 0;
padding: 0 25px;
}

.c-box .c-box__inner picture {
display: block;
width: 42%;
}

.c-box .c-box__inner figcaption {
width: 52%;
}

.a-box {
margin-top: 30px;
}

.a-box__inner {
display: flex;
}

.a-box__inner_child {
margin: 0 10px;
flex-grow: 1;
}

.b-box {
margin-top: 30px;
}

.b-box__inner {
width: 100%;
justify-content: space-between;
margin: 0;
padding: 0 25px;
}

.b-box .b-box__inner picture {
display: block;
width: 42%;
}

.b-box .b-box__inner figcaption {
width: 52%;
}

.d-box {
margin-top: 30px;
}

.d-box__inner {
grid-template-columns: 1fr 1fr 1fr;
gap: 26px 4%;
display: grid;
}

.d-box__inner_child {
margin: 0;
display: flex;
flex-direction: column;
}

.d-box__inner_child .text {
flex: 1;
height: 100%;
min-height: 0%;
margin-top: 5px;
margin-bottom: 0;
}

.line-onwards {
margin-top: 5px;
margin-bottom: 0;
}

.e-box {
margin-top: 30px;
}

.e-box__inner {
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 26px 4%;
display: grid;
margin-bottom: 15px;
}

.e-box__inner_child {
margin: 0;
display: flex;
flex-direction: column;
}

.e-box__inner_child .text {
flex: 1;
height: 100%;
min-height: 0%;
margin-top: 5px;
margin-bottom: 0;
}

.e-box__inner_child .2line-onwards {
margin-top: 5px;
margin-bottom: 0;
}

.f-box {
margin-top: 30px;
}

.f-box__inner {
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
margin: 0;
padding: 0 1vw;
}

.f-box .f-box__inner picture {
display: block;
width: 100%;
}

.f-box .f-box__inner figcaption {
width: 100%;
}


/* 左右交換 */
.replacement {
flex-direction: row-reverse;
}

.background {
background-color: #F6F6F6;
padding: 30px 0 35px 0;
}

.background_skin {
background-color: #faf1ed;
padding: 30px 0 35px 0;
}


/* 下矢印 */
.down-arrow {
display: inline-block;
vertical-align: middle;
line-height: 1;
width: 0.7em;
height: 0.7em;
border: 2px solid;
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
transform: translateY(-25%) rotate(135deg);
margin: 7px 5px 5px 5px;
}

/******************
カートボタン
******************/
.cart-btn {
padding: 20px;
margin-left: auto;
min-width: auto;
display: flex;
align-items: center;
justify-content: center;
}

@media screen and (max-width: 768px) {
.cart-btn {
padding: 20px 0;
}
}

/*******************
スライダー
*******************/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
width:94%;
margin:0 auto;
}

.slider img {
width:100%;/*スライダー内の画像を横幅100%に*/
height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
position: absolute;/*絶対配置にする*/
top: 42%;
cursor: pointer;/*マウスカーソルを指マークに*/
outline: none;/*クリックをしたら出てくる枠線を消す*/
border-top: 2px solid #666;/*矢印の色*/
border-right: 2px solid #666;/*矢印の色*/
height: 15px;
width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
left: -1.5%;
transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
right: -1.5%;
transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
line-height: 1;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 4px;
margin: 0;
}

.slick-dots li {
position: relative;
display: inline-block;
height: 8px;
width: 8px;
margin: 3px;
padding: 0;
cursor: pointer;
}

.slick-dots button {
border: 0;
background: transparent;
display: block;
height: 8px;
width: 8px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
}

.slick-dots button:before {
position: absolute;
top: 0;
left: 0;
content: "●";
width: 8px;
height: 8px;
font-family: "fs-icon";
font-size: 6px;
line-height: 8px;
text-align: center;
color: #aaa;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
}

.slick-dots .slick-active button:before {
color: #aaa;
opacity: 0.75;
}

/*******************
スライダー（＜＞無しver.）
*******************/
.slider_noArrow {/*横幅94%で左右に余白を持たせて中央寄せ*/
width:100%;
margin:0 auto;
}

.slider_noArrow img {
width:100%;/*スライダー内の画像を横幅100%に*/
height:auto;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slider_noArrow .slick-prev,
.slick-next {
position: absolute;/*絶対配置にする*/
top: 42%;
cursor: pointer;/*マウスカーソルを指マークに*/
outline: none;/*クリックをしたら出てくる枠線を消す*/
border-top: 2px solid #666;/*矢印の色*/
border-right: 2px solid #666;/*矢印の色*/
height: 15px;
width: 15px;
}

.slider_noArrow .slick-prev {/*戻る矢印の位置と形状*/
left: 2%;
transform: rotate(-135deg);
z-index: 1;
}

.slider_noArrow .slick-next {/*次へ矢印の位置と形状*/
right: 2%;
transform: rotate(45deg);
}


/*ドットナビゲーションの設定*/

.slick-dots {
line-height: 1;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 4px;
margin: 0;
}

.slick-dots li {
position: relative;
display: inline-block;
height: 8px;
width: 8px;
margin: 3px;
padding: 0;
cursor: pointer;
}

.slick-dots button {
border: 0;
background: transparent;
display: block;
height: 8px;
width: 8px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
}

.slick-dots button:before {
position: absolute;
top: 0;
left: 0;
content: "●";
width: 8px;
height: 8px;
font-family: "fs-icon";
font-size: 6px;
line-height: 8px;
text-align: center;
color: #aaa;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
}

.slick-dots .slick-active button:before {
color: #aaa;
opacity: 0.75;
}

/******************
下からふわっと表示
******************/
/* スタート時は要素自体を透過0にするためのopacity:0;を指定する */
.transparent{
opacity: 0;
}

/* ふわっ */
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time01{
animation-delay: 0.5s;
}
.delay-time02{
animation-delay: 0.75s;
}
.delay-time04{
animation-delay: 1s;
}

/******************
画像をふわふわ動かす
******************/




/******************
Ochasuru
******************/
.outline {
background-color: #fff;
padding: 5px;
position: relative;
}

.ice {
text-decoration: none;
border-bottom: 3px dotted #62b4b6;
padding-bottom: 5px;
color: #62b4b6;
}


/******************
お配りギフト
******************/
.background_diagonal {
position: absolute;
width: 100%;
background-color: #faf1ed;
transform: skewY(-0.03turn);
z-index: -1;
}

.banner {
padding: 1em 60px;
border: solid 1px;
display: inline-flex;
margin-top: 30px;
background-color: #fff;
}

/* お配りギフトPC高さ */
.handingoutgift_background {
height: 600px;
}

.handingoutgift_tbl {
margin: 0 10px;
}

.handingoutgift_tbl_td {
padding: 0 3px;
}

p.btn {
margin: 16px 0;
}

a.btn {
display: block;
padding: 16px 0;
background-color: #000000;
color: #fff;
transition: all .2s ease;
max-width: 300px;
margin-left: auto;
text-align: center;
}

p.btn_center {
margin: 2em 0;
text-align: center;
}

a.btn_center {
padding: 16px 60px;
background-color: #000000;
color: #fff;
transition: all .2s ease;
max-width: 300px;
text-align: center;
}

.wrap .numbers_top_left {
font-size: 40px;
background: #91908e;
border-radius: 50%;
width: 60px;
height: 60px;
color: #fff;
text-align: center;
line-height: 55px;
position: absolute;
top: 0;
left: 0;
padding: 0;
z-index: 10;
}

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

.handingoutgift_label_img {
display: flex;
padding: 0 10px;
}

.handingoutgift_label_img1 {
width: 50%;
margin: auto 15px auto 5px;
}

.handingoutgift_label_img2 {
width: 50%;
margin: auto 0;
}

.handingoutgift_label_img .handingoutgift_label_img2_inner {
font-size: 24px;
margin-top: 0;
}

.background-handingoutgift {
border: solid 4px #faf0e4;
padding: 30px 25px 35px 25px;
}



/******************
おためしギフト
******************/
@media only screen and (min-width: 768px) {
.trialset_box {
border: 1px solid #ee7800;
padding: 20px 40px;
margin: 1em 100px;
}
}
@media only screen and (max-width: 768px) {
.trialset_box {
border: 1px solid #ee7800;
padding: 20px;
}
}

.trialset_box div {
text-align: center;
}

.trialset_box_title {
display: inline-block;
border-bottom: 1px solid #ee7800;
padding: 0 1em 0.2em;
font-weight: bold;
}

.trialset_box_list {
margin-left: 1.5em;
}

.trialset_box_list li {
position: relative;
line-height: 1.8;
}

.trialset_box_list li::after {
content: '';
display: block;
position: absolute;
top: .5em;
left: -1.5em;
width: 10px;
height: 5px;
border-left: 3px solid #000;
border-bottom: 3px solid #000;
transform: rotate(-45deg);
}

/* PC表示 */
.tastebox-pc {
display: flex;
position: relative;
width: 100%;
}

.tasteimg-pc {
width: 100%;
}

.tastetext-pc {
position: absolute;
right: 0px;
}

.tastetext-pc_box {
position: absolute;
right: 0;
width: 340px;
}

.tastetext-pc_peach {
display: flex;
position: relative;
}

/* 文字の縁取り */
.tastetext {
width: 360px;
background-color: rgba(999, 999, 999, 0.5);
padding: 10px;
/* text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0
0
#FFF, 1px 0 0 #FFF; */
}

/* 香り・旨味・渋みの☆評価 */
.c-rate-inner {
display: grid;
grid-template-columns: auto;
align-items: flex-end;
justify-content: space-between;
}
.c-ratelist {
display: inline-flex;
align-items: center;
border: 1px solid #c2c2c2;
padding: 7px;
margin-top: 5px;
margin-right: 8px;
}
.c-rate-ttl {
display: inline-block;
/* background: #fff;
border-radius: 6px;
border: 4px solid #faf0e4;
height: -webkit-fit-content;
height: -moz-fit-content; */
height: fit-content;
/* padding: 7px 12px; */
padding-right: 7px;
margin: 0;
/* font-size: 1.5rem; */
font-weight: bold;
line-height: 1;
}
.c-rate-star {
display: inline-block;
position: relative;
width: 80px;
height: 16px;
font-size: 1.6rem;
line-height: 24px;
}
.c-rate-star::before, .c-rate-star::after {
display: inline-block;
position: absolute;
height: 24px;
line-height: 1.5;
top: 50%;
transform: translateY(-50%);
}
.c-rate-star::before {
color: #dbbe3e;
content: "☆☆☆☆☆";
}
.c-rate-star::after {
display: inline-flex;
overflow: hidden;
color: #dbbe3e;
content: "★★★★★";
}
.c-rate-star[data-star="0"]::after {
width: 0px;
}
.c-rate-star[data-star="1"]::after {
width: 16px;
}
.c-rate-star[data-star="1.5"]::after {
width: 24px;
}
.c-rate-star[data-star="2"]::after {
width: 32px;
}
.c-rate-star[data-star="2.5"]::after {
width: 40px;
}
.c-rate-star[data-star="3"]::after {
width: 48px;
}
.c-rate-star[data-star="3.5"]::after {
width: 56px;
}
.c-rate-star[data-star="4"]::after {
width: 64px;
}
.c-rate-star[data-star="4.5"]::after {
width: 72px;
}
.c-rate-star[data-star="5"]::after {
width: 80px;
}

/* SP表示 */
.trialset_background_green {
background-color: #f4f5f0;
}

.trialset_background_orange {
background-color: #f8f2f4;
}

.trialset_background_purple {
background-color: #f5f3f7;
}

.tastebox-sp {
display: flex;
position: relative;
width: 100%;
}

.tasteimg-sp {
transform: rotate( 10deg );
width: calc(100%/2.4);
position: absolute;
top: 15px;
right: 15px;
max-width: 200px;
min-width: 160px;
}

.tastetext-sp {
margin: 10px;
z-index: 1;
}

/* SPでの☆文字表示 */
.c-rate-inner_sp {
display: grid;
grid-template-columns: auto;
align-items: flex-end;
justify-content: space-between;
}
.c-ratelist_sp {
display: inline-flex;
align-items: center;
background-color: rgba(999,999,999,0.5);
padding: 3px 5px 0;
}
.c-rate-ttl_sp {
display: inline-block;
background: #fff;
border-radius: 6px;
border: 4px solid #faf0e4;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
padding: 4px 8px;
margin: 0 12px 0 0;
font-size: 1.5rem;
line-height: 1;
}

.trialset_lp_banner {
text-align: center;
border: 1px solid;
padding: 16px;
}


/******************
生新茶
******************/
.thefirsttea_cart {
display: flex;
justify-content: space-evenly;
align-items: center;
}

@media screen and (min-width: 768px) {
.thefirsttea_width {
width: 48% !important;
}
}

.thefirsttea_history {
padding: 0.5em 1em;
color: #5d627b;
background: white;
border-top: solid 5px #5d627b;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
display: flex;
}
@media screen and (min-width: 768px) {
.thefirsttea_history {
margin: 2em 4em;
}
}

/******************
ギフトオプション
******************/
.border_bottom {
border-bottom: 1px solid #000;
padding-bottom: 6px;
font-weight: bold;
}

.giftoption_ttl {
font-size: 32px;
font-weight: bold;
}

@media only screen and (min-width: 768px) {
.giftoption_ttl {
padding: 20px;
}
}
@media only screen and (max-width: 768px) {
.giftoption_ttl {
padding: 20px 0;
}
}

.giftoption_bg {
background-color: #F6F6F6;
}


/******************
定期便
******************/
.teiki_tokuten_box{
border: 1px solid #ccc;
padding: 15px 10px 10px 10px;
background-image: url(https://teashopitoen.itembox.design/item/feature_teiki_07.jpg);
}
@media (max-width: 768px) {
.teiki_tokuten_box{
padding: 12px 5px 5px 5px;
}
}
.teiki_tokuten_img {
box-shadow: 3px 3px 6px 0px rgba(198, 196, 193, 0.5);
}

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

.teiki_tokuten_child {
width: calc(100% / 3);
padding: 5px;
}

@media (max-width: 768px) {
.teiki_tokuten_child {
width: calc(100% / 2);
padding: 1px;
}
}

/* QAのアコーディオン */
.accordion .toggle {
display: none;
}
.accordion .option {
position: relative;
}width: 450px;
.accordion .qa-title,
.accordion .text {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.5s;
}
@media screen and (max-width: 767px) {
.accordion_cms {
border: none;
margin: 0;
padding: 0;
}
}
.accordion .qa-title {
text-align: left;
background: #D7DBDA;
padding: 10px 20px;
margin: 0 0 1px 0;
display: block;
}
.accordion .qa-title_p {
margin: 0;
font-weight: bold;
}

.accordion .qa-title::after,
.accordion .qa-title::before {
content: "";
position: absolute;
right: 1.25em;
top: 0.9em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.5s;
}
.accordion .qa-title::after {
transform: rotate(90deg);
}
/* 包装の+を削除したい */
.accordion .qa-title:last-child::after,
.accordion .qa-title:last-child::before {
content: none;
}
.accordion .text {
max-height: 0;
overflow: hidden;
}
.accordion .toggle:checked + .qa-title + .text {
max-height: 500px;
transition: all 1.5s;
}
.accordion .option .mgn {
margin: 0 20px
}
.accordion .toggle:checked + .qa-title::before {
transform: rotate(90deg) !important;
}

/******************
フルーツフレーバー
******************/
.fruit_background {
background-image: url(https://teashopitoen.itembox.design/item/feature_fruit_tea_01.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 30px 15px;
}

@media screen and (max-width: 768px) {
.fruit_background {
background-image: url(https://teashopitoen.itembox.design/item/feature_fruit_tea_01.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 30px 4%;
}
}

.banner-2line {
display: flex;
width: calc(100%/2);
text-align-last: center;
}
@media screen and (max-width: 768px) {
.banner-2line {
display: flex;
width: 100%;
text-align-last: center;
}
}
.banner-2line_child_a {
width: calc(100% / 2);
}
.banner-2line_child {
text-align: center;
border: 1px solid;
padding: 15px 0;
margin: 2.5px;
}

/* PC版構成 */
.pc_ki-box_top {
display: flex;
align-items: flex-end;
position: relative;
margin-top: 30px;
z-index: 2;
}

.pc_ki-box_top .pc_ki-box_img-merchandise {
display: flex;
align-items: end;
justify-content: space-evenly;
width: 100%;
padding: 0 10px;
}

.pc_ki-box_top .pc_ki-box_img {
margin-right: 5px;
}

.pc_ki-box_top .pc_ki-box_merchandise {
width: calc(100%/2);
}

.pc_ki-box_bottom {
padding: 9em 10px 30px;
position: relative;
top: -9em;
margin-bottom: -9em;
}

.pc_ki-box_bottom .pc_ki-box_text {
margin-left: 10px;
margin-right: 10px;
}

/* SP版構成 */
.sp_ki-box {
display: flex;
align-items: flex-end;
position: relative;
margin-top: 30px;
z-index: 2;
}

.sp_ki-box .sp_ki-box_img {
padding: 0 10px;
position: relative;
z-index: 2;
}

.sp_ki-box .sp_ki-box_text {
padding: 6em 10px 15px;
top: -6em;
position: relative;
margin-bottom: -6em;
}

/******************
ハッピーバッグ
******************/
.pc_3rows {
padding: 0 25px;
margin: 30px 0;
display: flex;
}

.pc_2rows {
padding: 0 25px;
margin: 30px 0;
display: flex;
justify-content: space-around;
}

.hb_border {
border: 1px solid #000;
padding: 10px;
}

.name_cart {
display: flex;
margin-left: auto;
margin-top: 30px;
}

.name_cart-n {
align-content: center;
margin-left: auto;
margin-right: 20px;
margin-bottom: 0;
}

.name_cart-c {
margin-right: auto;
}


/******************
irodori
******************/
.irodori_keyvi {
display: flex;
justify-content: center;
margin-top: 40px;
}

.irodori_anklink {
display: flex;
justify-content: center;
}

.irodori_anklink_pc {
padding: 16px;
border-left: 1px solid #dcdcdc;
text-align: center;
}

.irodori_anklink_sp {
padding: 16px;
border-left: 1px solid #dcdcdc;
text-align: center;
min-width: calc(100% / 3);
}

.irodor_down-arrow {
display: block;
width: 12px;
height: 12px;
margin: 8px auto;
border-bottom: 4px solid #000;
border-right: 4px solid #000;
transform: rotate(45deg);
}

.irodori_ttl_pc {
position: relative;
padding-left: 10px;
top: 50px;
z-index: 1;
}

.irodori_ttl-r_pc {
position: relative;
padding-right: 10px;
top: 50px;
}

.irodori_img_pc {
width: calc(100% / 1.3);
position: relative;
}

.irodori_img-r_pc {
width: calc(100% / 1.3);
}

.irodori_text_pc {
text-align: right;
position: relative;
padding-right: 10px;
top: -100px;
margin-bottom: -40px;
}

.irodori_text-r_pc {
position: relative;
padding-left: 10px;
top: -100px;
margin-bottom: -40px;
}

.irodori_text-p_pc {
background-color: rgba(220, 220, 220, 0.5);
display: inline-block;
text-align: left;
padding: 15px;
margin: 0;
width: 686px;
}

.irodori_ttl_sp {
position: relative;
top: 50px;
padding: 0 3.33vw;
}


.running-slider img {
width:100%;/*スライダー内の画像を横幅100%に*/
height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.running-slider .slick-slide {
margin:0 10px;/*スライド左右の余白調整*/
}

/******************
新茶2024
******************/
.coldbrew_tbl {
width: 100%;
}

.coldbrew_tbl th {
color: #fff;
border: 4px solid #fff;
border-bottom: none;
background-color: #a9a18b;
width: calc(100% / 3);
}

.coldbrew_tbl td {
text-align: center;
font-weight: bold;
border: 4px solid #fff;
border-top: none;
background-color: #f5f5ed;
}

.shincha_circle_number {
font-size: 16px;
width: 37px;
height: 37px;
margin-right: 15px;
margin-bottom: 5px;
padding-top: 7px;
color: #fff;
background-color: #23a1a1;
border-radius: 50%;
text-align: center;
box-sizing: border-box;
font-weight: bold;
}

.coldbrew_how {
width: 50%;
padding: 10px;
display: inline-block;
}

.coldbrew_border1 {
border-bottom: 1px dotted #999;
border-right: 1px dotted #999;
}

.coldbrew_border2 {
border-bottom: 1px dotted #999;
}

.coldbrew_border3 {
border-right: 1px dotted #999;
}

@media only screen and (max-width: 768px) {
.coldbrew_how {
width: 100%;
padding: 10px;
display: inline-block;
}

.coldbrew_border1 {
border-bottom: 1px dotted #999;
border-right: none;
}

.coldbrew_border2 {
border-bottom: 1px dotted #999;
}

.coldbrew_border3 {
border-bottom: 1px dotted #999;
border-right: none;
}
}

/******************
オリジナルオーダー
******************/
@media only screen and (min-width: 768px) {
.originalorder-active-box .originalorder-active-box_paper {
position: relative;
aspect-ratio: 7 / 10;
margin: 0;
}
.originalorder-active-box_paper img {
position: absolute;
z-index: -1;
border: 1px solid #ccc;
}
.originalorder-image-space {
width: 100%;
aspect-ratio: 4 / 3;
}
.originalorder-pcimg-text {
padding: 0 20px;
}
}

@media only screen and (max-width: 768px) {
.originalorder-image {
margin-top: 30px;
}
.originalorder-image-mb {
margin-bottom: 20px;
}
.originalorder-image-spave {
position: relative;
aspect-ratio: 4 / 2;
overflow: hidden;
}
.originalorder-image-text {
position: absolute; top: 0;
right: 0;
width: 63%;
height: 100%;
padding: 7px 5px;
overflow: auto;
align-content: center;
}
.originalorder-image-text::-webkit-scrollbar {
  display: none;
}
.originalorder-image-text .originalorder-image-text-title {
margin: 0;
}
.originalorder-image-text .originalorder-image-text-detail {
margin: 0.5em 0 0;
}
}


@media only screen and (max-width: 768px) {
.originalorder-sp-move {
position: absolute;
transition-duration: 2s;
transform: scale(1.1);
transition-timing-function: ease;
}
.originalorder-sp-move.active {
transform: scale(1);
}
}

.originalorder_price_list {
border-top: 1px solid #ccc;
padding: 1em 10px;
display: flex;
justify-content: flex-start;
align-items: center;
}

.originalorder_price p {
margin: 0;
}

.originalorder_listname {
width: 8em;
}

.originalorder_listdesign {
flex: 1;
}

.originalorder_listdesign-full {
padding-bottom: 1em;
}

.originalorder_listdesign-semi {
border-top: 1px solid #ccc;
padding-top: 1em;
}

.originalorder_listdesign_attn {
margin: 0 0 1em 1em;
}

.originalorder_other {
border-bottom: 1px solid #ccc;
padding: 1em 10px 1em 1em;
}

.originalorder_other-list {
display: flex;
justify-content: flex-start;
align-items: center;
}

.originalorder_bag {
width: 9em;
}

@media only screen and (max-width: 768px) {
.originalorder_sleeve {
width: 9em;
}
}

.originalorder_price-attn {
margin-top: 1em;
}

.originalorder-goods {
justify-content: space-between;
margin-bottom: 3em;
}

.originalorder-goods1 {
padding: 1em;
position: relative;
border: 1px solid #000;
background-color: #fff;
}

.originalorder-goods2 {
padding: 1em;
position: relative;
border: 1px solid #000;
background-color: #fff;
}

@media only screen and (min-width: 768px) {
.originalorder-goods {
display: flex;
}
.originalorder-goods1 {
width: 49.5%;
}
.originalorder-goods2 {
width: 49.5%;
}
}

@media only screen and (max-width: 768px) {
.originalorder-goods2 {
margin-top: 3em;
}
}

.originalorder-flex {
display: flex;
}

@media only screen and (min-width: 768px) {
.originalorder-flex-pc {
display: flex;
}
}

.originalorder-goods_img-mg {
padding-right: 20px;
}

.originalorder-active-box {
margin-top: 30px;
justify-content: space-between;
}

.originalorder-active-box_inner {
flex-wrap: wrap;
width: calc(100% / 3 - 5px);
}

.originalorder-active-box .originalorder-active-box_inner picture {
width: 100%;
}

.originalorder-active-box .originalorder-active-box_inner figcaption {
width: 100%;
}

@media only screen and (min-width: 768px) {
.originalorder-active-box {
display: flex;
}
}


@media only screen and (max-width: 768px) {
.originalorder-active-box_inner {
width: 100%;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}

.originalorder-active-box .originalorder-active-box_inner picture {
display: block;
width: 42%;
}

.originalorder-active-box .originalorder-active-box_inner figcaption {
width: 52%;
}
}

.originalorder-order-text {
margin-top: 1.5em;
}

.originalorder_flow {
list-style-type: none;
counter-reset: number;/* カウンターを初期化 */
padding: 0 10px;
}
.originalorder_flow li {
position: relative;
padding-bottom: 2em;
align-items: baseline;
}
.originalorder_flow li:last-child {
padding-bottom: 0;
}
/*絶対配置で線を設定*/
.originalorder_border-line {
/*線の位置*/
position: absolute;
left: 18.5px;
top: 0;
width: 2px;/*線の太さ*/
height: 0;/*はじめは高さを0に*/
background: #23a1a1;
z-index: -1;
}

.originalorder_circle_number {
width: 37px;
height: 37px;
padding-top: 7px;
color: #fff;
background-color: #23a1a1;
border-radius: 50%;
text-align: center;
box-sizing: border-box;
font-weight: bold;
position: relative;
z-index: 1;
}

.originalorder_flow p {
margin-left: 3em;
}

@media only screen and (max-width: 768px) {
.originalorder_flow li {
align-items: flex-start;
}
}

.originalorder_asp1 {
aspect-ratio: 1 / 1;
}

/******************
irodoriアソートセット
******************/
.irodoriassort-cta {
animation: irodoriassort-cta 1s 1;
}

@keyframes irodoriassort-cta {
0% {
transform: translateX(-1000px);
}
100% {
transform: translateX(0);
}
}

.irodoriassort-action_mg {
margin-bottom: 3em;
}

.irodoriassort-action_sp {
display: flex;
position: relative;
}

.irodoriassort-fusenimg {
width:60%
}

.irodoriassort-fusen-right {
display: inline-block;
position: relative;
padding: 2.5em 2.3em 2.5em 2em;
color: #333333;
background-color: #fff;
top: 50px;
}

.irodoriassort-fusen-right::before {
position: absolute;
bottom: -1px;
right: 9px;
z-index: -1;
transform: rotate(5deg);
width: 70%;
height: 50%;
background-color: #d0d0d0;
content: "";
filter: blur(4px);
}

@media only screen and (min-width: 768px) {
.irodoriassort-fusen-right {
left: -30px;
}
.irodoriassort-fusen-left {
top: 50px;
}
}

.irodoriassort-fusen-left {
display: inline-block;
position: relative;
padding: 2.5em 2em 2.5em 2.3em;
color: #333333;
background-color: #fff;
left: 30px;
}

.irodoriassort-fusen-left::before {
position: absolute;
bottom: -1px;
left: 9px;
z-index: -1;
transform: rotate(-5deg);
width: 70%;
height: 50%;
background-color: #d0d0d0;
content: "";
filter: blur(4px);
}

.fusen1 {
background-color: #a9ceec;
}

.fusen2 {
background-color: pink;
}

.irodoriassort-c-box {
margin: 0;
padding-bottom: 20px;
}

.irodoriassort-kinds {
padding: 0;
}

.irodoriassort-kinds_name {
display: flex;
align-items: center;
margin: 0 0 0 1em;
}

.irodoriassort-flex {
display: flex;
}

.irodoriassort-kinds_img-mg {
padding-right: 20px;
}

@media only screen and (min-width: 768px) {
.irodoriassort-kinds {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}

.irodoriassort-kinds li{
flex: 0 0 50%;
}
}


@media only screen and (max-width: 768px) {
.irodoriassort-fusenimg {
width:77%
}

.irodoriassort-fusen-right {
display: inline-block;
padding: 1.3em 1.5em 1.3em 1.2em;
color: #333333;
top: -10px;
width: 10.7em;
}
.irodoriassort-fusen-right {
right: 0;
}

.irodoriassort-fusen-right::before {
position: absolute;
bottom: -1px;
right: 9px;
z-index: -1;
transform: rotate(5deg);
width: 70%;
height: 50%;
background-color: #d0d0d0;
content: "";
filter: blur(4px);
}

.irodoriassort-fusen-left {
display: inline-block;
padding: 1.3em 1.2em 1.3em 1.5em;
color: #333333;
bottom: -10px;
left: 0;
width: 10.7em;
}

.irodoriassort-fusen-left::before {
position: absolute;
bottom: -1px;
left: 9px;
z-index: -1;
transform: rotate(-5deg);
width: 70%;
height: 50%;
background-color: #d0d0d0;
content: "";
filter: blur(4px);
}

.irodoriassort-kinds .irodoriassort-spflex {
display: flex;
}

.irodoriassort-kinds c-box {
padding-left: 20px;
}

.irodoriassort-kinds li{
/*線の起点とするためrelativeを設定*/
position: relative;
list-style: none;
padding:0 0 20px 0;
}

/*絶対配置で線を設定*/
.irodoriassort-border-line {
/*線の位置*/
position: absolute;
left:17.5px;
top:0;
width:2px;/*線の太さ*/
height:0;/*はじめは高さを0に*/
background: #EBC52F;
z-index: -1;
}

.irodoriassort_circle_number {
width: 37px;
height: 37px;
padding-top: 7px;
color: #000;
background-color: #f6f6f6;
border-radius: 50%;
text-align: center;
box-sizing: border-box;
font-weight: bold;
}

.irodoriassort-c-box {
padding-left: 20px;
}
}




/**********************************

PCのみのCSSを記述

***********************************/



@media only screen and (min-width: 768px) {


/* PCで非表示 */
.pc-hidden {
display: none !important;
}

/* c-boxの上に文章を置くときにサイドの余白を作成 */
.p-padding-side {
padding: 0 25px;
}

th {
padding: 0 10px;
}

/* PCでのみmargin削除 */
.wrap-inner .p-pc-margin0 {
margin-top: 0;
}

/* pcで横並びにする */
.pc-flex {
display: flex;
}

/* 横並びを50％:50％にする */
.half {
width: 50%;
}

/* ボタンをSPで中央揃えにするために */
.left-auto {
margin-left: auto;
}

/* 春のお茶特集 */
.gift-introduction {
height: 48px;
}

.e-box__inner_child .pc-name {
height: 3em;
}

/************************
画像のポップアップ
************************/
/* 表示非表示 */
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.2);
transition: all 0.5s 0s ease;
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* ガラス製急須 */
#pop-up1 {
display: none;
}
#pop-up1:checked + .overlay {
visibility: visible;
opacity: 1;
z-index: 100000;
background-color: #000000D0;
width: 100%;
}
/* 茶漉し */
#pop-up2 {
display: none;
}
#pop-up2:checked + .overlay {
visibility: visible;
opacity: 1;
z-index: 100000;
background-color: #000000D0;
width: 100%;
}
/* フェルトスリーブ */
#pop-up3 {
display: none;
}
#pop-up3:checked + .overlay {
visibility: visible;
opacity: 1;
z-index: 100000;
background-color: #000000D0;
width: 100%;
}
.popWindow {
overflow: auto; /* スクロールバー用 */
max-height: 95%; /* すき間 */
min-width: fit-content; /* 横幅が広い時に白の部分が大きくならないため */
max-width: 95%; /* すき間 */
position: fixed;
top: 50%; /* 中央に */
left: 50%; /* 中央に */
transform: translate(-50%, -50%); /* 中央に */
z-index: 100010;
font-size: 13px;
line-height: 18px;
text-align: center; /* 文字を中央寄せ */
transition: all 500ms ease-in-out;
}
.popWindow .ptitle {
font-size: 15px;
margin: 8px;
color: #333;
}
.popWindow::-webkit-scrollbar-track {
background: none;
}
.popWindow::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.popWindow::-webkit-scrollbar-thumb {
background: #999;
border-radius: 5px;
}
/************************
画像のポップアップ（終）
************************/


}










/************************************

スマホサイズver

***********************************/





@media screen and (max-width: 768px) {
/* ==============================
共通CSS
============================== */
.pc_on {
display: none;
}
.sp_on {
display: block;
}

.in_pc_on {
display: none;
}
.in_sp_on {
display: inline;
}

.br_pc_on {
display: none;
}

.br_sp_on {
display: inline;
}

.sp-hidden {
display: none !important;
}

.wrap-inner h2 {
font-size: 2.2rem;
}

.wrap-inner h3 {
font-size: 1.6rem;
}

.wrap-inner h3 a {
font-size: 1.6rem;
}

.wrap p {
font-size: 1.4rem;
}

.wrap li {
font-size: 1.4rem;
}

.wrap a {
font-size: 1.4rem;
}

.wrap th {
font-size: 1.4rem;
}

.wrap table {
font-size: 1.4rem;
}

.wrap .big {
font-size: 1.5rem;
}

.sp_rink-underline {
text-decoration:underline solid;
}

/* ==============================
パンくず
============================== */
.block-topic-path--list {
display: flex;
font-size: 1.1rem;
}

.block-topic-path--list a {
text-decoration: underline;
}

/* ==============================
feature（特集一覧）
============================== */
.wrap-inner {
margin-bottom: 10.67vw;
}

.wrap-inner .title {
margin-bottom: 20px;
}

.c-box__inner {
flex-wrap: wrap;
padding: 0 3.33vw;
}

.c-box .c-box__inner picture {
width: 100%;
}

.c-box .c-box__inner figcaption {
width: 100%;
}

.a-box__inner_child {
margin: 0 5px;
}

.b-box {
margin-top: 30px;
}

.b-box__inner {
width: 100%;
justify-content: space-between;
margin: 0;
padding: 0 5px;
}

.b-box .b-box__inner picture {
display: block;
width: 40%;
}

.b-box .b-box__inner figcaption {
width: 58%;
}

.e-box__inner {
grid-template-columns: 1fr 1fr;
}

.e-box__inner_child {
margin: 0;
}

p.btn {
margin: 16px 0;
}

a.btn {
display: block;
padding: 10px 0;
background-color: #000000;
color: #fff;
transition: all .2s ease;
max-width: 300px;
margin-left: auto;
text-align: center;
}

.banner {
padding: 1em 45px;
border: solid 1px;
display: inline-flex;
margin-top: 20px;
background-color: #fff;
}

.table-product-name {
padding: 0 5px;
}

.wrap .numbers_top_left {
font-size: 20px;
background: #91908e;
border-radius: 50%;
width: 30px;
height: 30px;
color: #fff;
text-align: center;
line-height: 30px;
position: absolute;
top: 0;
left: 0;
padding: 0;
z-index: 10;
}

/* お配りギフトSP高さ */
.handingoutgift_background {
height: 350px;
}

.handingoutgift_label_img .handingoutgift_label_img2_inner {
font-size: 16px;
margin-top: 0;
}

}