@charset "utf-8";
/* CSS Document */
/*大枠のcss*/
#outer{
	width: 1260px;
	margin: 0 auto;
}
/*マウスオーバーでふぉんってなる*/
#outer a:hover{
	opacity: 0.7;
}

/*見出し*/
#outer .top_parts{
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: #ffaabb;
	margin-bottom: 50px;
}
#outer .top_parts .top_txt{
	width: 54%;
	color: #ffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 0 0 25px;
}
#outer .top_parts .top_txt h1{
	font-size: 2.3em;
	font-weight: bold;
	padding-bottom: 5px;
	line-height: 1.2;
}

#outer .top_parts .top_txt p{		/*h1説明文*/		
	font-size: 1.3em;
	padding-top: 10px;
	font-weight: bold;
}
#outer .top_parts .top_img{
	width: 44%;
}
#outer .top_parts .top_img img{
	width: 100%;
}


/*レコメンドのところ*/
#recommend_block{
	border-top: inherit;
}
#recommend_block .ec-shelfRole{
	margin-bottom: 0px;
}
/*レコメンドの順位ランキングアイコン*/
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:before {
	content: '';
	z-index: 2;
	position: absolute;
	display: inline-block;
	width: 25px;
	height: 25px;
	background-size: contain;
	vertical-align: middle;
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(1)::before {
	background-image: url(/img/icon/rank_category_1.png);
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(2)::before {
	background-image: url(/img/icon/rank_category_2.png);
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(3)::before {
	background-image: url(/img/icon/rank_category_3.png);
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(4)::before {
	background-image: url(/img/icon/rank_category_4.png);
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(5)::before {
	background-image: url(/img/icon/rank_category_5.png);
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(6)::before {
	background-image: url(/img/icon/rank_category_6.png);
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(7)::before {
	background-image: url(/img/icon/rank_category_7.png);
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(8)::before {
	background-image: url(/img/icon/rank_category_8.png);
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(9)::before {
	background-image: url(/img/icon/rank_category_9.png);
}
#recommend_block .ec-shelfRole li.ec-shelfGrid__item:nth-child(10)::before {
	background-image: url(/img/icon/rank_category_10.png);
}
/*カテゴリボタン設定*/
#outer .category_btn{
	width: 99%;
	font-size: 1.5em;
	margin: 40px auto 70px;
}
#outer .category_btn a{
	color: #42210b !important;
	text-decoration: none !important;
	position: relative;
	display: block;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	padding: 10px;
	font-weight: bold;
	border-radius: 6px;
	background-color: #FFE4E4;
	border: solid 1px #fff;
}

/*IDとばす設定*/
#outer .jump{
	width: 100%;
	margin: 0 0 50px;
	box-sizing: border-box;
	position: static;
	/*top: 200px;*/
	/*z-index: 2;*/
	padding-bottom: 0;
	padding-top: 0;
	max-width: 100%;
    line-height: 0;
}
#outer .jump ul._genre_menu li.global_item a{
	display: block;
	/*padding: 15px;*/
	font-weight:bold;
	text-decoration: none;
	box-sizing: border-box;
	text-align:center;
	color:#42210b;
	font-size:1.4em;
	line-height: 3em;
}
#outer .jump ul._genre_menu{
	width:100%;
	display: flex;
	justify-content: center;
	margin:0;
	box-sizing: border-box;
	list-style: none;
	color:#42210b;
	background-color: #ffaabb;
}

#outer .jump ul._genre_menu li.global_item {
	display: block;
	width: 50%;
	position: relative;
    /*padding: 20px;*/
    border: solid 0.5px #fff;
}
li.global_item:hover{
	background-color: #FFE4E4;
}


#outer .adjustment {
    padding-top: 40px;
	margin-top: -40px;
	display: block;
}


/*タブのところ*/
/*タブ切り替え全体のスタイル*/
#outer .tabs {
	margin-top: 50px;
	color: #42210b;
	background-color: #fff;
	width: 100%;
}
/*タブのスタイル*/
#outer .tab_item {
	width: calc(100%/5);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	/*height: 50px;
	*/
	border-left: solid 2px #ffffff;
	box-sizing: border-box;
	background-color: #FFE4E4;
	line-height: 1.1em;
	font-size: 14px;
	text-align: center;
	float: left;
	font-weight: bold;
	transition: all 0.2s ease;
	padding: 1.5em;
	border-radius: 9px 9px 0 0;
    position: relative; /* ::after用に基準位置を設定 */
}
#outer .tab_item:first-of-type {
	border-left-style: none;
}
#outer .tab_item:hover {
	opacity: 0.7;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}
