@charset "UTF-8";

.gallery-area {
  position: relative;
  top: auto;
  left: auto;
  overflow: auto;
  width: auto;
}

.gallery-area .box-recommend-contents.s-alert{
	padding: 10px 10px;
}

/* ===== PhotoGallery Layout CSS ===== */

#photoGallery{
	display: block;
	border-top: none;
	border-bottom: none;
	margin: 0 0 20px;
	padding: 0;
}

#gallery-inner.slick-slider{
	display: block;
	margin: 0;
	padding: 0 20px;
}

#gallery-inner .slick-track .slick-list .draggable div {
	display: block;
	margin: 0 auto;
}

#gallery-inner .slick-track .slick-list .draggable div figure.slick-slide{
    margin: 0;
	padding: 0;
}

#gallery-inner .slick-track .slick-list .draggable div figure.slick-slide  a{
	vertical-align: middle;
   margin: 0;
	padding: 0;
}

/* hover line weight */
#gallery-inner .slick-track .slick-list .draggable div figure.slick-slide a:hover > figure > .img-cmn-border::before,
 a.img-cmn-border:hover::before, a.img-cmn-border-hover:hover::before {
    border: 4px solid #69a1fe;
}

#gallery-inner.slick-slider{
		padding: 0 38px;
}


#gallery-inner .slick-prev,
#gallery-inner .slick-next{
	background: #4c4c4c;
	width: 38px;
	height: 100%;
	top: 0;
	margin-top: 0;
}

.slick-prev:before {
    content: url("/images_osp/common/ico/ico_phg_arrow_left.gif");
}

.slick-next:before {
    content: url("/images_osp/common/ico/ico_phg_arrow_right.gif");
}


/* noscript Layout */

#photoGallery noscript{
	display: block;
	width: 100%;
	padding: 0 20px;
}

/*---------------------------------------*/
/* soxai ring カルーセル
/*---------------------------------------*/
.gallery-area.soxairing {
  position: relative;
  top: auto;
  left: auto;
  overflow: auto;
  width: auto;
  margin-bottom: 30px;
}

.gallery-area .box-recommend-contents.s-alert{
	padding: 10px 10px;
}

/* ===== photoGallery Layout CSS ===== */

#photoGallery{
	display: block;
	border-top: none;
	border-bottom: none;
	margin: 0 0 20px;
	padding: 0;
}

#gallery-inner.slick-slider{
	display: block;
	margin: 0;
	padding: 0 20px;
}

#gallery-inner .slick-track .slick-list .draggable div {
	display: block;
	margin: 0 auto;
}

#gallery-inner .slick-track .slick-list .draggable div figure.slick-slide{
    margin: 0;
	padding: 0;
}

#gallery-inner .slick-track .slick-list .draggable div figure.slick-slide  a{
	vertical-align: middle;
   margin: 0;
	padding: 0;
}

/* hover line weight */
#gallery-inner .slick-track .slick-list .draggable div figure.slick-slide a:hover > figure > .img-cmn-border::before,
 a.img-cmn-border:hover::before, a.img-cmn-border-hover:hover::before {
    border: 4px solid #69a1fe;
}

#gallery-inner.slick-slider{
		padding: 0 24px;
}


#gallery-inner .slick-prev,
#gallery-inner .slick-next{
	--w: 20px;
	--h: 20px;
	background: #4c4c4c;
	width: var(--w);
	height: var(--h);
	top: calc(50% - var(--h)/2);
	margin-top: 0;
	border-radius: 100vw;
}

#gallery-inner .slick-prev:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("/images_osp/common/ico/ico_phg_arrow_left.gif");
	background-size: 50% 50%;
	background-repeat: no-repeat;
	background-position: center;
}

#gallery-inner .slick-next:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("/images_osp/common/ico/ico_phg_arrow_right.gif");
	background-size: 50% 50%;
	background-repeat: no-repeat;
	background-position: center;
}

#gallery-inner .slick-track > figure {
	margin-top: 0!important;
	margin-bottom: 0!important;
}


/* noscript Layout */

#photoGallery noscript{
	display: block;
	width: 100%;
	padding: 0 20px;
}