@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	/*padding: 0;*/
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	-webkit-text-size-adjust: 100%;
}

body {
	line-height: 1;
}

img{
	border: 0;
/*	max-width: 100%;*/
	height: auto;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*-------------------------共通部分--------------------------*/
html{
	font-size:100%;
}

body{
	font-family: 'Sawarabi Gothic',sans-serif;
	line-height:1.7;
	color:#332600;
}

a{
	text-decoration:none;
}

h2.page-title{
	font-size:5em;
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: -50px;
  bottom: 50px;
  background: #ef3f40;
  opacity: 0.6;
  border-radius: 50%;
}

#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

#page_top a::before{
  content: '\f102';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*header*/
.logo{
	width:210px;
	margin-top:14px;
	background-position:center top;
}

.main-nav{
	display:flex;
	font-size:1.25em;
	text-transform:uppercase;
	margin-top:34px;
	list-style:none;
}

.main-nav li{
	margin-left:36px;
}

.main-nav a{
	color:#332600;
}

.main-nav a:hover{
	color:#ffbe00;
}

/*-------------------------top------------------------------*/

.page-header{
	display:flex;
	justify-content:space-between;
}

.wrapper{
/*	max-width:1100px;*/
	margin:0 auto;
	padding:0 4%;
}

/*home*/
.home-content{
	text-align:center;
	margin-top:10%;
}

.home-content p{
font-size:17px;
margin:10px 0 42px;
background-color:rgba(255,230,153,0.7);
}

/*見出し*/
.shop-name{
	width:600px;
	height:300px;
	
}

/*button*/
.button{
	font-size:17px;
	background:#ffbe00;
	color:#fff;
	border-radius:5px;
	padding:18px 32px;
}

.button:hover{
	opacity:0.8;
}

.button::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.button:hover::after {
  background:#ffbe00;
  -webkit-transform: scale(1);
  transform: scale(1);
}

#home{
	background-image:url(./img/tennai.gif);
	background-repeat:no-repeat;
	background-size:100% 100%;
	min-height:100vh;
}

#home .page-title{
	text-transform:none;
}

/*footer*/
footer{
	width:100vw;
	background-color:#332600;
	text-align:center;
	padding:26px 0;
}

footer p{
	color:#fff;
	font-size:15px;
}

/*-------------------------------------------
-------------------モバイル版----------------*/
@media screen and (max-width:700px){
	.page-header{
		flex-direction:column;
		align-items:center;
	}
	
	/*header*/
	.main-nav{
	font-size:1rem;
	
	margin-top:10px;
	text-align:center;
	}
	.main-nav li{
	margin:0 20px;
	}
	/*home*/
	.home-content{
	margin-top:10%;
	}
	
	.shop-name{
	width:70%;
	height:70%;
	}
	.logo{
	width:100px;
	margin-top:7px;
	background-position:center top;
	}

}/*-------------------------------------------
------------モバイル版終了タグ----------------*/



/*-------------------------あいさつ--------------------------*/
#hello{
	width:100vw;
	height:100vh;
}
#hello .big-bg{
	height:270px;
	background-image:url(./img/angel.gif);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

#hello-main{
	margin-bottom:40px;
}
#hello-main h2{
	font-size:45px;
	font-weight:normal;
	text-align:center;
	margin-bottom:30px;

}
.w-wrap{
	margin:0 250px 70px 250px;
}

.w-wrap p{
	font-size:18px;
	background-color:#fff;
	background-color:rgba(255,255,255,0.5);
	text-align:center;
	margin-bottom:20px;
}
#hello .wrapper{
	margin:0 auto;
}
.w-wrapper{
	width:100%;
}

/*-------------------------------------------
-------------------モバイル版----------------*/
@media screen and (max-width:700px){
	#hello-main h2{
		font-size:25px;
	}

	.w-wrap{
		margin:0 30px 0 30px;
	}
	.w-wrap p{
		font-size:14px;
	}


}/*-------------------------------------------
------------モバイル版終了タグ----------------*/



/*-------------------------商品紹介--------------------------*/
#goods{
	margin-bottom:40px;
	width:100vw;
}
#goods header{
	background-image:url(./img/aroma.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	height: 270px;
}
#goods .goodstitle{
	position:absolute;
	top:50px;
	left:45%;
}
#goods .page-title{
	text-align:center;
}

.goodstitle .page-title{
	display: block;
}

.goodstitle h2{
color:#ffbe00;
font-family: 'Nanum Pen Script',sans-serif;
}

