@charset "UTF-8";

@media (max-width: 779px) {
	
	.sec.page-head {
		padding-bottom: 50px;
	}
	.sec.page-head::after {
		top: calc(100% - 50px);
		height: 50px;
		animation: scrollsp 2s infinite;
	}
	.blog .sec.page-head::after, .news .sec.page-head::after {
		display: block;
	}
	.blog.article .sec.page-head::after, .news.article .sec.page-head::after {
		display: none;
	}
	.hero-img-wrap {
		height: 200px;
		width: calc(100vw - 5.5%);
		margin-left: calc(50% - 50vw);
	}
	.hero-img-txt {
		min-width: 300px;
		padding: .5em;
		font-size: 30px;
	}
	.section-head-txt {
		margin: 15px 0 0 50px;
		font-size: 16px;
		line-height: 1.8;
	}


	/* ABOUT */
	.content-about-nav {
		top: 0;
		left: 50%;
		width: 89%;
		margin-top: 0;
		padding: 15px 0 15px 5.5%;
		border-bottom: 2px solid #000;
		font-size: 16px;
		transform: translateX(-50%);
	}
	.content-about-nav a.current::before {
		width: 5px;
		height: 20px;
	}
	.content-about-nav a .en-B {
		font-size: 22px;
	}
    .content-about-nav a.menu-active {
        pointer-events: none;
    }
	.content-about {
		position: relative;
		padding-left: 0;
		padding-top: 270px;
	}
	#ABOUT-SHOP.sec, #ABOUT-COFFEE.sec, #ABOUT-COMPANY.sec {
		padding: 0 0 70px;
	}
	#ABOUT-SHOP.sec::after,
	#ABOUT-COFFEE.sec::after,
	#ABOUT-COMPANY.sec::after {
		content: '';
		position: absolute;
		top: -50px;
		left: 0;
    	width: 100vw;
		height: calc(100% + 50px);
		background: var(--grey);
		z-index: 0;
	}
	.content.-about {
		padding: 0 5.5%;
	}
	.-about .content-head {
		margin-bottom: 50px;
	}
	.-about .content-head h2 {
		padding: 20px 5.5%;
		font-size: 30px;
		letter-spacing: 0;
		text-align: center;
	}
	.-about .content-head h2::before,
	.-about .content-head h2::after {
		width: 30px;
	}
	.content-head-txt {
		margin-top: 50px;
		padding-left: 10vw;
		font-size: 16px;
		letter-spacing: 0;
	}
	.content-head-txt::before {
		top: 15px;
		left: 0;
		width: 6.5vw;
	}
	.content.-about .-reverse {
		margin-bottom: 50px;
		padding-bottom: 50px;
	}
	.about-content-txt {
		width: 89%;
		margin: auto;
	}
	.about-content-txt h3 {
		margin: 30px 0 60px;
		font-size: 20px;
	}
	.about-content-txt strong {
		font-weight: 700;
	}
	.about-content-txt strong::before {
		height: 1px;
	}
	.content-company-info {
		width: 100%;
		margin-left: auto;
		padding: 0;
	}
	.company-info {
		margin-bottom: 20px;
		aspect-ratio : 1 / 1.75;
	}
	.parallax-content-wrap {
		aspect-ratio : 1 / 1.75;
	}
	.company-info-photo {
		opacity: .45;
	}
	.parallax-content.company-info-photo {
		top: 50%;
		left: 50%;
		width: 300%;
	}
	.company-info-txt {
		min-width: initial;
		width: 100%;
		padding: 0 5.5%;
		font-size: 12px;
		line-height: 1.7;
		letter-spacing: 0;
	}
	.company-info-txt h3 {
		margin-bottom: 30px;
		padding-bottom: 30px;
		font-size: 25px;
	}
	.company-info-txt h3::before {
		width: 50px;
	}
	.company-info-txt .instagram {
		width: 50px;
		margin: 30px auto 0;
	}




	/* MENU */
	.content-menu-nav {
		border-top: 2px solid #000;
    	border-bottom: 2px solid #000;
	}
	.content-menu-nav ul {
		flex-wrap: wrap;
		padding: 0;
	}
	.content-menu-nav ul.-between {
		justify-content: flex-start;
	}
	.content-menu-nav ul li {
		padding: 1.5em 0;
		width: calc(100% / 3);
		font-size: 10px;
		border-bottom: 1px dashed #000;
	}
	.content-menu-nav ul li:hover::after,
	.content-menu-nav ul li.menu-active::after {
		width: 100%;
	}
	.content-menu-nav ul li:nth-child(7),
	.content-menu-nav ul li:nth-child(8),
	.content-menu-nav ul li:nth-child(9) {
		border-bottom: none;
	}
	.content-menu-nav ul li span {
		margin-bottom: 5px;
	}
	.content.-menu {
		margin: 50px calc(50% - 50vw) 0;
	}
	.content-menu-box {
		display: none;
		padding: 50px 5.5%;
	}
	.content-menu-box h2 {
		margin-bottom: 50px;
		font-size: 15px;
	}
	.content-menu-box h2 .en-B {
		margin-bottom: 15px;
		font-size: 40px;
	}
	.content-menu-box .cat-description {
		margin-bottom: 50px;
		font-size: 13px;
	}
	.content-menu-box h3 {
		margin-bottom: 2em;
		padding: .7em 0;
		font-size: 18px;
		line-height: 1.6;
	}
	.menu-box {
		padding-left: 4%;
		padding-right: 4%;
		width: 100%;
		padding-bottom: 0;
		margin-bottom: 50px;
		border-bottom: none;
	}
	.menu-box:nth-child(odd) {
		padding-left: 4%;
	}
	.menu-box:nth-last-child(1), .menu-box:nth-last-child(2) {
		margin-bottom: 50px;
	}
	.menu-box:nth-last-child(1) {
		padding-bottom: 50px;
		border-bottom: 1px dashed #000;
	}
	.menu-box-txt-title {
		padding: 1.25em 0;
		font-size: 14px;
	}
	.menu-box-txt p {
		font-size: 12px;
		letter-spacing: 0;
		line-height: 1.7;
	}
	.menu-box-txt-price {
		margin: 20px 0 0;
		font-size: 14px;
	}
	.menu-box-photo .sub-txt {
		padding: .5em;
		font-size: 12px;
		letter-spacing: 0;
	}




	/* BLOG */
	#BLOG.sec {
		padding-top: 0;
		padding-bottom: 0;
	}
	.blog-wrap {
		display: block;
	}
	.blog-Nav {
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 50px;
		border-top: 2px solid #000;
		border-bottom: 2px solid #000;
	}
	.blog-Nav::before {
		display: none;
	}
	.blog-Nav-sticky {
		position: relative;
		top: auto;
	}
	.blog-Nav h3 {
		width: 100px;
		margin-bottom: 0;
		margin-right: 20px;
		padding: 5px 20px 5px 0;
		border-right: 1px solid #000;
		font-size: 15px;
	}
	.blog-Nav-archive {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}
	.blog-Nav-archive select {
		width: 50%;
		padding: 5px 10px;
		font-size: 13px;
	}
	.blog-Nav-category {
		display: flex;		
	}
	.blog-Nav-category ul {
		margin-top: 10px;
	}
	.blog-Nav-category ul li {
		margin-bottom: 10px;
	}
	.blog-Nav-category ul li a {
		font-size: 11px;
		border-left: 1px dashed #000;
	}
	.content.-blog {
		width: 100%;
		padding: 0 0 70px;
	}
	.blogbox {
		width: 48%;
		margin-bottom: 30px;
	}
	.blogbox a {
		padding: 8% 8% calc(5% + 50px);
	}
	.blogbox a::before, 
	.blogbox a::after {
		width: 30px;
	}
	.blogbox-cat {
		padding: 0px 5px;
		font-size: 9px;
	}
	.blogbox .lnk {
		bottom: 5%;
	}
	.blogbox-txt .date {
		padding: 0 0 10px;
		font-size: 10px;
	}
	.blogbox-txt-title {
		font-size: 13px;
		line-height: 1.6;
	}
	.pagenation a, .pagenation span {
		font-size: 15px;
	}
	.pagenation a.next, .pagenation a.prev, .pagenation div.next.-emp, .pagenation div.prev.-emp {
		margin: 0 30px;
	}
	.pagenation a.next::before, .pagenation a.prev::before {
		width: 20px;
		height: 20px;
	}
	.bloglink {
		margin-top: 50px;
		height: 150px;
	}
	.bloglink-txt {
		min-width: initial;
		width: 100%;
		font-size: 20px;
	}
	.bloglink-txt.-flexed {
		justify-content: center;
	}
	.bloglink-txt span {
		margin-right: 20px;
	}
	.bloglink .lnk {
		right: 15px;
		bottom: 15px;
	}

	/* BLOG -single- */
	.blog-hero {
        font-size: 15px;
        width: calc(100% - 220px);
        padding-left: 1em;
		letter-spacing: 0;
    }
	.article-head {
		margin-bottom: 70px;
	}
	.article-head::after {
		left: calc(50% - 50vw);
	}
	.article-head-inner {
		padding: 20px 5.5%;
	}
	.article-head-inner h2 {
		font-size: 25px;
		margin: 10px 0;
	}
	.content-article {
		width: 89%;
	}
	.content-article h3 {
		margin: 70px 0 30px;
		font-size: 18px;
	}
	.content-article h3:first-child {
		margin-top: 0;
	}
	.content-article h3::before {
		top: 17px;
	}
	.content-article p {
		margin-top: 20px;
	}





	/* NEWS */
	.news .section-head h1 {
		padding: 50px 0 70px;
		width: 100%;
	}
	.news .section-head h1 span {
		margin-top: 15px;
		font-size: 15px;
	}
	.news .section-head h1 span::before, .news .section-head h1 span::after {
		left: calc(50% - 3px);
		width: 6px;
		height: 6px;
	}
	.news .section-head h1 span::after {
		left: calc(50% + 3px);
	}


	/* CONTACT */
	.sec.page-head.-contact {
		padding-bottom: 50px;
	}
	.sec.contact-head {
		padding: 0 5.5%;
	}
	.contact-head h2 {
		padding: 15px;
		font-size: 25px;
	}
	.contact-head .phone {
		padding: 30px 0 40px;
		font-size: 25px;
	}
	.contact-head .phone .phone-icon {
		width: 32px;
	}
	.contact-head .phone-time {
		font-size: 12px;
	}
	.contact-form h2 {
		padding: 0 0 30px;
		margin-bottom: 30px;
		font-size: 30px;
		letter-spacing: .1em;
	}
	.contact-form h2::after {
		width: 50px;
	}
	.contact-txt {
		font-size: 15px;
	}
	.contact-form-wrap {
		max-width: initial;
		min-width: initial;
		width: 89%;
		margin: 50px auto;
	}
	.contact-form-wrap-inner {
		padding: 0 0 50px;
		border-top: none;
		border-bottom: 1px solid #000; 
	}
	.contact-form-wrap-inner dl {
		position: relative;
		display: block;
		padding-bottom: 20px;
		margin-bottom: 0;
	}
	.contact-form-wrap-inner dl:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.contact-form-wrap-inner dl::before {
		top: 0;
		left: 0;
		width: 100%;
		height: 5px;
	}
	.contact-form-wrap-inner dt {
		width: 100%;
		padding: 20px 15px 15px;
		font-size: 15px;
	}
	.contact-form-wrap-inner dt span {
		top: 20px;
		right: 15px;
	}
	.contact-form-wrap-inner dd {
		width: 100%;
		padding: 0 15px;
		font-size: 15px;
	}
	.contact-form-wrap-inner dd input,
	.contact-form-wrap-inner dd textarea {
		font-size: 15px;
	}
	.contact-btn {
		margin-top: 50px;
	}
	.contact-btn input, .contact-btn button.contact-btn-back {
		min-width: 120px;
		padding: 10px 25px;
		font-size: 16px;
	}
	.sec.contact-confirm {
		padding: 0 5.5% 50px;
	}
	
	
	/* PRIVACYPOLICY */
	.sec.privacypolicy-head {
		padding: 0 5.5%;
	}
	
}