@charset "utf-8";



/* ==================================================

������������������PC���ޥ��ڤ��ؤ�����������������

================================================== */

.pc { /*display: block !important;*/ }
.sp { display: none !important; }
.none{display: none;}

.tab_none{display: none}





/* ==================================================

�������������������ꥻ�å�CSS����������������

================================================== */
/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 | 20110126
	License: none (public do.item_box)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	/* vertical-align: baseline; */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

sub{
	vertical-align: -webkit-baseline-middle
}



/* ==================================================

�������������������������ꡡ��������������

================================================== */

/*��IE�Ǥ�Material Iconsɽ����ɬ��*/
body {
	text-rendering: optimizeLegibility;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures contextual;
	font-feature-settings: "kern", "liga", "clig", "calt";
	font-family: -apple-system, blinkMacSystemFont, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	overflow-x: hidden;
	/*background-color: #f5f5f5;*/
	
	background:linear-gradient(120deg, #f5f5f5,#f5f5f5,#a7e7f6);
	background-size: 200% 200%;
	animation: bggradient 7s ease infinite;
	
}

img {
	max-width: 100%;
	width: 100%;
	margin: 0;
	border: 0;
	vertical-align: bottom;
}

ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
a {text-decoration: none;color: #000;display: inline-block;}


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


.price span > span > span{display: none;}/*�ǹ���ʸ����ɽ��*/



/* ==================================================

����������������������ƥ�������ꡡ��������������

================================================== */

#summer_item .main{
	width: 100%;
	margin: 0 auto;
	background: -moz-linear-gradient(left, #9fd8f6, #f2fbfd, #9fd8f6);
	background: -webkit-linear-gradient(left, #9fd8f6, #f2fbfd, #9fd8f6);
	background: linear-gradient(to right, #9fd8f6, #f2fbfd, #9fd8f6);
	background: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587884/image/summer_item2025/summer2025_bg.jpg) repeat-y;
	background-size: 100%;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	padding-top: 50px;
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
#summer_item .c_wrap{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	position: relative;
    /* z-index: 1; */
}


/*base text*/

#summer_item .cate_img{    
	margin: 0 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	font-weight: 600;
}

.tub a {text-decoration: none;color: #000;display: inline-block; width: 246px;}

#summer_item h3{
	    text-align: center;
        font-size: 40px;
        color: #3594b6;
        font-weight: 600;
        /* background-color: #3594b6; */
        border-top: 1px solid;
        border-bottom: 1px solid;
        padding: 30px 0;
        margin-top: 30px;
}

#summer_item h4.top{
	color:#2c4997;
    font-size: 30px;
}

#summer_item .title2>h2{ 
	margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 3rem;
    justify-content: center;
    color: white;
    font-weight: 900;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 0px 1px 0 #000, 0-1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;}



/* ==================================================

�����������������������ץ˥󥰡�����

================================================== */
/* Loading�طʲ������ꡡ*/
#splash {
    /*fixed�����̤˸���*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  	background:linear-gradient(120deg, #f5f5f5,#f5f5f5,#a7e7f6);
  text-align:center;
  color:#fff;
}

/* Loading����������֡�*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading ����������礭�����ꡡ*/
#splash_logo img {
  width:700px;
}

/* fadeUp�򤹤륢�������ư�� */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* ==================================================

���������������������ġ�TOP������

================================================== */

#summer_item .kanban{
	position: relative;background-color: #f5f5f5;
}




.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.arrow{
    position: absolute;
    top: 45%;
	width: 20px!important;
	padding: 0!important;
 	animation-name: anim;
}

@keyframes anim {
  0% {
    transform: translate(2px, 0);
  }
  100% {
    transform: translate(15px, 0);
  }
}

/* ==================================================

�����������������������ʥӡ�����������������

================================================== */

nav{ 
	font-size: 0.8rem;
	font-weight: 600;
    position: fixed;
	z-index: 900;
    right: 0;
    top: 0;
    height: 100vh;
    border-left: 1px solid;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 220px;
}

nav p{
	display: flex;
	align-items: center; 
	padding: 10px 0;
}

