@charset "UTF-8";

#main_contents #select_step .step .select_up .off {
	display: none;
}
#main_contents #select_step .step .select_up .opentext {
	display: block;
}
#main_contents .select_up ul span {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#main_contents #select_step .order_button a {
	cursor: default;
}
#main_contents #select_step .order_button a.abled,
#main_contents #select_step .init_img label img,
#main_contents #btn_init img,
#main_contents #selectring_top img {
	cursor: pointer
}

.offtarget {
	display: none;
}

    @keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.hide{
    display: none;
}

.show{
    display: block;
}

.show2{
    display: block;
    animation: show 0.3s linear 0s;
}


/* 736px以下用（SP用）の記述------------------------------------------- */
@media screen and (max-width: 736px) {



#main_contents .bg {
	margin: 0 auto;
	background-image:url("../../../img/lp/select_ring_2022/bg.png");
	background-repeat: no-repeat;
	background-position: top;
	width: 100%;
	background-size: 100%;
	display: block;
}


/*------------------------------------------ main_ttl_area */

#main_contents #main_ttl_area .main_ttl {
	margin: 0;
	padding: 12.13% 0 0 1.466%;
	width: 68%;
}
#main_contents #main_ttl_area .main_desc {
	margin: 42.66% 0 0 18.4%;
	width: 61.466%;
}


/*------------------------------------------ gold_color_ring */

#main_contents #gold_color_ring {
	margin: 0 auto;
	width: 75.6%;
	position: relative;
}
#main_contents #gold_color_ring .gcr_bg {
	margin: 7.466% 0 0;
	position: relative;
}
#main_contents #gold_color_ring .btn_start {
	margin: 135.8% 0 0;
	position: absolute;
	top: 0;
	left: 28.22%;
	width: 43.38%;
}

/*------------------------------------------ step */

#main_contents #select_step #select_ttl {
	margin: 5.6% auto 0;
	width: 45.73%;
}
#main_contents #ring_image_area {
	position:relative;
}
#main_contents #ring_image {
	width: 100%;
	margin: 25% auto 2%;
	height: 33vw;
}
#main_contents #ring_image #gradieit {
	width: 100%;
	margin: 6% auto 0;
}
#main_contents #ring_image #gradieit .order_button {
	margin: 40% auto 0;
	width: 59.06%;
	top: 0;
	left: 20.53%;
	position:absolute;
	z-index: 10;
}
#main_contents #ring_image #change_ring {
	text-align: center;
}
#main_contents #ring_image #change_ring img {
	width: 70%;
}
#main_contents #select_step {
	position: relative;
}
#main_contents #select_step #gold_bg {
	margin: 4.4% auto 0;
	width: 96%;
}
#main_contents #select_step #gold_section {
	position: relative;
	top: 0;
	bottom: 0;
	text-align: center;
}
#main_contents #select_step .close {
	display: none;
}
#main_contents #select_step .init_img {
	margin: -1% 2% 0;
	transition: all 1s ease-out;
	position: relative;
}
#main_contents #select_step .init_img img {
	width: 98%;
}
#main_contents #select_step .init_img input[type="radio"] {
	display: none;
}
#main_contents #select_step .step {
	padding: 0;
	background-size: 100% 100%;
}
#main_contents #select_step .init_img .select_up {
	position: absolute;
	top: 0;
	left: 4%;
	display: none;
	z-index: 98;
	border: 1px solid #c0c0c0;
	width: 93.8%;
}
#main_contents #select_step .init_img  div.on {
	display: block;
	background-color: #fff;
	animation-duration: 0.5s;
	animation-name: fade-in;
	-moz-animation-duration: 0.5s;
	-moz-animation-name: fade-in;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-name: fade-in;
}
#main_contents #select_step .init_img .fade_box {
	display: none;
	position: absolute;
	width: 94%;
	height: 100%;
	opacity: 0.5;
	background: #fff;
	left: 2%;
	right: 0;
	margin: 0 auto;
}
#main_contents #select_step .select_up .sp_only {
	position: relative;
	display: flex;
	align-items: flex-start;
}
#main_contents #select_step .select_up .sp_only > img {
	width: 30%;
	position: relative;
	left: -4%;
	top: -3%;
}
#main_contents #select_step .step .select_up ul {
	position: absolute;
	width: 75%;
	top: 0;
	right: 0;
	list-style: none;
	margin: 2% 0 0;
}
#main_contents #select_step .step .select_up li {
	display: inline-block;
	cursor: pointer;
	margin: 0;
	width: 100%;
	right: 0;
	position: relative;
}
#main_contents #select_step .step .select_up li img {
	width: 100%;
	padding-right: 0.5%;
}
#main_contents #select_step .step .select_up ul #g_di_text {
	display: block;
	position: relative;
	text-align: left;
}

