@charset "utf-8";

.clear{
	clear: both;
}
.center {
	text-align: center;
}
.red {
	color: #e3005c;
}
.blue {
	color: #003399;
}
.bold {
	font-weight: bold;
}
.underline {
	text-decoration: underline;
}
.small {
	font-size: 10px;
	letter-spacing: 0.1em;
}

* html body .small {
	font-size: 9px;
}
* +html body .small {
	font-size: 9px;
}
body {
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
}

/*
a:link , a:visited {
	color: #039;
	text-decoration: underline;
}
a:hover , a:active {
	color: #663;
	text-decoration: underline;
}*/

/* アンカー ----- */
#material-pt,
#material-wg,
#material-yg,
#material-pg,
#material-combi,
#soli,
#side,
#ete,
#wave {
	padding-top:180px;
	margin-top:-180px;
}


/*________________________________________________________ wrapper _____*/

#select-wrapper , .select-wrapper {
	width: 100%;
	margin: 0px auto;
	position: relative;
	text-align: justify;
}
#select-wrapper .copyright{
	clear: both;
	font-size: 85%;
	color: #666;
	margin: 0 0 0 35px;
}
/*________________________________________________________ contents _____*/

#contents{
	width: 100%;
	margin: 0;
}
#contents h2 a{
	width:980px;
	display: block;
	font-size:35px;
	line-height:1;
	padding:1px;
	color:#362928;
	letter-spacing:3px;
	margin:60px auto;
}

@media screen and (max-width: 767px) {
#contents h2 a{
	width:100%;
	font-size:22px;
	text-align:center;
	padding:0px;
	margin:20px auto;
}
}
@media screen and (min-width: 768px) {
	span.engagement-guide-title {
		font-size: 2.5em;
		width: 980px;
		margin: 30px auto 30px auto;
		display: block;
	}
}
@media screen and (max-width: 767px) {
	span.engagement-guide-title {
		font-size: 1.1em;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	h1 span {
		display:block;
	}
}

/*________________________________________________________ container _____*/

#container{
	padding-top: 0;
}

/* おすすめの婚約指輪 */
.price {
	display:block;
	font-size:1.4em;
	position:absolute;
	bottom:15px;
}
.tax {
	font-size:0.8em;
}


#cut{
width: 800px;
margin-top:50px;
}
#cut .cut1{
vertical-align:middle;
text-align: right;
width: 540px;
}
#cut .cut1 table{
border-collapse: collapse;
margin-left: 10px;
}
#cut .cut2{
/*width:800px;*/
float: right;
}
#cut .cut3{
text-align: right;
}
#cut a{
height: 86px;
display: block;
}

/*________________________________________________________ guide _____*/

#guide{
	width: 130px;
	margin: 0;
}
#guide ul{
	width: 130px;
	position: relative;
}
#guide li{
	width: 130px;
	text-indent: -9999px;
	margin-bottom: 40px;
}
#contents #guide li a{
	display: block;
}
#contents #guide li a:hover{
	background: none;
}
#guide ul li ul{
	width: 130px;
	margin-top: 10px;
}
#guide ul li ul li{
	width: 130px;
	height: 15px;
	text-indent: -9999px;
	margin: 1px 0;
}
#contents #guide ul li ul li a{
	width: 130px;
	height: 15px;
	display: block;
}
#contents #guide ul li ul li a:hover{
	background: none;
}


span.red{
	color: #e3005c;
	font-weight: bold;
}


.m0{
	width: 623px;
	margin-left: 60px;
}
.m0 img{
	margin: 0;
	float:left;
}

/*-----------------------------*/
.ringtype {
	clear: both;
	padding-top: 25px;
}

#halo-type {
	margin-top:-90px;
	padding-top:90px;
}

/*----------------------------------------- 090818 add　婚約指輪のアフターサービス --*/

#selemetal {
	float: left;
	width: 785px;
	padding-bottom: 0px;
}