nav .navi_wrap{    width: 100%;overflow: auto;}
nav .navi_wrap::-webkit-scrollbar {
	width: 10px;
	margin-right: 10px;
  }
  nav .navi_wrap::-webkit-scrollbar-thumb {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #0f0f0f), to(#0f0f0f));
	background: linear-gradient(to bottom, #0f0f0f 50%, #0f0f0f);
	border-radius: 90px;

  }
  nav .navi_wrap::-webkit-scrollbar-track {
		border-right: 1px solid #333333;
		border-left: 1px solid #333333;
	background:linear-gradient(120deg, #a7e7f6,#fffcb0,#f5f5f5);
  }



nav ul{
	width: 100%;
	box-sizing: border-box;
	padding: 20px 10px;    position: relative;
    padding-left: 10px;}

nav ul li:not(.navi_title):hover{
		transform: translate(10px, 0);
		transition: 0.5s;
	  }
	  

nav ul:nth-of-type(1){background-color: #a7e7f6;}
nav ul:nth-of-type(2){background-color: #fffcb0;}
nav ul:nth-of-type(3){background-color: #f5f5f5;}

/*����̾*/
nav .navi_title{
	position: absolute;
	text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
	-1px 1px 0 #000, 1px -1px 0 #000,
	0px 1px 0 #000,  0-1px 0 #000,
	-1px 0 0 #000, 1px 0 0 #000;
	color:white;
    font-size: 1.5rem;
    font-weight: 600;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;}

nav .navi_title img{width: 2rem;}





/* ==================================================

�������������������������ʥ֥��å�������������������

================================================== */



/*--------------------------------------------------
�����֥�˥塼 .tub
---------------------------------------------------*/
.tub{
    margin: auto;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 800;
}

.tub .show{padding: 10px 0 !important;}

.tub ul{ 
	display: flex;
	justify-content: center;
    flex-direction: row;
    align-items: flex-end;}
	.tub li{
		background-color: white;
		margin: 0 10px;
		border-radius: 5px 5px 0 0;
		position: relative;
	}
	


	.tub li img{width: 50px;}
	.tub li:hover{
		padding: 8px 0;
	transition: 0.5s;}

#tub_kaden .show{background-color: #a7e7f6; width: 246px;}
#tub_kaden{background-color: #f5f5f5;}
#tub_kaden{    border-bottom: 5px solid #a7e7f6;}

#tub_shingu .show{background-color: #fffcb0;}
#tub_shingu{background-color: #a7e7f6;}
#tub_shingu{    border-bottom: 5px solid #fffcb0;}

#tub_kagu .show{background-color: #f5f5f5;}
#tub_kagu{background-color: #fffcb0;}
#tub_kagu{    border-bottom: 5px solid #f5f5f5;}

/*--------------------------------------------------
�����֥����ȥ� .title2
---------------------------------------------------*/
.title2{    
	/*stickey�⤵�껦��*/
	padding-top: 100px !important;
    margin-top: -100px !important;}


.title2 hr{
	height: 1px;
    background-color: #333333;
    border: none;}

.title2 ul{ 
	
	display: flex;
    justify-content: space-between;}

.title2 ul li a{
	width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;}

	/* .title2 ul li a:hover{
		opacity: 0.5;
	} */

	
.title2 ul li a img{
	width: 95%;
}
	
.title2 ul li a:hover img{
	transform: scale(1.03);
	transition: 0.5s;
}


	.title2 .quick p{display: flex;font-weight: 600;    opacity: 0.5;}
	.title2 .quick p:hover{opacity: 1;}

/*--------------------------------------------------
�����ʥ��ꥢ
---------------------------------------------------*/


.block_item{padding: 100px 0 50px;
    margin-top: -60px; }

[id^="kaden_3"],[id^="shingu_3"],[id^="kagu_3"]
{	/*stickey�⤵�껦��*/
	padding-top: 100px !important;
    margin-top: -100px !important;}


/*���ʥ��ꥢ*/
.block_item .itemlist{
	background-color: white;
    display: flex;
    justify-content: center;
    padding: 20px 0 50px;
    box-sizing: border-box;
    margin: 20px 0 80px;
	flex-direction: column;
	border-radius: 20px;
}


/*�ϥå��奿��*/
.tag{
    background-color: #ebebeb;
    padding: 10px;
    box-sizing: border-box;}
.tag ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}
.tag li{    float: left;
    border: 1px solid;
    border-radius: 90px;
	margin: 10px;}
	.tag li p{padding: 5px 1rem;}
	.tag li:hover{background-color: white;transition: 0.5s;}


/*��äȸ���ܥ���*/

.block_item .button_more{    
    /* border: 2px solid #333333; */
    border: 1px solid #3793be;
	background: #3793be;
    overflow: hidden;
    position: relative;
    border-radius: 90px;
    margin: 20px auto 0px;
    font-weight: normal;
    font-size: 30px;
    z-index: 1;
    width: 60%;
	text-align: center;
	color: white !important;
}

.block_item .button_more p{
	display: flex;
	padding: 10px 30px;
	color: #fff !important;
}

.block_item .button_more::after {
	background: #fff;
	position: absolute;
    border: 1px solid #3793be;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	/* transform-origin: left top; */
	transition: .2s ;
	z-index: -1;
  }
  .block_item .button_more:hover p {
	color: #3793be !important;
  }



  .block_item .button_more:hover::after {
	transform: scale(1, 1);
    border-radius: 90px;
  }



/*--------------------------------------------------
��õ����GET
---------------------------------------------------*/

  #summer_item #sagashite {
	position: fixed;
	bottom: 50px;
	left: -300px;
	background: #bf0000;
	border-radius: 0 10px 10px 0;
	padding: 10px;
	box-sizing: border-box;
	font-weight: bold;
	color: #fff;
	z-index: 999;
  }
  #summer_item #sagashite > div
{border-right: double 7px;margin: 10px;padding-right: 10px;
	display: flex;
    align-items: center;
}

#summer_item #sagashite:hover{
	transform: translate(300px, 0);
	transition: 0.5s;}

#summer_item #sagashite p{width: 300px;}

  #summer_item #sagashite .fukidashi_txt{
	  width: 100px;
  }
  
  #summer_item #sagashite p span.yellow{
	  color:#ffda2e;
  }











