@charset "utf-8";

@import url("base.css");

/*====================================
	
	----------------------------------
		Color
	----------------------------------
	
	Main     : #e71a0f
  	Accent   : #790000

	----------------------------------
  		font
	----------------------------------

  	Noto Sans JP

	----------------------------------
  		Structure
  	----------------------------------

  	0. General
  	1. Global Navigation
  		1.1	Navigationbar
  		1.2 Logo
  	2. Main
		2.1 Hero Header
		2.2 About
  	3. Footer
  	5. Media Query
  		5.1 1080px
  		5.2 768px
  		5.3 480px

  	----------------------------------
  		Change Log
  	----------------------------------
	


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

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

	0. General

====================================*/
/*
 	0.1 Fonts
====================================*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,600i,700,700i,800,800i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Philosopher:400,700&display=swap');

/*
 	0.2 Container & More...
====================================*/
.container {
    max-width: 1200px;
    margin: 0 auto;
	/*padding: 0;*/
	width: 100%;
    height:auto!important; /*IE6対策*/
    height: 100%; /*IE6対策*/
    min-height: 100%;
}

.container-fluid {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
@media screen and (min-width: 20em) {
	#article .navbar-nav, #detail .navbar-nav {
		color: #212121;
	}
	#article .pagination {
		padding: 0 .5rem;
	}
}
@media screen and (max-width: 36em) {
	#article .navbar-nav, #detail .navbar-nav {
		color: #fff;
	}
}



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

	1. Global Navigation

====================================*/
/*
 	1.1 Navigationbar
====================================*/
nav {
    max-width: 1200px;
    margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
    min-height: 100%;
	color: #fff;
}

.navbar {
	z-index: 9999;
}

.nav-item {
	padding: 1rem;
}

.nav-item:last-child {
	padding: 0;
}



/*
 	1.2 Logo
====================================*/
.brand_log {
	max-width: 120px;
	height: auto;
	height: 100%;
}

.onlinestore_log {
	max-width: 80px;
	height: auto;
	height: 100%;
}

/*
 	1.3 Hero Header
====================================*/
.hero_header {
	background:  url("../images/main_visual_ph.jpeg") no-repeat top center;
	background-size: cover;
	width: 100%;
	height: auto;
	height: 100vh; 
	padding-bottom: 5rem;
	position: relative;
}
.hero_header .row {
	margin-right: 0;
	margin-left: 0;
}

/* News List */
.news {
	position: absolute;
	top: 55%;
	left: 0;
	right: 0;
}

.news .news_ttl {
	margin-bottom: 0; 
	line-height: inherit;
	font-family: 'Montserrat', 'Roboto', sans-serif;
	font-weight: bold;
}

.news .newslist_wrap {
	background-color: #fff; 
	padding: 2rem; 
	max-width: 100%; 
	opacity: 0.9;
}

.news .newslist_wrap .newslist_item {
	display: flex;
	border-top: 1px #ccc solid;
	font-size: 87.5%;
	padding: .5rem .8rem 0;
	margin-right: 0;
}

.news .newslist_wrap .newslist_item:last-child {
	border-bottom:  1px #ccc solid;
}

.news .newslist_wrap .newslist_item:hover {
	background-color: #fcfaf5;
}


.news .newslist_wrap .newslist_item .date {
	margin-right: 1rem;
}
.news .newslist_wrap .newslist_item dd a {
	color: inherit;
}

.news .newslist_wrap .newslist_item dd a:hover {
	color: #E7D393;
	text-decoration: underline;
}

.news .newslist_btn_wrap {
	border: 1px #2d4d3a solid;
	border-radius: 5px;
	padding: 0 1rem;
}

.news .newslist_btn {
	color: #2d4d3a;
	display: block;
	font-size: 87.5%;
}

.news .newslist_btn::after {
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-left: .5rem;

}
.news .newslist_btn:hover {
	color: #E7D393;
}



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

	2. Mine

