@charset "UTF-8";
/* CSS Document */



body {	
	color: #555;


}


@media screen and (min-width: 768px) {
	
		.sp {
		display: none;
	}
	
}

@media screen and (max-width: 767px) {
	
		.desktop {
		display: none;
	}
	
}




.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.font_g {
		font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 500;
}

a.link {
	text-decoration: underline;
	
}


.mrg_05 {
	margin-top: 0.5em;
}


.mrg_1 {
	margin-top: 1em;
}

.mrg_15 {
	margin-top: 1.5em;
}

.mrg_20 {
	margin-top: 2em;
}



.container {
	max-width:940px;
	width:100%;
	margin: 0 auto;
	
}

.inner{
	width: 100%;
}

@media screen and (max-width: 767px) {
	
	.container {
		width:100%!important;	
}
	
	.inner{
	padding: 0 36px;
}
	
}



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

	.inner{
	padding: 0 17px;
}		
}






 img {
	vertical-align: bottom;
	 width: 100%;
 }

a {
	color: #666;
	text-decoration: none;
}


.inner {
	width: 100%;
	height: auto;
}

.l {
	font-size: 1.5em;
}

.m {
	font-size: 1.15em;
}


footer {
	font-size: 1.4rem;
	padding: 30px;
	text-align: center;
}

@media screen and (max-width: 767px) {
footer {
	font-size: 1.2rem;
	padding: 10px;
	text-align: center;
}	
}






h1 {
	width: 200px;
	margin: 32px auto 40px;

}



nav {
	font-size: 1.1rem;
	letter-spacing: 2px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}




nav ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 4px auto 4px;
	width: 75%;
	padding: 0.2em 0;
}


nav li {
	transition: 0.2s;


}



nav a {
  color: #666;
  text-decoration: none;
  padding: 0 .3em;
  background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(161,190,212,1) 50%);
  background-position: 0 0;
  background-size: auto 200%;
  transition: .3s;
}
nav a:hover {
  background-position: 0 100%;
  color: #fff;
	z-index: 99999;
}



@media screen and (max-width: 500px) {
	
	h1 {
		margin: 24px auto;
		width: 190px;
	}
	
	nav {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;

	}
	
	 nav ul{
     	width: 92%;
		margin: 3px auto;
		font-size: 0.9rem;
		 left: 1.1;

}
	
	.insta_pc {
		display: none;
	}
	
	
}

@media screen and (min-width: 501px) {
	
		.insta_sp {
		display: none;
	}
	
}




/*top*/

.hero_img {
	margin: 24px auto;
	width: 82%;
}

.pre_hero_img {
	margin: 24px auto;
}



@media screen and (max-width: 768px) {
	
	#top .hero_img {
		margin: 20px auto 0;
		width: 100%;

	}
	
	#top .hero_img img {
		height: 50vh;
		width: 100%;
		object-fit: cover;

	}
	
	
	 .pre_hero_img img {
		height: 100vh;
		width: 100%;
		object-fit: cover;

	}
	

	
}



.h2_ttl_img {
	width: 230px;
	margin: 10px auto 30px;
}


.about .h2_ttl_img {
	margin: 10px auto 20px;
}






@media screen and (max-width: 767px) {
	
	.h2_ttl_img,
	.about .h2_ttl_img {
	width: 200px;
	margin: 0 auto ; 
}
}


.news {
	border-top: 1px solid #ddd;
	margin: 20px auto 0;
	width: 70%;
	font-size: 1.5rem;
	line-height: 1.6;
}

.news h2 {
	font-weight: bold;
	padding: 40px 0;
	color: #333;
	text-align: center;
	font-size: 1.6rem;
	
}

.news section {
	border-bottom :solid #ccc 1px;
	margin-bottom: 2em;
	
}


.news dt {

	padding-bottom: 1.5em;
	font-weight: bold;
	font-size: 110%;
}

.news dt .date {
	font-weight: normal;
	font-size: 90%;
}


.news dd {

	padding-bottom: 1em;
	line-height: 1.8;
}

.news p {
	padding-bottom: 2em;
}

.news_img {
	float: right;
	width: 50%;
	padding: 1em 0 20px 10px;
}

.news_img span {
	display: block;
	text-align: right;
	padding-top: 3px;
	font-size: 1.2rem;
}

