/* ==============================
簡易リセット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%;
}

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

.g-box__inner {
width: 100%;
justify-content: space-between;
margin: 0;
flex-wrap: wrap;
padding: 0 15px;
}

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

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


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

/* アンカーリンク */
.anchorlink {
padding-top: 100px;
margin-top: -100px;
}


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

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

position-re {
position: relative;
}

position-ab {
position: absolute;
}

/* 下矢印 */
.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;
}

/*--------------------------------------
ポップアップ
--------------------------------------*/
.modal_wrap input {
display: none;
}

.modal_overlay {
display: flex;
justify-content: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
opacity: 0;
transition: opacity 0.5s, transform 0s 0.5s;
transform: scale(0);
}

.modal_trigger {
position: absolute;
width: 100%;
height: 100%;
}

.modal_content {
align-self: center;
width: 60%;
max-width: 800px;
max-height: 150px;
overflow: hidden;
padding: 30px 30px 15px;
box-sizing: border-box;
background: #fff;
line-height: 1.4em;
transition: 0.5s;
}

.modal_content div {
margin: 0;
max-height: 75px;
overflow: auto;
}

.close_button {
position: absolute;
top: 14px;
right: 16px;
font-size: 24px;
cursor: pointer;
}

@media screen and (max-width: 768px) {
.modal_content {
width90%
max-height: 345px;
}
.modal_content div {
max-height: 300px;
}
.modal_content > div > p {
letter-spacing: 0.04em;
line-height: 1.7;
}
.close_button {
top: 10px;
right: 10px;
}
}

.modal_wrap input:checked ~ .modal_overlay {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s;
}

.modal_wrap input:checked ~ .modal_overlay .modal_content {
transform: translateY(20px);
}

.open_button {
cursor :pointer;
transition: all 0.3s;
}


.open-button:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(2px);
transform: translateY(2px);/*下に動く*/

}

/*アイコンを表示*/
.open-button:after {
font-family: "Font Awesome 5 Free";
content: "\f2d0";
padding-left: 8px;
}

/*ラベルホバー時*/
.open-button:hover {
color: #FFFFFF;
background-color: #4f96f6;
transition: .6s;
}





/******************
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 30px 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;
}
}



/******************
福袋2025
******************/
.ts-fukubukuro-list {
width: 32%;
}
.itoen-fukubukuro-list {
width: 24%
}


@media only screen and (max-width: 768px) {
.ts-fukubukuro-list {
width: 48.5%;
}
.itoen-fukubukuro-list {
width: 48.5%
}
}



#effectimg {
position: fixed; /*描画固定*/
width: 100vw;
height: 100vh;
overflow: hidden;
top: 0;
}


.box-parent {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}

.box-child {
height: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 0 10px;
margin-top: 20px;
}

@media only screen and (min-width: 768px) {
.box-child {
width: 33%;
}
.box-child-itoen {
width: 25% !important;
padding: 0 5px;
}
}
@media only screen and (max-width: 768px) {
.box-child {
width: 50%;
}
}


.box-child .box-img {
display: block;
object-fit: cover;
}

.box-child-text {
width: 100%;
flex-grow: 1;
box-sizing: border-box;
/*余白を設定*/
}

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

.btn-secondary {
display: inline-block;
text-align: center;
text-decoration: none;
color: #000000;
border:1px solid #000;
background-color: #fff;
-webkit-transition: all .3s;
transition: all .3s;
box-shadow: 5px 5px 0px #000;
padding: 1em 25px 1em;
margin: 0 10px 10px;
}

@media only screen and (max-width: 768px) {
.btn-secondary {
padding: 1em 0.7em 1em;
}
}
.btn-secondary:hover {
color: #fff;
border:1px solid #000;
background-color: #000;
box-shadow: unset;
transform: translate(4px,4px);
}


