@charset "UTF-8";

/** CSS NAVI
 reset / common
 header
 footer
 slider
 contents section
 search option
**/

/* reset / common
----------------------------------------------------------------*/
body{
	color: #232323;
	line-height:180%;
	letter-spacing:1px;
  font-family:-apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", 'Helvetica Neue', 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  /* font-weight: 500; */
}
ul,ol{list-style:none;margin:0;padding:0;}
a {transition: color 1s ease-out; cursor: pointer; text-decoration: none;}
a:hover {	text-decoration: none; color: #999;}
a img { transition: opacity 1s ease-out;}
a:hover img { opacity: 0.8;}

img{height:auto;}

.text-xs {font-size: 70%;}
.text-sm {font-size: 85%;}
.text-md {font-size: 100%;}
.text-lg {font-size: 115%;}

a.btn-underline {
	color: #212121;
	border-bottom: 1px solid #212121;
	border-top: 1px solid #212121;
	padding: 0.3rem;
	transition: opacity 1s ease-out;
}
a.btn-underline:hover {
	opacity: 0.6;
}
a.btn-outline-primary:hover,
a.btn-outline-secondary:hover,
a.btn-outline-info:hover,
a.btn-outline-success:hover,
a.btn-outline-warning:hover,
a.btn-outline-danger:hover {
	color: #fff !important;
}
a.btn-more {
	font-family: 'Josefin Slab', serif;
	font-size: 1.8rem;
	padding: 0rem 2rem;
}
.bg-dark > a {
	color: #fff;
}
.bg-pdf {
  background: #c50607;
}
.bg-pdf > a {
	color: #fff;
}

.font-mincho {
/* 	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; */
	font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", serif;
}
.font-Slab {
	font-family: 'Josefin Slab', serif;
	font-family: 'Dancing Script', cursive;
	font-family: 'Comfortaa', cursive;
}

table.v-middle th,
table.v-middle td {
  vertical-align: middle;
}

.btn-200 { width: 200px; cursor: pointer; }
.btn-250 { width: 250px; cursor: pointer; }
.btn-300 { width: 300px; cursor: pointer; }

.text-red {
  color: red;
}

@media screen and (max-width:576px) {
  .btn-200,
  .btn-250,
  .btn-300 {
    width: 100%;
  }
}

/* header
----------------------------------------------------------------*/
header {
	position: relative;
}
.front_page header {
	background: url(../images/common/main-img.jpg) center center no-repeat;
	background-size: cover;
	height: 100vh;
}
.front_page header::before {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	position: absolute;
}
header h1 {
	font-size: 1.3rem;
	font-weight: bold;
}
header h1.logo a,
header h1.logo a:visited {
  color: #fff;
}

header .info-area {
  position: relative;
  top:-50px;
  padding: 1rem;
}


body .overlay, body .overlay {
	display: none;
	transition: opacity 1s ease-out;
}
body.open .overlay {
	position: fixed;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.6);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: opacity 1s ease-out;
}
body.open .overlay i {
  margin-right: 250px;
  opacity: 0.8;
}
body.open .navbar {
	transform: translateX(0);
	overflow-y: scroll;
	height: 100%;
	-ms-overflow-style: none;
}
body.open .navbar::-webkit-scrollbar {
  display: none;
}
.global-navi {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	z-index:1;
}
ul.nav-box {
	display: flex;
}
ul.nav-box li a {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
	header .navbar {
		width: 250px;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1000;
		background-color: #FFF;
		transition: all 0.2s;
		transform: translateX(100vw);
		display: block;
		padding: 0;
	}
	header ul.navbar-nav {
		display: block;
		padding: 0;
	}
  header ul.navbar-nav::-webkit-scrollbar {
    display: none;
  }
	header ul.navbar-nav li {
		border-bottom: 1px solid #ccc;
		text-align: left;
		display: block;
	}
	header ul.navbar-nav li a {
		padding: 0.9rem 0.5rem;
		display: block;
	}
  header ul.navbar-nav li a:hover {
  	text-decoration: none;
  	color: #999;
  }
	header ul.navbar-nav li.bnr {
  	border: none;
	}
	header ul.navbar-nav li.bnr a {
  	border: none;
  	padding: 0.9rem 0.5rem 0;
	}
	header ul.navbar-nav li.link-cat a {
  	padding-left: 1.7rem !important;
	}
	
	.dropdown-menu {
		margin: 0;
		padding: 0;
		border:none;
		background-color: #565656;
	}
  .dropdown-menu a {
    border-top: 1px solid #efefef;
    padding-left: 1.7rem !important;
	}
	.menu-title {
  	font-size: 1.4rem;
  	font-weight: bold;
  	padding: 0.8rem;
  	color: #fff;
  	margin-bottom: 0;
  	line-height: 1;
	}
@media screen and (max-width:768px) {	
	.front_page header {
  	height: 50vh;
	}
}

@media screen and (max-width:767px) {
  header .info-area h2 {
    font-size: 1.4rem
  }
}

@media screen and (max-width:576px) {
  header h1 {
/*   	font-size: 1rem; */
  }
}

@media screen and (max-width:320px) {
  header h1 {
  	font-size: 1.3rem;
  }
  header .info-area h2 {
    font-size: 1.3rem
  }
}

/* footer
----------------------------------------------------------------*/
footer {
	padding: 3rem 0;
	color: #212121;
}
footer .footer-logo {
  font-size: 2rem;
}
footer h4 {
	font-weight: bold;
	font-size: 1rem;
	border-bottom: 2px solid #bbb;
	padding: 0.5rem;
	margin-bottom: 0;
}
footer ul li {
	border-bottom:1px solid #bbb;
}
footer ul li a {
	display: inline-block;
	padding: 0.3rem;
	color: #212121;
  transition: color 1s ease-out; cursor: pointer; text-decoration: none;
}
footer ul li a:hover {
	text-decoration: none;
	color: #999;
}

dl.footer-address dt {
	width: 50%;
}
footer address {
	font-size: 1rem;
}

.float-nav {
  display: none;
}
.fadein {
opacity: 0;
transform : translate(0, 50px);
transition : all 0.3s;
}

.fadein.scrollin{
opacity: 1;
transform: translate(0, 0);
}

/* scroll top */
a#pageTop {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  //display: none;
  text-align: center;
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  color: #FFF;
  padding-top: 5px;
  line-height: 1;
  display: none;
}
a#pageTop:hover {
  text-decoration: none;
}
#pageTop i {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  margin-right: 0;
  padding: 0;
}

