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

@media screen and (min-width:768px) and ( max-width:1023px){

.wrapper{
	padding: 0 2vw;
}


/* header */

header{
	width: 100%;
	height: 14vw;
	background: #FFF;
	position: fixed; top: 0; left: 0;
	z-index: 50;
}
header .wrapper{
	padding: 0;
}
header .head{
	width: 100%;
	height: 100%;
	padding: 0 2vw;
	position: relative;
	z-index: 100;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}
header h1{
	height: 14vw;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
header h1 a{
	height: 8vw;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}
header h1 img{
	height: 100%;
}

header .menu{
}
header .menu .icon{
}
header .menu .icon a{
	width: 11vw;
	height: 11vw;
	background: none;
	border-radius: 0;
	display: block;
	position: absolute; top: 1.5vw; right: 10vw;
	z-index: 100;
}
header .menu .icon span {
	width: 7vw;
	height: 2px;
	margin: -1px 0 0 -3.5vw;
	background: #000;
	display: block;
	position: absolute; top: 50%; left: 50%;
	transition: 0.2s;
}
header .menu .icon span:before,
header .menu .icon span:after {
	content: "";
	width: 7vw;
	height: 2px;
	background: #000;
	display: block;
	position: absolute; top: 0; left: 0;
	transition: 0.3s;
}
header .menu .icon span:before {
	margin-top: -8px;
}
header .menu .icon span:after {
	margin-top: 8px;
}
header .menu .icon a.on span {
	background: transparent;
}
header .menu .icon a.on span:before,
header .menu .icon a.on span:after {
	margin-top: 0;
	background: #000;
}
header .menu .icon a.on span:before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
header .menu .icon a.on span:after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
header .search .icon a{
	position: absolute; top: 3vw; right: 2vw;
	z-index: 100;
	font-size: 6vw;
}
header .menu .box,
header .search .box{
	width: 100%;
	height: calc(100% - 14vw);
	background: #FFF;
	position: fixed; top: 14vw; left: 0;
	display: none;
	z-index: 90;
	pointer-events: auto;
	overflow: auto;
}
header .menu nav {
	text-align: left;
}
header .menu nav > div{
	margin-top: 0;
	border-bottom: 1px dotted #CDD8E6;
}
header .menu nav > div a{
	padding: 3vw 4vw 3vw 6vw;
	background: #FFF;
	display: block;
	position: relative;
	font-size: 4vw;
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
header .menu nav > div a i{
	position: absolute; top: 50%; right: 4vw;
	transform: translateY(-50%);
}
header .menu nav > div a i:last-child,
header .menu nav > div a.on i{
	display: none;
}
header .menu nav > div a.on i:last-child{
	display: inline;
}
header .menu nav .slide_inner{
	padding: 0 0 4vw 12vw;
	display: none;
}
header .menu nav .slide_inner div{
	margin-top: 2vw;
}
header .menu nav .slide_inner div:first-child{
	margin-top: 0;
}
header .menu nav .slide_inner div a{
	padding: 0;
	background: none;
	display: inline;
}
header .menu nav .slide_inner.keyword div a::before{
	content: "#";
	margin-right: 1vw;
}
header .menu .btn{
	padding: 6vw 8vw;
}
header .menu .btn a{
	padding: 4vw;
	display: block;
	position: relative;
	background: #187FC4;
	border-radius: 8px;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.16);
	font-size: 4vw;
	color: #FFF;
	text-align: center;
}
header .menu .btn a i{
	position: absolute; top: 50%; right: 4vw;
	transform: translateY(-50%);
}
header .search .box{
	padding: 10vw 2vw;
}
header .search .input{
	margin-top: 1vw;
	display: flex;
}
header .search .input input{
	width: 75%;
	border-radius: 4px 0 0 4px;
	border-color: #C6C6C6;
}
header .search .input button{
	width: 25%;
	background: #0B236C;
	border: 1px solid #C6C6C6;
	border-radius: 0 4px 4px 0;
	outline: none;
	font-size: 3.5vw;
	color: #FFF;
}

header .menu nav .menu_shop_search{
	padding: 0 4vw 4vw 4vw;
	background: #FFF;
	position: relative;
	font-size: 4vw;
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
header .menu_shop_search .title{
	font-size: 3.5vw;
	color: #0B236C;
}
header .menu_shop_search .input{
	margin-top: 1vw;
	display: flex;
}
header .menu_shop_search .input input{
	width: 75%;
	border-radius: 4px 0 0 4px;
	border-color: #C6C6C6;
}
header .menu_shop_search .input button{
	width: 25%;
	background: #0B236C;
	border: 1px solid #C6C6C6;
	border-radius: 0 4px 4px 0;
	outline: none;
	font-size: 3.5vw;
	color: #FFF;
}


/* main */

main{
	margin-top: 14vw;
}

.kv{
	position: relative;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}
.kv .image{
}
.kv .image img{
	width: 100%;
}

.search_pref{
	background: #D0DEEB;
}
.search_pref .wrapper{
	padding: 0;
}
.search_pref h2{
	font-size: 4.5vw;
}
.search_pref h2 a{
	padding: 3vw 2vw;
	display: block;
	position: relative;
	color: #0B236C;
}
.search_pref h2 a i{
	position: absolute; top: 50%; right: 2vw;
	transform: translateY(-50%);
}
.search_pref .box{
	width: 100%;
	height: calc(100% - 14vw);
	background: #FFF;
	position: fixed; top: 14vw; left: 0;
	display: none;
	z-index: 30;
	pointer-events: auto;
	overflow: auto;
}
.search_pref .back_btn{
}
.search_pref .back_btn a{
	padding: 3vw;
	border-bottom: 1px solid #B4B4B4;
	display: block;
	position: relative;
	color: #0B236C;
	text-align: center;
}
.search_pref .back_btn a i{
	position: absolute; top: 50%; left: 2vw;
	transform: translateY(-50%);
}
.search_pref .map{
}
.search_pref .item{
}
.search_pref .inner{
}
.search_pref h3{
	padding: 3vw;
	background: #D0DEEB;
	border-bottom: 1px solid #B4B4B4;
	font-size: 4vw;
}
.search_pref nav{
	display: none;
}
.search_pref  nav div{
}
.search_pref  nav div a{
	padding: 3vw;
	border-bottom: 1px dotted #CDD8E6;
	display: block;
}

.search_key{
}
.search_key .box{
	padding: 4vw 0;
	border-bottom: 2px dotted #707070;
}
.search_key .title{
	font-size: 3.5vw;
	color: #0B236C;
}
.search_key .input{
	margin-top: 1vw;
	display: flex;
}
.search_key .input input{
	width: 75%;
	border-radius: 4px 0 0 4px;
	border-color: #C6C6C6;
}
.search_key .input button{
	width: 25%;
	background: #0B236C;
	border: 1px solid #C6C6C6;
	border-radius: 0 4px 4px 0;
	outline: none;
	font-size: 3.5vw;
	color: #FFF;
}

.contents_box{
	padding: 10vw 0;
}
.main_contents{
	padding: 0 2vw;
}

.article_list{
}
.article_list h2{
	font-size: 4.5vw;
	color: #0B236C;
	text-align: center;
}
.article_list .box{
}
.article_list .item{
	margin-top: 8vw;
}
.article_list .box .item:first-child{
	margin-top: 0;
}
body.top_page .article_list .box .item:first-child{
	margin-top: 4vw;
}
.article_list .thum{
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}
.article_list .thum img{
	width: 100%;
	height: 60vw;
	object-fit: cover;
}
.article_list .cate_box{
	margin-top: 3vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.article_list .date{
	font-size: 3.5vw;
	color: #808080;
}
.article_list .cate{
}
.article_list .cate div{
}
.article_list .cate div a{
	min-width: 25vw;
	padding: 1vw 6vw;
	display: block;
	background: #0b236c;
	border-radius: 4px;
	font-size: 3.5vw;
	color: #FFF;
	text-align: center;
}
.article_list .inner{
	margin-top: 3vw;
}
.article_list .title{
	font-size: 4.5vw;
}
.article_list .text{
	margin-top: 2vw;
	font-size: 3.5vw;
}

.side_contents{
	margin-top: 10vw;
	padding: 0 2vw;
}
.side_contents h3{
	margin-top: 6vw;
	font-size: 4vw;
}

.search_box{
}
.search_box .cate{
	padding: 0 0 0 3vw;
	display: flex;
	flex-wrap: wrap;
}
.search_box .cate div{
	margin: 3vw 3vw 0 0;
}
.search_box .cate div a{
	min-width: 25vw;
	padding: 0.5vw 5vw;
	display: block;
	background: #FFF;
	border: 2px solid #0b236c;
	border-radius: 4px;
	color: #0b236c;
	text-align: center;
}
.search_box .keyword{
	padding: 0 0 0 3vw;
	display: flex;
	flex-wrap: wrap;
}
.search_box .keyword div{
	margin: 3vw 3vw 0 0;
}
.search_box .keyword div a{
	color: #808080;
}
.search_box .keyword div a::before{
	content: "#";
	margin-right: 1vw;
}
.search_box .pickup{
}
.search_box .pickup .item{
	padding: 3vw 0;
	border-bottom: 1px solid #D9D9D9;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.search_box .pickup .thum{
	width: 30%;
}
.search_box .pickup .thum img{
	width: 100%;
	height: 22vw;
	object-fit: cover;
}
.search_box .pickup .inner{
	width: 70%;
	padding-left: 3vw;
}
.search_box .pickup .title{
	font-size: 4vw;
}
.search_box .pickup .text{
	margin-top: 2vw;
	font-size: 3.5vw;
}
.search_box .input{
	margin-top: 2vw;
}
.search_box .input form{
	display: flex;
}
.search_box .input input{
	width: 75%;
	border-radius: 4px 0 0 4px;
	border-color: #C6C6C6;
}
.search_box .input button{
	width: 25%;
	background: #0B236C;
	border: 1px solid #C6C6C6;
	border-radius: 0 4px 4px 0;
	outline: none;
	font-size: 3.5vw;
	color: #FFF;
}
.search_box .popular{
}
.search_box .popular .item{
	padding: 3vw 0;
	border-bottom: 1px solid #D9D9D9;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.search_box .popular .thum{
	width: 30%;
}
.search_box .popular .thum img{
	width: 100%;
	height: 22vw;
	object-fit: cover;
}
.search_box .popular .inner{
	width: 70%;
	padding-left: 3vw;
}
.search_box .popular .title{
	font-size: 4vw;
}
.search_box .popular .text{
	margin-top: 1vw;
	font-size: 3.5vw;
}

.cta_box{
}
.cta_box .icon{
}
.cta_box .title{
}
.cta_box .btn{
}
.cta_box .btn a{
}
.cta_box .btn a i{
}

.cta{
	padding: 4vw 0 10vw 0;
	background: #CED8E6;
}
.cta .wrapper{
}
.cta .item{
	margin-top: 6vw;
	padding: 8vw;
	background: #FFF;
	border-radius: 10px;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.16);
	text-align: center;
}
.cta .icon{
	width: 30%;
	margin: 0 auto;
}
.cta .title{
	margin-top: 3vw;
	padding: 0 3vw;
	display: inline-block;
	position: relative;
	font-size: 4vw;
}
.cta .title::before,
.cta .title::after{
	content: "";
	width: 2px;
	height: 100%;
	background: #000;
	position: absolute; top: 0;
}
.cta .title::before{
	left: 0;
	rotate: -20deg;
}
.cta .title::after{
	right: 0;
	rotate: 20deg;
}
.cta .btn{
	margin-top: 3vw;
}
.cta .btn a{
	padding: 4vw;
	display: block;
	position: relative;
	background: #00b900;
	border-radius: 8px;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.16);
	font-size: 4vw;
	color: #FFF;
}
.cta .item:last-child .btn a{
	background: #187FC4;
}
.cta .btn a i{
	position: absolute; top: 50%; right: 4vw;
	transform: translateY(-50%);
}
.cta.thanks_cta{
	background: none;
}
.cta.thanks_cta .item .btn a{
	background: #00b900;
}


/* under_column */

.h2_area{
	padding: 8vw 0;
	background: #EDF2F8;
}
.h2_area h2{
	font-size: 4.5vw;
	color: #0B236C;
	text-align: center;
}

.breadcrumb{
	padding-top: 8vw;
}
.breadcrumb i{
	margin: 0 2vw;
}

.article_detail{
}
.article_detail .date_box{
}
.article_detail .date{
	font-size: 3.5vw;
	color: #808080;
}
.article_detail .keyword{
	display: flex;
	flex-wrap: wrap;
}
.article_detail .keyword div{
	margin: 3vw 3vw 0 0;
}
.article_detail .keyword div a{
	font-size: 3.5vw;
	color: #808080;
}
.article_detail .keyword div a::before{
	content: "#";
	margin-right: 1vw;
}
.article_detail .cate{
	display: flex;
	flex-wrap: wrap;
}
.article_detail .cate div{
	margin: 3vw 3vw 0 0;
}
.article_detail .cate div a{
	min-width: 25vw;
	padding: 0.5vw 5vw;
	display: block;
	background: #0b236c;
	border: 2px solid #0b236c;
	border-radius: 4px;
	color: #FFF;
	text-align: center;
}
.article_detail h2{
	margin-top: 4vw;
	font-size: 5vw;
}
.article_detail .thum{
	margin-top: 6vw;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}
.article_detail .thum img{
	width: 100%;
}
.article_detail h3{
	margin-top: 6vw;
	padding: 0 4vw 2vw 0;
	border-bottom: 1px solid #0B236C;
	font-size: 4.5vw;
	color: #0B236C;
}
.article_detail p{
	margin-top: 4vw;
}
.article_detail p + p{
	margin-top: 3vw;
}
.article_detail h4{
	margin-top: 6vw;
	padding: 0 0 0 2vw;
	border-left: 3px solid #0B236C;
	font-size: 4vw;
	color: #0B236C;
}
.article_detail ul{
	margin-top: 3vw;
}
.article_detail ul li{
	margin-top: 2vw;
}
.article_detail ul li::before{
	content: "●";
	margin-right: 1vw;
}

.product{
	margin-top: 10vw;
}
.product h2{
	border-bottom: 2px solid #CDD8E6;
	font-size: 4.5vw;
}
.product .box{
}
.product .item{
}
.product .thum{
	margin-top: 4vw;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}
.product .inner{
}
.product .title{
	margin-top: 6vw;
	font-size: 4vw;
}
.product .text{
	margin-top: 3vw;
	font-size: 3.5vw;
}
.product .btn{
	width: 90%;
	margin: 8vw auto 0 auto;
}
.product .btn a{
	padding: 4vw;
	display: block;
	position: relative;
	background: #187FC4;
	border-radius: 8px;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.16);
	font-size: 4vw;
	color: #FFF;
	text-align: center;
}
.product .btn a i{
	position: absolute; top: 50%; right: 4vw;
	transform: translateY(-50%);
}

.related{
	margin-top: 10vw;
}
.related h2{
	font-size: 4.5vw;
	color: #0B236C;
	text-align: center;
}
.related .box{
}
.related .item{
	padding: 3vw 0;
	border-bottom: 1px solid #CDD8E6;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.related .thum_box{
	width: 30%;
	position: relative;
}
.related .thum{
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}
.related .thum img{
	width: 100%;
	height: 22vw;
	object-fit: cover;
}
.related .cate{
}
.related .cate div{
}
.related .cate div a{
	padding: 0.2vw 3vw;
	display: block;
	background: #0b236c;
	border: 2px solid #0b236c;
	border-radius: 0 0 4px 0;
	position: absolute; top: 0; left: 0;
	font-size: 3vw;
	color: #FFF;
	text-align: center;
	pointer-events: none;
}
.related .inner{
	width: 70%;
	padding-left: 3vw;
	display: flex;
	flex-flow: column;
}
.related .title{
	order: 2;
	margin-top: 2vw;
	font-size: 4vw;
}
.related .date{
	order: 1;
	font-size: 3.5vw;
	color: #808080;
}
.related .text{
}

.shop_num{
	padding-top: 8vw;
}
.shop_num span{
	color: #B02E49;
}

.shop_list{
}
.shop_list .box{
}
.shop_list .item{
	margin-top: 4vw;
	padding: 3vw;
	background: #FFF;
	border-radius: 4px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
	display: flex;
	justify-content: space-between;
}
.shop_list .box .item:first-child{
	margin-top: 0;
}
.shop_list .thum{
	width: 32%;
}
.shop_list .inner{
	width: 63%;
}
.shop_list .title{
	font-size: 4vw;
}
.shop_list .text{
	margin-top: 1vw;
	font-size: 3.2vw;
}

.contact{
	padding: 10vw 0 12vw 0;
}
.contact .wrapper{
}
.contact h2{
	font-size: 5vw;
}
.contact .box{
}
.contact .item{
	margin-top: 4vw;
}
.contact .title{
}
.contact .title span{
	margin-left: 4vw;
	padding: 0.2vw 2vw;
	background: #b02e49;
	border-radius: 3px;
	display: inline-block;
	vertical-align: middle;
	font-size: 3.5vw;
	color: #FFF;
	text-align: center;
}
.contact .input{
	margin-top: 2vw;
}
.contact .privacy_check{
	margin-top: 4vw;
}
.contact .privacy_check a{
}
.contact .btn{
	width: 90%;
	margin: 8vw auto 0 auto;
}
.contact .btn button,
.contact .btn input{
	width: 100%;
	padding: 4vw;
	display: block;
	background: #0B236C;
	border: none;
	border-radius: 8px;
	outline: none;
	font-size: 4vw;
	font-weight: bold;
	color: #FFF;
	text-align: center;
}

.thanks{
	padding: 10vw 0;
}
.thanks h2{
	font-size: 5vw;
}
.thanks p{
	margin-top: 6vw;
}

nav.pagination{
	margin-top: 8vw;
}
nav.pagination h2{
	display: none;
}
nav.pagination .nav-links{
	display: flex;
	justify-content: center;
	align-items: center;
}
nav.pagination a.page-numbers,
nav.pagination span.page-numbers{
	width: 8vw;
	margin: 0 2vw;
	border: 1px solid #707070;
	font-size: 5vw;
	line-height: calc(8vw - 2px);
	text-align: center;
	text-decoration: none;
}
nav.pagination span.page-numbers.current{
	background: #0B236C;
	border: none;
	line-height: 8vw;
	color: #FFF;
}
nav.pagination a.page-numbers.prev,
nav.pagination a.page-numbers.next{
	width: auto;
	border: none;
}

.not_found{
	padding-top: 10vw;
}
.not_found .logo{
	width: 20vw;
	margin: 0 auto;
	text-align: center;
}
.not_found p{
	margin-top: 6vw;
	text-align: center;
}


/* footer */

footer{
	padding: 10vw 0 4vw 0;
	background: #0B236C;
	color: #FFF;
}
footer .wrapper{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
footer .sns{
	width: 100%;
	margin-top: 10vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	order: 2;
}
footer .sns div{
}
footer .sns div a{
	font-size: 12vw;
	color: #FFF;
}
footer .nav_box{
	order: 1;
}
footer .nav_box .title{
	font-size: 4.5vw;
}
footer .nav_box nav{
}
footer .nav_box nav div{
	margin-top: 3vw;
}
footer .nav_box nav div a{
	color: #FFF;
}
footer .nav_box nav div a i{
	margin-right: 2vw;
}
footer .logo_box{
	width: 90%;
	margin-top: 10vw;
	text-align: center;
	order: 3;
}
footer .logo{
}
footer .logo a{
	padding: 2vw 6vw;
	background: #FFF;
	display: block;
}
footer .link{
	margin-top: 6vw;
	display: flex;
	justify-content: center;
}
footer .link div{
	margin: 0 4vw;
}
footer .link div:last-child::before{
	content: "/";
	margin-right: 4vw;
}
footer .link div a{
	color: #FFF;
}
footer .copy{
	margin-top: 4vw;
}
footer .fixed_btn{
	width: 100%;
	padding: 4vw 6vw;
	background: #0B236C;
	position: fixed; bottom: 0; left: 0;
	display: none;
}
footer .fixed_btn a{
	padding: 3vw;
	background: #00b900;
	border-radius: 4px;
	display: block;
	position: relative;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.16);
	font-size: 4vw;
	color: #FFF;
	text-align: center;
}
footer .fixed_btn a i{
	position: absolute; top: 50%; left: 20%;
	transform: translateY(-50%);
	font-size: 6vw;
}
footer .fixed_btn a i:last-child{
	left: auto; right: 4vw;
	font-size: 4.5vw;
}

}