@charset "UTF-8";
/* ================================================================

	base.css

================================================================ */


.sp {display: none!important;}
.pc { display:block;}

@media only screen and (max-width: 767px) {
	img{
		max-width: 100%;
		height: auto;
	}
	.sp {
		display: block!important;
	}
	.pc {
		display: none!important;
	}
}

/* body
---------------------------------------------------------- */
body {
	min-width: 1260px;
	position: relative;
}
@media only screen and (max-width: 767px) {
	body {
		min-width: 100%;
	}
}

/* wrapper
---------------------------------------------------------- */
#wrapper {
	position: relative;
    width: 100%;
    height: 100%;
}

#home {
    max-width: none;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 767px) {
	#wrapper {
		right: 0;
		width: auto;
	}
}

/* header
---------------------------------------------------------- */
#header {
	/* position: -webkit-sticky;
    position: sticky; */
	position: fixed;
	/* top: -80px; */
	top: 0;
	left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.7);
    z-index: 1000;
    height: 80px;
	border-bottom: 2px solid #0246AB;
}
#header .inner {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
	justify-content: space-between;
}

.fixed{
	position: fixed;
	top: 0;
	left: 0;
}

#logo {
	position: absolute;
	top: 25%;
	left: 120px;
	z-index: 10;
	/* float: left; */
}
.caption {
	/* float: right; */
	position: absolute;
	top: 12%;
	right: 120px;
	font-size: 1.2rem;
}

@media only screen and (max-width: 767px) {
	#header {
		height: 60px;
	}
	#header .inner {
		width: 90%;
	}
	
	#logo {
		display: block;
		width: 100%;
		top: 35%;
		left: 5%;
	}

	.caption {
		top: 10%;
		right: 5%;
	}
}

/* gnav
---------------------------------------------------------- */

#gnav {
	width: 100%;
	/* position: relative; */
}
#gnav ul {
	width: 40%;
	display: flex;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
	justify-content: space-between;
	text-align: center;
	margin: 0 auto;
	/* padding: 30px 0; */
	float: right;
	position: absolute;
	top: 45%;
	right: 120px;
}
#gnav li.active a, #sp_nav ul li.active a {
	background-image: url(img/common/menu_icon01.png);
	color: #0246AB;
}
#gnav li a, #sp_nav ul li a {
	background-image: url(img/common/menu_icon02.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 10px;
	text-align: center;
	color: #707070;
	font-size: 1.4rem;
	font-weight: bold;
}

.flex {
	display: flex;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
	justify-content: space-between;
	flex-wrap: wrap;
    word-wrap: break-word;
}

@media only screen and (max-width: 767px) {
	#gnav {
		display: none;
	}
}

#show_menu, #sp_nav {
	display: none;
}

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

	#show_menu {
		position: absolute;
		right: 0;
		top: 25px;
		bottom: 0;
		display: block;
		/* width: 70px;
		height: 20px; */
		z-index: 85;
	}
	#show_menu.open {
		position: absolute;
		right: 0;
		top: 18px;
		z-index: 10001;
	}
	
	#sp_nav {
		display: block;
		width: 100%;
		position: absolute;
		top: 60px;
		left: 0;
	}
	#sp_nav ul {
		display: none;
	}
	#sp_nav ul li {
		background-color:#0246AB;
		background-color: rgba(255,255,255,0.7);
		border-bottom: solid 1px #fff;
		border-bottom: solid 2px #0246AB;
		padding: 15px 0 15px 5%;
		font-size: 1.8rem;
		font-weight: bold;
	}
	#sp_nav ul li a {
		font-size: 1.8rem;
	}
	#sp_nav .sns {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flexbox;
		display: -moz-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: -moz-flex;
		display: flex;
		flex-wrap: wrap;
		word-wrap: break-word;
		white-space: normal;
		margin-top: 70px;
		position: static;
	}

	.hamburger {
		position: absolute;
		right: 0;
		top: 0;
		width: 25px;
		height: 25px;
		cursor: pointer;
		z-index: 300;
	}
	.hamburger__line {
		position: absolute;
		left: 0;
		width: 20px;
		height: 2px;
		background-color: #000;
		transition: all .6s;
	}
	.hamburger__line--1 {
		top: 10px;
	}
	.hamburger__line--2 {
		top: 17px;
	}
	.hamburger__line--3 {
		top: 24px;
	}
	
	/* モーダルが表示された時用のCSS */

	#show_menu.open .hamburger__line {
		background-color: #000;
	}
	#show_menu.open .hamburger__line--1 {
		transform: rotate(45deg);
		top: 25px;
	}
	#show_menu.open .hamburger__line--2 {
		width: 0;
		left: 50%;
	}
	#show_menu.open .hamburger__line--3 {
		transform: rotate(-45deg);
		top: 25px;
	}
}

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

	#show_menu {
		top: 17px;
		right: 15px;
	}
	#show_menu.open {
		top: 11px;
		right: 15px;
	}
}


