@charset "UTF-8";
/*
Theme Name: NAKAMURA COFFEE OKAGEYOKOCHO-TEN
Author: Bee Design Works
Description: NAKAMURA COFFEE OKAGEYOKOCHO-TEN
Version: 1.0
*/


/* RESET */
@import url(assets/css/destyle.css);

/*
【コメント項目】			【概要】
Base					基本設定
Elements				子要素のスタイル（ボタンやテーブルなど）

*/

/* Base */

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

* {
	box-sizing: border-box;
	color: #666;
	font: 1.4rem/2.2 YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

#sb_instagram * {
	color: #fff;
}

a {
	text-decoration: none;
}

a.text-link:hover {
	border-bottom: 2px #00a63c solid;
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.amaru,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
.amaru *,
.btn *,
.btn2 *,
.btn3 *,
.btn4 *{
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-style: normal;
}


h1,
h1 > a {
	font-size: 2.2rem;
}

h2,
h2 > a  {
	font-size: 1.8rem;
}

h3,
h3 > a {
	font-size: 1.6rem;
}

h4,
h4 > a {
	font-size: 1.5rem;
}

h5,
h5 > a {
	font-size: 1.4rem;
}

h6,
h6 > a {
	font-size: 1.2rem;
}

@media only screen and (min-width: 768px) {
	
	* {
		font-size: 1.5rem;
	}
	
	h1,
	h1 > a {
		font-size: 2.4rem;
	}

	h2,
	h2 > a {
		font-size: 2.2rem;
	}

	h3,
	h3 > a {
		font-size: 2.0rem;
	}

	h4,
	h4 > a {
		font-size: 1.8rem;
	}

	h5,
	h5 > a {
		font-size: 1.6rem;
	}

	h6,
	h6 > a {
		font-size: 1.4rem;
	}
	
	br.line-small {
		display: none;
	}
}

@media only screen and (min-width: 1100.2px) {
		
	* {
		font-size: 1.6rem;
	}
	
	h1,
	h1 > a {
		font-size:3.6rem;
	}

	h2,
	h2 > a {
		font-size: 2.6rem;
	}

	h3,
	h3 > a {
		font-size: 2.2rem;
	}

	h4,
	h4 > a {
		font-size: 2.0rem;
	}

	h5,
	h5 > a {
		font-size: 1.8rem;
	}

	h6,
	h6 > a {
		font-size: 1.5rem;
	}
}


/* Elements */

.breadcrumb {
	padding-top: 78px;
	background: #F5F5F5;
	margin-bottom: 78px;
}

.breadcrumb ul {
	display: flex;
}

.breadcrumb ul li::before {
	content: "/";
	display: inline-block;
	margin: 0 4px;
}

.breadcrumb ul li:first-child::before {
	display: none;
}

.inner {
	width: 100%;
	padding: 0 16px;
	max-width: 1132px;
	margin: 0 auto;
}

.text-center {
	text-align: center;
}

.btn,
.btn2,
.btn3,
.btn4 {
	width: 100%;
	max-width: 400px;
	display: inline-block;
	background: #fff;
	padding: 12px 63px 12px 23px;
	text-align: center;
	position: relative;
	color: #000000!important;
	border: solid 1px #fff;
	margin-top: 40px;
}
.btn:hover,
.btn2:hover,
.btn3:hover,
.btn4:hover {
	border: solid 1px #282859;
	text-decoration: underline;
}

.btn::after,
.btn2::after,
.btn3::after,
.btn4::after {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background: url("assets/img/icon_arrow-off1.png") no-repeat;
	background-size: 30px;
	top: calc(50% - 16px);
	right: 23px;
	position: absolute;
}
.btn:hover::after,
.btn2:hover::after,
.btn3:hover::after,
.btn4:hover::after {
	background: url("assets/img/icon_arrow-on1.png") no-repeat;
	background-size: 30px;
}
.btn2 {
	background-color: #282859;
	border: solid 1px #282859;
	color: #fff!important;
}
.btn2:hover {
	background-color: #fff;
	border: solid 1px #282859;
	color: #282859!important;
}
.btn2::after {
	background: url("assets/img/icon_arrow-off2.png") no-repeat;
	background-size: 30px;
}
.btn2:hover::after {
	background: url("assets/img/icon_arrow-on2.png") no-repeat;
	background-size: 30px;
}
.btn3 {
	background-color: #282859;
	border: solid 1px #fff;
	color: #fff!important;
}
.btn3:hover {
	background-color: #fff;
	border: solid 1px #282859;
	color: #282859!important;
}
.btn3::after {
	background: url("assets/img/icon_arrow-off3.png") no-repeat;
	background-size: 30px;
}
.btn3:hover::after {
	background: url("assets/img/icon_arrow-on2.png") no-repeat;
	background-size: 30px;
}
.btn4 {
	background-color: #ED7D2C;
	border: solid 1px #ED7D2C;
	color: #fff!important;
}
.btn4:hover {
	background-color: #fff;
	border: solid 1px #ED7D2C;
	color: #666666!important;
}
.btn4::after {
	background: url("assets/img/icon_arrow-off3.png") no-repeat;
	background-size: 30px;
}
.btn4:hover::after {
	background: url("assets/img/icon_arrow-on3.png") no-repeat;
	background-size: 30px;
}

#toggle-menu {
	display: none;
}

