@charset "UTF-8";
/* CSS Document */

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Common
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html{font-size: 100%;}
body{font-family: 'Noto Sans JP', sans-serif;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto Condensed';
    line-height: 1.5;
	font-weight: 700;
}
.h1 .color-blue, .h2 .color-blue, .h3 .color-blue, .h4 .color-blue, .h5 .color-blue, .h6 .color-blue, h1.color-blue, h2.color-blue, h3.color-blue, h4.color-blue, h5.color-blue, h6.color-blue {
	color: #00aeef;
}
p {font-size: 1rem; margin-bottom: 2rem;}
img{max-width:100%;height:auto;}
::selection {
	background-color: #00aeef;
	color: #fff;
}

/*---------------------------------- link */
a {outline:none;color: #00aeef;}
a:hover{color:#bbb;text-decoration:none;}
a img:hover {
	transform: scale(1.01);
    transition-duration: 0.3s;
}
a img {
	opacity: 1;
	/*-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;*/
}
.bg-opacity-50 {
    background-color: rgba(255,255,255,0.50);
}

/*---------------------------------- margin */
.py-0{margin:0 auto !important;}
.my-6{margin:4.5rem auto !important;}
.my-7{margin:6rem auto !important;}
.my-10{margin:10rem auto !important;}
.mb-6{margin:0 auto 4.5rem !important;}
.mb-7{margin:0 auto 6rem !important;}
.mb-10{margin:0 auto 10rem !important;}
.py-6{padding:4.5rem auto !important;}
.py-7{padding:6rem auto !important;}
.py-10{padding:10rem auto !important;}
.pb-6{padding:0 auto 4.5rem !important;}
.pb-7{margin:0 auto 6rem !important;}
.pb-10{padding:0 auto 10rem !important;}

/*---------------------------------- btn */
.btn-dark {
    background-color: #000 !important;
    border-color: #000 !important;
}
.btn-dark:hover {
    background-color: #00aeef !important;
    border-color: #00aeef !important;
}
.btn-outline-light.focus, .btn-outline-light:focus, .btn-outline-light:active {
    box-shadow: none;
}

.display-5{font-size: 1.3rem;margin-bottom: 1rem;}
@media (max-width: 767.98px) {
	.bgcolor-list {
		width: 100%;
	}
	.bgcolor-list .btn{
		width: 100%;
		clear: right;
	}
	.list-inline li {
	margin-bottom: 0.5rem;
	}
}

.jumbotron {
	background-color: #fff !important;
    padding-bottom: 0;
    margin-bottom: 0;
}
@media (min-width: 576px){
	.jumbotron {
		padding: 0;
	}
}

/*---------------------------------- パンくずリスト */
#breadcrumb ul {
	list-style: none;
	-webkit-padding-start: 0;
}
#breadcrumb ul li{
	float:left;
	margin-top:0.6rem;
	font-size:0.8rem;
}
#breadcrumb ul li:after{
	content: ">";
	margin: 0 0.6rem;
}
#breadcrumb ul li:last-child:after{
    content: "";
}

/*---------------------------------- SNS */
.brand-sns a{
	background-color: #000;
	color: #fff !important;
	width: 3.6rem;
	height: 3.6rem;
}
.brand-sns a:hover{
	background-color: #181818;
	color: #fff;
}

