@charset "utf-8";

/*=====================================
style_index2.css
=====================================*/


@charset "utf-8";

/*=====================================
layout.css
=====================================*/

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/*-------------------------------------
 reset
-------------------------------------*/
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%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	line-height: 0;
	vertical-align: bottom;
}
iframe {
	vertical-align: bottom;
	border: 0;
}
table th,
table td {
	vertical-align: top;
}
input,
select,
textarea,
button {
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-appearance: none;
	-moz-appearance: none;
}
select::-ms-expand {
	display: none;
}
*, :after, :before {
	box-sizing: border-box;
}


/*-------------------------------------
 setting
-------------------------------------*/
body {
	position: relative;
	color: #333;
	font-family: '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	word-break: break-all;
	background: #fff;
	-webkit-text-size-adjust: 100%;
}
a {
	color: #333;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
strong {
	font-weight: bold;
}
em {
	font-style: normal;
}


/*-------------------------------------
 root
-------------------------------------*/
:root {
	--color-main: #000;
	/*--color-sub: #ddf3f2;*/
	--color-bg01: #f4f4f4;
	--color-bg02: #313131;
	--color-border01: #d9d9d9;
	--svg-arw01: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11px" height="19px"><path fill="%23313131" d="M10.517,8.869 C7.908,6.309 5.299,3.749 2.689,1.191 C1.614,0.137 0.13,1.848 1.91,2.906 C3.413,5.183 5.736,7.460 8.58,9.739 C5.724,12.95 3.390,14.454 1.56,16.813 C0.7,17.886 1.595,19.598 2.654,18.527 C5.275,15.879 7.896,13.232 10.517,10.584 C10.951,10.145 10.962,9.304 10.517,8.869 Z"/></svg>');
	--svg-arw02: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11px" height="19px"><path fill="%23333333" d="M10.517,8.869 C7.908,6.309 5.299,3.749 2.689,1.191 C1.614,0.137 0.13,1.848 1.91,2.906 C3.413,5.183 5.736,7.460 8.58,9.739 C5.724,12.95 3.390,14.454 1.56,16.813 C0.7,17.886 1.595,19.598 2.654,18.527 C5.275,15.879 7.896,13.232 10.517,10.584 C10.951,10.145 10.962,9.304 10.517,8.869 Z"/></svg>');
	--svg-check01: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="18.25" viewBox="0 0 17 18.25"><path fill="%23313131" d="M427.274,3450.23a1.522,1.522,0,0,0-2.059.43l-7.7,11.23-3.83-4.58a1.515,1.515,0,0,0-2.044-.27,1.5,1.5,0,0,0-.427,2l5.119,8.49a1.528,1.528,0,0,0,1.3.73h0.014a1.511,1.511,0,0,0,1.3-.75l8.834-15.26A1.493,1.493,0,0,0,427.274,3450.23Z" transform="translate(-411 -3450)"/></svg>');
	--svg-prev01: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="33px"><path fill-rule="evenodd" fill="%23ffffff" d="M19.998,3.931 L7.865,16.748 L19.845,29.3 L15.823,32.992 L0.1,16.813 L15.909,0.8 L15.909,0.6 L19.998,3.931 L19.998,3.931 Z"/></svg>');
	--svg-next01: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="33px"><path fill-rule="evenodd" fill="%23ffffff" d="M0.1,29.68 L12.134,16.250 L0.154,3.996 L4.176,0.6 L19.998,16.185 L4.90,32.990 L4.90,32.992 L0.1,29.68 L0.1,29.68 Z"/></svg>');
}


/*-------------------------------------
 layout
-------------------------------------*/
#wrapper {
	/*
	position: relative;
	padding-top: 80px;
	overflow: hidden;
	*/
	font-family: Arial, Helvetica, sans-serif;
	background-color: #000;
}

#listPage #wrapper {
	background-color: #fff;
}

.inner {
	max-width: 1140px;
	margin: 0 auto;
	/*padding: 0 20px;*/
}
.inner:after {
	content: "";
	clear: both;
	display: block;
}


/*-------------------------------------
 header
-------------------------------------*/
.headerArea {
	
}


