@charset "utf-8";


html     ,
body     ,
article  ,
section  ,
div      ,
h1       ,
h2       ,
h3       ,
h4       ,
h5       ,
dl       ,
dt       ,
dd       ,
ul       ,
ol       ,
li       ,
p        ,
input    ,
select   ,
textarea ,
submit   ,
button   {
	margin:0;
	padding:0;
	font-family: 'Noto Sans JP', 'Noto Serif JP', "ヒラギノ角ゴ Pro W3", "メイリオ", serif;
	color: #1e204b;
	font-size: 15px;
	font-feature-settings: "palt"1;
	line-height: 1.8;
	letter-spacing: 0.15em;
	-webkit-text-size-adjust: 100%;
	border:none;
}

.en                                       ,
.PCnav ul a                               ,
.top-fixed-pc ul li a                     ,
#index header h2                          ,
.news a span                              ,
.newitem a span                           ,
#news ul.pager li                         ,
.newitem ul li h3 span                    ,
.news-detail h3                           ,
#menu section > div h3                    ,
#menu section > div ul li b               ,
#cafe h3                                  ,
.drink-menu dl dt                         ,
.drink-menu dl dd table th:nth-of-type(2) ,
.drink-menu dl dd table th:nth-of-type(3) ,
.drink-menu dl dd table td                ,
#infection-control section > div h3       ,
#shop ul.lineupBox li b                   ,
#shop ul.lineupBox li p.price             ,
.shop-page h2                             ,
.SPnav nav ul li a                        ,
footer small {
    font-family: 'Crimson Text', serif;
    letter-spacing: 0.05em;
}

@media only screen and (max-width:640px){
    
    html     ,
    body     ,
    article  ,
    section  ,
    div      ,
    h1       ,
    h2       ,
    h3       ,
    h4       ,
    h5       ,
    dl       ,
    dt       ,
    dd       ,
    ul       ,
    ol       ,
    li       ,
    p        ,
    input    ,
    select   ,
    textarea {
        font-size:24px;
    }
}



html {
	overflow-y:scroll;
	margin-bottom:1px;
	height:100%;}


body {
	background:#f4f3f0;
}


img {
	margin:0;
	padding:0;
	vertical-align:bottom;
	line-height:0;
	border:none;
    -webkit-backface-visibility: hidden;}


svg {
	fill:currentColor;}


ul ,
ol {
	list-style:none;}

li {
	list-style-position:outside;}


table {
	border-collapse:collapse;}


th ,
td {
	padding:0;
	text-align:left;
	vertical-align:top;}


a {
	color:#1e204b;
	text-decoration:none;
	transition: .2s;}


a:hover {
	opacity: .6;}


p {
	text-align:justify;
	text-justify:inter-ideograph;}


/* iOSでinput要素にcssが効かないときの対応 */
* {-webkit-appearance: none;}


::selection {
	background:#e1e1e1;}

/* for Firefox */
::-moz-selection {
	background:#e1e1e1;}



@media only screen and (min-width:641px){

    .sp ,
    .navToggle ,
    .SPnav { display:none;}
}

@media only screen and (max-width:640px){
    
    .pc ,
    header > nav ,
    .top-fixed-pc { display:none !important;}

}





/* -------------------------------------------------- */





/* header */

header {
    width:100%;
    display:flex; flex-flow:row wrap; justify-content:flex-end; align-content:flex-end; align-items:flex-end;
    position:relative;
    border-top:solid 3px #1e204b;
}
header a.tab-onlineshop {
    width:55px;
    position:fixed; top:20%; right:0;
    z-index: 10000;
}
header a.tab-onlineshop img {
    max-width:100%;
}

#index header h1 {
    width:30%;
    position:absolute; top:3%; left:4%;
}

.page2nd header {
    height:150px;
}
.page2nd header h1 {
    width:25%;
    position:absolute; top:20%; left:5%;
}

#index header .main {
    width:90%;
    margin:17% 0 0;
    position:relative;
    z-index: -1;
}
#index header .main img {
    max-width:100%;
    margin: 0;
    border-radius: 30px 0 0 30px;
}
#index header h2 {
    width:100%;
    margin: 80px 0 0;
    font-size: 1.3rem;
    text-align: center;
}