/*タブ切り替えの中身のスタイル*/
#tab1_content,#tab2_content,#tab3_content,#tab4_content,#tab5_content{
	background-color: #ffaabb;
	display: none;
	padding: 30px 0 0;
	clear: both;
	overflow: hidden;
	font-size: 14px;
	position: relative; /* 波模様の位置を調整するために相対配置 */
	  --mask: 
    linear-gradient(to top,#0000 60px,#000 0),
    radial-gradient(60px,#000 98%,#0000) bottom/111px 120px;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}


/*選択されているタブのコンテンツのみを表示*/
#tab1:checked ~ #tab1_content{
    display: block;
}
#tab2:checked ~ #tab2_content{
    display: block;
}
#tab3:checked ~ #tab3_content{
    display: block;
}
#tab4:checked ~ #tab4_content{
    display: block;
}
#tab5:checked ~ #tab5_content{
    display: block;
}

/*選択されているタブのスタイルを変える*/
#outer .tabs input:checked + .tab_item{
	background-color: #ffaabb;
	color: #42210b;
}
/* タブが選択された状態（クリック時） */
#outer .tabs input:checked + .tab_item:after {
    display: inline-block; /* 選択されたタブのみ画像を表示 */
}



/* 画像のスタイル（初期状態では非表示 */
#outer .tab_item:after{
    content: "";
    display: none; /* 初期状態では非表示 */
    background-size: contain; /* 画像サイズを調整 */
    background-repeat: no-repeat;
    width: 46px; /* 画像の幅 */
    height: 50px; /* 画像の高さ */
    position: absolute; /* テキストの右側に固定配置 */
    right: 4px; /* タブ内の右端からの位置 */
    top: 50%; /* タブ内の縦中央に配置 */
    transform: translateY(-50%);
}
/* タブ1の画像 */
input#tab1:checked + .tab_item::after {
    display: inline-block;
    background-image: url("/img/freepage/feature_desertcup/desertup-icon1.png"); /* タブ1の画像パス */
}

/* タブ2の画像 */
input#tab2:checked + .tab_item::after {
    display: inline-block;
    background-image: url("/img/freepage/feature_desertcup/desertup-icon2.png"); /* タブ2の画像パス */
}

/* タブ3の画像 */
input#tab3:checked + .tab_item::after {
    display: inline-block;
    background-image: url("/img/freepage/feature_desertcup/desertup-icon3.png"); /* タブ3の画像パス */
}

/* タブ4の画像 */
input#tab4:checked + .tab_item::after {
    display: inline-block;
    background-image: url("/img/freepage/feature_desertcup/desertup-icon4.png"); /* タブ4の画像パス */
}

/* タブ5の画像 */
input#tab5:checked + .tab_item::after {
    display: inline-block;
    background-image: url("/img/freepage/feature_desertcup/desertup-icon5.png"); /* タブ5の画像パス */
}

/*h2見出し装飾*/
#outer h2.uline_b {
  font-size:1.4em;
  font-weight: bold;
  padding: 0.5em 1em;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 40px;
  margin-bottom: 70px;
  color: #42210b;
  background-color: #FFE4E4;
  box-shadow: 0 0 0 10px #FFE4E4;
  border-top: 2px dashed #fff;
  border-bottom: 2px dashed #fff;
  text-align: center;
}

