@charset "utf-8";
/* リセットCSS */
*{margin:0;padding:0;min-height: 0;min-width: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {height:100%;}
ul{
	list-style-type:none;
	margin-block-start: 0em;
	margin-block-end: 0em;
	padding-inline-start: 0px;
}
ul li ,ol li{list-style:none;padding: 0;margin: 0;}
h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 100%;margin: 0;}
p{margin: 0;}
a:focus, *:focus{ outline:none; }
article, header, footer, aside, figure, figcaption, nav, section,main{ 
  display:block;
}
body{
	font-family: 'Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: 500;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.06em;
	width:100%;
	color: #000;
	position:relative;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 0;
}
a{
	text-decoration: none;
	outline: none;
	color: #000;
}
a img,a{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s;
}
img{
	height: auto;
	max-width: 100%;
	box-sizing: unset;
	vertical-align: bottom;
}
/* CSS関数設定 */
:root{
  --WHITE: #fff;
	--BLACK: #000;
	--BROWN01: #49191d;
	--GRAY01: #ddd;
	--GRAY02: #eeeeee;
	--GRAY03: #f4f4f4;
	--GRAY04: #dddddd;
	--GRAY05: #aaaaaa;
	--GRAY06: #cccccc;
	--GRAY07: #7d7d7d;
	--GRAY08: #efefef;
	--RED01: #a32328;
	--RED02: #ff0000;
	--YELLOW01: #f4ed00;
	--YELLOW02: #ffd05a;
	--YELLOW03: #f4f419;
	--BLUE01: #8eeff4;
	--BLUE02: #dcf4f4;
	--PINK01: #ffc5d3;
	--PINK02: #f7f0f1;
	--BEIGE01: #f7eee4;
	--BEIGE02: #f7f3e7;
	--BEIGE03: #e0d6af;
}
/* フォントCSS */
.noto{
	font-family: 'Noto Serif JP', serif;
}
/* imgリセット */
.imgauto{
	height: auto;
	width: 100%;
	box-sizing: unset;
	line-height: 1rem;
	display: block;
}
/* インナー設定 */
.inner,
.pc-inner-l,
.pc-inner-m,
.sp-inner{
	margin-left: auto;
	margin-right: auto;
}
/* セクション間隔*/
.generalmg{
	margin-bottom: var(--GENERALSEC);
}
.generalpd{
	padding: var(--GENERALSEC) 0;
}
/* フレックス */
.flex{
	display: flex;
}
.fxw{
	display: flex;
	flex-wrap: wrap;
}
.jcsb{
	display: flex;
	justify-content: space-between;
}
/* スライダー読み込みまで非表示 */
.slide{
	opacity: 0;
	transition: opacity .3s linear;
}
.slide.slick-initialized{
	opacity: 1;
}
/* 縦書き */
.tategaki{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
@media screen and (min-width: 768px){
	body{
		font-size: 15px;
		line-height: 1.7;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
	}
	:root{
		--GENERALSEC: 80px;
		--BOX_SHADOW: 1px 1px 11px -5px #777777;
	}
	a:hover{
		opacity: 0.7;
		text-decoration: none;
	}
	a:hover img{
		opacity:0.75 !important;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
	.sp{
		display: none !important;
	}
	.max-wrapper{
		width: 100%;
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
	}
	.inner,
	.pc-inner-l{
		width: 95%;
		max-width: 1280px;
	}
	.pc-inner-m{
		width: 95%;
		max-width: 1080px;
	}
	.hamburger{
		display: none !important;
	}
	.pc-tategaki{
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}
}
@media screen and (max-width: 767px){
	body{
		font-size: 14px;
		line-height: 1.6;
	}
	:root{
		--GENERALSEC: 60px;
		--INNER_WIDTH: 92%;
		--BOX_SHADOW: 0px 0px 11px -5px #777777;
	}
	.pc{
		display: none !important;
	}
	.inner,
	.sp-inner{
		width: var(--INNER_WIDTH);
	}
	.sp-y-scroll,
	.sp-x-scroll{
		-ms-overflow-style: none;/* IE, Edge 対応 */
		scrollbar-width: none;/* Firefox 対応 */
	}
	.sp-y-scroll{
		overflow-y: scroll;
		overflow-x: auto;
	}
	.sp-x-scroll{
		overflow-x: scroll;
		overflow-y: auto;
		padding-left: calc((100% - var(--INNER_WIDTH)) / 2);
		padding-right: calc((100% - var(--INNER_WIDTH)) / 2);
	}
	.sp-y-scroll::-webkit-scrollbar,
	.sp-x-scroll::-webkit-scrollbar{/* Chrome, Safari 対応 */
		display: none;
	}
	.sp-pc-tategaki{
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}
}
/* ■■■■■■■■■■■■■■■■■■■■-header■■■■■■■■■■■■■■■■■■■■ */
.h-shipment{
	border-radius: 5px;
	background-color: var(--YELLOW01);
	text-align: center;
}
.h-shipment span{
	color: var(--RED01);
	font-weight: 700;
}
.tel-number{
	background-image: url(../images/common/phone.svg);
	background-repeat: no-repeat;
	background-position: left center;
}
.tel-number a{
	color: var(--RED01);
	font-weight: 900;
}
.gnav{
	background-color: var(--RED01);
}
.gnav-inner{
	margin: 0 auto;
}
.search-form input,
.search-form button{
	-webkit-appearance: none;
	border-radius: 0;
	border: none;
	font-size: 16px;
	color: #000;
	background: #fff;
}
.search-tag li a{
	color:  var(--RED01);
	text-decoration: underline;
	font-size: 12px;
}
.search-tag li a::before{
	content: '#';
}
.search-tag li a::after{
	content: ',';
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@media screen and (min-width: 1001px){
	.h-catch{
		font-size: 12px;
	}
	.h-link li a{
		font-size: 12px;
	}
	.h-shipment{
		font-size: 13px;
		padding: 10px 22px;
	}
	.h-shipment span{
		font-size: 16px;
	}
	.h-window{
		font-size: 13px;
	}
	.h-window .name{
		padding: 2px 10px;
	}
	.h-window .txt{
		padding: 2px 0;
	}
	.h-number{
		font-size: 30px;
		line-height: 0.8;
		padding: 0 0 3px 16px;
		background-size: 9px;
		margin: 0 auto 3px;
	}
	.h-hours{
		font-size: 12px;
	}
	.h-user > li > a{
		padding: 0 30px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1000px){
	.h-catch{
		font-size: 10px;
	}
	.h-link li a{
		font-size: 11px;
	}
	.h-shipment{
		font-size: 11px;
		padding: 8px 15px;
	}
	.h-shipment span{
		font-size: 13px;
	}
	.h-window{
		font-size: 11px;
	}
	.h-window .name{
		padding: 1px 7px;
	}
	.h-window .txt{
		padding: 1px 0;
	}
	.h-number{
		font-size: 23px;
		line-height: 0.6;
		padding: 0 0 3px 15px;
		background-size: 7px;
		margin: 0 auto 5px;
	}
	.h-hours{
		font-size: 10px;
		letter-spacing: 0.1px;
	}
	.h-user > li > a{
		font-size: 13px;
		padding: 0 22px;
	}
}
@media screen and (min-width: 768px){
	body{
		padding-top: 175px !important;
	}
	header{
		background-color: var(--WHITE);
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 11;
	}
	.h-inner{
		width: 95%;
		max-width: 1400px;
		margin: 0 auto;
	}
	.h-top{
		align-items: center;
		padding: 8px 0 17px;
	}
	.h-catch{
		flex: 1;
	}
	.h-catch span{
		display: inline-block;
	}
	.fixed-logo{
		display: none;
		width: 160px;
	}
	.h-link{
		justify-content: flex-end;
		margin-left: auto;
		gap: 20px;
	}
	.h-link li a{
		display: inline-block;
		text-decoration: underline;
	}
	.h-bottom{
		align-items: center;
		padding-bottom: 15px;
	}
	.h-logo{
		width: 26%;
		margin-right: 20px;
	}
	.h-shipment-area{
		width: fit-content;
	}
	.h-shipment{
		line-height: 1.5;
	}
	.h-contact{
		width: fit-content;
		align-items: center;
		margin-left: auto;
	}
	.h-window{
		border-radius: 5px;
		border: 1.5px solid var(--RED01);
		margin-right: 15px;
	}
	.h-window span{
		display: block;
		text-align: center;
	}
	.h-window .name{
		color: var(--RED01) ;
	}
	.h-window .txt{
		background-color: var(--RED01);
		color: var(--WHITE);
	}
	.h-tel{
		text-align: center;
	}
	.h-number{
		width: fit-content;
	}
	.gnav-inner{
		width: 95%;
		max-width: 900px;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.gnav{
		--GNAV_HEIGHT: 50px;
	}
	.h-search-trigger{
		aspect-ratio: 1 / 1;
		background-image: url(../images/common/search.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 20px;
		height: var(--GNAV_HEIGHT);
		cursor: pointer;
		transition: .3s;
	}
	.h-search-area.active .h-search-trigger{
		background-color: var(--WHITE);
		background-image: url(../images/common/close-r.svg);
	}
	.h-search-box{
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
		z-index: -1;
		transition: .3s;
		background-color: var(--WHITE);
		width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		align-items: center;
		padding: 20px 30px;
	}
	.h-search-area.active .h-search-box{
		pointer-events: auto;
		visibility: visible;
		opacity: 1;
		z-index: 99;
	}
	.h-search-form{
		width: 33%;
		margin-right: 15px;
		position: relative;
	}
	.h-search-form input{
		width: 100%;
		border: 1px solid var(--GRAY01);
		border-radius: 60px;
		padding: 15px 40px 15px 20px!important;
	}
	.h-search-form button{
		background: url(../images/common/search.svg) no-repeat center center / 16px;
		background-color: var(--RED01);
		border-radius: 50px;
		width: 40px;
		height: 73%;
		position: absolute;
		top: 7px;
		right: 10px;
	}
	.advanced-search{
		width: 160px;
	}
	.advanced-search a{
		display: block;
		width: 100%;
		background-color: var(--RED01);
		color: var(--WHITE) !important;
		border-radius: 5px;
		text-align: center;
		padding: 12px 0 12px 20px;
		font-size: 13px;
		position: relative;
	}
	.advanced-search a span{
		display: inline-block;
		border: 2px solid var(--WHITE);
		border-left: none;
		border-right: none;
		width: 12px;
		aspect-ratio: 1 / 1;
		margin-right: 10px;
		position: absolute;
		top: 51%;
		transform: translateY(-50%);
		left: 16px;
	}
	.advanced-search a span::after{
		content: "";
		display: inline-block;
		background: var(--WHITE);
		height: 2px;
		width: 100%;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.search-tag{
		flex: 1;
		margin-left: 5%;
		column-gap: 10px;
		row-gap: 2px;
	}
	.h-user{
		align-items: center;
		margin: 0;
	}
	.h-user > li{
		height: 100%;
	}
	.h-user > li > a{
		color: var(--WHITE);
		display: flex;
		align-items: center;
		height: var(--GNAV_HEIGHT);
		pointer-events: none;
	}
	.h-user > li:hover > a{
		background-color: var(--WHITE);
		color: var(--RED01);
		opacity: 1;
	}
	.h-user > li.pos{
		position: relative;
	}
	.hvr-show{
		background: var(--WHITE);
		display: flex;
		justify-content: center;
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
		z-index: -1;
		transition: .3s;
		position: absolute;
		width: 100%;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		padding: 20px 30px 30px;
		box-shadow: 0px 3px 15px -9px #bababa;
	}
	.h-user > li.pos .hvr-show{
		width: fit-content;
		white-space: nowrap;
	}
	.h-user > li:hover .hvr-show{
		pointer-events: auto;
		visibility: visible;
		opacity: 1;
		z-index: 99;
	}
	.hvr-contents{
		gap: clamp( 30px, 4vw, 50px);
	}
	.hvr-cat-link li:not(:last-child){
		margin-bottom: 10px;
	}
	.hvr-cat-link > li.parent a{
		color: var(--RED01);
		font-weight: 700;
		display: block;
	}
	.hvr-link-child{
		margin-left: 10px;
		display: grid;
		gap: 10px;
	}
	.hvr-cat-link .child li{
		margin-top: 10px;
	}
	.hvr-cat-link > li ul.child a{
		position: relative;
		padding-left: 15px;
	}
	.hvr-cat-link > li ul.child a::before{
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 0 5px 10px;
		border-color: transparent transparent transparent var(--RED01);
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.hvr-cat-link > li ul.child a{
		font-size: 14px;
		color: var(--RED01);
		text-decoration: underline;
		font-weight: 400;
	}
	/* スクロールしたら */
	body.scroll header{
		opacity: 0;
		animation: fadeIn .5s ease-in-out .6s forwards;
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
	}
	body.scroll .h-top{
		padding: 12px 0;
	}
	body.scroll .h-catch{
		display: none;
	}
	body.scroll .fixed-logo{
		display: block;
	}
	body.scroll .h-bottom{
		display: none;
	}
}
@media screen and (max-width: 767px){
	.h-inner,
	.h-bottom{
		display: contents;
	}
	.h-logo{
		width: 230px;
		padding: 15px 0;
		margin: 0 auto;
	}
	.h-user{
		width: 100%;
	}
	.h-user li{
		flex: 1;
	}
	.h-user li:not(:last-child){
		border-right: 1px solid var(--WHITE);
	}
	.h-user li a{
		display: block;
		text-align: center;
		color: var(--WHITE);
		font-size: 12px;
		padding: 7px 0;
	}
	.h-shipment-area{
		background-color: var(--WHITE);
		padding: 10px 0;
		width: 100%;
	}
	body.scroll{
		padding-top: 71px;
	}
	body.scroll .h-shipment-area{
		opacity: 0;
		animation: fadeIn .5s ease-in-out .6s forwards;
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
	}
	.h-shipment{
		font-size: 12px;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 3px 0;
	}
	.h-shipment span{
		font-size: 14px;
	}
	.gnav{
		position: sticky;
		top: 0;
	}
}



/* ■■■■■■■■■■■■■■■■■■■■-全ページ共通部分■■■■■■■■■■■■■■■■■■■■ */
/* -------------------商品リスト------------------- */
.product-list article a{
	display: block;
	background-color: var(--WHITE);
	box-shadow: var(--BOX_SHADOW);
}
.product-price{
	color: var(--RED01);
	font-weight: 700;
}
.product-name{
	color: var(--BROWN01);
}
.product-detail {
  color:#808080;
  margin:0 0 8%;
}
@media screen and (min-width: 901px){
	.product-list{
		grid-template-columns: repeat(5, 1fr);
	}
}
@media screen and (min-width: 768px) and (max-width: 950px){
	.product-list{
		grid-template-columns: repeat(4, 1fr);
	}
	.product-list article:nth-of-type(n+5){
		display: none;
	}
}
@media screen and (min-width: 768px){
	.product-list{
		display: grid;
		align-items: stretch;
		gap: 15px;
	}
	.product-list article a{
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 10px;
	}
	.product-name{
		font-size: 14px;
		margin: 8px 0;
		flex: 1;
	}
	.product-price{
		font-size: 20px;
	}
	.product-price span{
		font-size: 14px;
	}
}
@media screen and (max-width: 767px){
	.product-list article a{
		padding: 5px;
	}
	.product-name{
		font-size: 12px;
		margin: 5px 0;
	}
	.product-price{
		font-size: 15px;
	}
	.product-price span{
		font-size: 11px;
	}
}
/* フリーページ閲覧履歴 */
@media screen and (max-width: 767px){
	.product-list.freepage_history{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: stretch;
		column-gap: 10px;
		row-gap: 20px;
	}
	.product-list.freepage_history article a{
		display: flex;
		height: 100%;
		flex-direction: column;
	}
	.product-name{
		flex: 1;
	}
}
/* -------------------トップと下層共通おすすめ定番かりゆし------------------- */
.product-list.recommend article a{
	position: relative;
}
.product-cat{
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	transform: translateY(-50%);
	z-index: 2;
	color: var(--BROWN01);
}
.product-cat.mens{
	background-color: var(--BLUE01);
}
.product-cat.ladys{
	background-color: var(--PINK01);
}
.product-cat.kids{
	background-color: var(--YELLOW03);
}
@media screen and (min-width: 768px){
	.product-cat{
		font-size: 13px;
		width: 70px;
		right: -10px;
	}
}
@media screen and (max-width: 767px){
  .product-list.recommend .slick-slide{
    margin: 0 6px;
  }
	.product-list.recommend .slick-track{
		padding-bottom: 10px;
	}
  .product-list.recommend .slick-list{
    padding: 30px 10% 0 10px!important;
  }
	.product-list.recommend .slick-dots{
		bottom: -40px;
	}
	.product-list.recommend .prev-arrow{
    left: 5px;
  }
  .product-list.recommend .next-arrow{
    right: 5px;
  }
	.product-cat{
		font-size: 10px;
		width: 50px;
		left: -5px;
	}
	.slide{
    position: relative;
  }
  .slide .slick-arrow{
		width: 30px;
		position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
}
/* -------------------ランキング------------------- */
.sea-bg{
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}
.sea-bg::after{
	content: "";
	display: inline-block;
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0) 100%);
	width: 100%;
	height: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.sea-bg > .ranking-area{
	position: relative;
	z-index: 2;
}
.tab-nav{
  display: grid;
}
.tab-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
}
.tab-contents{
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.tab-contents.show{
  height: auto;
  overflow: unset;
  opacity: 1;
  transition: .5s opacity;
}
.ranking-area{
  display: grid;
}
.ranking-sec{
  background-color: var(--WHITE);
  box-shadow: var(--BOX_SHADOW);
  padding: calc(var(--GENERALSEC) / 2) 0 calc((var(--GENERALSEC) / 2));
}
.ranking-contents{
  border-top: 3px solid var(--RED01);
}
.product-list.ranking{
	counter-reset: original-counter;
}
.product-list.ranking article a{
	position: relative;
}
.product-list.ranking article:not(.slick-cloned) a::before{
	content: 'NO.'counter(original-counter);
	counter-increment: original-counter;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 50%;
	color: var(--BROWN01);
	position: absolute;
	transform: translateY(-50%);
	font-weight: 700;
	z-index: 2;
}
.ranking-mens .product-list.ranking article a::before{
	background-color: var(--BLUE01);
}
.ranking-ladys .product-list.ranking article a::before{
	background-color: var(--PINK01);
}
.ranking-kids .product-list.ranking article a::before{
	background-color: var(--YELLOW03);
}
.ranking-accessories .product-list.ranking article a::before{
	background-color: var(--YELLOW02);
}
.product-list.ranking article:first-child a::after,
.product-list.ranking .slick-slide:first-child article a::after{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%; 
	aspect-ratio: 300 / 162;
	position: absolute;
	z-index: 2;
}
.ranking-mens .product-list.ranking article:first-child a::after{
	background-image: url(../../asset2023/images/top/ranking-mens-crown.svg);
}
.ranking-ladys .product-list.ranking article:first-child a::after{
	background-image: url(../../asset2023/images/top/ranking-ladys-crown.svg);
}
.ranking-kids .product-list.ranking article:first-child a::after{
	background-image: url(../../asset2023/images/top/ranking-kids-crown.svg);
}
.ranking-accessories .product-list.ranking article:first-child a::after{
	background-image: url(../../asset2023/images/top/ranking-accessories-crown.svg);
}
@media screen and (min-width: 768px){
  .sea-bg{
    background-image: url(../../asset2023/images/top/sea-bg.jpg);
  }
  .ranking-area{
    gap: 40px;
  }
  .ranking-sec .sec-ttl{
    margin-bottom: 30px;
  }
  .ranking-contents{
    padding: 20px;
  }
  .ranking-area .tab-nav{
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border-bottom: 1.5px solid var(--RED01);
    position: relative;
    z-index: 0;
  }
	.tab-btn{
		cursor: pointer;
	}
	.tab-btn.show{
    cursor: auto;
	}
  .ranking-area .tab-btn{
    background-color: var(--RED01);
    color: var(--WHITE);
    border: 1.5px solid var(--RED01);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    position: relative;
    z-index: 1;
    font-size: 16px;
    padding: 5px 0;
		min-height: 56px;
  }
  .ranking-area .tab-btn.show{
    background-color: var(--WHITE);
    color: var(--RED01);
  }
  .ranking-area .tab-btn.show::after{
    content: "";
    display: inline-block;
    background: var(--WHITE);
    width: 100%;
    height: 1.5px;
    position: absolute;
    left: 0;
    bottom: -1.5px;
    z-index: 2;
  }
	.ranking-sec .product-list{
		padding: 50px 0;
	}
	.product-list.ranking article a::before{
		font-size: 13px;
		width: 50px;
		left: -5px;
	}
	.product-list.ranking article:first-child a::after{
		content: "";
		display: inline-block;
		width: 50px;
		left: -5px;
		top: -41px;
	}
	.ranking-sec .more-btn{
		width: 420px;
	}
}
@media screen and (max-width: 767px){
  .sea-bg{
    background-image: url(../../asset2023/images/top/sp/sea-bg.jpg);
  }
	.sea-bg.generalpd.generalmg{
		padding-bottom: calc(var(--GENERALSEC) / 2);
		margin-bottom: calc(var(--GENERALSEC) / 2);
	}
	.ranking-area{
    gap: 30px;
  }
	.ranking-sec .sec-ttl{
    margin-bottom: 20px;
  }
  .ranking-contents{
    padding: 10px;
  }
  .ranking-area .tab-nav{
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .ranking-area .tab-btn{
    border: 1.5px solid var(--RED01);
    border-radius: 3px;
    color: var(--RED01);
		line-height: 1.4;
		padding: 3px 0;
		min-height: 48px;
		font-size: 13px;
  }
  .ranking-area .tab-btn.show{
    background-color: var(--RED01);
    color: var(--WHITE);
  }
	.ranking-sec .product-list .slick-list{
		padding: 40px 0 30px;
	}
	.ranking-sec .product-list .slick-slide{
		margin: 0 8px;
	}
	.ranking-sec .product-list .slick-dots{
		bottom: -5px;
	}
	.product-list.ranking article a::before{
		font-size: 10px;
		width: 40px;
		left: -3px;
	}
	.product-list.ranking .slick-slide:first-child article a::after{
		content: "";
		display: inline-block;
		width: 40px;
		left: -3px;
		top: -35px;
	}
	.ranking-sec .more-btn{
		width: 100%;
		max-width: 375px;
		margin: 0 auto -10px;
	}
}
/* -------------------閲覧履歴------------------- */
.history-inner{
	background-color: var(--BEIGE01);
}
.hisotry-list a{
	aspect-ratio: 1 / 1;
}
.hisotry-list img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (min-width: 768px){
	.hisotry-list{
		white-space: nowrap;
		padding: 30px;
		overflow-x: scroll;
	}
	.hisotry-list li{
		display: inline-block;
		min-width: 200px;
		max-width: 200px;
		margin-right: 15px;
	}
}
@media screen and (max-width: 767px){
	.history-inner{
		padding: 30px 0;
	}
	.hisotry-list{
		white-space: nowrap;
	}
	.hisotry-list li{
		display: inline-block;
		min-width: 140px;
		max-width: 140px;
		margin-right: 5px;
	}
}
/* -------------------ボタン------------------- */
.more-btn{
	margin: 0 auto;
}
.more-btn a{
	display: block;
	text-align: center;
	border-radius: 70px;
	font-weight: 700;
	background-repeat: no-repeat;
}
.more-btn.red a{
	border: 1px solid var(--RED01);
	background-color: var(--RED01);
	color: var(--WHITE);
	background-image: url(../../asset2023/images/common/btn-arrow-white.svg);
}
.more-btn.white a{
	border: 1px solid var(--RED01);
	background-color: var(--WHITE);
	color: var(--RED01);
	background-image: url(../../asset2023/images/common/btn-arrow-red.svg);
}
.more-btn.blue a{
	border: 1px solid var(--BLUE01);
	background-color: var(--BLUE01);
	color: var(--BROWN01);
	background-image: url(../../asset2023/images/common/btn-arrow-brown.svg);
}
.more-btn.pink {
	text-shadow: unset !important;
}
.more-btn.pink a{
	border: 1px solid var(--PINK01);
	background-color: var(--PINK01);
	color: var(--BROWN01);
	background-image: url(../../asset2023/images/common/btn-arrow-brown.svg);
}
@media screen and (min-width: 768px){
	.more-btn{
		width: 320px;
	}
	.more-btn a{
		font-size: 16px;
		padding: 16px 0 18px;
		background-size: 20px;
		background-position: right 15px center;
	}
}
@media screen and (max-width: 767px){
	.more-btn a{
		font-size: 13px;
		padding: 10px 0 12px;
		background-size: 15px;
		background-position: right 12px center;
	}
}
/* -------------------セクションタイトル------------------- */
.sec-ttl span{
	display: block;
	text-align: center;
}
.sec-ttl .en{
	font-weight: 900;
	color: var(--RED01);
}
.sec-ttl .ja{
	font-weight: 700;
	color: var(--BROWN01);
}
@media screen and (min-width: 768px){
	.sec-ttl{
		margin-bottom: 45px;
	}
	.sec-ttl .en{
		font-size: 34px;
		line-height: 1.4;
	}
	.sec-ttl .ja{
		font-size: 18px;
	}
}
@media screen and (max-width: 767px){
	.sec-ttl{
		margin-bottom: 30px;
	}
	.sec-ttl .en{
		font-size: 22px;
		line-height: 1.4;
	}
	.sec-ttl .ja{
		font-size: 16px;
	}
}
/* --------------------選ぶ------------------- */
.beach-bg{
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}
.pattern-sec .tab-nav{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.pattern-sec .tab-btn{
  color: var(--BROWN01);
  font-weight: 700;
}
.pattern-sec .tab-btn:nth-of-type(1){
  background-color: var(--BLUE01);
}
.pattern-sec .tab-btn:nth-of-type(2){
  background-color: var(--PINK01);
}
.pattern-sec .tab-btn:nth-of-type(3){
  background-color: var(--YELLOW01);
}
.pattern-sec .tab-btn.show{
  position: relative;
}
.pattern-sec .tab-btn.show::after{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 8.5px 0 8.5px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.pattern-sec .tab-btn:nth-of-type(1).show::after{
  border-color: var(--BLUE01) transparent transparent transparent;
}
.pattern-sec .tab-btn:nth-of-type(2).show::after{
  border-color: var(--PINK01) transparent transparent transparent;
}
.pattern-sec .tab-btn:nth-of-type(3).show::after{
  border-color: var(--YELLOW01) transparent transparent transparent;
}
.pattern-list{
  display: grid;
}
.pattern-list li a,
.designer-list li a{
  display: block;
  background-color: var(--WHITE);
  box-shadow: var(--BOX_SHADOW);
}
.pattern-list li a p,
.designer-list li a p{
  font-weight: 700;
  text-align: center;
  color: var(--BROWN01);
}
.designer-list li a span{
  background-color: var(--BLUE01);
  text-align: center;
  color: var(--BROWN01);
  font-weight: 700;
	display: block;
}
@media screen and (min-width: 901px){
  .pattern-list,
  .designer-list{
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 900px){
  .pattern-list,
  .designer-list{
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}
@media screen and (min-width: 768px){
  .beach-bg{
    background: url(../../asset2023/images/top/beach-bg2.jpg);
    margin-top: 40px;
  }
	.beach-bg::after {
		content: "";
		display: inline-block;
		position: absolute;
		background: url(../../asset2023/images/top/beach-bg1.jpg)top / contain no-repeat;
		z-index: 3;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
  .pattern-sec .tab-nav{
    width: 95%;
    margin: 0 auto 50px;
  }
  .pattern-sec .tab-btn{
    padding: 15px 0;
  }
  .designer-list{
    display: grid;
  }
  .pattern-list,
  .designer-list{
    margin-bottom: 50px;
  }
  .pattern-list li a p,
  .designer-list li a p{
    padding: 8px 0;
  }
  .designer-list li a{
    padding: 5px;
  }
  .designer-list li a span{
    padding: 5px 0;
    margin-top: 5px;
    font-size: 14px;
  }
}
@media screen and (max-width: 767px){
  .beach-bg{
    background: url(../../asset2023/images/top/sp/beach-bg2.jpg);
  }
	.beach-bg::before {
		content: "";
		display: inline-block;
		position: absolute;
		background: url(../../asset2023/images/top/sp/beach-bg1.jpg)top / contain no-repeat;
		z-index: 3;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
  .pattern-sec .tab-btn{
    padding: 12px 0;
  }
  .pattern-list{
    width: 95%;
    margin: 30px auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .pattern-list li a,
  .designer-list li a{
    padding: 3px;
  }
  .pattern-list li a p,
  .designer-list li a p{
    padding: 5px 0;
    font-size: 11px;
  }
  .beach-bg .more-btn{
    width: 80%;
    max-width: 375px;
    margin: 0 auto;
  }
  .designer-list .prev-arrow{
    left: 5px;
  }
  .designer-list .next-arrow{
    right: 5px;
  }
  .designer-list{
    padding: 0 0 40px 0;
  }
  .designer-list .slick-list{
    padding: 0 10% 0 10px!important;
  }
  .designer-list .slick-slide{
    margin: 0 8px;
  }
  .designer-list .slick-dots{
    bottom: -3px;
  }
  .designer-list .slick-dots li button:before{
    color: var(--WHITE);
    opacity: 1;
  }
}
/* ヘッダー展開内 */
@media screen and (min-width: 768px){
	.hvr-center-contents .tab-wrap{
		width: 100%;
	}
	.hvr-center-contents .pattern-sec .tab-nav{
		margin: 0 auto 30px;
	}
	.hvr-center-contents .pattern-sec .tab-btn{
		padding: 10px 0;
		font-size: 12px;
	}
	.hvr-center-contents .pattern-list,
	.hvr-center-contents .designer-list{
		gap: 25px;
		margin-bottom: 10px;
	}
	.hvr-center-contents .pattern-list li a h3,
	.hvr-center-contents .designer-list li a h3{
		font-size: 12px;
	}
	.hvr-center-contents .designer-list li a span{
		font-size: 11px;
	}
}

/* -------------------かりゆしウェディング------------------- */
.tree-bg{
	position: relative;
}
.tree-bg::before{
	content: "";
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.wedding-sec,
.wedding-img{
	position: relative;
}
.wedding-sec::before,
.wedding-img::before,
.wedding-sec::after,
.wedding-img::after{
	content: "";
	display: inline-block;
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
}
.wedding-sec::before,
.wedding-img::before{
	background-image: url(../../asset2023/images/top/wedding-flower02.png);
	aspect-ratio: 761 / 593;
}
.wedding-sec::after,
.wedding-img::after{
	background-image: url(../../asset2023/images/top/wedding-flower01.png);
	aspect-ratio: 665 / 680;
}
.wedding-sec .generalpd{
	padding: calc(var(--GENERALSEC) - 20px) 0 var(--GENERALSEC);
}
.wedding-txt{
	color: var(--BROWN01);
	line-height: 2;
}
.wedding-link li a{
	display: flex;
	align-items: center;
	background-color: var(--WHITE);
	box-shadow: var(--BOX_SHADOW);
}
.wedding-link li a h3{
	text-align: center;
	color: var(--BROWN01);
	font-weight: 700;
}
@media screen and (min-width: 951px){
	.wedding-desc{
		display: flex;
		align-items: center;
	}
	.wedding-img{
		width: 50%;
		margin-right: 3%;
	}
	.wedding-txt{
		flex: 1;
	}
	.wedding-link{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
	}
}
@media screen and (min-width: 768px) and (max-width: 950px){
	.wedding-img{
		width: 400px;
		margin: 0 auto 30px;
	}
	.wedding-link{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 30px;
	}
	.wedding-link li{
		width: calc(50% - 15px);
	}
}
@media screen and (min-width: 768px){
	.tree-bg::before{
		width: 101%;
		background-image: url(../../asset2023/images/top/tree-bg.jpg);
	}
	.wedding-sec::before{
		width: 20%;
    top: -60px;
    right: 5%;
	}
	.wedding-sec::after{
		width: 18%;
		bottom: -100px;
		left: 3%;
	}
	.wedding-desc{
		width: 80%;
		margin: 0 auto;
	}
	.wedding-link{
		width: 85%;
		margin: 20px auto;
	}
	.wedding-link li a img{
		width: 30%;
	}
	.wedding-link li a h3{
		flex: 1;
	}
}
@media screen and (max-width: 767px){
	#mainarea{
		overflow-x: hidden;
	}
	.tree-bg{
		width: 98%;
		margin: 0 auto;
		padding: 30px 7% 60px !important;
	}
	.tree-bg::before{
		width: 105%;
		background-image: url(../../asset2023/images/top/sp/tree-bg.jpg);
	}
	.tree-bg .sec-ttl{
		margin-bottom: 10px;
	}
	.tree-bg .sec-ttl span{
		text-align: left;
	}
	.wedding-img{
		margin-bottom: 10px;
	}
	.wedding-img::before{
		width: 40%;
		top: -45%;
		right: -3%;
	}
	.wedding-img::after{
		width: 30%;
		bottom: 0px;
		left: -8%;
	}
	.wedding-link{
		margin-top: 30px;
		display: grid;
		gap: 20px;
	}
	.wedding-link li a img{
		width: 30%;
		aspect-ratio: 14 / 10;
    height: auto;
    object-fit: cover;
    object-position: top; 
	}
	.wedding-link li a h3{
		flex: 1;
	}
}
/* -------------------マンゴハウスかりゆしガイド------------------- */
.guide-list{
	display: grid;
}
.guide-list li a{
	display: block;
	background-color: var(--WHITE);
	box-shadow: var(--BOX_SHADOW);
}
.guide-list li a h3{
	color: var(--BROWN01);
	text-align: center;
	font-weight: 700;
}
@media screen and (min-width: 768px){
	.guide-list{
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
	.guide-list li a h3{
		padding: 20px 0;
	}
}
@media screen and (max-width: 767px){
	.guide-list{
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
	.guide-list li a h3{
		padding: 5px 0;
		font-size: 13px;
	}
}
/* -------------------トッピクス------------------- */
.topics-list{
	display: grid;
}
@media screen and (min-width: 768px){
	.topics-list{
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}
}
@media screen and (max-width: 767px){
	.topics-list{
		gap: 10px;
	}
}

/* --------------------お知らせ------------------- */
.info-list li{
	border-bottom: 1px solid var(--BLACK);
}
.info-list li:first-child{
	border-top: 1px solid var(--BLACK);
}
.info-list time{
	font-weight: 900;
}
.info-list a{
	color: var(--RED01);
	text-decoration: underline;
}
@media screen and (min-width: 768px){
  .info-sec{
		display: flex;
	}
	.info-sec .sec-ttl span{
		text-align: left;
	}
	.info-left{
		width: fit-content;
		margin-right: 40px;
	}
	.info-left .more-btn{
		width: 80%;
		margin: 0 auto 0 0;
	}
	.info-list{
		flex: 1;
	}
	.info-list li{
		padding: 30px 0;
	}
}
@media screen and (max-width: 767px){
	.info-sec{
		display: grid;
	}
	.info-sec{
		padding-top: calc(var(--GENERALSEC) / 2);
	}
	.info-sec .sec-ttl{
		order: 1;
	}
	.info-list{
		order: 2;
	}
	.info-left .more-btn{
		order: 3;
	}
  .info-left{
		display: contents;
	}
	.info-list{
		margin-bottom: 30px;
	}
	.info-list li{
		padding: 20px 0;
	}
	.info-left .more-btn{
		width: 200px;
	}
}
/* ---------------LINEとお客様の声------------------------ */
.voice-area{
	background-color: var(--RED01);
}
.voice-link{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.voice-link li a{
	display: block;
	background-color: var(--WHITE);
	color: var(--RED01);
	background-repeat: no-repeat;
}
.voice-link li.review a{
	background-image: url(../../asset2023/images/top/review.svg);
}
.voice-link li.voice a{
	background-image: url(../../asset2023/images/top/voice.svg);
}
@media screen and (min-width: 768px) and (max-width: 950px){
	.line-voice-area{
		width: 70%;
		margin: 0 auto;
	}
}
@media screen and (min-width: 768px){
	.line-voice-area{
		display: flex;
		justify-content: center;
		gap: 30px;
	}
	.line-voice-area > li{
		width: calc((100% / 2) - 30px);
	}
	.voice-area{
		padding: 20px;
		display: flex;
		align-items: flex-end;
	}
	.voice-area div{
		width: 100%;
	}
	.arigato-ttl{
		width: 80%;
		margin: 0 auto 5%;
	}
	.voice-link{
		width: 100%;
		gap: 20px;
	}
	.voice-link li a{
		font-size: clamp( 10px, 1.1vw, 15px);
    padding: 7% 0 7% 25%;
    background-size: 13%;
		background-position: left 8% center;
	}
}
@media screen and (max-width: 767px){
	.voice-area{
		padding: 20px;
	}
	.line-voice-area{
		display: grid;
		gap: 20px;
	}
	.arigato-ttl{
		width: 80%;
		margin: 0 auto 5%;
	}
	.voice-link{
		width: 100%;
		gap: 20px;
	}
	.voice-link li a{
		font-size: 10px;
		padding: 7% 0 7% 30%;
		background-size: 18%;
		background-position: left 8% center;
	}
}
/* ----------------かりゆしウェアとは？----------------------- */
.whats-inner{
  background-color: var(--BEIGE02);
	position: relative;
	z-index: 0;
}
.whats-inner::after{
	content: "";
	display: inline-block;
	border: 2px solid var(--BEIGE03);
	width: var(--WHATS_BORDER);
	height: var(--WHATS_BORDER);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.whats-txt{
	display: grid;
}
.whats-txt p{
	line-height: 2;
}
@media screen and (min-width: 951px){
	.whats-inner{
		display: flex;
	}
	.whats-txtarea{
		flex: 1;
		margin-right: 3%;
	}
	.whats-img{
		width: 50%;
	}
}
@media screen and (max-width: 950px){
	.whats-inner{
		display: grid;
	}
	.whats-txtarea{
		display: contents;
	}
	.whats-inner .sec-ttl{
		order: 1;
		margin-bottom: 15px;
	}
	.whats-img{
		order: 2;
		width: 95%;
		max-width: 500px;
		margin: 0 auto 20px;
	}
	.whats-txt{
		order: 3;
	}
	.whats-inner .more-btn{
		order: 4;
	}
}
@media screen and (min-width: 768px){
  .whats-inner{
		--WHATS_BORDER: calc(100% - 20px);
		padding: 50px;
	}
	.whats-txt{
		gap: 20px;
	}
	.whats-inner .more-btn{
		width: 200px;
		margin: 20px auto 0;
	}
}
@media screen and (max-width: 767px){
  .whats-inner{
		--WHATS_BORDER: calc(100% - 15px);
		padding: 30px 20px;
	}
	.whats-txt{
		gap: 10px;
	}
	.whats-inner .more-btn{
		width: 200px;
		margin: 30px auto 0;
	}
}

/* --------------------コーディネート------------------- */
.coordinate-intro{
	display: grid;
	width: 80%;
	max-width: 1000px;
	margin: auto;
}
.coordinate-ttl{
	color: var(--BROWN01);
	font-weight: 700;
	text-align: center;
}
@media screen and (min-width: 768px){
  .coordinate-intro li{
		display: flex;
		align-items: center;
		gap: 2%;
	}
	.coordinate-intro li:nth-child(even){
		flex-direction: row-reverse;
	}
	.coordinate-img{
		width: 40%;
	}
	.coordinate-txtarea{
		flex: 1;
	}
	.coordinate-ttl{
		font-size: 20px;
	}
	.coordinate-txt{
		margin: 30px auto;
		line-height: 2;
		font-weight: 400;
	}
}
@media screen and (max-width: 767px){
	.coordinate-intro{
		gap: 30px;
		margin-top: -10px;
		width: 100%;
	}
	.coordinate-intro li{
		position: relative;
	}
	.coordinate-ttl{
		background-color: var(--GRAY03);
		font-size: 20px;
		padding: 20px 0;
		margin: 40px 0 80px;
		padding-left: 15%;
		text-align: left;
	}
  .coordinate-intro li:nth-child(odd) .coordinate-ttl{
		text-align: right;
		padding-right: 15%;
	}
	.coordinate-img{
		width: 165px;
		position: absolute;
		top: 10px;
	}
	.coordinate-intro li:nth-child(odd) .coordinate-img{
		left: 0;
	}
	.coordinate-intro li:nth-child(even) .coordinate-img{
		right: 0;
	}
	.coordinate-intro .more-btn{
		width: 80%;
		margin: 30px auto 0;
	}
	.coordinate-txt{
		line-height: 1.8;
		font-weight: 400;
	}
}

/* --------------------スタッフブログ------------------- */
.staff-blog-list{
	display: grid;
}
.staff-blog-list article{
	display: flex;
}
.staff-blog-meta{
	flex: 1;
}
.staff-blog-meta time{
	font-weight: 900;
	display: block;
}
.staff-blog-meta a{
	color: var(--RED01);
	text-decoration: underline;
}
@media screen and (min-width: 768px){
  .staff-blog-list{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 40px;
		margin-bottom: 50px;
	}
	.staff-blog-list article{
		border-top: 1px solid var(--BLACK);
		border-bottom: 1px solid var(--BLACK);
		padding: 20px 0;
	}
	.staff-blog-list article:nth-of-type(3),
	.staff-blog-list article:nth-of-type(4){
		border-top: none;
	}
	.staff-blog-thumb{
		width: 120px;
		margin-right: 20px;
	}
	.staff-blog-meta time{
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 767px){
	.staff-blog-thumb{
		width: 120px;
		margin-right: 20px;
	}
	.staff-blog-meta time{
		margin-bottom: 8px;
	}
	.staff-blog-list{
		margin-bottom: 30px;
	}
	.staff-blog-list article{
		border-bottom: 1px solid var(--GRAY04);
		padding: 20px 0;
	}
	.staff-blog-list article:first-child{
		border-top: 1px solid var(--GRAY04);
	}
	.staff-blog-sec .more-btn{
		width: 80%;
	}
	.staff-blog-meta a{
		font-size: 12px;
	}
}




/* --------------------SNS------------------- */
.sns-sec{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.sns-ttl span{
	display: block;
}
.sns-ttl .txt{
	font-weight: 700;
}
.sns-link{
	display: grid;
}
.sns-sec .sns-link{
	grid-template-columns: repeat(3, 1fr);
	position: relative;
}
.sns-sec .sns-link::before{
	content: "";
	display: inline-block;
	background: url(../../asset2023/images/common/follow-me.svg) no-repeat center center / 100%;
	aspect-ratio: 300 / 54;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.sns-link li a{
	background-color: var(--WHITE);
	box-shadow: var(--BOX_SHADOW);
	border-radius: 50%;
	display: block;
	aspect-ratio: 1 / 1;
	background-repeat: no-repeat;
	background-position: center center;
}
.sns-link li.twitter a{
	background-image: url(../../asset2023/images/common/x.svg);
}
.sns-link li.facebook a{
	background-image: url(../../asset2023/images/common/facebook.svg);
}
.sns-link li.insta a{
	background-image: url(../../asset2023/images/common/insta.svg);
}
.sns-link li.youtube a{
	background-image: url(../../asset2023/images/common/youtube.svg);
}
.sns-link li.line a{
	background-image: url(../../asset2023/images/common/line.svg);
}
.sns-link li.mailblack a{
	background-image: url(../../asset2023/images/common/mailblack.svg);
}
.sns-link li.pinterest a{
	background-image: url(../../asset2023/images/common/pinterest.svg);
}
@media screen and (min-width: 768px){
  .sns-sec{
		background-image: url(../../asset2023/images/common/sns-bg.jpg);
		display: flex;
		justify-content: center;
		gap: 8%;
		padding: 100px 0 60px;
	}
	.sns-ttl{
		width: fit-content;
	}
	.sns-ttl .txt{
		font-size: clamp( 25px, 3vw, 36px);
		text-align: center;
	}
	.sns-ttl .img{
		width: 80%;
		margin: 0 auto;
	}
	.sns-sec .sns-link{
		width: 30%;
		gap: 20px;
	}
	.sns-sec .sns-link::before{
		width: 130px;
		bottom: 110%;
	}
	.sns-sec .sns-link li a{
		background-size: 30%;
	}
}
@media screen and (max-width: 767px){
  .sns-sec{
		background-image: url(../../asset2023/images/common/sp/sns-bg.jpg);
		padding: calc(var(--GENERALSEC) / 1.2) 0;
		margin-bottom: calc(var(--GENERALSEC) / 2);
	}
	.sns-ttl{
		margin-bottom: 20px;
	}
	.sns-ttl .txt{
		font-size: 20px;
		text-align: center;
	}
	.sns-ttl .img{
		width: 85%;
		margin: 0 auto;
	}
	.sns-sec .sns-link{
		width: 85%;
		margin: 80px auto 0;
		column-gap: 15px;
		row-gap: 20px;
	}
	.sns-sec .sns-link::before{
		width: 150px;
		bottom: 110%;
	}
	.sns-sec .sns-link li a{
		background-size: 40%;
	}
}
/* --------------------ショッピングガイド------------------- */
.shopping-guide-sec{
	background-color: var(--BEIGE01);
}

@media screen and (min-width: 768px){
  .shopping-guide-sec{
		padding: var(--GENERALSEC) 0;
	}
	.shopping-guide-list{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		align-items: stretch;
		gap: 20px;
	}
	.shopping-guide-list li a{
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: var(--WHITE);
		box-shadow: var(--BOX_SHADOW);
		padding: 30px 20px;
		position: relative;
	}
	.shopping-guide-list li a::after{
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 20px 20px;
		border-color: transparent transparent var(--RED01) transparent;
		position: absolute;
		bottom: 10px;
		right: 10px;
	}
	.shopping-guide-list li a img{
		width: 60%;
		margin: 0 auto;
	}
	.shopping-guide-list li a h3{
		font-weight: 700;
		color: var(--RED01);
		text-align: center;
		margin: 10px 0;
		font-size: 17px;
	}
	.shopping-guide-list li a p{
		font-size: 14px;
		font-weight: 400;
		flex: 1;
	}
}
@media screen and (max-width: 767px){
	.shopping-guide-sec{
		padding: calc(var(--GENERALSEC) / 2) 0;
	}
	.shopping-guide-list li{
		border-bottom: 1px solid var(--GRAY05);
	}
	.shopping-guide-list li a{
		display: flex;
		align-items: center;
		background: url(../../asset2023/images/common/link-arrow.svg) no-repeat right 15px center / 7px;
		padding: 10px;
	}
	.shopping-guide-list li img{
		width: 40px;
		margin-right: 10px;
	}
	.shopping-guide-list li h3{
		flex: 1
	}
}


/* -------------------SP固定アイコン------------------- */
@media screen and (max-width: 767px){
	.sp-fixed-top{
		justify-content: space-between;
		position: fixed;
		bottom: 75px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 4;
	}
	.sp-fixed-top li a{
		aspect-ratio: 1 / 1;
		border: 1px solid var(--WHITE);
		display: block;
		width: 40px;
		background-color: var(--RED01);
		background-repeat: no-repeat;
		background-position: center center;
	}
	.sp-fixed-top li.search a{
		background-image: url(../../asset2023/images/common/search.svg);
		background-size: 20px;
	}
	.sp-fixed-top li.pagetop a{
		background-image: url(../../asset2023/images/common/pagetop.svg);
		background-size: 12px;
		border-radius: 50%;
	}
	.sp-fixed-bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		border: 1px solid var(--WHITE);
		border-left: none;
		border-right: none;
		z-index: 999;
	}
	body.cart-popup .sp-fixed-bottom{
		z-index: 1;
	}
	.sp-fixed-bottom li{
		flex: 1;
	}
	.sp-fixed-bottom li:not(:last-child){
		border-right: 1px solid var(--WHITE);
	}
	.sp-fixed-bottom li a{
		display: block;
		background-color: var(--RED01);
		height: 65px;
		background-repeat: no-repeat;
		background-position: top 15px center;
		background-size: 25px;
		position: relative;
	}
	.sp-fixed-bottom li.beginner a{
		background-image: url(../../asset2023/images/common/sp_icon-beginner.svg);
	}
	.sp-fixed-bottom li.history a{
		background-image: url(../../asset2023/images/common/sp_icon-history.svg);
	}
	.sp-fixed-bottom li.mypage a{
		background-image: url(../../asset2023/images/common/sp_icon-mypage.svg);
	}
	.sp-fixed-bottom li.cart a{
		background-image: url(../../asset2023/images/common/sp_icon-cart.svg);
		position: relative;
	}
	.sp-fixed-bottom li.shopguide a{
		background-image: url(../../asset2023/images/common/sp_icon-shopguide.svg);
		position: relative;
	}
	.sp-fixed-bottom li.faqguide a{
		background-image: url(../../asset2023/images/common/sp_icon-faq.svg);
		position: relative;
	}
	.sp-fixed-bottom li.reviewguide a{
		background-image: url(../../asset2023/images/common/sp_icon-review.svg);
		position: relative;
	}
	.sp-fixed-bottom li a::after{
		color: var(--WHITE);
		font-size: 10px;
		display: inline-block;
		transform-origin:0 0;
		position: absolute;
		left: 52%;
		transform: translateX(-50%) scale(0.9);
		bottom: 5px;
		white-space: nowrap;
	}
	.sp-fixed-bottom li.hamburger-ps a.hamburger::after{
		content: 'MENU';
	}
	.sp-fixed-bottom li.hamburger-ps a.hamburger.active::after{
		content: 'CLOSE';
	}
	.sp-fixed-bottom li.beginner a::after{
		content: '初めての方へ';
	}
	.sp-fixed-bottom li.history a::after{
		content: '閲覧履歴';
	}
	.sp-fixed-bottom li.mypage a.login::after{
		content: 'ログイン';
	}
	.sp-fixed-bottom li.mypage a.logout::after{
		content: 'マイページ';
	}
	.sp-fixed-bottom li.cart a::after{
		content: 'カート';
	}
	.sp-fixed-bottom li.shopguide a::after{
		content: 'ご利用ガイド';
	}
	.sp-fixed-bottom li.faqguide a::after{
		content: 'よくある質問';
	}
	.sp-fixed-bottom li.reviewguide a::after{
		content: 'レビューを見る';
	}

}
/* カウント */
.fs-client-cart-count{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	width: 20px;
	position: absolute;
	top: 5px;
	font-weight: 900;
	font-size: 10px;
}
@media screen and (min-width: 768px){
	.h-link li.cart{
		position: relative;
	}
	.fs-client-cart-count{
		color: var(--WHITE);
		background-color: var(--RED01);
		right: -15px;
		top: -5px;
	}
}
@media screen and (max-width: 767px){
	.fs-client-cart-count{
		color: var(--RED01);
		background-color: var(--WHITE);
		right: 10%;
	}
}




/* ■■■■■■■■■■■■■■■■■■■■-footer■■■■■■■■■■■■■■■■■■■■ */
.contact-btn a{
	background-color: var(--RED01);
	border-radius: 70px;
	color: var(--WHITE) !important;
	display: block;
	text-align: center;
}
.contact-btn span{
	display: inline-block;
	background-image: url(../../asset2023/images/common/mail.svg);
	background-repeat: no-repeat;
	background-position: left center;
}
.f-tel{
	display: flex;
	align-items: center;
}
footer .iframe-hassou-area{
	background-color: var(--YELLOW01);
}
.iframe-hassou{
	width: 100%;
}
.f-copy-area{
	background-color: var(--RED01);
	text-align: center;
}
.tokusho a{
	color: var(--WHITE) !important;
	text-decoration: underline;
	margin: 0 15px;
}
.f-copy{
	font-weight: 500;
	color: var(--WHITE);
}
@media screen and (min-width: 768px) and (max-width: 1000px){
	footer .pc-inner-m{
		flex-direction: column;
	}
	.f-logo-area{
		margin: 0 auto;
	}
	.f-guide{
		justify-content: center;
	}
}
@media screen and (min-width: 768px){
	.f-inner{
		width: 95%;
		max-width: 960px;
		display: flex;
		margin-left: auto;
		margin-right: auto;
	}
	footer .pc-inner-m{
		display: flex;
		gap: 50px;
		padding: var(--GENERALSEC) 0 calc(var(--GENERALSEC) / 2);
	}
	.f-logo-area{
		width: fit-content;
	}
	.f-contact{
		margin: 15px 0 10px;
	}
	.f-contact span{
		padding: 10px 0 10px 40px;
		background-size: 25px;
	}
	.f-hours{
		font-size: 13px;
		text-align: center;
	}
	.f-tel{
		justify-content: space-between;
	}
	.f-window{
		font-size: 14px;
	}
	.f-number{
		font-size: 25px;
		padding-left: 15px;
		background-size: 8px;
	}
	.f-guide-area{
		flex: 1;
	}
	footer .iframe-hassou-area{
		padding: 8px 0 3px;
		margin-bottom: 20px;
	}
	.f-guide-area .iframe-hassou{
		height: 40px;
	}
	.iframe-hassou-area{
		padding: 8px 0 3px;
		margin-bottom: 20px;
	}
	.f-guide{
		justify-content: center;
	}
	.f-guide > li{
		position: relative;
	}
	.f-guide > li:not(:last-child){
		padding-right: 30px;
		margin-right: 25px;
	}
	.f-guide > li:not(:last-child)::after{
		--DOTSIZE: 8px;
		content: "";
		background-color: transparent;
		background-image:
		radial-gradient(var(--RED01) 30%, transparent 10%);
		background-size: var(--DOTSIZE) var(--DOTSIZE);
		background-repeat: repeat-y;
		width: 10px;
		height: 100%;
		position: absolute;
		right: -5px;
		top: 0;
	}
	.f-guide > li > ul{
		display: grid;
		gap: 5px
	}
	.f-guide a{
		color: var(--RED01) !important;
		text-decoration: underline;
		font-size: 14px;
	}
	.f-copy-area{
		padding: 15px 0;
	}
	.tokusho{
		margin-bottom: 5px;
	}
	.tokusho a{
		font-size: 14px;
	}
	.f-copy{
		font-size: 12px;
	}
}
@media screen and (max-width: 767px){
	footer{
		padding: calc(var(--GENERALSEC) / 2) 0 70px;
	}
	footer .pc-inner-m{
		display: grid;
	}
	.f-logo-area,
	.f-guide-area{
		display: contents;
	}
	footer .iframe-hassou-area{
		order: 1;
		padding: 8px 0 5px;
		margin-bottom: 30px;
	}
	.f-guide-area .iframe-hassou{
		height: 62px;
	}
	.f-logo{
		order: 2;
		width: 80%;
		max-width: 375px;
		margin: 0 auto 20px;
	}
	.f-contact{
		order: 3;
		width: 80%;
		max-width: 375px;
		margin: 0 auto 20px;
	}
	.f-contact span{
		padding: 10px 0 10px 40px;
		background-size: 25px;
	}
	.f-hours{
		order: 4;
		text-align: center;
		font-size: 12px;
	}
	.f-tel{
		order: 4;
		justify-content: center;
		margin-bottom: 30px;
		gap: 15px;
	}
	.f-number{
		font-size: 25px;
		padding-left: 12px;
		background-size: 8px;
		background-position: left top 10px;
	}
	.f-copy-area{
		padding: 15px 0;
		background: #686868;
	}
	.tokusho{
		margin-bottom: 5px;
	}
	.tokusho a{
		font-size: 13px;
	}
	.f-copy{
		font-size: 10px;
	}
}







/* ■■■■■■■■■■■■■■■■■■■■FS内部■■■■■■■■■■■■■■■■■■■■ */
.logout.my-false { display: none; }
.login.my-true { display: none; }
.fs-client-cart-count--0{display: none;}
#wrapper{
	margin-left: auto;
	margin-right: auto;
	width: var(--WRAPPER_WIDTH);
	max-width: var(--WRAPPER_MAX_WIDTH);
}
@media screen and (min-width: 768px){
	:root{
		--WRAPPER_WIDTH: 95%;
		--WRAPPER_MAX_WIDTH: 1300px;
	}
	main{
		flex: 1;
	}
	#wrapper > .flex{
		align-items: flex-start;
	}
}
@media screen and (max-width: 767px){
	:root{
		--WRAPPER_WIDTH: 92%;
	}
}
/* サイド */
@media screen and (min-width: 951px){
	.sidearea{
		display: grid;
	}
}
@media screen and (min-width: 758px) and (max-width: 950px){
	.sidearea{
		display: none;
	}
}
@media screen and (min-width: 768px){
	.sidearea{
		width: 240px;
		margin-right: 50px;
		gap: 20px;
	}
	.side-bnr{
		display: grid;
		gap: 10px;
	}
	.side-feature .slick-arrow {
		transition: all  0.5s;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
	}
	.side-feature .slick-arrow:hover{
		cursor: pointer;
		opacity: 0.7;
	}
	.side-feature .prev-arrow {
		left: 0;
	}
	.side-feature .next-arrow {
		right: 0;
	}
	.side-feature .prev-arrow:before,
	.side-feature .next-arrow:before{
		font-family: "Font Awesome 5 Pro"; 
		font-weight: 900;
		font-size: 20px;
		color: var(--RED01);
	}
	.side-feature .prev-arrow:before{
		content: "\f137";
	}
	.side-feature .next-arrow:before{
		content: "\f138";
	}
	.side-link-ttl{
		background-color: var(--RED01);
		color: var(--WHITE);
		padding: 6px 12px 8px;
		font-size: 16px;
	}
	.side-link .side-none{
		display: none;
	}
	.side-link > li:not(:last-child){
		border-bottom: 1px solid var(--GRAY04);
	}
	.side-link > li a{
		display: block;
		padding: 10px;
	}
	.side-link > li a:hover{
		background-color: rgba(194, 86, 89, 0.1);
	}
	.side-link > li.parent a{
		font-weight: bold;
		font-size: 14px;
	}
	.side-link > li ul.child li{
		border-top: 1px solid var(--GRAY04);
	}
	.side-link > li ul.child a{
		padding-left: 30px;
		font-weight: 400;
		position: relative;
		letter-spacing: 0px;
	}
	.side-link > li ul.child a::before{
		content: '-';
		position: absolute;
		left: 14px;
		top: 50%;
		transform: translateY(-50%);
	}
	.side-guide li:not(:last-child){
		border-bottom: 1px solid var(--GRAY06);
	}
	.side-guide li a{
		display: block;
		font-size: 14px;
		padding: 15px;
		background: var(--GRAY03);
	}
	.side-guide li a:hover{
		background: var(--WHITE); 
	}
}
/* 商品マーク */
.fs-c-productMark{
	gap: 5px;
}
.fs-c-productMark__mark{
	width: fit-content;
}
.fs-c-productMark li,
.fs-c-productMark span{
	margin: 0;
}
.fs-c-productMark img{
	width: auto;
	height: 20px;
}
/* パンくず */
.fs-c-breadcrumb li a {
	text-decoration: underline;
}
.fs-c-breadcrumb li,
.fs-c-breadcrumb li a {
	color: #000;
}
@media screen and (min-width: 768px) {
	.fs-c-breadcrumb {
		margin: 15px 0 25px;
		font-size: 12px;
	}
}
@media screen and (max-width: 767px) {
	.fs-c-breadcrumb {
		margin: 8px 0;
		font-size: 11px;
	}
}
/* レビューメモ風 */
.fs-c-reviewList__item__product {
  display: flex;
  flex-flow: column;
	padding:0!important;
}
.fs-c-reviewList__item {
	background-image:
	linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
	background-size: 8px 100%,100% 2em;
	line-height: 2;
	color: #696969;
	font-weight: bold;
	padding: 0 3%;
	border:solid #ddd 1px;
	background-color:#fff6e6!important;
}
.fs-c-productName__name {
	color: #696969;
}
.fs-c-reviewProduct__info {
	float:left!important;
	display:block;
}
.fs-c-reviewer__name span {
	color: #696969!important;
}

.fs-c-reviewer__name span {
	color: #696969!important;
}
.fs-c-reviewList__item__body {
	border:none!important;
}
.fs-c-reviewProduct__image {
	margin:5% 0;
	padding:2%;
	background:#ffffff;
	box-shadow: 0 2px 3px rgba(0,0,0,.22);
}
.fs-c-reviewInfo__stars {
	margin-top:8%;
}
.fs-c-reviewInfo__reviewer {
	margin-top:-2%;
}
.fs-c-reviewBody {
	margin-top:4%!important;
}
/* visumo */
@media (min-width: 721px) {
.ecbn-selection-snap-image {
	height:700px!important;
}
.ecbn-selection-item {
	padding:0 5px!important;
}
}
.ecbn-selection-detail--free-comment1 {
	padding-top:5%!important;
}

@media screen and (min-width: 720px){
.vsm-gallery .ecbn-selection-page-wrapper li.ecbn-selection-item {
	width: calc(100% / 4)!important;
}
.ecbn-selection-item .ecbn-selection-detail--free-comment .ecbn-selection-free-comment {
	font-size: 14px!important;
	font-weight: 700!important;
}
}

@media screen and (max-width: 720px){
.vsm-gallery .ecbn-selection-page-wrapper li.ecbn-selection-item {
	width: calc(100% / 2)!important;
}
.ecbn-selection-item .ecbn-selection-detail--free-comment .ecbn-selection-free-comment {
	font-size: 11px!important;
	font-weight: 500!important;
}
}

@media (min-width: 721px) {
	body .vsm_wrap .vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item > div > a,
body .vsm_wrap .vsm-goods .ecbn-selection-wrapper li.ecbn-selection-item > div > a,
body .vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item > div > a,
body .vsm-goods .ecbn-selection-wrapper li.ecbn-selection-item > div > a {
	height: 285px;
	}
}
@media (max-width: 720px) {
  body .vsm_wrap .vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item > div > a,
body .vsm_wrap .vsm-goods .ecbn-selection-wrapper li.ecbn-selection-item > div > a,
body .vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item > div > a,
body .vsm-goods .ecbn-selection-wrapper li.ecbn-selection-item > div > a {
    padding-top: 126.6666%;
  }
}
body .vsm-gallery .ecbn-selection-page-wrapper li.ecbn-selection-item > div > a,
body .vsm-tile .ecbn-selection-page-wrapper li.ecbn-selection-item > div > a,
body .vsm-tile-goods .ecbn-selection-page-wrapper li.ecbn-selection-item > div > a {
  padding-top: 126.6666%;
}

.ecbn-selection-powered-pre {
	display: none;
}
.ecbn-visumo-logo {
	display: none!important;
}
@media (max-width: 720px) {
 .vsm-goods .ecbn-selection-wrapper li.ecbn-selection-item,.vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item {
	width: calc(50vw - 4px)!important;
	}
	.ecbn-selection-wrapper .ecbn-selection-slider-controls-direction a.ecbn-selection-slider-prev {
		top: calc(30.66667vw - 1px)!important;
	}
	.ecbn-selection-wrapper .ecbn-selection-slider-controls-direction a.ecbn-selection-slider-next {
		top: calc(30.66667vw - 1px)!important;
	}
}
@media (max-width: 720px) {
.staffcode-gallery .staffcode-galleryselection li.staffcode-galleryselection-item {
	width: calc(28.3vw - 4px)!important;
	margin:3%;
}
.staffcode-galleryselection-item {
	float:left;
}
.staffcode-gallery{
	margin:15% 0;
}
}
@media (min-width: 721px) {
.staffcode-gallery .staffcode-galleryselection li.staffcode-galleryselection-item {
	margin:2%;
}
.staffcode-galleryselection-item {
	float:left;
}
.staffcode-gallery{
	margin:15% 0;
}
}
.staffcode-galleryselection-item p{
	text-align:center;
}
.staffcode-gallery {
	overflow:hidden;
}
ul.imgft2 li {
	list-style-type: none;
	display: table-cell;
	vertical-align: middle;
	width: calc(50vw - 5px)!important;
}
.imgPR {
	text-align:center;
	font-size:125%;
}
.staff:before{
	content:"STAFF";
	display:block;
	font-size:80%;
	color:#b6232a;
	font-weight:700;
}
.designer:before{
	content:"DESIGNER";
	display:block;
	font-size:80%;
	color:#b6232a;
	font-weight:700;
}
ul.imgft2 img {
	box-shadow: 5px 10px 30px -9px #bababa;
	border-radius:100px;
	background-color:#ffffff;
	padding:2%;
}
/* -----------------ポップアップ共通css----------------- */
body.fixed {
	position: fixed;
	width: 100%;
	overflow: hidden;
}
.popup-overlay {
	display: none; 
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}
.popup-overlay.fixed{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
.popup-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--WHITE);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.popup-overlay .popup-box{
	overflow-y: scroll;
}
.popup-overlay button.closePopup{
	position: absolute;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: 1px solid #fff;
	background-color: #A32328;
	top: 0px;
	right: 0px;
	transform: translate(50%, -50%);
}
.popup-overlay button.closePopup::before{
	font-family: 'Font Awesome 5 Pro';
	font-weight: 500;
	content: '\f00d';
	display: block;
	line-height: 1;
	height: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}
@media screen and (min-width: 768px){
	.popup-overlay .popup-content{
		width: 95%;
		max-width: 900px;
	}
	.popup-overlay .popup-box{
		padding: 50px 30px;
		max-height: 90vh;
	}
	.popup-overlay button.closePopup{
		width: 40px;
	}
	.popup-overlay button.closePopup::before{
		font-size: 23px;
	}
}
@media (hover: hover){
	.popup-overlay button.closePopup:hover{
		cursor: pointer;
	}
}
@media screen and (max-width: 767px){
	.popup-overlay .popup-content{
		width: 90%;
	}
	.popup-overlay .popup-box{
		padding: 30px 15px;
		max-height: 80vh;
	}
	.popup-overlay button.closePopup::before{
		font-size: 23px;
	}
	.popup-overlay button.closePopup{
		width: 30px;
	}
	.popup-overlay button.closePopup::before{
		font-size: 18px;
	}
}
.reason-bg{
	background-color: #F7F3E7;
	position:relative;
}

.reason-bg::after,
.reason-bg::before{
	content: "";
	background-size: contain;
	background-position: center;
	position: absolute;
	background-repeat: no-repeat;
	left: 50%;
	transform: translateX(-50%);
}
.point-flex{
	margin-bottom: 80px;
	display: flex;
	justify-content: space-around;
}
.point-flex.reverse{
	flex-direction: row-reverse;
}
.reason-ttl{
	margin-bottom: 30px;
	letter-spacing: 0.12em;
}
.three-parts-area{
	position: relative;
}
.three-parts{
	position: absolute;
	width: 30px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.reason-ttl,
.point-txt .en{
	color: var(--RED01);
	font-weight: 900;
	text-align: center;
}
.en-ttl{
	margin-bottom: 20px;
}
.point-txt .en.noto{
	color: var(--RED01);
	font-weight: 900;
	line-height: 1.2;
}
.en-num{
	display: block;
	font-size: 50px;
	margin-bottom: 10px;
}
.reason-catch{
	text-align: center;
	margin-bottom: 50px;
}

@media screen and (min-width: 768px){
	.border-left{
	border-left: 2px solid rgb(73,25,29,.5);
	border-right: 2px solid rgb(73,25,29,.5);
	}
	.reason-sec {
	padding: 50px 0;
}
	.reason-bg{
	margin-bottom: 150px;
	padding: 61px 32px;
	}
	.reason-bg::after,
	.reason-bg::before{
	width: 100%;
	height: 23.5px;
	}
	.reason-bg::before{
	background-image: url(/asset2023/images/mens/point-top.svg);
	top: 30px;
	}
	.reason-bg::after{
	background-image: url(/asset2023/images/mens/point-bottom.svg);
	bottom: 30px;
	}
	.point-txt{
	width: 50%;
	}
	.point-img{
	width: 40%;
	}
	.reason-ttl .en{
	font-size: 50px;
	}
	.reason-ttl .ja{
	font-size: 34px;
	}
	.en-ttl{
	font-size: 22px;
	}
	.reason-catch{
	font-size: 23px;
	color: #49191D;
	}
}
@media screen and (max-width: 767px){
	.border-left{
	border-left: 1px solid rgb(73,25,29,.5);
	border-right: 1px solid rgb(73,25,29,.5);
	}
	.reason-sec{
	width: 90%;
	margin: 0 auto;
	padding: 30px 0 10px;
	}
	.reason-bg{
	margin-bottom: 150px;
	padding: 27px 12px;
	}
	.reason-bg::after,
	.reason-bg::before{
	width: 100%;
	height: 13.5px;
	}
.reason-bg::before{
	background-image: url(/asset2023/images/mens/sp/point-top-sp.svg);
	top:10px;
}
.reason-bg::after{
	background-image: url(/asset2023/images/mens/sp/point-bottom-sp.svg);
	bottom: 10px;
}
.point-flex{
	flex-wrap: wrap;
}
.point-flex:last-child{
	margin-bottom: 20px;
}
.point-txt{
	width: 100%;
	order: 2;
}
.en-ttl {
	margin-bottom: 10px;
}
.point-img{
	order: 1;
	width: 100%;
	margin-bottom: 30px;
}
.reason-ttl .en{
	font-size: 25px;
}
.reason-ttl .ja{
	font-size: 18px;
}
.new-bnr{
 	margin-bottom: 50px;
}
.three-parts{
 	top: -5px;
}
.point-txt .en.noto {
 	line-height: 1;
}
}
/* -----------------柄で選ぶ説明文章css----------------- */
.discribepattern {
	padding:5%;	
}
.discribepattern h2,
.discribepattern h1{
	margin:2% 0;
	color:#b6232a;
	font-weight:900;
	font-size: 140%;
}
.discribepattern p{
	margin:3% 0;
	font-size:110%;
	line-height:20px;	
}
.kariyushi-video-inner{
	margin-inline:auto;
	max-width: 800px;
}
.kariyushi-video-inner iframe{
	aspect-ratio: 560 / 315;
	width: 100%;
	margin-bottom: 1em;
}
.kariyushi-video-inner p{
	line-height: 2;
}
@media screen and (min-width: 768px){
	.kariyushi-video-inner{
	width: 85%;
	margin-block: 60px;
	}
	.tategaki-pc{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	}
	.more-btn-add {
	width: 320px;
	}
	.more-btn-add a{
	font-size: 16px;
	padding: 16px 0 18px;
	background-size: 15px;
	background-position: right 20px center;
	}
}
@media screen and (max-width: 767px){
	.kariyushi-video-inner{
	margin-bottom: 40px;
	}
	.more-btn-add a {
	font-size: 13px;
	padding: 10px 0 12px;
	background-size: 12px;
	background-position: right 15px center;
	}
	.more-btn-add {
	width: 80%;
	max-width: 375px;
	margin: 0 auto;
	}
}
.design_movie-sec-ttl{
	background-color: var(--RED01);
	color: var(--WHITE);
	text-align: center;
	font-weight: 700;
}
.design_movie-sec-ttl{
	padding: 8px 10px;
	font-size: 20px;
	margin: 30px 0;
}
.design_movie-sec-ttl{
	font-size: 16px;
	padding: 7px 0 8px;
	margin-bottom: 20px;
}
.fs-c-featuredProduct__list {
	margin:3%;
}
fs-c-productPrice__main__addon__label,.fs-c-productPrice__main__joint {
	color:#a32328;
	font-size:80%!important;
}
.cp_stepflow07 {
	font-size: 80%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0 0 5px;
	padding: 0;
	position: relative;
	z-index: 1;
	gap: 0 10px;
	justify-content: center;
}

.cp_stepflow07::after {
	content: "";
	width: 220px;
	height: 3px;
	background: #2e8b57;
	z-index: -1;
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%);
}
.cp_stepflow07 > li {
	background: url(https://www.mangohouse.jp/asset2023/images/cart/step_nocolor.jpg) no-repeat center top / 50px;
	padding-top: 60px;
	min-width: 70px;
	text-align: center;
}
.cp_stepflow07 > li.active {
	background: url(https://www.mangohouse.jp/asset2023/images/cart/step_color.jpg) no-repeat center top / 50px;
	padding-top: 60px;
	color: #b6232a;
}
.cart-btn-last {
	background-color:#b6232a;
	color:#fff;
	text-align:center;
	border-radius:0%;
	border:#999999;
	padding:4% 8%;
	margin:10% 0;
}
.kariyushi-video-innerSP{
	text-align:center;
}
.kariyushi-video-innerSP iframe{
	aspect-ratio: 400 / 710;
	width: 70%;
	margin-bottom: 1em;
}
/* -----------------カートボタンっぽくするcss----------------- */
.fs-c-cartPayment__button a,
.fs-c-buttonContainer--purchaseHere a{
	box-shadow: 0 3px 4px 0 #696969!important;
}
.cart-btn-last,
.fs-c-button--primary ,
.fs-c-button--subscribeToArrivalNotice--variation ,
.fs-c-button--addToCart--variation,
.cart-btn-trigger {
	box-shadow: 0 3px 4px 0 #696969;
	border-radius:5px;
}

/* スピード検証追加css */
@media screen and (max-width: 767px){
	.test-scroll{
		overflow-y: hidden;
		overflow-x: scroll;
		margin-bottom: 30px;
		padding: 20px 10px;
	}
	.test-scroll .designer-list,
	.test-scroll .product-list{
		width: fit-content;
		display: flex;
		gap: 10px;
		padding-bottom: 0;
	}
	.test-scroll .designer-list li{
		min-width: 150px;
	}
	.test-scroll .product-list article{
		min-width: 190px;
	}
}
.pattern-list,
.more-btn,
.popup-adserch-btn,
.designer-sec{
	position: relative;
	z-index: 4;
}
.container_material {
	position: relative;
}
.container_material p {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	font-size:110%!important;
	text-align:center;
}
.line_login {
	margin:4% ;
	text-align:center;
}

/* スライダー調整用 */
.slick-arrow{
	cursor: pointer;
}

.ecbn-selection-powered-name {
	display:none!important;
}
.lineContact-btn{
	background-color: #a32328;
	position: fixed;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	z-index: 10;
}
.FixBtn img {
	margin: 0 auto;
}
.FixBtn span{
	color: #fff;
	width: 100%;
	display: block;
	font-size: 12px;
	text-align: center;
	font-weight: bold;
}
/* ライン追従ボタン */
@media screen and (min-width: 768px){
	.lineContact-btn{
		bottom: 30px;
		right: 30px;
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}
	.FixBtn img {
		width: 40%;
	}
	.lineContact-btn:hover{
		opacity: .8;
	}
	.FixBtn span{
		font-size: 12px;
	}
  /* ×ボタン */
  .mh-hide-contact-x{
    display:none;
  }
}
@media screen and (max-width: 767px){
	.lineContact-btn{
		left: 50%;
		transform: translateX(-50%);
		gap: 3px;
		width: 60%;
		margin: 0 auto;
		border-radius: 25px;
		justify-content: space-between;
		position: fixed;
		bottom: 75px;
		z-index: 9999!important;
	}
	.lineContact-btn a{
		display: flex;
		align-items: center;
		padding: 5px 0;
		}
	.FixBtn img {
		width: 40px;
	}
	.FixBtn span{
		font-size: 15px;
		line-height: 1.2;
	}
  /* ×ボタン */
  .mh-hide-contact-x{
    position:absolute; inset:-15px -35px auto auto;
    width:40px; height:40px; line-height:24px;
    border:0; border-radius:9999px;
    background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15);
    font-size:16px; cursor:pointer; text-align:center;
	color:#000000;
  }
  .mh-contact-btn-wrap{ position:relative; display:inline-block; }
  /* ボタンが block でも崩れないように */
}
@media screen and (max-width: 375px){
	.lineContact-btn{
		bottom: 12%;
	}
}
  /* VISUMO 前、次ボタン */
.ecbn-selection-slider-prev,
.ecbn-selection-slider-next{
	z-index: 0!important;
}
/* タブを最前面に */
.tab-btn { position: relative; z-index: 10; pointer-events: auto; }
.fs-c-productListItem__image__image {
 margin:auto;
}