@charset "UTF-8";
/* CSS Document */

html {scroll-behavior: smooth;}

body {
	background-color: #FFFFFF;
}

img{vertical-align: middle;}

a {
	text-decoration: none;
}

a:hover img{
	opacity: 0.85;
	filter: alpha(opacity=85);
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

header{
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

main{
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	background-color: #ffffff;
	color: #262626;
}

.category_anchor ol{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.category_anchor li{
	width: 47%;
	margin: 3% 1.5% 0 1.5%;
}

.category_anchor img:hover {
  	transform: scale(0.9,0.9);
}

.online_shopping_information{
	margin: 5% 2% 0%;
	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	font-size: 120%;
	text-align: center;
}

.online_shopping_information p{
	line-height: 1.6;
}

.online_shopping_information img{
	width: 5%;
	margin-top: -1%;
}

.online_shopping_information dt{
	margin-top: 3%;
	line-height: 1.6;
}

.online_shopping_information dd{
	line-height: 1.6;
}

.online_shopping_information dd span{
	margin-right: 0.3em;
}

.mothersday_event img{
	width: 80%;
	margin: 10% 10% 0;
}

.mothersday_event img:hover {
  	transform: scale(0.9,0.9);
}

.tobupo{
	margin-top: 10%;
}

.tobupo img{
	width: 100%;
}

#category1 h2{
	margin: 10% 0 5% 0;
	position: relative;
  	padding: 1.65rem 0rem;
  	background-color: #ea6e9b;
    background-image: 
     linear-gradient(140deg, transparent 5%, #eac3cd 5%, #eac3cd 10%, transparent 10%), 
     linear-gradient(-40deg, transparent 5%, #eac3cd 5%, #eac3cd 10%, transparent 10%); 
	font-size: 180%;
	text-align: center;
	font-family: "Zen Maru Gothic", serif;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1.4;
	color: #ffffff;
}

.subcategory_anchor{
	width: 90%;
	margin: 0 5% 0 5%;
	display: flex;
	flex-wrap: wrap;
}

.subcategory_anchor li{
	margin: 0 2% 0 2%;
	font-size: 140%;
	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	line-height: 1.6;
}

.subcategory_anchor li:hover {
  	transform: scale(0.9,0.9);
	color: #FF3D79;
}

.subcategory_anchor span{
	font-size: 80%;
	margin-right: 0.2em;
} 

#category1 h3{
	margin: 7% 0 -5% 0;
	font-size: 160%;
	text-align: center;
	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 500;
  	font-style: normal;
}

.box{
	width: 100%;
	margin-top: 10%;
}

#category1 .store_information{
	display: flex;
	flex-wrap: wrap;
	margin-top: 5%;
	background-image : url("../img/category_background_1.jpg" );
}


.store_information dt{
	padding: 1% 1% 1% 2%;
	font-family: "Shippori Mincho", serif;
  	font-weight: 700;
  	font-style: normal;
	font-size: 150%;
	line-height: 1.8;
}

.store_information dd{
	padding: 2% 1% 1% 5%;
	font-family: "Shippori Mincho", serif;
	font-weight: 500;
	font-style: normal;
	font-size: 120%;
	line-height: 1.8;
}

.store_information dd span{
	font-size: 80%;
	margin-right: 0.2em;
}

.period{
	width: 90%;
	margin: 2% 5% 3% 5%;
	font-family: "Shippori Mincho", serif;
  	font-weight: 700;
  	font-style: normal;
	font-size: 120%;
	line-height: 1.8;
}

.reservation{
	color: #e60012;
}

.sales{
	color: #1d2088;
}

.item_introduction{
	display: flex;
	flex-direction: row;
}

.item_introduction .product_image {
  order: 1;
}

.item_introduction .product_description {
  order: 2;
}

.box:nth-of-type(even) .item_introduction {
  flex-direction: row-reverse !important;
}

.product_image{
	width: 50%;
}

.product_description{
	width: 47%;
	margin: 0 1.5% 0 1.5%;
}

.flex{
	display: flex;
	gap: 10%;
}

.icon_net{
	width: 15%;
	margin-top: 3%;
}

.toubugentei{
	width: 50%;
	margin-top: 3%;
}

.limited-menu{
	width: 75%;
	margin-top: 3%;
}

.toubu-online{
	width: 64%;
	margin-top: 3%;
}

.product_name{
	margin-top: 5%;
	font-family: "Shippori Mincho", serif;
  	font-weight: 600;
  	font-style: normal;
	font-size: 120%;
	line-height: 1.4;
}

.product_name span{
	font-size: 80%;
}

.price{
	margin-top: 5%;
	font-family: "Shippori Mincho", serif;
  	font-weight: 600;
  	font-style: normal;
	font-size: 130%;
}

.price span{
	margin-left: 0.2em;
	font-size: 80%;
}

.note{
	margin: 3% 2% 0 0;
	text-indent: -1em;
  	padding-left: 1em;
	font-family: "Shippori Mincho", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 90%;
	text-align: justify;
	color: #5E728C;
	line-height: 1.4;
}

.item_copy{
	margin-top: 5%;
	font-family: "Shippori Mincho", serif;
  	font-weight: 400;
  	font-style: normal;
	line-height: 1.4;
	text-align: justify;
}

.circle_2 {
    display: inline-block;
    width: 30px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 20px;
	border: solid 0.7px #1d2088;
    font-size: 11px;
    margin: 0 2px;
    vertical-align: middle; /* 縦位置の基準を調整 */
    position: relative;
    top: -2px; /* 2px 上に移動してバランス調整 */
	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 700;
  	font-style: normal;
}

#category2 h2{
	margin: 10% 0 5% 0;
  	position: relative;
  	padding: 1.65rem 0rem;
  	background-color: #f49d3d;
    background-image: 
     linear-gradient(140deg, transparent 5%, #ffcc66 5%, #ffcc66 10%, transparent 10%), 
     linear-gradient(-40deg, transparent 5%, #ffcc66 5%, #ffcc66 10%, transparent 10%); 
	font-size: 180%;
	text-align: center;
	font-family: "Zen Maru Gothic", serif;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1.4;
	color: #ffffff;
}


#category3 h2{
	margin: 10% 0 5% 0;
	position: relative;
  	padding: 1.65rem 0rem;
  	background-color: #6ab34e;
    background-image: 
     linear-gradient(140deg, transparent 5%, #aace8d 5%, #aace8d 10%, transparent 10%), 
     linear-gradient(-40deg, transparent 5%, #aace8d 5%, #aace8d 10%, transparent 10%);
	font-size: 180%;
	text-align: center;
	font-family: "Zen Maru Gothic", serif;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1.4;
	color: #ffffff;
}

#category4 h2{
	margin: 10% 0 5% 0;
	position: relative;
  	padding: 1.65rem 0rem;
  	background-color: #6b64a0;
    background-image: 
     linear-gradient(140deg, transparent 5%, #b592be 5%, #b592be 10%, transparent 10%), 
     linear-gradient(-40deg, transparent 5%, #b592be 5%, #b592be 10%, transparent 10%); 
	font-size: 180%;
	text-align: center;
	font-family: "Zen Maru Gothic", serif;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1.4;
	color: #ffffff;
}

#category2 h3{
	margin: 7% 0 -5% 0;
	font-size: 160%;
	text-align: center;
	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 500;
  	font-style: normal;
}

#category3 h3{
	margin: 7% 0 -5% 0;
	font-size: 160%;
	text-align: center;
	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 500;
  	font-style: normal;
}

#category4 h3{
	margin: 7% 0 -5% 0;
	font-size: 160%;
	text-align: center;
	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 500;
  	font-style: normal;
}

#category2 .store_information{
	display: flex;
	flex-wrap: wrap;
	margin-top: 5%;
	background-image : url("../img/category_background_2.jpg" );
}

#category3 .store_information{
	display: flex;
	flex-wrap: wrap;
	margin-top: 5%;
	background-image : url("../img/category_background_3.jpg" );
}