/*================cuttittle=================*/


.imgarea{width:100%;
 text-align:center;}


.cart table , .cart table td, .cart table.th {
	width:800px;
	border: 1px solid #595959;
	border-collapse: collapse;
	font-size: 0.9em;
	text-align: center; 
}


.cart th {
	background: #f0e6cc;
}
.cart .even {
	background: #fbf8f0;
}
.cart .odd {
	background: #fefcf9;
}




/*-----------===========cut_new===========------------*/




#content{width:800px;
margin:0 auto;
padding-top:120px;
}

#content h3{margin-bottom:50px;}
#content p{line-height:1.8em;
    letter-spacing:0.1em;
	margin-bottom:20px;
	font-size:1.1em;
}



#content dl { width:600px;
margin-top:100px;
margin-bottom:50px;

}

#content dt {float:left;
    clear:left;
    width:150px;
	height:30px;
	
 }

#content dd {float:left;
   width:400px;
   
}

#content dd:last-child {margin-left:150px;
}


.cb{clear:both;}


/*=================リングガイド===================*/
.link_bar {padding: .5em .75em;
    background-color: #f6f6f6;
    border-left: 6px solid #ccc;
    font-size: 145%;
    letter-spacing: 0.2em;}


ul.link_list li {
	font-size:14px;
    position: relative;
    margin-top: 10px;
	margin-bottom: 15px;
    padding-top: 10px;
    padding-left: 50px;
	color:#AA7777;}
	
	
ul.link_list li::after {
    display: block;
    content: '';
    position: absolute;
    top: 1.1em;
    left: 1em;
    width: 6px;
    height: 6px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

li {
    list-style: none;
}
ul.link_list li a{
	color: #AA7777;
		transition: 1.2s ;
}

ul.link_list li a:hover{
	color: #929292;
}
/* 20200131 追加 */
.giftbox-engagement-content {
  overflow: hidden;
}
.giftbox-engagement {
	margin: -12% 0;
}

/*=====================contents_wrapリングデザイン20160602=========================*/



#contents_wrap{width:800px;
               margin:120px auto;}

.tittle{font-size:180%;
color:#5A5A5A;
font-weight:bold;
width:100%;
margin:50px 0 30px 0;
border-bottom:2px solid #5A5A5A;
}


/* --- 20161209 --- */
.main-content {
	width: 800px;
	margin: 60px auto 0 auto;
}
.main-content h2 {
	color: #333333;
}
.mb60 a {
	font-size:16px;
	letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
.main-content {
	width: 95%;
}
.main-content h2 {
	font-size: 18px;
	text-align: center;
}	
.main-content h3 {
	text-align: center;
	font-size:16px;
	font-weight:bold;
	letter-spacing: 1px;
}

.mb60 a {
	font-size:14px;
	font-weight:bold;
	letter-spacing: 1px;
	color:#5d5d5d;
}
}

.title-obi {
    font-size: 1.3em;
    color: #aa7777;
    padding: .5em .75em;
    background-color: #f6f6f6;
}
.img-center {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/*--- カット ------------------------------------------------------*/

.frame {
	border:2px solid #ccc; 
	border-radius: 4px;
	padding: 15px;
}

/*--- リングデザイン -----------------------------------------------*/
h3.ring-design-title {
	padding-bottom: 10px;
	margin-top: -2px;
	border-bottom:2px solid #ccc;
	font-size: 1.25em;
}
span.ring-design-subtitle {
	display: block;
	font-size: 0.9em;
	color: #999;
	margin-bottom: 5px;
}
.ring-design-text {
	width: 50%;
}
.ring-design-text p {
	text-align: justify;
}

.ring-design-text span a::after {
	position: absolute;
	top: 50%;
	right: .2em;
	content: '';
	margin-top: -5px;
	border: 6px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #a7882d;
	transition: all .3s;
	
}

.ring-design-text span a:hover {
	background-color: #a7882d;
	color: #fff;
}
.ring-design-text span a:hover::after {
	border-left-color: #fff;
}

/* --- リングサイズ ---------------------------------------*/
.size-service {
	width: 800px;
}
.size-service p {
	width: 400px;
}

/* PC */
@media screen and (min-width: 768px) {
/*________リングサイズの違い____________*/
.table-scroll {
  display: block;
}

.tigai h2{ font-size:1.5em;}

.tigai p{width:700px;
text-align:justify;
margin:80px auto;
line-height:1.5em;
}

p.caution{width:600px;
margin:0 auto;
font-size:0.8em;
color:#aa8720;
}
.tigai table{width:600px;
margin:0px auto;
border-collapse:collapse;
line-height:1.0em;

}

.tigai table td.top{height:40px;}
.tigai table tr{/*border:1px solid rgba(35,34,30,0.6);*/
border-collapse:collapse;
text-align:center;
width:150px;
float:left;
box-sizing:border-box;
border-top:1px solid rgba(35,34,30,0.6);
}

.tigai table td{border-right:1px solid rgba(35,34,30,0.6);
border-bottom:1px solid rgba(35,34,30,0.6);
border-collapse:collapse;
text-align:center;
height:25px;
width:100%;
box-sizing:border-box;
padding-top:5px;
vertical-align:middle;
display:block;
}

.tigai table td span{ font-size:0.8em;}
.tigai table tr.ja{ background-color:rgba(170,135,32,0.4);
border-left:1px solid rgba(35,34,30,0.6);}

.tigai table tr.ame{background-color:rgba(88,87,87,0.2);}

.tigai table tr.eu{background-color:rgba(88,87,87,0.1);}

.tigai table, .tigai tbody, .tigai thead, .tigai tfoot, .tigai tr, .tigai th, .tigai td {
    display: table;
}
}

/* sp */
@media screen and (max-width: 767px) {
/*________リングサイズの違い____________*/

.tigai{padding-top:80px;}
.tigai h2{ font-size:1.2em;}

.tigai p{width:100%;
text-align:justify;
margin:50px auto;
line-height:1.5em;
}

.tigai table{width:600px;
height:400px;
margin:0px auto;
/*border:1px solid #ccc;*/
border-collapse:collapse;
line-height:2em;
}

p.caution{
font-size:0.8em;
color:#aa8720;
margin:0;
}
.tigai table tr{border-collapse:collapse;
text-align:center;
width:150px;
float:left;
box-sizing:border-box;
border-top:1px solid rgba(35,34,30,0.6);
}

.tigai table td{border-right:1px solid rgba(35,34,30,0.6);
border-bottom:1px solid rgba(35,34,30,0.6);
border-collapse:collapse;
text-align:center;
height:25px;
width:100%;
box-sizing:border-box;}

.tigai table tr.ja{ background-color:rgba(170,135,32,0.4);
border-left:1px solid rgba(35,34,30,0.6);}

.tigai table tr.ame{background-color:rgba(88,87,87,0.2);}

.tigai table tr.eu{background-color:rgba(88,87,87,0.1);}

.table-scroll{
  overflow: auto;　
}

table, tbody, thead, tfoot, tr, th, td {
    display: block;
}
}

/*--- 刻印 -----------------------------------------------*/
.seal-position {
	width: 100%;
}
.seal-txt {
	width: 300px;
}

div.seal-example {
	margin-right:25px;
	width:40%;
}

div.seal-example h5 {
	padding-bottom:10px;
	border-bottom:1px solid #eeeeee;
	color:#aa8720;
}
div.seal-example span {
	color:#bbbbbb;
	margin-left: 10px;
}

div.seal-example dl.seal-list {
	margin-top:10px;
}
div.seal-example dl.seal-list dt {
	float:left;
	font-weight:bold;
	width:40%;
}
div.seal-example dl.seal-list dd {
	float:left;
	color:#7d7d80;
	margin-bottom: 8px;
	width: 60%;
}

.secretstone-about {
	width: 100%;
}
.secretstone-txt {
	width: 330px;
}
/*-- シークレットストーン --*/
.secret-stone-list h5 {
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	margin-bottom: 30px;
}
.secret-stone-box {
	/*justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;*/
	display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
    display: flex;
	-webkit-justify-content: flex-start;/*--- safari（PC）用 ---*/
	-webkit-box-pack: flex-start; /*--- safari（PC）用 ---*/
	-ms-box-pack: start; /*--- IE10 ---*/
	justify-content: flex-start;
	-webkit-flex-direction: row; /*--- safari（PC）用 ---*/
	-webkit-box-orient: horizontal; /*--- safari（PC）用 ---*/
	-ms-box-orient: horizontal; /*--- IE10 ---*/
	flex-direction: row;

	-webkit-flex-wrap: wrap;
	-ms-flex-wrap : wrap;
	flex-wrap: wrap;
}
.secret-stone-box li {
	margin-bottom: 30px;
	text-align: center;
}
.secret-stone-box li span {
	font-size: 0.6em;
    display: block;
    width: 110px;
    margin-top: 10px;
}

/* --- afterservice1 ----------------------------------*/
.afterservice1-box {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.afterservice1-left {
	width: 50%;
	margin:0 auto;
}
.afterservice1-left img {
	display:block;
	margin:0 auto;
}
.afterservice1-txt {
	width: 50%;
}
.resizing-notes li {
	list-style: disc outside;
	margin-left: 20px;
}
.afterservice-title {
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px; 
}

.certificate {
	display:block;
	text-align:center;
	font-size:0.8em;
}

/* 参考 */
dl.reference dt {
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
}


/* on/off */
label {
    display: block !important;
    margin: 0 !important;
}

input[type="checkbox"].on-off{
    display: none;
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
    height: 680px;
}

/* ---- 20191119追加 ドロワーメニュー ---- */
@media screen and (min-width: 768px) {

/*=== drawer menu PC ===*/
.overlay {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  opacity: 0;
  transition: opacity .5s;
}
.overlay.htc-close {
  width: 0;
  height: 100%;
  opacity: 1;
  cursor:pointer;
}
main {
  height: 100%;
  min-height: 100vh;
  transition: all ease-in-out .3s;
  transform: translateX(230px);
  overflow-x:hidden !important;
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
  position: relative;
  width:87vw;
}
main.htc-close {
  transform: translateX(0px);
  width:100%;
}

.menu-trigger {
  display: inline-block;
  width: 33px;
  height: 28px;
  vertical-align: middle;
  cursor: pointer;
  position:absolute;
  left: 43px;
  bottom:90px;
  z-index:1;
}
.menu-trigger-bg {
  background-color:#E7E6E2;
  border-radius:50%;
  height:80px;
  width: 80px;
  position:absolute;
  left: 20px;
  bottom: 60px;
}

.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #333;
  transition: all ease-in-out .3s;
}
.menu-trigger.htc-active span {
  background-color: #333;
}
.menu-trigger span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
  top: 0;
}
.menu-trigger.htc-active span:nth-of-type(1) {
  transform: translateY(0px) rotate(0deg);
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.htc-active span:nth-of-type(2) {
  top: 12px;
  opacity: 1;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
  transform: translateY(-12px) rotate(45deg);
}
.menu-trigger.htc-active span:nth-of-type(3) {
  bottom: 0;
  transform: translateY(0px) rotate(0deg);
}
.menu-trigger span.menu-trigger-default {
  height: 0px;
  bottom: -4px;
  font-size:0.7em;
  transition: 0s;
  word-wrap:normal;
}
.menu-trigger.htc-active span.menu-trigger-default {
  bottom: -4px;
  opacity: 0;
  font-size:0.7em;
  transition: 0s;
}
.menu-trigger span.menu-trigger-close {
  bottom: -4px;
  opacity: 0;
  font-size:0.7em;
  transition: 0s;
}
.menu-trigger.htc-active span.menu-trigger-close {
  opacity: 100;    
  height: 0px;
  bottom: -4px;
  font-size:0.7em;
  letter-spacing: .02em;
  transition: 0s;
}

nav.htc-menu {
  width: 230px;
  height: 100vh;
  background-color: #E7E6E2;
  transition: all ease-in-out .3s;
  margin: 0;
}
nav.htc-close {
  transform: translate(-750px);
}
nav.htc-menu li {
  border-bottom:1px solid #ccc;    
  margin-bottom:8px;
}
nav.htc-menu li a {
  color: #333;
  display:block;
  letter-spacing:0;
  padding-bottom: 8px;
  transition: all ease-in-out .2s;
}
nav.htc-menu li a:hover {
    color:#ab871f;
}

* {
  box-sizing: border-box;
}
ul.htc-menu-inner {
  list-style: none;
  margin: 0;
  padding:8%;
  height:70vh;
  overflow-y:scroll;
  overflow: -moz-scrollbars-vertical;
  scrollbar-width: thin;
}
ul.htc-menu-inner::-webkit-scrollbar{ 
    width: 5px;
    height:20px;
}
ul.htc-menu-inner::-webkit-scrollbar-thumb{ 
    background: #c0bfbe;
    border-radius: 30px;
}

#sidebar {
  position: absolute;
}

#sidebar.sidefixed {
  position: fixed;
  top: 0;
  left: 0;
}
#sidebar.sideab {
  position: absolute;
  top: 0;
  left: 0;
}
/*11章のみの設定*/
#sidebar.sideab-02 {
  position: absolute;
  top: 210px;
  left: 0;
}
#contents-area {
  position: relative;
  overflow-x: hidden;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
}
/*=== /drawer menu PC ===*/

}