/*-------------------------------------
 content
-------------------------------------*/
.mainArea {
	position: relative;
	z-index: 1;
}
.contentArea {
	padding: 0 0 80px 0;
}


/*-------------------------------------
 footer
-------------------------------------*/
.footerArea {
	position: relative;
	z-index: 1;
}
.footerArea .inner {
	padding-top: 10px;
	padding-bottom: 10px;
}
.footerGroupA {
	text-align: center;
	background-color: var(--color-bg01);
}
.footerLogo {
	padding: 30px 0;
}
.footerSns {
	padding: 30px 0
}
.footerSns ul {
	display: flex;
	justify-content: center;
}
.footerSns ul li {
	position: relative;
	padding: 0 18px 5px;
	font-size: 22px;
}
.footerSns ul li a {
	position: relative;
	color: #000;
	text-decoration: none;
	overflow: hidden;
}
.footerGroupB {
	color: #fff;
	background-color: var(--color-bg02);
}
.footerLink ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 35px 0 50px;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 16px;
	font-weight: bold;
}
.footerLink ul li {
	padding: 0 20px;
}
.footerLink ul li a {
	color: #fff;
}
.footerCopyright {
	margin: 0 0 5px 0;
	font-size: 14px;
	text-align: center;
}

.pagetopBtn a {
	position: fixed;
	right: 10px;
	bottom: 50px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	padding: 15px 0 0 0;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 13px;
	text-decoration: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.pagetopBtn a:before {
	content: "";
	position: absolute;
	top: 30px;
	left: 0;
	display: block;
	width: 14px;
	height: 90px;
	background: var(--svg-arw02) no-repeat center center / 10px auto;
	transform: rotate(-90deg);
	transform-origin: top left;
}











/*-------------------------------------------------------------------
 Media Queries
-------------------------------------------------------------------*/

@media screen and (max-width: 1000px) {

.forPC { display: none !important; }
.forSP { display: block; }
img.forSP, br.forSP, span.forSP { display: inline-block }

body {
	font-size: 13px;
}


/*-------------------------------------
 layout
-------------------------------------*/
#wrapper {
	/*padding-top: 60px;*/
}


/*-------------------------------------
 header
-------------------------------------*/
.headerArea {
	/*
	height: 60px;
	font-size: 16px;
	*/
}


/*-------------------------------------
 content
-------------------------------------*/
.contentArea {
	/*padding: 0 0 50px 0;*/
	padding: 0;
}


/*-------------------------------------
 footer
-------------------------------------*/



}




@media screen and (min-width: 1001px) {

.forPC { display: block; }
.forSP { display: none !important; }
img.forPC, br.forPC, span.forPC { display: inline-block }

.headerNav .headerSubNav,
.headerLang ul li a,
.headerNav ul li .headerSubNav a,
.pagetopBtn a:before,
.footerSns ul li a {
	text-decoration: none;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	backface-visibility: hidden;
}
.headerLang ul li a:hover,
.footerSns ul li a:hover {
	opacity: 0.7;
}
.headerNav ul li .headerSubNav a:hover {
	text-decoration: underline;
}
.headerNav ul li:hover a:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 18px;
	width: 100%;
	height: 3px;
	background-color: var(--color-main);
}
.headerNav .hasSubNav:hover .headerSubNav {
	visibility: visible;
	opacity: 1;
}
.headerNav ul li:hover .headerSubNav a:before {
	content: none;
}
.pagetopBtn a:hover:before {
	top: 25px;
}
a[href^="tel:"] {
	pointer-events: none;
}

}

.styleIndexThumb {
	margin: 0 auto;
}

.styleIndexThumb li {
	cursor: pointer;
	outline: none;
	/*width: 20% !important;*/
	width: 33% !important;
	/*padding: 0 15px 15px 0;*/
	flex-shrink: 0;
	float: left;
	height: 100%;
	min-height: 1px;
}
.styleIndexThumb li.left {
	margin: 0 0 0 0.5%;
}

/*
.styleIndexThumb li:nth-of-type(3n) {
	width: 34% !important;
}
*/

.styleIndexThumb li figure {
	/*background: #000;*/
}
.styleIndexThumb li figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	/*opacity: 0.6*/;
}
.styleIndexThumb li.slick-current figure img{
	opacity: 1;
}