/*h3見出し装飾濃い#c1272d-#ef4878-#f46091*/
/* リボン全体の設定 */
/* h3_typetxt全体を中央配置 */
.h3_typetxt {
  display: flex; /* フレックスボックスで中央配置 */
  justify-content: center;
  align-items: center;
  position: relative;
  height: 45px;
  text-align: center;
  box-sizing: border-box;
  width: 400px; /* リボン全体の幅を固定 */
  margin: 0 auto; /* 親要素の中央に配置 */
}

/* 左側のリボン端 */
.h3_typetxt:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 0px;
  bottom: -10px;
  left: -35px;
  z-index: 0;
  border: 20px solid #f46091;
  border-left-color: transparent; /* 山形に切り抜き */
}

/* 右側のリボン端 */
.h3_typetxt:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 0;
  bottom: -10px;
  right: -35px;
  z-index: 0;
  border: 20px solid #f46091;
  border-right-color: transparent; /* 山形に切り抜き */
}

/* 真ん中のリボン部分 */
.h3_typetxt h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px; /* 文字の左右余白 */
  line-height: 45px;
  font-size: 23px;
  color: #FFF;
  background: #ef4878; /* 真ん中の背景色 */
  z-index: 1;
  width: 360px; /* リボンの中央部分の幅を固定 */
  text-align: center;
}

/* 左の折り返し部分 */
.h3_typetxt h3:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #c1272d;
}

/* 右の折り返し部分 */
.h3_typetxt h3:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #c1272d;
}





/*h4見出し装飾*/
 #outer h4{
	width:45%;
	--baloon-color:#42210b;
	position: relative;
	border-bottom: 5px solid var(--baloon-color);
	padding:0.85em 0;
	font-size:1.3em;
	font-weight: bold;
	color:#42210b;/*文字色（茶）*/
	margin: 40px 0 40px 26px;
    border-radius: 4px; /* 背景の角を丸くする */
}
#outer h4:before, h4:after {
	position: absolute;
	content: '';
	left: 1em;
	width: 0;
	height: 0;
	border-width: 14px 12px 0;
	border-style: solid;
}
h4:before {	
	bottom: -14px;    
	border-color:var(--baloon-color) transparent transparent;
}
h4:after {
	bottom: -10px;
	border-color: #ffaabb transparent transparent;
}

/*h4テキスト*/
h4 {
	text-shadow: 1px 1px 0px #fff;/* 右下に影 */
}


/*各シリーズごと、商品並べる*/
#outer .contents_01{
	background-color:#ffaabb;
    display: flex;
    justify-content: flex-start;
    background-image: url("/img/freepage/feature_desertcup/sakuranbo.png");
    background-size:34px auto;
    background-repeat: repeat-x;
    background-position: center bottom;
	padding-bottom: 15px; 
}
#outer .contents_01 .item_con,.contents_01 .item_con2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;/*※76-150/86-200のアイスカップ紙蓋が公開されたらspace-betweenにかえる(公開前はspace-evenlyにする)*/
    width: 70%;
    padding: 20px 0 50px 20px;
}

#outer .contents_01 .item_con3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 45%;
    padding: 10px 0 60px 10px;
}

#outer .contents_01 .item_con4{
	width: 42%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px 0 60px 30px;
	gap:30px
}

#outer .contents_01 .item_con6{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 70%;
    padding: 20px 0 50px 20px;
}

#outer .item_con .item_01,.item_con .item_02{
	width: 23%;
	padding: 3px;
	border: solid 1px #cccccc;
	text-align: center;
	background-color:#ffefef;
    margin-bottom: 10px;
	border-radius: 4px;
}

