@charset "utf-8";

/* *****************************************************************************
   PC用のスタイル記述
***************************************************************************** */
@media screen and (min-width: 769px), print {
	header {
		top: -120px;
		transition: .3s;
	}
	
	header.fixed {
		top: 0;
		transition: .3s;
	}
	
	#bt-onlineshop {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #d64d31;
		text-align: center;
		vertical-align: bottom;
		z-index: 999
	}
	
	#bt-onlineshop a {
		color: #fff;
		font-size: 13px;
		padding: 15px;
		line-height: 1em;
		display: inline-block;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		letter-spacing: 0.07em;
	}
	
	#bt-onlineshop a:hover {
		color: #fff !important;
	}
	
	#bt-onlineshop a::after {
		content: "";
		width: 18px;
		height: 18px;
		margin-left: 1em;
		margin-bottom: 2px;
		background:url("../shared/images/ico_cart.svg") no-repeat;
		background-size: cover;
		display: inline-block;
		vertical-align: middle;
	}
	
	#bt-onlineshop-sp {
		display: none !important;
	}	
	
	#fo-fixed {
		display: none;
	}
	
	
	
	/* -----------------------------------------------------------------------------
	 Contents
	----------------------------------------------------------------------------- */
	main > .logo {
		padding: 75px 0 48px;
		text-align: center;
	}
	
	main > .logo img {
		width: 324px;
		height: auto;
	}
	
	nav#top-menu ul {
		width: 100%;
		max-width: 1040px;
		margin: 0 auto;
		padding: 56px 20px 30px;
		text-align: center;
		display: flex;
		justify-content: space-between;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	nav#top-menu ul li:last-child {
		padding: 0 0 0 0;
	}
	
	nav#top-menu ul li img {
		width: auto;
		height: 22px;
	}
	
	nav#top-menu ul li a {
		padding-bottom: 14px;
		display: block;
		border-bottom: 3px solid #fff;
		transition: .3s;
	}
	
	nav#top-menu ul li a:hover {
		border-bottom: 3px solid #000;
		transition: .3s;
	}
	
	nav#top-menu ul li a:hover img {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	
	nav#top-menu .onlinebooking {
		position: absolute;
		top: -124px;
		right: 25px;
		transition: 1s;
		filter:alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
	}
	
	nav#top-menu .onlinebooking.load {
		top: 25px;
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		transition: 1s;
	}
	
	nav#top-menu .onlinebooking img {
		width: 104px;
		height: auto;
	}
	
	nav#top-menu .onlinebooking:hover > a > img.over {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		transition: .3s;
	}
	
	nav#top-menu .onlinebooking.show img.over {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		transition: .3s;
	}
	
	nav#top-menu .onlinebooking > ul {
		width: auto;
		max-width: inherit;
		margin: 0;
		padding: 0;
		display: block;
		margin-top: -1px;
		background-color: #fff;
		text-align: center;
		filter: alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
		transition: .3s;
	}
	
	nav#top-menu .onlinebooking:hover > ul {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		transition: .3s;
	}
	
	nav#top-menu .onlinebooking > ul li {
		width: 101px;
		margin: 0 auto;
		border-bottom: 3px solid #000;
		display: none;
	}
	
	nav#top-menu .onlinebooking > ul li:last-child {
		border-bottom: none;
	}
	
	nav#top-menu .onlinebooking:hover > ul li {
		display: block;
	}
	
	nav#top-menu .onlinebooking ul li img {
		width: 101px;
		height: auto;
		vertical-align: bottom;
	}
	
	nav#top-menu .onlinebooking ul li a:hover img {
		filter:alpha(opacity=50);
		-moz-opacity: 0.5;
		opacity: 0.5;
		transition: .3s;
	}
	
	nav#top-menu .onlinebooking ul li a {
		padding-bottom: 0;
		border-bottom: none;
		transition: 0;
	}

	
	/* mainimg */
	#main {
		max-width: 1000px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
	}

	#main .topImg {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		z-index: 2;
	}
	
	#mainimg img {
		width: 100%;
		height: auto;
	}
	
	
	/* container */
	main #container {
		max-width: 1040px;
		margin: 0 auto 0;
		padding: 0 20px;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main #container section {
		position: relative;
		margin-top: 75px;
	}
	
	main #container section h2 img {
		width: auto;
		height: 32px;
	}
	
	#concept,
	#shoplist {
		position: relative;
		top: -120px;
	}
	
	
	/* news */
	main #container section.news {
		border-bottom: 3px solid #000;
		display: flex;
	}
	
	main #container section.news > h2 {
		width: 24.6%;
		text-align: right;
	}
	
	main #container section.news > .inner {
		width: 75.4%;
	}
	
	main #container section.news > .inner dl {
		display: flex;
		flex-wrap: wrap;
	}
	
	main #container section.news > .inner dl dt {
		color: #555555;
		font-size: 13px;
		width: 19.6%;
		padding: 53px 20px 0 0;
		text-align: right;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main #container section.news > .inner dl dt:first-child {
		padding: 3px 20px 0 0;
	}
	
	main #container section.news > .inner dl dd {
		font-size: 16px;
		width: 80.4%;
		padding: 50px 0 0 0;
	}
	
	main #container section.news > .inner dl dd:nth-child(2) {
		padding: 0 0 0 0;
	}
	
	main #container section.news > .inner .more {
		padding: 30px 0 23px;
		text-align: right;
	}
	
	main #container section.news > .inner .more a img {
		width: auto;
		height: 18px;
	}
	
	
	/* concept */
	main #container section.concept {
		background: url("../images/consept_bg.gif") left bottom no-repeat;
		background-size: auto 358px;
		display: flex;
	}
	
	main #container section.concept > h2 {
		width: 42.2%;
		padding-right: 12%;
		text-align: right;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main #container section.concept > .inner {
		width: 57.8%;
		margin-bottom: -12px;
	}
	
	main #container section.concept > .inner h3 img {
		width: auto;
		height: 30px;
	}
	
	main #container section.concept > .inner p {
		font-size: 22px;
		font-weight: bold;
		padding-top: 30px;
		line-height: 1.9em;
	}
	
	main #container section.concept > .inner p:nth-child(4) {
        line-height: 1.5em;
    }

	main #container section.concept > .inner p + h3 {
		margin-top: 65px;
	}
	
	
	/* btn-area */
	main #container .btn-area {
		padding: 63px 0 62px;
		display: flex;
		justify-content: space-between;
		border-bottom: 3px solid #000;
	}
	
	main #container .btn-area a {
		position: relative;
		height: 100%;
		display: block;
	}
	
	main #container .btn-area a .bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		filter:alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
		transition: .3s;
		z-index: 1;
	}
	
	main #container .btn-area a:hover .bg {
		filter:alpha(opacity=58);
		-moz-opacity: 0.58;
		opacity: 0.58;
		transition: .3s;
	}

	main #container .btn-area a:hover img {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		transition: .3s;
	}
	
	main #container .btn-area h2 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 28px 0 0 0;
		text-align: center;
		z-index: 2;
	}
	
	main #container .btn-area .cheese {
		position: relative;
		width: 33%;
	}
	
	main #container .btn-area .cheese h2 img {
		width: 81.6%;
		height: auto;
	}
	
	main #container .btn-area .pizza {
		position: relative;
		width: 33%;
	}
	
	main #container .btn-area .bake h2 img {
		width: 70.7%;
		height: auto;
	}
	
		main #container .btn-area .bake {
		position: relative;
		width: 33%;
	}
	
	main #container .btn-area .pizza h2 img {
		width: 70.7%;
		height: auto;
	}

	main #container .btn-area .cheese a {
		width: 100%;
		height: 412px;
		background: url("../images/cheese_bg.jpg") center no-repeat;
		background-size: cover;
	}
	
	main #container .btn-area .pizza a {
		width: 100%;
		height: 412px;
		background: url("../images/pizza_bg.jpg") center no-repeat;
		background-size: cover;
	}
	
	main #container .btn-area .bake a {
		width: 100%;
			height: 412px;
		background: url("../images/bake_bg.jpg") center no-repeat;
		background-size: cover;
	}

	main #container .btn-area .more {
		position: absolute;
		bottom:18px;
		right: 18px;
		z-index: 2;
	}
	
	main #container .btn-area .more img {
		width: auto;
		height: 29px;
	}
	
	
	/* shoplist */
	main #container section.shoplist {
		margin-top: 60px;
	}
	
	main #container section.shoplist > h2 {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main #container section.shoplist > .inner {
		padding: 13px 0 70px;
	}

	main #container section.shoplist > .inner article {
		display: flex;
		justify-content: space-between;
		margin: 0 0 40px 0;
	}
	
	main #container section.shoplist > .inner article .shopImg {
		position: relative;
		padding: 0 40px 0 0;
		margin-top: 9px;
	}

	main #container section.shoplist > .inner article .shopImg h4 {
	    position: absolute;
        background-color: #000;
        text-align: center;
        height: 25px;
        width: 200px;
        padding: 12px;
    }

    main #container section.shoplist > .inner article .shopImg h4 img {
    	height: 25px;
    }

    main #container section.shoplist > .inner article .shopImg p img {
    	width: 394px;
    }



    main #container section.shoplist > .inner article .shopContent .shopName {
    	display: flex;
    	margin: 0 0 5px 0;
    }

    main #container section.shoplist > .inner article .shopContent .shopName h3 {
    	font-size: 20px;
    	padding: 0 15px 0 0;
    }

    main #container section.shoplist > .inner article .shopContent .shopName .tag {
    	padding: 0px 8px;
        margin: 6px 2px 0;
        height: 18px;
        line-height: 18px;
        border: 1px solid;
    }

    main #container section.shoplist > .inner article .shopContent .content {
    	font-size: 14px;
    	margin: 0 0 20px 0;
    }


    main #container section.shoplist > .inner article .shopContent .content span{
        font-weight: bold;
    	color: #266faf;
        letter-spacing: 0.02em;
    }


    main #container section.shoplist > .inner article .shopContent .info dl {
    	display: flex;
    	margin: 0 0 6px 0;
    }

    main #container section.shoplist > .inner article .shopContent .info dl dt {
		width: 99px;
        font-weight: bold;
        font-size: 11px;
    }

    main #container section.shoplist > .inner article .shopContent .info dl dd {
    	font-size: 12.5px;
    	line-height: 1.4;
    	letter-spacing: 0.05em;
    }

    main #container section.shoplist > .inner article .shopContent .info dl dd a {
    	text-decoration: underline 1px #777;
    }

    main #container section.shoplist > .inner article .shopContent .info dl dd a.tel {
    	pointer-events: none;
		cursor: default;
		text-decoration: none;
    }

    main #container section.shoplist > .inner article .shopContent .info dl dd a:hover {
    	text-decoration: none;
    }

    main #container section.shoplist > .inner .border {
    	height: 1px;
    	width: 100%;
    	background: #CECECE;
    	margin: 0 0 60px 0;
    }
	
	/* instagram */
	main section.instagram {
		margin-top: 60px;
		padding: 0 10px;
	}
	
	main section.instagram > h2 {
		max-width: 1000px;
    margin: 0 auto 0;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main section.instagram > h2 img {
		width: auto;
		height: 32px;
	}
	
	main section.instagram > h3 {
		max-width: 1000px;
    margin: 20px auto 0;
	}
	
	main section.instagram > h3 img {
		width: auto;
		height: 21px;
		vertical-align: top;
	}
	
	main section.instagram > .inner {
		padding: 28px 0 95px;
	}
	
	
	
	
	
	
	
}