@media screen and (max-width:768px) {
  footer ul {
    font-size: 0.8rem;
  }
}

@media screen and (max-width:576px) {
  footer ul {
    font-size: 1rem;
  }
  p.copy {
    margin-bottom: 50px !important;
  }
  .float-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 1;
  }
  .float-nav ul li {
    width: calc(100% / 4);
    border-left: 1px solid #fff;
  }
  .float-nav ul li:first-child {
    border-left: none;
  }
  .float-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 50px;
  }
  a#pageTop {
    position: fixed;
    bottom: 3.8rem;
    left: 1rem;
    right: auto;
  }
}

/* index swiper slide
----------------------------------------------------------------*/
.swiper-container {
	position: relative;
	width: 270px;
	margin: 0 auto;
/* 	overflow: hidden; */
}
.ranking-box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 100vh;
	height: 100vh;
}
.swiper-slide {
	position: relative;
	width: 270px;
	padding-bottom: 1.5rem;
}
.rank-icon {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	color: #fff;
	font-weight: bold;
}
.ranking-1 {
	background-color: #d6b07f;
}
.ranking-2 {
	background-color: #aaa;
}
.ranking-3 {
	background-color: #b5745b;
}
#page_homepage .news [class*="col-"] {
  min-height: 70vh;
  max-height: 100vh;
}
.news dl {
	border-bottom: 1px dotted #ccc;
	margin-bottom: 0.5rem;
}
	.news dl dt {
		margin-right: 1rem;
	}
	.news dl dd ul li {
		margin-left: 0.5rem;
	}
	.news dl dd ul li:first-child {
		margin-left: 0;
	}
	
.swiper-container-1 {
	width: auto;
	height: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.swiper-container-1 .swiper-slide {
	background-position: center center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
/* 	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; */
	font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", serif;
	text-align: center;
	color: #fff;
	padding-bottom: 0;
}
.swiper-container-1 .swiper-slide::before {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	position: absolute;
	top:0;
	left: 0;
}
.swiper-container-1 .swiper-slide .inner-text {
	position: relative;
}
.swiper-container-1 .swiper-slide h2 {
	font-size: 1.6rem;
}
.swiper-container-1 .swiper-slide p.sub {
	font-size: 1rem;
}

@media screen and (max-width:991px) {
	.swiper-container-1 {
		min-height: 50vh;
	}
}
@media screen and (max-width:768px) {
  .swiper-container {
  	position: relative;
  	width: 350px;
  	width: 50vw;
  	margin: 0 auto;
  /* 	overflow: hidden; */
  }
  .swiper-slide h4 {
    font-size: 120%;
  }
  .swiper-slide .category {
    font-size: 100%;
  }
  #page_homepage .news [class*="col-"] {
    min-height: 40vh;
    max-height: 100vh;
  }
}
@media screen and (max-width:576px) {
  .swiper-container {
  	position: relative;
  	width: 270px;
  	margin: 0 auto;
  /* 	overflow: hidden; */
  }
  .swiper-slide h4,
  .swiper-slide .category {
    font-size: 85%;
  }
  .news dl {
  	border-bottom: 1px dotted #ccc;
  	margin-bottom: 0.5rem;
  	font-size: 0.9rem;
  }
  	.news dl dt {
  		margin-right: 1rem;
  	}
  	.news dl dd ul li {
  		margin-left: 0.5rem;
  	}
  	.news dl dd ul li:first-child {
  		margin-left: 0;
  	}
}