#outer .item_con2 .item_01,.item_con2 .item_02{
	width: 30%;
	padding: 3px;
	border: solid 1px #cccccc;
	text-align: center;
	background-color:#ffefef;
    margin-bottom: 10px;
	border-radius: 4px;
}
#outer .item_con6 .item_01,.item_con6 .item_02{
	width: 30%;
	padding: 3px;
	border: solid 1px #cccccc;
	text-align: center;
	background-color:#ffefef;
    margin-bottom: 10px;
	border-radius: 4px;
}
#outer .item_con3 .item_01,.item_con3 .item_02{
	width: 40%;
	padding: 3px;
	border: solid 1px #cccccc;
	text-align: center;
	background-color:#ffefef;
    margin-bottom: 70px;
	border-radius: 4px;
}
#outer .item_con4 .item_01,.item_con4 .item_02{
	width: 45%;
	padding: 3px;
	border: solid 1px #cccccc;
	text-align: center;
	background-color:#ffefef;
    margin-bottom: 10px;
	border-radius: 4px;
}



/*各シリーズごと、本体+対応蓋組合わせ画像*/
.contents_01 .item_03{
	width: 35%;
	text-align: center;
    margin: 13px 15px 34px 50px;
    position: relative; /* 装飾要素の基準を設定 */
} 
.item_03 img {
	border-radius:6px;
}
.item_03::before {
    content: ""; /* 装飾用の空の要素 */
    position: absolute; /* 絶対位置を指定 */
    left: 33%; /* 中央揃え */
    /*transform: translateX(-50%);  中央揃えの調整 */
    width: 155px; /* 装飾の幅 */
    height: 30px; /* 装飾の高さ */
    background-color: #FFE4E4; /* 背景色 */
    box-shadow: 0 0 0 7px #FFE4E4; /* 外枠のシャドウ */
    border-top: 2px dashed #fff; /* 上部の点線 */
    border-bottom: 2px dashed #fff; /* 下部の点線 */
    z-index: 1; /* 画像の手前に配置 */
	transform: translateY(-25px); 
	border-radius: 1px;
}


/*本体アイコン・共通スタイル */
.item_01 {
    position: relative; /* 親要素を基準に配置 */
}

.item_01::before {
    content: "本体"; /* テキストを設定 */
    position: absolute; /* 絶対配置 */
    top: 10px; /* 上端からの距離 */
    left: 10px; /* 左端からの距離 */
    background-color: #c2ffff; /* 背景色 */
    color: #42210b; /* 文字色 */
    font-weight: bold; /* 太字 */
    font-size: 15px; /* フォントサイズ */
    padding: 5px 10px; /* 内側の余白 */
    border-radius: 5px; /* 角丸 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影の追加 */
    z-index: 10; /* アイコンを手前に表示 */
}
/*対応蓋アイコン・共通スタイル*/
.item_02 {
    position: relative; /* 親要素を基準に配置 */
}

.item_02::before {
    content: "対応蓋"; /* テキストを設定 */
    position: absolute; /* 絶対配置 */
    top: 10px; /* 上端からの距離 */
    left: 10px; /* 左端からの距離 */
    background-color: #fefcd3; /* 背景色 */
    color: #42210b; /* 文字色 */
    font-weight: bold; /* 太字 */
    font-size: 15px; /* フォントサイズ */
    padding: 5px 10px; /* 内側の余白 */
    border-radius: 5px; /* 角丸 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影の追加 */
    z-index: 10; /* アイコンを手前に表示 */
}

.item_img_01,.item_img_02{
   margin: 10px;
    width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* 縦横比を維持 */
    max-width: 150px; /* 必要に応じて最大幅を設定（例: 150px） */
    max-height: 150px; /* 必要に応じて最大高さを設定（例: 150px） */
    object-fit: contain; /* 画像が親要素内に収まるよう調整 */
	display: inline-block;
}

.item_img_01 img,.item_img_02 img {
    filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5)); /* 影の設定 */
    width: 100%;
	margin-top: 10px;
}
.item_txt_01 p,.item_txt_02 p {
    max-width: 90%; /* 画像の幅に合わせる */
    margin: 20px auto; /* 水平中央に配置 */
    text-align: center; /* テキストを中央揃え */
	
}



/*商品はこちらボタン(本体)*/
#outer .contents_01 .item_01 .item_txt_01 ul.btns {
    margin: 5px;
}