@media only screen and (max-width:640px){
    
    header {
        height:330px;
        display:flex; flex-flow:row wrap; justify-content:flex-end; align-content:flex-end; align-items:flex-end;
    }
    header h1 {
        width:63%;
        position:absolute; top:7%; left:5%;
    }
    header a.tab-onlineshop {
        width:65px;
        top:50%;
    }
    
    #index header {
        height:auto;
    }
    #index header h1 {
        width:55%;
        position:absolute; top:5%; left:5%;
    }
    #index header .main {
        width:96%;
        margin:33% 0 20px;
        overflow:hidden;
    }
    #index header .main img {
        max-width:100%;
        margin: 0;
        border-radius: 10px 0 0 10px;
    }
    #index header h2 {
        margin: 30px 0 0;
        font-size: 0.9rem;
    }
    .page2nd header {
        height:180px;
    }
    .page2nd header h1 {
        width:50%;
    }
}





/* PCnav */

.PCnav {
    position:absolute; top:50px; right:5%;
    z-index: 10000;
}
.PCnav ul {
    display:flex; flex-flow:row wrap; justify-content:flex-end; align-content:center; align-items:center;
}
.PCnav ul li {
    margin:8px 0 8px 30px;
}
.PCnav ul li a {
    font-size:1.2rem;
    font-weight: 700;
}

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

    .PCnav {
        width:60%;
    }
}





/* .top-fixed-pc */

.top-fixed-pc {
    width:100%;
    padding: 15px 0 12px;
    position:fixed; top:0; left:0;
    background:#1e204b;
    z-index: 2000;
}
.top-fixed-pc ul {
    width:90%;
    margin: 0 auto;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
.top-fixed-pc ul li {
    margin: 0 15px;
}
.top-fixed-pc ul li a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}





/* more */

a.more {
    width:290px;
    margin: 0 auto;
    padding: 10px 10px 10px 0;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    text-align:center;
    position: relative;
    border-radius:100px;
    border: solid 1px #1e204b;
    background:#fff;
}
a.more::before {
    content: "";
    width: 9px;
    height:9px;
    margin:auto;
    position:absolute; top:0; bottom:0; right:30px;
    vertical-align: middle;
    border-top: 1px solid #1e204b;
    border-right:1px solid #1e204b;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .3s;
}
a.more:hover {
    opacity: 1;
    color: #fff;
    background:#1e204b;
}
a.more:hover::before {
    right:20px;
    border-top: 1px solid #fff;
    border-right:1px solid #fff;
}

.about a.more {
    color: #aa8226;
    border: solid 1px #aa8226;
}
.about a.more::before {
    border-top: 1px solid #aa8226;
    border-right:1px solid #aa8226;
}
.about a.more:hover {
    color: #fff;
    background:#aa8226;
}
.about a.more:hover::before {
    border-top: 1px solid #fff;
    border-right:1px solid #fff;
}

@media only screen and (max-width:640px){
    
    a.more {
        width:68%;
        margin: 0 auto;
        padding: 15px 10px 15px 0;
        border: solid 2px #1e204b;
    }
    a.more::before {
        width: 15px;
        height:15px;
        position:absolute; top:0; bottom:0; right:30px;
        border-top: 2px solid #1e204b;
        border-right:2px solid #1e204b;
    }
    a.more:hover {
        opacity: 1;
        color: #fff;
        background:#1e204b;
    }
    a.more:hover::before {
        right:20px;
        border-top: 2px solid #fff;
        border-right:2px solid #fff;
    }

    .about a.more {
        border: solid 2px #aa8226;
    }
    .about a.more::before {
        border-top: 2px solid #aa8226;
        border-right:2px solid #aa8226;
    }
    .about a.more:hover::before {
        border-top: 2px solid #fff;
        border-right:2px solid #fff;
    }
}





/* news */