/* *****************************************************************************
   スマートフォン用のスタイル記述
***************************************************************************** */
@media screen and (max-width: 769px) {

	/* -----------------------------------------------------------------------------
	 Header
	----------------------------------------------------------------------------- */
	header {
		top: 0;
		right: 0;
	}
	
	header.fixed {
		top: 0;
		right: 0;
	}
	
	#bt-onlineshop {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #d64d31;
		text-align: center;
		vertical-align: bottom;
		z-index: 999
	}
	
	#bt-onlineshop a {
		color: #fff;
		font-size: 13px;
		padding: 15px;
		line-height: 1em;
		display: inline-block;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		letter-spacing: 0.07em;
	}
	
	#bt-onlineshop a:hover {
		color: #fff !important;
	}
	
	#bt-onlineshop a::after {
		content: "";
		width: 18px;
		height: 18px;
		margin-left: 1em;
		margin-bottom: 2px;
		background:url("../shared/images/ico_cart.svg") no-repeat;
		background-size: cover;
		display: inline-block;
		vertical-align: middle;
	}
	
	#bt-onlineshop-sp {
		display: none !important;
	}	
	
	
	/* -----------------------------------------------------------------------------
	 Contents
	----------------------------------------------------------------------------- */
	main > .logo {
		padding-top: 24px;
		text-align: center;
	}
	
	main > .logo img {
		width: 178px;
		height: auto;
	}
	
	nav#top-menu {
		display: none;
	}
	
	
	/* mainimg */
	#main {
		position: relative;
		margin-top: 20px;
		overflow: hidden;
	}

	#main .topImg {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		z-index: 2;
	}

	#mainimg img {
		width: 100%;
		height: auto;
	}
	
	
	/* container */
	main #container {
		margin: 0 37px;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main #container section {
		position: relative;
		margin-top: 39px;
	}
	
	main #container section h2 img {
		width: auto;
		height: 28px;
	}
	
	#concept,
	#shoplist {
		position: relative;
		top: 0;
	}
	
	
	/* news */
	main #container section.news {
		border-bottom: 2px solid #000;
	}
	
	main #container section.news > h2 {
		
	}
	
	main #container section.news > .inner {
		
	}
	
	main #container section.news > .inner dl {
		
	}
	
	main #container section.news > .inner dl dt {
		color: #555555;
		font-size: 10px;
		padding: 25px 0 0 0;
		text-align: right;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
	}
	
	main #container section.news > .inner dl dd {
		font-size: 12px;
		margin-left: 65px;
		padding: 25px 0 0 0;
	}
	
	main #container section.news > .inner .more {
		padding: 15px 0 15px;
		text-align: right;
	}
	
	main #container section.news > .inner .more a img {
		width: auto;
		height: 13px;
	}
	
	
	/* concept */
	main #container section.concept {
		margin-top: 60px;
		background: url("../images/consept_bg.gif") right bottom no-repeat;
		background-size: 48% auto;
	}
	
	main #container section.concept > h2 {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main #container section.concept > .inner {
		padding: 25px 0 0 0;
	}
	
	main #container section.concept > .inner h3 img {
		width: auto;
		height: 18px;
	}
	
	main #container section.concept > .inner p {
		font-size: 14px;
		font-weight: bold;
		padding-top: 13px;
		line-height: 1.9em;
	}
	
	main #container section.concept > .inner p + h3 {
		margin-top: 37px;
	}
	
	main #container section.concept > .inner p + h3 + p {
		line-height: 1.3em;
	}
	
	
	/* btn-area */
	main #container .btn-area {
		padding: 34px 0;
		justify-content: space-between;
		border-bottom: 2px solid #000;
	}
	
	main #container .btn-area a {
		height: 100%;
		display: block;
	}

	main #container .btn-area a:hover img {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		transition: .3s;
	}
	
	main #container .btn-area h2 {
		position: absolute;
		top: 28px;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: center;
	}
	
	main #container .btn-area .cheese {
		position: relative;
	}
	
	main #container .btn-area .cheese h2 img {
		width: 81.6%;
		height: auto;
	}
	
	main #container .btn-area .pizza {
		position: relative;
		margin-top: 3px;
	}
	
	main #container .btn-area .pizza h2 img {
		width: 70.7%;
		height: auto;
	}
	

	main #container .btn-area .bake {
		position: relative;
		margin-top: 3px;
	}
	
	main #container .btn-area .bake h2 img {
		width: 57.7%;
		height: auto;
	}


	main #container .btn-area .cheese a {
		width: 100%;
		padding-top: 71.4%;
		background: url("../images/cheese_bg.jpg") center no-repeat;
        height: 106px;
		background-size: cover;
		display: block;
		margin-bottom: 15px;
	}
	
	main #container .btn-area .pizza a {
		width: 100%;
		padding-top: 71.4%;
		background: url("../images/pizza_bg.jpg") center no-repeat;
        height: 106px;
		background-size: cover;
		display: block;
		margin-bottom: 15px;
	}
	
	main #container .btn-area .bake a {
		width: 100%;
		padding-top: 71.4%;
		background: url("../images/bake_bg.jpg") center no-repeat;
		height: 106px;
		background-size: cover;
		display: block;
	}

	main #container .btn-area .more {
		position: absolute;
		bottom:18px;
		right: 18px;
		width: 22.7%;
	}
	
	main #container .btn-area .more img {
		width: 100%;
		height: auto;
	}
	
	
	/* shoplist */
	main #container section.shoplist {
		margin-top: 56px;
	}
	
	main #container section.shoplist > h2 {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main #container section.shoplist > .inner {
		padding: 24px 0 45px;
	}
	
	main #container section.shoplist > .inner article {
	}
	
	main #container section.shoplist > .inner article:first-child {
	}

	main #container section.shoplist > .inner article .shopImg {
		position: relative;
		margin: 0 0 15px 0;
	}

	main #container section.shoplist > .inner article .shopImg img {
		width: 100%;
	}

	main #container section.shoplist > .inner article .shopImg h4 {
	    position: absolute;
        background-color: #000;
        text-align: center;
        height: 20px;
        width: 120px;
        padding: 5px 9px 10px;
    }

    main #container section.shoplist > .inner article .shopImg h4 img {
    	height: 19px;
    }

    main #container section.shoplist > .inner article .shopContent .shopName {
        margin: 24px 0 8px 0;
    }

    main #container section.shoplist > .inner article .shopContent h3 {
    	display: inline;
        font-size: 16px;
        line-height: 1.3;
    }

    main #container section.shoplist > .inner article .shopContent p.tag {
    	display: inline;
    	padding: 0px 8px;
        margin: 0px 2px;
        border: 1px solid;
        font-size: 12px;
        vertical-align: 10%;
    }

    main #container section.shoplist > .inner article .shopContent p.content {
    	line-height: 1.5;
        font-size: 14px;
        margin: 0 0 20px 0;
		letter-spacing: 0.05em;
        text-align: justify;
    }

    main #container section.shoplist > .inner article .shopContent .content span {
        font-weight: bold;
        color: #266faf;
        letter-spacing: 0.02em;
    }


    main #container section.shoplist > .inner article .shopContent .info dl dt {
    	font-weight: bold;
    }


    main #container section.shoplist > .inner article .shopContent .info dl dd a {
    	text-decoration: underline 2px #777;
    }
    

    main #container section.shoplist > .inner article .shopContent .info dl {
    	margin: 0 0 10px 0;
         line-height: 1.2;
        letter-spacing: 0.02em;
    }

    main #container section.shoplist > .inner article .shopContent .info dl dd a {
    	text-decoration: underline 1px #777;
    }

    main #container section.shoplist > .inner article .shopContent .info dl dd a:hover {
    	text-decoration: none;
    }

    main #container section.shoplist > .inner .border {
    	height: 1px;
    	width: 100%;
    	background: #CECECE;
    	margin: 30px 0;
    }
	
	/* instagram */
	main section.instagram {
		margin-top: 45px;
		padding: 0 10px;
	}
	
	main section.instagram > h2 {
		margin: 0 37px;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	main section.instagram > h2 img {
		width: auto;
		height: 28px;
	}
	
	main section.instagram > h3 {
		margin: 6px 37px 0;
	}
	
	main section.instagram > h3 img {
		width: auto;
		height: 14px;
		vertical-align: top;
	}
	
	main section.instagram > .inner {
		padding: 17px 0 41px;
	}
	
}


/* movie */
main .movie {
	border-bottom: 3px solid #000;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 70px;
    margin-top: 66px;
}

@media screen and (max-width: 769px) {
	main .movie {
		border-bottom: 2px solid #000;
		margin: 29px 0px 0; 
		padding-bottom: 54px;
	}
}

main .movie a {
	position: relative;
	display: block;
}

main .movie a::after {
	position: absolute;
	top: calc(50% - 58px);
	left: calc(50% - 41px);
	content: "";
	width: 82px;
	height: 116px;
	background: url("../shared/images/movie_play.svg") no-repeat;
	background-size: contain;
	display: block;
}

@media screen and (max-width: 769px) {
main .movie a::after {
    top: calc(50% - 42px);
    left: calc(50% - 26px);
    width: 56px;
}
}

main .movie a img {
	width: 75%;
}

@media screen and (max-width: 769px) {
main .movie a img {
    width: 100%;
}
}

.lity {
    background-color: rgba(0,0,0,0.7) !important;
}