/*
@media screen and (max-width:320px) {
  .swiper-container {
  	position: relative;
  	width: 260px;
  	max-width: 260px;
  	margin: 0 auto;
  	overflow: hidden;
  }
}
*/

/*  section - contents
----------------------------------------------------------------*/
section.contents { padding: 5rem 0;}
section.section-title {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
section.title-gold {
	background: url(../images/common/section-title-bg-gold.svg) center center no-repeat;
	background-size: cover;
	width: 100%;
	min-height: 200px;
	max-height: 300px;
}
section.title-silver {
	background: url(../images/common/section-title-bg-silver.svg) center center no-repeat;
	background-size: cover;
	width: 100%;
	min-height: 200px;
	max-height: 300px;
}

@media all and (-ms-high-contrast:none){
  section.title-gold {
    background: url(../images/common/section-title-bg-gold.jpg) center center no-repeat;
    height: 200px;
  }
  section.title-silver {
  	background: url(../images/common/section-title-bg-silver.jpg) center center no-repeat;
    height: 200px;
  }
}

/*
@media screen and (max-width:767px) {
  section.title-gold {
    background-position: right center;
  }
  section.title-silver {
    background-position: left center;
  }
}
*/

.title-center-section {
	text-align: center;
	position: relative;
	text-transform: uppercase;
	font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", serif;
	font-size: 1.6rem;
}
.title-center-section span {
	padding-top: 1rem;
	display: block;
/* 	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
	font-size: 0.9rem;
}

.title-section { border-bottom:1px solid #aaa; position: relative; font-size: 1.6rem;}
.title-section span { position: absolute; bottom:0; right: 0; font-size: 0.95rem; border-bottom:1px solid #000; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}

.itemlist hr {
	width: 30px;
	height: 1px;
	margin: 0 auto 0.7rem;
	border-top: none;
}

@media screen and (max-width:576px) {
  section.contents { padding: 3rem 0;}
  .title-section {font-size: 1.3rem;}
  .title-center-section {font-size: 1.3rem;}
  .title-center-section span {font-size: 1rem;}
}


/* page
----------------------------------------------------------------*/
main.contents section.page-section {
	padding: 5rem 0;
	margin: 0;
}
section.page-title {
  background: url(https://nankiumeboshi.co.jp/web/assets/images/common/slide-img02.jpg) center center no-repeat;
  background-size: cover;
  width: 100%;
  position: relative;
}
section.page-title::before {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  top:0;
}
section.page-title h1 {
  padding: 3rem 0;
  margin-bottom: 0;
  line-height: 1;
  position: relative;
  font-size: 2rem;
  text-transform: uppercase;
}
section.page-title h1 span {
  display: inline-block;
  border-top:2px solid #fff;
  margin: 1rem 0 0 0;
  padding: 1rem 0 0 0;
  font-size: 1rem;
}

@media only screen and (max-width: 767px) {
  section.page-title h1 {
    font-size: 1.5rem;
  }
}

/* product list & detail
----------------------------------------------------------------*/
/* list page */
#page_product_list select {
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}
.search-area .input-group-text {
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .search-area .input-group-text {
    width: 135px;
  }
}
@media only screen and (min-width: 768px) {
  .ec-searchnavRole {
    padding: 0;
  }
}
  
h2.product-detail-title {
  font-size: 1.4rem;
  border-top:2px solid #ccc;
  border-bottom:1px solid #ccc;
  padding: 0.5rem 0;
  line-height: 1.6;
  color: #232323;
}
h2.product-detail-title input[type="radio"] {
  position: relative;
  top:-5px;
}
h2.product-detail-title label {
  margin-bottom: 0;
}

.ec-pager .ec-pager__item, .ec-pager .ec-pager__item--active {
  border:1px solid #999;
  padding: 0;
}
.ec-pager .ec-pager__item--active {
  background: #232323;
  color: #fff;
}

/* product detail */
.ec-productRole {
  line-height: 180%;
}
ul.ec-productRole__tags,
.ec-productRole .ec-productRole__tags {
  border-bottom: none;
}
.ec-productRole .ec-productRole__priceRegular {
  padding: 0;
}
.ec-productRole__priceRegular,
.ec-productRole .ec-productRole__price,
.ec-productRole .ec-productRole__code,
.ec-productRole .ec-productRole__actions {
  padding: 0;
  border-bottom: none;
}

#page_product_detail .table-responsive table th {
  width: 30% !important;
}
#page_product_detail .table-responsive table th label {
  margin-bottom: 0;
}

