@charset "utf-8";

/*
=======================================
  Reset CSS
=======================================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
  margin:0;
  padding:0;
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section{
  display:block;
}

html{
  -webkit-text-size-adjust: 100%;
}
*{
	box-sizing: border-box;
}
img{
  border: 0;
 max-width: 100%;
 height: auto;
}

ul,ol{
  list-style-type: none;
}

table {
  border-collapse: collapse; 
  border-spacing: 0;
}

img, input, select, textarea { 
  vertical-align: middle;
}
*::before,::after{
	box-sizing: inherit;
}
a{
	text-decoration: none;
}
a:hover,.more:hover{
	cursor: pointer;
}
.g-nav a:hover,footer a:hover{
	opacity: .8;
	color: #e5a4a4;
}


/*
=========================================
  Base Layout（フォント・リンクは基本スタイルを用意する）
=========================================
*/

body{
	font-family: sans-serif;
}
h2{
	font-family: 'Patua One', cursive;
}



/*header
--------------------*/
header{
	width: 100%;
	height: 100px;
	text-align: center;
	position: fixed;
	top: 0;
	z-index: 9998;
}
header h1{
	background-color: #f4ede0;
	padding: 10px 0;
}
#main_top{
	height: 80px;
	width: 250px;
}
header nav{
	max-width: 100%;
	background: #fff;
}

/*global navigation
--------------------*/
.g-nav{
	font-size: 21px;
	display: flex;
	background: #fff;
	padding-top: 5px;
}
@media screen and (max-width: 420px){
	#main_top{
	width: 260px;
	height: auto;
	}
	.g-nav{
	font-size: 16px;
	}
}


.g-nav li {
	display: inline-block;
	font-family: 'Patua One', cursive;
	width: 33.333%;
	padding: 5px 0 10px 0;
}


header .icon-twitter{
	margin-left: 20px;
}

.g-nav a{
	color: #967373;
}
@media screen and (min-width: 768px) {
	.g-nav{
	justify-content: center;
	}
	.g-nav li {
	width: 193px;
	}
}

/*footer
--------------------*/
footer{
	background-color: #d7cebb;
	text-align: center;
	margin-top: 25px;
	height: 125px;
}
footer nav{
	font-size: 23px;
	position: relative;
	bottom: -30px;
}
footer p{
	position: relative; 
	bottom: -45px;
}
.icon-sns2 li{
	display: inline-block;
}
.icon-sns2 li a{
	padding : 8px;
	background-color: #fff;
	border-radius: 18px;
	color: #967373;
}
footer small{
	font-size: 70%;
}
/*main-section
--------------------*/

section, .g-nav{
	max-width: 940px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}
section h2{
	text-align: center;
	font-size: 1.2em;
	color: #967373;
}

/*News-section
--------------------*/
.info-new h2{
	margin-top:45px;
}

span.kawaii{
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 1.3em;
	color : #000;
	position: relative;
	top: -5px;
}
.line_h2{
	transform-origin: (50% 50%);
	width:300px;
	position: relative;
	top: -40px;
}
/*--------------dl---------------*/

.info-list{
	display: flex;
	flex-wrap: wrap;
}
.info-list dt{
	width: 30%;
	padding: 10px 0;
	border-top: 1px dotted #dec1b5;
}
.info-list dd{
	width: 70%;
	padding: 10px 0px;
	border-top: 1px dotted #dec1b5;
}
.info-list dd:last-child, .info-list dt:nth-last-child(2){
	border-bottom: 1px dotted #dec1b5;
}
@media screen and (min-width: 460px) {
	.info-list{
	max-width: 500px;
	margin: 0 auto;
	}
}
/*info-ltem
--------------------*/
.info-ltem h2{
	margin-top:95px;
}
/*grid
--------------------*/
.grid{
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto;
	 grid-template-areas:
        "header header "
        "nav contents"
        "areaA areaC";
	gap: 10px;
}
.grid img{
	border-radius: 20px;
}
.grid1{
	grid-area:header;
}
.grid2{
	grid-area: nav;
}
.grid3{
	grid-area: contents;
}
.grid4{
	grid-area: areaA;
}
.grid5{
	grid-area: areaC;
}