#outer .contents_01 .item_01 .item_txt_01 ul.btns a{
	background: #ccffff;
    position: relative;
    display: flex;
    border-radius:6px;
    justify-content: space-around;
    align-items: center;
    margin: 10px auto;
    max-width: 200px;
    padding: 10px;
    color: #42210b;
    transition: 0.3s ease-in-out;
    font-weight: bold;
    text-decoration: none;
    z-index:0;
}

#outer .contents_01 .item_01 .item_txt_01 ul.btns a:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #ccffff;
    transition: .3s;
    left:0;
}
#outer .contents_01 .item_01 .item_txt_01 ul.btns a:hover{
	opacity: 0.7;
}
/*#outer .contents_01 .item_01 .item_txt_01 ul.btns a:hover:before{
    width: 100%;
    z-index: -1;
}商品はこちらボタンおわり(本体)*/

/*商品はこちらボタン(対応蓋)*/
#outer .contents_01 .item_02 .item_txt_02 ul.btns {
    margin: 5px;
}

#outer .contents_01 .item_02 .item_txt_02 ul.btns a{
	background: #fefcd3;
    position: relative;
    display: flex;
    border-radius:6px;
    justify-content: space-around;
    align-items: center;
    margin: 10px auto;
    max-width: 200px;
    padding: 10px;
    color: #42210b;
    transition: 0.3s ease-in-out;
    font-weight: bold;
    text-decoration: none;
    z-index:0;
}
#outer .contents_01 .item_02 .item_txt_02 ul.btns a:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #fefcd3;
    transition: .3s;
    left:0;
}
#outer .contents_01 .item_02 .item_txt_02 ul.btns a:hover{
	opacity: 0.7;
}
/*#outer .contents_01 .item_02 .item_txt_02 ul.btns a:hover:before{
    width: 100%;
    z-index: -1;
}商品はこちらボタンおわり(対応蓋)*/


/*容量から選ぶの<p＞説明文*/
#desertcup-p1{
	width: 100%;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	color: #42210b;
}
#desertcup-p2{
	width: 100%;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	color: #42210b;
}
#desertcup-p3{
	width: 100%;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	color: #42210b;
}
#desertcup-p4{
	width: 100%;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	color: #42210b;
}
#desertcup-p5{
	width: 100%;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	color: #42210b;

}


/*容量から選ぶの表*/
#outer table.tb01{
	border-collapse: collapse;
	width: 75%;
	table-layout: fixed;
	margin-bottom: 75px;
	margin: 20px auto 35px;
}

#outer .tb01 tr.tr_head{
	background: #f46091;
	color: #fff;
}

#outer tr{
	background-color: #fff;
}



#outer .tb01 tr.tr_head th{
	font-weight: bold;
	font-size: 1.5em;
	padding: 10px;
}
#outer .tb01 tr.tr_head .th_norm{
	width:30px;

}
#outer .tb01 tr.tr_head .td_haba{
	width:80px;

}

#outer .tb01 th{
	padding: 10px;
	border: solid 1px #ccc;
	text-align: center;
	box-sizing: border-box;
}
#outer .tb01 td{
	padding: 10px;
	border: solid 1px #ccc;
	text-align: center;
	font-size: 1.3em;
	line-height: 1.2;
	font-weight: bold;
}
#outer .tb01 td a{
	color: #42210b;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration:none;
}
#outer .tb01 td.link {
	background-color: #fff;
}
#outer .tb01 td.link:hover{
	background-color: #FFE4E4;
}
#outer .tb01 tr.tr_2{
	background-color: #FFFFFF;
}/*
#outer .tb01 td.td_2{
	background-color: #FFFCE6;
}*/