/* main
---------------------------------------------------------- */

#main {
	position: relative;
	/* min-width: 1320px;
    width: 100vw; */
	height: 1025px;
	background: url('img/common/main_image.png') no-repeat top center;
	background-size: cover;
}
.main_ttl {
	padding-top: 25%;
	text-align: center;
	width: 50%;
	margin: 0 auto;
}
.main_ttl img {
	max-width: 100%;
	height: auto;
}

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

	#main {
		min-width: 100%;
		height: 100%;
		/* height: 45vh; */
	}
	.main_ttl {
		padding: 25% 0;
		margin: 0 auto;
		/* position: static; */
		width: 60%;
	}
}

/* contents
---------------------------------------------------------- */

#article {
	margin: 0 auto;
}

.section {
	margin: 0 0 30px;
	background: #fff;
}
/* .section .inner {
	width: 1200px;
    margin: 0 auto;
} */
.section .inner h2 {
	font-size: 2rem;
	text-align: center;
}

.col2 .column {
	width:45%;
	background-color: #ddd;
	padding: 2%;
}
.col2 .column:nth-of-type(even) {
	float: right;
}
.col3 .column {
	width:28%;
	background-color: #ddd;
	padding: 2%;
}
.col3 .column:nth-of-type(2) {
	margin: 0 2%;
}

@media only screen and (max-width: 767px) {
	#article {
		/* width: 90%; */
		/* padding: 0 2.5%; */
	}
}

