@charset "UTF-8";
#custom { margin-bottom: 30px; }

.select_wrap::before{
 content: url(../../img/icon_bottom.png);
}

/* custom_step */
#custom_step { width: auto; }
#title { padding-top: 100px; }
#title .logo { margin-bottom: 30px; }
#title .logo img { width: 50%; }

#title h2 {
  text-align: center;
  margin-bottom: 40px;
}

#title h2 img {
  margin-bottom: 20px;
  width: 30%;
  display: inline-block;
}

#title h2::before {
  margin-left: -30px;
  width: 60px;
  height: 2px;
  left: 50%;
  bottom: 0;
  background: #000;
  content: "";
  position: absolute;
}

#custom_step .s_title {
  line-height: 18px;
  margin: 0 10px 10px;
}

#custom_step .s_title img { width: 35%; }

#custom_step .s_title span {
  font-size: 10px;
  padding-left: 5px;
}

#custom_step .flow_step { margin: 0 10px 30px; }

#custom_step .flow_step dl {
  text-align: left;
  padding: 10px;
  width: auto;
  height: auto;
}

#custom_step .flow_step dt, #custom_step .flow_step dd { display: inline-block; }
#custom_step .flow_step dt, #custom_step .flow_step dl:nth-child(3) dt { margin: 0; }

#custom_step .flow_step dt img {
  vertical-align: middle;
  margin-right: 5px;
  width: 25px;
}

#custom_step .flow_step dl {
  box-sizing: border-box;
  border-bottom: 1px solid #002a62;
  border-right: none;
  width: 100%;
}

#custom_step .flow_step dl:first-child, #custom_step .flow_step dl:last-child { border-left: none; }

#custom_step .flow_step dl:first-child {
  background: url(../../img/icon_flow01.png) 95% 50% no-repeat;
  background-size: 35px auto;
}

#custom_step .flow_step dl:nth-child(2) {
  background: url(../../img/icon_flow02.png) 95% 50% no-repeat;
  background-size: 35px auto;
}

#custom_step .flow_step dl:nth-child(3) {
  background: url(../../img/icon_flow03.png) 95% 60% no-repeat;
  background-size: 70px auto;
}

#custom_step .flow_step dl:nth-child(4) {
  background: url(../../img/icon_flow04.png) 95% 50% no-repeat;
  background-size: 39px auto;
}

#custom_step .flow_step dl:nth-child(5) {
  background: url(../../img/icon_flow05.png) 95% 50% no-repeat;
  background-size: 25px auto;
}

#custom_step .flow_step dl:before {
  margin-left: -8.5px;
  width: 17px;
  height: 17px;
  top: auto;
  left: 50%;
  bottom: -8.5px;
  background: url(../../img/icon_arrow02.png) 90% 50% no-repeat;
  background-size: 17px auto;
}

#custom_step .flow_step dd br { display: none; }

/**/
#in_custom { padding-top: 30px; }

#in_custom, #in_select, #in_select, #select {
  width: 100%;
  float: none;
}

#mainimage {
  margin: 0 auto;
  width: 300px;
  float: none;
}

#front_image > div {
  
}

#btn_frba {
  text-align: center;
  margin: 15px auto 30px;
  width: 80%;
}

#btn_frba li { width: 40%; }

#select .title, #select .title span, #select .st {
  font-size: 12px;
  line-height: 26px;
}

#select .sst {
  font-size: 10px;
  padding: 10px 0 0;
}

#select .sst2 {
  font-size: 10px;
  padding-top: 10px;
}

#btn_print {
  font-size: 14px;
  margin: 20px auto;
  width: 80%;
  display: none;
}

#in_select { height: auto; }
#in_select { padding: 10px; }

#mainimage img {
  width: 100%;
  height: auto;
}

#btn_print li a, #btn_frba li { font-size: 12px; }

/* font */
/* 01 */
#mainimage #front_image .view_logo > div:first-child {
  transform: scale(0.2);
  width: 52%;
  top: 20%;
  left: 33%;
}

#mainimage #back_image .view_logo > div:first-child {
  transform: scale(0.7);
  top: 22%;
}

#front_image .view_logo > div:first-child .bottom_image { top: 730px; }

#back_image .b1_main {
  font-size: 24px;
  letter-spacing: 0.05em;
  line-height: 28px;
  height: 28px;
}

#back_image .b1_main span {
  line-height: 36px;
  height: 36px;
}

#back_image .b1_sub1 {
  font-size: 12px;
  height: 22px;
}

/* 02 */
#mainimage #front_image .view_logo > div:nth-child(2) {
  transform: scale(0.6);
  top: 21%;
}

#front_image .view_logo > div:nth-child(2) .bottom_image { top: 200px; }

#mainimage #back_image .view_logo > div:nth-child(2) {
  transform: scale(0.55);
  width: 50%;
  top: 22%;
  left: 26%;
}

/* 03 */
#mainimage #front_image .view_logo > div:nth-child(3) {
  transform: scale(0.6);
  top: 20%;
}

#mainimage #back_image .view_logo > div:nth-child(3) {
  transform: scale(0.55);
  width: 45%;
  top: 22%;
  left: 28%;
}

/* 04 */
#mainimage #front_image .view_logo > div:nth-child(4) {
  transform: scale(0.4);
  width: 20%;
  top: 23%;
  left: 48.5%;
}

#front_image .f4_sub2 {
  letter-spacing: 1em;
  text-indent: 0em;
}

#mainimage #back_image .view_logo > div:nth-child(4) {
  transform: scale(0.55) rotate(90deg);
  width: 45%;
  top: 22%;
  left: 28%;
}

#back_image .b4_main {
  padding-top: 5px;
  background: none;
}

#back_image .b4_sub1 { padding-bottom: 5px; }
#front_image .view_logo > div:nth-child(4) .bottom_image { margin: 330px 0 0 0; }

/* 05 */
#mainimage #front_image .view_logo > div:nth-child(5) {
  transform: scale(0.2);
  width: 50%;
  top: 23%;
  left: 35%;
}

#mainimage #back_image .view_logo > div:nth-child(5) {
  transform: scale(0.5);
  width: 50%;
  top: 20%;
  left: 25%;
}

#front_image .view_logo > div:nth-child(5) .bottom_image { margin: 680px 0 0 0; }

/* 06 */
#mainimage #front_image .view_logo > div:nth-child(6) {
  transform: scale(0.6) rotate(90deg);
  width: 35%;
  top: 26%;
  left: 37.5%;
}

#front_image .view_logo > div:nth-child(6) .bottom_image {
  top: -40px;
  left: 250px;
}

#mainimage #back_image .view_logo > div:nth-child(6) {
  transform: scale(0.5) rotate(90deg);
  width: 50%;
  top: 25.5%;
  left: 25%;
}

/* slick */
.slick-slide img { width: 80%; }
#wear button.slick-prev, #wear button.slick-next { top: 50%; }
#logo button.slick-prev, #logo button.slick-next { top: 15%; }