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

h2,p,span,h3{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	color: #8D8D8D;
}

h2.ma-products-heading {
    font-family: "Noto Serif JP";
    font-weight: normal;
    font-size: 32px!important;
    line-height: 50px;
    color: #3b3b3b;
    text-align: center;
    margin:10% auto 20px;
}

.cinema_logo{
	width: 40%;
	margin: 5% auto 0;
}


.mov-cinema {
    width: 80%;
    margin: 10% auto;
}

.mov-cinema .video__wrap video{  
	
	width: 100%;
	margin: auto;
	
}

	.necklace_top,.diamond_top,.charm_top,.ring_top{
    width: 100%;
    height: auto;
    margin: auto;
	}
	.top_img{
   z-index: -1;
		width: 100%;
    height: auto;
	    position: relative;
	}

.item_text_left{
	    width: 50%;
    text-align: left;
    padding: 20% 0 0 0;
    position: absolute;
    z-index: 1;
}

.item_text_right{
	
	 width: 50%;
    color: #fff;
    text-align: right;
    padding: 20% 0 0 0;
    margin-left: 50%;
	position: absolute;
    z-index: 1;
}


 .item_text_left h2,.item_text_right h2 {
    text-align: center;
    font-weight: normal;
    font-size: 100px;
	 color: #fff;
	 margin-bottom: -30px;
}

.item_text_left p,.item_text_right p{
    text-align: center;
	color: #fff;
	font-size: 20px;
}
	
.necklace_top .item_text_right{
	
	width: 45%;
	color: #fff;
	text-align: left;
	padding: 20% 0 0 0;
}
.view_more{
	width: 15%;
    position: absolute;
    bottom: -65%;
    right: 5%;
}