.block {
	/* background: rgba(0,0,0,0.6); */
	/* border-top: solid 2px #fff; */
	/* padding: 60px; */
}
.block .inner {
	width: 1200px;
	/* width: 980px; */
	margin: 0 auto;
	padding: 80px 0;
}
.block .inner h2 {
	font-size: 2rem;
	font-weight: normal;
	text-align: left;
	color: #808080;
}
/* .block .inner h2 span {
	display: block;
	font-size: 5.6rem;
	margin-bottom: 30px;
} */
.block .inner h2 span:after {
	content: "";
	background-image: url('img/common/ttl_icon01.png');
	width: 67px;
	height: 60px;
	display: block;
	text-align: center;
	margin: 0 auto;

}
.block .inner h3 {
    font-size: 3.6rem;
    margin-bottom: 20px;
	text-align: left;
	color: #021D35;
	position: relative;
}
/* .block .inner h3:after {
    content: "";
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 30px;
    height: 2px;
    background-color: #fff;
    margin: 10px auto 0;
} */
.block .inner h4 {
    margin-bottom: 30px;
    font-weight: bold;
	border-left: 4px solid #0246AB;
    line-height: 100%;
    padding-left: 10px;
	-webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.block .inner .txt_area {
	border: solid 1px #fff;
	margin-bottom: 30px;
	padding: 40px;
	font-size: 1.2rem;
}

.bg_filter {
    background-color: rgba(0,0,0,0.5);
}

.fadein {
    opacity : 0;
    transform : translate(0, 0);
    transition : all 1000ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.btn {
	display: inline-block;
	box-sizing: border-box;
	width: 40%;
	background-color: #FFD06A;
	padding: 10px;
	font-weight: bold;
	margin: 0 auto;
}

#news_area {
	background: linear-gradient(rgba(143, 228, 255,1),rgba(143, 228, 255,0));
	height: 50vh;
}
#news_area .block .inner, #sns_area .block .inner {
	position: relative;
	z-index: 10;
	width: 70%;
	/* background-color: #fff; */
	padding: 90px;
}
#news_area .wrap .news_ttl h2 {
	width: 90px;
	font-size: 1.6rem;
	font-weight: bold;
    letter-spacing: 1px;
	color: #fff;
}
#news_area .wrap {
	width: 750px;
	margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    word-wrap: break-word;
    white-space: normal;
}
.news_list {
    /* border-top: 1px solid #DADBDC; */
	width: 620px;
	font-size: 1.4rem;
	border-left: double 6px #fff;
    padding-left: 30px;
}
.news_list ul {
	margin-bottom: 20px;
}
.news_list li {
    border-bottom: 1px solid #fff;
}
.news_list li a {
    text-decoration: none;
    padding: 15px 0;
    display: -webkit-box;
    display: flex;
    -webkit-transition: opacity 750ms cubic-bezier(.215,.61,.355,1);
    transition: opacity 750ms cubic-bezier(.215,.61,.355,1);
}
.news_list li a .date {
    color: #fff;
    font-size: 1.2rem;
	font-weight: bold;
    letter-spacing: .01em;
    line-height: 1;
    width: 92px;
}
.news_list li a .icon_new {
	display: inline-block;
	margin-bottom: 10px;
    font-weight: 500;
    color: #CC3333;
}
.news_list li a .category_notice, .news_list li a .category_event {
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: .05em;
    line-height: 15px;
    width: 88px;
    height: 18px;
    border-radius: 3px;
    box-sizing: border-box;
    margin-top: -2px;
}
.news_list li a .category {
	width: 100px;
	height: 20px;
	/* background: #969696; */
    /* color: #FFF; */
	background: #F2F2F2;
	color: #969696;
    text-align: center;
    border-radius: 4px;
    font-size: 1.2rem;
	font-weight: bold;
    padding: 1px;
    margin-right: 10px;
}
.news_list li a .category_notice {
	color: #f4c940;
    border: 1px solid #f4c940;
}
.news_list li a .category_event {
    color: #15a84c;
    border: 1px solid #15a84c;
}
.news_list li a .txt {
    width: calc(100% - 92px - 88px);
    color: #fff;
    letter-spacing: .025em;
    line-height: 1.5;
    /* margin-top: -4px;
    padding-left: 24px; */
}
.news_link {
	display: block;
	text-align: right;
	text-decoration: underline;
}
.news_link:link,.news_link:visited {
	/* color: #fff; */
}


.menu_area .block .inner {
	padding: 0 0 80px;
}
.menu_area .flex li {
	border: 1px solid #646464;
	text-align: center;
}
.menu_area .flex li h3 {
	background-color: #0246AB;
	padding: 10px;
	color: #fff;
	font-size: 2rem;
	text-align: center;
}
.menu_area .flex li p {
	margin-bottom: 20px;
}
.menu_area .flex li .btn {
	margin-bottom: 30px;
}

.product_area h2.ttl {
	font-size: 3.6rem;
	color: #fff;
	text-align: center;
	background: #0246AB;
	padding: 20px 0;
	margin-bottom: 60px;
}