====================================*/
/*
 	2.1 About
====================================*/
.about .about_img {
	position: absolute;
	top: -50%;
	width: 360px;
	height: auto;
}
.about .about_ttl {
	font-family: 'Montserrat', 'Roboto', sans-serif;
	font-weight: bold;
	text-align: center;
}
.about .about_text {
	margin-left: 5rem;
}

.about .about_btn_wrap  {
	background-color: #2d4d3a;
	color: #fff;
	display: block;
	padding: .5rem 1rem;
	margin-left: auto;
	text-align: center;
	width: 200px;
}

.about .about_btn_wrap:hover  {
	background-color: #345943;
}

.about .about_btn {
	color: #fff;
	display: block;
	font-size: 87.5%;
}

.about .about_btn:after {
	content: "\f101";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-left: .5rem;

}
.about .about_btn:hover {
	color: #E7D393;
}


/*
 	2.2 Items
====================================*/
.items {
	background: url("../images/items_bg_ph.jpeg") no-repeat center center;
	background-size: cover;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	height: 100%;
}

.items .items_imgbox {
	position: relative;
}

.items .items_ttl {
	color: #fff;
	-moz-text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
	-webkit-text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
	-ms-text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
	text-align: center;
	font-family: 'Montserrat', 'Roboto', sans-serif;
}
.items .btnbox {
	position: absolute;
	left: 0;
	right: 0;
	transform: translate(0, -50%);
}
.items .items_btn_wrap {
	background-color: #2d4d3a;
	color: #fff;
	display: block;
	margin: 0 auto;
	padding: .5rem 1rem;
	text-align: center;
	width: 200px;
}

.items .items_btn_wrap:hover  {
	background-color: #345943;
}

.items .items_btn {
	color: #fff;
	display: block;
	font-size: 87.5%;
}

.items .items_btn:after {
	content: "\f101";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-left: .5rem;
}
.items .items_btn:hover {
	color: #E7D393;
}


/*
 	2.3 Shop
====================================*/
.shop {
	background-color: #fff;
}
.shop_imgbox {
	max-height: 318px;
}

.shop_ttl {
	font-family: 'Montserrat', 'Roboto', sans-serif;

}

.shop .card .card-body {
    min-height: 241px;
}

.shop .card .card-body address::before {
	content: "\f3c5";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-right: .3rem;
	color: #c6001c;
}

.shop .card .card-body address a::before {
	content: "〒";
}

.shop .card .card-body .open::before {
	content: "OPEN";
	padding-right: .3rem;
}

.shop .card .card-body .tel::before {
	content: "TEL";
	padding-right: .3rem;
}

.shop .card .card-body .email::before {
	content: "E-mail";
	padding-right: .3rem;
}

.shop .onlinestore_btn_wrap {
	background-color: #2d4d3a; 
	padding: 1rem 2rem; 
	margin: 3rem auto;
	text-align: center; 
	max-width: 100%; 
}

.shop .onlinestore_btn_wrap:hover  {
	background-color: #406D52;
}

.shop .onlinestore_btn_wrap .onlinestore_btn a {
	color: #fff; 
	font-size: 300%;
	font-weight: 700;
	display: inline-block;
	vertical-align: middle;
}

.shop .onlinestore_btn_wrap .onlinestore_btn a::before {
	align-items: center;
	background: url("../images/onlinestore_icon.png") no-repeat left center;
	background-size: 75px 69px;
	content: "";
	display: inline-block;
	width: 75px;
	height: 69px;
	padding-right: .5rem;
}

.shop .onlinestore_btn_wrap .onlinestore_btn a:hover {
	color: #E7D393;
}



/*
 	2.4 Instagram
====================================*/
.instagram {
	background-color: #2d4d3a;
	color: #fff;
	max-width: 100%;
}

.instagram .instagram_ttl {
	color: #fff;
	text-align: center;
	font-family: 'Montserrat', 'Roboto', sans-serif;
}

.instagram .insta_item {
	text-align: center;
	margin-bottom: 2rem;
}

.instagram .insta_item:last-child {
	margin-bottom: 0;
}

