@charset "UTF-8";
/* 楽しみ方
/* ---------------------------------- */
.mainvisual {
  background: url(/img/dressup/mainvisual.jpg) no-repeat center top;
}

@media screen and (max-width: 768px) {
  .mainvisual .tit_main {
    width: 82%;
    top: 50%;
  }
  .mainvisual .tit_main img {
    margin: 0;
  }
  .mainvisual .tit_main .title01 {
    padding: 6vw 0 0;
    font-size: 5.12vw;
  }
  .mainvisual .tit_main .title02 {
    font-size: 2.34667vw;
  }
}

.box_content {
  display: block;
  width: 100%;
  height: 100%;
  margin: 100px auto 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #f7f5f2;
  position: relative;
}

@media screen and (min-width: 769px) {
  .box_content::before {
    content: '';
    display: block;
    width: 100%;
    height: 45px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.box_content .inner {
  width: 950px;
}

.box_content .wrap {
  padding: 0 0 150px;
  background-repeat: no-repeat;
  background-position: left calc((100vw - 270px) / 2) bottom;
  background-size: 825px;
  position: relative;
}

@media screen and (max-width: 1310px) {
  .box_content .wrap {
    background-position: left 520px bottom;
  }
}

@media screen and (max-width: 768px) {
  .box_content {
    margin: 10vw auto 0;
    padding: 14vw 0 0;
  }
  .box_content + .box_content {
    margin: 5vw auto 0;
  }
  .box_content .inner {
    width: 80%;
  }
  .box_content .wrap {
    display: block;
    padding: 0;
  }
}

.box_content .tit_dressup {
  margin: 75px auto 0;
  padding: 0 30px;
  background: #fff;
  border: 1px solid #6b8ebc;
  font-size: 24px;
  color: #6b8ebc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 5px 5px 0px 0px #c5cfdc;
  box-shadow: 5px 5px 0px 0px #c5cfdc;
}

.box_content .text {
  margin: 30px 0 0;
  font-size: 16px;
  font-weight: bold;
}

.box_content .box_tool {
  margin: 77px auto 0;
  font-size: 16px;
}

.box_content .box_tool dl {
  position: relative;
}

.box_content .box_tool dl dt {
  width: 7em;
  float: left;
  font-weight: 700;
}

.box_content .box_tool dl dd {
  padding: 0 0 13px calc(7em + 10px);
  letter-spacing: -.02em;
}

.box_content .box_tool dl::before {
  content: '';
  display: block;
  width: 960px;
  height: 5px;
  background: url(/img/common/line_circle_pc.png) no-repeat center top;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.box_content .box_tool p {
  margin: 20px 0 0;
}

@media screen and (max-width: 768px) {
  .box_content .tit_dressup {
    margin: 0 auto;
    padding: 2.5vw 6%;
    font-size: 4.8vw;
    line-height: 1.4;
  }
  .box_content .text {
    margin: 3vw 0 0;
    font-size: 4vw;
  }
  .box_content .box_tool {
    margin: 4vw auto 0;
    font-size: 3.73333vw;
  }
  .box_content .box_tool dl dt {
    width: 100%;
    float: none;
    position: relative;
    left: -.5em;
  }
  .box_content .box_tool dl dd {
    padding: 0 0 5vw;
    line-height: 1.8;
  }
  .box_content .box_tool dl::before {
    width: 100%;
    background: url(/img/common/line_circle_sp.png) no-repeat center top/100%;
  }
  .box_content .box_tool p {
    margin: 2vw 0 0;
    line-height: 1.8;
  }
  .box_content .img.sp {
    margin: 7vw auto 0;
    line-height: 0;
  }
}

.ol_flow {
  margin: 20px auto 0;
  list-style-type: none;
}

.ol_flow li {
  width: 450px;
  position: relative;
  padding: 25px 20px 25px 25px;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ol_flow li:nth-child(n+2) {
  margin-top: 40px;
}

.ol_flow li:nth-child(n+2)::after {
  content: '';
  display: block;
  width: 52px;
  height: 23px;
  background: url(/img/common/arrow.png) no-repeat center/100%;
  position: absolute;
  top: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .ol_flow {
    margin: 3vw auto 0;
    display: block;
  }
  .ol_flow li {
    width: 100%;
    padding: 3vw 3vw 5vw;
  }
  .ol_flow li:nth-child(n+2) {
    margin-top: 12vw;
  }
  .ol_flow li:nth-child(n+2)::after {
    top: -8.3vw;
  }
}

.ol_flow .box {
  padding: 42px 0 0;
  position: relative;
  line-height: 1.8;
}

.ol_flow .box .step {
  width: 100px;
  padding: 6px 0 8px;
  position: absolute;
  top: 0;
  left: 0;
  background: #6b8ebc;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}

.ol_flow .box .step span {
  padding: 0 0 0 6px;
  font-size: 16px;
}

.ol_flow .box .btn {
  margin: 10px 0;
  width: 305px;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 300px;
}

.ol_flow .box .btn a {
  display: block;
  text-decoration: none;
  color: #222;
  font-size: 14px;
  font-weight: 700;
  -webkit-box-shadow: 5px 5px 0px 0px #ddd;
  box-shadow: 5px 5px 0px 0px #ddd;
  display: block;
  padding: 12px 0;
  border: 1px solid #888;
  background: #fff;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 768px) {
  .ol_flow .box .btn a {
    padding: 1.5vw 0;
  }
}

.ol_flow .box .btn a::before {
  content: '';
  display: block;
  width: 50px;
  height: 0;
  border-bottom: 1px solid #888;
  position: absolute;
  top: 30px;
  right: -18px;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

@media screen and (max-width: 768px) {
  .ol_flow .box .btn a::before {
    top: 46%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

.ol_flow .box .btn a:hover::before {
  right: -45px;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.ol_flow .box .btn a {
  padding: 16px 0;
}

.ol_flow .box.img_wrap p {
  width: 55%;
}

.ol_flow .box.img_wrap .img {
  position: absolute;
}

.ol_flow .box.img_wrap .img img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .ol_flow .box {
    padding: 10vw 0 0;
  }
  .ol_flow .box .step {
    width: 23vw;
    padding: 6px 0 8px;
    font-size: 2.8vw;
  }
  .ol_flow .box .step span {
    padding: 0;
    font-size: 3.556vw;
  }
  .ol_flow .box .btn {
    width: 90%;
    margin: 3vw auto 0;
  }
  .ol_flow .box .btn a {
    padding: 1.5vw 0;
    line-height: 2.4;
  }
  .ol_flow .box .btn a::before {
    width: 10vw;
  }
  .ol_flow .box p {
    font-size: 3.73333vw;
  }
}

@media screen and (min-width: 769px) {
  .conte01 .wrap {
    background-image: url(/img/dressup/conte01_img01.jpg);
  }
  .conte02 .wrap {
    background-image: url(/img/dressup/conte02_img01.jpg);
  }
  .conte02 .img_wrap {
    padding-bottom: 30px;
  }
  .conte02 .img_wrap .img {
    width: 136px;
    top: 5px;
    right: 20px;
  }
  .conte03 .wrap {
    background-image: url(/img/dressup/conte03_img01.jpg);
  }
  .conte03 .img_wrap .img {
    width: 145px;
    top: 0;
    right: 24px;
  }
  .conte04 .wrap {
    background-image: url(/img/dressup/conte04_img01.jpg);
  }
  .conte04 .img_wrap .img {
    width: 177px;
    top: 20px;
    right: 13px;
  }
}

@media screen and (max-width: 768px) {
  .conte02 .img,
  .conte03 .img,
  .conte04 .img {
    line-height: 0;
  }
  .conte02 .img.sp,
  .conte03 .img.sp,
  .conte04 .img.sp {
    margin: 14vw auto 0;
  }
  .conte01 {
    padding: 5vw 0 0;
  }
  .conte02 .img_wrap .img {
    width: 30vw;
    top: 0;
    right: -1vw;
  }
  .conte03 .img_wrap .img {
    width: 30vw;
    top: 6vw;
    right: 0;
  }
  .conte04 .img_wrap .img {
    width: 32vw;
    top: 6vw;
    right: -2vw;
  }
}

.box_size {
  margin: 80px auto;
}

@media screen and (min-width: 769px) {
  .box_size {
    padding: 0 55px 45px;
    background: url(/img/dressup/ivy_pc.png) no-repeat center top 20px/100%;
  }
}

.box_size .tit_size {
  text-align: center;
  font-size: 24px;
}

.box_size .text {
  margin: 15px 0 0;
  line-height: 2.2;
}

.box_size .txt_att {
  margin: 10px 0 0;
  font-size: 12px;
  color: #666;
}

@media screen and (max-width: 768px) {
  .box_size {
    margin: 13vw auto;
    padding-bottom: 11vw;
  }
  .box_size .tit_size {
    position: relative;
    top: -3vw;
    font-size: 4.8vw;
  }
  .box_size .text {
    line-height: 2.2;
  }
  .box_size .txt_att {
    margin: 3vw 0 0;
    font-size: 3.2vw;
    line-height: 1.8;
  }
}

.box_size table {
  margin: 30px auto 0;
}

.box_size table th, .box_size table td {
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.box_size table th {
  font-size: 16px;
}

.box_size table thead th {
  width: 220px;
  padding: 6px 0;
  border-top: 1px solid #a8b9d3;
  border-bottom: 1px solid #a8b9d3;
  border-left: 1px dotted #d6d6d6;
}

.box_size table thead th:first-child {
  width: 140px;
  border-right: 1px solid #a8b9d3;
  border-left: none;
}

.box_size table tbody th {
  border-right: 1px solid #a8b9d3;
  border-bottom: 1px dotted #d6d6d6;
}

.box_size table tbody td {
  padding: 0 0 2px;
  border-left: 1px dotted #d6d6d6;
  border-bottom: 1px dotted #d6d6d6;
}

@media screen and (max-width: 768px) {
  .box_size table {
    width: 100%;
    margin: 5vw auto 0;
  }
  .box_size table th {
    width: 18vw;
    padding: .1em 0;
    font-size: 4.26667vw;
  }
  .box_size table th + th {
    width: 82vw;
    border-right: none;
  }
  .box_size table tbody tr:nth-child(1) th,
  .box_size table tbody tr:nth-child(5) th,
  .box_size table tbody tr:nth-child(9) th {
    border-top: 1px solid #a8b9d3;
    border-bottom: 1px solid #a8b9d3;
  }
}