@media screen and (min-width: 760px) {
	.grid{
	width:740px;
	margin: 0 auto;
	grid-template-columns: 385px auto auto;
	grid-template-rows:  auto auto;
	grid-template-areas:
        "header nav contents"
        "header areaA areaC";
	}
	.grid1{
	grid-row: 1 / 3;
	}
}
/*kategori-
--------------------*/
.kategori- h2{
	margin-top:95px;
}
#new_im{
	z-index: 21px;
	width: 38%;
	position: relative;
	bottom: -30px;
	right: 40px;
}
@media screen and (min-width: 768px) {
	#new_im{
	z-index: 21px;
	width: 200px;
	}
}
/*---------- item list ----------*/

.kategori- p{
	float: right;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 1.5rem;
	text-align: right;
	font-weight: bold;
	padding: 0 10px 5px 25px ;
	margin:18px 20px 60px 0;
	border-bottom: 3px dashed #967373;
	width:170px;
	background: url(../img/ico_p.png) no-repeat left center ;
	background-size: contain;
	position: relative;
	right: -15px;
	padding-right: 8px;
}

.kategori- p a,.kuwasiku{
	color: #000;
}

.shop-info h2{
	clear: both;
}


/*---------- 矢印 ----------*/
.slider .slick-next{
    right:0!important;
}
.slider .slick-prev{
    left:0!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 30px!important;
}

/*shop info
--------------------*/

.shop-info .kuwasiku{
	float: right;
	font-weight: bold;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 1.3rem;
	border-bottom: 3px dashed #967373;
	width: 210px;
	padding: 5px 0 5px 25px;
	background: url(../img/ico_p.png) no-repeat left center ;
	background-size: contain;
	margin-bottom: 25px;
	text-align: right;
}

.yokoni{
	text-align: center;
}
.shop_ico{
	border-radius: 50%;
	width: 300px;
}
.flex-info{
	margin: 45px 0 15px 0;
	width: 80%;
	display: inline-block;
}
.flex-info dt{
	margin: 3px 0;
}
.flex-info dd{
	margin: 10px 0 10px 0;
	line-height: 1.3;
	letter-spacing: 1.2px;
}

@media screen and (max-width: 420px){
	small{
		font-size: 0.7px;
	}
}
@media screen and (min-width: 768px) {
	.kuwasiku{
	position: relative;
	}
	.left_go{
	left: -50px;
	}
	.yokoni{
	width: 768px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	}
	.shop_ico{
	width: 350px;
	height: 350px;
	margin: 10px 0;
	}
	.flex-info{
	width: 335px;
	font-size: 1.1em;
	margin-top: 40px;
	}
}
/*top
-------------------------*/
.pagetop{
  z-index: 1000;
  width: 50px;
  height: 50px;
  position: fixed;
  right: 30px;
  bottom: 70px;
}
.pagetop a{
	text-decoration: none;
	color: #59220d;
}
.pagetop a {
  display: block;
  width: 45px;
  height: 45px;
  padding-top: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(211,167,90,0.8);
  border-radius: 50%;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
}
.pagetop a:hover {
  background: rgba(211,167,90,0.5);
  color: #59220d;
}
.pagetop a::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-top: 1px solid #59220d;
  border-right: 1px solid #59220d;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media screen and (min-width: 768px) {
	.pagetop{
	 right: 10%;
	}
}
/*sns-ico
--------------------*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?6afslv');
  src:  url('fonts/icomoon.eot?6afslv#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6afslv') format('truetype'),
    url('fonts/icomoon.woff?6afslv') format('woff'),
    url('fonts/icomoon.svg?6afslv#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-instagram::before {
  content: "\ea92";
}
.icon-twitter::before {
  content: "\ea96";
}
/*clearfix*/
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}
.cfx:before,
.cfx:after {
	content: " ";
	display: table;
}
.cfx:after {clear: both;}
.cfx {*zoom: 1;}






/**/


/**/


/**/


/**/


/**/


/**/