.info_box {
	border: 1px solid #ccc;
	padding: 1em;
	margin: 0.5em 0 1.5em;
}

.info_box_2 {
	border-top: 1px dotted #ccc; 
	border-bottom: 1px dotted #ccc; 
	padding: 20px 5px;
	margin-bottom: 40px;
	font-size: 90%;
	
}

.info_box_3 {
	border-top: 1px dotted #eee; 
	padding: 20px 5px;
	margin-top: 1em;
	
}

.info_box .ttl {
	font-weight: bold;
}

.info_box dt,
.info_box_2 dt,
.info_box_3 dt {
	padding-bottom:  1em;
	font-weight: bold;	
	
}

.info_box_3 dt {
	font-size: 100%;
}

.info_box_3 dl {
	margin-bottom: 1.5em;
}



.info_box_3 dd {
	padding-bottom: 0;
}

.timetable_box {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 0 5px 30px;


} 

.news .timetable {
	width: 33%; 
	padding-top: 10px;
	line-height: 1.1;

}

.news .timetable dt{
	
	width:3.5em;
	float: left;
	padding: 0;
	margin: 0;
	}
	
.news .timetable dd {
	text-align: left;
	padding: 0 0 0 4.5em;
	margin: 0;
	
}



.news table {

	
}


.news table td, 
.news table th {
	border:none;
	padding: 0.2em;
	line-height: 1.4em;
	
}
 
.news table th {
	width: 4em;
	
}




@media screen and (max-width: 767px) {
	.news {
		width: 100%;
		padding: 0 10px;
	}
	
	.news h2 {

	padding: 40px 0 20px;
	
}

	
.news dt,
.news dd {

	/*text-align: center;*/
}
	
	.news table td, 
	.news table th {
		display: block;
	
}
	
		.news table th {
			text-align: center;
			background-color: rgba(161,190,212,1);
			width: 100%
	
}
	
			.news table td {
			padding: 0.5em 0;
	}
	
	.news_img {
		float: none;
		width: 100%;
	padding: 0 0 20px 0;
	}


	
.timetable_box {
	display: block;
	padding: 0 5px 30px;


} 

.news .timetable {
	width: 100%;

}

.info_box .ttl {
	text-align: center;
	margin-bottom: 1.5em;
}	
}




	
	




/*collection*/

.collection_box  {

	
}



.collection_box ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	
}

.collection_box li {
	width: 49.9%;
}


.collection_box li dl {
	margin-bottom: 48px;
}

.collection_box li dt {
	font-size: 1.4rem;
	text-align: center;
	padding: 2em 0 0.5em;
	
}

.collection_box li dt span {
	font-size: 1rem;
	letter-spacing: 2;
	padding: 1em;
	
}

.collection_box li dd {
	font-size: 1.2rem;
	text-align: center;
	color: #999999

	
}



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

	.collection_box {
	} 	
	
	
.collection_box li {
	width: 100%;
}	
	
.collection_box li dl {
	margin-bottom: 30px;
}	
	
.collection_box li dt {
	padding: 1em 0 0;
	
}
	
.collection_box li dt span {
	padding: 1em 0 0 0.5em;
	
}	
	
}




.catch {
	text-align: center;
	line-height: 2;
	font-size: 1.5rem;
	letter-spacing: 1.01;
	padding: 45px 0;

	margin: 0 auto;
}

.catch_2 {
	text-align: left;
	line-height: 1.8;
	font-size: 1.5rem;
	letter-spacing: 1.5;
	padding: 20px 3%;
	width: 70%;
	margin: 0 auto;

}


.catch dt,
.catch_2 dt{

	font-weight: bold;
	color: #333;
}

.catch dt {
	padding-bottom: 1em;

	
}

.catch_2 dt {
	
}


.prof {
	border-top: 1px solid #ccc;
	margin-top: 20px;
}


dd.year {
	font-weight: bold;
}

dd.prof_txt {
	
	padding-bottom: 20px;
text-shadow: 1px 1px 0px rgb(255, 255, 255);
}

.about_box {

	padding-bottom: 25%;
}


.about_bg {
	background: url("../img/about_bg.png"),url("../img/about_header_bg.jpg") ;
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	background-position: bottom, top;
}





@media screen and (min-width: 1100px) {
	.about_box {
	padding-bottom: 50%;
	}
}