/*-------------------------��¸css--------------------------*/



#summer_item #tab-group-wrap{
	margin: 3em auto 0 auto;
}
	


#summer_item .tab-group{
  display: flex;
}

#summer_item .tab{
	width: 50%;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
	background:#ddd;
	padding:20px 0;
    text-align: center;
	border-bottom:#f5f5f5 3px solid;
  	cursor: pointer;
  	white-space:nowrap;
	position: relative;
	display: flex;
 	justify-content: center;
 	align-items: center;
}

#summer_item .tab:after {
 content: " ";
 width: 0%;
 height: 100%;
 background: #f5f5f5;
 position: absolute;
 transition: all 0.4s ease-in-out;
 right: 0;
}

#summer_item .tab:hover::after {
 right: auto;
 left: 0;
 width: 100%;
}

#summer_item .tab span{
	z-index: 20;	
}

#summer_item .tab:hover{
	color: #fff;
	transition: .5s;
	background: #30c8d8;
}


@keyframes scaleUp {
 0% {
  transform: scale(1);
 }

 50% {
  transform: scale(0.95);
 }

 100% {
  transform: scale(1);
 }
}

#summer_item .tab i{
	z-index: 20;
	margin-right: 5%;
}

#summer_item .tab i.tab_icon1{
	width: 20px;
}

#summer_item .tab i.tab_icon2{
	width: 50px;
}

#summer_item .tab i.tab_icon3{
	width: 45px;
}

#summer_item .tab.is-active{
  background-color: #f5f5f5;
  color: #fff;
}


/*-------- ���ť��� --------*/
#summer_item .kaden_group{
  display: flex;
	background: #ddd;
    border-radius: 3em;	
	padding: 1%;
	position: relative;
	margin: 0 2%;
}

#summer_item .kaden_tab{
	width: 50%;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 2px;
	padding:2% 0;
    text-align: center;
  	cursor: pointer;
  	white-space:nowrap;
}

#summer_item .kaden_tab.is-active2{
  background-color: #2e2e2e;
  color: #fff;
  border-radius: 2em;
}


/*-------- ���ƥ��꡼ñ�ʥ��� --------*/
#summer_item .category ul{
    width: 100%;
    display: grid;
	grid-template-columns: repeat(4,1fr);
    justify-content: space-between;
    align-items: center;
    padding: 2%;
    flex-wrap: wrap;    position: relative;
    z-index: 200;
	gap: 15px;
}