#category4 .store_information{
	display: flex;
	flex-wrap: wrap;
	margin-top: 5%;
	background-image : url("../img/category_background_4.jpg" );
}

#category3 h4{
	width: 100%;
	margin: 5% 0 -5% 0;
}

.pouch_popup{
	width: 90%;
	margin: 10% 5% -5% 5%;
	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	text-align: center;
}

.pouch_category img{
	width: 100%;
	margin: 10% 0 -6% 0;
}

.color_magenta{
	color: #EC008C;
}

.color_orange{
	color: #D93D04;
}

.mgt5{
	margin-top: 5%!important;
}

.Red{
	color: #e60012;
}

sup{
	font-size: 70%;
}


.hr1 {
  	position: relative;
	width: 80%;
	margin: 5% 10% 0;
	height: 3px;
	border-width: 0;
	background-color: #00bcd4;
	background-image: -webkit-linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%);
	background-image: linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%);
}

.hr_pouch {
	margin-top: 5%;
  	height: 18px;
 	border-width: 0;
  	background-repeat: repeat-x;
  	background-size: 0.7em 1.8em,1.7em 1.8em,3.5em 1.8em,3.7em 1.8em;
  	background-position: right bottom;
  	background-image:
  	radial-gradient(0.3em 1.2em at center center,#94c79e,rgba(246,89,115,0)),
  	radial-gradient(0.5em 1.2em at center center,#94c79e,rgba(246,89,115,0)),
  	radial-gradient(0.8em 1.2em at center center,#94c79e,rgba(246,89,115,0)),
  	radial-gradient(7.2em 1.2em at center center,#94c79e,rgba(246,89,115,0));
}


footer{
	width: 100%;
	margin-top: 5%;
	padding-bottom: 3%;
	border-bottom: #06027D solid 5px;
}

footer ul{
	width: 94%;
	margin: 6% 3% 0 3%;
}

footer ul li{
	margin-top: 2%;
	padding-left: 1em;
	text-indent: -1em;
	font-family: "M PLUS 1p", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 90%;
	line-height: 1.4;
}

footer .logo{
	width: 25%;
	margin: 5% auto 0;
}

a {
  text-decoration: none;
}

br.sp{
	display: block;
}

br.pc{
	display: none;
}

.sp_none{
	display: none;
}
	
.pc_none{
	display: inline;
}


/*---オンラインボタン用---*/
button{
	text-align: center;
}

.online-button {
	background-color: #cc3366; 
  	color: white;
  	border: none; 
  	padding: 5px 8px 6px; 
  	text-align: center;
  	text-decoration: none;
  	display: block;
  	font-size: 13px;
  	margin: 5% auto 0;
  	cursor: pointer; 
	border-radius: 10px; 
	letter-spacing: -1px;
	font-family: 'Shippori Mincho', serif;
	font-weight: 600;
}
.online-button:hover {
  background-color: #333399; 
}


/*---東武百貨店へ戻る用ボタン---*/
.return_button{
	background-color: #bdd7e9;
	color: #222224;
  	border: none;
  	padding: 7px 5px 7px 15px;
  	text-align: center; 
  	text-decoration: none; 
  	display: block;
  	font-size: 16px;
  	margin: 7% auto; 
  	cursor: pointer; 
	border-radius: 15px; 
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}

.return_button:hover {
	background-color: #333399; 
	color: white;
}


/*---POPUP---*/
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px 15px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    box-sizing: border-box;
}

.popup h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}

.popup p {
    font-size: 14px;
    line-height: 1.6;
}

.highlight {
    font-weight: 700;
    color: #e60012;
}

.date-number {
    font-size: 16px; 
    font-weight: bold;
}

.circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
	border: solid 1px #262626;
    font-size: 11px;
    margin: 0 2px;
    vertical-align: middle; /* 縦位置の基準を調整 */
    position: relative;
    top: -2px; /* 上に移動してバランス調整 */
}

.box_popup {
    background: #f8f9fa;
    padding: 10px;
    border-left: 5px solid #F76A2B;
    margin: 10px 0;
}

.close {
    cursor: pointer;
    font-size: 18px;
    float: right;
    font-weight: bold;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 480px) {
    .popup {
        width: 95%;
        max-width: 350px;
    }
}
/*---ここまで---*/



@media (min-width: 980px){
	.btn-flat{font-size: 31px}
	
	.category_anchor ol{
		justify-content: space-around;
	}
	
	.category_anchor li{
		width: 24%;
		margin: 3% 0% 0 0%;
	}
	
	.online_shopping_information{
		margin: 5% 2% 0%;
		font-size: 28px;
	}
	
	.mothersday_event img{
		width: 50%;
		margin: 5% 25% 0;
	}
	
	.tobupo{
		margin-top: 5%;
	}

	.tobupo img{
		width: 80%;
		margin: 0 10%;
	}
	
	#category1 h2,
	#category2 h2,
	#category3 h2,
	#category4 h2{
		width: 80%;
		margin: 7% 10% 5% 10%;
		padding: 0.75rem 0rem;
		font-size: 40px;
		
	}
	
	.subcategory_anchor{
		justify-content: center;
	}
	
	.subcategory_anchor li{
		margin: 0 2% 0 2%;
		font-size: 28px;
	}
	
	#category1 h3,
	#category2 h3,
	#category3 h3,
	#category4 h3{
		margin: 5% 0 -2% 0;
		font-size: 38px;
	}

	.box{
		width: 100%;
		margin-top: 5%;
	}

	.store_information dt{
		padding: 1% 1% 1% 2%;
  		font-weight: 800;
		font-size: 34px;
		line-height: 1.8;
	}

	.store_information dd{
		padding: 2% 1% 1% 5%;
		font-weight: 500;
		font-size: 25px;
		line-height: 1.8;
	}

	.store_information dd span{
		font-size: 60%;
	}
	
	.period{
		width: 100%;
		margin: 2% 0% 3% 0%;
		font-size: 26px;
		line-height: 1.8;
		text-align: center;
	}
	
	.icon_net{
		width: 12%;
		margin-top: 3%;
	}

	.toubugentei{
		width: 40%;
		margin-top: 3%;
	}
	
	.limited-menu{
		width: 60%;
		margin-top: 3%;
	}
	
	.toubu-online{
		width: 50%;
		margin-top: 3%;
	}

	.product_name{
		margin-top: 5%;
		font-size: 34px;
	}

	.price{
		margin-top: 5%;
		font-size: 32px;
	}

	.note{
		margin: 3% 2% 0 0;
		text-indent: -1em;
  		padding-left: 1em;
		font-size: 24px;
	}

	.item_copy{
		margin-top: 5%;
		font-size: 26px;
		line-height: 1.4;
	}
	
	.circle_2 {
    	display: inline-block;
    	width: 55px;
    	height: 24px;
    	line-height: 24px;
    	text-align: center;
    	border-radius: 20px;
		border: solid 1.1px #1d2088;
    	font-size: 20px;
    	margin: 0 2px;
    	vertical-align: middle; 
    	position: relative;
    	top: -3px;
		font-family: "Shippori Mincho", serif;
  		font-weight: 800;
  		font-style: normal;
	}
	
	#category3 h4{
		width: 80%;
		margin: 3% 10% -2%;
	}
	
	.pouch_popup{
		width: 60%;
		margin: 5% 20% 0% 20%;
	}

	.pouch_category img{
		width: 70%;
		margin: 5% 15% -3%;
	}
	
	footer ul{
		width: 60%;
		margin: 3% 20% 0 20%;
	}
	
	footer ul li{
		margin-top: 1%;
		font-size: 20px;
		line-height: 1.2;
	}
	
	footer p{
		font-size: 24px;
	}
	
	footer .logo{
		width: 18%;
		margin: 3% auto 0;
	}
	
	br.sp{
		display: none;
	}
	
	br.pc{
		display: block;
	}
	
	.sp_none{
		display: inline;
	}
	
	.pc_none{
		display: none;
	}
	
	.more-button {
		font-size: 16px;
	}
	
	.online-button {
		margin: 3% auto 5%; 
		padding: 10px 20px 12px; 
		border-radius: 20px;
		font-size: 26px;
	}
	
	.return_button{
		padding: 16px 7px 14px 20px;
		border-radius: 25px;
		font-size: 30px;
	}
}



/*---スクロール＆ページTOPへ戻る---*/
/*スクロールリンクの形状*/
.scroll-top {
  /*表示位置*/
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  visibility: hidden; 
  transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
  /*縦書き*/
  -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  /*改行禁止*/
    white-space: nowrap;
  /*矢印の動き*/
  animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
  opacity: 1;
  visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
  font-size:0.9rem;
    display: block;
}

/*スクロールリンクの形状*/
.js-scroll a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:#666;
}

.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
  right:-11px;
}

/*ページトップリンクの形状*/
.js-pagetop a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
  right:0;
}