/******************
クリスマス2025
******************/
.chiristmas2025-pickup {
background-image: url(https://teashopitoen.itembox.design/item/feature_christmasgift2025_02.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 30px;
}
.chiristmas2025-pickup {
color: #d5d5d5;
}
.chiristmas2025-pickup figure {
padding: 30px 30px 10px;
}
/* テキストリンク */
.chiristmas2025-pickup a{
color: #d5d5d5;
}
.chiristmas2025-pickup a:hover {
color: #EBC52F;
}
/* ボタンリンク */
.chiristmas2025-pickup .btn-above a{
color: #000;
}
.chiristmas2025-pickup .btn-above a:hover {
color: #fff;
}
.chiristmas2025-pickup .btn-above .btn-secondary {
width: 40%;
}
@media only screen and (max-width: 768px) {
.chiristmas2025-pickup .btn-above .btn-secondary {
width: 60%;
}
}


@media only screen and (max-width: 768px) {
.chiristmas2025-pickup {
background-image: url(https://teashopitoen.itembox.design/item/feature_christmasgift2025_03.jpg);
padding-bottom: 19%;
}
.chiristmas2025-pickup figure {
padding: 19% 9% 20px;
}
}

@media only screen and (min-width: 768px) {
.chiristmas2025-rank {
margin: 0 20px;
}
}

.chiristmas2025-price {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin-top: 20px;
}
.chiristmas2025-price a{
width: 20%;
}
@media only screen and (max-width: 768px) {
.chiristmas2025-price a{
width: 33%
}
}
.chiristmas2025-banner {
justify-content: center;
align-items: center;
padding: 1em;
width: 50%;
}
@media only screen and (max-width: 768px) {
.chiristmas2025-banner {
width: 70%;
}
}


/******************
ハーブティー
******************/

@media only screen and (min-width: 769px) {
.herbkoucha-pc-imgbg {
max-width: initial;
background-image: url(https://teashopitoen.itembox.design/item/feature_herbkoucha_01.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
}

@media only screen and (max-width: 769px) {
.herbkoucha-sp-imgbg {
max-width: initial;
background-image: url(https://teashopitoen.itembox.design/item/feature_herbkoucha_02.png);
background-size: auto;
}
}

.herbkoucha-bg {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}

@media only screen and (min-width: 768px) {
.herbkoucha-position figure {
padding: 0 !important;
}
.herbkoucha-position figcaption {
padding: 0 3.33vw !important;
}

.herbkoucha-lineup {
margin-top: 60px !important;
}
}

@media only screen and (max-width: 768px) {
.herbkoucha-lineup {
margin-bottom: 0 !important;
}
}

.herbkoucha-list {
display: flex;
justify-content: space-evenly;
}
.herbkoucha-list>div {
text-align: center;
width: 22%;
}

@media only screen and (max-width: 768px) {
.herbkoucha-list>div {
width: 28%;
}
}

.herbkoucha-about {
position: relative;
padding: 60px;
}

.herbkoucha-about .title p {
margin: 0 0 0.5em;
}
@media only screen and (max-width: 768px) {
.herbkoucha-about .title p {
margin: 0;
}
}

.herbkoucha-about>img {
position: absolute;
}

/* ハーブimgの配置 */
.herbkoucha-about .img-09 {
width: 13em;
bottom: -100px;
right: -2em;
}

.herbkoucha-about .img-10 {
width: 9em;
top: 0;
right: -15px;
}

.herbkoucha-about .img-11 {
width: 9em;
bottom: -3em;
right: 0;
left: 0;
margin: auto;
transform: rotate(-32deg);
}

.herbkoucha-about .img-12 {
width: 13em;
top: -1em;
left: -3em;
}

.herbkoucha-about .img-13 {
width: 7em;
top: 6.5em;
right: -2.5em;
}

.herbkoucha-about .img-14-1 {
width: 7.5em;
bottom: 0;
left: -43px;
}

.herbkoucha-about .img-14-2 {
width: 6.5em;
bottom: 1em;
left: 9px;
transform: rotate(-20deg);
}
/* ハーブimgの配置(終) */

@media only screen and (max-width: 768px) {
.herbkoucha-about {
padding: 40px 40px 60px !important;
margin-bottom: 0 !important;
}

/* ハーブimgの配置 */
.herbkoucha-about .img-09 {
width: 10em;
bottom: -80px;
right: 0;
left: 0;
margin: auto;
}

.herbkoucha-about .img-10 {
width: 8em;
top: -1em;
right: -15px;
}

.herbkoucha-about .img-11 {
width: 9em;
bottom: -3em;
left: auto;
right: -2em;
transform: rotate(-38deg);
}

.herbkoucha-about .img-12 {
width: 9em;
top: -2.5em;
left: -2em;
}

.herbkoucha-about .img-13 {
width: 6em;
top: 5em;
right: -2.5em;
}

.herbkoucha-about .img-14-1 {
width: 7em;
bottom: 1em;
left: -43px;
}

.herbkoucha-about .img-14-2 {
width: 6em;
bottom: 1em;
left: 9px;
transform: rotate(-20deg);
}
/* ハーブimgの配置(終) */
}

.herbkoucha-nuance {
z-index: -1;
}

@media only screen and (max-width: 768px) {
.herbkoucha-nuance {
top: 130px;
left: 0;
}
}

.herbkoucha-herblist {
display: flex;
justify-content: center;
}

.herbkoucha-herblist>div {
text-align: center;
width: 15%;
}

@media only screen and (max-width: 768px) {
.herbkoucha-herblist {
margin-top: 0em;
}
.herbkoucha-herblist>div {
width: 19%;
}
#peach .herbkoucha-herblist>div {
width: 5em;
}
}

.herbkoucha-herblist>div:nth-child(2) {
width: 10%;
margin: auto 0;
padding-bottom: 2em;
}
@media only screen and (max-width: 768px) {
.herbkoucha-herblist>div:nth-child(2) {
padding-bottom: 4em;
}
}

.herbkoucha-herblist>div:nth-child(2)>p {
font-size: 5rem;
margin: 0;
}

.herbkoucha-herblist p {
margin-top: 0;
}

@media only screen and (min-width: 768px) {
.herbkoucha-herblist + p {
margin: 1em auto;
}

.herbkoucha-detail {
display: flex;
justify-content: space-evenly;
}

.herbkoucha-chart {
width: 60%;
}

.herbkoucha-howtomake {
width: 30%
}
}

.herbkoucha-kome {
color: #999;
width: fit-content;
margin-top: 0 !important;
}

.herbkoucha-cook {
display: flex;
justify-content: space-evenly;
gap: 10px;
}

.herbkoucha-cook > div {
width: 16em;
}
@media only screen and (max-width: 768px) {
.herbkoucha-cook > div {
width: 14em;
}
.herbkoucha-cook > div:nth-child(2) {
width: 12em
}
}
@media only screen and (max-width: 450px) {
.herbkoucha-cook > div {
width: calc(100% - 13em);
}
}

.herbkoucha-husen {
padding: 1em;
width: fit-content;
text-align: center;
width: 10em;
margin: 2em auto 1em!important;
}
@media only screen and (max-width: 768px) {
.herbkoucha-husen {
padding: 0.5em;
width: 8.5em;
}
}
.herbkoucha-husen.red {
background-image: url(https://teashopitoen.itembox.design/item/feature_howtomake_26.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}

/* アイコンリスト部分 */
.herbkoucha-listicon dt {
float: left;
clear: left;
margin-right: 0.5em;
width: 8.5em;
position: relative;
padding-left: 3em;
height: 2em;
line-height: 2em;
}

.herbkoucha-listicon dt:before {
padding-left: 2em;
position: absolute;
left: 0;
display: inline-block;
height: 100%;
}

/* 背景としてアイコンを表示 */
.herbkoucha-listicon dt.leaf:before {
content: "";
background: url(https://teashopitoen.itembox.design/item/feature_icon_leaf.png) no-repeat;
background-size: cover;
}

.herbkoucha-listicon dt.amount:before {
content: "";
background: url(https://teashopitoen.itembox.design/item/feature_icon_amount.png) no-repeat;
background-size: cover;
}

.herbkoucha-listicon dt.hottemperature:before {
content: "";
background: url(https://teashopitoen.itembox.design/item/feature_icon_hottemperature.png) no-repeat;
background-size: cover;
}

.herbkoucha-listicon dt.coldtemperature:before {
content: "";
background: url(https://teashopitoen.itembox.design/item/feature_icon_coldtemperature.png) no-repeat;
background-size: cover;
}

.herbkoucha-listicon dt.time:before {
content: "";
background: url(https://teashopitoen.itembox.design/item/feature_icon_time.png) no-repeat;
background-size: cover;
}

.herbkoucha-listicon dd {
height: 2em;
line-height: 2em;
margin: 1em 0;
}


/******************
LINE
******************/
.lineid-renkei {
display: flex;
justify-content: space-evenly;
margin-bottom: 30px;
}

.lineid-renkei img {
width: 25%;
}

@media screen and (max-width: 768px) {
.lineid-renkei img {
width: 30%;
}
}

.lineid-point {
position: relative;
background-color: #00B900;
padding: 15px 9em 15px 25px;
border-radius: 20px;
margin: 10px;
}

.lineid-point .lineid-point-text {
font-size: 25px;
margin: 0;
}

@media screen and (max-width: 768px) {
.lineid-point {
padding: 15px 25px;
}
.lineid-point .lineid-point-text {
font-size: 1.6rem;
margin-right: calc(3em + 10px);
}
}
@media screen and (max-width: 394px) {
.lineid-point .lineid-point-text.first {
margin-right: 0;
}
}

.lineid-point img {
width: 8em;
position: absolute;
right: -10px;
bottom: -10px;
}
@media screen and (max-width: 768px) {
.lineid-point img {
width: 6em;
}
}

.lineid-friend {
display: flex;
justify-content: space-around;
}
.lineid-friend-child {
width: 48%;
text-align: center;
}
@media screen and (min-width: 768px) {
.lineid-friend {
margin-top: 30px;
}
.lineid-friend-child {
margin: 0 4%;
}
.lineid-friend-item .qr {
width: 50%;
}
.lineid-friend-border {
border-right: 1px solid #ddd;
margin: 0 10px;
}
}
@media screen and (max-width: 768px) {
.lineid-friend-child {
width: 100%;
}
}

.lineid-alignment {
margin-top: 20px;
}

.lineid-alignment > div:first-child {
display: flex;
align-items: center;
}
.lineid-alignment > div:nth-child(2) {
display: flex;
justify-content: space-between;
margin-left: 65px;
}
.lineid-alignment-img {
width: 46%;
}
.lineid-alignment-img img {
border: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
.lineid-alignment > div:nth-child(2) {
display: block;
}
.lineid-alignment-img {
width: 100%;
margin-top: 15px;
}
}


.lineid-step-circle {
margin: 0;
border-radius: 50%;
background-color: #000;
aspect-ratio: 1 / 1;
text-align: center;
width: 65px;
min-width: 65px;
line-height: 2;
color: #fff;
}

.lineid-step-no {
font-family: 明朝;
font-size: 32.5px;
line-height: 0.8;
}

@media screen and (max-width: 768px) {
.lineid-step-circle {
width: 60px;
min-width: 60px;
}

.lineid-step-no {
font-size: 30px;
line-height: 0.6;
}
}




/******************
2025年ご予約限定生新茶
******************/
.thefirsttea2025-auspicious {
margin: 2em 4em;
padding: 0.5em 1em 1.5em;
color: #5d627b;
background: #fff;
border-top: solid 5px #5d627b;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.thefirsttea2025-auspicious-title {
text-align: center;
}

.thefirsttea2025-auspicious-title p {
font-size: 1.9rem !important;
}

.thefirsttea2025-auspicious-box {
display: flex;
align-items: center;
}

.thefirsttea2025-auspicious-box div {
max-width: 160px;
width: 50%;
}

@media only screen and (max-width: 768px) {
.thefirsttea2025-auspicious {
margin: 1em;
}
.thefirsttea2025-auspicious-box {
display: block;
}

.thefirsttea2025-auspicious-box div {
max-width: 200px;
width: 60%;
}
}

/* ============== ボタン装飾 ============== */
.thefirsttea2025-cart {
/* ボタン要素の大きさや色 */
position: relative;
display: inline-block;
background-color: #8fc31f;
padding: 0.8em 2.4em;
border: 2px solid transparent;
width: 240px;
/* ボタンの文字の設定 */
color: #fff;
letter-spacing: 0.1em;
/* その他必要なスタイル */
transition: all 0.3s ease;
text-decoration: none;
}

/* 葉の共通スタイル */
.thefirsttea2025-cart::before,
.thefirsttea2025-cart::after {
content: "";
background-size: contain;
background-repeat: no-repeat;
width: 30px;
height: 30px;
position: absolute;
opacity: 0;
}

/* 左上の葉のスタイル */
.thefirsttea2025-cart::before {
background-image: url(https://teashopitoen.itembox.design/item/feature_thefirsttea_03.png);
top: 0;
left: -12px;
}

/* 右下の葉のスタイル */
.thefirsttea2025-cart::after {
background-image: url(https://teashopitoen.itembox.design/item/feature_thefirsttea_03.png);
bottom: -20px;
right: -14px;
}

/* ========= ホバー時のスタイル ======== */

/* ボタンホバー時のスタイル */
.thefirsttea2025-cart:hover {
background-color: #fff;
border-color: #8fc31f;
color: #8fc31f;
}

/* ボタンホバー時の左上の葉のスタイル */
.thefirsttea2025-cart:hover::before {
animation: heart 1.5s infinite ease-out;
}

/* ボタンホバー時の右下の葉のスタイル */
.thefirsttea2025-cart:hover::after {
animation: heart 1.5s 0.2s infinite ease-out;
}

/* ========= アニメーションの設定 ======== */
@keyframes heart {
0% {
transform: translateY(0) scale(1);
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
transform: translateY(-20px) scale(1.4);
opacity: 0;
}
}

/* ========= SPのスタイル ======== */
@media screen and (max-width: 768px) {

/* ボタン本体のスタイル */
.thefirsttea2025-cart {
background-color: #E97F12;
border-color: #E97F12;
color: #fff;
}

/* 左上の葉のスタイル */
.thefirsttea2025-cart::before {
animation: heart 1.5s infinite ease-out;
}

/* 右下の葉のスタイル */
.thefirsttea2025-cart::after {
animation: heart 1.5s 0.2s infinite ease-out;
}
}


/******************
ノンカフェインティー
******************/
.noncaffeine-boxcenter {
justify-self: center;
margin-top: 1em;
}
.noncaffeine-boxcenter > div {
display: inline-block;
}
.noncaffeine-boxcenter > p {
display: inline-block;
}
.noncaffeine-boxcenter > ul {
display: inline-block;
}

/*アンカーリンク*/
.noncaffe-linkline {
display: flex;
justify-content: space-evenly;
margin-top: 50px;
}
.noncaffe-link {
padding: 30px;
position: relative;
z-index: 2;
width: calc((100% / 3)* 0.8);
}
.noncaffe-link img {
position: relative;
z-index: 3;
}
.noncaffe-linkcircle {
width: 90px;
height: 90px;
background-color: #ffeca3;
border-radius: 50%;
position: absolute;
top: 13%;
left: 7%;
transition: .3s;
}
.noncaffe-link:hover .noncaffe-linkcircle {
width: 85%;
height: 85%;
transform: translate(0, -13%);
transform-origin: left;
}
@media screen and (max-width: 768px) {
.noncaffe-link {
padding: 5px;
width: calc((100% / 3)* 0.95);
}
.noncaffe-linkcircle {
width: 60px;
height: 60px;
top: 10%;
left: 0;
}
.noncaffe-link:hover .noncaffe-linkcircle {
width: 100%;
height: 100%;
transform: translate(0, -10%);
}
}

.noncaffeine-bg {
background-image: linear-gradient(rgb(255, 255, 255), rgba(204, 223, 226, 0.55) 13%, rgba(105, 183, 243, 0.55) 43%,
rgba(194, 171, 229, 0.55));
padding: 0 4%;
}

.noncaffe-topmask {
height: 190px;
mask-image: url(https://teashopitoen.itembox.design/item/test1.svg);
background-color: #fff;
mask-repeat: repeat-x;
position: relative;
}

.noncaffe-body {
background-color: #fff;
padding: 30px 4%;
position: relative;
z-index: 1;
}

.noncaffe-bottommask {
height: 190px;
mask-image: url(https://teashopitoen.itembox.design/item/test2.svg);
background-color: #fff;
mask-repeat: repeat-x;
position: relative;
}

.noncaffe-body {
top: -150px;
}
.noncaffe-bottommask {
top: -300px;
}
#morning {
top: 150px
}
#night {
top: -150px
}

@media screen and (max-width: 768px) {
.noncaffe-body {
top: -133px;
}
.noncaffe-bottommask {
top: -150px;
}
#morning {
top: 100px
}
#night {
top: -100px
}
}


.noncaffe-title {
text-align: center;
}
@media screen and (max-width: 768px) {
.noncaffe-title {
margin-top: 0;
}
}

.noncaffe-bodymg {
margin-top: 50px;
}

.noncaffeine-merchandise {
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
}
@media screen and (min-width: 768px) {
.noncaffeine-merchandise div:nth-child(1) {
width: 55%
}
.noncaffeine-merchandise div:nth-child(2) {
min-width: 22em;
}
}
@media screen and (max-width: 768px) {
.noncaffeine-merchandise {
display: block;
text-align: left;
}
.noncaffeine-merchandise-name {
border-left: 5px solid #EBC52F;
padding-left: 20px;
}
}

.noncaffeine-wave-top {
margin-top: -50px;
margin-bottom: -87px;
}
.noncaffeine-wave-bottom {
position: relative;
z-index: 0;
}
@media screen and (max-width: 768px) {
.noncaffeine-wave-top {
margin-top: -35px;
margin-bottom: -35px;
}
.noncaffeine-wave-bottom {
margin-top: -10px;
}
}

.noncaffeine-cook {
position: relative;
}
.noncaffeine-cook-title {
font-size: 1.8rem !important;
position: absolute;
border-bottom: 2px dotted;
padding: 0 0.5em;
text-align: center;
}
.noncaffeine-cook-title.morning {
right: 1em;
}
.noncaffeine-cook-title.noon {
left: 1em;
}
.noncaffeine-cook-title.night {
right: 1em;
top: 1.5em;
}
@media screen and (max-width: 768px) {
.noncaffeine-cook {
justify-items: center;
}
}

/*フェードアップ*/
.noncaffeine-fadeup {
opacity: 0;
visibility: hidden;
transition: all 2s;
transform: translateY(150px);
display: none;
}
.noncaffe-is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
display: block;
}




.noncaffeine-keybi {
position: relative; /* コンテナ内でスライド位置を相対的に設定 */
width: 100%; /* コンテナ幅を100%に */
overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
}

.noncaffeine-keybi-img {
position: absolute; /* 位置を絶対指定で重ねて配置 */
inset: 0; /*親要素内にフルサイズで配置*/
opacity: 0; /* 初期状態で透明に */
background-size: cover; /* 画像をスライド全体にカバー */
animation: noncaffeine-keybi-anime 15s infinite; /* 1サイクル15秒を無限ループ */
z-index: -1;
}

.noncaffeine-keybi-img:nth-of-type(1) { background-image: url('https://teashopitoen.itembox.design/item/test23.jpg');
animation-delay: 0s; }
.noncaffeine-keybi-img:nth-of-type(2) { background-image: url('https://teashopitoen.itembox.design/item/test24.jpg');
animation-delay: 5s; }
.noncaffeine-keybi-img:nth-of-type(3) { background-image: url('https://teashopitoen.itembox.design/item/test25.jpg');
animation-delay: 10s; }

@keyframes noncaffeine-keybi-anime {
0%, 50%, 100% { opacity: 0; } /* 非表示のタイミング */
10%, 40% { opacity: 1; } /* 表示されるタイミング */
}



/******************
黄金みどり
******************/
.wrap_h {
width: 100%;
max-width: 910px;
margin: 2em auto 4em;
padding: 0 2em;
}

.koganemidori_keytext {
font-size: 3.5rem;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: fit-content;
height: fit-content;
color: #fff;
letter-spacing: 3px;
}
@media screen and (min-width: 768px) {
.koganemidori_keytext {
margin-top: 3em;
margin-right: 2em;
}
}
@media screen and (max-width: 768px) {
.koganemidori_keytext {
writing-mode: vertical-rl;
background-color: rgb(4, 4, 4, 0.3);
padding: 10px;
margin-right: 2em;
}
}

@media screen and (min-width: 768px) {
.koganemidori_bodytext {
padding-right: 14em;
}
}

.koganemidori_bgpa {
padding-top: 80px !important;
padding-bottom: 80px !important;
}

.koganemidori_p-margin0 {
margin-top: 0
}

.koganemidori_img-spave {
position: relative;
aspect-ratio: 48 / 25;
overflow: hidden;
}

.koganemidori_img-move {
position: absolute;
transition-duration: 2s;
transform: scale(1.1);
transition-timing-function: ease;
}
.koganemidori_img-move.active {
transform: scale(1);
}

@media screen and (max-width: 768px) {
.koganemidori_img-spave {
aspect-ratio: 2 / 3;
}
}

.koganemidori_pctitle {
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
}

.koganemidori_pctitle > div {
display: flex;
align-items: center;
padding: 2em 4em 2em 2em;
gap: 1em;
}

.koganemidori_count {
font-size: 5.6rem !important;
margin: 0;
}

@media screen and (max-width: 768px) {
.koganemidori_sptitle {
background-color: #fff;
}
.koganemidori_sptitle > div {
display: flex;
align-items: center;
padding: 1em 2em 1em 1em;
gap: 1em;
}
.koganemidori_count {
font-size: 4.4rem !important;
width: 2em;
}
}

/* ポップアップデザイン */
.koganemidori_more {
position: relative;
display: inline-block;
margin: 2em 0;
}
.koganemidori_more::before,
.koganemidori_more::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: calc(-50px + 0.5em);
margin: auto;
height: 1px;
background-color: #333;
}
.koganemidori_more::before {
width: 60px;
}
.koganemidori_more::after {
width: 15px;
transform-origin: right center;
transform: rotate(25deg);
}
/* ポップアップデザイン */

.koganemidori_bg-dark {
background-color: #ddd;
}

.koganemidori_bg-bitdark {
background-color: #eee;
}

.koganemidori_center-h2 {
text-align: center;
margin-top: 0;
}

.koganemidori_dark-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 40px;
}

.koganemidori_dark-box-img {
width: 38%;
text-align: center;
}

.koganemidori_dark-box-text {
width: 58%;
}

@media screen and (max-width: 768px) {
.koganemidori_dark-box {
display: block;
}
.koganemidori_dark-box-img {
width: 100%;
}
.koganemidori_dark-box-text {
width: 100%;
margin-top: 1em;
}
}

@media screen and (min-width: 768px) {
.koganemidori_cart {
display: flex;
justify-content: space-between;
gap: 20px;
}
.koganemidori_cart > div {
width: 45%;
}
}

@media screen and (max-width: 768px) {
.koganemidori_cart > div :nth-child(2) {
margin-top: 2em;
}
}

.modal_content_movie {
position: relative;
align-self: center;
text-align: center;
width: 60%;
max-width: 800px;
overflow: hidden;
padding: 30px 30px 15px;
box-sizing: border-box;
background: #fff;
line-height: 1.4em;
transition: 0.5s;
}

@media screen and (max-width: 768px) {
.modal_content_movie {
width: 90%;
}
.modal_content_movie > iframe {
width: fit-content;
}
}

.koganemidori_marker {
background:linear-gradient(transparent 40%, rgba(232, 217, 121) 40%);
display: inline;
/* 背景の繰り返しを停止 */
background-repeat: no-repeat;
/* マーカーの横方向を0にして縮める */
background-size: 0% 100%;
/* マーカーが引かれる速度を指定 */
transition:background-size 1.5s;
}
/* マーカーが引かれる際に付与するクラス */
.koganemidori_marker.on {
/* 横方向を100%にして、マーカーを引く */
background-size: 100% 100%;
}


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

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;
}

.g-box__inner {
padding: 0;
}

.g-box .g-box__inner picture {
width: 42%;
}

.g-box .g-box__inner figcaption {
width: 55%;
}

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;
}

}