@charset "UTF-8";

/*==================
  母の日特集2024
==================*/

*, *::before, *::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	color: #333;
	font-size: 16px;
	font-weight: 400;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック',sans-serif;
	line-height: 1.7em;
	-webkit-text-size-adjust: 100%;
	height: 100%;
}

a:link, a:visited, a:active {
	color: #333;
	text-decoration: none;
}

a:hover {
	opacity: 0.7;
	transition: 0.3s ease-in-out;
}

img {
	vertical-align: middle;
}

.mothersday {
	width: 100%;
}

.mothersday span.en {
	margin-bottom: 0.5em;
	display: block;
	font-size: 80%;
}

.mothersday .color-red {
	color: rgb(212, 2, 2);
}

.mothersday .mincho,
.mothersday .title {
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-weight: bold;
}

.mothersday .en {
	font-family: 'Cantarell', sans-serif;
	font-weight: 700;
	letter-spacing: 2px;
}

.mothersday .bold {
	font-weight: bold;
}

.mothersday .underline {
	text-decoration: underline;
}


/* header */
.header-wrapper {
	width: 100%;
	margin: 0 auto;
}

.mothersday .logo {
    width: 300px;
    margin: 0 auto;
    padding: 15px;
	display: block;
}
/*--------------
.mothersday .mainvisual {
	background: url(../../../event/mothersday/img/mainvisual-bg.jpg) no-repeat;
	background-size: 100%;
}
--------------*/
.mothersday .mainvisual .sp {
	display: none;
}

.mothersday .mainvisual img {
	display: block;
	max-width:1000px;
	width: 100%;
	height: auto;
	margin: 0 auto;
}


/* information */
.mothersday .information {
	width: 100%;
	background-color: #fff;
}

.mothersday .information .info-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 20px 0 0;
	font-size: 16px;
	font-weight: bold;
}

.mothersday .information .special {
	padding: 10px 20px;
	background-color: #bc125b;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #fff;
}

.mothersday .information .special .title-text {
	max-width: 11em;
	margin-right: 2em;
	padding: 1.2em;
	font-size: 18px;
	border: 1px solid #fff;
	letter-spacing: 2px;
	text-align: center;
	font-weight: normal;
}

.mothersday .information .sub-text {
	display: block;
	margin-top: 0.5em;
	padding-left: 1em;
	text-indent: -1em;
	font-size: 14px;
	line-height: 1.3;
	font-weight: normal;
}

.mothersday .information .special p.sub-text:nth-child(n + 3) {
	margin-top: 0;
}

.mothersday .information ul {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.mothersday .information li {
	width: 45%;
	margin: 20px;
	padding: 15px;
	background: #d5edf5;
}

.mothersday .information li p.title-text {
	padding-bottom: 10px;
	border-bottom: 2px solid #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2px;
}

.mothersday .information li p.main-text {
	padding-top: 10px;
}

.mothersday .information li .shop {
	color: #fff;
	background: #333;
	padding: 1px 10px;
	font-weight: normal;
}


/* category */
.mothersday .category {
	padding-bottom: 80px;
}

.mothersday .category-title {
	width: 100%;
	margin: 0 auto;
	padding: 50px 0 40px;
	text-align: center;
}

.mothersday .caption {
	display: inline-block;
	padding: 0 10px 10px;
	font-size: 25px;
	border-bottom: 1px solid #333;
}

.mothersday .category h2 {
	padding-top: 15px;
	font-size: 30px;
	text-align: center;
}

.mothersday .category-list {
	max-width: 1080px;
	margin: 0 auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	justify-content: center;
}

.mothersday .category-list li {
	width: 25%;
	padding: 15px;
	margin: 10px;
	border-radius: 10px;
	position: relative;
	background-color: #fdedf1;
	/* background-color: #fbdac8; */
	/* background-color: #ffd3e5; */
	/* bbackground-color: #ffc8d8; */
	text-align: center;
}

.mothersday .category-list li::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 5px;
    left: calc(50% - 20px);
	width: 40px;
	height: 40px;
	background: url(../../../event/mothersday/img/icon-arrow.png) no-repeat;
	background-size: 40px 40px;
}

