@charset "UTF-8";
/* --------------------------------
 * base
 * -------------------------------- */
html {
	font-size: 62.5%;
}
body {
	text-align: center;
	font-size: 2.0rem;
	font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}
html, body {
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	white-space:nowrap;
}
*, *::before, *::after {
 box-sizing: border-box;
}
.logo {
	position: fixed;
	top:0;
	left:0;
	display:block;
}
.hidden {
	display:none;
}
.block {
	display:block;
}
.image {
	display:block;
	margin:0;
	padding:0
}
a:link {
	color:#3B86C8;
}
a:link, a:visited, a:hover, a:active {
	text-decoration:none;
}
a:visited {
	color:#3B86C8;
}
a:hover {
	color:#666;
}
 h1::before, h1::after {
 content: '';
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
}
h1 {
	font-size:8rem;
}
h2 {
	font-size:5rem;
}
h3 {
	font-size:2.5rem;
	margin:20px 20px;
}
p {
	margin: 0 10px;
	line-height:2;
}
.blue {
	color:#069;
}
.wh {
	color:#FFF;
}
.gray {
	color:#333;
}
.left {
	text-align:left;
}
.fleurs {
	background:url(../images/beach/P2.jpg);
	background-size:cover;
}
.la-mer {
	background:url(../images/beach/mer.jpg);
	background-size:cover;
}
.papyrus {
	background: url(../images/paper.png) repeat fixed center bottom;
	background:opacity 1.0;	
}
/*---------------------------------
 *ローディング
 *----------------------------------*/
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #FFF;
	z-index: 1;
}
#loader {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
	text-align: center;
	color: #fff;
	z-index: 2;
}
/* --------------------------------
 * parts"Bodoni",
 * -------------------------------- */
.heading {
	position: relative;
	display: block;
	margin: 50px 0 15px;
	padding-bottom: 15px;
	letter-spacing: 2px;
	font-family: "serif", "Century", "Hiragino Kaku Gothic ProN", " Meiryo";
}
/*---------------------------
 * サイトメニュー
 *---------------------------*/
.menu {
	list-style-type:none;
	display:flex;
	justify-content: center;
	align-items: center;
	background-color: #3B86C8;
}
.button {
	width: 200px;
	padding:10px;
	font-weight:bold;
	background-color: #FFF;
	border: solid 1px #3B86C8;
	border-left: solid 4px #3B86C8;
	border-right: solid 4px #3B86C8;
	color: #3B86C8;
	text-decoration:none;
	letter-spacing: 1px;
     transition: .4s;
	text-align: center;
	align-items: center;
	margin:3px;
}
.button :hover {
	background-color: #3B86C8;
	color:#FFF;
}
.showy {
	background-color:#FFF;
	color:#F63;
}
.button-ghost {
	border: 1px solid #fff;
	background-color: rgba(255, 255, 255, 0.15);
}
/* --------------------------------
 * header background:url('../images/banner1.png') no-repeat fixed left bottom;
 * -------------------------------- */