@media screen and (min-width: 2000px) {
	.about_box {
	padding-bottom: 75%;
	}
}

@media screen and (min-width: 2200px) {
	.about_box {
	padding-bottom: 90%;
	}
}

@media screen and (min-width: 2600px) {
	.about_box {
	padding-bottom: 100%;
	}
}







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

	.catch {
		padding-bottom: 30px;
}
	
.catch  dt {
	padding-bottom: 0.5em;
}
	
.catch dd,
.catch_2 dd	{
	font-size: 1.4rem;
	
}
	
	.catch_2 {
		width: 100%;
	}

}



.item_container {
	padding-bottom:  80px;
	
}

.item_note {
	font-size: 1.2rem;
	margin-bottom: 1em;
}

.item_img {
	width: 500px;
	margin: 0 auto;
}

.item_img .shell_img {
}


.item_name {
	margin: 30px auto 80px;
	text-align: center;
	letter-spacing: 0.15em;
	font-size: 1.5rem;
	color: #222;
	width: 400px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;


}

.gem_img {
	background: url("../img/collection_aqua_gem_2.jpg");
	background-size: 100%;
	text-shadow: 1px 1px 5px rgba(255,255,255,.9);
}

.shell_img {
	background: url("../img/collection_aqua_shell_2.jpg");
	background-size: 100%;
	text-shadow: 1px 1px 3px rgba(255,255,255,1);
}


.nebula_bangle_img {
	background: url("../img/collection_nebula_bangle.jpg");
	background-size: 100%;
	text-shadow: 1px 1px 5px rgba(255,255,255,.9);
	color: #333;


}

.ah_bangle_img {
	background: url("../img/collection_ah_bangle.jpg");
	background-size: 100%;
}

.ah_ring_img {
	background: url("../img/collection_ah_ring.jpg");
	background-size: 100%;
	text-shadow: none;
}




.items ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

.items li {
	width: calc( ( 100% - 4px ) / 3);
	margin-bottom: 20px;
	overflow: hidden;


}

.items li img {
	transition: .3s ease-out;	
}

.items li img:hover {
  transform: scale(1.5);
	z-index: 99999;
}



.items li .material_name {
	text-align: center;
	padding: 1em 0 2em;
	font-size: 1.2rem;

	
}

.items a {

}
ul.one_item {
	display: flex;
	align-items: center;
	justify-content: center;
}

ul.one_item li {
	width: 33%;
}

@media screen and (max-width: 767px) {
	
	.item_container {
	padding-bottom:  20px;
	
}
	
.items li {
	width: calc( ( 100% - 2px ) / 2);
	margin-bottom: 10px;
}
	
.item_img {
	width: 100%;
	margin: 0 auto;
}


.item_name{
	margin: 30px 0 ;
	text-align: center;
	letter-spacing: 2;
	font-size: 1.5rem;	
	width: 100%!important;
	height: auto;
	padding: 1em 0;
}
	
ul.one_item li {
	width: 50%;
}
	
	.items li img:hover {
  transform: scale(1);
}

}
	
	@media screen and (max-width: 640px) {
		padding: 0 17px;
		
	}
}




/* prpduct on mouse */
			.product {
			text-align:center;
			position:relative;
			background-size: cover;
			font-size: 1.6rem;
			color: #fff;
		}
		
		.product a {
			color: #fff;
			
		}
		
			.product,
			.product-hover,
			.product-hover .mask {
			width: 100%;
			padding-top: 66.6%;	
			}

			.product-hover,
			.product-hover .mask { 
				position:absolute;
				top:0;
				left:0;			
			}			
		
			.product-hover {	
				z-index:5;	
				transition: all 300ms ease;	
				opacity:0;
				cursor:pointer;			
				display:block;
				text-decoration:none;
				text-align:center;							
			}
			
				.product-info {
					z-index:10;
					width:100%;
					position:absolute;
					top: 17%;
					left:0;
					margin: auto;
					letter-spacing: 0.1em;
					 					
				}

				.product-info .material {
					
				}
			
				
				.product-info .line {
					 height:1px;
					 width:0%;
					 margin:15px auto;
					 background-color:#ffffff;
					transition: all 250ms ease;	
				}
				
				
				.product-info .shop {
					font-size: 1.2rem;

				}
				
				.product-hover .mask {
					background-color:#afd4f4;
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
					filter: alpha(opacity=100);										
					opacity:1;
					z-index:0;
					
				}
				
				.product-hover:hover .line {
					width:80%;
				}
				
				.product-hover:hover {
					opacity:1;
				}				
			
			.product-img {			
				z-index:0;			
			}

	