.news ul {
    width:80%;
    max-width:960px;
    margin:0 auto;
    display:flex; flex-flow:row wrap; justify-content:flex-start; align-content:stretch; align-items:stretch;
}
.news ul li {
    width:28%;
    margin: 0 2% 0 3%;
    position:relative;
    transition: .3s;
}
.news ul li a {
    display:block;
    position: relative;
}
.news ul li.category-news a:after {
    content:"News";
    width: 70px;
    height:70px;
    font-family: 'Crimson Text', serif;
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #fff;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    position:absolute; top:-10px; left:-10px;
    border-radius: 50%;
    background:#aa8226;
}
.news ul li.category-newitem a:after {
    content:"新商品";
    width: 70px;
    height:70px;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #fff;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    position:absolute; top:-10px; left:-10px;
    border-radius: 50%;
    background:#f54664;
}
.news ul li:hover {
    margin-top:-10px;
    margin-bottom:10px;
    opacity: 1;
}
.news ul li div {
    width: 100%;
    height:180px;
    margin: 0 auto 10px;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    border-radius: 10px;
    overflow: hidden;
}
.news ul li img {
    max-width:100%;
    border-radius: 10px;
}
.news ul li h3 {
    width:80%;
    margin: 0 auto 50px;
    display: block;
    font-weight: 400;
    text-align:center;
    line-height: 1.5;
}
.news ul li h3 span {
    margin: 0 0 10px;
    display: block;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
}

@media only screen and (max-width:640px){
    
    .news ul {
        margin: 50px auto;
    }
    .news ul li {
        width:100%;
        margin: 15px 0 0;
    }
    .news ul li a {
        display:flex; flex-flow:row wrap; justify-content:space-between; align-content:stretch; align-items:stretch;
    }
    .news ul li.category-news a:after {
        width: 100px;
        height:100px;
        font-size: 1.2rem;
        letter-spacing: 0;
    }
    .news ul li.category-newitem a:after {
        width: 100px;
        height:100px;
        font-size: 0.9rem;
        letter-spacing: 0;
    }
    .news ul li:hover a {
        margin-top:-10px;
        margin-bottom:10px;
        opacity: 1;
    }
    .news ul li div {
        width: 80%;
        height:250px;
        margin: 0 auto 10px;
        display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
        border-radius: 10px;
        overflow: hidden;
    }
    .news ul li h3 {
        width:80%;
        margin: 0 auto 30px;
        line-height: 1.5;
    }
    .news ul li h3 span {
        margin: 0;
        display: block;
        font-size: 1.1rem;
        letter-spacing: 0.15em;
    }
}





/* page2nd */

.page2nd section {
    width:94%;
    margin: 50px auto 0;
    padding:60px 0;
    border-radius: 15px;
    background:#fff;
}
.page2nd section h2 {
    width:80%;
    margin: 0 auto 30px;
    font-size:1rem;
    font-weight: 400;
    text-align: center;
}
.page2nd section h2 span {
    display: block;
    font-size: 3.5rem;
    text-align: center;
    line-height: 1.2;
}


@media only screen and (max-width:640px){
    
    .page2nd section {
        margin: 30px auto 0;
        padding:50px 0;
    }
    .page2nd section h2 span {
        font-size: 2.8rem;
    }
}





/* footer */

footer {
    width:100%;
    margin:0 auto;
    padding:100px 0 80px;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:center; align-items:center;
}