/*関連記事のところ*/
.column{
	width: 100%;
	margin-bottom: 45px;
}
.column h3{
	font-size: 1.3em;
	font-weight: bold;
	margin: 35px 0 15px;
	color: #42210b;
}
.column h3::before{
	content: "┃";
	color: #42210b;
}
.contents_02{
	display: flex;
	flex-wrap: wrap;
/*	justify-content: space-between;*/
	margin: 0 auto;
}
.contents_02 .item_{
	width: 32%;
	box-sizing: border-box;
/*	border: solid 1px #cccccc;*/
	display: flex;
	flex-direction: column;
}
.contents_02::after{
	content: "";
	display: block;
	width: 32%;
	height: 0;
}

.contents_02 .item_ ul.btns_{
	margin-top: auto;
	margin-bottom: 12px;
	padding: 0 10px;
}
.contents_02 .item_ ul.btns_ li.btn_gazou_{
	position: relative;
}
.item_ .btn_gazou_ a{
	display: block;
	position: relative;
	padding: 10px;
	color: #42210b;
	background-color: #ffaabb;
	font-weight: bold;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	font-size: 1.1em;
}

.column ul.tokusyu{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	list-style: none;
	margin: 0 auto;
}
.column ul.tokusyu li{
	width: 23%;
	margin-bottom: 10px;
}
.column ul.tokusyu li img{
	width: 100%;
	height: auto;
}
.column ul.tokusyu::before{
	content: "";
	display: block;
	width: 23%;
	order: 1;
}
.column ul.tokusyu::after{
	content: "";
	display: block;
	width: 23%;
}
.btn_gazou_:hover,.tokusyu li:hover{
	opacity: 0.7;
}

/*スマホの設定*/
@media screen and (max-width: 768px) {
	#outer{
		width: 100%;
	}
	
	/*スマホ見出し*/
	#outer .top_parts{
		flex-direction: column-reverse;
	}
	#outer .top_parts .top_txt{
		width: 100%;
		padding: 15px;
	}
	#outer .top_parts .top_txt h1{
		font-size: 1.2em;
		padding: 5px 5px 0 5px;
	}
	#outer .top_parts .top_txt p{
		font-size: 1em;
		padding: 5px;
	}
	#outer .top_parts .top_img{
		width: 100%;
	}
	#outer .top_parts .top_img img{
		width: 100%;
	}
	
/*スマホメニューバー文字サイズ調整*/
	#outer .jump{
	width:97%;		
	}
	
#outer .jump ul._genre_menu{
	width:103%;
	display: flex;
	justify-content: center;
	margin:0;
	box-sizing: border-box;
	list-style: none;
	color:#42210b;
	background-color: #ffaabb;
}
	
	#outer .jump ul._genre_menu li.global_item a{
		font-size:1.2em;
		display: block;
		/*padding: 15px;*/
		font-weight:bold;
		text-decoration: none;
		box-sizing: border-box;
		text-align:center;
		color:#42210b;
		line-height: 3em;
	}
	li.global_item:hover{
	background-color: #FFE4E4;
}
	/*スマホh2幅調整*/
	#outer h2.uline_b{
		width: 82%;
		transform: translateX(1px);
		margin: 45px auto;
	}
	
	/*スマホカテゴリボタン設定*/
	#outer .category_btn{
		width: 98%;
		font-size: 1.1em;
		margin: 40px auto 40px;
	}
	#outer .category_btn a{
		padding: 10px;
	}
	
/*ページジャンプ*/
#outer .adjustment {
    padding-top: 90px;
	margin-top: -90px;
	display: block;
}	
	
/*スマホタブのところ*/
/*スマホタブ切り替え全体のスタイル*/
	#outer .tabs {
	color: #42210b;
	margin-top: 50px;
	background-color: #fff;
	width: 100%;
}
/*スマホタブのスタイル*/
#outer .tab_item {
	width: calc(98%/2);
	display: block;
	justify-content: center;
	align-items: center;
	margin: 0;
	/*height: 50px;
	*/
	border: solid 2px #ffffff;
	box-sizing: border-box;
	background-color: #FFE4E4;
	line-height: 1.1em;
	font-size: 12px;
	text-align: center;
	float: left;
	font-weight: bold;
	transition: all 0.2s ease;
	padding: 1.5em;
	transform:translateX(4px);
	border-radius: 3px 3px 0 0;
    }
 #outer .tab_item:first-of-type {
        border-left-style: none;
    }
 #outer .tab_item:hover {
        opacity: 0.7;
    }