@media screen and (max-width: 767px) {
	.product-info,
	.mask {
		display:none;
	}	
}


.atelier_container {
	background-color: #eaeeef;*/
	padding: 60px 0 ;
	
}

.bg_color_a {
	background-color: #b9d6ec;
}



.atelier_box {
	display: flex;
	padding-bottom: 30px;
	align-items: center;
}

.atelier_box:nth-child(odd) {
  flex-direction: row-reverse;
}


.atelier_box figure {
	width: 40%;
}

.atelier_txt {
	line-height: 1.7;
	font-size: 1.5rem;
	letter-spacing: 1.5;
	padding: 30px 0;
	width: 60%;
} 

.atelier_txt dl {
	width: 70%;
	margin: 0 auto;
}

.atelier_txt dt {
	font-weight: bold;
	padding-bottom: 0.5em;

} 
.atelier_img {	
	width: 30%;
	margin: 60px auto 100px;
	
}



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

	
	
.atelier_container {
		padding: 0 ;
	}
	
.atelier_box {
	flex-direction: column;
	padding-bottom: 0;
}
	
.atelier_box:nth-child(odd) {
  flex-direction: column;
}
	
.atelier_box figure {
	width: 100%;
	order:1;
}

.atelier_txt {
	width: 100%;
	order:2;
}

.atelier_txt dl {
	width: 80%;
	margin: 0 auto;
}
	
	.atelier_img {	
	width: 60%;
	margin: 60px auto;
	
}
	
	
	
}



/*///// contact table  /////*/

.note {
	
}

.contact {
	font-size: 1.2rem;
    max-width: 780px;
    margin: 0 auto 60px;
    padding: 0 20px;	
	
}
.contact table {
	width: 100%;
	margin: 0 auto;
	border-collapse: separate;
    border-spacing:0 5px;
	margin-top: 30px;
	text-align: left;
}




th {
	width:10em;
	vertical-align: top;
	line-height: 1;


}


td {
	border: 1px solid #ccc;
	padding: 0em 0 0em;
	line-height: 1;

	
}


	

.secur {
	margin: 30px 0 1em 10em;
	padding: 0 20px;
	font-weight: bold;
	font-size: 1.6rem;

}


.secur_box {
	font-size: 1.6rem;
	display: flex;
	justify-content: space-between;
	width: 70%;
	margin-left: 10em
}

.secur_box .txt,
.secur_box .img {
	width: 45%;
	
}

.secur_box dt {
	margin-bottom: 0.5em;
}

.secur_box a {
	padding-top: 0.5em;
	text-decoration: underline;
}

.secur_box a:hover {
	color:rgba(161,190,212,1);
}



input,
textarea {
	line-height: 1.5;
	border: none;
	width:100%;
}

.secur_box .txt input {
	border: 1px solid #ccc;
}



@media screen and (max-width: 767px) {
	
	
.secur {
	margin: 0 0 20px;
	padding: 0;
	font-size: 1.4rem;
	text-align: center;
}

.secur_box {
	width: 90%;
	margin-left: 1em
}	
	
	
.secur_box .txt {
	width: 40%;	
}
	
.secur_box .img {
	width: 60%;
	padding-right: 10px;
	
}	
}






@media screen and (max-width: 767px) {
	
	.contact {
		padding: 0 10px;
	}

.contact tr, 
.contact th, 
.contact td{

	display: block;
	}
	
.contact table {
	width: 95%!important;	
	margin: 2em auto 1em;
	}
	
.contact tr {
	padding-bottom: 1em;	
	}
	
.contact th {
	padding-bottom: 0.2em;	
	}
	
.contact td {
	padding: 0.5em;
	}
	
}


.contact p {
	line-height: 1.5;
	font-size: 1.4rem;
	margin-top: 0.5em;
	text-align: left;
	text-indent: -1em;
	padding-left: 1em;
}

.contact　a {
}

.capcha {
	margin-top: 46px;
}