/* ----- 2019118追加 ページネーション ------ */
@media screen and (min-width: 768px) {
/*ページネーション*/
.htc-pagination {
    margin: 100px auto 50px auto;
    padding: 10px;
    width:100%;
    background-color:#e8e8e8;
}
.htc-pagination-prev, .htc-pagination-next {
    display:inline-block;
    height:30px;
    line-height: 30px;
    position:relative;
}
.htc-pagination-prev a, .htc-pagination-next a {
	color:#7d7d7d;
	font-size:14px;
}
.htc-pagination-next {
    border-left:1px solid #ccc;
}
.htc-pagination-prev::before {
    border: 26px solid transparent;
    border-right-color: #e8e8e8;
    border-left-width: 0;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    left: -36px;
    top: -11px;
    width: 0;
}
.htc-pagination-next::before {
    border: 26px solid transparent;
    border-left-color: #e8e8e8;
    border-right-width: 0;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    right: -36px;
    top: -11px;
    width: 0;
}
}
@media screen and (max-width: 767px) {
	.htc-pagination {
    margin: 10% auto ;
    width:100%;
}
.htc-pagination a {
    padding:0 15px;
}
.htc-pagination-prev, .htc-pagination-next {
    display:inline-block;
    height:50px;
    line-height: 50px;
    position:relative;
}
.htc-pagination-next {
    border-top:1px solid #ccc;
}
.htc-pagination-prev::before {
    content: '◀︎';
    color:#7d7d7d;
    display: block;
    font-size:0.6rem;
    position: absolute;
    left: 5px;
    top: 0;
}
.htc-pagination-next::before {
    content: '▶︎';
    color:#7d7d7d;
    display: block;
    font-size:0.6rem;
    position: absolute;
    right: 5px;
    top: 0;
}

.prev-start::before {
    display:none;
}
.next-end::before {
    display:none;
}
}