.slick-slide {
	top: -30px!important;
}

.slick-dotted.slick-slider {
	margin-bottom: -10px!important;
}

.slick-dots {
	/*bottom: -30px;*/
	bottom: 20px;
	background: #000;
	padding: 10px 0 0;
}
.slick-dots li {
	margin: 0;
}
.slick-dots li button:before {
	color: #fff!important;
	opacity: 0.8 !important;
	line-height: 1em;
}
.slick-dots li.slick-active button:before {
	color: #1d16f2!important;
}


/**
swiper
*/

.swiper {
    margin-bottom: -35px;
}

.swiper-wrapper {
	top: -30px;
}

.swiper-pagination {
	/*bottom: 50px!important;*/
	background: #000;
}

.swiper-pagination-bullet {
	background: #fff;
}


#listPage .headerArea {
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #fff;
	text-align: center;
	background: #000;
	position: fixed;
	z-index: 1000;
	width: 100%;
}

.headerArea select {
	-webkit-appearance: none;
	appearance: none; /* デフォルトの矢印を非表示 */
}
.headerArea select::-ms-expand {
	display: none; /* デフォルトの矢印を非表示(IE用) */
}

.headerArea select {
	background: #000;
	color: #fff;
	border: none;
}
/*
.category1 select {
	width: 55px;
}

.category2 select {
	width: 40px;
}

.category3 select {
	width: 85px;
}
*/

.category2 {
	margin: 0 2em;
}


.select {
	display: inline;
}

/*
.select::after {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6.5px solid #fff;
	content: "";
	position: relative;
	top: 7px;
	width: 0;
}
*/

#detailPage {
	background: #000;
}

#detailPage .headerArea {
	height: 65px;
	padding: 5px;
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-size: 10px;
	color: #fff;
}

.headerArea em {
	display: none;
}

.credit {
	float: right;
	text-align: right;
}

.arw-back {
	position: relative;
	display: inline-block;
	padding-left: 20px;
	color: #333;
	text-decoration: none;
}
.arw-back:before {
	content: '';
	width: 40px;
	height: 40px;
	border: 1px solid #fff;
	border-radius: 50%;
	position: absolute;
	left: 5px;
	margin-top: -2px;
}

.arw-back:after {
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	left: 21px;
	margin-top: 12px;
	transform: rotate(225deg);
}

  


.footerArea {
	text-align: right;
	height: 30px;
	background: #000;
	bottom: 15px;
	padding-top: 20px;
	width: 100%;
	/*position: fixed;*/
}
.footerArea button {
	border-radius: 18px;
	position: relative;
	padding: 6px 20px;
	box-sizing: border-box;
	background: #f7ff03;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	margin: 0 0 10px;
	right: 10px;
}


.footerArea .btn1 {
	border-radius: 10px;
	position: absolute;
	padding: 5px 10px;
	box-sizing: border-box;
	background: #0745e2;
	color: #fff;
	text-align: center;
	margin: 0 0 10px;
	left: 10px;
	width: 140px;
	line-height: 14px;
}

.footerArea .btn1 a {
	color: #fff;
}

.footerArea .btn1 p {
	font-size: 10px;
}

.footerArea .btn2 {
	border-radius: 12px;
	position: absolute;
	padding: 10px 20px;
	box-sizing: border-box;
	background: #f7ff03;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	width: 140px;
	margin: 0 0 10px;
	right: 10px;
}

.modalArea {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	/*display: flex;*/
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.6);
}

.modalContent {
	margin: 55px 0 0;
	text-align: center;
}

.modalContent img {
	max-width: 94%;
}

.modalClose {
	display: block;
	position: relative;
	width: 30px;
	height: 30px;
	border: 2px solid #fff; /* 枠の調整 */
	border-radius: 50%;  /* 丸みの度合い */
	background: #000; /* ボタンの背景色 */
	top: 70px;
	left: 5px;
}

.modalClose::before, .modalClose::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px; /* 棒の幅（太さ） */
	height: 22px; /* 棒の高さ */
	background: #fff; /* バツ印の色 */
}

.modalClose::before {
	transform: translate(-50%,-50%) rotate(45deg);
}

.modalClose::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}