.btn {
		
	background-color: rgba(161,190,212,1);
	padding: 5px 0;
	margin: 20px auto;
	font-size: 1.3rem;
	text-align: center;
	border-radius: 1px;
	width: 100px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
	margin-bottom: 5px;
	line-height: 1.5;
	text-align:  center;

	
}

.btn input {
	background-color: rgba(161,190,212,1);
	border-radius: 3px;
	color: #fff;
	-webkit-appearance: none;
	

}
	

.btn input  a {
	background-color: #113493;
}

.btn_box {
	display: flex;
	justify-content: center;
	width: 240px;
	margin: 30px auto 30px;
}

.form_message {
	text-align: center;
	font-size: 1.6rem;
	line-height: 2;
	padding: 120px 0;
	
}

.form_message p {
	padding-bottom: 60px;
	
	
}

@media screen and (max-width: 767px) {
	
.btn_box {
	display: flex;
	justify-content: center;
	width: 240px;
	margin: 10px auto 20px;
}


	
}









.fadein {

 animation-fill-mode:both;
 animation-duration:1.5s;
 animation-timing-function: ease;
 animation-name: fadein;
 visibility: visible !important;
	
}

@-webkit-keyframes fadein{
 0% { opacity: 0;}
 100% { opacity: 1;}
}

@keyframes fadein {
 0% { opacity: 0; }
 100% { opacity: 1;}
}


@media screen and (max-width: 767px) {
	
.fadein {
  animation-duration:1s;
	}
}

/* hover effect */

/* 
Copyright (c)  LittleSnippets.net (@littlesnippets) 
Released under the MIT license
http://opensource.org/licenses/mit-license.php
*/

figure.snip1194 {

  color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #ffffff;
  color: #000000;
  text-align: center;
  letter-spacing: 0.1;
}
figure.snip1194 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
figure.snip1194 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
figure.snip1194 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
	color: #ddd;
}
figure.snip1194 h2,
figure.snip1194 p {
  margin: 0;
  position: absolute;
  width: 100%;
  left: 0;
  opacity: 0;
}
figure.snip1194 h2 {
  padding: 0 30px;
  display: inline-block;
  font-weight: 400;
  text-transform: uppercase;
  bottom: 88%;

font-size: 1.5rem;
	letter-spacing: 1.2!important;
}
figure.snip1194 h2 span {
  font-weight: 400;
}
figure.snip1194 p {
  top: 50%;
  padding: 0 50px;
  font-weight: 500;
  -webkit-transform: translate3d(0%, 100%, 0);
  transform: translate3d(0%, 100%, 0);

	font-size: 1.4rem;
}
figure.snip1194 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
figure.snip1194:hover img,
figure.snip1194.hover img {
  opacity: 1;
}

figure.snip1194:hover figcaption h2,
figure.snip1194.hover figcaption h2 {
  opacity: 0.9;
}
figure.snip1194:hover figcaption p,
figure.snip1194.hover figcaption p {
  opacity: 0.6;
}


.snip1269 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.snip1269 img {
  max-width: 100%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out
}
.snip1269:after,
.snip1269 a {
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
  position: absolute;
	opacity: 0;
}
.snip1269:after {
  content: '';
  border: 1px solid #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;

}
.snip1269 a {
  z-index: 1;
}
.snip1269:hover img,
.snip1269.hover img {
 -webkit-transform: scale(1.03);
  transform: scale(1.03);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.snip1269:hover:after,
.snip1269.hover:after {
	opacity: 1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}


.bl_mediaHalf {
	display: flex;
	align-items: center;
	
}

.bl_mediaHalf_imgWrapper {
	flex:0 1 46.5%;
	margin-right: 3.333333%;
}

.bl_mediaHalf_body {
	flex: 1;
}

.bl_mediaHalf_body > *:last-child {
	margin-bottom: 0;
}

.bl_mediaHalf_ttl {
	margin-bottom: 10px;
	font-size: 1.5rem;
	font-weight: bold;
}

.bl_mediaHalf_txt {
	line-height: 2;
    font-size: 1.5rem;
    letter-spacing: 1.01;
}

@media screen and (max-width:768px){
	
	.bl_mediaHalf {
		display: block;
	}
	
	.bl_mediaHalf_imgWrapper {
	margin-right: 0;
	margin-bottom: 20px;
}
	
}