/* 260313 追記 */
#main_contents #select_step .step .select_up ul #g_di_text img {
	display: block;
	position: relative;
	left: 5%;
	width: 70%;
}
#main_contents #select_step #g_di_text .notice {
	display: block;
	width: 100%;
	margin-left: 5%;
	margin-top: 2%;
	font-size: 2.5vw;
}
/*--------------*/


#main_contents #select_step .order_button a {
	display: block;
	width: 96%;
	margin: 0 auto;
}
#btn_init {
	margin: 40% auto 0;
	width: 59.06%;
	top: 0;
	left: 20.53%;
	position:absolute;
}


/*------------------------------------------ button_area */

#main_contents #button_area ul  {
	width: 100%;
	margin:  10.794% auto;
	text-align: center;
}
#main_contents #button_area ul li  {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
#main_contents #button_area ul li:first-of-type {
	margin-bottom: 2%;
}
#main_contents #button_area ul li img  {
	width: 64%;
}


/*------------------------------------------ selectring_top */

#main_contents #selectring_top {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 10%;
	z-index: 999;
}
#main_contents #selectring_top img {
	width: 100%;
}


/*------------------------------------------ pane_topic_path */

#main_contents .pane_topic_path {
	margin: 36% 0 2%;
}


/*------------------------------------------ visible hidden */
.visible-sp {
	display: block !important;
}

.visible-pc {
	display: none !important;
}
.hidden-pc{
	display:block !important;
}

}
/* 736px以下用（SP用）の記述 end--------------------------------------- */


@media screen and (min-width: 737px) {
/* 737px以上用（PC用）の記述------------------------------------------- */



#main_contents {
	margin: 0 auto;
	min-width: 1200px;
}
#main_contents .bg {
	min-width: 1200px;
	margin: 0 auto;
	background-image:url("../../../img/lp/select_ring_2022/bg_pc.png");
	background-repeat: no-repeat;
	background-position: center top;
	padding-bottom: 0;
	display: block;
}
#main_contents .select_wrap {
	max-width: 1400px;
	margin: 0 auto;
}


/*------------------------------------------ main_ttl_area */

#main_contents #main_ttl_area {
	margin: 0 auto;
	padding-bottom: 47.93%;
	position: relative;
}
#main_contents #main_ttl_area .main_ttl {
	margin: 5% auto 0;
	width: 36.285%;
	position: absolute;
	top: 0;
	left: 10%;
}
#main_contents #main_ttl_area .main_desc {
	margin: 21.785% auto 0;
	width: 24.64%;
	position: absolute;
	top: 0;
	left: 15.36%;
}


/*------------------------------------------ gold_color_ring */

#main_contents #gold_color_ring {
	margin: 0 auto;
	width: 67.5%;
	position: relative;
}
#main_contents #gold_color_ring .gcr_bg {
	margin: 0;
}
#main_contents #gold_color_ring .btn_start {
	margin: 38.52% auto 0;
	width: 23.49%;
	position: absolute;
	top: 0;
	left: 55.87%;
}
#main_contents #gold_color_ring .btn_start img {
	transition: all 0.3s;
	cursor: pointer;
}
#main_contents #gold_color_ring .btn_start img:hover {
	opacity: 0.6;
}


/*------------------------------------------ step */