footer ul.sitemap {
    width:100%;
    margin: 0 auto 80px;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
footer ul.sitemap li {
    position:relative;
}
footer ul.sitemap li a:after {
    content: "";
    width: 1px;
    height:18px;
    margin:auto;
    position:absolute; top:0; bottom:0; left:0;
    background:#1e204b;
}
footer ul.sitemap li:nth-of-type(1) a:after {
    display: none;
}
footer ul.sitemap li a {
    padding:10px 18px;
    line-height: 1;
}

footer p.en {
    width:100%;
    margin: 20px 0 0;
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.3;
}
footer p.en a {
    margin: 0 auto 30px;
    padding: 5px 0;
    font-size: 3rem;
    text-align: center;
    letter-spacing: 0;
}

footer .boxR {
    width:44%;
}
footer table {
    margin: 0 auto;
}
footer table tr {
    display: block;
    border-bottom: solid 1px #ddd;
}
footer table tr:last-of-type {
    border:none;
}
footer table th ,
footer table td {
    padding: 10px 0;
}
footer table th {
    width:90px;
    font-weight: 400;
}
footer table td {}
footer table td a {
    display:block;
    color:#f54664;
    text-decoration: underline;
}

footer iframe {
    width:55%;
    height:350px;
    margin:50px 0;
    display: block;
    border-radius: 0 20px 20px 0;
    border:none;
}
footer small {
    width:100%;
    display:block;
    font-size: 1.2rem;
    text-align: center;
}

@media only screen and (max-width:640px){
    
    footer {
        padding:80px 0 50px;
    }
    footer ul.sitemap {
        width:70%;
    }
    footer ul.sitemap li {
        width:100%;
        padding: 8px 0 12px;
        border-bottom:solid 1px #1e204b;
        position:relative;
    }
    footer ul.sitemap li a:after {
        display: none;
    }
    footer ul.sitemap li a {
        padding:10px 18px;
        line-height: 1;
    }
    footer p.en {
        font-size: 1.2rem;
        order:1;
    }
    footer p.en a {
        font-size: 2rem;
        letter-spacing: 0;
    }
    footer .boxR {
        width:100%;
        margin: 30px 0 0;
        order:2;
    }
    footer table th {
        width:150px;
    }
    footer iframe {
        width:100%;
        height:450px;
        margin:30px 0;
        border-radius:20px;
        order:3;
    }
    footer small {
        order:4;
    }
}





/* ----------------------------------------
	SPnav
   ---------------------------------------- */

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

	.SPnav {
		width:100%;
		position: fixed;
		top: 0;
		left:0;
		opacity:0;
		transition:all 0.6s;
        z-index:2000;
	}

	/* クラスをjQueryで付与・削除 */
	.SPnav {opacity:0;}
	.SPnav .clickOpen { display:none !important;}
	.SPnav.active { height: 100vh; opacity:1;}
	.SPnav.active .clickOpen { display:block !important; z-index:10000;}
	
	.clickOpen {
		width:90%;
        height:95%;
		margin:5% auto 0;
        border-radius:15px;
        background-color: rgba(253,253,253,0.9);
	}
    .SPnav nav ul {
        width:70%;
        margin: 0 auto;
        padding-top: 50px;
    }
    .SPnav nav ul li {
        width:100%;
        margin:20px 0 0;
    }
    .SPnav nav ul li a {
        font-size: 1.2rem;
    }
    .SPnav nav ul li:nth-of-type(1) a {
        color:#f54664;
    }
    
    .shop-page .SPnav nav ul li a {
        font-size: 1.1rem !important;
        font-family: 'Noto Sans JP', 'Noto Serif JP', "ヒラギノ角ゴ Pro W3", "メイリオ", serif;
    }
    .shop-page .SPnav nav ul li.click-cart {
        padding-top: 20px;
    }
    .shop-page .SPnav nav ul li.click-cart a {
        padding: 8px 30px;
        color: #fff;
        letter-spacing: 0.1em;
        border-radius:100px;
        background:#f54664;
    }

	.navToggle {
		width: 60px;
		height:60px;
		display:block;
		text-align:center;
		position:fixed;
		right:35px;
		top:30px;
		cursor:pointer;
		z-index:10000;}

	.navToggle span {
		width:55px;
		display:block;
		position:absolute; /* .navToggleに対して */
		left:6px;
		border-bottom:solid 7px #aa8226;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}

	.navToggle span:nth-child(1) {top:10px;}
	.navToggle span:nth-child(2) {top:25px;}
	.navToggle span:nth-child(3) {top:40px;}
	.navToggle span:nth-child(4) {top:55px; border:none; color:#eee; font-size:9px; font-weight:bold;}

	/* span(1)を-45度 */
	.navToggle.active span:nth-child(1) {
		top:18px;
		left:6px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/* span(2)(3)を45度 */
	.navToggle.active span:nth-child(2),
	.navToggle.active span:nth-child(3) {
		top:18px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}