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

   #shoplist_shoplist

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

#shoplist_shoplist {padding: 90px 5%;position: relative; z-index: 1;}

@media only screen and (max-width: 960px) {
#shoplist_shoplist {padding: 80px 5%; }
}
@media only screen and (max-width: 738px) {
#shoplist_shoplist {padding: 70px 5%; }
}




/* .shoplistArea */
.shoplistArea { position: relative; z-index: 0;}

/* .navArea */
.shoplistArea .navArea { position: relative; z-index: 2;}

/* .subNavArea */
.shoplistArea .subNav { font-size: 0;}
/*.shoplistArea .subNavArea ul { margin: -5px ; text-align: left;}
.shoplistArea .subNavArea ul li { display: inline-block; width: 14.285%; width: 16.666666666%; border: transparent 5px solid; text-align: center;}
.shoplistArea .subNavArea ul li a { display: block; font-size: 13px; line-height: 35px; letter-spacing: 1px; background: #fefefe; border: #111 1px solid;}
.shoplistArea .subNavArea ul li a:before { right:auto; left: 10px; font-size:13px; font-family: 'Libre Baskerville'; font-weight: 400; content:"#";}*/

/*@media only screen and (max-width: 900px) {
.shoplistArea .subNavArea ul li { width: 25%; }
}
@media only screen and (max-width: 738px) {
.shoplistArea .subNavArea ul { margin: -2px ; text-align: left;}
.shoplistArea .subNavArea ul li { width: 33.333%; border: transparent 2px solid; text-align: center;}
.shoplistArea .subNavArea ul li a { font-size: 12px; line-height: 35px; letter-spacing: 0.05em }
.shoplistArea .subNavArea ul li a:before { left: 5px; font-size:12px;}
}
@media only screen and (max-width: 560px) {
.shoplistArea .subNavArea ul li { width: 50%;}
}
*/