#page_product_detail .ec-input input,
#page_product_detail .ec-halfInput input,
#page_product_detail .ec-numberInput input,
#page_product_detail .ec-zipInput input,
#page_product_detail .ec-telInput input,
#page_product_detail .ec-select input,
#page_product_detail .ec-birth input {
  height: auto !important;
  margin-bottom: 0 !important;
}

.ec-productRole .ec-productRole__price,
.ec-price .ec-price__price {
  padding: 0;
  font-size: 1rem;
}
.ec-price .ec-price__tax {
  font-size: 10px;
}
.ec-font-size-2 {
  font-size: 0.8rem;
  display: block;
}
#page_product_detail input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  position: relative;
  top:3px;
  width: auto !important;
  margin-right: 0.5rem !important;
}

/* modal option */
.option_description {
  
}
.modal-option-title {
  font-size: 1rem;
}
.option_description img {
  float: none !important;
  margin: 0.5rem auto 0 !important;
  width: 50% !important;
}

.detail-guide img {
  width: auto !important;
}

@media only screen and (max-width: 767px) {
  h2.product-detail-title {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 576px) {
  #page_product_detail .table-responsive table th,
  #page_product_detail .table-responsive table td {
    font-size: 0.85rem;
    padding: 0.4rem;
  }
  .ec-productRole .ec-productRole__description {
    font-size: 0.9rem;
  }
  .option_description {
    min-width: 80% !important;
  }
}

/* product cart & shopping page
----------------------------------------------------------------*/
.ec-progress .ec-progress__number {
  border-radius: 0;
  background-color: #473828 !important;
}
.ec-progress .ec-progress__label {
  color: #473828;
}
.ec-progress .ec-progress__item::after {
  background: #473828;
}
.ec-progress .is-complete .ec-progress__number {
  background-color: #d6b07f !important;
}
.ec-progress .is-complete .ec-progress__label {
  color: #d6b07f;
}
.ec-select__delivery,
.ec-select__time {
  display: block !important;
  margin-right: 0 !important;
}
.text-notice {
  font-size: 0.85rem;
}
#page_shopping .ec-select {
  margin-bottom: 0 !important;
}
#page_shopping .ec-select select {
  width: 80% !important;
  margin-bottom: 0 !important;
  border: 1px solid #ccc;
}
#page_shopping .ec-select span {
  display: block;
}
#page_shopping .ec-orderRole .ec-borderedList {
  border-top: none;
}
ul.ec-borderedList li {
  border-bottom: none;
}

@media only screen and (max-width: 768px) {
  #page_shopping .ec-select select {
    width: 100% !important;
  }
}

/* static page
----------------------------------------------------------------*/
ul.number {
  list-style-type: decimal;
  margin-left: 1.5rem;
}
ul.circle {
  list-style-type: circle;
  margin-left: 1.5rem;
}

ul.notice {
  list-style-type: none;
}
ul.notice li {
  margin-left: 1rem;
  text-indent: -0.5rem;
}

.guide ul li,
.guide dl dd {
  font-size: 0.9rem;
  line-height: 180%;
}

@media screen and (max-width:576px) {
	.responsive-table table.table {
		border:none !important;
		width: 100%;
	}
	  .responsive-table table.table thead {
  	  display: none;
	  }
    .responsive-table table.table tr{
        display: block !important;
        background: none !important;
        border:none !important;
        margin-bottom: 0.5rem !important;
    }
    .responsive-table table.table th,
    .responsive-table table.table td{
        display: list-item !important;
        list-style: none;
        border: none !important;
    }
    .responsive-table table.table th {
	    font-size: 1rem;
	    width: 100% !important;
	    max-width: 100%;
	    padding: 0.5rem !important;
	    margin-bottom: 0.5rem;
/* 	    background: #f4ede6; */
    }
    .responsive-table table.table td {
      padding: 0.3rem;
    }
}

/* form parts */
input[type="text"],
input[type="tel"],
input[type="number"],
textarea {
  border-radius: 0 !important;
}
/*
select {
  border: 0 !important;
  outline: 1px solid #ccc;
  outline-offset: -1px;
  -webkit-appearance: button !important;
  appearance: button !important;
}
*/

.ec-checkbox .form-check {
  padding-left: 0;
  display: flex;
}

.text-description {
  font-size: 0.8rem;
}

.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
  font-size: 1.2rem;
}