.mothersday .category h3 {
	margin-bottom: 30px;
	font-weight: bold;
	font-size: 19px;
	line-height: 1.2;
}

.mothersday .category h3 span.en {
	font-size: 18px;
}


/* product */

/* 背景画像 */
.mothersday .product {
	position: relative;
}
.mothersday .product::after {
	content: "";
	width: 100vw;
	height: 100vh;
	background-image: url(../../../event/mothersday/img/product-bg.jpg);
	background-size: cover;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -1;
}
.header-wrapper, .information, .category {
	background-color: #fff;
}


.mothersday .product {
	padding: 50px;
}

.mothersday .section-wrapper {
	max-width: 1080px;
	margin: 50px auto;
	padding: 80px 0 30px;
	text-align: center;
	/*--background: #ffd3e5;--*/
	/*--background: #fdf7f3;--*/
	background:#fdedf1;
  border-radius: 20px;
}

.mothersday .product-title {
	min-width: 400px;
	position: relative;
	display: inline-block;
}

.mothersday .product-title img.icon {
    position: absolute;
    top: -50px;
    left: 0;
    z-index: 1;
}

.preserved .product-title img.icon {
	width: 110px;
	height: 110px;
}

.mothersday .product h2 {
	margin-bottom: 70px;
	padding: 20px;
	font-size: 27px;
	font-weight: bold;
	position: relative;
}

.mothersday .product h2::before {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 7px;
	box-sizing: border-box;
	border-bottom: 3px solid black;
	border-top: 1px solid black;
}

.mothersday .product h2::after {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	box-sizing: border-box;
	border-top: 3px solid black;
	border-bottom: 1px solid black;
}

.mothersday .product-inner {
	margin: 0 5%;
}