/*---------------------------------- icon*/
i.icon-size-lg{font-size: 2.5rem;}
i.icon-size-md{font-size: 2rem;}
i.icon-size-sm{font-size: 1.2rem;}
i.icon-color-white{color: #fff;}
.btn i:before{margin: 0 0 0 0.5rem;}

/*---------------------------------- tableサイズ*/
.width-md{
	width: 80%;
	margin: 0 auto;
}
.width-sm{
	width: 60%;
	margin: 0 auto;
}
@media (max-width: 991.98px) {
	.width-md,.width-sm{width: 92%;}
}

/*---------------------------------- col隙間なくす*/
.no-gutters {
  margin:0;
  padding:0;
}
.no-gutters　> .col,
.no-gutters　> [class*="col-"] {
  margin:0;
  padding:0;
}

.badge {
    border-radius: 0 !important;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-wh{
	background-color: #00aeef;
	padding: 0.3rem 1rem;
	font-size: 1.4rem;
	color: #fff;
}
.page-header{
	text-align: center;
	padding: 8rem 0 1.2rem;
	background-color: #F3F3F3;
	font-size: 2.4rem;
}

@media (max-width: 767.98px) {
	.page-header{
		padding: 5rem 0 0.8rem;
		border-bottom: 4px solid #00aeef;
		font-size: 1.8rem;
	}
}
h2.head-width100 {
	background-color: #00aeef;
	text-align: center;
	color: #fff;
}
/*---------------------------------- carousel*/
.carousel-item img {width:100%;}
.slide {padding: 0;}
@media (max-width: 767.98px) {
	.slide {margin-bottom: 0;}
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
mega menu PC style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu a {color: #fff;}
.menu a:hover {color: #ededed;}
.description {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.menu {
	background: #00aeef;
	line-height: 1;
	font-family: 'Roboto Condensed', 'Noto Sans JP', sans-serif;
}
.menu-container {
    width: 100%;
    margin: 0 auto;
    background: #00aeef;
}
.menu-mobile {
    display: none;
    padding: 1rem;
}
.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}
.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1rem 2rem;
    background: #fff;
    color: #000;
}
.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}
.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}
.menu > ul:after {
    clear: both;
}
.menu > ul > li {
    float: left;
    background: #00aeef;
    padding: 0;
    margin: 0;
}
.menu > ul > li a {
    text-decoration: none;
    padding: 1rem 3rem;
    display: block;
}
.menu > ul > li:hover {
    background: #009fda;
}
.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #fff;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    border-bottom: #eee solid 2px;
}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}
.menu > ul > li > ul:after {
    clear: both;
}
.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    background: none;
    float: left;
    width: 20%;
	color: #009fda;
}
.menu > ul > li > ul > li a {
    color: #222;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}
.menu > ul > li > ul > li a:hover {
    color: #eee;
}
.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
    box-sizing: border-box;
}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}
.menu > ul > li > ul > li > ul:after {
    clear: both;
}
.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 5px 0;
    margin: 0;
    font-size: 1rem;
}
.menu > ul > li > ul > li > ul > li a {
    border: 0;
}
.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}
.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}
.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
mega menu Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 991.98px) {
    .menu-container {width: 100%;}
    .menu-mobile {display: block;}
    .menu-dropdown-icon:before {display: block;}
    .menu > ul {display: none;}
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1rem;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {position: relative;}
    .menu > ul > li > ul.normal-sub {width: 100%;}
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {margin: 0;}
    .menu > ul > li > ul > li > ul {position: relative;}
    .menu > ul > li > ul > li > ul > li {float: none;}
    .menu .show-on-mobile {display: block;}
}
.menu-logo{
	background: #000;
	padding: 1rem 0 0.5rem;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Contetns
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Products
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*---------------------------------- PRODUCTS-ARCHIVES */
.product-archives-side h1{
	position: relative;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background-color: #181818;
	padding: 1rem 1.25rem;
	margin-bottom: 0 !important;
}
.list-group a:hover{
	text-decoration: none;
}

.product-archives-side .card-header {
    margin-bottom: 0;
    background-color: #181818;
    border-bottom: 1px solid rgba(0,0,0,.125);
	padding: 0;
}
.product-archives-side .card-header h1 {font-weight: bold !important;	}
.product-archives-side .card-header a {color: #fff;}
.product-archives-side li.list-group-item {padding: .75rem 0 .75rem 1.25rem;}

/*---------------------------------- PRODUCTS */
.fadeInDown {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-30px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/*---------------------------------- PRODUCTS-SINGLE */
.item-price {font-size: 1.6rem;font-weight: bold;}
.item-tax {font-size: 1rem;}
ul.list-caution {
	font-size: 1.2rem;
	list-style: none;
}
#item-size {
	border-top: nonoe;
	border-bottom: none;
	padding: 2.4rem 0;
	margin: 2.4rem 0;
}
.feature-wapper{
	background-color: #000;
	color: #ccc;
}
.feature-wapper h2,.feature-wapper h3{
	color: #fff;
}
.feature-wapper h3{
	font-size: 1.25;
}

/*---------------------------------- Swiper */
.swiper-container-posts {
    max-width: 100%;
	overflow: hidden;
    position: relative;
	box-sizing: border-box;
}
.swiper-container {
    max-width: 100%;
	overflow: hidden;
    position: relative;
	box-sizing: border-box;
}
.swiper-slide {
    display: flex;
	box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.thumb-grid {
    display: none;
}
.thumb-grid .thumb {
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-button-next,
.swiper-button-prev {
  color: #000 !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 24px;
}
.swiper-button-next {
  right: 10px;
}
.swiper-button-prev {
  left: 10px;
}

@media (min-width: 992px) {
    .swiper-container {
        display: none;
    }
    .thumb-grid {
        display: flex;
        flex-wrap: wrap;
    }
    .thumb-grid .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.swiper-caption {
    text-align: center;
    margin: 10px;
    font-size: 0.8rem;
}

.mfp-bg {
  background: #efefef !important;
}
.mfp-figure:after, .mfp-iframe-scaler iframe {
    box-shadow: none !important;
}
.mfp-close-btn-in .mfp-close {
    color: #333 !important;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
StoreList
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bgcolor-list:nth-child(odd) {background: #fff;}
.bgcolor-list {
    border-bottom: #ddd solid 1px;
    padding: 1.5rem 1.5rem 0.5rem;
	width: 80%;
	margin: 0 auto;
	background: #f2f2f2;
}
.bgcolor-list .btn{float: right;}
@media (max-width: 991.98px) {
	.bgcolor-list {
		width: 100%;
		padding: 1.5rem;
	}
}
@media (max-width: 767.98px) {
	.bgcolor-list {width: 100%;}
	.bgcolor-list .btn{
		width: 100%;
		clear: right;
	}
	.list-inline li {margin-bottom: 0.5rem;}
}
.archives-dropdown {
	width: 60% !important;
	margin: 0 auto;	
}
.archives-dropdown .custom-select {
	border: 2px solid #181818;
	height: calc(4.25rem + 2px);
	border-radius: 0;
}
@media (max-width: 767.98px) {
	.archives-dropdown {width: 100% !important;}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
News
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news-detail h1{
	font-weight: 700;
	font-size: 3rem;
	margin-bottom: 1rem;
    text-align: center;
}
.news-detail h2{
	padding: 1.2rem 0;
	margin: 2rem 0 1rem;
	font-weight: 700;
	font-size: 1.5rem;
    text-align: center;
}
.news-detail p,.news-detail h2,.news-detail blockquote {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.news-detail blockquote p {
    width: 100%;
}
@media (max-width: 991.98px) {
    .news-detail p,.news-detail h2,.news-detail blockquote {
    width: 80%;
    }
}
@media (max-width: 767.98px) {
	.news-detail p,.news-detail h2,.news-detail blockquote {
    width: 100%;
    }
}
.news-detail .figure-caption{
    text-align: center;
}
.news-detail-side small{
	margin-bottom: 0 !important;
}
.post-tag {
	background-color: #ededed;
	padding: 0.2rem 0.6rem;
	font-size: 0.8rem;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Pages
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#accordion_menu > li {
    border: #ccc 1px solid;
    margin-bottom: -1px;
}
#accordion_menu div {
    padding: 10px;
}
#accordion_menu a{
    color: #00aeef;
}
#accordion_menu a[data-toggle="collapse"]{
    display: block;
    padding: 10px;
    text-decoration: none;
  position: relative;
}
#accordion_menu a[data-toggle="collapse"]:hover{
    background: #F3F3F3;
}
#accordion_menu a[data-toggle="collapse"]::after{
    content:"";
    display: block;
    width: 8px;
    height: 8px;
    border-top: #666 1px solid;
    border-right: #666 1px solid;
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
}
#accordion_menu a[aria-expanded=false]::after{
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    transition-duration: 0.3s;
}
#accordion_menu a[aria-expanded=true]::after{
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    transition-duration: 0.3s;
}
[id^="menu"] li{
    padding: 10px 10px 10px 20px;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-brand {background-color: #00aeef;}
.footer-brand .card-header {
    margin-bottom: 0;
    background-color: #333;
    border-bottom: 1px solid rgba(0,0,0,.125);
	padding: 0;
}
.footer-brand .card-header a {color: #fff;}
.footer-brand .card {
    background-color: #00aeef;
	border: none;
}
.footer-brand li.list-group-item {padding: .75rem 0 .75rem 1.25rem;}
.footer-brand .card-body {padding: 0;}
footer {
	background-color: #000;
	color: #fff;
	padding: 2rem 0;
	text-align: center;
}
nav ul.foot-nav {
	list-style: none;
	font-size: 1rem;
	text-align: center;
	margin-bottom: 2rem;
}
nav ul.foot-nav ul {
	text-align: center;
	float: left;
}
nav ul.foot-nav li {
	display: inline-block;
	padding: 0 1rem;
}
nav ul.foot-nav li+li{border-left: 1px solid;}
footer.card {background-color: #00aeef;}
@media (max-width: 767.98px) {
	footer p {font-size: 0.8rem;}
	footer img {width: 80px;}
}

/*---------------------------------- TOP SCROLL */
#page-top {
    position: fixed;
    bottom: 300px;
    right: 20px;
    font-size: 100%;
}
#page-top a {
    display: block;
    background: #000;
    color: #fff;
    width: 60px;
	height: 60px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
#page-top a:hover {
    background: #00aeef;
    text-decoration: none;
}
@media (max-width: 991.98px) {
	#page-top {
		bottom: 70px;
		font-size: 0.8rem;
	}
	#page-top a {
		width: 50px;
		height: 50px;
		padding: 4px 0;
	}
}

/*---------------------------------- icon*/
.icon-absolute{
    position:absolute;
	left: 0;
    bottom: 0;
	width: 15%;
}
.icon-relative {
	position:relative;
	width: 100%;
	background: #555;
}
.icon-relative img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.icon-relative:hover img {
	opacity: .5;
}

.glow {
	background: #555;
}
.glow img {
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
    transition-duration: 0.3s;
}
.glow:hover img {
	opacity: .5;
}
.glow:hover {
	transform: scale(1.01);
    transition-duration: 0.3s;
}

.scale {
    width: 400px;
    height: 300px;
    overflow: hidden;
}
.scale img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.scale img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.card {border-radius: 0 !important;}
.card .card-header a[data-toggle="collapse"] {
	display: block;
	padding: .75rem 1.25rem;
	margin: -.75rem -1.25rem;
}
.card .card-header a[data-toggle="collapse"]:active,
.card .card-header a[data-toggle="collapse"]:hover,
.card .card-header a[data-toggle="collapse"]:focus {
	text-decoration: none;
}
.card-header:first-child {
    border-radius: 0 !important;
}

.scrollingElement {
  overflow: scroll;
  position: absolute;
  top: 213px;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
}

/*---------------------------------- リスト*/
li.list-group-item ul li {
	list-style-type: none;
}

/*---------------------------------- ScrollRevea */
.scroll-animation{ visibility: hidden; }

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Pagenation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    position: relative;
    font-size: 1rem;
}
.pagination span, .pagination a {
    display: inline-block;
    width: auto;
    margin: 4px;
    padding: 8px;
    border: 2px solid #000;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
}
.pagination .pager{
    width: 32px;
}
.pagination a:hover,
.pagination .current  {
    color: #fff;
    border-color: #000;
    background-color: #000;
}
.pagination a.prev {
    margin-right: 16px;
}
.pagination a.next {
    margin-left: 16px;
}
.pagination span.page_num {
    display: none;
}