/* スマホタブクリック時画像のスタイル（初期状態では非表示*/
 #outer .tab_item:after{
    content: "";
    display: none; /* 初期状態では非表示 */
    background-size: contain; /* 画像サイズを調整 */
    background-repeat: no-repeat;
    width: 25px; /* 画像の幅 */
    height: 25px; /* 画像の高さ */
    position: absolute; /* テキストの右側に固定配置 */
    top: 45%; /* タブ内の縦中央に配置 */
    transform: translateY(-50%);
}

/* スマホの画像パス */
	input#tab1:checked + .tab_item::after,input#tab2:checked + .tab_item::after, input#tab3:checked + .tab_item::after,input#tab4:checked + .tab_item::after ,input#tab5:checked + .tab_item::after {
    display: inline-block;
    background-image: url("/img/freepage/feature_desertcup/sakuranbo_tagicon.png"); 
}

/*スマホh3見出し装飾濃い#c1272d-#ef4878-#f46091*/
/* スマホリボン全体の設定 */
/* スマホh3_typetxt全体を中央配置 */
.h3_typetxt {
  display: flex; /* フレックスボックスで中央配置 */
  justify-content: center;
  align-items: center;
  position: relative;
  height: 45px;
  text-align: center;
  box-sizing: border-box;
  width: 250px; /* リボン全体の幅を固定 */
  margin: 0 auto; /* 親要素の中央に配置 */
}

/* スマホ左側のリボン端 */
.h3_typetxt:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 0px;
  bottom: -10px;
  left: -35px;
  z-index: 0;
  border: 20px solid #f46091;
  border-left-color: transparent; /* 山形に切り抜き */
}

/* スマホ右側のリボン端 */
.h3_typetxt:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 0;
  bottom: -10px;
  right: -35px;
  z-index: 0;
  border: 20px solid #f46091;
  border-right-color: transparent; /* 山形に切り抜き */
}

/* スマホ真ん中のリボン部分 */
.h3_typetxt h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px; /* 文字の左右余白 */
  line-height: 45px;
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  background: #ef4878; /* 真ん中の背景色 */
  z-index: 1;
  width: 250px; /* リボンの中央部分の幅を固定 */
  text-align: center;
}

/* スマホ左の折り返し部分 */
.h3_typetxt h3:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #c1272d;
}

/* スマホ右の折り返し部分 */
.h3_typetxt h3:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #c1272d;
}


    /*スマホh4見出し装飾(残りはデスクトップ版と同じ設定*/
    #outer h4{
        width:95%;
        padding:0.5em 0;
        font-size:1.1em;
        margin:25px 15px 15px 10px;
    }

    /*スマホ各シリーズごと商品並べる*/	
    #outer .item_con .item_01,.item_con .item_02{
        width: 46%;
    }

    #outer .item_con2 .item_01,.item_con2 .item_02{
        width: 46%;
    }

	
    #outer .item_con3 .item_01,.item_con3 .item_02{
        width: 47%;
}

	
	#outer .item_con4 .item_01,.item_con4 .item_02{
        width: 47%;
		
}	

	
    /*スマホ各シリーズごと、商品並べる*/
    #outer .contents_01{
        display: block;
        padding: 10px;
        background: url("/img/freepage/feature_desertcup/sakuranbo.png");
		background-size:20px auto;
		background-repeat: repeat-x;
		background-position: center bottom;
}
    #outer .contents_01 .item_con,.contents_01 .item_con2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: auto;
        padding: 0;
}
    #outer .contents_01 .item_con3{
        display: flex;
        flex-wrap: wrap;
        /*justify-content: space-between;*/
        width: auto;
        padding: 0;
}
    #outer .contents_01 .item_con4 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: auto;
        padding: 0;
		gap:0;
}

	#outer .contents_01 .item_con6{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}

	#outer .item_con6 .item_01, .item_con6 .item_02 {
    width: 47%;
}
	
	/*本体・対応蓋アイコン*/
	.item_01::before {
    content: "本体"; /* テキストを設定 */
    position: absolute; /* 絶対配置 */
    top: 5px; /* 上端からの距離 */
    left: 5px; /* 左端からの距離 */
    background-color: #c2ffff; /* 背景色 */
    color: #42210b; /* 文字色 */
    font-weight: bold; /* 太字 */
    font-size: 15px; /* フォントサイズ */
    padding: 5px 10px; /* 内側の余白 */
    border-radius: 5px; /* 角丸 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影の追加 */
}
	.item_02::before {
    content: "対応蓋"; /* テキストを設定 */
    position: absolute; /* 絶対配置 */
    top: 5px; /* 上端からの距離 */
    left: 5px; /* 左端からの距離 */
    background-color: #fefcd3; /* 背景色 */
    color: #42210b; /* 文字色 */
    font-weight: bold; /* 太字 */
    font-size: 15px; /* フォントサイズ */
    padding: 5px 10px; /* 内側の余白 */
    border-radius: 5px; /* 角丸 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影の追加 */
}