#close-btn {
	display: none;
	position: fixed;
	top: 18px;
	right: 20px;
}

#toggle-menu:checked ~ #close-btn {
	display: block;
	z-index: 120;
}

#head {
	display: flex;
	justify-content: space-between;
	position: fixed;
	height: 78px;
	background: #fff;
	z-index: 100;
	width: 100%;
}

#head h1 {
	padding: 9px;
	margin-left: 20px;
}
#head h1 a {
	display: flex;
	align-items: center;
}
#head h1 img {
	vertical-align: middle;
}

#head label {
	background: #333;
	width: 86px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#mainimage {
	height: 100vh;
	background: url("assets/img/001.jpg") center no-repeat;
	background-size: cover;
}

#mainimage .image-content {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	height: 100%;
}

#mainimage .scroll {
	padding-bottom: 20px;
}

#news {
	padding: 70px 0;
	background: #F2F2F2;
}

#news h1,
#news h1 span,
#news .more a {
	color: #333;
}
#news .more a:hover {
	text-decoration: underline;
}

.category-list {
	margin:0 0 30px;
	position: relative;
}

.category-list ul {
	list-style: disc inside;
}

.category-list ul li {
	margin-left: 38px;
}

.category-list ul li a {
	font-size: 1.4rem;
	margin-left: -6px;
}

.category-list ul li a:hover {
	text-decoration: underline;
}

.top-news-feed .post a {
	display: block;
	padding: 10px 16px 10px 16px;
	background: #fff;
	position: relative;
}



.top-news-feed .post {
	margin-bottom: 20px;
}

.top-news-feed .post span {
	display: block;
	line-height: 1.6em;
}


#news .more {
	text-align: right;
}

#news .more a {
	display: inline-block;
	padding-right: 34px;
	background: url("assets/img/Icon awesome-caret-right.png") no-repeat center right;
}

.category,
.top-news-feed .post .category {
	display: inline-block;
	width: 77px;
	padding: 3px 0;
	background: #F2F2F2;
	font-size: 1.3rem;
	text-align: center;
}

.date {
	font-size: 1.2rem;
	color: #A6A6A6;
}

.top-about .content {
	background: #333;
}

.top-about * {
	color: #fff;
}

.top-store .content {
	background: #F2F2F2;
}


.img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.btn_box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.tab-menu.swiper {
	margin: 0;
}

.bottom_content {
	padding: 24px 0;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
}

.top-about .bottom_content {
	background: #26090E;
}

.top-store .bottom_content {
	background: #A6A6A6;
	
}

.bottom_content .swiper-wrapper {
	width: 262px;
	max-width: 262px;
	padding: 30px;
	box-sizing: border-box;
}

.bottom_content .swiper-slide {
	width: 25%;
	height: 8px;
	background: #B7B7B7;
}

.bottom_content .swiper-slide-thumb-active {
	background: #FFF;
}

.bottom_content .swiper-button-next,
.bottom_content .swiper-button-prev {
	width: 14px;
	height: 24px;
	position: relative;
	margin: 0;
	color: #fff;
	top: 0;
}
.bottom_content .swiper-button-next:after,
.bottom_content .swiper-button-prev:after {
	font-size: 1.6rem;
	font-weight: bold;
}

.swiper-pagination,
.swiper-pagination span {
	color: #fff;
}

.swiper-pagination-current {
	font-size: 3.6rem;
}

.bottom_content .swiper-pagination {
	position: relative;
	width: auto;
}

.swiper-slide-img {
	display: none;
}