@media only screen and (max-width: 767px) {
	
	/* .block {
		background: rgba(0,0,0,0.6);
		border-top: solid 2px #fff;
		padding: 5%;
	} */
	.block {
		/* margin-bottom: 60px; */
	}
	.block .inner {
		width: 90%;
		margin: 0 auto;
		/* padding: 0 10%; */
		padding: 40px 0;
		/* color: #fff; */
	}
	.block .inner h2 {
		font-size: 1.4rem;
	}
	/* .block .inner h2 span {
		font-size: 3rem;
		margin-bottom: 20px;
	} */
	/* .block .inner h2 span:after {
		content: "";
		background-image: url('img/common/ttl_icon01.png');
		background-size: 37px 30px;
		width: 37px;
		height: 30px;
		display: block;
		text-align: center;
		margin: 0 auto;
	}	 */
	.block .inner h3 {
		font-size: 2rem;
		margin-bottom: 20px;
		text-align: left;
		position: relative;
	}	
	.block .inner .txt_area {
		border: solid 1px #fff;
		margin-bottom: 30px;
		padding: 20px;
		font-size: 1rem;
	}

	.cont_txt {
		width: 100%;
	}

	.bg_img {
		margin-bottom: 60px;
	}

	.btn {
		display: inline-block;
		box-sizing: border-box;
		width: 80%;
		background-color: #FFD06A;
		padding: 5px;
		font-weight: bold;
		margin: 0 auto;
	}
	
	#news_area {
		/* height: 35vh; */
		height: auto;
	}	
	#news_area .block .inner, #sns_area .block .inner {
		width: 90%;
		padding: 30px 0;
	}
	.news_ttl {
		width: 100%;
	}
	#news_area .wrap .news_ttl h2 {
		width: auto;
		border-bottom: double 3px #fff;
		margin-bottom: 10px;
		font-size: 1.6rem;
	}
	#news_area .wrap {
		width: 100%;
		margin-left: auto;
		margin-right: 0;
	}
	.news_list {
		width: 100%;
		border-left: none;
		padding-left: 0;
	}
	.news_list ul {
		margin-bottom: 20px;
	}
	.news_list li a {
		padding: 15px 0;
	}
	.news_list li a .date {
		/* color: #fff; */
		font-size: 1.2rem;
		font-weight: bold;
		letter-spacing: .01em;
		line-height: 1;
		width: 92px;
	}
	.news_list li a .category {
		width: 100px;
		height: 20px;
		text-align: center;
		border-radius: 4px;
		font-size: 1.2rem;
		padding: 1px;
		margin-right: 10px;
	}
	/* .news_list li a .icon_new {
		display: inline-block;
		margin-bottom: 10px;
		font-weight: 500;
		color: #CC3333;
	} */
	/* .news_list li a .category_notice, .news_list li a .category_event {
		font-size: 1.2rem;
		text-align: center;
		letter-spacing: .05em;
		line-height: 15px;
		width: 88px;
		height: 18px;
		border-radius: 3px;
		box-sizing: border-box;
		margin-top: -2px;
	} */
	/* .news_list li a .category_notice {
		color: #f4c940;
		border: 1px solid #f4c940;
	} */
	/* .news_list li a .category_event {
		color: #15a84c;
		border: 1px solid #15a84c;
	} */

	.menu_area .block {
		margin-bottom: 60px;
	}
	.menu_area .block .inner {
		padding: 0;
	}
	.menu_area .flex li {
		border: 1px solid #646464;
		text-align: center;
		margin-bottom: 0;
		width: 30%;
	}
	.menu_area .flex li h3 {
		background-color: #0246AB;
		margin-bottom: 10px;
		padding: 5px;
		color: #fff;
		font-size: 1.2rem;
		text-align: center;
	}
	.menu_area .flex li p {
		margin-bottom: 20px;
	}
	.menu_area .flex li .btn {
		margin-bottom: 10px;
		font-size: 1rem;
	}
	
	.product_area h2.ttl {
		font-size: 2.4rem;
		padding: 10px 0;
		margin-bottom: 30px;
	}		
	
}




/* 地図
---------------------------------------------------------- */
.map {
	width: 100%;
	height: 420px;
}
@media only screen and (max-width: 767px) {
	.map {
		width: 95%;
		height: 175px;
		margin: 0 2.5%;
	}
}


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

#footer {
	color: #646464;
}
#footer dl {
    margin: 0 0 20px;
}
#footer dt {
	background-color: #F2F2F2;
	margin-bottom: 10px;
	padding: 5px;
	font-weight: bold;
	text-align: center;
}
#footer .access_area {
	background-color: #EEFBFF;
}
#footer .access_area .block .inner {
	width: 640px;
	padding: 40px 0;
}
#footer .access_area figure {
	margin-bottom: 30px;
	text-align: center;
}
#footer .footer_area {
	text-align: center;
}
#footer .footer_area ul {
	width: 472px;
	margin: 0 auto 40px;
	font-weight: bold;
}
#footer .footer_area ul li a {
	display: block;
	float: left;
	font-size: 1.4rem;
}
#footer .footer_area ul li a::after {
	content: "｜";
	padding: 0 10px;
}
#footer .footer_area ul li:last-child a::after {
	content:"";
	padding: 0;
}

