﻿@charset "utf-8";

/* ============================================================== swiper */


/* ==============================================================  */
.detail_wrap > h1                {padding:0.5em 0.5em 0;}
.detail_ttl {
	padding:0.5em 0.5em 0;	
}

.detail_photo                    {overflow:hidden;padding:2% 0 0;max-width:500px;margin-bottom:1em;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.detail_img_slide                  {width:100%;margin:0 auto;position:relative;overflow:hidden;z-index:1;}
.detail_img_slide ul               {margin:0;padding: 0;}
.detail_img_slide li               {margin:0;padding:0;list-style:none;}
.detail_img_slide li img           {max-width:100%;}

/* ------------------------------------ 2022/12/08 */
.detail_photo .arrws {
	position: absolute;
	z-index: 99;
	font-size:32px;
	display:block;
	width:2em;
	top: calc(50% - 1em);
	line-height:2em;
	text-align:center;
	cursor:pointer;
	-webkit-transition:0.2s;-moz-transition:0.2s;-ms-transition:0.2s;-o-transition:0.2s;transition:0.2s;
	opacity: 0;
	color:#999;
	background:rgba(255,255,255,0.8);
}
.detail_img_slide:hover .arrws {
	opacity: 1;
}
.detail_photo .arrws:before {
	font-family:'entypo';
}
.detail_photo .arrws-prev {
	left:0;
	border-radius:0 10% 10% 0;
}
.detail_photo .arrws-prev:before {
	content:"\e6cd";
}
.detail_photo .arrws-next {
	right:0;
	border-radius:10% 0 0 10%;
}
.detail_photo .arrws-next:before {
	content:"\e6d0";
}
/* ------------------------------------ 2022/12/08 */
.detail_photo .thumb  {
	display:none;
	display: grid;
	grid-template-columns: repeat(5,1fr);
}
.detail_photo .thumb div {
	display: flex;
	align-items: center;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.detail_img_1                    {width:96%;margin:0 auto;text-align:center;}
.detail_img_1 img                {max-width:100%;}

.detail_spec                     {overflow:hidden;padding-bottom:1em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.detail_spec dl                  {overflow:hidden;padding:0 0.5em;}
.detail_spec dt                  {line-height:2em;font-size:0.9em;float:left;clear:left;width:6em;text-align:center;background:#999;color:#fff;border-radius:4px;}
.detail_spec dd                  {margin:0 0 1em 6.5em;line-height:1.5em;}
.detail_spec .none               {display:none;}
.detail_spec dd.note             {margin:0 0 0.8em 0;clear:both;}
.detail_spec dd.note .note       {margin:0.5em 0 0 1em;padding:0;}
.detail_spec dd.note .note li    {margin:0 0 0.5em 0;}
.detail_spec dd.price            {font-weight:bold;color:#399;}
.detail_spec dd.price .tax       {font-weight:normal;color:#666;font-size:75%;margin-left:0.5em;}
.detail_spec dd.tag              {margin:0 0 0.2em 0;}
.detail_spec dd.tag span         {background:#fff;font-size:0.9em;display:inline-block;line-height:1;border:1px solid #ccc;padding:0.4em 0.5em;margin:0 0.8em 0.8em 0;}
.detail_spec dd.tag .t1          {border-left:3px solid #f60;}
.detail_spec dd.tag .t2          {border-left:3px solid #e26;}
.detail_spec dd.tag .t3          {border-left:3px solid #06c;}
.detail_spec dd.tag .t4          {border-left:3px solid #999;}
.detail_spec dd.share            {margin:0 0 1em 0;text-align:center;}
.detail_spec dd.share span,
.detail_spec dd.share a          {display:inline-block;vertical-align:top;}
.detail_spec dd.share a          {line-height:1;padding:0.4em 0.6em;color:#fff;text-decoration:none;font-size:0.9em;margin:0 0.8em 0 0;}
.detail_spec dd.share a.twitter  {background:#55ACEE;}
.detail_spec dd.share a.facebook {background:#3A5897;}
.detail_spec dd.share a.mail     {background:#e82;}
.detail_spec dd.share2            {margin:0 0 1em 0;text-align:center;}
.detail_spec dd.share2 a          {display:inline-block;line-height:1;padding:0;text-decoration:none;margin:0 0.8em 0 0;}
.detail_spec dd.share2 a img      {width:30px;}
.detail_spec .prev_btn           {margin:0 0 1em 0;text-align:center;}

.detail_spec .soldout            {margin:0 0.5em;}
.detail_spec .soldout em,
.detail_spec .soldout span       {display:block;line-height:1.5;}
.detail_spec .soldout em         {color:#e12;}

.detail_frm                      {clear:left;}
.detail_frm .frm_opt             {max-width:320px;}
.detail_frm .frm_opt span,
.detail_frm .frm_opt label       {display:inline-block;vertical-align:middle;text-align:center;}
.detail_frm .frm_opt label       {width:7.5em;font-size:0.9em;}
.detail_frm .select              {width:160px;}
.detail_frm .select select       {font-size:16px;}
.detail_frm .frm_opt .num        {background:#fff;border:1px solid #ccc;display:inline-block;padding:0.5em 1em;vertical-align:middle;border-radius:4px;}
.detail_frm .unit                {width:30px;}

.btns_cart                       {padding:2em 0;}
.btn_cart                        {background:#12D1D1;background:#f60;width:240px;height:100px;position:relative;margin:0 auto;text-align:center;border-radius:4px;}
.btn_cart:before                 {color:#fff;content:'\e60a';font-family:'087';font-size:36px;width:100px;height:36px;top:10px;margin:0;text-align:center;padding:16px 0 0;display:block;overflow:hidden;text-align:center;position:absolute;}
.btn_cart input                  {border:0 none;background:transparent;color:#fff;display:inline-block;text-align:center;width:100%;height:100px;line-height:80px;padding-top:30px;padding:0 0 0 2em;font-size:16px;cursor:pointer;position:relative;}
.btn_cart:hover                  {background:#22e1e1;background:#f90;}

.detail_notes                    {clear:both;overflow:hidden;}
.detail_notes ul                 {margin:0;padding:0 1em;list-style:none;}
.detail_notes li                 {margin:0 0 1em 1.5em;line-height:1.5;position:relative;color:#399;}
.detail_notes li:before          {color:#499;content:"\e651";font-family:'entypo';display:block;position:absolute;left:-1.8em;font-weight:bold;}

.detail_other h2                 {font-size:1.2em;padding:0.5em;color:#399;text-align:center;}
.detail_other li,
.detail_other ul                 {margin:0 0 1em;padding:0;list-style:none;}
.detail_other ul                 {text-align:center;overflow:hidden;}
.detail_other li                 {display:inline-block;width:28%;max-width:180px;border:1px solid #4cc;margin:0 5px 5px 0;vertical-align:top;text-align:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.detail_other li a > span, .detail_other li img,
.detail_other li a               {display:block;text-decoration:none;}
.detail_other li a               {background:#fff;padding:4px;}
.detail_other li a > span        {line-height:1.4;}
.detail_other li .img            {border:1px solid #ccc;}
.detail_other li img             {width:100%;vertical-align:top;}
.detail_other li .name           {margin:0.5em 0;}
.detail_other li .price          {font-size:0.9em;color:#777;}
.detail_other li .tax            {display:none;}

/* ============================================================== media query */
@media screen and (min-width: 480px){
	.detail_photo                    {width:70%;padding:10px 0 0;margin:0 auto 10px;}
	.detail_spec                     {padding:0 1em;position:relative;}
	.detail_spec dd.share            {margin:0 0 1em 0;text-align:left;}
	.detail_spec dd.share2           {margin:0 0 1em 0;text-align:left;}
	.detail_spec .prev_btn           {float:right;text-align:right;position:absolute;right:1em;top:1em;}
}
@media screen and (min-width: 760px){
	.detail_photo                    {float:left;width:50%;margin:0 0 10px;padding-top:5px;}
	.detail_photo .arrow             {display:block;}

	.detail_spec                     {padding:22px 1em 0;}
	.detail_notes                    {margin-top:1em;}
	.detail_notes li                 {margin:0 0 1em 2em;}
	.detail_other h2                 {padding:0.5em 1em;text-align:left;}
	.detail_other ul                 {text-align:left;padding:0 1em;}
	.detail_other li .name           {font-size:0.9em;}
	.detail_other li .price          {font-size:0.8em;}
	.detail_other li .tax            {display:inline;}
}
@media screen and (min-width: 1020px){
	.detail_img_1,
	.detail_img_slide                  {width:100%;}
	.detail_img_slide ul               {margin-top:0;}
	.detail_photo                    {margin-left:10px;padding-top:10px;}
	.detail_photo .arrow span        {font-size:48px;}
/* ------------------------------------ 2022/12/08 */
	.detail_photo .thumb {
		display: grid;
		grid-template-columns: repeat(5,1fr);
	}
	.detail_photo .thumb div {
		opacity: 0.5;
		display: flex;
		align-items: center;
		cursor: pointer;
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}
	.detail_photo .thumb div:hover,
	.detail_photo .thumb .crt        {opacity:1;}
/* ------------------------------------ 2022/12/08 */
.detail_photo .thumb div img     {max-width:100%;}
	.detail_main                     {overflow:hidden;}
	.detail_spec                     {padding-top:0;}
	.detail_frm .frm_opt             {float:left;width:400px;margin-bottom:1em;}
	.btns_cart                       {float:right;padding:0 1em 0 0;}
	.detail_notes                    {clear:none;}

}
@media screen and (min-width: 1500px){
	.detail_spec                     {float:left;width:66%;font-size:1em;}
	.detail_notes                    {float:right;width:33%;margin-left:0;padding-top:0;font-size:0.9em;}
	.detail_other                    {float:left;width:64%;padding-top:1em;margin-left:1%;}
	.detail_other ul                 {overflow:hidden;padding-right:0;}
	.detail_other li                 {float:left;width:154px;}

	.detail_wrap                     {margin:5px;border-radius:4px;background:rgba(255,255,255,0.8);overflow:hidden;}
}