#main_contents #select_step #select_ttl {
	margin: 1.42% 0 0 27.43%;
	width: 23.21%;
}
#main_contents #select_step #gold_section {
	display: flex;
	justify-content: space-between;
	width: 87.64%;
	margin: 0 auto;
}
#main_contents #select_step .close {
	display: none;
}
#main_contents #select_step .init_img {
	width: 100%;
	position: relative;
}
#main_contents #select_step .init_img input[type="radio"] {
	display: none;
}
#main_contents #select_step .init_img input[type="radio"] label {
	width: 100%;
}
#main_contents #select_step .init_img img {
	width: 100%;
}
#main_contents #select_step .step {
	position: relative;
	display: inline-block;
	top: 18px;
	vertical-align: top;
}
#main_contents #select_step .step:last-of-type {
	margin-right: 0px;
}
#main_contents #select_step #pla_design,
#main_contents #select_step #gold_color {
	margin-right: 0px;
	margin-left: 0px;
}
#main_contents #select_step .init_img .select_up {
	position: absolute;
	bottom: 19px;
	left: 0;
	right: 0;
	display: none;
	z-index: 100;
}
#main_contents #select_step .init_img div.on {
	display: block;
	width: 91.856%;
	animation-duration: 0.5s;
	animation-name: fade-in;
	-moz-animation-duration: 0.5s;
	-moz-animation-name: fade-in;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-name: fade-in;
	border: 1px solid #c0c0c0;
	margin: 0 auto -1%;
}
#main_contents #select_step .init_img .fade_box {
	display: none;
	position: absolute;
	width: 91.856%;
	opacity: 0.5;
	background: #fff;
}
#main_contents #select_step .select_up {
	background-color: #fbfbfb;
}
#main_contents #select_step .select_up .tops_img {
	position: relative;
	bottom: 55px;
}
#main_contents #select_step .step .select_up ul {
	list-style: none;
	margin: 0;
	position: relative;
	top: -23px;
}
#main_contents #select_step .step .select_up li {
	width: 100%;
	text-align: center;
	display: block;
	cursor: pointer;
	margin: 0 0 45px 0;
}
#main_contents #select_step .step .select_up li img {
	width: 100%;
}
#main_contents #select_step .step .select_up li:first-of-type {
	margin-top: 0.5em;
}
#main_contents #select_step .step .select_up li:last-of-type {
	margin-bottom: 15px;
}



/* 260313 修正*/
#main_contents #select_step #g_di_text {
	margin: 0 auto;
	width: 100%;
	display: block;
}
#main_contents #select_step #g_di_text img {
	width: 68.855%;
}
#main_contents #select_step #g_di_text .notice {
	display: block;
	width: 90%;
	margin: 0 auto;
	font-size: 12px;
}
/*----------------*/


#main_contents #select_step .order_button {
	display: inline-block;
	position: relative;
	top: 18px;
}
#main_contents .select_up ul span {
	position: relative;
	width: 90%;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 0;
	text-align: center;
}
#main_contents #ring_image {
	margin-top: 14.285%;
	margin-bottom: 9em;
	height: 269px;
}
#main_contents #ring_image #gradieit div {
	text-align: center;
	height: 74px;
}
#main_contents #ring_image #change_ring {
	text-align: center;
	position: relative;
	bottom: 15px;
	z-index: 10;
	height: 195px;
}
#main_contents #ring_image #change_ring img {
	width: 28.86%;
}
#main_contents #ring_image #change_ring #prev {
	width: 26.43%;
	position: relative;
	top: 5px;
}
#main_contents #ring_image #gradieit #pg_context {
	position: absolute;
	width: 42.64%;
	margin: 14% 0 0;
	top: 0;
	left: 29.43%;
}
#main_contents #ring_image_area {
	position: relative;
	margin: 0 auto;
}
#main_contents #ring_image #gradieit .order_button {
	position: absolute;
	margin: 21% auto 0;
	width: 24.36%;
	top: 0;
	left: 37.93%;
	transition: all 0.3s;
	z-index: 10;
}
#main_contents #btn_init {
	position: absolute;
	margin: 21% auto 0;
	width: 24.36%;
	top: 0;
	left: 37.93%;
	transition: all 0.3s;
}
#main_contents #btn_init:hover {
	opacity: 0.6;
}


/*------------------------------------------ selectring_top */

#main_contents #selectring_top {
	position: fixed;
	top: 25%;
	right: 0;
	z-index: 999;
	transition: all 0.3s;
}
#main_contents #selectring_top:hover {
	opacity: 0.6;
}

/*------------------------------------------ pane_topic_path */

#main_contents .pane_topic_path {
	width: 85.71%;
	margin: 15% auto 1.785%;
}

/*------------------------------------------ visible hidden */

.visible-sp {
	display: none !important;
}

.visible-pc {
	display: block !important;
}
.hidden-pc{
	display:none !important;
}


}
/* 737px以上用（PC用）の記述 end--------------------------------------- */


/* 1399px以下用（PC用）の記述------------------------------------------- */
@media screen and (min-width:738px) and ( max-width:1399px) {

#main_contents  .bg {
	min-width: 1200px;
	margin: 0 auto;
	background-image:url("../../../img/lp/select_ring_2022/bg_pc_1400.png");
	background-size: 100%;
}

/* 1399px以下用（PC用）の記述 end--------------------------------------- */
}