#summer_item .category li{
    margin: 0 0 2% 0;
    font-weight: 600;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 2em;
}


.category li a{color: white;}



/* ==================================================

�������������������������ʶ��̡�������������������

================================================== */
#summer_item .title{
	text-align: center;
	margin-top: 5%;
}
#summer_item .col_1,#summer_item .col_2,#summer_item .col_3_2{
	width: 98%;
/*	padding: 3% 0 5% 0;*/
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	flex-wrap: wrap;
	margin: auto;
}

#summer_item .col_1 > li,#summer_item .col_2 > li,#summer_item .col_3_2 > li{
	position: relative;
	text-align: center;
	padding: 1%;
	transition: 0.5s;
	margin-bottom: 3%;
}

#summer_item .col_1 li.col_1item,#summer_item .col_2 li.col_1item{
	margin-bottom: 0;
	padding: 0 1%;
}

#summer_item .col_1 li.item_box .box_left,#summer_item .col_2 li.item_box .box_left,#summer_item .col_3_2 li.item_box .box_left{
	width: 60%;
}

#summer_item .col_1 li.item_box .box_left .item_img img,#summer_item .col_3_2 li.item_box .box_left .item_img img{
	width: 100%;
}

#summer_item li.item_box .item_img{
	position: relative;
}

#summer_item li.item_box .set_title{
	font-size: 17px;
	color: #fff;
	background: #ccc;
	margin: 15px auto 10px auto;
	padding: 0 0 0 10px;
	font-weight: 500;
}

#summer_item li.item_box .set_txt{
	line-height: 2em;	
}

#summer_item li.item_box .height_3,#summer_item li.item_box .height_2_3{
    height: 4.5em;
}


#summer_item li.item_box .height_3_2{
	height:initial!important;
}

#summer_item li.item_box .height_3_02 {
	height: 7em;
}

#summer_item li.item_box .height__2_1 {
	height: 4.4em;
}


#summer_item li.item_box .set_txt span{
    font-size: 15px;
    background: #ddd;
    font-weight: 500;
    padding: 0 2%;
    display: inline-block;
    margin: 1% auto;
}

#summer_item .col_1 li.sub,#summer_item .col_3_2 li.sub{
	width: calc((100% - 2%)/2);
	margin: 2% 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
}

#summer_item .col_1 li.sub .set,#summer_item .col_3_2 li.sub .set{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-grow: 1;
}

#summer_item .col_1 li .price,#summer_item .col_3_2 li .price{
	font-size: 90px;
	font-weight: bold;
}

#summer_item li.item_box .price{
	font-size: 40px;
	font-weight: bold;
	display: inline-block;
	margin-left: 30px;  
	/* font-family: "Roboto", sans-serif; */
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings:"wdth" 100;
}

/*
#summer_item .col_1 li a ,#summer_item .col_2 li a , #summer_item .col_3_2 li a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
*/

/*
#summer_item .col_1 li:hover,#summer_item .col_2 li:hover, #summer_item .col_3_2 li:hover{
	transform: scale(1.03);
	transition: 0.5s;
}
*/


#summer_item .item_img{
	transition: 0.5s;
}
#summer_item .item_img:hover{
	transform: scale(1.03);
	transition: 0.5s;
}

#summer_item .price span > span{
	position: static !important;
	font-size: 40px;
}

#summer_item .price span > span.value {
	/* font-size: 90px; */
}

#summer_item .item_box .price span > span.value {
	font-size: 60px;
}

.price.hayawari{
	background-color: #fefe00;
}


#summer_item .cart a {
    color: #fff;
    background: #a71616;
    width: 100%;
    text-align: center;
    font-size: 20px;
    padding: 1% 0;
    margin: 2% auto;
    border-radius: 5px;
}

#summer_item .cart a:hover{
	transform: scale(1.03);
	transition: 0.5s;
	opacity: .8;
}


#summer_item .col_1 .shosai{
	width: 960px;
}

#summer_item .shosai{
	font-size: 19px;
	background: #2e2e2e;
	color: #fff;
	margin: 2% 0 0 0;
	position: relative;
	text-align: center;
	font-weight: 400;
	border-radius: 50px;
}

#summer_item .shosai a{
	color: #fff;
	display: block;
	padding: 5px 3px 8px 0;
	border-radius: 50px;
	transition: .5s;
}
	
