@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=BIZ+UDPMincho&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;600;700;900&family=Open+Sans:wght@800&family=Oswald:wght@300;400;700&display=swap');

/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700,900&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:800&display=swap');*/
/* ///////////// 共通項目 /////////////*/
html{
	font-size: 62.5%; /* ///// 10px ///// */
	box-sizing: border-box;
	scroll-behavior: smooth;
}
@media (min-width: 240px) and (max-width: 767.98px){
html{
	font-size: 1.2rem; /* ///// 12px ///// */
}
}
body{
	background-color: #FFFFFF;
	padding-top: 80px;
}
p {
	text-align: center;
}
h2{
	font-size: 1.4rem;
	font-family: 'BIZ UDPGothic', sans-serif;
	font-weight: 700;
	text-align: center;
	color: #888;
}
h3{
	font-size: 3rem;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	color: #777;
	text-align: center;
}
@media (max-width:768px){
h2{
	font-size: 0.7rem;
	text-align: left;
}
h3{
	font-size: 1.4rem;
}
}
a:hover img {
	opacity: 0.7;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a{
	color: #000000;
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.bnr-frame{
	border: 1px solid #cccccc;
	box-sizing: border-box;
	border-color: rgba(204,204,204,0.3);
}
/*////// タブレットサイズ以下では.noneで非表示 ////////*/
@media screen and (max-width: 768px){
	.none {display:none}
}
/* ///////////// wrapper /////////////*/
#wrapper{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.subwrapper{
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
}
/* ///////////// header /////////////*/
header{
	width: 100%;
	margin: 10px auto;
	position: absolute;
	background-color: rgba(255,255,255,0.9);
	border-bottom: 1px solid #A8A8A8;
}
#innerheader{
	width: 100%;
	margin: 0 auto;
	max-width: 1120px;
}
img.logo {
	max-width: 160px;
	height: auto;
}
li.nav-item{
	font-size: 1.6rem;
	font-family: 'BIZ UDPMincho', serif;
	font-weight: 700;
	margin-right: 15px;
}
li.nav-item:last-child{
	margin-right: 0px;
}
.nav-item a {
	position: relative;
	transition: .3s;
	color: #666666!important;
}
a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 2px;
	background-color: rgb(00,102,204,0.7);
	transition: .3s;
}
.nav-item a:hover{
	color: #FF69B4!important;
}
.nav-item a:hover::after {
	width: 100%;
}
@media (min-width: 768px) and (max-width: 839.98px){
li.nav-item{
	font-size: 1.2rem;
}
}
@media (min-width: 840px) and (max-width: 991.98px){
li.nav-item{
	font-size: 1.4rem;
}
}
@media (min-width: 240px) and (max-width: 767.98px){
li.nav-item{
	border-bottom: dotted 1px #888888;
	font-size: 1.2rem;
	color: #202020;
}
li.nav-item:last-child{
	border-bottom: none;
}
.nav-item a {
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(100,210,255,0.3) 50%);
	background-position: 0 0;
	background-size: auto 200%;
	transition: .3s;
}
.nav-item a:hover {
	background-position: 0 100%;
	color: #fff;
	border: none;
}
}
.navbar-toggler{
	border: none;
}
.navbar-toggler:active{
	outline: none;
}
/* /////////// ハンバーガーメニューの挙動 /////////// */
button:focus{
	outline: none;
}
button[aria-expanded="true"] > span {
	position: relative;
	display: none;
}
button[aria-expanded="true"]::after {
	position: relative;
	font-size: 28px;
	content: "X";
}
/*/// slickを初期化してから表示 ///*/
.delay{
	display: none;
	opacity: 0;
	transition: opacity .3s linear;
}
.delay.slick-initialized{
	display: block;
	opacity: 1;
}
/*/// slick-initializedが付与されたら表示 ///*/
#slider figure{
	margin: 0;
}
.slick img{
	width: 100%;
	height: auto;
}
/* sm以下で見たときは"mobile"classの画像が表示 */
@media only screen and (max-width: 768px) {
.pc{
	display: none !important;
}
.mobile{
	display: block !important;
}
}
/* ////////// Slickカスタマイズ //////////*/
/* centerModeで両端の画像を白で透過 */
.slick-slider .slick-track, .slick-slider .slick-list{
	background: #fff;
}
.slick-initialized .slick-slide{
	opacity: 0.6; /* 両サイドの画像を透過 */
}
.slick-initialized .slick-slide.slick-active{
	opacity: 1; /* センター画像を非透過 */
}
/* ボタン画像および位置変更 */
.slick-arrow.slick-prev {
	left: 20px;
	z-index: 1;
}
.slick-arrow.slick-next {
	right: 20px;
}
@media screen and (max-width:480px) {
.slick-arrow.slick-prev{
	left: 10px;
}
.slick-arrow.slick-next{
	right: 10px;
}
}
.slick-dots {
	height: 12%;
	z-index: 1;
}
/* ///////////// main 本体部分 /////////////*/
#main{
	width: 100%;
	margin: 0 auto;
}
/* ///////// breadcrumbs パンくずリスト /////////*/
/*
#bresdcrumbs{
  width: 100%;
  margin: 0 auto;
}
#breadcrumbs ol{
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#breadcrumbs li{
  margin-right: 10px;
  float: left;
  list-style: none;
  font-size: 0.9rem;
}
*/
/* ////// ボタン部分共通 SM以下で横幅いっぱい //////*/
@media all and (max-width:696px) {
.custom-btn {
	width: 100%; display:block;
}
}
/* ///////////// return /////////////*/
#return p{
	font-size: 1.8rem;
	color: #0066CC;
	font-family: serif;
	font-weight: bold;
}
#return p:hover{
	color: #FF69B4;
}
@media (max-width:768px){
#return{
	margin-bottom: 0!important;
}
#return p{
	font-size: 1rem;
}
}
/* ///////////// stock-list button /////////////*/
img.stock-list{
	position:fixed;
	max-width: 100px;
	right: 3%;
	bottom: 3%;
	z-index: 100;
	transition:1s;
	opacity: 1;
}
.stock-list:hover{
	opacity: 0,8;
}
.button-area{
	width: 40%;
	margin: 0 auto;
}
/* //////// 縦積み時纏めてpt-4キャンセル ////////*/
@media (max-width:768px){
#topics{
	padding-top: 0!important;
}
#brands{
	padding-top: 0!important;
}
#pickup-items{
	padding-top: 0!important;
}
#button-area{
	padding-top: 0!important;
}
#accesary{
	padding-top: 0!important;
}
#access{
	margin-top: 0!important;
}
#other-info{
	padding-top: 0!important;
}
}
/* ///////////// footer /////////////*/
footer{
	width: 100%;
	margin: 10px auto;
	position: absolute;
	background-color: #FFFFFF;
	border-top: 1px solid #A8A8A8;
}
small{
	font-size: 1rem;
}
.footer-link{
	font-size: 1rem;
	border-right: 1px solid #CCCCCC;
}
.top,.credit{
	font-size: 1.2rem;
}
@media (max-width:768px){
footer{
	border-top: none;
	padding-top: 0!important;
}
.footer-link{
	font-size: 0.9rem;
	padding-bottom: 15px!important;
	border-right: none;
	border-bottom: 1px solid #CCCCCC;
}
.k-mark{
	width: 15%;
	margin: 0 auto 5px auto;
}
.credit,small{
	font-size: 0.7rem!important;
}
}
.top-page{
	background-color: #F5F5F5;
	border: 1px solid #CCCCCC;
}
.top-page img{
	width: 100%;
	height: auto;
}
footer a{
	text-decoration: none;
}
footer a:hover{
	text-decoration: underline;
}