.p-swiper-slide_box .body {
	padding: 60px 16px;
}

.body-img {
	margin: 16px 0;
}

.body-img img {
	width: 100%;
	height: auto;
}

.top-content {
	margin: 90px 0;
}

.top-content header {
	margin: 0 -16px;
	padding: 16px;
}

.content-body .image {
	margin:  0 -16px 16px -16px;
}

.content-body .image img {
	width: 100%;
	height: auto;
}

.handdrip header {
	background: #FAF6E4;
	color: #333;
}

.saleocoffee header {
	background: #333;
}

.saleocoffee header * {
	color: #fff;
}

#infomation {
	background-color: #FAF6E4;
	padding-top: 84px;
}

#infomation * {
	color: #333;
}

#infomation .btn2 {
	margin-top: 20px;
	margin-left: -50px;
	width: 340px;
	max-width: calc(100% + 50px);
}

.infomation-box {
	padding: 50px 0;
}

.infomation-box li {
	line-height: 1.5em;
	padding: 8px 0;
	padding-left: 50px;
}

.infomation-box .icon-home {
	background: url("assets/img/Icon ionic-md-home.png") no-repeat left center;
	background-size: auto 24px;
}
.infomation-box .icon-pin {
	background: url("assets/img/Icon open-map-marker.png") no-repeat left center;
	background-size: auto 24px;
}
.infomation-box .icon-tel {
	background: url("assets/img/Icon ionic-ios-call.png") no-repeat left center;
	background-size: auto 24px;
}
.infomation-box .icon-fax {
	background: url("assets/img/Icon ionic-md-print.png") no-repeat left center;
	background-size: auto 24px;
}
.infomation-box .icon-parking {
	background: url("assets/img/Icon awesome-parking.png") no-repeat left center;
	background-size: auto 24px;
}
.infomation-box .icon-fan {
	background: url("assets/img/Icon awesome-fan.png") no-repeat left center;
	background-size: auto 24px;
}
.infomation-box .icon-wifi {
	background: url("assets/img/Icon awesome-wifi.png") no-repeat left center;
	background-size: auto 24px;
}
.infomation-box .icon-no-smoking {
	background: url("assets/img/Icon ionic-logo-no-smoking.png") no-repeat left center;
	background-size: auto 24px;
}

#bottom {
	padding: 40px 0;
	background: #FAF6E4;
}
#bottom * {
	color: #333;
}
#bottom a:hover {
	text-decoration: underline;
}

#toggle-menu:checked ~ #bottom {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 110;
	overflow-y: scroll;
}

#bottom .logo {
	margin-bottom: 70px;
}

#bottom .logo h1 {
	text-align: center;
}

#bottom .tel a {
	display: block;
	font-size: 3.1rem;
	padding-left: 35px;
	background: url("assets/img/icon-footer-tel.png") no-repeat left center;
	background-size: 27px;
}

.footer-menu ul li span {
    font-size: 1.2rem;
    margin-left: 16px;
}

.footer-infomation .close {
	line-height: 1.6em;	
	margin-top: 5px;
} 

.footer-content nav {
	margin: 0 0 50px 0;
}


.footer-link  li {
	margin-bottom: 20px;
}

.footer-link .btn {
	margin-top: 0;
}

#copy {
	text-align: center;
	background: #F5F5F5;
	font-size: 1.2rem;
}

.froating-menu {
	position: absolute;
	z-index: 90;
	top: 140px;
	right: 10px;
	display: none;
}

.froating-menu li {
	margin: 8px 0;
}

#top-instagram {
	background: #F5F5F5;
	margin: 0;
	padding: 56px 0;
}

#top-instagram ul {
	display: flex;
	flex-wrap: wrap;
}

#top-instagram ul li {
	width: 50%;
	padding: 9px;
}

#top-instagram ul li img {
	width: 100%;
	height: auto;
}

.wp-content {
	margin: 78px 0;
}

.post-content {
	padding-bottom: 36px;
	margin-bottom: 36px;
	border-bottom: 1px #593528 solid;
}

.nav-links {
	display: flex;
	justify-content: center;
	align-content: center;
}

.nav-links span,
.nav-links a {
	display: block;
	font-size: 1.5rem;
	padding: 3px;
	text-align: center;
	margin: 8px;
}

.nav-links span {
	color: #ccc;
}

.nav-links a {
	color: #593528;
}