#summer_item .shosai a::after{
	position: absolute;
	top: calc(50% - 3px);
	right: 8%;
	display: inline-block;
	content: "";
	width: 10px;
	height: 10px;
	border-top: solid 3px #fff;
	border-right: solid 3px #fff;
	transform: rotate(45deg);
	transition: .5s;
}

#summer_item .shosai a:hover::after {
	right: 5%;
	transition: .5s;
}

#summer_item .shosai a:hover{
	background: #4988db;
	transition: .5s;
}

/*�⤵��碌*/
#summer_item .height_set{
	height: 7em;
}

#summer_item .height_set2{
	height: 5.5em;
}

#summer_item .height_price{
	height:2em;
}


/* ==================================================

����������������������_1����ࡡ��������������

================================================== */
#summer_item .col_1 li.item_box:first-child{
	border:none;
}

#summer_item .col_1 li.item_box{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	/*padding: 2%;*/
	flex-wrap: wrap;
    border-top: solid 1px #ddd;
}

#summer_item .col_1 li.item_box .box_right{
	width: 40%;
	justify-content: center;
	position: relative;
	flex-direction: column;
	align-items: center;
	text-align: start;
}

#summer_item .col_1 li.item_box .item_name{
	font-size: 35px;
	font-weight: bold;
	line-height: 1em;
	/* display: flex; */
	display: inline-block;
	align-items: center;
}

#summer_item li.item_box .item_name span.color{
	font-size: 17px;
    background: #f5f5f5;
    padding: 1% 1%;
	border-radius: 5px;
    color: #fff;
    margin-left: 1%;
    font-weight: 500;
}

/*����*/
#summer_item .col_1 i.color{
    width: 50px;
    height: 50px;
    border-radius: 50%;
	position: absolute;
} 

#summer_item .col_1 i.color_b{
    background-color: #333333;	
	right: 10%;
    top: 0;
}

#summer_item .col_1 i.color_w{
    background-color: #F1F1F1;
	right: 20%;
    top: 0;
	border: 1px #ddd solid;
}


/* ==================================================

����������������������_2��3����ࡡ��������������

================================================== */
#summer_item .col_2,#summer_item .col_3_2{
	width: 100%;
	margin: 0 auto;
	padding: 1%;
	flex-wrap: wrap;
}

#summer_item .col_2.margin0,#summer_item .col_3_2{
	margin: 0;
}

#summer_item li.item_box .col_2 .item_img,#summer_item li.item_box .col_3_2 .item_img{
	padding-bottom: 1em;
}

#summer_item .col_3_2 > li{
	width: calc(100% / 3);
    border-top: solid 1px #ddd;
}

#summer_item .col_2 li{
	width: calc(100% / 2);
}

#summer_item #set .col_2 li{
    border-top: solid 1px #ddd;
}

#summer_item .col_2 li.item_box .set_txt,#summer_item .col_3_2 li.item_box .set_txt{
	position: relative;
	text-align: start;
}

#summer_item .col_2 li.item_box .item_name,#summer_item .col_3_2 li.item_box .item_name{
	font-size: 22px;
	font-weight: 600;
	line-height: 1em;
	margin: 20px 0 0 0;
	position: relative;
	letter-spacing: 0;
}

#summer_item .col_3_2 li.item_box .price{
	font-size: 1em;
}

/*����_2�����*/
#summer_item .col_2 i.color{
    width: 50px;
    height: 50px;
    border-radius: 50%;
	position: absolute;
} 

#summer_item .col_2 i.color_b{
    background-color: #333333;	
	right: 10%;
    top: 0;
}

#summer_item .col_2 i.color_w{
    background-color: #F1F1F1;
	right: 22%;
    top: 0;
	border: 1px #ddd solid;
}

/*����_3�����*/
#summer_item .col_3_2 i.color{
    width: 30px;
    height: 30px;
    border-radius: 50%;
	position: absolute;
} 

#summer_item .col_3_2 i.color_b{
    background-color: #333333;	
	right: 10%;
    top: 0;
}

#summer_item .col_3_2 i.color_w{
    background-color: #F1F1F1;
	right: 21%;
    top: 0;
	border: 1px #ddd solid;
}

/* ==================================================

���������������������åȤ������֡���������������

================================================== */