.inner ul{
display:block;
}

/*グローバルナビのデザイン*/

.inner_g {
    width: 980px;
    margin: 0 auto;
}
.inner_g:after {
    content: "";
    clear: both;
    display: block;
}
 
/* header */
#top-head {
    top: 120px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    padding: 30px 0 0;
    line-height: 1;
    z-index: 999;
    
}
#top-head a,
#top-head {
	color: #ffbe00;
	 text-shadow:-1px -1px 0 #332600 1px 1px 0 #ffbe00;
}

#global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 20px;
    
}
#global-nav ul li {
    float: left;
        color: #ffbe00;
    text-shadow:-1px -1px 0 #332600 1px 1px 0 #ffbe00;
    font-weignt:bold;

}
#global-nav ul li a {
    padding: 0 30px;
}
 
/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    height: 68px;
    background: #fff;
    background: rgba(255,255,255,.5);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}

#top-head.fixed #global-nav ul li a {
        color: #ffbe00;
    text-shadow:-1px -1px 0 #332600 1px 1px 0 #ffbe00;
        font-weignt:bold;

    padding: 0 20px;
}
 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #664d00;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

/*複数のimgを重ねて表示*/
#onion{
	position:relative;
	width:300px;
}
#pot{
	position:relative;
	width:300px;
}
#glass{
	position:relative;
	width:300px;
}
#magnet{
	position:relative;
	width:300px;
}
#penstand{
	position:relative;
	width:300px;
}
#sockstar{
	position:relative;
	width:300px;
}



img.on{
	position:absolute;
	top:0;
	width:300px;
}
img.off{
	position:absolute;
	top:0;
	width:300px;
}
#onion:hover img.off{
	display:none;
}
#pot:hover img.off{
	display:none;
}
#glass:hover img.off{
	display:none;
}
#magnet:hover img.off{
	display:none;
}
#penstand:hover img.off{
	display:none;
}
#sockstar:hover img.off{
	display:none;
}


h2.section_title{
width:1000px;
margin:0 auto;
margin-top: 20px;
clear:both;

}

.section_title span{
display:flex;
justify-content:flex-start;

}
.box {   /* 商品画像・商品名・説明文の囲み */
	background-color:rgba(255,230,153,0.8);
	display:flex;
	justify-content:space-around;
	margin: 0;
	margin-bottom: 30px;
	overflow: hidden;
	padding:20px;

}
.box img{   /* 商品画像 */
	margin: 0;
	margin-right: 20px;
	float: left;
}
.item_text {   /* 商品名と説明文の囲み */
	width: 480px;
	float:right;
}

.inner {
	margin: 0 auto;
	width: 1000px;
}

p.item_title{
font-size:1.5em;
border-bottom:#ffbf00 solid 5px;
}

p.item_cutline{
font-size:0.95em;
line-height:2;
margin:10px 0 0 0;
}

/*-------------------------------------------
-------------------モバイル版----------------*/
@media screen and (max-width:700px){
	#contents{
		max-width:500px;
		padding-left:10px;
		padding-right:10px;
		margin:0 auto;
	}
	#contents:after{
	content:"";
	display:block;
	clear:both;
	}

	#goods header{
		background-image:url(./img/aroma.jpg);
		background-repeat:no-repeat;
		background-position:center top;
		background-size:cover;
		text-align:center;
		position:relative;
	}
	#goods .goodstitle {
		top:125px;
		left: 30%;
	}
	img.on {
		left:0;
	}
	img.off {
		left:0;
	}
	#onion+.item_text,
	#pot+.item_text,
	#glass+.item_text,
	#magnet+.item_text,
	#penstand+.item_text,
	#sockstar+.item_text{
		padding-top:260px;
	}
	.item_text {
	    width: 100%;
	    clear:both;
	}
	.item_bg_k,
	.item_bg_t,
	.item_bg_s,
	.item_bg_g {
		margin-bottom: 50px;
	}

	.box {   /* 商品画像・商品名・説明文の囲み */
		display: inline-block;
		margin-bottom: 20px;
		padding: 10px;
		background-color: rgba(255,255,255,0.6);
	}

	.box img{   /* 商品画像 */
		margin-bottom: 20px;
		text-align: center;
	}
	img.off{   /* 商品画像 */
		margin-bottom: 20px;
		text-align: center;
	}

	.item_title {   /* 商品名 */
		width: 100%;
		font-size:;
		line-height: 1.2;
		font-weight: bold;
		border-top: 1px solid #8c8b79;
		border-bottom: 1px solid #8c8b79;
		padding: 0.5em 0 0.4em;
		margin-bottom: 10px;
		text-align: center;
	}
	p.item_title{
	font-size:21px;
	}

	.item_cutline{   /* 商品の説明文 */
		font-size: 14px;
		line-height: 1.7;
		/*text-align: justify;/*説明文のセンタリング解除*/
	}
	
	.inner {
		margin: 0 auto;
		width: 100%;
	}