aside#side button.wp-block-search__button.wp-element-button {
    border: solid 1px #ccc;
    padding: 0 10px;
}

aside#side input {
	border: solid 1px #ccc;
}

aside#side label.wp-block-search__label.has-medium-font-size {
    font-weight: bold;
    font-size: 2rem;
}

aside#side h2 {
	font-size: 2rem;
	margin-top: 20px;
}
aside#side .wp-block-latest-posts__list li {
	margin-bottom: 10px;
}
aside#side .wp-block-latest-posts__list * {
	line-height: 1.6em;
}

@media only screen and (min-width: 768px) {
	
	#head label {
		width: 127px;
	}

	#close-btn {
		right: 42px;
	}
	
	.top-news-feed .post a {
		padding: 10px 56px 10px 16px;
	}
	
	.top-news-feed .post a::after {
		content: "";
		display: block;
		width: 30px;
		height: 30px;
		background: url("assets/img/icon_arrow-off1.png") no-repeat;
		background-size: 30px;
		top: calc(50% - 16px);
		right: 16px;
		position: absolute;
	}
	
	.top-news-feed .post a:hover {
		text-decoration: underline;
	}
	
	.top-news-feed .post a:hover::after {
		background: url("assets/img/icon_arrow-on1.png") no-repeat;
		background-size: 30px;
	}
	
	.bottom_content {
		width: 768px;
		margin-left: auto;
	}
	
	.infomation-box {
		display: flex;
		justify-content: space-around;
	}
	
	#bottom {
		padding: 70px 0;
	}
	
	#toggle-menu:checked ~ #bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	
	#bottom .logo {
		margin-bottom: 140px;
	}
	
	#bottom .footer-content {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	
	#bottom .footer-content h5 {
		margin-bottom: 50px;
	}
	
	.footer-link {
		width: 400px;
	}
	
	.froating-menu {
		display: block;
		position: fixed;
		top: 12px;
		right: 153px;
		z-index: 101;
	}

	
	.froating-menu li {
		display: inline-block;
		margin: 0 6px;
	}

}

@media only screen and (min-width: 1100.2px) {
	#bottom .footer-content {
		justify-content: space-between;
	}
	.news-box {
		display: flex;
		justify-content: space-between;
	}
	
	.category-list {
		width: 420px;
		padding:  0 40px 0 0;
	}
	
	.category-list ul {
		display: block;
	}
	
	.top-news-feed {
		width: 640px;
		padding: 0;
	}
	
	.p-swiper-slide_box {
		display: flex;
		justify-content: center;
	}
	
	.p-swiper-slide_box .body {
		padding: 0;
		width: 50%;
		display: flex;
		justify-content: flex-end;
	}
	
	.p-swiper-slide_box .body .text {
		width: 100%;
		max-width: 660px;
		padding: 100px 60px 16px 16px;
	}
	
	.p-swiper-slide_box .body .text h1 {
		margin-bottom: 84px;
	}
	
	.p-swiper-slide_box .body .text h4 {
		margin-bottom: 84px;
	}
	
	.body-img {
		display: none;
	}
	
	.swiper-slide-img {
		width: 50%;
		display: block;
	}
	
	.img-wrap {
		display: block;
		height: 100%;
	}
	
	.content-body {
		display: flex;
		margin: 0 -10px;
		justify-content: space-between;
		align-content: center;
	}
	
	.content-body .image,
	.content-body .text {
		box-sizing: border-box;
		width: 50%;
		padding: 10px;
	}
	
	.content-body .text {
		display: flex;
	}
	
	.top-content {
		margin: 130px 0;
	}
	
	.top-content header {
		width: calc(50vw - 173px);
		padding: 40px 50px 170px;
		margin-bottom: -150px;
	}
	
	.handdrip header {
		display: flex;
		justify-content: flex-end;
		margin-left: calc(550px - 50vw);
	}
	
	
	.saleocoffee header {
		margin-left: 715px;
	}
	
	.saleocoffee .content-body {
		flex-flow: row-reverse;
	}
	
	#top-instagram {
		margin: 156px 0 0 0;
		padding: 160px 0;
	}
	
	#top-instagram ul {
		padding: 70px 0;
	}
	
	#top-instagram ul li {
		width: 25%;
	}
	
	.wp-content {
		display: flex;
	}
	
	aside#side {
		width: 25%;
	}
	
	.wp-blog-conents {
		width: 75%;
		padding-right: 78px;
	}

}