#summer_item li .price_color{
	color: #ffffff;
	display: inline-block;
	background: linear-gradient(90deg, #f5f5f5 0%, #f5f5f5 50%, #a7e7f6 100%);
	background: -webkit-linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 50%, #a7e7f6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: Century Gothic, sans-serif;
}


/* ==================================================

������������������������ñ�ʤ������֡�����������������

================================================== */
#summer_item .tanpin{
	text-align: center;
    padding-top: 0;	
	font-weight: 600;
}


#summer_item .tanpin_txt{
	font-size: 20px;
    margin: 0 auto 2em auto;
}

#summer_item .tanpin_txt span{
	color:#f5f5f5;
	font-size: 23px;
}



#summer_item .item_box li{
	position: relative;
}

#summer_item li.item_box .item_img{
	padding: 0;
}

#summer_item li.item_box .item_img img{
    border-radius: 15px;
}

#summer_item .item_point{
    position: relative;
    padding: 15px;
    border: 3px solid #333;
    color: #333;
    font-weight: bold;
    font-size: 26px;
    text-align: center;
	margin-bottom: 2%;
    justify-content: center;
    align-items: center;
    display: flex;	
}

#summer_item .item_point span.p_icon{
	font-size: 15px;
	background: #A89140;
	color: #fff;
	border-radius: 5px;
	padding: 1%;
	margin-right: 2%;
}

#summer_item .item_point:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) skew(-25deg);
    height: 15px;
    width: 10px;
    border-right: 3px solid #333;
    content: "";
}

#summer_item .point1,#summer_item .point1:before {
	background: #bfe8eb;
}

#summer_item .point2,#summer_item .point2:before{
	background:#E9F199;
}

#summer_item .size{
	font-size: 22px;
	color: #353535;
	text-align: start;
	margin: 10px 0;
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.2rem;
}

#summer_item .detal {
	text-align: start;
	/* height: 70px; */
	height: auto;
}

#summer_item .col_2 .detal {
	min-height: 3rem;
}

#summer_item .detal span{
	font-size: 1rem;
	background: #7c7c7c;
	color: #fff;
	margin: 5px 5px 0 0;
	padding: 3px 8px 1px;
	font-family: "Yu Gothic", "Meiryo", sans-serif;
	font-weight: 500;
	display: inline-block;
}

#summer_item .detal span.point{	
    background: #dd4141;
}

#summer_item .item_name{
	font-size: 25px;
	margin: 2% auto;
	text-align: start;
}

#summer_item .item_name span{
	font-size: 18px;
    margin: 0 2%;
}



/*---------------------

�եå���

---------------------*/
   
footer {
	width: 100%;
	margin: 0 auto;
	background-color: #cdeef6;
	}
	
	footer ul{
	width: 40%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	justify-content: center;
	padding: 2% 0;
	}
	
	footer ul li{
	text-align: center;
	font-weight: 600;
	}
	
	footer ul li:nth-child(2) {
	border-right: 1px solid #333;
	border-left: 1px solid #333;
	}

/*---------------------

�����ݥ�

---------------------*/

.coupon{
	background: #ec6098;
	padding: 10px;
	max-width: 1000px;
	margin: auto;
	color: #fff;
	text-align: center;
	background-image: linear-gradient(-45deg, #ee70a3 25%, #ec6098 25%, #ec6098 50%, #ee70a3 50%, #ee70a3 75%, #ec6098 75%, #ec6098);
	background-size: 10px 10px;
}

.coupon p{
	font-size: 35px;
	margin: 0px 0 20px;
	letter-spacing: 0.2rem;
}


.coupon ul{
	display: inline-flex;
	flex-wrap: wrap;
	width: 90%;
	margin: 0 5%;
}
.coupon ul li{
	width: calc(100% / 2);
	text-align: center;
	padding: 0 2% 20px;
}
.coupon ul li img{
	width: 100%;
}

/*---------------------

Ź�ޤΤ�������

---------------------*/
.shop-reccomend{
   font-family: "Oswald", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
}



/*---------------------

���������ȤΥܥ���

---------------------*/
#summer_item .shosai-size30{
	width: 30%!important;
	display: inline-block;
	margin: 5px;
}
#summer_item .shosai-size45{
	width: 45%!important;
	display: inline-block;
	margin: 5px;
}