/*グローバルナビのデザイン*/
  #top-head,
.inner_g {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
    background: #fff;
    background: rgba(255,255,255,.1);
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #664d00;
        font-size: 26px;
    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        background: rgba(255,243,184,.9);
        border:#ffd966 10px solid;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 20px;
    }
    
    #global-nav #menu{
	padding:5px;
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #332600;
        padding: 18px 0;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }

	h2.section_title{
		width:100%;
	}
	h2.section_title img{
		width:60%;
	}
}/*-------------------------------------------
------------モバイル版終了タグ----------------*/



/*--------------------地図・問い合わせ----------------------*/
#contact{
	background-image:url(./img/contact.gif);
	background-size:100% 100%;
	background-repeat:no-repeat;
	min-height:100vh;
}
#contact .page-header.wrapper .main-nav{
	display:flex;
	font-size:1.25em;
	text-transform:uppercase;
	margin-top:34px;
	list-style:none;
	float:right;
}
#contact .page-header.wrapper .main-nav li{
	margin-left:36px;
}
#contact .page-header.wrapper .main-nav a{
	color:#fff;
	text-shadow:0 0 3px #000;
}
#contact .page-header.wrapper .main-nav a:hover{
	color:#ffbe00;
}



#contact .wrapper .page-title{
color:#ffbe00;
font-family: 'Nanum Pen Script',sans-serif;
}

.box{
margin:0;
margin-bottom:20px;
overflow:hidden;
}

/*フォーム*/
form div{
margin-bottom:14px;
}

label{
	font-size:17px;
	margin-bottom:10px;
	display:block;
	text-shadow:1px 1px 0 rgba(255, 255, 255,0.6),-1px 1px 0 rgba(255, 255, 255,0.6),1px -1px 0 rgba(255, 255, 255,0.6),-1px -1px 0 rgba(255, 255, 255,0.6);
}

input[type="text"],
input[type="email"],
textarea{
	background:rgba(255,255,255,0.5);
	border:1px #fff solid;
	border-radius:5px;
	padding:10px;
	font-size:16px;
}

input[type="text"],
input[type="email"]{
	width:100%;
	max-width:240px;
}

textarea{
	width:100%;
	max-width:480px;
	height:96px;
}
input[type="submit"]{
	border:none;
	cursor:pointer;
	line-height:1;
}

/*店舗情報・地図*/
#location{
	padding:4% 0;
}
#location:after{
	content:"";
	clear:both;
	display:block;
}
#location .wrapper{
	display:flex;
	justify-content:space-between;
	height:500px;
}
.location-info{
	width:22%;
}
.location-info p{
	padding:12px 10px;
	line-height:1.8;
}
.location-map{
	width:74%;
	float:right;
}

/*-------------------------------------------
-------------------モバイル版----------------*/
@media screen and (max-width:700px){
#contact{
	background-image:url(./img/contact.gif);
	background-size:cover;

	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
	text-align:center;
	position:relative;
}
#contact,#location{
	max-width:90%;
	padding-left:5%;
	padding-right:5%;
	margin:0 auto;
}

	#contact .page-header.wrapper .main-nav li{
		margin:0;
		margin:0 20px;
	}
	/*header*/
	#contact .main-nav{
	/*width:100vw;*/
	margin-top:10px;
	padding:0;
	}
	#contact ul .main-nav{
	margin-left:auto;
	margin-right:auto;

}
	#contact .main-nav li a{
	font-size:1rem;
	}
	/*home*/
	.home-content{
	margin-top:20%;
	}
	/*Google Map
	--------------------*/
	#location .wrapper {
     display: block;
    }
    
	.location-map{
		border:#d8c7a0 1px solid;
		position:relative;
		padding-bottom:50%;
		clear:both;;
		width:100%;
	}

	.location-map iframe{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
	}
	/*introduction*/
	#location{
		margin-bottom:40px;
		padding:20px 10px;
	}


	.location-info{
		width: 100%;
		margin-bottom:20px;
		font-size:100%;
	}

}/*-------------------------------------------
------------モバイル版終了タグ----------------*/