.instagram .insta_frame {
	max-width: 100%;
    height: 380px;
    background-color: #f1f2ef;
    padding: 15px;
    border-radius: 10px;
}

.instagram .insta_btn a {
	color: #fff;	
}

.instagram .insta_btn a::after {
	content: "\f101";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-left: .5rem;
}


/*
 	2.5 Brand
====================================*/
.brand {
	font-family: 'Montserrat', 'Roboto', sans-serif;
}

.brand .brand_ttl {
	font-family: 'Montserrat', 'Roboto', sans-serif;
	font-weight: 600;
	text-align: center;
}

.brand .brand_name {
	font-size: 87.5%;
	font-weight: 600;
}

.brand .brand_name li {
	margin-bottom: .5rem;
}



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

	3. Footer

====================================*/
footer {
	background-color: #fff;
	border-top: 1px #ccc solid;
	padding: 3rem 0;
	font-family: 'Montserrat', 'Roboto', sans-serif;
	font-weight: 600;
}

footer .f_inner {
	max-width: 1200px; 
	margin: 0 auto;
}

footer .f_inner .f_itembox {
	max-width: 100%;
	align-items: center;
}

footer .f_inner .f_itembox:last-child {
	display: flex;
}

footer .f_inner .f_itembox .f_logo {
	width: 120px;
	height: auto;
	height: 100%;
}

footer .f_inner .f_itembox .insta_icon {
	margin-right: 3rem;
}

footer .f_inner .f_itembox .copyright {
	font-weight: normal; 
	font-size: 87.5%;
}

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

	5. Other

====================================*/
/* ページトップ */
#page_top{
	background-color: #fff;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	position: fixed;
	right: 1%;
	bottom: 50px;
}
#page_top a {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  text-decoration: none;
}
#page_top a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 150%;
  color: #2d4d3a;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top a::after {
  content: 'PAGE TOP';
  font-size: 75%;
  position: absolute;
  top: 40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #2d4d3a;
}

/* モーダルウィンドウ */
/*.modal_content{
    margin: 0 auto;
    padding: 40px;
}*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    max-width: 100%;
	overflow: auto;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content {
    background: #fff;
    padding: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
}

.modal__content h4 {
	margin-bottom: 0;
}

.modal__content .inner_box img {
	max-width: 55%;
}

.modal__content p {
	font-weight: normal;
	margin-bottom: 1rem;
}



a.js-modal-close {
	color: #4F6139;
	text-decoration: underline;
	margin-left: 95%;
}

.modal .modal__content .link_btn {
	border: 1px #2d4d3a solid;
	padding: .5rem 3rem;
	color: #2d4d3a;
}

.modal .modal__content .link_btn a::after {
	content: "\f35d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: 1rem;
}
	


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

	6. News / ニュース一覧ページ

====================================*/
#news {
	
}



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

	7. Article / 記事ページ

====================================*/
#article .ttl_box {
	background-color: #2d4d3a; 
	padding: 2rem 0; 
	text-align: center;
}

#article .ttl_box .article_ttl {
	margin-bottom: 0;
	color: #fff;
}

#article .ttl_box .article_date {
	color: #fff;
	font-size: 87.5%;
}

#article .article_img {
	max-width: 100%; 
	height: auto; 
	margin: 0 auto; 
	padding: 0;
}

#article .txt_box {
	background-color: #2d4d3a; 
	color: #fff; 
	padding: 3rem; 
	margin-bottom: 3rem;
}

#article .txt_box .article_txt {}

@media screen and (min-width: 20em) {
	#article .navbar-nav, #detail .navbar-nav {
		color: #212121;
	}
	#article .pagination {
		padding: 0 .5rem;
	}
}
@media screen and (max-width: 36em) {
	#article .navbar-nav, #detail .navbar-nav {
		color: #fff;
	}
}


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

	8. Detail / ページ

====================================*/
.detail_ttl {
	margin-bottom: 1rem;
}
.detail_box {
	margin-bottom: 3rem;
}

.detail_imgbox {
	min-height: 270px;
	margin-bottom: 1rem;
}

.page-link {
    color: #007bff!important;
}