@media only screen and (min-width: 1460px) {
	
	.img-wrap img {
		width: 100%;
		max-width: 847px;
		height: auto;
	}
}

#sb_instagram .sbi_header_text.sbi_no_bio h3 {
	color: #666;
}

.post-content .post-body h2 {
	line-height: 1.6em;
	margin-bottom: 40px;
}
.post-content .post-body a {
	text-decoration: underline;
}
.post-content .post-body a * {
	color: #B97E54;
}
.post-content .post-body a:hover {
	color: #98514B;
}
.float-bn01>div {
	position: fixed;
	text-align: center;
	top: 30%;
	right: 0;
	z-index: 99;
}
.float-bn01 .pc_bn {
	width: 64px;
	height: auto;
}
.float-bn01 .pc_bn:hover {
	opacity: 0.8;
}
.float-bn01 .sp_bn {
	display: none;
}

@media only screen and (max-width: 767px) {
	.float-bn01>div {
		top: auto;
		bottom: 0;
		background-color: #26090e;
		width: 100%;
		height: 78px;
	}
	.float-bn01 .pc_bn {
		display: none;
	}
	.float-bn01 .sp_bn {
		display: inline;
		width: 390px;
		height: auto;
		max-width: 100%;
	}
}

/* 260129追加ブロック */
.shop_list {
	text-align: center;
	margin: 0 auto 24px auto;
	padding: 24px;
	background-color: rgba(0,0,0, 0.3);
	width: 100%;
	max-width: 1872px;
	height: auto;
}
.shop_list h1 {
	margin-bottom: 12px;
}
.shop_list h1,
.shop_list h1 span {
	color: #fff;
}
.shop_list .content-body {
	margin: 0;
}
.shop_list01 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: left;
	width: 100%;
}
.shop_list01 li {
	width: calc(50% - 12px);
	height: 180px;
}
.shop_list01 li a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	gap: 64px;
}
.shop_list01 li:hover {
	opacity: 0.8;
}
.shop_list01 li.honten {
	background: url(assets/img/bc_shoplist-1.png) no-repeat;
	background-size: cover;
}
.shop_list01 li.honten * {
	color: #fff;
}
.shop_list01 li.okage {
	background: url(assets/img/bc_shoplist-2.png) no-repeat;
	background-size: cover;
}
.shop_list01 li.honten img {
	width: 240px;
	height: auto;
}
.shop_list01 li.okage img {
	width: 96px;
	height: auto;
}
.shop_list01 li * {
	line-height: 1.4em;
}
.shop_list01 li h2 span {
	margin-left: 12px;
}
.sbi_feedtheme_header_text * {
    color: #666 !important;
}
.news_okage-link {
	position: absolute;
	bottom: 25px;
	left: 0;
}
.logo_pc {
	display: inline;
	margin-left: 28px;
}
.logo_sp {
	display: none;
}

@media screen and (max-width: 1200px) {
	.shop_list {
		padding: 12px;
	}
	.shop_list01 li {
		width: calc(50% - 4px);
	}
	.shop_list01 li {
		height: 130px;
	}
	.shop_list01 li a {
		flex-wrap: wrap;
		gap: 4px;
		align-content: center;

	}
	.shop_list01 li a div {
		display: inline-block;
		text-align: left;
	}
	.shop_list01 li a div {
		font-size: 1.0rem;
	}
	.shop_list01 li a div h2 {
		font-size: 1.4rem;
	}
	.shop_list01 li a div h2 span {
		font-size: 1.0rem;
	}
	.shop_list01 li a div:first-child {
		width: 100%;
		text-align: center;
	}
	.shop_list01 li.honten img {
		width: 120px;
		height: auto;
	}
	.shop_list01 li.okage img {
		width: 50px;
		height: auto;
	}
}

@media screen and (max-width: 1100px) {
	#head h1 {
		margin-left: 0;
		display: flex;
	}
	#head h1 img {
		vertical-align: middle;
		width: 116px;
		height: auto;
	}
	.logo_pc {
		display: none;
	}
	.logo_sp {
		display: inline;
		margin-left: 20px;
	}
	.news_okage-link {
		position: relative;
		margin-top: 20px;
		bottom: auto;
		left: auto;
	}
}
@media only screen and (max-width: 767px) {
	.shop_list {
		margin: 0 auto;
		background: none;
	}
	.shop_list h1 {
		display: none;
	}
	#mainimage {
		height: calc(100dvh - 76px);
	}
}