@charset "UTF-8";


.index_mv_wrapper{
background: #000;
}

.index_mv {
background-image: url("/cms/fts/img/202502index/202606_fts_top_R1.jpg");
margin-top: 100px;
margin-bottom:120px;
width: 1200px;
height: 390px;
background-position-x: 0;
background-repeat: no-repeat;
background-color: #d4d2d3;
padding-top:35px;
margin-left: auto;
margin-right: auto;
padding-left: 630px;
font-feature-settings: 'ss04' on;
}

.index_mv h1 {
margin: 20px 40px;
font-size: 24px;
}

.index_reason,.index_gift,.index_base,.index_style,.index_engraving,.index_crown,.index_studio,.index_sample,.index_gallery,.index_voice,.index_step,.index_newdial{
width:1200px;
margin:auto;
padding-top:20px;
margin-top:60px;
margin-bottom:140px;
font-feature-settings: 'ss04' on;
}

.index_reason,.index_gift,.index_studio,.index_sample,.index_gallery,.index_step{
text-align:center;
}
   
.index_reason h2,.index_gift h2,.index_base h2,.index_style h2,.index_engraving h2,.index_crown h2,.index_studio h2,.index_sample h2,.index_gallery h2,.index_voice h2,.index_step h2,.index_newdial h2{
font-size: 24px;
font-weight:600;
margin-top:0;
}

.index_reason p,.index_base p,.index_style p,.index_engraving p,.index_crown p,.index_studio p,.index_voice p,.index_newdial{
font-size: 16px;
}


.index_reason .campaign{
display: block;margin-bottom: 120px;border: solid 1px;line-height: 0;
}

.index_reason .campaign .sp{
display:none;
}

.valign{
	margin-top:auto;
	margin-bottom:auto;
}

.index_gift{
margin-top:-130px;
}

.index_gift ul{
display: flex;
width: 1200px;
margin: auto;
}

.index_gift li {
width: 240px;
}

.index_gift li a {
display: block;
position: relative;
overflow: hidden;
background: #000;
line-height: 0;
outline: 1px solid #fff;
outline-offset: -10px;
}

.index_gift img {
opacity: 0.5;
transform: scale(1.0);
transition: all 0.3s;
}

.index_gift img:hover {
transform: scale(1.1);
opacity: 0.7;
}

.index_gift span {
position: absolute;
left: 0;
right: 0;
bottom: 67px;
pointer-events: none;
color: #fff;
line-height: 1.6;
}


.index_gift .arrow{
	display:none;
}

.index_base li{
width: 380px;
border-bottom: 1px solid #ccc;
list-style: none;
padding: 1px 0;
}

.index_gallery a{
display:flex;opacity:1.0;transition: opacity 0.9s;
}

.index_gallery a:hover{
opacity:0.5;
}

.index_gallery .index_button {margin: 30px auto;}

.index_studio div{
margin-top:24px;
}

.index_studio img{
width:400px;
}

.index_gallery div{
width:300px;
height:200px;
overflow:hidden;
position:relative;
}

.index_gallery div img{
position: absolute;
top: -50px;
left: 0;
outline: 1px solid #eee;
outline-offset: -1px;
}

.index_step p {
font-size: 16px;
margin-bottom:10px;
}

.index_reason span,.index_base span,.index_style span,.index_engraving span,.index_crown span,.index_newdial span {
font-size: 16px;
display: block;
margin-top: 30px;
}

.display_right,.display_left{
display:flex;
}

.display_left{
flex-direction: row-reverse;
}

.display_right div{
padding-right:40px;
width:650px
}   

.display_left div{
padding-left:45px;
 width:650px
}   

.index_button{
display: block;
padding: 7px 38px;
border: solid 1px #666;
border-radius: .2rem;
font-weight: 500;
font-size: 16px;
text-align: center;
width: fit-content;
margin-top: 30px;
opacity: 1.0;
transition: opacity 0.9s;
}

.index_button:hover{
opacity:0.5;
}

.index_base ul{
margin-top:30px;
}

.index_step > div{
display:flex;
justify-content: space-between;
}

.index_step > div > div{
width:23%;
font-size:16px;
text-align:left;
}

.index_step h3 {
background: #ddd;
color: #666;
font-size: 20px;
padding:3px;
text-align: center;
border-radius: 3rem;
}

.index_step a{
text-decoration: underline;
}

.index_step_customize,.index_faq p{
text-align:center;
margin-bottom: 90px !important;
}

.index_step_customize a,.index_faq p a{
text-decoration: none;
width: 218px;
height: 37px;
background-color: #A49475;
color: #fff;
border: none;
margin: 30px auto 0;
}

.index_step_shop{
margin-top: 40px;
}

.index_step_shop a{
text-decoration: none;margin: 30px auto 0;
}

.index_sample{
margin-bottom:120px;
}

.index_sample ul {
display:flex;
width: auto;
text-align:center;
justify-content: flex-start !important;
overflow-x:scroll;
white-space: nowrap;
}
  
.index_sample img {
width: 265px;
max-width: fit-content;
object-fit: cover;
}

.index_sample a {
background: #fff;
display:block;
}

.index_sample a:hover {
opacity: 0.8;
}

.index_sample a:visited {
background: #eee;
}

.index_sample span{
display: block;
color: #666;
font-size: 12px;
margin-bottom: 90px;
}
 
.index_faq{
background: #f9f9f9;
margin: auto;
text-align: center;
margin-top: -20px;
margin-bottom: -20px;
border-bottom: solid 1px #ccc;
}

.index_faq h2{
    font-weight: 600;
    padding: 60px 0;
    margin: 0;
}
}

.index_faq dl{
padding-bottom: 80px;
}

.index_faq dt {
font-weight: 600;
font-size:20px;
}

.index_faq dd {
margin-bottom: 80px;
}

.index_faq a {
text-decoration: underline;
}

.index_faq p {
margin-top: 60px;
}

.index_faq p a{
 text-decoration: none;
}


/*お客様の声*/
    
.index_voice {
    text-align: center;
}


.index_voice div {
    text-align: left;
    display: flex;
    justify-content: space-between;
}

.index_voice div a {
    display: block;
    padding: 15px;
    border: solid 1px #666;
    width: 18.7%;
    transition: opacity 0.9s;
}

.index_voice div a:hover {
    opacity:0.5;
}
    
.index_voice div span {
    display: block;
    font-weight: 700;
}
    

.index_voice span.read.more {
    display: inline;
    text-decoration: underline;
    padding-left: 30px;
    font-weight: 400;
}

    
a.openModal {
    display: inline-block;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content_voice {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 700px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 68px;
    font-weight: lighter;
    line-height: 1.2;

}
        
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
    .modal-content_voice h2{font-weight:600;margin:40px 0 50px 0;}
    .modal-content_voice dt {font-weight: 600;font-size: 20px;}
    .modal-content_voice dd{margin-bottom:30px;}
    .modal-content_voice img{display:block;margin:auto;}