/* ul.list_shoplist_sub */
ul.list_shoplist_sub {list-style: none; display: flex; flex-wrap: wrap; gap:10px; }
ul.list_shoplist_sub li{width: calc((100% - 5 * 10px) / 6); }
ul.list_shoplist_sub li a { display: block; font-size: 14px; line-height: 35px; letter-spacing: 0.025em; background: #fefefe; border: #111 1px solid; text-align: center; position: relative; z-index: 0;}
ul.list_shoplist_sub li a:before { position: absolute; left: 10px; font-size:13px; font-family: 'Libre Baskerville'; font-weight: 400; content:"#";}

ul.list_shoplist_sub li.l_overseas { width: calc((100% - 5 * 10px) / 6); }
ul.list_shoplist_sub li.l_overseas a.australia { padding: 0 0 0 2px; letter-spacing: 0; }

@media (min-width: 961px) and (hover: hover) {
ul.list_shoplist_sub li a:hover { color: #fefefe; background: #111;}
}
@media only screen and (max-width: 960px) {
ul.list_shoplist_sub {gap:7px;}
ul.list_shoplist_sub li{width: calc((100% - 3 * 7px) / 4); }
}
@media only screen and (max-width: 738px) {
ul.list_shoplist_sub {gap:4px;}
ul.list_shoplist_sub li{width: calc((100% - 2 * 4px) / 3); }    
ul.list_shoplist_sub li a { font-size: 14px; line-height: 30px; }
ul.list_shoplist_sub li a:before { left: 5px; font-size:12px;}
}
@media only screen and (max-width: 640px) {
ul.list_shoplist_sub li{width: calc((100% - 1 * 4px) / 2); }
}












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

   .wrapperArea

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

.shoplistArea .wrapperArea { margin-top: 90px; }

/* .areaArea */
.shoplistArea .areaArea { margin-top: 90px; padding-top: 90px; border-top: #111 1px solid; }

@media only screen and (max-width: 960px) {
.shoplistArea .wrapperArea { margin-top: 80px; }
.shoplistArea .areaArea { margin-top: 80px; padding-top: 80px;}
}
@media only screen and (max-width: 738px) {
.shoplistArea .wrapperArea { margin-top: 70px; }
.shoplistArea .areaArea { margin-top: 70px; padding-top: 70px;}
}




/* .headline */
.shoplistArea .areaArea .headline h2.title_jp { font-size: 16px; font-family: 'Libre Baskerville', serif; font-weight: 500; letter-spacing: 1px; line-height: 1.8; text-align: center;}
.headline h3.title{ position: relative; margin: 0 auto; font-size: 40px; font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: 1.5px; line-height:1.3; text-align: center; z-index:1; }

/* h3 */
.shoplistArea .areaArea h3 { font-size: 40px; font-family: 'Libre Baskerville', serif; font-weight: 500; letter-spacing: 1px; line-height: 1; text-align: center; margin-bottom: 20px;}


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

   .blockArea

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

.shoplistArea .blockArea { font-size: 0; display: flex; flex-wrap: wrap;}
.shoplistArea .blockArea+.blockArea {margin-top: 65px;}

/* .blockBox */
.shoplistArea .blockBox { width: 33.333%; padding: 40px 3.5% 45px; position: relative; z-index: 1;}
.shoplistArea .blockBox:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; border-bottom: #111 1px dotted;border-right: #111 1px dotted;  z-index: -1;}
.shoplistArea .blockBox:first-of-type::after {border-left: #111 1px dotted;}
.shoplistArea .blockBox:first-of-type::after,
.shoplistArea .blockBox:nth-of-type(2)::after,
.shoplistArea .blockBox:nth-of-type(3)::after{ border-top: #111 1px dotted;}
.shoplistArea .blockBox:nth-of-type(3n+1)::after { border-left: #111 1px dotted;}

@media (min-width: 961px) and (hover: hover) {
.shoplistArea .headline_superiorroom .btn_superiorroom:hover { color: #fefefe; background: #111;}
}
@media only screen and (max-width: 960px) {
.shoplistArea .blockArea+.blockArea {margin-top: 45px;}
.shoplistArea .blockBox { width: 50%; padding: 35px 5% 40px; }
.shoplistArea .blockBox:nth-of-type(3)::after{ border-top: none;}
.shoplistArea .blockBox:nth-of-type(3n+1)::after { border-left: none;}    
.shoplistArea .blockBox:nth-of-type(odd)::after{ border-left: #111 1px dotted;}  
}
@media only screen and (max-width: 738px) {
.shoplistArea .blockArea+.blockArea {margin-top: 40px;}    
.shoplistArea .blockBox { width: 100%; padding: 35px 6.5%; }	
.shoplistArea .blockBox:after { border: #111 1px dotted;border-bottom: none; }
.shoplistArea .blockBox:nth-of-type(3)::after{ border-top: #111 1px dotted;}
.shoplistArea .blockBox:nth-of-type(3n+1)::after { border-left: #111 1px dotted;}    
.shoplistArea .blockBox:last-of-type::after {border-bottom: #111 1px dotted;}
}

/* span.area */
.shoplistArea .blockBox span.area { color: #999; font-size: 12px; font-family: 'Libre Baskerville';font-weight: 400; letter-spacing: 0.035em;line-height: 1; font-style: italic;display: block;}
/* h4 */
.shoplistArea .blockBox h4 {font-size: 17px; font-weight: 500; letter-spacing: .025em; line-height: 1.6; margin-top: 15px;}
/* dl */
.shoplistArea .blockBox dl { display: block flex; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: #111 1px dotted;font-size: 14px; letter-spacing: .025em; line-height: 1.7;}
.shoplistArea .blockBox dl dt { margin: 5px 0 0; width: 45px; ;font-size: 13px;color: #999;vertical-align: 0;text-transform: uppercase; padding-top: 1px;}
.shoplistArea .blockBox dl dd{ margin: 5px 0 0; width: calc(100% - 45px); word-break: break-all;vertical-align: 0;}
.shoplistArea .blockBox dl dd a { border-bottom: #111 1px solid;}

@media (min-width: 961px) and (hover: hover) {
.shoplistArea .blockBox dl dd a:hover { color: #fefefe; background: #111;}
}
@media only screen and (max-width: 960px) {
.shoplistArea .blockBox h4 {font-size: 15px; margin-top: 15px;}
.shoplistArea .blockBox dl {margin-top: 20px; padding-top: 20px; border-top: #111 1px dotted;}
}
@media only screen and (max-width: 738px) {
.shoplistArea .blockBox span.area { font-size: 12px; }
.shoplistArea .blockBox h4 {margin-top: 12px;}
.shoplistArea .blockBox dl { margin-top: 15px; padding-top: 15px; border-top: #ededed 1px solid; font-size: 14px;}
}



/* .distributorArea */
.distributorArea {margin: 0 0 60px;font-size: 0; position: relative; z-index: 0;}

.distributorArea .blockBox { display:inline-block; width: 100%; ;padding: 45px 5% 50px 38%;text-align: left;position: relative; z-index: 1;}
.distributorArea .blockBox:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: "";border: #111 1px dotted;  z-index: -1;}
.distributorArea .headline_disributor { position: absolute; top: 45px; left: 5%; z-index: 0;}
.distributorArea .headline_disributor .t_disributor_en {font-size: 25px; font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: 0.035em; line-height:1; font-style: italic}

/* span.area */
.distributorArea .blockBox span.area { color: #999;font-size: 12px;font-family: 'Libre Baskerville';font-weight: 400; letter-spacing: 1px;line-height: 1; font-style: italic;display: block;}
.distributorArea .blockBox h4 {font-size: 17px; font-weight: 500; letter-spacing: .025em; line-height: 1.6; margin-top: 15px;}
/* dl */
.distributorArea .blockBox dl { display: block flex; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: #111 1px dotted;font-size: 14px; letter-spacing: .025em; line-height: 1.7;}
.distributorArea .blockBox dl dt { margin: 5px 0 0; width: 60px; ;font-size: 13px;color: #999;vertical-align: 0;text-transform: uppercase; padding-top: 1px;}
.distributorArea .blockBox dl dd{ margin: 5px 0 0; width: calc(100% - 60px); word-break: break-all;vertical-align: 0;}
.distributorArea .blockBox dl dd a { border-bottom: #111 1px solid;}

@media only screen and (max-width: 960px) {
.distributorArea {margin: 0 0 35px; text-align: left;}
.distributorArea .blockBox { width: 100%; padding: 40px 5% 45px 35%;}
.distributorArea .headline_disributor { top: 40px;}
.distributorArea .headline_disributor .t_disributor_en {font-size: 20px; }
.distributorArea .blockBox h4 {font-size: 15px; margin-top: 15px;}
.distributorArea .blockBox dl {margin-top: 20px; padding-top: 20px; border-top: #111 1px dotted;}
}
@media only screen and (max-width: 738px) {
.distributorArea {margin: 0 0 25px;}
.distributorArea .blockBox { padding: 35px 6.5%;}
.distributorArea .headline_disributor { position: static; margin: 0 0 30px;}
.distributorArea .headline_disributor .t_disributor_en {font-size: 16px;}
.distributorArea .blockBox span.area { font-size: 12px; }
.distributorArea .blockBox h4 {margin-top: 12px;}
.distributorArea .blockBox dl { margin-top: 15px; padding-top: 15px; border-top: #ededed 1px solid; font-size: 14px;}
.distributorArea .blockBox dl dt { width: 45px;}
.distributorArea .blockBox dl dd{ width: calc(100% - 45px); }
}


.scroll_position {padding: 130px 0 0 ; margin: -130px 0 0;}

@media only screen and (max-width: 960px) {
.scroll_position {padding: 120px 0 0 ; margin: -120px 0 0;}
}
@media only screen and (max-width: 738px) {
.scroll_position {padding: 100px 0 0 ; margin: -100px 0 0;}
}