@charset "utf-8";

/*
----------------------------------------
960
----------------------------------------
*/

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

	.sp {
		display: block;
	}

	.pc {
		display: none;
	}

	body {
		font-size: 1.4rem;
	}

	body.nav-open {
		position: fixed;
		overflow: hidden;
	}

	.ttl-01 {
		margin-bottom: 20px;
	}

	.ttl-01 h1,
	.ttl-01 h2,
	.ttl-01 h3 {
		font-size: 2rem;
	}

	.ttl-01 p {
		font-size: 1.6rem;
		margin-top: 10px;
	}

	.table-01 tr {
		-js-display: flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
	}

	.table-01 th {
		border-right: solid 1px #231815;
		border-bottom: dashed 1px #231815;
		text-align: left;
		padding: 10px 20px;
	}

	.table-01 td {
		padding: 20px;
	}

	#contents {
		padding-bottom: 30px;
	}

	footer {
		padding-top: 220px;
	}

	footer::before {
		height: 200px;
	}

	footer .address {
		margin-bottom: 30px;
	}

	footer .address .info {
		width: 100%;
		padding-right: 0;
	}

	footer .address .info dl  {
		text-align: center;
		margin-bottom: 30px;
	}

	footer .address .info dl .shop img {
		width: 240px;
	}

	footer .address .info dl .shop + dd {
		margin: 10px 0 20px;
	}

	footer .address .info dl .datetime + dd {
		display: inline-block;
		margin: 0 auto;
	}

	footer .address .info dl .datetime + dd ul {
		text-align: left;
	}

	footer .address .map-wrap {
		width: 100%;
	}

	footer .car {
		margin-bottom: 0;
	}

	footer .car .flex > * {
		width: 100%;
	}

	footer .car .txt {
		padding-right: 0;
		margin-bottom: 30px;
	}

	footer .car .txt {
		margin: 10px 0 20px;
	}

	footer .car .txt .flex {
		justify-content: space-between;
		margin: 15px 0;
	}

	footer .car .txt .flex > p {
		width: 30%;
		padding: 0;
	}

	footer .car .txt .note {
		font-size: 1.4rem;
		padding-left: 1.4rem;
		text-indent: -1.4rem;
		margin-left: 0;
	}

	footer .car .icon img {
		max-width: 200px;
	}

	footer .copyright {
		padding: 20px 0 30px;
	}

	/* home */

	#home #main-img {
		padding: 10px;
	}

	#home #main-img #main-slider .main-img-01 {
		background: url( ../img/home/main-img-01.png ) center center / cover no-repeat;
	}

	#home #main-img #main-slider .main-img-02 {
		background: url( ../img/home/main-img-02.png ) center center / cover no-repeat;
	}

	#home #main-img #main-slider .main-img-03 {
		background: url( ../img/home/main-img-03.png ) center center / cover no-repeat;
	}

	#home #main-img #main-slider .main-img-04 {
		background: url( ../img/home/main-img-04.png ) center center / cover no-repeat;
	}

	#home #main-img .main-wrap {
		padding: 20px;
		/* background: url( ../img/home/main-img-01.png ) center center / cover no-repeat; */
	}

	#home #main-img .ttl {
		padding-top: 0;
	}

	#home #main-img .ttl h1 {
		transform: translateX( -5px );
	}

	#home #main-img .ttl h1 img {
		max-width: 80%;
	}

	#home #main-img .ttl p {
		font-size: 1.8rem;
	}

	#home .main-nav #identity {
		display: none;
	}

	#home #contents > section {
		padding: 20px 0;
	}

	#home .post-list {
		flex-direction: column;
		padding: 20px 0 0;
	}

	#home .post-list .post {
		width: 100%;
		margin: 0 0 30px;
		padding: 0 10px;
	}

	.post-list figure {
		margin-bottom: 10px;
	}

	#home .concept-box {
		margin: 10px 0;
	}

	#home .concept {
		margin-bottom: 30px;
	}

	#home .concept .concept-img {
		background: url( ../../assets/img/home/concept-img.png ) center bottom / cover no-repeat;
		position: relative;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 340px;
	}

	#home .concept-list {
		padding-left: 0;
	}

	#home .concept-list dt {
		font-size: 1.8rem;
		margin: 20px 0 10px;
		text-align: center;
	}

	#home .promise {
		margin-bottom: 20px;
	}

	#home .promise-list {
		display: block;
	}

	#home .promise-list > div {
		-js-display: flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: 0 auto 20px;
	}

	#home .promise-list h4 {
		margin: auto 0 10px;
	}

	#home .promise-list p {
		margin: 0 0 auto;
		text-align: center;
	}

	#home .menu-box .main {
		margin-bottom: 30px;
	}

	#home .menu-box .main > figure,
	#home .menu-box .main > .txt {
		width: 100% !important;
	}

	#home .menu-box .main > figure {
		text-align: center;
	}

	#home .menu-box .main > figure img {
		width: 240px;
	}

	#home .menu-box .coffee .main .txt {
		padding: 0;
		margin-bottom: 20px;
	}

	#home .menu-box .main .txt .ttl {
		text-align: center;
	}

	#home .txt .tag {
		font-size: 1.2rem;
	}

	#home .menu-box .sec {
		padding: 30px 0 10px;
		border-bottom: dashed 1px #7f4f21;
	}

	#home .menu-box .txt h3 {
		font-size: 2rem;
		margin: 5px 0 10px;
	}

	#home .menu-box .txt h4 {
		font-size: 1.8rem;
		margin: 10px 0;
	}

	#home .menu-box .coffee .main {
		margin-bottom: 0;
	}

	#home .menu-box .flex.other > figure {
		width: 100%;
		margin-bottom: 20px;
	}

	#home .menu-box .flex.other > figure img {
		max-width: 240px;
	}

	#home .menu-box .flex.other figcaption {
		font-size: 1.4rem;
		margin-top: 5px;
	}

	#home .menu-box .bread .main > figure {
		padding-right: 0;
	}

	#home .menu-box .sec.ice {
		margin: 0 0 10px;
		padding: 40px 0;
		border-bottom: none;
	}

	#home .menu-box .ice .main figure {
		padding-left: 0;
	}

	#home .menu-box .ice .other {
		height: 80px;
		background: url( ../img/home/ice-img-02.png ) center center / cover repeat-x;
	}

	#home .pet .txt, #home .pet .img {
		width: 100%;
	}

	#home .pet .txt {
		padding: 0;
		margin-bottom: 20px;
	}

	#home .pet .txt .ttl {
		text-align: center;
		margin-bottom: 20px;
	}

	#home .pet .txt h3 {
		font-size: 1.8rem;
	}

	#home .pet .img {
		padding-top: 0;
	}

	#home .pet .img .pet-img {
		position: relative;
		left: 0;
		height: 200px;
		margin-bottom: 10px;
	}

	#home .pet .txt .note {
		font-size: 1.2rem;
		margin-top: 10px;
	}

	#home .pet .img .flex figure {
		width: calc( ( 100% - 10px ) / 2 );
	}

	#home .bnr-set .flex {
		margin: 0;
	}

	#home .bnr-set .flex .btn {
		width: 100%;
		margin-bottom: 10px;
	}

	#home .bnr-set .btn a {
		padding: 10px;
		font-size: 1.6rem;
	}

	/* page */

	.page .main-nav {
		margin: 0 0 20px;
		padding: 20px;
	}

	.main-nav #identity {
		display: block;
		line-height: .5;
		text-align: left;
	}

	.main-nav #identity img {
		width: auto;
		height: 46px;
	}

	.main-nav #nav-wrap {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba( 0, 0, 0, .85 );
		overflow: auto;
		-js-display: flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		opacity: 0;
		visibility: hidden;
		z-index: -1;
		transition: all .2s;
	}

	.nav-open .main-nav #nav-wrap {
		opacity: 1;
		visibility: visible;
		z-index: 99999;
	}

	.main-nav #g-nav {
		padding: 0 !important;
		width: 100%;
	}

	.main-nav #g-nav ul {
		flex-direction: column;
		width: 100%;
	}

	.main-nav #g-nav li {
		margin: 0;
		padding: 15px 80px;
		opacity: 0;
		transform: all .2s;
	}

	.nav-open .main-nav #g-nav li:first-child {
		animation: fade .8s ease-in-out .2s 1 normal forwards !important;
	}

	.nav-open .main-nav #g-nav li:nth-child( 2 ) {
		animation: fade .8s ease-in-out .3s 1 normal forwards !important;
	}

	.nav-open .main-nav #g-nav li:nth-child( 3 ) {
		animation: fade .8s ease-in-out .4s 1 normal forwards !important;
	}

	.nav-open .main-nav #g-nav li:nth-child( 4 ) {
		animation: fade .8s ease-in-out .5s 1 normal forwards !important;
	}

	.nav-open .main-nav #g-nav li:nth-child( 5 ) {
		animation: fade .8s ease-in-out .6s 1 normal forwards !important;
	}

	.main-nav #sns-btn {
		line-height: .5;
		margin: 30px 0 0;
		padding: 15px 0;
		opacity: 0;
		transform: all .2s;
	}

	.nav-open .main-nav #sns-btn {
		animation: fade .8s ease-in-out .7s 1 normal forwards;
	}

	.main-nav #sns-btn li {
		margin: 0 8px;
	}

	#sp-btn {
		display: block;
		width: 46px;
		height: 46px;
		background: #7f4f21;
		position: fixed;
		top: 20px;
		right: 20px;
		z-index: 999999;
	}

	#sp-btn > div {
		position: relative;
	}

	#sp-btn span {
		display: inline-block;
		transition: all .4s;
	}

	#sp-btn span {
		position: absolute;
		left: 12px;
		right: 12px;
		height: 2px;
		background: #fff;
	}

	#sp-btn span:nth-of-type( 1 ) {
		top: 14px;
	}

	#sp-btn span:nth-of-type( 2 ) {
		top: 22px;
	}

	#sp-btn span:nth-of-type( 3 ) {
		top: 30px;
	}

	.nav-open #sp-btn span:nth-of-type( 1 ) {
		-webkit-transform: translateY( 8px ) rotate( -45deg );
		transform: translateY( 8px ) rotate( -45deg );
	}

	.nav-open #sp-btn span:nth-of-type( 2 ) {
		opacity: 0;
	}

	.nav-open #sp-btn span:nth-of-type( 3 ) {
		-webkit-transform: translateY( -8px ) rotate( 45deg );
		transform: translateY( -8px ) rotate( 45deg );
	}

	#post-list {
		flex-direction: column;
	}

	#post-list .post {
		width: 100%;
	}

	.page .post-list .post .ttl a {
		font-size: 1.6rem;
	}

	.page-nav .wp-pagenavi {
		margin: 0 20px;
	}

	#contents > .flex {
		flex-direction: column;
	}

	#main-contents {
		width: 100%;
		padding: 0;
	}

	#main-contents h1 {
		font-size: 2rem;
	}

	#main-contents h2 {
		font-size: 1.9rem;
	}

	#main-contents h3 {
		font-size: 1.8rem;
	}

	#main-contents h4 {
		font-size: 1.7rem;
	}

	#main-contents h5 {
		font-size: 1.6rem;
	}

	#main-contents h6 {
		font-size: 1.5rem;
	}

	.post .post-contents p,
	.post .post-contents ul,
	.post .post-contents ol {
		margin-bottom: 20px;
	}

	.post-nav {
		flex-direction: column;
	}

	.post-nav .prev,
	.post-nav .next {
		width: 100%;
		padding: 20px 0;
		border-top: solid 1px #ddd;
	}

	.post-nav .prev a,
	.post-nav .next a {
		padding: 0;
	}

	.post-nav .back-link {
		width: 100%;
		order: 3;
	}

	#sidebar {
		width: 100%;
	}

	#sidebar .side-wrap > div {
		margin-bottom: 30px;
	}

	/* staff */

	#staff .staff-box {
		flex-direction: column;
		margin-bottom: 30px;
	}

	#staff .staff-box .img {
		width: 100%;
		padding: 0;
		margin-bottom: 15px;
	}

	#staff .staff-box .txt {
		width: 100%;
	}

	#staff .staff-box .txt h2 {
		font-size: 1.8rem;
		margin-bottom: 20px;
	}

	#staff .table-01 th {
		text-align: left;
		text-align-last: left;
	}

	/* shop */

	#shop .table-01 td .flex {
		display: block;
	}

	#shop .table-01 td .flex p {
		margin: 0 0 10px;
	}

	#shop .table-01 td .flex p:last-child {
		margin: 0;
	}

	/* contact */

	input[type=text],
	input[type=search],
	input[type=tel],
	input[type=number],
	input[type=url],
	input[type=email],
	input[type=password],
	input[type=date],
	textarea,
	select {
		width: 100%;
	}

	#contact .ttl-01 h1 {
		display: block;
		text-align: center;
		padding: 5px 0;
	}

	#contact .table-01 {
		margin-top: 20px;
	}

	#contact .info-box {
		margin: 40px 0;
	}

	#contact .info-box .ttl h2 {
		font-size: 2rem;
	}

	#contact .info-box > .flex {
		flex-direction: column;
	}

	#contact .info-box .flex > div:first-child {
		margin: 0 0 30px;
	}

}


/*
----------------------------------------
320
----------------------------------------
*/

@media screen and ( max-width: 320px ) {
}