.mothersday .product-list {
	max-width: 1000px;
	margin-bottom: 50px;
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.mothersday .product-list-inner {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}

.mothersday .product-list-inner.reverse {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.mothersday .product h3.item-name {
	padding: 40px 20px 40px;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 27px;
	font-weight: bold;
	/*--color: #e24e82;--*/
	color: #bc125b;
}

.mothersday .product-list .main-img {
	width: 45%;
}

.mothersday .product-list .main-img img {
	max-width: 400px;
	width: 100%;
	height: auto;
	border: 1px solid #ccc;
}

.mothersday .product-list .sub-img {
	width: 12%;
	/* display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: flex-start;
	-ms-align-items: flex-start;
	align-items: flex-start;
	flex: 1 0 auto; */
}

.mothersday .product-list .sub-img img {
	/* margin: 0 0 4% 4%; */
	/* height: calc(390px / 3); */
	margin-bottom: 3%;
	max-width: 100%;
	height: auto;
	border: 1px solid #ccc;
}

/* .mothersday .product-list .sub-img img:last-child {
	margin-bottom: 0;
}  */

.mothersday .product .item-info {
	width: 45%;
	padding: 20px;
	background-color: #fff;
	text-align: left;
	position: relative;
}

.mothersday .product .item-info p {
	padding: 20px 0;
}

.mothersday .product .item-info p.color {
	padding-bottom: 0;
}
.mothersday .product .item-info p.size {
	padding: 0;
}
.mothersday .product .item-info p.price {
	padding-bottom: 5px;
}

.mothersday .product .store-mark {
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.8;
}

@media all and (-ms-high-contrast:none){
    *::-ms-backdrop, .mothersday .product .store-mark {
		font-family: Century, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		font-weight: normal;
	}
}

.mothersday .product .store-mark span {
	padding: 0 10px;
	margin-bottom: 1px;
	margin-left: 5px;
	color: #fff;
	border-radius: 3px;
	display: inline-block;
}

.mothersday .product .store-mark .shop {
	background-color: rgb(135, 38, 81);
}

.mothersday .product .store-mark .online {
	background-color: #ad6d89;
}

.mothersday .product .store-mark .delivery {
	background-color: #333;
}

.mothersday .product .item-info .sub-text {
	font-size: 12px;
	display: block;
	line-height: 1.5em;
}

.mothersday .product .color span ,
.mothersday .product .price span {
	font-weight: bold;
}

.mothersday .product-list .price {
	position: absolute;
    right: 5%;
    bottom: 5%;
    border-bottom: 1px solid #ccc;
}

.mothersday .product .price > span {
	font-size: 25px;
	font-weight: bold;
}

.mothersday .product .price span.tax {
	font-size: 18px;
	font-weight: bold;
}

.mothersday .product .price-sub-text {
	font-size: 12px !important;
	font-weight: normal !important;
}


.mothersday .product-list2 {
	margin: 0 5%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	/* -ms-flex-pack: distribute;
	justify-content: space-around; */
}

.mothersday .product-list-inner2 {
	width: 31%;
	margin: 0 1.1% 50px;
	border-radius: 10px;
    overflow: hidden;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.mothersday .product-list-inner2 img {
	width: 100%;
	height: auto;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.mothersday .product-list-inner2 .item-info {
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;
	width: 100%;
	padding: 1em;
	flex: 1 0 auto;
}

.mothersday .product-list-inner2 h3.item-name {
	padding: 1em 0 0.5em;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
}

.mothersday .product-list-inner2 .item-info p {
	padding: 0;
	font-size: 13px;
}

.mothersday .product-list-inner2 p.price {
	text-align: right;
	font-weight: bold;
	padding-top: 1em;
	margin-top: auto;
}

.mothersday .product-list-inner2 .price > span {
	font-size: 20px;
}

.mothersday .product-list-inner2 .price span.tax {
	font-size: 16px;
	padding-left: 0.2em;
}



/*--- 問い合せ ---*/

.mothersday .mothersday-contact {
	width: 100%;
	/* padding: 80px 0; */
	padding: 0 0 80px;
}

.mothersday-contact ul.shop-contact {
	max-width: 800px;
	margin: 0 auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	height: auto;
}

.mothersday-contact li.contact-button {
	display: inline-block;
	width: 50%;
	margin: 0 1em;
	padding: 1em;
	text-align: center;
	color: #fff;
    /*--border: 3px solid #e24e82;--*/
		border: 3px solid #bc125b;
    background: #fff;
}

.mothersday-contact li.contact-button span {
	display: block;
}

.mothersday-contact li.contact-button a {
	color: #333;
}

.mothersday-contact .info {
	font-size: 14px;
	/*--color: #e24e82;--*/
	color: #bc125b;
}

.mothersday-contact .link {
	font-size: 20px;
}

.contact-button.online .link {
	font-size: 18px;
}

.mothersday-contact .link i {
	padding-right: 0.5em;
}

.mothersday small {
	width: 100%;
    display: block;
    color: #fff;
	font-size: 12px;
    padding: 10px 10px;
	background-color: rgb(135, 38, 81);
	text-align: center;
	margin: 0 auto;
}



/*--@media only screen and ( max-width : 1024px ) {--*/
@media only screen and ( max-width : 1100px ) {
	.mothersday .product {
		padding: 10px;
	}
	.mothersday .product-inner {
		margin: 0 3%;
	}
	.mothersday .product-list2 {
		margin: 0 2%;
	}	
	.mothersday .product .item-info p {
		padding: 10px 0;
	}
	.mothersday .mothersday-contact {
		padding: 0 2% 50px;
	}
}


/*--@media only screen and ( max-width : 767px ) {--*/
@media only screen and ( max-width : 1100px ) {
	.mothersday .information ul {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-ms-flex-flow:row wrap;
		flex-flow:row wrap;
	}
	.mothersday .information li {
		width: 100%;
	}
	.mothersday .category-list {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-ms-flex-flow:row wrap;
		flex-flow:row wrap;
	}
	.mothersday .category-list li {
		width: 45%;
		margin: 2.5%;
	}
	.mothersday .product-list-inner,
	.mothersday .product-list-inner.reverse {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.mothersday .product-list .main-img {
		width: 100%;
	}
	.mothersday .product-list .sub-img {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		/* flex: 1 0 auto; */
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		max-width: 400px;
		width: 100%;
		margin: 0 auto 1em;
	}
	.mothersday .product-list .sub-img li {
		width: calc(100% / 3);
		height: auto;
	}
	.mothersday .product-list2 {
		margin: 0 3%;
	}
	.mothersday .product-list-inner2 {
		width: 47%;
		margin: 0 1.5% 50px;
	}
	.mothersday .product .item-info {
		width: 100%;
	}
	.mothersday .product-list .price {
		position: static;
		border: none;
	}
	.mothersday .mothersday-contact {
		margin: 0 auto;
	}
	.mothersday-contact ul.shop-contact {
		display: block;
	}
	.mothersday-contact li.contact-button {
		width: 100%;
		margin: 0.2em 0;
		padding: 1em;
	}
}


@media only screen and ( max-width : 520px ) {
/* 画像の切替え */
.pc { display: none !important; }
.sp { display: block !important; }
.mothersday .mainvisual {background: none;}

	.mothersday .information {
		padding-top: 0;
	}
	.mothersday .information .special {
		display: block;
		padding: 1em;
		margin-bottom: 10px;
	}
	.mothersday .information .special .title-text {
		display: inline-block;
		padding: 0.3em;
		margin: 0 0 0.5em 0;
	}
	.mothersday .information li {
		margin: 10px;
	}
	.mothersday .information li .shop {
		display: block;
	}
	.mothersday .product {
		/* padding: 10px; */
		padding: 15px;
	}
	.mothersday .section-wrapper {
		display: inline-block;
		padding: 50px 0 20px;
		margin: 50px auto 0;
		border-radius: 10px;
	}
	.mothersday .product-inner {
		/* margin: 0 1%; */
	}
	.mothersday .product-title {
		min-width: 100%;
	}
	.mothersday .product h3.item-name {
		padding: 20px 0px;
		font-size: 22px;
	}
	.mothersday .product-list-inner2 h3.item-name {
		font-size: 16px;
	}
	.mothersday .product-title img.icon {
		position: absolute;
		left: 0;
		right: 0;
		top: -130px;
		margin: auto;
		width: 120px;
		height: auto;
	}
	.mothersday .product h2 {
		margin: 0 10px 30px;
		font-size: 25px;
	}
	.mothersday .product-list {
		padding: 10px;
		margin-bottom: 30px;
	}
	.mothersday .product .item-info {
		padding: 10px;
	}
	.mothersday .product-list2 {
		margin: 0;;
	}
	.mothersday .product-list-inner2 {
		width: 47%;
		margin: 0 1.5% 30px;
	}
	.mothersday .product .store-mark span {
		line-height: 1.6;
	}
	.mothersday .product-list-inner2 .item-info p {
	line-height: 1.1;
	}
	.mothersday .product-list-inner2 .item-info p.color {
		padding: 0;
	}
	.mothersday .product-list-inner2 .item-info p.price {
		padding: 20px 0 10px;
		;
	}
	.mothersday .product .price > span {
		font-size: 20px;
	}
.mothersday .product .price span.tax {
		font-size: 16px;
	}
	.mothersday .mothersday-contact {
		padding-top: 40px;
	}
} /* ← ここでスマホ用設定（@media）を閉じます */

/* -----------------------------------------------------------
   以下、PC・スマホ共通：メインビジュアルと追加文言の設定
----------------------------------------------------------- */

/* 1. 親要素のスタイル（画像部分） */
.mainvisual {
    display: block !important;
    margin: 0 auto !important;
    max-width: 1000px; 
    height: auto !important;
}

/* 2. 画像の出し分け設定 */
.mainvisual img.pc { 
    display: block !important; 
    width: 100% !important; 
    height: auto !important; 
}
.mainvisual img.sp { 
    display: none !important; 
}

/* 3. 追加文字部分（画像と同じ幅の帯） */
.mv-copy {
    display: block !important;
    max-width: 1000px;
    margin: 0 auto !important;
    background: #bc125b !important; /* 背景色（薄いピンク） */
    color: #FFFFFF !important;      /* 文字色 */
    text-align: center !important;
    padding: 15px 10px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

/* 4. スマホ画面（520px以下）の時の出し分け切り替え */
@media only screen and (max-width: 520px) {
    .mainvisual img.pc { 
        display: none !important; 
    }
    .mainvisual img.sp { 
        display: block !important; 
        width: 100% !important; 
        height: auto !important; 
    }
    .mv-copy {
        max-width: 100% !important;
        font-size: 0.9rem !important;
        padding: 12px 10px !important;
    }
}