/* .pagetop {
	position: fixed;
	bottom: 3%;
    right: 3%;
	z-index: 100;
}
.pagetop a {
	display:block;
	width: 110px;
	height: 140px;
	background-color: #fff;
	-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
	border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
	border: solid 1px #f3c63d;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
    text-decoration: none;
    text-transform: uppercase;
	color: #777;
	padding: 50% 0;
    box-sizing: border-box;
}
.pagetop a:hover {
	background-color: #f3c63d;
	border: solid 1px #fff;
	color: #fff;
	opacity: 1;
} */

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

	#footer .block {
		margin-bottom: 0;
	}
	#footer .block .inner {
		display: block;
		/* width: auto;
		padding: 60px; */
	}
	#footer .block .inner a {
		/* color: #fff; */
	}
	#footer dl {
		margin: 0 0 20px;
	}
	#footer dt {
		background-color: #F2F2F2;
		margin-bottom: 10px;
		padding: 5px;
		font-weight: bold;
		text-align: center;
	}
	#footer .access_area {
		background-color: #EEFBFF;
	}
	#footer .access_area .block .inner {
		width: 90%;
		/* padding: 0; */
	}
	#footer .access_area .flex {
		display: block;
	}
	#footer .access_area .flex li {
		margin-bottom: 40px;
	}
	#footer .access_area .flex li:last-child {
		margin-bottom: 0;
	}
	#footer .access_area figure {
		margin-bottom: 30px;
		text-align: center;
	}
	#footer .footer_area {
		text-align: center;
		padding: 20px 0;
	}
	#footer .footer_area ul {
		width: 100%;
		margin: 0 auto 10px;
		font-weight: bold;
	}
	#footer .footer_area ul li a {
		display: block;
		float: left;
		font-size: 1rem;
	}
	#footer .footer_area ul li a::after {
		content: "｜";
		padding: 0 5px;
	}
	#footer .footer_area ul li:last-child a::after {
		content:"";
		padding: 0;
	}
	#footer .footer_area .copy {
		font-size: 1.2rem;
	}
	
}

/* ローディング画面 */

#loading {
	width: 100%;
	height: 100%;
	background-color: #383838;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
.spinner {
	width: 300px;
	margin: 200px auto;
	background-color: transparent;
	border-radius: 100%;
	position: absolute;
	top: calc(50% - 300px);
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
.spinner img {
	  width: 100%;
}

/* ローディングアニメーション */

@keyframes sk-scaleout {
	0% {
	  transform: scale(0);
	} 100% {
	  transform: scale(1.0);
	  opacity: 0;
	}
}

.loaded {
	opacity: 0;
	visibility: hidden;
}


/* Word Press */

body.woocommerce-page #header, body.product-template-default #header {
	position: sticky;
}
body.blog #header, body.single #header {
	position: sticky;
}
body.post-type-archive-product #header {
	position: fixed;
}

#header.japacart-header .japacart-header-logo {
	display: none;
}
#header .japacart-header-utilities.is-fixed {
	position: unset;
}
#header.japacart-header .account-unit {
	position: absolute;
	right: 120px;
}
.main-menu-wrapper {
    display: none;
}
#gnav ul {
    right: 200px;
}
#header.japacart-header .japacart-header-utilities .account-unit-member {
	display: none;
}

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

	.main-menu-wrapper {
		display: block;
	}
	.main-menu .account-unit-member {
		display: none;
	}
	.main-menu-list {
		margin-top: 60px;
	}	
	.main-menu-list a {
		color: #fff;
	}	
	
	#show_menu {
		display: none;
		background: none;
		border: none;
	}
	#logo img {
		width: 60%;
	}

	#header.japacart-header .account-unit {
		top: 8px;
		right: 40px;
	}
	.account-unit .account-unit-cart {
		border: none;
		background: none;
	}	
	.account-unit.has-cart-button+.hamburger {
		/* display: none; */
		right: 28px;
		top: 14px;
		background: none;
		border: none;
	}
}

.home-content.japacart-content {
    padding-top: 0;
}

.home ul.products li.products-item .products-item-title, .home ul.products li.products-item .woocommerce-loop-category__title {
    font-size: 1.6rem;
    font-weight: bold;
}
.product_area .woocommerce ul.products li.products-item .price {
    font-size: 1.6rem;
}
.price {
    font-weight: bold;
	color: #CA2424;
}

#footer .copyright {
	background: none;
    color: #646464;
	font-size: 1.6rem;
}

.pagetop {
    border-radius: 0;
    border: none;
    background: #0246AB;
}
.pagetop svg {
    fill: #FFD06A;
}