/*スマホ各シリーズごと、本体+対応蓋組合わせ画像*/
.contents_01 .item_03{
	width: 90%;
	text-align: center;
    margin: 30px auto 30px;
	
}
/*スマホ本体+対応蓋組合わせ画像装飾*/
.item_03::before {
    content: ""; /* 装飾用の空の要素 */
    position: absolute; /* 絶対位置を指定 */
    left: 50%; /* 中央揃え */
    /*transform: translateX(-50%);  中央揃えの調整 */
    width: 155px; /* 装飾の幅 */
    height: 20px; /* 装飾の高さ */
    background-color: #FFE4E4; /* 背景色 */
    box-shadow: 0 0 0 7px #FFE4E4; /* 外枠のシャドウ */
    border-top: 2px dashed #fff; /* 上部の点線 */
    border-bottom: 2px dashed #fff; /* 下部の点線 */
    z-index: 1; /* 画像の手前に配置 */
	transform: translate(-50%, -22px);
}
	
/*スマホ容量から選ぶの<p＞説明文*/
#desertcup-p1{
	width: 90%;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color: #42210b;
	margin: 22px;
	}
#desertcup-p2{
	width: 90%;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color: #42210b;
	margin: 22px;
	}
#desertcup-p3{
	width: 90%;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color: #42210b;
	margin: 22px;
	}	
#desertcup-p4{
	width: 90%;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color: #42210b;
	margin: 22px;
	}
#desertcup-p5{
	width: 90%;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color: #42210b;
	margin: 22px;
	}

/*スマホ容量から選ぶの表*/
#outer table.tb01{
	border-collapse: collapse;
	width: 90%;
	table-layout: fixed;
	margin-bottom: 75px;
	margin: 20px auto 35px;
	font-size: 10px;
	}	
/*スマホ表・ホバー*/
#outer .tb01 td.link:hover{
	background-color: #FFE4E4;
}	
	
	/*スマホ関連記事のとこ*/
	.column{
		width: 100%;
	}
	.column h3{
		padding: 5px;
		font-size: 1.3em;
		margin: 0;
	}
	.column h3::before{
		content: "┃"
	}
	.contents_02{
		padding: 0 10px;
	}
	.contents_02 .item_{
		width: 100%;
		margin: 5px auto;
		padding: 0;
	}
	.contents_02::after{
		content: none;
	}
	.contents_02 .item_ ul.btns_{
		font-size: 0.8em;
		width: 100%;
		margin-bottom: 0;
		padding: 0;
	}
	.contents_02 .item_ ul.btns_ li.btn_gazou_{
		position: relative;
	}
	
	.column ul.tokusyu{
		width: 96%;
		margin: 0 auto;
		padding: 0;
		float: none;
	}
	.column ul.tokusyu li{
		width: 49%;
	}
		
}