.header {
	padding: 200px 30px 80px;
	background: linear-gradient(to bottom, #EFEA3A 0%, #28b0D6 100%);
	opacity: 0.5;
	animation: huerotator 60s infinite alternate;
}
 @keyframes huerotator {
 0% {
 -webkit-filter: hue-rotate(0deg);
 filter: hue-rotate(0deg);
}
 100% {
 -webkit-filter: hue-rotate(360deg);
 filter: hue-rotate(360deg);
}
}
.header {
	display:grid;
	grid-template-rows:400px;
	grid-template-columns:2000px;
	justify-content:center;
	background-size:cover;
}
.header-box {
	grid-row:1/1;
	grid-column:1/1;
	background:url(../images/banner.png);
	background-size:cover;
}
/* --------------------------------
 * about
 * -------------------------------- */
.about {
	margin:0 auto;
	padding: 80px 30px;
	background:url(../images/bg.png);
	color: #333;
}
.about-text {
	line-height:2.0;
	color:#666;
	white-space:nowrap;
}
/*--------------------------------
 * section
 *-------------------------------*/
.daymap,.works,.magazin{
	padding:80px 0;
}
/* --------------------------------
 * wrapper
 * -------------------------------- */
.like-flex,.daymap-wrapper,.magazin-wrapper,.menus-wrapper {
	display:flex;
	display: -webkit-flex;
	flex-wrap:wrap;
	width:80%;
	margin:0 auto;
	padding:30px 0;
	justify-content:center;
}

.wrapper{width:80%;
margin:0 auto;
padding:30px 0}
/* --------------------------------
 * box
 * -------------------------------- */
.menu-box {
	width:300px;
	margin: 10px;
	padding:15px;
	flex: 1;
}
.magazin-box,.daymap-cell{
	/*vertical-align:middle;*/
	position:relative;
	margin:0 10px auto;
	flex:1;
	z-index:1;
}


.like-flex-cell {
	margin: 10px;
	padding:15px;
	flex: 1;
}
.like-flex-cell img {
	margin:0 auto;
}

/* Button Styles */

.like, .icon-cover, .like a {
	width:56px;
	height:56px;
 -webkit-transition: all .35s ease-out;
 -moz-transition: all .35s ease-out;
 -ms-transition: all .35s ease-out;
 transition: all .35s ease-out;
}
.like {
	position:relative;
	margin:0 auto;
}
.like a {
	position: relative;
	margin:0 0 10px;
	display:block;
	width:100%;
	height:100%;
	color:#FFF;
	line-height:56px;
}
.like img {
	text-align:center;
	vertical-align: middle;
	margin-top: 3px;
}
.icon-cover {
	position:absolute;
	top:0;
	left:0;
}
.icon-cover a {
	position: static;
	background-color:#48d1cc;
}
.like a, .icon-cover a {
	text-decoration: none;
	text-align: center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.count {
	background-color: #20B2AA;
}
.fill {
	display:none;
}
.like.liked .icon-cover a .fill {
	display:block;
}
.like.liked .icon-cover a .empty {
	display:none;
}
.like.liked .icon-cover a {
	background-color: #E87A90;
}
/* Button Hover Styles */

.like:hover .icon-cover {
	top:-50px;
}
.btns .btn {
	margin: 10px;
}
.category {
	margin-left:10%;
	padding:30px 0;
	letter-spacing: 1px;
	font-family: "Trebuchet MS", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	text-align:left;
	white-space:nowrap;
	line-height:3;
}
/*円をあらわす*/
.category::before {
 content: '';
 display: inline-block;
 width: 19px;
 height: 19px;
 margin-right: 5px;
 border: 3px solid;
 border-radius: 50%;
 vertical-align: -5px;
}

.magazin-banner {
	width:65%;
	height:auto;
	margin:0 auto;
}
/* --------------------------------
 *　magazin
 * -------------------------------- */

.magazin-box{
  color: #34495e;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  z-index:1;
}
.magazin-box:before{
  content: "";
  position: absolute;
  width:400px;
  height: 100%;
  top: 0;
  left:-100%;
  background-color: #FFF;
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
  z-index:2;
}
.magazin-box:hover{
  color:#2C788F;
  z-index:3;
  font-size:1.2rem;
  font-weight:bold;
}
.magazin-box:hover:before{
  left: 0;
}
.magazin-box:after{
  content: "";
  position:absolute;
  top:100px;
  overflow:hidden;
  opacity:0;
  z-index:4;
 }
.magazin-box:hover:after{
	opacity:1;
	left:10%;
	z-index:5;
}

.A:after {
	content: '気持ちをあかるく楽しく、恋色、春色カラーのピアスです';
}
.B:after {
	content: '可憐に咲いたお花のようなピアスです。お顔まわりを華やかに。';
}
.C:after {
	content: '鮮やかなスカイブルーがきれいなお守りの石　ターコイズ';
}
.D:after {
	content: '天然石とフェザー、自然素材で気持ちもふわりと穏やかに';
}
.E:after {
	content: 'ふわりと風に揺れるアシメントリーなフェザーピアス';
}
.F:after {
	content: '高貴なカラー、アメジスト　女性らしい美しさに';
}
.G:after {
	content: '太陽にきらめく泡のようなピアスです。';
}
.H:after {
	content: 'お店にもたくさん展示しています。';
}
.I:after {
	content: 'アシンメトリーデザインのカナリーカラーのフラワーピアス';
}
.J:after {
	content: '淡水パールを使ったイヤリング';
}
.K:after {
	content: '珊瑚とターコイズ石';
}
.L:after {
	content: '天然石ピアス　華やかなピンクが印象的です。';
}
.M:after {
	content: '天然石ピアス　優雅なパープルは女性らしさにあふれます。';
}
.N:after {
	content: 'ピンクとゴールドデザインの上品ピアス';
}
/*------------------------------
*スリック
*-------------------------------*/
.autoplay,.responsive{
	padding:80px 0;
}
/*------------------------------
*スクロールアップ
*-------------------------------

/* Tab style */
#scrollUp {
	bottom: 0;
	right: 30px;
	width: 70px;
	height: 70px;
	margin-bottom: -10px;
	padding: 10px 5px;
	font: 14px/20px sans-serif;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	color: #828282;
	-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
	background-color: #E6E6E6;
	background-image: -moz-linear-gradient(top, #EBEBEB, #DEDEDE);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EBEBEB), to(#DEDEDE));
	background-image: -webkit-linear-gradient(top, #EBEBEB, #DEDEDE);
	background-image: -o-linear-gradient(top, #EBEBEB, #DEDEDE);
	background-image: linear-gradient(to bottom, #EBEBEB, #DEDEDE);
	background-repeat: repeat-x;
	-webkit-transition: margin-bottom 150ms linear;
	-moz-transition: margin-bottom 150ms linear;
	-o-transition: margin-bottom 150ms linear;
	transition: margin-bottom 150ms linear;
}
#scrollUp:hover {
	margin-bottom: 0;
}
/* --------------------------------
 * footer
 * -------------------------------- */
.footer {
	width:100%;
	padding: 12px 0;
	font-size: 1.3rem;
	background-color:#3B86C8;
	color:#fff;
}


/* --------------------------------
 * smart phone
 * -------------------------------- */

@media (max-width: 1024px) {
html {
font-size:50%;
margin:0;
}
h1, h2, h3, h4 {
font-size:130%;
}
.image {
max-width:100%;
height:auto;
}
#loader-bg, #wrap {
 max-width:100%;
 height:auto;
}
section {
display:auto;
width:100%;
}
.logo img {
 position:fixed;
 top:50px;
 width:30%;
}
.header {
 grid-template-rows:1100px;
 grid-template-columns:800px;
 justify-content:center;
}
.header-box {
 grid-row:1/1;
 grid-column:1/1;
 background-image:url(../images/banner1.png);
 background-size:cover;
}
.magazin-box:before{
 width:60%;
}
/*セクション*/
.about, .works, .menus-wrapper, .daymap, .category, .magazin {
max-width:100%;
height:auto;
margin:0 auto;
padding:5px 0;
}
/*wrapper*/
.daymap-wrapper, .magazin-wrapper, .menu, .like-flex,.wrapper{
flex-direction: column;
}
.menu {
 border:none;
}
/*BOX*/
.magazin-box,.daymap-cell {
 max-width:100%;
 height:auto;
 margin:0;
 padding:5px;
}

.daymap-cell iframe {
 max-width:700px;
 height:500px;
}
}
 @media (max-width: 600px) {

h2, h3, h4, p {
font-size:80%;
margin-left:10px;
}
.about-text{
 line-height: 1.8;
}
.header {
 grid-template-rows:545px;
 grid-template-columns:400px;
 justify-content:center;
}
.header {
 padding-top: 60px;
}
 .header-box {
 background-image:url(../images/banner2.png);
 background-size:cover;
}
.magazin-box:before{
 width:100%;
}

.daymap-cell iframe {
	margin:0;
	padding:0;
 width:300px;
 height:500px;
}
.menu{
 max-width:100%;
 height:auto;
 margin:0;
 padding:5px;
}
 #canvasOne {
 width:360px;
 height:180px;
}
.heading {
 margin-top: 20px;
}
.btn:hover {
 opacity: 1;
}
/*------------------------------
*スリック
*-------------------------------*/
.autoplay{
	width:100%;
	height:auto;
	padding:30px 0;
}
.responsive{
	width:100%;
	height:auto;
	padding:40px 0;
}


}