.back_btn{
	width: 20%;
    margin: 10% auto;
	
}



  :root{
    --gold:#c9a96a;
    --ink:#1a1a1a;
    --white:#ffffff;
    --gray-line:#dcdcdc;
    --hero-bg-1:#c7c9ce;
    --hero-bg-2:#e9eaec;
    --ease:cubic-bezier(.4,0,.2,1);
  }
  *{box-sizing:border-box;margin:0;padding:0;}



  /* ===== VIEW MORE trigger ===== */
  .view-more-wrap{
    position:absolute;
        right: 50px;
        bottom: 30px;
    z-index:3;
  }
  @media (max-width:900px){
       .view-more-wrap {
        position: absolute;
        right: 20px;
        bottom: 30px;
        padding: 0;
    }
  }

  .view-more-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    background:rgba(255,255,255,.92);
    color:var(--ink);
    border:none;
    border-radius:999px;
    padding:16px 28px;
    font-family:'Cormorant Garamond',serif;
    font-size:16px;
    letter-spacing:.14em;
    cursor:pointer;
    transition:background .3s var(--ease), box-shadow .3s var(--ease);
  }
  .view-more-btn:hover{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12);}
  .view-more-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

  .view-more-btn .chevron{
    width:16px;height:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:transform .4s var(--ease);
  }
  .view-more-btn .chevron svg{width:100%;height:100%;}
  .view-more-btn[aria-expanded="true"] .chevron{transform:rotate(180deg);}
  .view-more-btn .btn-label::after{
    content:"VIEW MORE";
  }
  .view-more-btn[aria-expanded="true"] .btn-label::after{
    content:"CLOSE";
  }

  /* ===== Accordion panel ===== */
  .accordion-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .55s var(--ease);
    background:#faf9f7;
  }
  .accordion-inner{
    padding:64px 8% 80px;
    max-width:1400px;
    margin:0 auto;
  }
  .accordion-inner .lead{
    font-family:'Cormorant Garamond',serif;
    font-size:28px;
    letter-spacing:.06em;
    margin-bottom:8px;
  }
  .accordion-inner .lead-sub{
    font-size:13px;
    color:#777;
    letter-spacing:.06em;
    margin-bottom:40px;
  }

  .product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
  }
  .product-card{
    text-align:center;
  }
  .product-thumb{
    background:linear-gradient(160deg,#eceef0,#d8dade);
    border-radius:6px;
    aspect-ratio:1/1.1;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
  }
  .product-thumb svg{width:56%;}
  .product-name{
    font-size:14px;
    letter-spacing:.04em;
    margin-bottom:4px;
  }
  .product-price{
    font-size:13px;
    color:#8a7452;
    letter-spacing:.04em;
  }

  @media (max-width:900px){
    .accordion-inner{padding:40px 20px 60px;}
    .accordion-inner .lead{font-size:22px;}
    .product-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  }
  @media (max-width:480px){
    .product-grid{grid-template-columns:1fr;max-width:280px;margin:0 auto;}
  }

  /* reduced motion */
  @media (prefers-reduced-motion:reduce){
    .accordion-panel,.view-more-btn .chevron{transition:none;}
  }


  /* タブレット */
  @media (max-width: 1024px) {

  }
 
  /* スマートフォン */
  @media screen and (max-width: 767px) {
    .cinema_logo {
        width: 70%;
        margin: 5% auto 0;
    }


.mov-cinema {
    width: 100%;
    margin: 10% auto;
}
	  

	  
	  
	  
	  .view_more {
    width: 50%;
    position: absolute;
       top: 0; 
		 padding-top: 120%;
    right: 10%;
}
	  
	  .item_text_left {
    width: 100%;
    text-align: left;
    padding: 30px;
}
	  .item_text_right {
    width: 100%;
    color: #fff;
    text-align: right;
    padding: 30px;
    margin-left: auto;
}
	  
	  .item_text_left h2, .item_text_right h2 {
    text-align: right;
    font-weight: normal;
    font-size: 30px;
    color: #fff;
    margin-bottom: 0;
}
	  
	  .item_text_left p, .item_text_right p {
    text-align: right;
    color: #fff;
    font-size: 20px;
}
  }








 
.necklace_item{
	width:100%;
	margin: 5% auto;
	display: flex;
	position: relative;
}

.necklace_item .item_img_left{
	width: 60%;
	text-align: left;
	z-index: 0;
}

.necklace_item .item_text_right {
    width: 50%;
    text-align: left;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10% 0 0 0;
}

.text_title{
	display: grid;
	 grid-gap:30px;
    grid-template-columns: 10fr 90fr;
	width: 100%;
	margin: auto;
	align-items: start;
	margin-bottom: 20px;
	
}

.attention{
	text-align: left;
	font-size: 12px!important;
	color: #8D8D8D;
	margin: 20px auto!important;
}

 .necklace_item .item_text_left h2,.necklace_item .item_text_right h2,.necklace_item02 .item_text_right h2,.ring_item .item_text_left h2,.ring_item .item_text_right h2 {
    text-align: left;
    font-weight: normal;
    font-size: 100px;
	 color: #8D8D8D;
}

 .top_h3{
	     margin-top: 30px!important;

}

 .necklace_item .item_text_left h3,.necklace_item .item_text_right h3,.necklace_item02 .item_text_right h3,.ring_item .item_text_left h3,.ring_item .item_text_right h3 {
    text-align: left;
    font-weight: normal;
    font-size: 26px;
	 color: #8D8D8D;
	     margin-top: 50px;

}



.necklace_item .item_text_left p, .necklace_item .item_text_right p,.necklace_item02 .item_text_right p,.ring_item .item_text_left p,.ring_item .item_text_right p{
    text-align: left;
	font-size: 18px;
	color: #8D8D8D;
}



.ring_item{
	width:100%;
	margin: 5% auto;
	display: grid;
	grid-template-columns: 50% 50%;
	    grid-gap: 30px;
}

.ring_item .item_img_left{
	width: 100%;
	text-align: left;
}

.ring_item .item_text_right {
    width: 100%;
    text-align: left;
    padding: 10% 0 0 0;
	margin-left: 0;
	    position: static;
}

.ring_item .item_img_right{
	width: 100%;
	text-align: left;
	

	
}

.ring_item .item_text_left{
	width: 100%;
	text-align: left;
	padding: 10% 0 0 10%;
	margin-left: 0;
	    position: static;
}

.price{
	   text-align: left;
	    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Noto Sans JP";
    font-size: 14px!important;
    line-height: 1.6;
	margin: 20px auto;
}

	
.necklace_item .item_img_right{
	width: 60%;
	text-align: left;
	z-index: 0;
	    margin-left: auto;
}

.necklace_item .item_text_left{
	width: 60%;
	text-align: left;
	z-index: 1;
	padding: 0 30px 10%;
	    position: static;
}

.necklace_item02{
	width:100%;
	margin: 0 auto 10%;
    display: block;
}

.necklace_item02 .item_img_left{
	width: 50%;
	margin: auto;
}
.necklace_item02 .item_text_right {
    width: 50%;
    text-align: left;
    padding: 0;
	    margin: auto;
	    position: static;
}




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

  }
 
  @media screen and (max-width: 767px) {
	  .necklace_item {
    width: 100%;
    margin: 5% auto;
    display: block;
    position: static;
}
.necklace_item .item_text_left {
    width: 80%;
    text-align: left;
    position: static;
    padding: 0;
	margin: 0 auto 25%;
	
}
	  
.necklace_item .item_img_right {
        width: 90%;
        text-align: center;
        z-index: 0;
        margin: 0 auto;
    }
	  .necklace_item .item_text_right {
    width: 90%;
    text-align: left;
    position: static;
    padding: 0;
		  margin: 0 auto 25%;
}
	  
	  .necklace_item .item_img_left {
    width: 90%;
        text-align: center;
        z-index: 0;
        margin: 0 auto;
}
	  
.necklace_item02 {
    width: 100%;
    margin: 5% auto;
    display: block;
}
	  .necklace_item02 .item_img_left {
    width: 90%;
    margin: auto;
}
	  .necklace_item02 .item_text_right {
    width: 90%;
		  margin: auto;
		  margin: 0 auto 25%;
 
}
	  
	   .necklace_item .item_text_left h2,.necklace_item .item_text_right h2,.necklace_item02 .item_text_right h2,.ring_item .item_text_left h2,.ring_item .item_text_right h2  {
    text-align: left;
    font-weight: normal;
    font-size: 60px;
	 color: #8D8D8D;
}

 .necklace_item .item_text_left h3,.necklace_item .item_text_right h3,.necklace_item02 .item_text_right h3,.ring_item .item_text_left h3,.ring_item .item_text_right h3 {
    text-align: left;
    font-weight: normal;
    font-size: 18px;
	 color: #8D8D8D;
	 margin-top: 30px;
}

.necklace_item .item_text_left p, .necklace_item .item_text_right p,.necklace_item02 .item_text_right p,.ring_item .item_text_left p,.ring_item .item_text_right p {
    text-align: left;
	font-size: 12px;
	color: #8D8D8D;
}

.price{
	   text-align: left;
	font-size: 10px;
	color: #8D8D8D;
}
	  
	  
.ring_item{
	width:100%;
	margin: 5% auto;
	display: block;
}

.ring_item .item_img_left{
	width: 90%;
	text-align: center;
	margin: 25% auto 0;
}

.ring_item .item_text_right {
    width: 90%;
    text-align: left;
   padding: 0;
	margin-left: 0;
	margin: 0 auto 25%;
}

.ring_item .item_img_right{
	width: 90%;
	text-align: center;
	margin: 0 auto;

	
}

.ring_item .item_text_left{
	width: 90%;
	text-align: left;
	padding: 0;
	margin-left: 0;
	margin: 25% auto 10%;
	  
	  }
	  .text_title {
    grid-gap: 10px;
	margin-bottom: 10px;
}
.back_btn {
    width: 50%;
    margin: 10% auto;
}
	  
	  .attention {
    font-size: 9px !important;
    margin: 20px auto !important;
}
	  h2.ma-products-heading {
    margin: 0 auto 20px;
}
}